专栏名称: 腾讯研究院
【腾讯研究院 ★ Tencent Research Institute】 网聚智慧,连接世界!网罗互联网前沿理念、传递互联网发展声音、汇集互联网研究成果、推动互联网法治进程。
目录
相关文章推荐
36氪  ·  45岁,我领到了第一笔退休金 ·  昨天  
腾讯研究院  ·  腾讯研究院AI速递 20250313 ·  3 天前  
51好读  ›  专栏  ›  腾讯研究院

为什么微信红包长这样?

腾讯研究院  · 公众号  · 科技媒体  · 2017-02-07 18:00

正文

一颗橙色气泡,简单的收发一瞬之间,成了我们日常生活很重要的一个部分。

兴奋过、错失过

抢了那么多年红包

有没有试问:它为什么长这个样?


这个简单动作的背后,微信红包在设计上是如何实现在快捷、直接的简化信息框架内,满足大家的好奇心和情感需要的呢?


符合用户认知的设计 “红包就该是这个样子”


红包无非两个流程, 一个收、一个发,要快、要直接 。回想你收到亲朋好友压岁钱红包那会儿的你和TA是啥心情?事实上,在现实生活中,当人们发红包或者收红包时,行为和结果的心智模型已经形成。 设计上要做的就是跟随这种心智模型去摸索交互原型,这能帮助用户更容易的认知、使用红包。



什么是用户心智模型呢?



简单说, 就是用户对一个事物在自己内心里预先的认知。

这就跟我们去跟一个人打交道,观察一个事物一样, 每个人会先拿自己的经验和知识在他没有真正了解之前先开始以自己的认知去预估和判断 也就是说,如果设计符合用户正确心智模型,它就会变得很简单,因为用户自己已经帮我们解释了很多事情。


(发红包)


形象上,把现有红包的形态抽象固化出来,让人看到就知道。 因为有天生的心智模型,认为红包就是这样。 不用跟他说这是什么按钮,他一看知道是微信红包,很自然的去理解然后再怎么去做;


另外, 在收发的时候,包括像红包翻开,红包展开,信息一步一步打开这个过程也跟实际生活中领红包的类似。


“红包”这一有着特殊文化意味的符号已经深入人心,设计上用抽象的方形、圆形概括红包形态,特定的比例和颜色,一看就可以识别出“微信红包”。而不同红包类型形态统一,也强化用户对微信红包的品牌认知。


从黄色的聊天气泡开始就给你一种非常强烈的暗示,这个是带钱的。颜色上来看,它就是红色配黄色,就很喜庆的感觉。



聊天气泡形成强烈暗示


设计团队有意通过圆方两种造型和色彩的对比,突出了红包中圆形封口这一焦点,通过按钮+动画结合,让你按下开红包的时候,会有金币转动,这种视觉和体验上与用户心智模型的契合,解释了为啥每次我们看到这个黄色圆形的时候就有戳的冲动。


即便是形在演变,但当把这个形做得很简单并赋予了它一个意义之后,它就会变成一个框架。


看看下面这张图,是不是无论换什么颜色,你一看就知道它是微信红包。比如说拜年红包、节日红包,它的底色都可以变,图案也可以变,但是这个形是不会变。


(红包的形态架构)


圆形是整个红包的视觉焦点,即使不看文字提示,没用过红包的人也知道“点圆圈可以打开”,因为页面只有唯一一个圆形按钮,没有多余信息。就像iPhone上的home 键十分明确,用户可以迅速、直接地找到触发点。点击后红包上下拆开,过渡展开更多信息。和用户认知一致,就会觉得顺畅自然。


收红包







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