新浪微博那些有趣的小黄脸表情是如何设计的？

2017-04-14 15:05

距世界上第一个表情符号「:-」」的诞生已有 34 年，随着人们在互联网上沟通方式的变化，表情符号逐步成了一种刚需。作为各大 App 标配的默认表情，虽无法与“妈妈的表情包”们相抗衡，但也靠着朴实耐用的品质一直发展至今，很多平台都拥有了自己的经典表情。那怎样将看似简单的默认表情做好呢？接下来就是此次小黄脸们整容过程的全揭露：
PART 1：WHY？
作为设计师发起的项目，首先要自我明确项目的目标与方向：

用户
用户使用表情场景的多元化造成许多表情的原有内涵发生了变化。友好的“微笑”变成了嘲讽的“呵呵”，“再见”变成了“再也不见”，就连代表春天的“柳叶”也大片飘洒在各“出轨门”微博的评论区。因此，给用户提供能适合更多语境表达的元素就成了首要目的。
产品
给产品带来更好的数据也是项目的目标。此次优化的时机选取在微博评论盖楼项目前 1 个月，如果能通过这次优化提高微博用户间的互动量及客户端的更新量，为后续项目预热，那也是极好的呀！
设计
用过微博的同学们一定知道那只傲慢又神烦的 doge ，自诞生以来长期占据微博热门表情榜单前三，刷微博时它的身影无处不在。面对这样一只无所不能的 doge ，我们还有能力创造新物种来超越它吗？

新浪微博那些有趣的小黄脸表情是如何设计的？

PART 2：HOW？数据分析，发现问题
表情使用量大，场景复杂，为了确保设计方向的准确性，我们从数据部门获取了完整的表情使用数据，并将其分类整理，从整理结果发现了以下问题：
1、表情使用量具有很明显的高中低频率分层现象；
2、很多竞品中使用量较高的表情，如大哭、亲亲等在微博上却表现不佳；
3、设计师在设计时期待较高的某些表情表现出了较低的使用量，如抠鼻、偷笑等。
数据来源：腾讯2015《中国网民表情报告》

新浪微博那些有趣的小黄脸表情是如何设计的？

用户研究，探究问题
带着疑问，我们与专业的用研团队对一批微博的主流用户进行了问卷调查及深入访谈，发现并总结了以下主要 3 点：
1、表情设计本身存在一系列问题，如：表意不清造成用户认知偏差、缺乏深意等；
具有代表性的问题表情

新浪微博那些有趣的小黄脸表情是如何设计的？

2、区别于QQ、微信等私密性更强的即时通讯app，微博作为开放平台，用户的表情使用习惯具有以下特点：
① 明显含有脏话，污等暗示意味的表情不适合在公开场所使用；
② 用户常用的表情具有示爱、萌、迷、调侃的特点；
③ 用户会尽量避免在公开场合使用生气、愤怒等表情。
3、当前的默认表情不够满足用户的表达需求，主要包含以下两点：
① 多数用户明确提出需要使用表示“安慰”表情；
② 默认表情缺乏当前的网络流行元素，不够与时俱进。
明确方向，解决问题
经过以上数据分析、用户调研结果及一定量的竞品分析后，设计的方向与思路逐渐清晰，解决问题的方案便应运而生：
① 从现有表情符号出发，去除部分使用量低以及过时的表情。
② 强化现有情绪表达不够的表情，明确单一表情的含义。
③ 新增表情，将表情与流行元素相结合，使之更具有广泛传播性。
④ 从用户使用习惯出发，重新整理表情排列顺序，缩短寻找目标表情时间。
PART 3：WHAT？明确表情含义，偶尔将错就错
在用研过程中，我们发现很多表情传达给用户的含义与最初的设计初衷不一致，导致不同的用户群体对同一个表情有较大的理解偏差。因此，我们将调研中有歧义的表情整理出来，重新审视并设计。
部分理解偏差表情

新浪微博那些有趣的小黄脸表情是如何设计的？

[呆]
这个表情使用量一直较低，在用户调研中我们发现它并没有足够强地表现出它本身的含义，因此我们在迭代中不断夸张、细化这个表情，更精准地表达它的含义。
[失望]
原有失望的表情只表现出了负面的情绪，但是没有精准定位到「失望」这个单一情绪，我们着重在对眼神进行了优化，让它的表情含义更精确。
[顶]
这个表情在原本的表情列表中叫「顶」，而其实用户基本上在使用时时常用作「敲打」，因此我们直接讲错就错向歧义的方向修改了表情。
[NO]
这个表情的歧义很明显，用户表明手指在静态下像手势「1」，因此我们改邪归正，在增加细节后消除了歧义让它更符合本身的含义。
提升表情细节，强化表情情绪
在新版本表情中，我们试图通过在设计上合理地夸张化，增加「眼睛」、「嘴」在表情面所占比例，并增加必要细节来提升表情对情绪的表达能力。
部分细节强化表情

新浪微博那些有趣的小黄脸表情是如何设计的？

[白眼]
在 Ver 1 ~ 3 中，着重优化了眼睛的表现力。在定稿版本中通过增加嘴角提拉的细节增加表情中嫌弃的情绪。

新浪微博那些有趣的小黄脸表情是如何设计的？

[害羞]
在 Ver 1 ~ 2 中，我们着重给表情附加了害羞表情的更多动作趋势，在 Ver 3 ~ 4 中通过红晕、睫毛等元素加重这些趋势，增强情绪。

新浪微博那些有趣的小黄脸表情是如何设计的？

[吃惊]
吃惊表情在调整的过程中经历了比较多的版本，最终版本对眉毛、眼神和嘴巴的动作在惊讶的趋势上做出了较大的优化。

