手把手教你做表情包 创作背景

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

创意策划

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

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

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

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

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

设计阶段－考神形象的定位

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

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

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

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

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

－考神表情的绘制

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

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

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

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

在我们生活中，人们常见的表情一共是7中：快乐，愤怒，悲伤，恐惧，厌恶以及轻蔑但是我们平时常用的表情远不止这7种将基本表情混合之后，我们还能额外产生15种复合表情，而这些表情表达了我们生活中的各种情绪

[美剧便是讨论关于微表情的话题]

在绘制表情包的时候，我们可以尝试表情融合法来画出复杂的情感：从基本表情中随意选出两种，保留面部最能体现其特征的局部进行组合，从而将会形成一种全新的表情比如喜悦的笑容，配上哀伤的八字眉，就形象地表达出苦笑的情绪

总结了市面上各种表情包，我发现在脸部五官上，最能体现贱贱的情感色彩的部位有三处：眉毛，嘴巴以及鼻翼边法令纹

眉毛的高低变化能表现出惊讶道鄙夷的感受，嘴巴的收抿与撅翘配合法令纹同样能表现出很多有意思的情绪而这些表情的出现归根结底是通过五官的打开与关闭组合呈现产生厌恶的且对自身无威胁的时候表情就全部关闭，反之便全部打开，通过一张一合的局部组合，形成了如今网络上丰富多彩的表情素材

通过以上对表情的研究，并根据H5上每个测试结果页给到的文案，最后我绘制了九种考神的表情

[表情草稿]

[表情线稿]

[表情色稿]

－动态的绘制？

H5上实现动态效果的途径很多：gif，svg，JavaScript，css3，flash以及视频拍摄等针对本次h5的大部分画面是以表情的方式出现，我们最后选择了gif关键帧动画的方式体现动效

关键帧动画就是在在绘制两个关键状态后，将中间不关键的过程补齐的一种逐帧动画对于表情这类体量小，时间短的动画，通常我们只要考虑一个表情的起始和结束状态，再将中间过程补充1-2张，便可以完成一个简单gif表情

物体的运动都有加速和减速的过程,  不会突然停止和瞬间加速,在制作gif动画中，运动遵循物理定律会更容易让人们接受此外如果想让角色细微的动作引起观众的注意，只需要将该动作进行停格处理，也就是说给到关键动作更多的时间来强调这一部分的情绪，上图惊讶的表情便是如此

绘制表情的方法有几种，除了重新绘制局部以外，也可以通过缩放，旋转，液化等方式进行调整将每个局部分开进行分析处理，会让表情的制作的效率大大提高

最后奉上整个H5的完整形态，看看你是否能独自解锁所有的表情包呢？

[H5线上传送门]

设计总结

本次H5上线宣传时间为一周，从数据上看题目测试流程顺畅，完成率重测率均平稳且较高专题分享率可提升空间较高，但分享后带来的二次传播数高于预期

本次项目是我们团队第一次在H5领域做的一次设计尝试由于开发时间紧张，加上资源配置有限，在流程和交互上很多有趣的想法也没能得到实现为此我们也作了以下几点总结：

在项目开始之前一定要明确在这次活动的目的是什么导流？建立形象？还是实现功能？前期定位要明确，娱乐向还是专业向不可模凌两可音乐是能弥补H5趣味性上很有效的途径活动如果能配上合适的音乐音效会增加用户对产品的好感度测试型的H5如果在测试内容上有所局限的话，在背景设定上应该要更下功夫有趣的故事策划讲引起用户的共鸣从而增加运营活动的分享率及转化率

最后奉上一张工作照，证明在公司画表情真的是一件很尴尬的事情！

By 食草的立斌

沪江UED（公众号）

作者：立斌

为什么我产品经理笔试总是不通过？求指点。。。单纯的吐槽一下
题答的有点太新了
第一提说明你不是很了解产品经理的岗位职能；
第二题看你的思路，缺了几个重要的部分，而且空；
第三题说明你对某领域的敏感度不是很高，而且不知道的东西乱答一气会很假
硕士学历的话，对你会有一定的期望值，这种结果跟预期差距太大第一印象不被看好也说得过去