赞助商
立即赞助

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

UI设计3年前 (2021)发布 流光
2.6K 0 0

如何在产功上做更多的创来体现设计值一直是设计师注的话题,尤是在体系成熟的产里,如何对善的基本框架和功进行突破,如何挖掘户的互诉求并拓展更多的互行为等对于设计师来说都是很大的挑战。我们从前期互行为的挖掘、情感的视觉体验打磨及趣味的玩法升级个方面,剖析 Qzone 击掌功的整个设计历程,或许为大供一些参考性的思路和设计方法。

何为互动

我们先从真实生场景中的互说起。

人与人之间的互动无处不在,它是我们生活中必要的组成部分,也是整个人类的基石。从质上来讲,产品要决的问题就是人们之间互动的问题。么何定义互动呢,我们以从常的生活场中窥得一二。

1. 反馈链

首先,让我们来看一看常生活中的互动案例:

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

是一个很常见的熟人互动案例,我们以看到,熟人间很容易产生题,并持续互动下去。但是果同样的题生在不是很熟悉的人之间,能就是另一番场:

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

在例二中,因为 A 与 B 互相不熟悉,所以 A 没有对 B 的回复产生进一步互动,对因此结束。我们以进一步推理,其在个案例中,不管原因变成什么,只要 A 没有响应 B 的反馈,么 A 与 B 的互动就大概率终止。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

是因为良的互动行为一定是双方(或方)的互相行为,一旦因为某原因导致其中的反馈中断,互动将无法持续。

由此可以总结出:互动在本质上是由一系列的反馈(互动)组成的一条反馈链。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

2. 反馈质量

但是光有反馈链还远远不够,在场下,我们往往希望反馈链够长,样才能让互动双方产生感情升温。在例二中,其是存在着一条很短的反馈链的,A 与 B 只互动一个回合。A 没有继续响应 B 的反馈,是因为 B 的反馈质量低。试想,当 A 向 B 问时,若 B 的回复是「早上,你今天穿的精神!」么 A 不响应 B 的反馈呢?我想大概是的。

由此可见:反馈链的长短取决于每次反馈(互动)的质量。

高质量反馈具备很多特,其有三个尤为要:

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

反馈链中的指向性

日常生活中的互动行为,一都会以一个「握机制」作为开端。这个握机制可以是显性的(直喊出对方的称呼,可以是名字、外号,也可以是关系称谓),有也可以是隐性的(眼光的对视、话题的流转等)。这个握机制帮助互动双方建立了互动的景,让双方达成「开始交流」的共识,以便息的收者做好倾听并回复的准备,这就是互动中的指向性。

任何互动为都是发生在两个或者多个明确象,此在良好互动为,指性显尤为要──没有会去响应自言自语。在互动过程,指性不明确互动为是低质量,不容易获进步反馈,例如评论区统回复、群发新年问候、领导在台上讲话等。反指性明确互动是高质量,比较容易获反馈,例如群聊@某个、收件为某个而邮件组邮件、多聊天时眼视等。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

适度的互动行为

互动行为的适度包含个方面:息适度及行为适度。

,由于互动为本质上是信息传递过程,此反馈信息质量会接影响到反馈体质量。好反馈应该传适度信息,让接收者可以传递信息进轻松地接收及处理,最大程度降低接收者反馈槛。

另一方面,传递信息的行也应该度的。活中,不同的场合下,我们会选择不同的行表达同样的意思,比如比较式的场合会选择握手作问好,与家人久别后的见面则可能一的拥抱。

反馈的即时性

互动行依赖于一语境的,当语境消失,互动也将停止。社交产品的互动场景中,互动语境一般会随时间流逝逐渐减弱直到消失,所以反馈的质也随时间的流逝逐渐衰减,若让反馈链可以得到延续,尽保证语境消失产反馈行,因此即时性的反馈就显得十分重。

点赞到击掌的互动探索

了以的理论基础,接下分析一下 Qzone 中的互动行。

Qzone 中的互方式可归为类:评论、转发、点。中,评论和转发都可产生整的反馈链。针对评论,户还可继续通过评论、点等方式进行反馈;针对转发容,户可进行进一步的评论、转发、点。而对于点行为,反馈链到此戛然而止,户无法对点行为进行直接的反馈。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

因此,为了户的点可形成整的反馈链,我们的设计目标就呼之欲──为 Qzone 中的点行为寻一个具有指向性的、适的、具有即时性的反馈行为。

