为了让你双11买买买，淘宝的互动设计太下功夫了！

引言

淘宝双 11 互动玩法已持续多年，从 2018 年《双 11 狂欢之城》到 2023 年《幻想岛总动员》，过去双 11 互动旨在营造一个轻松愉快的“游戏场”，吸引用户持续游玩 - 积累奖励 - 最终开奖，获得权益后去购物，打造先蓄水后爆发的模式。设计侧的重点主要围绕世界观的完整性、玩法的丰富度、组队 PK 的对抗性等方面打磨体验。

今年双 11 淘宝为了给用户更好的购物体验，拉长了整个双 11 的周期，用户在过程中随时可以购买自己心仪的商品，互动侧也将过去“游玩蓄水-开奖爆发”的模式进行相应调整，转换为用户游玩可获得双线权益：淘金币积累即时可用、最终抵扣金积攒定期开奖的模式，增强用户持续游玩的动力、过程中即时获得感以及权益直接可用于购买商品。

设计策略

最大化传递核心权益价值，引导用户快速理解并获取权益，并在互动过程中使用这些权益，实现边玩边买的无缝体验。

一、玩法选型

更高的屏效、更普适的玩法、更直接的表达

基于边玩边买的命题，主界面切分为玩法区和导购区，玩法区缩窄至去年的五分之二，留出更多的空间给金币抵扣商品曝光，让用户直观感受到权益的价值，驱动用户参与玩法获得权益。

为了在有限的空间内打造一个易于理解、反馈清晰且具有持续牵引力的玩法，选用了淘金币 IP“金仔”结合“大富翁”玩法，通过格子布局来营造一种向前的延伸感，配合金仔跳跃的动作，使用户能够直观地理解前进获取格子上的奖励。

二、场景打造

简单而不简陋，丰富而不繁杂

互动场景的差异化塑造：场景设计上采用 2.5D 的视觉表现手法，以最简洁的方式创造出玩法场景与导购场景的差异性。氛围元素与光影采用了更加概括性的手法处理，保持了视觉上的连贯性和一致性，简约但不失生动性和层次感。

简单明快的色彩：为了营造出热烈而充满活力的大促氛围，我们选择了饱和度较高的色彩作为整体色调，大面积的浅色上配合一点明快的色彩作为点缀，让整个页面看起来和谐且不乏味。

IP 情绪调配：IP 的情绪表达在互动中一直扮演着重要角色，今年双 11 互动与淘金币频道结合，故将淘金仔形象做了适当的风格化处理，出现在一些点位上，起到情绪价值调配的作用。

三、信息排布

核心价值最大化传递

自然浏览路径：打破传统的居中排版方式，依据人眼自然的 F 形扫描模式调整布局，让重要元素更加靠近用户视线左上起点，放大对用户最重要的信息。

字体字号选择：不同于以往的装饰性字体，此次特别选择了无衬线字体，仅对重要信息做了放大和加粗处理，最大限度呈现信息的可识别性，减少阅读障碍。并把字号差异性拉大，并精简了字号层级的数量，帮助用户快速筛选重要的信息。

四、动线设计

围绕权益价值的长线牵引和短线驱动

新手引导：引导步数从去年的 5 步缩短为今年的 1 步，短线驱动用户，让用户更快速获取权益，激发用户参与玩法的动机。

任务参与：多个点位牵引用户参与玩法，其中浏览型点位（如主标题、右下角）展示大目标，透出未来的总收益做长线牵引；操作型点位（浮层、主按钮等）展示立即可得的收益做短线驱动，刺激用户当下的点击行为。

奖励反馈：对于较短路程的奖励，采用一个个跳跃的形式收取；而对于大额步数奖励，则直接让淘金仔飞过快速领取。此外，所有动画都提供了“一键跳过”的选项，确保用户在整个过程中保持高度掌控感。

深度参与激励：不同梯度的每日累积任务奖励，有效促进用户做任务动力。

五、导购设计

围绕权益梯度化展示优惠，刺激用户购买

本次双 11 商品卡片围绕着“金币抵扣”权益，强化金币抵扣带来的优惠，增强用户对于权益的感知。此外还对不同幅度的优惠做了梯度化的视觉表达，额外的动效设计来表达抵扣加码，具视觉冲击力且更加直观。

结语

本次双 11 主互动在业务和设计侧都做出了不同于以往的大胆尝试，吸引用户参与的同时也带来了超预期的成交增量。本次崭新轻盈的视觉风格让互动、权益与购物无缝衔接，也用最概括化的语言传递趣味、烘托情绪，留出空间将最重要的信息呈现在消费者面前。

欢迎关注「淘宝设计」公众号：