西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
项目背景
作为重大促销期间的坚实功能场所，我的专属电商场馆始终定位于满足用户与“我”相关的需求。 核心目标是通过高效导购促进购买转移，协助拉动整体GMV。 推动。
各电商专属场馆除了承载其长期的个性化导购目标外，还将承载增加服务曝光、带动服务增长的业务，以配合平台在促销期间推广京东的服务业务。 因此，在这个618 My专属场地的设计和定位中，转化率是北极星指标，服务新用户增长&服务转化率是重点关注的关键指标，并优化导购维度，提高导购效率，点击和“我”相关的服务需求是核心关注点。 下面，一流设计网()带您看看相关的设计流程。
设计理念
1. 创建一个“与我相关”的浏览线程
经过多年大销的验证和积累，My Exclusive Venue已经形成了一定的固化用户心态，即与“我”强相关，与大销优惠强相关。 因此，基本框架可以概括为“功能区”和“推荐区”两部分。
功能区的主要目的是让用户快速识别我的专属页面，满足用户在促销期间主动搜索固定功能的愿望。 推荐区采用专属、个性化的导购维度，满足用户浏览页面的欲望。
在具体动线设计方面，除了遵循上述基本原则外，这次我们还重点延续了产品迭代的思路，根据去年618和双11的数据效果对动线进行了优化，并将其与此服务相结合以吸引新客户。 挑战目标，将服务内容与用户相关需求相结合，适当提供更多的曝光和强化。
2、增强内容层面的排他感
降低功能层级，提高独家内容曝光优先级
根据以往的数据，功能区一直是页面上点击率高、转化率高的模块。 经过去年双11尝试扩大部分入口信息后，数据明显改善。 因此，在这次618中，我们不断强化满足用户需求的内容。 功能价值并降低功能层级，扩充“我的优惠”和“我的足迹”信息，新增满足用户需求的“我的常购”功能，同时推动上游功能接口打造排他性信息，如优惠券提醒、频繁购买等； 固定功能入口也根据数据效果优化了展示顺序，并加强了信息更新提醒，增加了整个区域的吸引力。
迭代专属推荐维度
在推荐区的迭代中，第一步就是延续高颜值维度，优化设计细节。 例如，原子层面迭代身份投注模块，强化差异化身份标签案例讲解：电商促销活动的设计流程是怎样的？shopify搭建，凸显不同用户的专属感受； 针对经常购物的品类进行AB测试，验证不同折扣表述对用户的吸引力。
第二步，弱化、淘汰低价值维度电商促销，探索新维度。 例如，根据年货节期间频繁测试的新维度数据结果发现，场景维度、场地维度数据表现一般，而综合BI导购魔方表现较好，尤其是标签和列出材料。 因此shopify开发，这次添加了标签和列表。 聚焦专属推荐楼层，根据用户身份标签生成个性化文案，打造与我相关的专属氛围。 对于一直表现平平但因战略支撑而需要呈现的附近商铺模块，则与列表标签整合在一起，降低楼层高度，提升整体浏览效果。
3、利用“情感”氛围与用户沟通
品牌延续
整体视觉延续主会场“爱如光”的主题，与主KV保持一致。 “我的”场地是与用户自身相关的重要场地。 它贯穿了整个时期的整个时间线。 视觉形式需要与预售期和非预售期的整个主线视觉风格相匹配。 “我的专属”主打智慧服务，也将承载提升服务曝光度、带动服务增长的业务需求。 因此，整体视觉在预售期间采用“弹幕”图形元素，在非预售期间采用“周年庆狂欢”图形元素，以保证与全期一致。 主KV的视觉风格保持一致。 同时，整个场馆采用科技蓝色基调，营造科技、智能、趣味的整体基调，以增加服务的曝光度，带动服务业务的增长速度。
营造特定身份的氛围
纵观“我的专属”会场，预约用户的身份与用户信息息息相关。 视觉效果需要营造一种与用户强烈相关的氛围，让用户在《我的专属》中找到归属感。 这次我们的主KV图形以“弹幕”为灵感，在标题图片上传达传达的目的，利用弹幕营造“情感”氛围来尝试与用户沟通，根据用户的不同身份营造不同的视角氛围，如下:
普通用户：通过分析用户行为，制定身份关键词，将弹幕氛围与前端技术相结合，通过弹幕气泡的动画效果给用户呈现惊喜感，让用户感受到“京东一直在默默关怀”关于你。”
PLUS用户：为了凸显PLUS的特殊性，头像外框放置了PLUS的品牌色，弹幕氛围中放置了PLUS用户在618的专属优惠信息，向PLUS传达贴心的服务用户。
生日用户：对于生日在6月1日至18日之间的用户，我们在头部图片氛围上贴上“生日快乐”的标签，同时也将最真挚的祝福融入弹幕气泡中，表达弹幕氛围。 关爱生日用户。
专属礼包
此次，618积分以三个时段为活动节点，在不同时段发放三份专属礼包。 为了展现用户不同的专属特征，将时代特征和身份标签融入到视觉风格和氛围中。
专属礼包：特殊时期为不同身份用户赠送的优惠券礼包。 为了突出折扣信息，本次礼包对背景氛围进行了降级和弱化，使得优惠券的身份信息和折扣信息更加突出和强化。 咔嗒咔嗒的感觉。
618超级礼包：高潮期是整个活动的最高潮，所以高潮期的礼包视觉效果会与主会场相呼应，主题气氛会更加热闹。 主题风格中加入了礼盒、京都豆、优惠券等插画。 用物品营造整个狂欢氛围，让用户深刻感知年中购物时的强力折扣。
生日礼包：此次特别为6月1日至6月18日期间与京东同日生日的用户发布贴心礼包，生日用户首次打开礼包时，礼盒会弹出向上摇晃即可打开礼盒。 这样的设计是为了给生日用户带来一种神秘感。 和惊喜感。 打开礼盒后，里面是我们的生日券礼包。 在生日券礼包中，我们以蛋糕为主体。 同时，我们将其与前端技术相结合，使生日蜡烛的火光摇动起来。 为了实现真实的生日庆祝场景，我们使用视觉尝试和用户沟通——京东将在您的重要日子与您同在。
4.通过技术让页面更有吸引力
我的专属场地承载了我的各种身份，没有太多其他内容，整体结构比较简单。 那么如何通过前端优化，让进入页面的用户快速感受到这种“专属身份”的氛围呢？ 如何丰富页面的内容展示？ 我们从以下几个方面进行了实践。
标题标识元素动画
页眉是整个页面氛围最重要的部分。 用户进入页面首先看到的就是页眉的身份标识。 那么我们要做的就是吸引用户停留在这里，查看他们的专属信息，所以我们尝试给头部图片一个标识元素添加一些动画效果，以留住用户的注意力。 首先我们来看看实际的成品：
主要优化点：
SVG 圆形渐变实现。 由于目前没有更好的方法来实现圆形渐变，因此我们采用了节省曲线的解决方案。 实现方法是使用2层SVG，一层是完整的径向渐变，另一层是50%裁剪的径向渐变。 ，最后叠加成圆形渐变；
加上铭牌高亮动画。 PLUS铭牌是身份的象征。 我们使用背景动画来达到高亮效果，体现高贵感；
礼包氛围优化
当地场馆主推的促销计划是各种身份礼包，包括生日礼包、专属礼包、618礼包等。 不同的礼包会有不同的弹出效果。 设计确定后，我们认为生日礼包是我们的主要促销计划。 但是，如果只是一个简单的弹窗，就不会给生日用户带来惊喜感，所以我们决定在弹窗中添加一些内容。 为了优化气氛，与视觉同学讨论方案后，我们决定模仿真实的礼品盒打开，并添加蜡烛燃烧的效果电商促销，让用户有参与感。 显示效果如下：
楼层标题动画
由于页面本身的结构比较简单，从浏览的角度来看页面也比较单调，所以我们从前端的角度思考，如何使用一些更有“技术意义”的做法呢？ 最近observe这个功能很有趣，我们就来尝试一下吧。
我们给所有楼层添加了一个observe监听器，当触发enter事件时，执行动画。 之所以使用这个功能，是因为我们发现observe的兼容性非常好，不需要像以前那样频繁的触发scroll，而且触发条件也相对更加准确。 经过测试，我们发现效果非常好，省去了遮挡滚动的方法，而且这个小小的优化让操作和产品都感觉非常亮眼。
项目成果
1. 页面显示
这次视觉上注重气氛，更多的是情感营造氛围。 与以往较为功能化的特点不同，礼袋和标题图片的色彩更加柔和，造型更加精致，具有科技感和专属感。 定投状态给用户带来情感共鸣。
基于运营策略的差异，与之前的“我的”页面相比，这次更加注重排他感和点击量来辅助京东服务业务的曝光和流量。
2. 数据呈现
该场馆北极星指标目标实现，转化率和新服务用户增速较2019年双11大幅提升。随着设计策略和运营策略的优化，也带动了订单量和订单量的大幅增长。点击小时。 推动。
一流设计网（）提醒我们，通过产品化的迭代思路，避免每一项活动都从头开始。 除了提升设计效果之外，创意的迭代和沉淀也能真正用数据创意驱动每一个电商活动。 能够稳步成长，实现设计和商业价值的最大化。
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。