表情包如何设计？腾讯QQ团队借古风玩出新高度！

表情包已经成为我们日常生活中聊天表达情感时不可或缺的一部分，有60%的用户每天都会发送表情消息，但现状往往是用户都在使用千篇一律的表情包，缺乏个性化，人们会将时下流行的明星、动漫、影视截图或者猫狗萌宠作为素材并配上一些特定的文字以表达特定的情绪，那么基于用户的表情包定制就成为了新的尝试方向。那到底表情包如何设计？一来看下腾讯QQ团队借古风玩出新高度！

在自拍表情包里展现水彩世界另一个我

对于用户来说，直接拍摄自己的大脸来作为表情包素材还是会有一定的门槛，虽然传统的自拍表情包在让用户拍摄时也会采用一些趣味的头戴挂件来做装饰，但这类表情包仍旧还是直白了些，有些用户可能会考虑到传播时的肖像隐私一类的问题而对拍摄产生一些抵触心理。我们在思考有没有什么方案是可以让表情包呈现出另外一种画风，让用户作为平行世界的另一个自己对表情包进行演绎。

关于整个表情包套系的画风设定，我们参考了以往的相机素材运营经验，发现国人对于古风素材的热情经年不减，可能是因为每个华夏儿女骨子里都还有一个古风魂。在当下年轻的流行审美趋势的影响下出现了一种结合古风气韵衍生出的当代古风水彩画风，由于水彩画自身的基因里带有清透感和晕染效果，所以这种形式很适合表现古风素材的飘逸和柔美。

通常画师在绘制画稿的时候往往是依托于一个想象中的人物来进行创作，而我们的表情包是要基于现实世界的普通人来实现，普通用户拍摄时，服装与发型通常是很现代的，如果整体设定成较重的古风质感，可能会有些违和。于是我们将该套表情包设定为带有轻古风气质的水彩画风，人物部分的设定可以更贴近用户自身五官特征来进行绘制，这样更加符合关于另一个我的设定。

为了实现画风上的转变，我们用到了近年来大热的机器学习方法：生成对抗网络（Generative adversarial network，GAN），这个方法是通过让两个神经网络相互博弈的方式进行学习，由一个生成网络和一个判别网络组成。生成网络从潜在空间（latent space）中随机取样作为输入，其输出结果需要尽量模仿训练集中的真实样本。

判别网络的输入则为真实样本或生成网络的输出，其目的是将生成网络的输出从真实样本中尽可能分辨出来。而生成网络则要尽可能地欺骗判别网络。两个网络相互对抗、不断调整参数，最终目的是使判别网络无法判断生成网络的输出结果是否真实。

通过大量的图像学习训练可以让机器学习到一套目标画风的特征，从而作用在用户的图像上，将其转化为带有目标画风特征的图像。比如我们将所有莫奈的画作为样本放进潜在空间（latent space）中，生成网络和判别网络通过对这些样本的博弈学习，最终可以得出一个莫奈画风，应用在用户肖像上之后可以得到一幅带有莫奈画风的用户肖像。

这个技术可以在兼顾用户对隐私的保护需求的同时还让用户遇见了更美好的自己，不仅避免了自拍时的直白与尴尬，还让整个拍摄过程充满新鲜感、趣味性和可演绎性。

△ 图例为CycleGAN的生成效果

团队里的开发同学们基于GAN技术训练出了符合需求的水彩画风（硬核技术详解传送门见文章结尾）对人脸做了一个强画风的处理，在保留用户明显特征的同时进行水彩画风的转换，让用户置身其中更像是一个动画角色，这种抽离可以让用户作为另一个角色进行尝试和演绎，与前景氛围共同呈现出一些有鲜明画风特色的表情包。

一套风格化表情包的形成除了人物部分的画风设定以外，还有两大构成要素分别是文案和前景氛围，需要选择搭配特定的文案和前景氛围去呈现出完整的效果，文案决定了单个表情所表达出的主要信息，前景氛围则生动的表现出了文案想传递的情绪，二者缺一不可。