1. 互场景的择

既然要设计的是一个具有指向性的互行为,我们就必须在可接收到的场景里做这件事。我们首先遍历了人态,有可看到别人给自己点的场景。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

但是上的场景中,并是都适合承载点的反馈行为。根据户的行为目的,我们可把上场景分为两类:围绕点行为的键行为路径(图c.消息列表、图d.点列表)、点为核心目标的他场景(图a.好友态、图b.个人页)。显然,我们应该把围绕点行为的键行为路径作为要互场景。并且有对于点的反馈都是直接依附于点行为本身的,使反馈行为具有明确的指向性。

2. 适的语义及交互

前到,适的互包含「信息适」和「行为适」两个方面,落地到产里,就是定义互行为的「语义」和「交互行为」。

关点赞反馈行为的语义表达,我们列举很来自现场中的备选方案,以动的情感程度和成熟程度划分 4 个象,对系列动进行归类。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

由点赞行为身所传达的情感是比轻量化的,我们更倾向选择一个轻量化的情感表达方式为点赞的反馈;同时由 Qzone 的用户群以年轻用户为主,我们还需要选择一个尽量贴合年轻用户感官的语义。因此我们在象图中初步选中位左下角的「击掌」和「剪刀手」两个概念。考虑到「击掌」比「剪刀手」具有更为明显的指向,所以确定「击掌」为最终的落地方案。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

同时,因为点赞行为身是一个极其轻量化的行为,所以我们也用最轻量的互操为它的反馈,只需要一次点击即。

3. 反馈的及时触达

用户每次收到针对点赞的反馈,收到一条与点赞相同的消息提醒,通 push、首页新消息提醒、红点等让用户一时间晓。在消息箱列表中,每一条点赞和回赞成为单独的一条消息,以让用户最直观的查看并进行反馈。

综上所述,确定了整个反馈链的交互框架:

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

情感化的视觉体验打磨

击掌的视设计是一个现问题到决问不断循的程。在个程中,推动决方案逐步升级的核心方法是情感化设计。

击掌动作本身就带有丰的情绪,而情化的计方法可以让情绪的释放更大化,所以在视觉计阶段,以情化计作为方法去推进方案逐步完善,最终建立起用户产品、用户用户间的情,加深用户对功能的认可和共鸣,带来更加有趣的体验。

情感化设计具象到击掌这个功能,需要解决两个问题:

  • 如何唤起用户在现实景中的击掌记忆;
  • 如何符合空用户群体基本调性。
1. 唤起用户在现实场景中的击掌记忆

设计之初,我们用平面 icon 的形式来表现击掌,虽以满基的功能诉求,但是在视验上乏善陈,我们又尝试更富的各种视表现以此引用户对击掌个动的共鸣。

在计推敲的过程中共经历了三个阶段,在不断发现问题和解决问题的循环中寻找更优的计方案:

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

Step 1 | 静态展示到动势塑造

我们用两个手掌叠加的样式构造击掌 icon 的基造型。为增强用户对「击掌」的语义感使用漫画中常用的动态条,让用户从视上直观感受到是一个动态的互动行为,而非简单的单方面点亮 icon,以此加强用户对击掌个互动行为的认。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

Step 2 | 2D画演绎

但是这样的势表达仍然具有限性,态线条的表达方式并具备普适性,无法保证户可解中的含义。因此我们在第二个阶的设计迭代中使更直观的画来帮助户解,使与现实生中的作产生呼应。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

Step 3 | 3D表

解决了语义表达的问题后,我们遇到了一新的挑战,由于整动画的展示范围较小,视觉表力并不理。因此第三设阶段中,我们通过动画、试 3D 表形式的方法解决述问题。同时,3D 的表手法还可以通过光影质感传达多信息,加直观易懂,具极强的入感。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

2. 符合空间用户群体的基本调性

空主流用户以年轻居多,为了匹配用户群体基本调性需要打造个「年轻」、「有趣」 3D 击掌动画。为此,我们以「3D」、「young」、「fun」作为关键词收参考素材,以此立情绪板。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

趣味和轻量的质

如前文所述,对于击掌反馈行为是一个轻量化的互动,为避免 3D 表现法过于写实而带来不必要的厚重,同也为了增加动画的趣味性,选择卡通的掌造型进行建模。在材质的选择上偏向黏土材质,弱化高光,让视觉上的体验更加轻量。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

