社交互动创新 | 从点赞到击掌

转自：腾讯ISUX（ID：tencent_isux）

作者：Hao Werewolf

[原创文章：www.ii77.com]

1 媒介

若何在产物功能上做更多的立异来施展设计价格一向是设计师存眷的话题，尤其是在系统成熟的产物里，若何对完美的根基框架和功能进行冲破、若何挖掘用户的互动诉求并拓展更多的互动行为等对于设计师来讲都是很大的挑战。我们早年期互动行为的挖掘、感情化的视觉体验打磨以及趣味的弄法升级三个方面，理会Qzone击掌功能的整个设计进程，或许能为人人供应一些参考性的思路和设计方式。

2 何为互动

我们先从真实生活场景中的互动说起。

人与人之间的互动无处不在，它是我们生活中需要的构成部门，也是整小我类社会的基石。从素质上来讲，社交产物要解决的问题就是人们之间互动的问题。那么若何界说互动呢，我们能够从平常的生活场景中窥得一二。

反馈链

首先，让我们来看一看平常生活中的互动案例：

这是一个很常见的熟人互动案例，我们能够看到，熟人世很轻易发生话题，并持续互动下去。然则若是同样的话题发生在不是很熟悉的人之间，或者就会是另一番场景：

在例二中，因为A与B互相不熟悉，所以A没有对B的复原发生进一步互动，对话是以而竣事。我们能够进一步推理，其实在这个案例中，不管原因酿成什么，只要A没有响应B的反馈，那么A与B的互动就也许率会完结。

这是因为精巧的互动行为必然是双方(或多方)的互相行为，一旦因为某些原因导致个中的反馈休止，互动将无法持续。由此能够总结出：

互动在素质上是由一系列的反馈(互动)构成的一条反馈链

反馈质量

然则光有反馈链还远远不敷，在社交场景下，我们往往进展反馈链充沛长，如许才能让互动双方发生情绪升温。在例二中，其实是存在着一条很短的反馈链的，A与B只互动了一个回合。A没有持续响应B的反馈，是因为B的反馈质量较低。试想，当A向B问好时，若B的复原是“早上好，你今天穿的真精神！”，那么A会不会响应B的反馈呢？我想也许是会的。由此可见：

反馈链的长短取决于每次反馈(互动)的质量。

高质量的反馈具备好多特点，个中有三个尤为主要

1 反馈链中的指向性

我们平常生活中的互动行为，一样都邑以一个“握手机制”作为劈头。这个握手机制能够是显性的（直接喊出对方的称谓，能够是名字、绰号，也能够是关系称呼），有时也能够是隐性的（目光的对视、话题的流转等）。这个握手机制匡助互动双方竖立了互动的场景，让双方杀青"起头交流"的共识，以便信息的领受者做好倾听并复原的预备，这就是互动中的指向性。

任何互动行为都是发生在两个或许多个明确的对象之间的，是以在精巧的互动行为中，指向性显得尤为主要——没有人会去响应别人的自言自语。在互动的过程中，指向性不明确的互动行为是低质量的，不轻易获得进一步的反馈，例如谈论区中的统一复原、群发的新年问候、向导在台上的讲话等。反之指向性明确的互动是高质量的，对照轻易获得反馈，例如群聊中@某小我、收件工资某小我而非邮件组的邮件、多人聊天时目光的对视等。

2 适度的互动行为

互动行为的适度包含两个方面：信息适度及行为适度。

一方面，因为互动行为素质上是信息的传递过程，是以每次反馈的信息质量会直接影响到反馈的整体质量。好的反馈应该传达适度的信息，让领受者能够对传递的信息进行轻松的领受及处理，最大水平降低领受者的反馈门槛。

另一方面，传递信息的行为也应该是适度的。在生活中，分歧的场合下，我们会选择分歧的行为来表达同样的意思，好比对照正式的场合会选择握手作为问好，而与家人久别后的晤面则或者是一个热情的拥抱。

3 反馈的即时性

互动行为是依靠于必然语境的，当语境消散，互动也将住手。在社交产物的互动场景中，互动语境一样会随时间流逝而逐渐削弱直到消散，所以反馈的质量也随时间的流逝而逐渐衰减，若想让反馈链能够获得陆续，要尽量包管在语境消散前发生反馈行为，是以即时性的反馈就显得十分主要。