新浪微博那些有趣的小黄脸表情是如何设计的？

结合流行趋势，新增热门表情
在新增表情时，通过以下三方面进行探索：
首先是对标竞品，在竞品（QQ、微信、emoji）使用量 TOP10 的表情中如微博有遗漏或现有默认表情无法替代的，考虑新增。
苹果 iOS9.1 系统中最受欢迎的表情

新浪微博那些有趣的小黄脸表情是如何设计的？

其次，为了寻找到更适合用户的新增表情，我们提取了 1 个星期的全站所有评论内容，对高频短词语进行分析，将每个短词语找到同义词，集合得出相似场景词，再从中提取常用情绪关键词，进行几轮筛选最后得到 19 个表情关键词。
可转化为表情的高频评论词

新浪微博那些有趣的小黄脸表情是如何设计的？

最后，针对当前热门网络流行语进行收集，从流行语中提取出相应的情绪或动作作为新增表情的选择。如：那画面太美我不敢看→捂脸、污；也是醉了→无言等。
将这三个新增维度中的所有情绪进行整理，去除不适合在微博平台使用的（如剁手，可能在广泛传播时会引发歧义）内容，并结合使用场景决定新增以下表情：
此次优化新增的所有表情

新浪微博那些有趣的小黄脸表情是如何设计的？

[二哈]
之前提到用户需要定位清晰的表情，同样也需要“意味深长”的表情。大家都非常喜欢一直统治微博表情届的神狗 doge，它的“意味深长”带来了深刻的魔性，让许多用户在表达无言以对、一切尽在不言中、不想道破的复杂情感时爱不释手。「二哈」表情的定位也是这样的「意味深长」、「魔性」。
本身就很魔性的哈士奇

新浪微博那些有趣的小黄脸表情是如何设计的？

在创作「二哈」时，首先的灵感自然是哈士奇天生放荡不羁的蠢脸。为了达到让用户能感受到精神污染，我们也为其融入了复杂的情感：狗die、蠢萌、憨傻等等，并在制作时刻意地混淆其表情的单一含义。例如：向上生无可恋的眼神里又带着一丝嫌弃，向下垂死一般突出的舌头配上的嘴充满笑意。这种多情绪的加载混叠让最终得到的「二哈」表情变得确实有很强的精神污染能力，并得到了用户们的青睐。
充满魔性的版本迭代

新浪微博那些有趣的小黄脸表情是如何设计的？

[耸肩]
耸肩表情的视觉元素脱胎于新表情「抱抱」，其更多灵感来自于很多人吐槽除了点赞 Like 外，我们需要一个 Whatever，来表达自己的无言以对、满满嘲讽。虽然这个感情在一定程度上有点负面，但确实是用户使用表情的一个诉求。
无言以对，并不在意

新浪微博那些有趣的小黄脸表情是如何设计的？

因此我们赋予了这个表情一个表示不屑的高高耸肩，配合歪头和下撇的嘴角，让它成为了可能有史以来最欠打的微博表情。但小人本身的视觉元素和比例使略带负面的情绪在可爱的形象上得到一部分消减，最终表达出一种接近中立的情绪。
咋？

新浪微博那些有趣的小黄脸表情是如何设计的？

重新整理排序，快速定位表情
在用研过程中我们还发现，用户常常在寻找某一表情时出现卡顿，是由于用户几乎从不记忆某一表情的位置。为了降低使用成本，在默默去除过时及使用频率极低的表情后，我们将所有表情重新排列了顺序。
首先将表情按照情绪来分类，并将每个类别中情绪表达程度按照由轻至重、由简单至复杂的程度来排列：
喜的程度从左到右不断增强

新浪微博那些有趣的小黄脸表情是如何设计的？

其次在保证原高频率表情基本位置不大改的条件下，重新规划。表情的首屏展示了喜、怒、哀这三类基本情绪，用户不需要滑屏就能满足日常情绪的表达。
首屏表情展示了喜、怒、哀三类基本情绪

新浪微博那些有趣的小黄脸表情是如何设计的？

最后整体将正面情绪表情前置，负面情绪表情后置，符合用户在微博平台的表情使用习惯。另考虑到每屛表情的曝光率，也将某些高频率表情放置位置相对偏后，如[爱心]、[蜡烛]。用户在面对重新整理的表情，可先定位情绪，再定位某一表情，默默形成习惯，减少使用成本。
PART 4：GAIN ！用户反馈
表情优化项目从开始到上线大约历时一个半月，在 9 月 23 日上线当天，我们获得了这样的用户反馈：

新浪微博那些有趣的小黄脸表情是如何设计的？

数据反馈
项目上线后，带表情转微博的量增长了 23% ，全站微博发布量增长 6% 。在 111个微博客户端表情中，有 5 个新增表情的使用量排在 TOP30 ：[二哈][摊手][污][舔屏][抱抱]，其中 TOP10 的新增表情就有 3 个，二哈成功超越了 doge 成为使用量第二的表情。

新浪微博那些有趣的小黄脸表情是如何设计的？

优化的表情有 9 个使用量得到明显提升，其中最大的[失望]增加了 249% 。

新浪微博那些有趣的小黄脸表情是如何设计的？

默认表情优化看似简单，但往往简单的事物需要注入更多的时间与精力去完成。为了精确的找到此次优化的整体方向及问题点，我们不断进行数据分析及用户调研，这是非常重要的一环，每一次的设计背后都有理性的分析做支持。后续我们也会不断进行设计的总结与提升，带给大家更好的体验。最后透露个小秘密，好像很快会有更好玩的新表情出现，敬请期待！
来源：优秀网页设计（ID:youshege）

共有评论0条

<返回

<返回首页