腾讯设计师揭秘!QQ默认表情优化背后的设计故事 - 优设网 - UISDC

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

2016/03/06 25835评论区

qq-emoji-optimize-story-1

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

从简单情绪到表情

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

表情含义的简到繁

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

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

剖析数据,发现问题

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

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

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

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

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

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

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

五官的联动性

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

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

bq160306

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

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

动作的完善度

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

bq1603062

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

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

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

bq1603063

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

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

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

动态重制,衍生新表情

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

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

bq1603064

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

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

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

发散思路

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

QQ默认表情优化背后的故事

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

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

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

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

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

QQ默认表情优化背后的故事 

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

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

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

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

QQ默认表情优化背后的故事

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

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

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

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

QQ默认表情优化背后的故事

写在最后

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

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

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

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

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

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

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

原文地址:腾讯ISUX

uisdc-hao

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

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

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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