亿万好评的新版微博小黄脸表情,设计师是这么做出来的! - 优设网 - UISDC

亿万好评的新版微博小黄脸表情,设计师是这么做出来的!

2017/04/07 17985评论区

@微博UDC-M :距世界上第一个表情符号「:-」」的诞生已有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%。

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

「干货超足的5个改版实战经验总结」

  1. LOGO 改版:《揭秘LOGO设计流程!超详细的腾讯云LOGO 改版记录全过程》
  2. 官网改版:《QQ官网全新蜕变!IM QQ 改版(第一期)设计总结》
  3. Pinterest 改版:《改版实战!聊聊PINTEREST官网再设计过程的经验思考》
  4. QQ 新版表情:《腾讯ISUX丨揭秘QQ 新版表情背后的设计故事》
  5. 提升数据:《腾讯ISUX丨通过优化,我们将QQ会员付费用户数提高了5倍!》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/weibo-emoji-design-process

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 平面设计 设计趋势 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里