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

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

  从简单情绪到表情

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

  表情含义的简到繁

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

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

  剖析数据,发现问题

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

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

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

  部分表现力欠缺

  部分使用场景模糊

  缺少网络流行元素

  视觉风格的过时

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

  加强表情的情绪感和实用性

  引入流行元素,创造新表情

  调整表情风格,注重年轻化

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

  五官的联动性

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

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


  【撇嘴】增加了嘴和眼的动效,配合眉毛的浮动会更加具有整体感。

  【色】增加了眉毛和嘴部的上下浮动,配合眼的放大缩小带动整体。

  【发呆】在鼻涕掉落的同时整个五官也随之进行运动。

  【得意】则加入了墨镜的反光动效,张嘴的同时由于嘴会向上抬起眉眼位置也会有轻微的牵动。

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

  动作的完善度

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


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

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

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


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

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

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

  动态重制,衍生新表情

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

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


  【瞌睡】加入了鼻涕泡,更贴近漫画叙事的表达方式,易于理解。

  【发怒】缩短了前奏,改变了五官表达手法,更加急躁。

  【惊恐】强化了眼部的幅度和整体联动感,加入眉毛强化恐慌感。

  【饥饿】整体萌化,缩短距离感,并加入砸吧嘴的小动作,强化嘴馋含义。

  【调皮】让舌头左右摇摆,强化贱萌感,更贴合调皮。

  【咒骂】改变嘴的表达手法,弱化严肃感,强化了抓狂感,更易于对熟人使用。

  【冷汗】与糗,流汗等很接近,因此增加其情感特异性,调整眉毛加强纠结感。

  【惊讶】静态图形并没有太大改动,但动态的调整,从“呜哇!”变成“呜哦~~~~”强化了讽刺意味和贱萌感。让表情更适用于多种语境。

  【吓】在动态上与惊讶做了更明显的区分,减少表情意义的重复性。并加入抽搐感和青脸强化“吓到!”的感觉。

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

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

  发散思路

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


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

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

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

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

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


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

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

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

  不同类的眼部,重新整理了眼间距的整体一致性

  不同类的眉部,调整了粗细的一致性

  嘴部内外,牙齿,牙缝线,舌头表现的一致性

  面部的表达要素,如脸颊,害羞线,手样式,黑线,水滴,青脸,进行了整合


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

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

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

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


  写在最后

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

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

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

时间: 2024-08-06 21:46:29

腾讯QQ默认表情优化背后的设计故事的相关文章

沧海桑田 细数腾讯QQ十年间的大变化

中介交易 SEO诊断 淘宝客 云主机 技术大厅 在互联网开始在中国较大范围普及的年代,很多人之所以会有"上网"的冲动几乎都是冲着"OICQ"而来的.在腾讯QQ问世将近十年之后的今天,"QQ"已经成为了中国网民增进友谊.联络感情时必不可少的即时通讯工具. 创建于1998年11月的腾讯公司马上就要迎来成立十周年的喜庆日子了."十年"虽然只是弹指一挥间,但对于互联网企业而言--十年--却意味着沧海桑田.十年过去了,今朝的腾讯QQ已经

QQ动态表情制作

  现在随着互联网的不断普及,几乎每一个成年人都会有自己的QQ软件,因此在和他人进行聊天时,我们也能够运用到一些搞笑的QQ动态表情,也正是因为如此,QQ动态表情才得到了广泛的传播.不过,晨在QQ软件上的QQ动态表情很少,我们大家如果想要自己动手制作QQ动态表情,也并不是一件很难的事情. 第一步.图形制作: 打开Adobe Photoshop CS3软件进入到工作界面,在工作空间双击,并在弹出的"打开"对话框中打开选择好的素材.我们可以使用自己拍摄的照片,也可以使用电影剧照或者卡通人物图

腾讯QQ大范围登陆异常QQ安全中心无法访问

4月12日晚间消息,即时通讯工具腾讯QQ今日晚间出现大范围登陆异常的情况,北京.天津.上海.广东等地的用户均受此影响.此外,QQ安全中心(aq.qq.com)也同时无法正常打开.腾讯方面尚未对此予以正式回应. 从今日晚间约18:10开始, 网友陆续发现QQ出现登陆异常的情况,并伴随出现错误代码等提示.据不完全统计,受到影响的地区包括北京.天津.上海.广东.湖北.湖南.河北.河南.陕西.江苏.福建.江西等几乎全国大部分地区. 大约两个半小时之后,各地的QQ登陆逐渐恢复正常.而在此期间,百度腾讯贴吧

