这年头，不会斗图都毕不了业？

作者：腾讯 ISUX 交互设计师 梁睿思

在刚过去的考试月里，别人家的期末考试都在一本正经的考“老九门”，南京的一所高校期末考试居然考起了表情包！而面对这样的“无厘头”题目，学生们也是绞尽“墨汁”认真作答。无图无真相：

在现代互联网的社交中，斗图已然成为一种聊天方式，不发表情感觉都没法好好聊天！出题的这位老师在出考卷时，就是看到学生们正在群里斗图，才灵机一动想到了这道题目，以表情包作为考点，考查学生对“用户体验与心理”的认知。

一、用户：QQ中的斗图习惯与诉求

在如今表情资源越来越多的情况下（可下载商城表情、从网上搜索表情、收藏别人发的表情等），对于热衷斗图的用户来说，“量”已不再是用户在意的要素，而“质”才是关键，而越来越多的用户也开始自己DIY表情。

发送一个引人瞩目、燃爆话题的表情，在群里引发大家激烈回应而得到的成就感，才是用户斗图的最大乐趣。一个大家都能随意下载的表情，和自己“精心”制作的好友搞笑表情，引发的效益必然不同，但往往能获得越高成就感的表情，获取/制作难度也会越高。

二、机会与优势：QQ中基于熟人社交的斗图

对于QQ来说，聊天过程中大量产生的图片和表情，其实是很好的素材活水，基于这些素材进行二次加工，即能源源不断的产生属于自己的独一无二的表情。而在这些图片素材中，熟人的照片是最好的“生肉”，将小伙伴逗趣神态制作成斗图表情发出，在群里就能引发一片“哗然”。

其实在ISUX北京设计中心里，大家就十分热衷于相互制作“换脸”表情，即将平时偷拍的小伙伴的脸P在别的斗图表情上，发到群里次次都会引发一连串的“乱战”，这也是触发我们做DIY斗图功能的灵感来源之一。

制作这种“换脸”表情一般主要有几个步骤：抠出人脸、边缘羽化、色彩及曲线调节、与底图正片叠底等等，才能得到较好的效果，这对技术门槛要求较高，即使是设计师也至少需要几分钟的时间。

那么，能否让普通用户在iPad QQ里，也能简单快速的创作好友的斗图表情呢？

三、功能设想：基于人脸识别的快速斗图生成

接入优图团队的人脸识别技术，我们就能快速将人脸识别并抠取出来，然后通过技术的方式自动将人脸进行效果处理和表情合成，即能让用户一键生成DIY斗图！

请看视频：

（感谢晓峰同学对demo的辛苦制作与倾情演出～）

从以上视频中可以看到，制作斗图的方式主要有两种路径，这是为了针对两类用户的特性，而提供不同的方式和能力。

1、从聊天场景切入，让功能快速触达

对于功能极其丰富的QQ来说，一个新的功能要被用户接受和喜爱，除了切中用户痛点，让功能自然且恰当的触达用户也尤为重要。因此我们在设计中，考虑能在聊天中的斗图场景下，自动触发功能并为用户快速提供结果：

在聊天窗口中，当在最新的一屏消息内有两条及以上的图片消息（我们认为此刻为潜在的斗图情景），则会触发对此图片的人脸识别判断。如果该图片有人脸，则右侧出现“来斗”按钮，点击后随机生成基于该脸来合成的表情。

为了降低操作过程中产生的转化折损，让用户更简单快速的斗图，交互方案选择了直接在图片旁边出现表情，点击表情即可发送。并且在旁边提供 “换一换”功能，点击即随机生成新的表情，让用户无需进入编辑界面也可快速更换表情。

2、提供固定入口，让灵感随意挥洒

喜欢主动DIY表情引发斗图战争的用户，可以通过聊天界面中+号内、大图查看器里或发送图片时的固定入口，进入到编辑界面。

在编辑界面中，用户可以选择预设的身体及脸部素材，也可以自己添加相册照片、聊天图片、收藏表情来做背景，或者提取图片中的脸部来进行创作。通过对脸部的简单调整和文字的增修，即可创造自己独一无二的斗图表情。

另外，别说我没提醒你们：通过“来斗”功能提取的脸部，还可以保存下来，方便用户多次使用小伙伴的经典表情哟！( ´▽｀)

四、脸部与背景的智能融合

因为与人脸进行合成的底图除了我们提供的预设素材，用户还可以自定义选择图片或已有收藏表情，所以底图的类型可谓五花八门，用户可能会想把一张脸贴到另一个人脸上，也可能会想贴在一个黑白的非真人表情上。为了不让用户去承担这种与不同底图融合的编辑成本，我们希望通过一种较为简单通用的方式，让脸部与不同的底图智能合成。

首先将图片里的脸部抠出后，先去色成黑白并制成透明，这样在与不同底图合成时，能一定程度解决不同肤色和光线的脸部融合的问题，同时也契合现在流行的斗图表情风格。对于不同的底图，技术会对图片色彩的平均饱和度进行计算，然后将脸部与底图做不同效果的融合。

用户用作表情的底图一般为两种情况：彩色的图片或表情 & 经典的黑白斗图表情（多为黑色五官白色脸部）。要想智能的将脸部和不同的底图做较好的融合或覆盖，就要针对这不同情况去做判断，做不同的融合方式。

但有很多看似是黑白斗图表情，其实都参杂了一些色彩，所以不能单纯的以“彩色”或“黑白”去区分这两种底图。经过大量图片表情的测试，我们取得了一个较为合理的阀值，当底图色彩的平均饱和度大于等于10%的，则认为底图为“彩色”的，将脸部下方对应的底图区域做高斯模糊效果以融合。如果平均饱和度小于10%，则认为底图为“黑白”的，将脸部区域下对应的底图区域做白色的遮盖。

为了让用户能更快速的完成编辑，我们对每个预设身体素材都会定义合适的脸部位置和大小，让脸部能自动合成到最合适的位置；对于自定义底图的情况，如果识别出底图上有人脸，也会自动将脸部大小和位置调整至与底图人脸重合。

上述的各种处理步骤和情况判定，都是为了尽量能让用户少一步操作，让界面上少一个按钮，让这种看似门槛较高的DIY斗图玩法能够简单而流畅。

展望

由于时间和人力限制，现阶段只实现了我们设想中的基础功能和玩法，在后续的版本迭代中，我们希望不断完善技术和合成效果，并且给用户提供更多的玩法：

• 支持生成GIF动图
• 支持多张人脸的编辑
• 支持效果滤镜、添加物件素材等
• 根据对人脸情绪的识别，匹配合适的文案和表情素材

最后喊一句：此功能已在iPad QQ v6.7上线，欢迎同学们来玩来吐槽！