手把手教你做表情包【百科全说】

创作背景

@立斌 6月17号是全国大学生四六级的考试日，也是对沪江“开心词场”这款英语词汇量学习产品做推广的一次好时机。因此在5月中旬开始，我们跟运营一起策划了这次H5推广活动，从前期创意到最后上线总历时三周完成本次项目。

创意策划

说到大学生考试，往往免不了临时抱佛脚的现象。本次H5的创意便是取材于学生之间普遍流行的考前拜神的仪式。以“抽签“的名义，对用户进行词汇量测试，最后给到用户四六级成绩预测，以此来诱导用户进入开心词场学习或者分享。

本次H5的测试方法具备一定的专业性，但为了保证用户能够耐着性子完成测试，产品经理在交互稿中给到了大量的表情包来丰富画面以弥补趣味不足的问题。

[承载着满满表情包的H5玩法的交互稿]

作为视觉设计师，如何在相对枯燥的测试流程中，通过视觉手段让用户觉得有趣好玩是本次设计的难点。因此在设计之前我总结了三个问题：

“考神”的形象如何体现？
什么表情能让人觉得有趣？
怎样让表情动起来？

设计阶段

－“考神”形象的定位

所谓“考神”，必然要具备“学霸“的属性以及”神仙“的气质。综合网上大家对考神形象的描述，我发现学士服博士帽可以表达出“考”的学习特征。而依赖文曲星，财神爷等传统神仙给人的固定印象，利用长胡须，鬓角以及富态长者的形象得以呈现“神”的气质。

[研究“考神”形象的参考图]

在画风的构思上，考虑到本次H5的设计目的是增加趣味，因此考神的形象必须要表现得有识别性。市面上的卡通形象从萌到贱风格不一，但流行的大多都是贱中带萌的搞怪形象。随着互联网对吐槽文化的接受程度越来越高，“贱”的气质很好的传达出一种特立独行的态度。但同时考虑到开心词场还是一款以教育为主的产品，气质不宜太夸张。因此最后在“萌”与“贱”的分寸上进行了一定的斟酌。

综合以上的形象参考以及画风把握，最后确定了考神造型的设计方向。

在人物的绘制上有几点需要注意。在线稿绘制时，需要对线条的粗细进行区分，外轮廓线条简洁但要相对粗，细节线条丰富但要相对细。画面的黑白关系在线稿阶段要保持均衡。为了让画面更加充实，上色的过程中每个局部都会采用“亮部－本色－暗部”三个层次去塑造人物的立体感。

－“考神”表情的绘制

由于本次H5的重点是刻画考神的表情，以此直观表达出对测试结果的态度。因此为了能为考神量身定做一套逗趣的表情，我汇总了市面上大部分喜闻乐见表情包，并且对他们的背景进故事进行分别了解。

[这些表情包的故事你都知道吗？]

研究过程中我发现，画一个能够准确表义的表情并不容易。

拿qq表情来说，qq表情中的“微笑”尽管属于笑的范畴，却往往给人不友好的感受。究其原因是因为，自然微笑会在苹果肌的带动下让眼睛变小，而假笑时并不会。因此“微笑”表情中瞪圆的眼睛明显符合假笑的特征。此外微笑时视线下移是一种负面情绪的体现——承受，愧疚，不同意（但无可奈何），生气（但隐忍不发作），羞涩（害怕看到对方反馈）。抑制负面情绪下的笑容会给人满满的嘲讽气息和寒意逼人的高冷感觉。由此可见一个表情处理不到位，便会产生“词不达意”的后果。