淘宝精选案例 | 双 11 大变身：“边玩边买” 如何重塑互动设计？_IXDC的专栏文章_微信文章

淘宝精选案例 | 双 11 大变身：“边玩边买” 如何重塑互动设计？

IXDC · 公众号 · · 2024-11-14 08:30

正文

本文授权转自：淘宝设计（ID：ali-taobaoued）

引言

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

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

设计策略

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

#01

玩法选型

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

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

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

#02

场景打造

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

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

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

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

#03

信息排布

核心价值最大化传递

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

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

#04

动线设计

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

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

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

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

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

#05

导购设计

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

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

淘宝精选案例 | 双 11 大变身：“边玩边买” 如何重塑互动设计？

正文

请到「今天看啥」查看全文