ui图标设计:QQ默认表情简化背后的故事

3982
    


来源:
Licence:
联系:
分类:
平台:
环境:
大小:
更新:
标签:
联系方式 :
免费下载 ×

下载APP,支持永久资源免费下载

限免产品服务请联系qq:1585269081

下载APP
免费下载 ×

下载APP,支持永久资源免费下载

下载APP 免费下载
下载 ×

下载APP,资源永久免费


如果出现不能下载的情况,请联系站长,联系方式在下方。

免费下载 ×

下载论文助手APP,资源永久免费

免费获取

如果你已经登录仍然出现不能下载的情况,请【点击刷新】本页面或者联系站长


小栈长为大家准备的 免费试听课程 列表,机会有限点击文章底部 阅读全文开启免费试听之旅
欢迎各位免费试听
赶紧徜徉在知识的海洋吧~

小栈长:经常使用QQ的同学都知道前不久,QQ的自带表情发生了变化,而对于这个改变也是褒贬不一啊。今天就跟着腾讯的聆澜子同学来给大家涨姿势吧!
为了帮助文字信息更准确的传达情绪,机智的工程师法尔曼(Scott Fahlman)创造了表情符号。这种高效而直白的信息交流方式被沿用至今。
经过信息时代的变迁和网络文化的多元化发展,表情符号的含义也发生了许多微妙的变化。在QQ表情中,我们所熟知的“微笑”,从友好的问候,转变成几乎完全相反的嘲讽含义;“再见”变成了“我想静静/友尽”,也与最初的设定相去甚远。
默认表情优化涉及到每个表情的外观,情绪表达,场景需求等种种细节。越是繁重的工作量,越是需要快速整理出设计的要点。我们选择以最简洁的思路去切入:发现问题,确定方案,进而解决问题。

为了保证研究的可信度和有效性。我们取得了表情发送量的整体数据,发现单个表情的发送量存在巨大的差异。

•部分表现力欠缺。
•部分使用场景模糊。
•缺少网络流行元素。
•视觉风格的过时。
确定问题后,优化设计的要点也就变得清晰:
•加强表情的情绪感和实用性。
•引入流行元素,创造新表情。
•调整表情风格,注重年轻化。

五官的联动性
人的面部表情并不只决定于某一个部位的运动,而是整体连带的动作。比如一个真诚的微笑往往伴随着嘴角和眉眼的微弯。为了强化表情的情绪感,我们对大多数表情的动态进行了五官联动优化。

以下是几个比较典型的例子:
   
【撇嘴】增加了嘴和眼的动效,配合眉毛的浮动会更加具有整体感。

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

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

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

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

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

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

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

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

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

动态重制,衍生新表情
我们也对部分表情进行了较大幅度的变更,使其更加夸张化,含义更加的明晰。甚至有意识地改变含义,成为某种意义上的新表情。
这部分改动选择了使用量较低以及与其他表情重复度高的表情。如此可以让一些冷门的表情重新得到使用。

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

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


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

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

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

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

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

然而,QQ默认表情具有其特殊性,它需要体积尽量小,又要保证清晰的情绪表达,并能够承载在图文混排的气泡中。因此,具有外轮廓线,省略身体的小圆脸,依然是最为合适的表现方式。

结合使用场景,延续品牌感
正式设计的过程中,需要更详尽地考虑表情的线上使用问题。比如默认表情和文字穿插排版的需求,以及表情的实际体积对视觉表达的影响。

最终我们选择使用对比更为清晰的线条和更加明亮柔和的色彩,以求在各种不同的背景色中,都能保证表情内容的清晰。
 
 表情的设计量非常繁重和巨大,一百多个表情动态重制,保证设计的效率和统一性极其重要。

在表情设计中,我们选择了组件化的思路进行设计。针对各种面部元素,一一进行了归纳和整理:
•不同类的眼部,重新整理了眼间距的整体一致性。
•不同类的眉部,调整了粗细的一致性。

•嘴部内外,牙齿,牙缝线,舌头表现的一致性。
•面部的表达要素,如脸颊,害羞线,手样式,黑线,水滴,青脸,进行了整合。

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

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

 

看似简单的设计,往往有更多需要挖掘的内涵。默认表情不仅需要注重视觉风格的美观和时尚,更需要深入了解每个表情的语境和时代内涵。而默认表情对比于商城表情,它又需要更具有人群和场景的普适性,避免过分的夸张和个性化。

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

快点击阅读全文加入免费试听活动中,喵~
 
不忘初心,专注设计
点击阅读全文获取免费豪礼!

点击“阅读原文”领取免费试听课程啦~

看大家都在讨论什么

0 条评论
免费下载 ×

下载APP,支持永久资源免费下载

下载APP 免费下载
温馨提示
请用电脑打开本网页,即可以免费获取你想要的了。