腾讯QQ活跃用户已达7.2亿同时在线达到1.5亿

腾讯QQ活跃用户已达7.2亿,同时在线达到1.5亿,如此大规模的用户资源,可以充分调动起来.激活海量腾讯用户与财付通业务的共鸣并实现联动,是财付通"二次创业"的核心任务之一. 在腾讯供职近3年后,赖智明出任财付通的掌门人,除压力与挑战之余,他感到更多是全新事业领域所带来的希冀与使命感.拥有丰富的腾讯互联网增值业务运营经验,再加上此前多年的互联网创业和金融投行背景,这让腾讯董事局主席马化腾有充分的理由将大任降于赖智明,相信他的到来会让财付通在第三方支付版图中获得更大的腾挪和胜算. 赖智明

QQ好友“集体出国”背后的较量

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 使用显IP外挂登陆QQ的朋友突然非常惊奇的问我:"哥们你什么时候混进美国国防部了?"在我讶异之余,朋友把IP地址截图给我,方知原来是IP显示我在使用美国国防部的网络.令我朋友哭笑不得的是,QQ好友集体出国了,显IP外挂彻底失效. 后来据腾讯内部人士透露,腾讯已经正式完成QQ客户端IP加密的布署,原来腾讯对于显IP外挂已经神

360搜索域名高调上线是想做第二个“腾讯QQ”

中介交易 SEO诊断 淘宝客 云主机 技术大厅 360搜索域名高调亮相的日子有一段时间了,迟迟才写这篇文章是因为我一直在关注等待360的下一步惊人举措会是什么,但是看来还需要一段时间.我把3Q大战和3SB大战两个事件的前因后果重新捋了一捋,结果让我发现了360的惊人动作,那就是所有的事件挑衅和发起,只是360长远战略规划之下走的一步小棋,真正的大棋还在后面.不要以为当年3Q大战的导火线QQ保镖工具真是为了用户不被广告弹窗骚扰而研发的安全产品;也不要以为,360搜索域名的高调上线真的想抢夺搜索业务

腾讯QQ大范围登录异常

4月12日晚间消息,即时通讯工具腾讯QQ今日晚间出现大范围登录异常的情况,北京.天津.上海.广东等地的用户均受此影响.此外,QQ安全中心 (aq.qq.com)也同时无法正常打开.腾讯方面尚未对此予以正式回应. 此外,QQ安全中心(aq.qq.com)页面始终无法正常打开.这一页面,是腾讯提供给 网友用以对QQ账号进行密码找回.密保管理的页面.腾讯 客服在接受网友来电咨询时,也对上述情况予以清晰回应. 至当晚21时,各地QQ登录普遍已恢复正常,QQ安全中心也已恢复访问.此时登录腾讯客服页面提问,

炫出我的个性——QQ聊天表情的绘制(上)

前段时间,为大家讲解了如何在Fireworks中绘制QQ皮肤的教程实例,相信大家已有所收获.这次我们再利用Fireworks中自带的GIF动画制作功能,为大家讲解动态QQ表情的制作.从而也将个性化的QQ进行到底! 在我们日常生活当中,人的表情都被包含在"喜怒哀乐"当中.但在网上的QQ聊天当中,可用的表情动作却是丰富多彩,特别是动态表情的出现,更能将某种情绪的表现生动而有趣地展现出来,这种表现力有时比文字的表达还要入木三分.由于QQ本身自带的聊天表情有限,因此,不少朋友都乐于从其它软件或

炫出我的个性——QQ聊天表情的绘制

聊天 前段时间,为大家讲解了如何在Fireworks中绘制QQ皮肤的教程实例,相信大家已有所收获.这次我们再利用Fireworks中自带的GIF动画制作功能,为大家讲解动态QQ表情的制作.从而也将个性化的QQ进行到底! 在我们日常生活当中,人的表情都被包含在"喜怒哀乐"当中.但在网上的QQ聊天当中,可用的表情动作却是丰富多彩,特别是动态表情的出现,更能将某种情绪的表现生动而有趣地展现出来,这种表现力有时比文字的表达还要入木三分.由于QQ本身自带的聊天表情有限,因此,不少朋友都乐于从其它