技术圈首页 程序员 解决方案 聚合短信
APP下载 注册
首页 文章详情

淘宝UED：红包体验设计指南 | 教科书级别的设计技巧

UXD笔记 | 648 2021-05-23 12:07 0 0 0
UniSMS (合一短信)
UXD笔记 · Alibaba Design 自媒体成员


“这样的红包，承载着真实的记忆和情感”
“哗！我拿到一个¥100惊喜红包”，想必大家都有热热闹闹过节时，用惊喜红包在淘宝购物的经验吧？
▲ 拿到一个100元购物惊喜红包
红包的红色代表活力、喜气与好运，里面的钱除了让人开心，更有着祝福的心意。在科技时代被转变并大肆发展起来，尤其在服务上亿人的电商平台，我们在想用代码写出的虚拟红包如何让人感受到实体红包带来的开心愉快呢？

接下来，就给大家讲讲我们在红包设计上的一些持续探索和想法。


红包：承载特别的情感

在生活中，发红包和收红包是国人在逢年过节、礼尚往来中必不可少的传统，从小记事开始，它在我们心目中就有着特别的仪式感。
▲ 红包在传统文化中的特意义

在电商场景中，红包和优惠券同为省钱福利，在获得优惠券的场景，会理性思考这个优惠是否是我需要的。

而获得红包后的场景，给人的感知是直接拿到了一笔钱，更容易刺激和激发我们的购买心理动机。因此设计上就存在了差异，红包设计更注重用户情绪的引导。
▲ 红包与券的差异

如何让红包的体验更好？
首先是提升基础的体验，优化红包设计，保证链路体验的一致性。
还需要强化情绪的引导，通过场景感设计和情感化动效，产生共鸣和情绪的推动。
▲ 设计策略


基础体验：与实体红包的呼应

人们对接触到的东西，大脑会本能的联想经历过的事物，形成对眼前事物的判断。

回想起来，我们收到红包后是不是有观察红包厚度猜猜多少钱的习惯，这都是生活中最真实的记忆。如果红包的设计与我们真实生活的印象形成一些呼应，会更容易触发用户共鸣。
▲ 现实生活对红包的印象
结合我们生活中对红包的认知，我们定义闭合的红包是未知金额，等待用户去开启。而已经打开的红包是明确能知道金额的，因此它承载着金额、门槛、使用渠道等确定性的信息。
▲ 开口红包造型设定

▲ 闭合红包造型设定

在体验链路中，从识别、领取、获得红包的三个情绪梯度，定义红包组件，保证链路中不同容器下的体验一致性。
▲ 识别、领取、获得体验一致

在营销场景中，仅仅只做单个红包组件统一是无法满足氛围刺激和吸引力的，因此组建红包素材库即能满足多样性，也能提升设计的效率，快速输出上线。
▲ 红包素材库


场景化：与现实场景呼应


生活中的传统节日、社交场合，以及对于特别的人都少不了发红包。在电商场合里也一样，通过对红包视觉氛围的塑造，很快可以建立起用户的情感共鸣，提升用户的愉悦体验。
▲ 生活中的红包场景

将我设为⭐️星标，回复“大礼包”领UX设计

职场披荆斩棘资源套装


传统节日的呼应：以春节场景为例，在电商的设计中可以将我们熟知的福字、年年有鱼等过年的印象融入到新年红包氛围中。
▲ 我们对新年的记忆

▲ 红包春节氛围

社交场合的呼应：以开业店庆场景为例，在电商场景中也有我们熟悉的双11大促，将天猫和大促氛围元素融入红包，可以很好的传递大促品牌心智。
▲ 双11大促红包
特别人物的呼应：以生活中银行尊贵的客户为例，在电商设计中，我们送给尊贵的88VIP一个金光闪闪的红包，来表达对用户特殊身份的礼赠祝福。
▲ 88VIP专属红包


情感化：与用户心理的呼应


记忆里我们每次从长辈手里接过红包的时候，都会非常好奇捏一捏感受里面钱的厚度，偷偷跑去角落拆开数钱，然后暗暗窃喜小心收好。
▲ 拿到红包后的心理

我们把生活中这些记忆通过动效的方式加入到红包中，增加红包获得时喜悦的情绪。
比如获得红包后，通过3D和动效的技术，来呼应我们试探红包厚度、数钱，和获得的愉悦心理。
▲ 获得后边试探厚度

▲ 数字滚动模拟数钱心理

▲ 获得了钱的愉悦情绪再推动

结语
红包是亚洲文化有别于西方国家的独特仪式感，承载着人与人之间交流的情感。因此红包的设计除了从理性角度满足业务的诉求之上，我们后续还会在红包给用户带来的刺激与触动上做持续探索，通过场景化、情感化的突破，相信用户更愿意去领去用，也进一步提升用户对平台的整体粘性与购物满意度。

我们的求职&招聘群已经开到7群了，这些群纯粹是为了帮助读者朋友们链接合适的招聘方，无广告、不付费。有新的招聘信息会第一时间同步到群里，同时会不定期分享求职相关的资料，也有大厂的朋友在里面帮助大家内推。


欢迎求职者和内推官进群，扫描下方二维码添加小编，备注“求职”或“招聘”即可拉你进群。




与41090位读者一起成长



⭕️⭕️领取粉丝专属资源：大家点个“在看”，然后在【UXD笔记】公众号后台回复以下对应关键词即可领取。

1、回复“交互文档”——领取完整交互设计文档模板，含Axure和Sketch源文件；

2、回复“大厂组件”——领取主流的移动端和PC端设计组件库源文件；

3、将本公众号设为⭐️星标，再回复“大礼包”——领取用户体验设计资源套装，含大厂组件库、交互文档、B端交互资源等。




因微信公众号推送机制已改版，现在文章不按发布时间排序。如果大家还想早上准时收到我们的精选文章，麻烦大家多给我们的文章点一下“在看”和“赞”，并在公众号主页点击右上角“...”将UXD笔记设为星标，这样就不会错过每一篇精彩的推送了❤️

谢谢大家，希望对你有所帮助
good-icon 0
赞
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter
    UXD笔记
    UXD笔记
    320
    文章
    7
    获赞
    UniSMS (合一短信) NEW

    相关文章推荐

    plat-ensure-img