上亿人使用的QQ iPad版「斗图神器」原来是这么设计出来的! - 优设-UISDC

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

2017/08/15 6891评论区

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

背景

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

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

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

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

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

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

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

  • QQ用户经常在聊天中斗图
  • 合适的配文、搞笑的脸部表情、熟人素材是表情包获得共鸣的三大特点
  • 多数用户DIY过表情或动过DIY的念头
  • 多数用户因为没有合适的工具而放弃了制作表情的念头

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

目标用户属性

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

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

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

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

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

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

功能定位&交互设计

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

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

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

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

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

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

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

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

视觉设计

1. icon设计

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

  • 图形上需要充分表现斗图这一行为的特点。
  • 图形要足够有吸引力,让用户有点击的欲望。
  • 斗图功能入口众多,分布在不同的界面,这些界面上的图标都有其风格,因此设计的图形必须有较强的拓展性。

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

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

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

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

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

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

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

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

2. 界面设计

聊天触发界面:

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

首次出现引导(gif):

编辑界面:

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

3. 素材设计

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

  • 风格略“糙”,多为简笔画。
  • 形体夸张,体现在动作和身体比例上。
  • 视觉感受偏“贱”和“萌”。

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

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

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

  •  嘲讽型表情包居多,互相嘲讽是斗图常态。
  • 过渡型表情次之,经常需要它们来切换话题/挽尊。
  • 怼人型表情最少,只有特别熟的朋友才“械斗”。

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

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

4. 官网设计

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

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

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

结语

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

「上亿人在使用的产品是这么设计出来的!」

  1. 《我如何设计了那个上亿人使用的DOGE表情?》
  2. 《上亿人使用的手机淘宝卡券包,设计师是这么做改版的》

原文地址:腾讯ISUX

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/qq-ipad-picture-fight-tool

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

UI sketch 转场动效 界面设计 平面设计 设计师 交互设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 动效设计 设计趋势 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里