百度 APP EMOJI 2.0 的设计分享

  • 来源:网络
  • 更新日期:2020-07-14

摘要:工程师法尔曼创造了第一个表情符号,使文字信息更准确的传达情绪,表情现已经成为了互联网沟通中不可或缺的元素。百度 APP 用户正趋于年轻化,表达的诉求也日益增加。线上表情已

工程师法尔曼创造了第一个表情符号,使文字信息更准确的传达情绪,表情现已经成为了互联网沟通中不可或缺的元素。百度 APP 用户正趋于年轻化,表达的诉求也日益增加。线上表情已不能满足用户需求,于是设计师自发开启了 BAIDU EMOJI 2.0 的设计历程,与大家分享。

01 设计思路探索

1. 目标

2. 现状分析

使用量前十的表情多为正向和有内涵的表情。百度特有的 滑稽 表情使用量远远大过其他表情,而部分表情使用量甚低,差距巨大。那这些低热度的表情为何悬殊如此大,为此我们展开了用户访谈。

3. 问题归纳 - 用户访谈

4. 解题思路

02 解题过程

1. 视觉风格

通过象限图和线性时间轴,观察主流竞品。我们可以发现大部分国内的表情设计的夸张程度远大于国外。流行的表情主要有两种性格: 贱 和 萌 ,几乎均分天下。再看第二张图,可以发现国外表情的设计趋势:质感越来越强,表意也更加夸张。

结合业务场景对图形进行发散和创新,比如与小度机器人、评论 icon 结合等。为了增强表情感染力,尝试给表情加入身体,又或者突破圆形加强部分五官表现。

然而,因使用场景较多,当混排在文字中时,表情较小,很多细节模糊。我们需要规整的图形,也需要更具灵魂的表情,所以最终选取最能承载的圆脸,把重点聚焦在具体五官的设计上。

对质感进行多个层级的尝试,从弱到强。

结合竞品调研和趋势分析,最终选用有质感并加了一层描边的效果,使得表情保留精致的同时又可以多场景的清晰展示。在表情底板上加了一层投影,加强质感和层级感。

2. 表情表意

在新表情的设计上加大了五官的比例和更多细节,表情更夸张、含义更明晰、更有代入感。尤其对于一些使用量较低和较重复的表情,重新设计,如此可以挖掘冷门表情的潜力。

表情融入场景感,强化表意。结合漫画的设计语言,增加用户熟悉感。

3. 新增表情

4. 节假日表情

节假日期间新增节日表情,增强互动区氛围。从 2019 年开始新增节日表情设计,共计覆盖全年 10 个节假日。疫情期间也参与其中,用设计的力量驰援武汉。

03 设计方法

180+ 的表情设计,效率和统一性尤为重要,因此我们对表情进行归纳和整理:以五官和附加元素为划分维度。

五官:以眼睛、眉毛、嘴、牙、舌头等元素分类。比如眼睛又可分为 14 类,根据是否有眼珠、眼白、高光、眼睛形状 ( 月牙眼、平眼、斜眼和星星眼等 ) 为标准,进行归纳与组件复用。

附加元素:分为三大类,情绪、氛围和道具。情绪元素,对眼泪、汗、口水、弱眼泪 / 口水、红晕等进行归纳,统一设计表现,如眼泪和口水都采用哑光的形式,与底板设计语言统一。

这样组件化的方式,即保证了设计语言一致性又高效的完成大批表情的铺设。

04 表情排序

180+ 的表情,为了便于用户更快的找到想要的表情,减轻压力。我们对表情进行了排序,按照表情情绪(喜怒哀乐)和手势聚类。

为增强用户记忆点,更容易定位表情。我们利用视觉锚点,在长列表情中排入深色系、红色系的聚类。

05 调研与访谈

在表情上线一段时间后,为了解用户对此次新表情的好感度,我们进行了调研:

线上问卷与线下访谈

发放了 1000 份线上问卷,调研用户对新旧表情的好感度以及原因

进行了线下访谈,深入了解用户的好感度和原因以及使用习惯等

通过这两种方式,我们得到以下主要结论:

用户对新表情的好感度远大于旧表情

用户更喜欢有趣且具有热点的表情

表情的排序非常影响表情的使用

在深入用户的过程中,我们更加了解用户的想法,也为我们后续升级优化,得到了建设性建议

06 结语

表情设计注重的不仅仅是好看的皮囊,更重要的是 Ta 的内在、Ta 的灵魂,这才是触达用户的点。设计表情其实是一个讲故事的过程,每个表情就像抓拍到的最美瞬间,背后都有自己的专属 live,等待你来续写。

07 产品周边

本文由 @百度 MEUX 发布于人人都是产品经理,未经许可,禁止转载。

题图来自 Unsplash, 基于 CC0 协议