3 点赞到击掌的互动索求

有了以上的理论根蒂，接下来剖析一下Qzone中的互动行为。

Qzone中的互动体式能够归为三类：谈论、转发、点赞。个中，谈论和转发都能够发生完整的反馈链。针对谈论，用户还能够持续经由谈论、点赞等体式进行反馈；针对转发内容，用户也能够进行进一步的谈论、转发、点赞。而对于点赞行为，反馈链到此戛然而止，用户无法对点赞行为进行直接的反馈。

是以，为了让用户的点赞能够形成完整的反馈链，我们的设计方针就呼之欲出——为Qzone中的点赞行为寻找一个具有指向性的、适度的、具有即时性的反馈行为。

互动场景的选择

既然要设计的是一个具有指向性的互动行为，我们就必需在能够领受到赞的场景里去做这件事。所以我们首先遍历了主人态下，所有能够看到别人给本身点赞的场景。

然则以上的场景中，并不是都适合承载点赞的反馈行为。凭据用户的行为目的，我们能够把以上场景分为两类：环绕点赞行为的要害行为路径（图c.新闻列表、图d.点赞列表）、不以点赞为焦点方针的其他场景（图a.石友动态、图b.小我主页）。显然，我们应该把环绕点赞行为的要害行为路径作为首要互动场景。而且所有对于点赞的反馈都是直接倚赖于点赞行为自己的，使反馈行为具有明确的指向性。

适度的语义及交互

前文提到，适度的互动包含“信息适度”和“行为适度”两个方面，落地到产物里，就是界说互动行为的“语义”和“交互行为”。

关于点赞反馈行为的语义表达，我们列举了好多来自实际社交场景中的备选方案，然后以动作的感情水平和成熟水平划分了4个象限，对这系列动作进行归类。

因为点赞行为自己所传达的感情是对照轻量化的，我们更倾向于选择一个轻量化的感情表达体式作为点赞的反馈；同时因为Qzone的用户群体以年青年头用户为主，我们还需要选择一个尽量贴合年青年头用户感官的语义。是以我们在象限图中初步选中位于左下角的“击掌”和“铰剪手”两个概念。考虑到“击掌”比“铰剪手”具有更为显着的指向性，所以确定“击掌”为最终的落处所案。

同时，因为点赞行为自己是一个及其轻量化的行为，所以我们也用最轻量的交互把持作为它的反馈，只需要一次点击即可。

反馈的实时触达

用户每次收到针对点赞的反馈，都邑收到一条与点赞沟通的新闻提醒，经由push、首页新新闻提醒、红点等让用户第一时间知晓。在新闻箱列表中，每一条点赞和回赞都成为零丁的一条新闻，能够让用户最直观的查察并进行反馈。

综上所述，我们确定了整个反馈链的交互框架：

4 感情化的视觉体验打磨

击掌的视觉设计是一个发现问题到解决问络续轮回的过程。在这个过程中，鞭策解决方案慢慢升级的焦点方式是感情化设计。

击掌动作自己就带有雄厚的情绪，而感情化的设计方式能够让情绪的释放更大化，所以在视觉设计阶段，我们以感情化设计作为方式去推进方案慢慢完美，最终竖立升引户与产物、用户与用户间的感情保持，加深用户对功能的承认和共识，带来加倍有趣的体验。

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

1.若何唤升引户在实际场景中的击掌记忆；

2.若何相符空间用户群体的根基调性。

唤升引户在实际场景中的击掌记忆

设计之初，我们用平面icon的形式来示意击掌，固然能够知足根基的功能诉求，然则在视觉体验上乏善可陈，我们又测验更雄厚的各类视觉示意以此引升引户对击掌这个动作的共识。

在设计推敲的过程中共履历了三个阶段，在络续发现问题息争决问题的轮回中寻找更优的设计方案：

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

我们用两个手掌叠加的样式组织了击掌icon的根基造型。为了增加用户对于“击掌”的语义感知使用了漫画中常用的动态线条，让用户从视觉上直观感触到这是一个动态的互动行为，而非简洁的片面点亮icon，以此增强用户对击掌这个互动行为的认知。

Step 2 | 2D动画演绎

然则如许的动势表达仍然具有局限性，动态线条的表达体式并不具备普适性，无法包管用户能够懂得个中的寄义。是以我们在第二个阶段的设计迭代中使用加倍直观的动画来匡助用户懂得，使其与实际生活中的动作发生呼应。

