上亿人使用的QQ IPAD版「斗图神器」原来是这么设计出来的

作者:
分类: 观点/经验
2017-08-16
7088

90后00后年轻人聊天热衷斗图,“斗图”已经成为一种聊天文化

腾讯ISUX – EU:QQ在很多人眼里是聊天的工具,那么在聊天这个看似简单的领域,究竟还能做什么创新功能?在此分享一下QQiPad版v6.7版本的主功能,同时也是设计侧主导的创新功能——“来斗”的设计总结,希望给大家一些灵感和启发。

背景

QQiPad版经过不断迭代,功能日趋完善,我们希望在此基础上继续挖掘创新点,给用户提供更爽更有趣的体验,为此做了一些调研和探索,得到了一些有用的结论:

1. QQiPad版的活跃用户呈年轻化趋势,90后00后是主力军

今年五月份ISUX北京设计部针对QQiPad版用户做了一次调研,调研结果发现,QQiPad版的活跃用户集中在90后00后这两个群体,偏年轻化。

2. 90后00后年轻人聊天热衷斗图,“斗图”已经成为一种聊天文化

3. 已有App试水表情包制作的功能,但路径长,体验差

目前主打斗图功能的App中,大部分为表情库,少部分提供简单的表情制作功能,以转发形式发送。聊天过程中使用这些app获得表情包时,需要在两个app之间反复跳转,即时性低,体验很差。

uisdc-emoji-20170815-1.png


结合这三点发现,我们认为在QQ上做斗图功能是一个值得切入的角度,因此我们进一步做了用户调研,进一步了解现阶段QQ用户对聊天里斗图及制作表情包的看法,得到如下结论:

QQ用户经常在聊天中斗图

合适的配文、搞笑的脸部表情、熟人素材是表情包获得共鸣的三大特点

多数用户DIY过表情或动过DIY的念头

多数用户因为没有合适的工具而放弃了制作表情的念头

这些结论说明QQ用户在聊天时不仅经常斗图,还希望能自制表情包,但现有的表情包工具体验不佳,无法满足用户的需求。因此,如果能够在QQ上降低制作表情包和发送表情包的门槛,大量潜在的“表情包用户”创作欲望将被激活,参与到这场表情包的“战斗”中来。

目标用户属性

在开始设计功能之前,我们进一步分析了斗图目标用户的属性,明确他们需求,根据需求进行设计。

根据以往的经验,一般用户产生专业内容的社区,有10%的用户产生内容,90%的用户参与,而在10%的用户中,有1%的人以意见领袖的形式存在。

01.png


在表情包领域,也存在着相似的规律。

处于金字塔顶端的是 “达人用户”,拥有强烈的创作欲望和发起话题欲望,有合适的素材便会动手创作,为了达到目的甚至会用多个App进行创作,不在乎成本,只在乎结果是否好玩、能否彰显自己引领聊天节奏的地位;

接下来是“活跃用户”,他们对表情包有较强的认知,虽然较少主动发起斗图,但是容易被带动起来,成为活跃的参与者和斗图的主力军;

剩下的便是90%的“围观用户”,他们创作欲望不高,更多是以转发表情包的形式参与斗图,追求简单快速低成本。

02.png


功能定位&交互设计

1. 迎合表情包文化,制作用户喜欢的表情包

通过用户调研结果了解,合适的配文、搞笑的面部表情、熟人素材是一个表情包成功的关键因素;纵观这几年的表情包文化发展,从最开始的暴漫,到现在广为流传的蘑菇头、熊猫头表情包,其模式都是“夸张的肢体简笔画+搞笑的面部表情+恰到好处的文案”,已经成为斗图表情包的主流形态,通过这种方式来表达自己的情感和想法,甚至不需要打字就能够聊上一整天。

03.png


因此,我们决定顺应斗图文化,为用户提供能够快速制作主流表情包(面部表情+身体+文案)的功能。

顺应斗图文化.png


2. 让90%的“围观用户”能一键斗图

前文提到,90%的用户为“围观用户”,他们参与但不主动发起斗图,追求简单快速,为了让他们参与斗图,需要设计一个门槛极低的斗图功能,做到一键就能斗图。

在聊天中,将带人脸的照片作为触发元素,通过规则约束,匹配出适合恶搞的场景,再利用脸部图像识别和抠图技术,快速匹配素材和文案,一键发送,激活斗图气氛。

05.png


3. 为1%的“达人用户”提供相对完善的创作条件

