腾讯设计师揭秘！QQ默认表情优化背后的设计故事

编者按：QQ这一版全新风格的表情出来后，关于它的讨论一直没有停止。今天直接让腾讯的聆澜子来给同学们揭秘，出于什么原因做优化，在优化时考虑了哪些方面。看似简单的表情设计，其实凝聚了非常多的思考，强烈推荐！

从简单情绪到表情

为了帮助文字信息更准确的传达情绪，机智的工程师法尔曼（Scott Fahlman）创造了表情符号。这种高效而直白的信息交流方式被沿用至今。

表情含义的简到繁

经过信息时代的变迁和网络文化的多元化发展，表情符号的含义也发生了许多微妙的变化。在QQ表情中，我们所熟知的“微笑”，从友好的问候，转变成几乎完全相反的嘲讽含义；“再见”变成了“我想静静/友尽”，也与最初的设定相去甚远。

更多的例子在QQ表情中不胜枚举，这样的现状让我们不得不重新审视：如今用户对于表情的需求，是否依然能在默认表情中得到满足？目前网络最流行的表情两大要素：“萌”和“贱”，是否也需要在一定程度上融入到QQ默认表情中，让它适时地去改变。

剖析数据，发现问题

默认表情优化涉及到每个表情的外观，情绪表达，场景需求等种种细节。越是繁重的工作量，越是需要快速整理出设计的要点。我们选择以最简洁的思路去切入：发现问题，确定方案，进而解决问题。

为了保证研究的可信度和有效性。我们取得了表情发送量的整体数据，发现单个表情的发送量存在巨大的差异。高热度的表情自然是具有更充分的场景价值，那么低热度的表情又是因为何种原因被人们遗忘呢？

带着这样的疑问，我们找到了一些典型的QQ主流用户，通过卡片分类和用户访谈等方法，归纳整理出了表情中的主要问题：

• 部分表现力欠缺
• 部分使用场景模糊
• 缺少网络流行元素
• 视觉风格的过时

确定问题后，优化设计的要点也就变得清晰：

• 加强表情的情绪感和实用性
• 引入流行元素，创造新表情
• 调整表情风格，注重年轻化

情绪感和实用性，从细节出发

五官的联动性

人的面部表情并不只决定于某一个部位的运动，而是整体连带的动作。比如一个真诚的微笑往往伴随着嘴角和眉眼的微弯。一个悲伤的哭泣则不仅仅是眼泪，还应该带有嘴角的纠结。整个面部的肌肉是完整连带的，虽然表情在界面中呈现的体积很小，但是一个细微的改变，可以让表情更加具有生命力。为了强化表情的情绪感，我们对大多数表情的动态进行了五官联动优化。

以下是几个比较典型的例子：

【撇嘴】增加了嘴和眼的动效，配合眉毛的浮动会更加具有整体感。
【色】增加了眉毛和嘴部的上下浮动，配合眼的放大缩小带动整体。
【发呆】在鼻涕掉落的同时整个五官也随之进行运动。
【得意】则加入了墨镜的反光动效，张嘴的同时由于嘴会向上抬起眉眼位置也会有轻微的牵动。

有许多表情基于经典延续的考虑没有做太明显的调整，但也基于联动的原则进行了微调。感兴趣的同学也可以找找其中细微的变化0v0~

动作的完善度

表情是否正确的表达含义，需要在动作完整和高效传达之间做一个权衡。部分表情也针对这两点进行了重新考量和调整。

【嘘】和【闭嘴】，本身具有一定的相似性，前奏也都较长。因此在动效上着重做了区分，强化了各自的特性。嘘更强调让对方噤声，而闭嘴则强调自己无法出声。以这样的调整让语义更加精简，提高表情的阅读效率。

【呕吐】也省去了过长的前奏动作，直接进入吐的主题，强化吐本身。

以下几个表情则对动作本身进行了完善：

【敲打】的重点是打击的力度。在击打的瞬间给头部加入轻微的形变，也让敲击更加有力度。同时铁锤换成木槌，体积变大，材质却更柔和，情感上更加友好戏谑。曲线的敲击效果线则换成了星星效果，更加符合主流漫画的表达手法，易于年轻人接受。

【示爱】的动态补充了亲吻动作“mua！”的中间态，让整个动作更加完整易于理解。

【心碎】在落地的过程中，由于心瓣的重量，会有一个轻微的回弹效果，这样的补充也让心碎更有力度感，强化情绪本身。

动态重制，衍生新表情

我们也对部分表情进行了较大幅度的变更，使其更加夸张化，含义更加的明晰。甚至有意识地改变含义，成为某种意义上的新表情。

这部分改动选择了使用量较低以及与其他表情重复度高的表情。如此可以让一些冷门的表情重新得到使用，甚至挖掘出更多使用场景和语义。而从风险方面考虑，这一类表情在改变之后，在原语境下也更容易找到替代品，避免场景的空白。