Step 3 | 3D示意

在解决了语义表达的问题后，我们碰到了一个新的挑战，因为整个动画的展示视局限较小，在视觉示意力上并不睬想。是以在第三个设计阶段中，我们经由放大动画、测验3D示意形式的方式解决上述问题。同时，3D的示意手法还能够经由光影和质感来传达更多信息，加倍直观易懂，具有极强的代入感。

相符空间用户群体的根基调性

空间的主流用户以年青年头人居多，为了成家用户群体的根基调性需要打造一个“年青年头”、“有趣”的3D击掌动画。为此，我们以“3D”、“young”、“fun”作为要害词收集参考素材，以此竖立情绪版。

1 趣味和轻量的质感

如前文所述，对于击掌反馈行为是一个轻量化的互动，为避免3D示意手法过于写实而带来不需要的厚重感，同时也为了增加动画的趣味性，我们选择卡通的手掌造型进行建模；在材质的选择上我们倾向黏土材质，弱化高光，让视觉上体验加倍轻量。

2 弹性曲线让动画更生动

实际生活中的击掌动作是一个减速活动，然则为凸起击掌的动势和增强趣味性，我们采用了非写实的弹性曲线来打造这个动画，以此增强动画的趣味性。

3 礼花衬托气氛

在后续的产物迭代优化过程中，我们引入了无限击掌的弄法，用户之间能够无限回赞。这就导致动画被反复播放，会加快用户对动画的审美委靡。所认为合营产物弄法的升级对动画的设计也进行了迭代，基于击掌次数设计了分歧的展示彩蛋——在击掌达到特定次数后，会有彩带礼花蹦出，在衬托多次击掌的热情气氛的同时，给用户带来更多趣味和惊喜。

在击掌功能的设计过程中，我们络续在发现问题、解决问题的轮回中络续追求更优解，慢慢把一个不到100像素局限内的击掌icon做到更好，以此来唤升引户的对实际击掌的记忆，竖立起与用户感情上的保持。

此外，经由趣味性的视觉示意手法络续推敲动画设计，让Qzone的年青年头用户不光从心理上竖立保持，在示意层也能感知到相符自身标签的趣味调性。

5 趣味性的弄法升级

除上文提到的彩带礼花以外，在击掌弄法升级过程中，我们也拓展了更多内容：

给用户制造惊喜

跟着用户间频频击掌次数变多，粒子结果会络续升级，并到场富有条理的入场结果；并且达到要害击掌次数的时候，会展示击掌的次数，经由用户的成就感来刺激其发生更多的击掌行为。

个性化的延展

为了雄厚手掌样式的选择，给用户供应更多样的体验，我们和增值团队一路设计了更多的手掌形式，同时引入一些IP形象，让击掌更能唤升引户的共识，也加倍有趣。 

6 写在最后

击掌这个功能早年期索求到上线和二次迭代履历了很长一段时间，整个项目对设计师来说也是一次收获满满的过程。

立异也能够是从1到N的过程

立异并不都是从0到1从无到有的立异，尤其对于功能和框架系统成熟的产物，盲目的追求立异去改变用户的认知和习惯是不当的，从小的问题点着手去深挖和思虑，找到合适的解决方案并打磨细节给用户缔造惊喜，以小博大去做立异也能达到四两拨千斤的结果。

打磨细节缔造惊喜

索求和挖掘到一个不错的设法之后，打磨细节也是同样主要的，我们出了各类分歧的击掌结果方案，去找到给用户惊喜和把持轻量的均衡，这个功能上线今后我们也一向在存眷用户的反馈，从用户反馈中发现还能够做惊喜升级，从一个点出发，把这个点络续的扩充做的更仔细和加倍闭环。

从生活中来，到生活中去

击掌这个功能之所以有这个好的数据和用户承认度，有一个很主要的原因是因为自己这个行为和实际生活中的场景是相对应的，所以让用户能很快的懂得和把持，相符用户真实场景的认知所以进修成本对照低，我们在做设计的时候用生活场景挖掘产物，能达到事倍功半的结果。

文章来自公家号：

腾讯ISUX 

 ( https://isux.tencent.com/articles/highfive）

存眷『UI设计达人』

看更多精选UI设计文章

↓↓↓

好文章，我在看❤️