达人用户是最热衷创作表情包的一波人,网络上流传的表情包大部分出自他们之手,相比创作难度,他们更关注能否产出理想效果的表情包表达自己的情感和想法,因此,需要为他们设计一个难度适中的编辑功能,同时为他们提供基础素材,满足他们从无到有创作和表达的欲望。

06.png

07.png


视觉设计

1. icon设计

斗图功能的icon设计充满挑战:

图形上需要充分表现斗图这一行为的特点。

图形要足够有吸引力,让用户有点击的欲望。

斗图功能入口众多,分布在不同的界面,这些界面上的图标都有其风格,因此设计的图形必须有较强的拓展性。

这些挑战也是明确的目标,基于这三个目标,开始着手斗图功能的icon设计。

开始设计之前先梳理一遍icon的使用场景,了解各自特点。(虚线部分为icon位置)

08.png


了解应用场景后开始进行发散,从斗图的三个维度去发散图形创意。

09.png


根据这三个方向搜集相应的图片作为参考:

向搜集相应的图片.png


根据设想的维度和参考的元素绘制图标,将他们进行不同程度的结合,绘制了多个方案。

10.png


对各个方案进行比较之后,选出了这两个方案进一步做结合,前者能更直观地表现斗图这一行为,而后者的表情给人一种嘲讽的感觉,更符合斗图的气质。

11.png


结合后以拿着剑的挑衅脸小人形象呈现,并根据不同使用场景进行了延展。

12.png


项目组内小范围测试了一下,得到一些比较积极的反馈:“这个表情特别贱”、“忍不住就想点”、“可以的”……说明设计结果与目标相符。

2. 界面设计

聊天触发界面:

13.png


一键生成表情包演示(gif):

14.gif


首次出现引导(gif):

15.gif


编辑界面:

为了获得更佳沉浸的编辑体验,将主界面定为深色调;同时为了强化发送,采用了更加突出的按钮样式设计。

编辑界面.png


3. 素材设计

预设素材的设计重心在于身体素材的绘制。搜集网络上比较火的表情包进行分析,发现以下特点:

风格略“糙”,多为简笔画。

形体夸张,体现在动作和身体比例上。

视觉感受偏“贱”和“萌”。

视觉感受偏“贱”和“萌”.png


结合身边年轻人对这些表情包特点的评价,还可以了解到他们发送表情包的的诉求主要是为了有趣地表达自己的情感,糙、夸张、贱萌的表情包很好地满足了他们的诉求。基于这三个特点我们进行了大量的尝试:

16.png


绘制完之后又在内部进行小范围的评选,以了解大家对这些素材的接受程度和反馈。

了解大家.png


除此之外我们还对不同类型的素材数量进行了比例分配。斗图时,表情包大致分为三类,使用数量上有以下特征:

 嘲讽型表情包居多,互相嘲讽是斗图常态。

过渡型表情次之,经常需要它们来切换话题/挽尊。

怼人型表情最少,只有特别熟的朋友才“械斗”。

他们的比例大致为6:3:1。

17.png


经过多方面的考虑,层层筛选,选出了50多个素材搭配文案进行上线,展示如下。由于用户喜好和理解的笑点多种多样、同时网络上的新梗层出不穷、再加上初次绘制素材经验有限,上线的素材可能无法完全贴合所有用户的喜好,但不管怎样,这只是一个开始,我们将根据上线后的使用情况和用户反馈,进一步丰富素材库,继续提高“来斗”功能的可玩性。

18.png


4. 官网设计

为了配合宣传,对官网也做了一次风格更新,采用黄黑为主色调,搭配表情包形象,营造一种年轻活力的感觉,贴合本期斗图的主题。

官网设计.png


5. 来斗功能演示Demo(视频)

QQiPad版“来斗”趣味斗图功能演示_腾讯视频

结语

“来斗”作为设计侧主导的创新项目,从创意发散、提案、设计到项目落地,设计侧全程跟进,收获满满。作为一个创新导向的设计团队,我们希望用更多好玩的创新点子,让QQ聊天更加有趣。而本次项目的顺利落地,让我们坚定了创新的方向,同时对后续继续创新充满了期待。


最新推荐

×

赛事服务联系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

联系我们

  • QQ:
  • 电话:0371-86068866
  • 投稿:cndesign@163.com
  • 地址:郑州市国家大学科技园东区9号楼2层

版权信息

  移动 Android 版 豫 ICP 备16038122号-2 豫公网安备 41019702002261号