【瞌睡】加入了鼻涕泡，更贴近漫画叙事的表达方式，易于理解。
【发怒】缩短了前奏，改变了五官表达手法，更加急躁。
【惊恐】强化了眼部的幅度和整体联动感，加入眉毛强化恐慌感。
【饥饿】整体萌化，缩短距离感，并加入砸吧嘴的小动作，强化嘴馋含义。
【调皮】让舌头左右摇摆，强化贱萌感，更贴合调皮。
【咒骂】改变嘴的表达手法，弱化严肃感，强化了抓狂感，更易于对熟人使用。
【冷汗】与糗，流汗等很接近，因此增加其情感特异性，调整眉毛加强纠结感。
【惊讶】静态图形并没有太大改动，但动态的调整，从“呜哇！”变成“呜哦~~~~”强化了讽刺意味和贱萌感。让表情更适用于多种语境。
【吓】在动态上与惊讶做了更明显的区分，减少表情意义的重复性。并加入抽搐感和青脸强化“吓到！”的感觉。

还有不少表情也重点做了语义强化，在此不一一罗列~

轻质感的风格，年轻化的路线

发散思路

对于风格的整体优化，我们最初尝试过各种不同的可能性，比如给表情加入身体，比如去掉脸的轮廓让五官内容更突显，又或者突破尺寸的限制加强整体的表现力。希望使情绪表达更加明确和清晰。

然而，QQ默认表情具有其特殊性，它需要体积尽量小，又要保证清晰的情绪表达，并能够承载在图文混排的气泡中。因此，具有外轮廓线，省略身体的小圆脸，依然是最为合适的表现方式。而细节表达，可以在原来的基础上，加入年轻人群更易于接受的漫画式手法。

结合使用场景，延续品牌感

正式设计的过程中，需要更详尽地考虑表情的线上使用问题。比如默认表情和文字穿插排版的需求，以及表情的实际体积对视觉表达的影响。还有多种气泡的颜色适配。

此外，为了保证品牌感的延续性，我们延续了旧版本的基本色调，并结合扁平轻质感的潮流趋势重新调整了色彩和表情质感。

最终我们选择使用对比更为清晰的线条和更加明亮柔和的色彩，以求在各种不同的背景色中，都能保证表情内容的清晰。

化繁为简，组件化的设计思路

表情的设计量非常繁重和巨大，一百多个表情动态重制，保证设计的效率和统一性极其重要。

在表情设计中，我们选择了组件化的思路进行设计。针对各种面部元素，一一进行了归纳和整理：

• 不同类的眼部，重新整理了眼间距的整体一致性
• 不同类的眉部，调整了粗细的一致性
• 嘴部内外，牙齿，牙缝线，舌头表现的一致性
• 面部的表达要素，如脸颊，害羞线，手样式，黑线，水滴，青脸，进行了整合

组件化让整套表情的设计细节更加具有整体感和一致性，同时也提高了大批量设计的工作效率。同时，在许多表情的优化过程中，也可以通过替换组件尝试更多的可能性，找到最佳的方案。

设立通用规范，完善物品表情

除去黄脸部分的表情优化。由于旧版本表情缺乏完整和系统的设计规范，随着历史更替和沉淀，不可避免地在物品表情中产生了一些不太一致的细节风格。因此，在优化设计过程中，也需要重新进行风格的统一。

我们将所有物品表情统一调整成微俯视视角，规范线条粗细规则，并延续小黄脸部分的色彩基调，以保证整套表情的一致性。

写在最后

看似简单的设计，往往有更多需要挖掘的内涵。默认表情不仅需要注重视觉风格的美观和时尚，更需要深入了解每个表情的语境和时代内涵。如果只是用做图标的思路去优化表情，很容易脱离表情本身的情绪和场景。而默认表情对比于商城表情，它又需要更具有人群和场景的普适性，避免过分的夸张和个性化。

为了在多种要素中找到一个平衡，我们在设计过程中做了多次不同范围和目标用户群的市场调研，这也是默认表情设计非常重要的一环。

表情优化改版奠定了后续功能的风格基础，之后我们也将会继续完善新版本表情的体验和玩法，欢迎大家持续关注我们的设计优化，提出宝贵的意见0v0~

【走在时代前列的腾讯HTML 5精品好文】

DNF实战总结好文！
《腾讯游戏实战！DNF浴火新生HTML5项目总结》

优化HMTL 5页面的6个技巧！
《腾讯精品文！六大奇招带你优化HTML5移动页面》

HTML5 页面设计实战总结！
《春雨先知！腾讯移动端HTML5页面设计实战分享》

原文地址：腾讯ISUX

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

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