弹曲让动画更生动

现生活中的击掌动是一个减速运动,但是为突出击掌的动势和加强趣味,我们采用非写的弹曲来打造个动画,以此加强动画的趣味。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

礼烘托氛围

在后续的产迭代优过程中,我们引入了无限击掌的玩法,户之间可无限。这就导致画被重复播放,会速户对画的审美疲劳。为配合产玩法的升级对画的设计进行了迭代,基于击掌次数设计了同的展示彩蛋──在击掌达到特定次数后,会有彩带礼蹦,在烘托多次击掌的热情氛围的同时,给户带来更多趣味和惊。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

在击掌功的设计过程中,我们断在发现问题、解决问题的循环中断寻求更优解,逐步把一个到 100 像素范围的击掌 icon 做到更好,此来唤起户对现实击掌的记忆,建立起与户情感上的连接。

另外,通趣味的视表现手法不断推敲动画设计,让 Qzone 的年轻用户不仅从心理上建立连接,在表现也能感到符合自身标签的趣味。

趣味性的玩法升级

除上文提到的彩带礼花以外,在击掌玩法升级程中,我们也拓展更内容。

1. 给用户造惊喜

随着用户间反复击掌次数变,粒子效果不断升级,并加富有次的场效果。而且达到关键击掌次数的时,展示击掌的次数,通用户的成就感来刺激其产生更的击掌行为。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

2. 个性的延展

为了丰富手掌样式的择,给户供更多样的体验,我们和增值团队一起设计了更多的手掌形式,同时引入一些 IP 形象,击掌更唤起户的共鸣,更有趣。

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

写在最后

击掌这功能从探索到线二次迭历了很一段时间,整项目对设师也一次收获满满的过程。

1. 创新也可以从1到N的过程

创新并不都从 0 到 1,从无到的创新,尤其对于功能框架体系熟的产品,盲目的追求创新去改变用户的认知习惯不妥的,从小的问题点手去深挖思考,找到合的解决方案并打磨细节给用户创造惊喜,以小博去创新也能达到四两拨千斤的效果。

2. 打磨细节创造惊喜

探索挖掘到一不错的法之后,打磨细节也同样重的,我们出了各种不同的击掌效果方案,去找到给用户惊喜操作轻的平衡,这功能线以后我们也一直关注用户的反馈,从用户反馈中发还可以惊喜升级,从一点出发,把这点不断的扩充得细致加闭环。

3. 从活中,到活中去

击掌这功能之所以这好的数据用户认可度,一很重的原因因本身这行实活中的场景相对应的,所以让用户能很理解操作,符合用户真实场景的认知,所以学习本比较低。我们设的时候用活场景挖掘产品,能达到事半功倍的效果。

注「腾讯ISUX」的公众:

大家都在用的「点赞」功能还能怎么创新? 腾讯顶尖设计团队给了这个答案!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

如何在产品功能上做更多的创新来体现设计价值一直是设计师关注的话题,尤其是在体系成熟的产品里,如何对完善的基本框架和功...
QQ空间
在上一个不同寻常的周末,复古青年写真霸屏了 QQ 空间、微信等社交平台,撩拨了每个年龄层对自己复古青年形象的想象。 活动...
实战案例
编者按:本文由一个成功通过腾讯实习考核的设计师分享,从角色转变、方法论到知识架构3个方面让你快速从职场小白成长为专业设...
实习生
项目背景 2019年春节期间,QQ红包运营活动进行了全新改版,将卡券福利、现金奖励打包成福袋形式,并通过年俗小游戏及共享福袋...
QQ空间
正所谓狗问平安随腊去,猪生财富报春来。在这个辞旧迎新的时节,来看看设计师过得有多好(can)~ 过完了元宵,新春佳节就...
生存状态报告
复古是一场与时空美丽的邂逅,跨越时间依旧经典,用复古致敬经典、在经典中绽放新意,与我们一起期待未来 20 年华丽的变化。 ...
QQ头像
腾讯文档是一款可多人协作的在线文档。支持 Word 和 Excel 类型,打开网页就能查看和编辑,云端实时保存;可多人实时编辑文档...
ISUX
最近《创造101》让 pick 一词大火,大家都在讨论自己 pick 了哪位小姐姐,pick 到一定地步的人被称为铁粉,极端失去理智的叫...
QQ空间