这年头,不会斗图都毕不了业?
作者:腾讯 ISUX 交互设计师 梁睿思
在刚过去的考试月里,别人家的期末考试都在一本正经的考“老九门”,南京的一所高校期末考试居然考起了表情包!而面对这样的“无厘头”题目,学生们也是绞尽“墨汁”认真作答。无图无真相:
在现代互联网的社交中,斗图已然成为一种聊天方式,不发表情感觉都没法好好聊天!出题的这位老师在出考卷时,就是看到学生们正在群里斗图,才灵机一动想到了这道题目,以表情包作为考点,考查学生对“用户体验与心理”的认知。
一、用户:QQ中的斗图习惯与诉求
在如今表情资源越来越多的情况下(可下载商城表情、从网上搜索表情、收藏别人发的表情等),对于热衷斗图的用户来说,“量”已不再是用户在意的要素,而“质”才是关键,而越来越多的用户也开始自己DIY表情。
发送一个引人瞩目、燃爆话题的表情,在群里引发大家激烈回应而得到的成就感,才是用户斗图的最大乐趣。一个大家都能随意下载的表情,和自己“精心”制作的好友搞笑表情,引发的效益必然不同,但往往能获得越高成就感的表情,获取/制作难度也会越高。
二、机会与优势:QQ中基于熟人社交的斗图
对于QQ来说,聊天过程中大量产生的图片和表情,其实是很好的素材活水,基于这些素材进行二次加工,即能源源不断的产生属于自己的独一无二的表情。而在这些图片素材中,熟人的照片是最好的“生肉”,将小伙伴逗趣神态制作成斗图表情发出,在群里就能引发一片“哗然”。
其实在ISUX北京设计中心里,大家就十分热衷于相互制作“换脸”表情,即将平时偷拍的小伙伴的脸P在别的斗图表情上,发到群里次次都会引发一连串的“乱战”,这也是触发我们做DIY斗图功能的灵感来源之一。
制作这种“换脸”表情一般主要有几个步骤:抠出人脸、边缘羽化、色彩及曲线调节、与底图正片叠底等等,才能得到较好的效果,这对技术门槛要求较高,即使是设计师也至少需要几分钟的时间。
那么,能否让普通用户在iPad QQ里,也能简单快速的创作好友的斗图表情呢?
三、功能设想:基于人脸识别的快速斗图生成
接入优图团队的人脸识别技术,我们就能快速将人脸识别并抠取出来,然后通过技术的方式自动将人脸进行效果处理和表情合成,即能让用户一键生成DIY斗图!
请看视频:
(感谢晓峰同学对demo的辛苦制作与倾情演出~)
从以上视频中可以看到,制作斗图的方式主要有两种路径,这是为了针对两类用户的特性,而提供不同的方式和能力。
1、从聊天场景切入,让功能快速触达
对于功能极其丰富的QQ来说,一个新的功能要被用户接受和喜爱,除了切中用户痛点,让功能自然且恰当的触达用户也尤为重要。因此我们在设计中,考虑能在聊天中的斗图场景下,自动触发功能并为用户快速提供结果:
在聊天窗口中,当在最新的一屏消息内有两条及以上的图片消息(我们认为此刻为潜在的斗图情景),则会触发对此图片的人脸识别判断。如果该图片有人脸,则右侧出现“来斗”按钮,点击后随机生成基于该脸来合成的表情。
为了降低操作过程中产生的转化折损,让用户更简单快速的斗图,交互方案选择了直接在图片旁边出现表情,点击表情即可发送。并且在旁边提供 “换一换”功能,点击即随机生成新的表情,让用户无需进入编辑界面也可快速更换表情。
2、提供固定入口,让灵感随意挥洒
喜欢主动DIY表情引发斗图战争的用户,可以通过聊天界面中+号内、大图查看器里或发送图片时的固定入口,进入到编辑界面。
在编辑界面中,用户可以选择预设的身体及脸部素材,也可以自己添加相册照片、聊天图片、收藏表情来做背景,或者提取图片中的脸部来进行创作。通过对脸部的简单调整和文字的增修,即可创造自己独一无二的斗图表情。
另外,别说我没提醒你们:通过“来斗”功能提取的脸部,还可以保存下来,方便用户多次使用小伙伴的经典表情哟!( ´▽`)
四、脸部与背景的智能融合
因为与人脸进行合成的底图除了我们提供的预设素材,用户还可以自定义选择图片或已有收藏表情,所以底图的类型可谓五花八门,用户可能会想把一张脸贴到另一个人脸上,也可能会想贴在一个黑白的非真人表情上。为了不让用户去承担这种与不同底图融合的编辑成本,我们希望通过一种较为简单通用的方式,让脸部与不同的底图智能合成。
首先将图片里的脸部抠出后,先去色成黑白并制成透明,这样在与不同底图合成时,能一定程度解决不同肤色和光线的脸部融合的问题,同时也契合现在流行的斗图表情风格。对于不同的底图,技术会对图片色彩的平均饱和度进行计算,然后将脸部与底图做不同效果的融合。
用户用作表情的底图一般为两种情况:彩色的图片或表情 & 经典的黑白斗图表情(多为黑色五官白色脸部)。要想智能的将脸部和不同的底图做较好的融合或覆盖,就要针对这不同情况去做判断,做不同的融合方式。
但有很多看似是黑白斗图表情,其实都参杂了一些色彩,所以不能单纯的以“彩色”或“黑白”去区分这两种底图。经过大量图片表情的测试,我们取得了一个较为合理的阀值,当底图色彩的平均饱和度大于等于10%的,则认为底图为“彩色”的,将脸部下方对应的底图区域做高斯模糊效果以融合。如果平均饱和度小于10%,则认为底图为“黑白”的,将脸部区域下对应的底图区域做白色的遮盖。
为了让用户能更快速的完成编辑,我们对每个预设身体素材都会定义合适的脸部位置和大小,让脸部能自动合成到最合适的位置;对于自定义底图的情况,如果识别出底图上有人脸,也会自动将脸部大小和位置调整至与底图人脸重合。
上述的各种处理步骤和情况判定,都是为了尽量能让用户少一步操作,让界面上少一个按钮,让这种看似门槛较高的DIY斗图玩法能够简单而流畅。
展望
由于时间和人力限制,现阶段只实现了我们设想中的基础功能和玩法,在后续的版本迭代中,我们希望不断完善技术和合成效果,并且给用户提供更多的玩法:
- 支持生成GIF动图
- 支持多张人脸的编辑
- 支持效果滤镜、添加物件素材等
- 根据对人脸情绪的识别,匹配合适的文案和表情素材
最后喊一句:此功能已在iPad QQ v6.7上线,欢迎同学们来玩来吐槽!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 学以致用C++设计模式 之 “中介模式”
- 【自然语言处理】利用LDA对希拉里邮件进行主题分析
- 学以致用C++设计模式 之 “代理模式”
- 学以致用C++设计模式 “模板方法模式”
- 学以致用C++设计模式 “抽象工厂模式”
- 学以致用C++设计模式 之 “工厂模式”
- 六大原则不熟?那你学什么设计模式?来来来,赶紧来!
- 精品:TCP连接的建立和终止
- python--几种快速排序的实现以及运行时间比较
- TCP/IP详解 -奠基篇
- 段错误?打的就是段错误!!
- (Graph)图,挑着看看
- Mybatis学习笔记(四)调用存储过程
- 跟我一起 自己种一颗 AVL树(平衡二叉搜索树)吧!
- mybatis文件映射之利用collection定义关联集合(五)