打开网易新闻 查看更多图片

本文授权转自:淘宝设计(ID:ali_taobaoued)

引言

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

打开网易新闻 查看更多图片

▲ 部分历史会场截图

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

打开网易新闻 查看更多图片

▲ 会场设计优化的三个阶段

#01

收敛

删繁就简

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

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

打开网易新闻 查看更多图片

▲ 部分优化调整的模块举例

内容减负与“氛围”降噪

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

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

打开网易新闻 查看更多图片

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

信息分层与结构变通

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

打开网易新闻 查看更多图片

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

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

打开网易新闻 查看更多图片

▲ 灵活调整模块布局

#02

统一

体验一致

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

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

基础规范

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

打开网易新闻 查看更多图片

▲ 字号与栅格规范

组件化

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

打开网易新闻 查看更多图片

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

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

更新维护

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

打开网易新闻 查看更多图片

▲ 线上组件库

#03

提效

快速迭代

精简交互层级

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

打开网易新闻 查看更多图片
▲ 近期大促主会场框架的优化

控制屏效

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

打开网易新闻 查看更多图片

▲ 618、双旦首屏效率对比

效率与氛围的平衡

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

打开网易新闻 查看更多图片

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

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

打开网易新闻 查看更多图片

▲ 双旦波段视觉效果

打开网易新闻 查看更多图片

▲ 特色会场横滑切换

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

打开网易新闻 查看更多图片

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

视觉表达的多样化

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

打开网易新闻 查看更多图片

打开网易新闻 查看更多图片

打开网易新闻 查看更多图片

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

结语

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

文章转载:淘宝设计,版权归原作者所有

原文链接:https://mp.weixin.qq.com/s/k_4BYhU9I-CaNuZ24it2Dg

版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源,本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证,仅供读者参考。部分文章推送时未能与原作者取得联系,若涉及内容或作品等版权问题,烦请原作者联系我们,给出内容所在的网址并提供相关证明资料,我们会核查后立即更正或者删除有关内容!本公众号不承担任何责任,并拥有对此声明的最终解释权。

联系微信:18802086168

联系电话:18802086168

编排 | 张宝予

终审 | 苏 菁

打开网易新闻 查看更多图片

点这里,学习更多设计知识!