营销大促会场视觉改版体验优化

b6b55e9363e19240346ac05cc0a10634.gif

营销会场一直是大促活动的标志性产品,伴随大家走过了每一个“双11”、“618”;如今淘宝的活动更加丰富频繁,我们也一直在为会场这个成熟的产品持续做优化升级。

e10db4421890420e430109d442511acf.png

部分历史会场截图

今年,我们对营销会场做了一些至关重要的优化,分收敛、统一、提效三个阶段逐步实现,解决了诸多历史问题的同时也融入了我们对于会场新的思考。

7d980e4330a42085238aa8bf512c30fe.png

会场设计优化的三个阶段

b77ba2f87aa36bea40e614f1b7b388d8.png

收敛:删繁就简

会场是通过模块搭建的方式来实现的,模块会在不同活动中反复使用;随着时间的推移,我们的用户群体在发生变化,用户的设备不断升级,使用习惯也在改变,这使得许多老旧模块在新的环境下已经变得不再合适。

这些不合适的模块往往存在文字可读性差、内容过于密集、信息层级不清晰等问题;针对这些问题我们梳理了一些设计原则来做统一优化调整。

2ceec1086a8a5ec5ea2fe02c4fbb621f.gif

部分优化调整的模块举例

  内容减负与“氛围”降噪

营销会场需要真实、准确、高效地向消费者传递商品内容、活动信息;所以要严格控制信息密度,减少非必要的内容,并不是字越多越好,对于“写了也没错,不写也可以”的信息,要做到最大限度地删减。

长久以来,会场的设计中都用到较多的装饰性视觉元素,以实现浓重的“营销氛围”风格;但在实际效果上来看,过度的风格化视觉表达往往会干扰用户浏览商品信息。

6b943ab1b9b5d81ce6708acd747b879f.png

减少“氛围”对商品信息的干扰

  信息分层与结构变通

页面信息需要有主次之分,就像文章要区分标题和正文一样;在页面框架和交互层面做到扁平简洁的同时,要对页面信息做仔细的推敲分级,方便用户更轻松地阅读理解内容。

adb47513b902a1c8f3627678712dd680.png

设计合理的字号字重与图层关系

在一些复杂业务场景中,需要透露出的信息较多却又不可以删减,这时候如果生硬地套用组件规范就会设计出非常难以阅读的模块,需要我们灵活地调整布局形式。

7e68745bb272a93f68091b06a933f0b8.png

灵活调整模块布局

 
 
统一:体验一致

同样一件事情在分属不同业务和团队去做设计的时候,大家凭经验去做了各自认为合理却又并不相同的方案,这种不一致的情况增加了用户的理解成本,带来了混乱的负面体验。

为了解决以上问题,在经历了一轮地毯式的收集整理与重新设计之后,我们将几千个历史模块最终收敛成了150多个常用模块,并完成了模块的组件化。

  基础规范

我们首先制定了精简严格的基础视觉规范,对老旧不合理的模块细节做统一修改。

017b103f12a66bd33f2c56b5c7d89481.png

字号与栅格规范

  组件化

针对常见的模块结构,设计统一的模块标题、标签、商品字段布局等细节,将常见模块做组件化拆解,避免同类组件的不同表达造成的混乱。

ebde87411623f3e4914fa0a688652776.png

将常见的模块状态做成可复用的组件

为了将规范更好地被遵循使用起来,不仅需要设计层面的组件化,也需要从代码层面封装成可调用的组件,不再需要反复地绘制设计稿和写代码,极大地降低规范在落地过程中出错的可能性。

  更新维护

当模块组件确定之后,不会轻易做修改,但在遇到新的应用场景的时,需要增加一些组件和细分状态,通过维护在线的组件库,做到一处新,处处新,所有设计师都能用到最新最全的组件库和模块案例。

4612c9da24001a1421deee0cb375dd4b.png

线上组件库

提效:快速迭代

  精简交互层级

会场的主页框架很久没有更新过,一直有顶部和底部两个导航栏,从最近的双12活动开始,我们尝试将其简化成了统一的顶部导航。这个变化使会场的页面交互逻辑更清晰易懂,也有效地提升了页面的导购空间内容占比。

ba1c0c76f920f24a286018f5d734eb43.png近期大促主会场框架的优化


  控制屏效

追求高屏效,并不是机械地把页面内容缩小让页面塞下更多,而是要让用户在有限的屏幕空间和浏览时长内,轻松获取更多有价值的信息。新的方案由原有固定版头高度的画面演绎调整为高矮版头的动态切换,强化利益点信息,提升传达有效性。

38cd0e024547d193838c1e42b1494954.gif

618、双旦首屏效率对比

  效率与氛围的平衡

先前的版本固定版头高度限制了信息与视觉的表达,要么强化信息,要么雕琢氛围。新版本灵活的版头高度变换可以让信息与视觉更突出,做到兼顾效率与氛围。

aba412ee708cc9b7099834f86bfc7b7a.gif

双旦全屏/高版头动效切换

在近期的双旦会场中,我们尝试用更丰富的视觉表现来贴合运营主题,进行更生动的演绎。

37cf2c7ce47128de15e30c4aaae68f9a.gif

双旦波段视觉效果

716e2cf6a815a7aa3032a95a0086b89c.gif

特色会场横滑切换

在不同时间段,可以给不同用户推送他们更感兴趣的功能,版头不仅仅能传达氛围和信息,更可以拓展实用性。

745e3f19627a36523f7d064bf5488256.gif

权益版头、直播版头、倒计时、互动版头切换


  视觉表达的多样化

视觉需要辅助内容更好地沟通,多样性的视觉则更贴切地将主题传递给用户。在主题会场中,丰富的版头设计与页面做到了很好的衔接,让页面更整体、协调。‍

087d722b59eecac146d61034f4b4af35.gif

dd83f740c227f6717653d75be945ef60.gif

416c6b13babb4754281532e32c6bd320.gif

品类、热点、节日多种类型会场

28944e861fc42828599293d865023047.jpeg

结语

回顾2024,这一年的会场经历了艰难复杂的蜕变,虽然是一个成熟的产品,但只要用心去研究打磨,总能找到突破和创新的机会。展望2025,我们会继续大胆尝试,小心打磨,为大家呈现更好的大促体验。

¤ 拓展阅读 ¤

3DXR技术 | 终端技术 | 音视频技术

服务端技术 | 技术质量 | 数据算法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值