传递情感，助用户一臂之力

1. 内容层面：文案的表达

文案往往能加强或扩展用户所想表达的信息：并不是每个人的表演能力都能强到仅用面部表情就能传达出准确的信息，普通用户直接拍摄的表情GIF往往不够清晰明了，前景氛围以及文案的添加表达往往能直接传达并加强用户所想传递的信息。

在整体水彩表情包的文案选择上我们采用了一些能表达古风情绪的文案，如“别来无恙”、“落花寄相思”等一类的比较白话的文言文，包含了正负两个方向以及一些比较中性的情绪，同时覆盖了多个日常高频场景。

2. 表现层面：前景氛围的设定

着重氛围装饰来辅助表达文案语义所传递的情绪。

A. 静帧原画设定

前景氛围与GAN技术保持相同画风：淡雅、唯美。在装饰元素的选择上会采用一些比较典型的古风元素，颜色上整体使用低饱和度的高级灰色调搭配，保持清新淡雅水彩质感，统一用柔和的深色在边缘勾细线描边。在绘制原画的同时也需要带着动画思维去考虑到后期动画上需要如何表达会更优。

B. 动画帮助表达用户情绪

通过增添前景氛围的动画可以加强文案的情绪表达，而古风的基因天然决定这种表达方式是含蓄而优雅的,所以动画的表现上都会相对柔和一些。

以“别来无恙”来为例，我们利用了柔软的柳叶和薄纱营造出春风拂面的氛围，远处上空飞翔的燕子代表了冬去春来，故人相见，别来无恙。

以“岂有此鲤”为例，原本“岂有此理”会比较抽象一些，并且想在古风中表现出“生气”这种情绪波动比较大的负面情绪也是有一定难度的，于是在此处我们采用了一个谐音具像化的手法：“岂有此理”谐音“岂有此鲤”，并且利用鲤鱼跳水溅起水花和海棠枝干晃动落下花瓣，生动的表达出生气的情绪。

C. 让用户与内容互动

每一段前景都会带有一些剧情，并且都以平视的角度进行绘制，符合大部分用户一贯的自拍习惯角度，让用户有置身其中的代入感。

以“唤我何事？”为例，云朵从遮挡到散开，荷花、荷叶从弯腰到起身的动作，利用拟人化的手法表达出文案语义，同时文案的晕染出现效果也有种被唤起的感觉，用户在这种前景氛围的引导下往往能演绎出一些意想不到的效果。

以“嘘”为例，蓝紫暗色调营造林间安静、神秘的氛围，前后虚化提升空间感，柳叶飘动，让用户置身其中仿佛要和他们一起化身成为这林中精灵。蝴蝶扑闪着翅膀缓缓飞来并跟随人脸作为互动的氛围元素，同时文案缓缓出现的方式也呼应着其语义特质，–嘘～不要吓跑它。

激发用户表演热情

全部水彩画风表情包效果展示

由于表情包是在用户的聊天过程中传播的，属于用户的隐私，所以我们无法拉取到真实用户演绎出来的表情包，但是通过表情包的使用数据统计，我们不难看出水彩表情包上线后还是受到了大多数用户的喜爱，鲜明的画风、生动有趣的动画以及完整的模特展示在一定程度上激发了用户表演热情，使聊天过程充满乐趣。我们采访了一些用户使用之后的体验感受，得出了一些关键词。

关于这套表情包的后续的衍生应用我们在项目初期就有考虑到，所以从绘制静帧原画开始一直到表情包动画完成都是按照3:4的相机拍摄比例来做的将主体内容放置在1:1的参考线内，完成动画以后同时输出了1:1的表情包素材和3:4的不带文案的相机前景装饰素材，方便后期复用。

结语

表情包在日常已经变成了我们传递情绪最不可缺少的的一部分，而用户的喜好也会在日新月异的社会文化中快速变化，设计师除了在提升自己的专业技能以外，还需要提升产品思维和保持洞察力努力发现和创造出更多的可能性。

作者微信公众号：「腾讯ISUX」