社交產(chǎn)品互動(dòng)創(chuàng)新，從點(diǎn)贊到擊掌過(guò)程

 

 

 

1 前言

如何在產(chǎn)品功能上做更多的創(chuàng)新來(lái)體現(xiàn)設(shè)計(jì)價(jià)值一直是設(shè)計(jì)師關(guān)注的話題，尤其是在體系成熟的產(chǎn)品里，如何對(duì)完善的基本框架和功能進(jìn)行突破、如何挖掘用戶的互動(dòng)訴求并拓展更多的互動(dòng)行為等對(duì)于設(shè)計(jì)師來(lái)講都是很大的挑戰(zhàn)。我們從前期互動(dòng)行為的挖掘、情感化的視覺(jué)體驗(yàn)打磨以及趣味的玩法升級(jí)三個(gè)方面，剖析Qzone擊掌功能的整個(gè)設(shè)計(jì)歷程，或許能為大家提供一些參考性的思路和設(shè)計(jì)方法。

 

2 何為互動(dòng)

我們先從真實(shí)生活場(chǎng)景中的互動(dòng)說(shuō)起。

 

人與人之間的互動(dòng)無(wú)處不在，它是我們生活中必要的組成部分，也是整個(gè)人類社會(huì)的基石。從本質(zhì)上來(lái)講，社交產(chǎn)品要解決的問(wèn)題就是人們之間互動(dòng)的問(wèn)題。那么如何定義互動(dòng)呢，我們可以從日常的生活場(chǎng)景中窺得一二。

 

 

 

反饋鏈

首先，讓我們來(lái)看一看日常生活中的互動(dòng)案例：

 

這是一個(gè)很常見(jiàn)的熟人互動(dòng)案例，我們可以看到，熟人間很容易產(chǎn)生話題，并持續(xù)互動(dòng)下去。但是如果同樣的話題發(fā)生在不是很熟悉的人之間，可能就會(huì)是另一番場(chǎng)景：

 

在例二中，因?yàn)锳與B互相不熟悉，所以A沒(méi)有對(duì)B的回復(fù)產(chǎn)生進(jìn)一步互動(dòng)，對(duì)話因此而結(jié)束。我們可以進(jìn)一步推理，其實(shí)在這個(gè)案例中，不管原因變成什么，只要A沒(méi)有響應(yīng)B的反饋，那么A與B的互動(dòng)就大概率會(huì)終止。

 

 

這是因?yàn)榱己玫幕?dòng)行為一定是雙方(或多方)的互相行為，一旦因?yàn)槟承┰驅(qū)е缕渲械姆答佒袛?，互?dòng)將無(wú)法持續(xù)。由此可以總結(jié)出：

互動(dòng)在本質(zhì)上是由一系列的反饋(互動(dòng))組成的一條反饋鏈

 

 

 

 

反饋質(zhì)量

但是光有反饋鏈還遠(yuǎn)遠(yuǎn)不夠，在社交場(chǎng)景下，我們往往希望反饋鏈足夠長(zhǎng)，這樣才能讓互動(dòng)雙方產(chǎn)生感情升溫。在例二中，其實(shí)是存在著一條很短的反饋鏈的，A與B只互動(dòng)了一個(gè)回合。A沒(méi)有繼續(xù)響應(yīng)B的反饋，是因?yàn)锽的反饋質(zhì)量較低。試想，當(dāng)A向B問(wèn)好時(shí)，若B的回復(fù)是“早上好，你今天穿的真精神！”，那么A會(huì)不會(huì)響應(yīng)B的反饋呢？我想大概是會(huì)的。由此可見(jiàn)：

 

反饋鏈的長(zhǎng)短取決于每次反饋(互動(dòng))的質(zhì)量。

高質(zhì)量的反饋具備很多特點(diǎn)，其中有三個(gè)尤為重要

 

 

 

 

1 反饋鏈中的指向性

我們?nèi)粘Ｉ钪械幕?dòng)行為，一般都會(huì)以一個(gè)“握手機(jī)制”作為開(kāi)端。這個(gè)握手機(jī)制可以是顯性的（直接喊出對(duì)方的稱呼，可以是名字、外號(hào)，也可以是關(guān)系稱謂），有時(shí)也可以是隱性的（眼光的對(duì)視、話題的流轉(zhuǎn)等）。這個(gè)握手機(jī)制幫助互動(dòng)雙方建立了互動(dòng)的場(chǎng)景，讓雙方達(dá)成"開(kāi)始交流"的共識(shí)，以便信息的接收者做好傾聽(tīng)并回復(fù)的準(zhǔn)備，這就是互動(dòng)中的指向性。

 

任何互動(dòng)行為都是發(fā)生在兩個(gè)或者多個(gè)明確的對(duì)象之間的，因此在良好的互動(dòng)行為中，指向性顯得尤為重要——沒(méi)有人會(huì)去響應(yīng)別人的自言自語(yǔ)。在互動(dòng)的過(guò)程中，指向性不明確的互動(dòng)行為是低質(zhì)量的，不容易獲得進(jìn)一步的反饋，例如評(píng)論區(qū)中的統(tǒng)一回復(fù)、群發(fā)的新年問(wèn)候、領(lǐng)導(dǎo)在臺(tái)上的講話等。反之指向性明確的互動(dòng)是高質(zhì)量的，比較容易獲得反饋，例如群聊中@某個(gè)人、收件人為某個(gè)人而非郵件組的郵件、多人聊天時(shí)眼光的對(duì)視等。

 

 

 

 

2 適度的互動(dòng)行為

互動(dòng)行為的適度包含兩個(gè)方面：信息適度及行為適度。

 

一方面，由于互動(dòng)行為本質(zhì)上是信息的傳遞過(guò)程，因此每次反饋的信息質(zhì)量會(huì)直接影響到反饋的整體質(zhì)量。好的反饋應(yīng)該傳達(dá)適度的信息，讓接收者可以對(duì)傳遞的信息進(jìn)行輕松的接收及處理，最大程度降低接收者的反饋門檻。

另一方面，傳遞信息的行為也應(yīng)該是適度的。在生活中，不同的場(chǎng)合下，我們會(huì)選擇不同的行為來(lái)表達(dá)同樣的意思，比如比較正式的場(chǎng)合會(huì)選擇握手作為問(wèn)好，而與家人久別后的見(jiàn)面則可能是一個(gè)熱情的擁抱。

 

 

 

3 反饋的即時(shí)性

互動(dòng)行為是依賴于一定語(yǔ)境的，當(dāng)語(yǔ)境消失，互動(dòng)也將停止。在社交產(chǎn)品的互動(dòng)場(chǎng)景中，互動(dòng)語(yǔ)境一般會(huì)隨時(shí)間流逝而逐漸減弱直到消失，所以反饋的質(zhì)量也隨時(shí)間的流逝而逐漸衰減，若想讓反饋鏈可以得到延續(xù)，要盡量保證在語(yǔ)境消失前產(chǎn)生反饋行為，因此即時(shí)性的反饋就顯得十分重要。

 

 

 

3 點(diǎn)贊到擊掌的互動(dòng)探索

有了以上的理論基礎(chǔ)，接下來(lái)分析一下Qzone中的互動(dòng)行為。

 

Qzone中的互動(dòng)方式可以歸為三類：評(píng)論、轉(zhuǎn)發(fā)、點(diǎn)贊。其中，評(píng)論和轉(zhuǎn)發(fā)都可以產(chǎn)生完整的反饋鏈。針對(duì)評(píng)論，用戶還可以繼續(xù)通過(guò)評(píng)論、點(diǎn)贊等方式進(jìn)行反饋；針對(duì)轉(zhuǎn)發(fā)內(nèi)容，用戶也可以進(jìn)行進(jìn)一步的評(píng)論、轉(zhuǎn)發(fā)、點(diǎn)贊。而對(duì)于點(diǎn)贊行為，反饋鏈到此戛然而止，用戶無(wú)法對(duì)點(diǎn)贊行為進(jìn)行直接的反饋。

 

 

因此，為了讓用戶的點(diǎn)贊可以形成完整的反饋鏈，我們的設(shè)計(jì)目標(biāo)就呼之欲出——為Qzone中的點(diǎn)贊行為尋找一個(gè)具有指向性的、適度的、具有即時(shí)性的反饋行為?；?dòng)場(chǎng)景的選擇

 

 

 

互動(dòng)場(chǎng)景的選擇

既然要設(shè)計(jì)的是一個(gè)具有指向性的互動(dòng)行為，我們就必須在可以接收到贊的場(chǎng)景里去做這件事。所以我們首先遍歷了主人態(tài)下，所有可以看到別人給自己點(diǎn)贊的場(chǎng)景。

 

 

但是以上的場(chǎng)景中，并不是都適合承載點(diǎn)贊的反饋行為。根據(jù)用戶的行為目的，我們可以把以上場(chǎng)景分為兩類：圍繞點(diǎn)贊行為的關(guān)鍵行為路徑（圖c.消息列表、圖d.點(diǎn)贊列表）、不以點(diǎn)贊為核心目標(biāo)的其他場(chǎng)景（圖a.好友動(dòng)態(tài)、圖b.個(gè)人主頁(yè)）。顯然，我們應(yīng)該把圍繞點(diǎn)贊行為的關(guān)鍵行為路徑作為主要互動(dòng)場(chǎng)景。并且所有對(duì)于點(diǎn)贊的反饋都是直接依附于點(diǎn)贊行為本身的，使反饋行為具有明確的指向性。

 

 

 

適度的語(yǔ)義及交互

前文提到，適度的互動(dòng)包含“信息適度”和“行為適度”兩個(gè)方面，落地到產(chǎn)品里，就是定義互動(dòng)行為的“語(yǔ)義”和“交互行為”。

關(guān)于點(diǎn)贊反饋行為的語(yǔ)義表達(dá)，我們列舉了很多來(lái)自現(xiàn)實(shí)社交場(chǎng)景中的備選方案，然后以動(dòng)作的情感程度和成熟程度劃分了4個(gè)象限，對(duì)這系列動(dòng)作進(jìn)行歸類。

 

 

由于點(diǎn)贊行為本身所傳達(dá)的情感是比較輕量化的，我們更傾向于選擇一個(gè)輕量化的情感表達(dá)方式作為點(diǎn)贊的反饋；同時(shí)由于Qzone的用戶群體以年輕用戶為主，我們還需要選擇一個(gè)盡量貼合年輕用戶感官的語(yǔ)義。因此我們?cè)谙笙迗D中初步選中位于左下角的“擊掌”和“剪刀手”兩個(gè)概念。考慮到“擊掌”比“剪刀手”具有更為明顯的指向性，所以確定“擊掌”為最終的落地方案。

 

 

同時(shí)，因?yàn)辄c(diǎn)贊行為本身是一個(gè)及其輕量化的行為，所以我們也用最輕量的交互操作作為它的反饋，只需要一次點(diǎn)擊即可。

 

 

 

反饋的及時(shí)觸達(dá)

用戶每次收到針對(duì)點(diǎn)贊的反饋，都會(huì)收到一條與點(diǎn)贊相同的消息提醒，通過(guò)push、首頁(yè)新消息提醒、紅點(diǎn)等讓用戶第一時(shí)間知曉。在消息箱列表中，每一條點(diǎn)贊和回贊都成為單獨(dú)的一條消息，可以讓用戶最直觀的查看并進(jìn)行反饋。

綜上所述，我們確定了整個(gè)反饋鏈的交互框架：

 

 

 

 

4 情感化的視覺(jué)體驗(yàn)打磨

擊掌的視覺(jué)設(shè)計(jì)是一個(gè)發(fā)現(xiàn)問(wèn)題到解決問(wèn)不斷循環(huán)的過(guò)程。在這個(gè)過(guò)程中，推動(dòng)解決方案逐步升級(jí)的核心方法是情感化設(shè)計(jì)。

 

擊掌動(dòng)作本身就帶有豐富的情緒，而情感化的設(shè)計(jì)方法可以讓情緒的釋放更大化，所以在視覺(jué)設(shè)計(jì)階段，我們以情感化設(shè)計(jì)作為方法去推進(jìn)方案逐步完善，最終建立起用戶與產(chǎn)品、用戶與用戶間的情感連接，加深用戶對(duì)功能的認(rèn)可和共鳴，帶來(lái)更加有趣的體驗(yàn)。

 

情感化設(shè)計(jì)具象到擊掌這個(gè)功能，需要解決兩個(gè)問(wèn)題：

1.如何喚起用戶在現(xiàn)實(shí)場(chǎng)景中的擊掌記憶；

2.如何符合空間用戶群體的基本調(diào)性。

 

 

 

喚起用戶在現(xiàn)實(shí)場(chǎng)景中的擊掌記憶

設(shè)計(jì)之初，我們用平面icon的形式來(lái)表現(xiàn)擊掌，雖然可以滿足基本的功能訴求，但是在視覺(jué)體驗(yàn)上乏善可陳，我們又嘗試更豐富的各種視覺(jué)表現(xiàn)以此引起用戶對(duì)擊掌這個(gè)動(dòng)作的共鳴。

 

在設(shè)計(jì)推敲的過(guò)程中共經(jīng)歷了三個(gè)階段，在不斷發(fā)現(xiàn)問(wèn)題和解決問(wèn)題的循環(huán)中尋找更優(yōu)的設(shè)計(jì)方案：

 

 

 

 

Step 1 | 靜態(tài)展示到動(dòng)勢(shì)塑造

我們用兩個(gè)手掌疊加的樣式構(gòu)造了擊掌icon的基本造型。為了增強(qiáng)用戶對(duì)于“擊掌”的語(yǔ)義感知使用了漫畫(huà)中常用的動(dòng)態(tài)線條，讓用戶從視覺(jué)上直觀感受到這是一個(gè)動(dòng)態(tài)的互動(dòng)行為，而非簡(jiǎn)單的單方面點(diǎn)亮icon，以此加強(qiáng)用戶對(duì)擊掌這個(gè)互動(dòng)行為的認(rèn)知。

 

 

 

 

Step 2 | 2D動(dòng)畫(huà)演繹

但是這樣的動(dòng)勢(shì)表達(dá)仍然具有局限性，動(dòng)態(tài)線條的表達(dá)方式并不具備普適性，無(wú)法保證用戶可以理解其中的含義。因此我們?cè)诘诙€(gè)階段的設(shè)計(jì)迭代中使用更加直觀的動(dòng)畫(huà)來(lái)幫助用戶理解，使其與現(xiàn)實(shí)生活中的動(dòng)作產(chǎn)生呼應(yīng)。

 

 

 

 

Step 3 | 3D表現(xiàn)

在解決了語(yǔ)義表達(dá)的問(wèn)題后，我們遇到了一個(gè)新的挑戰(zhàn)，由于整個(gè)動(dòng)畫(huà)的展示視范圍較小，在視覺(jué)表現(xiàn)力上并不理想。因此在第三個(gè)設(shè)計(jì)階段中，我們通過(guò)放大動(dòng)畫(huà)、嘗試3D表現(xiàn)形式的方法解決上述問(wèn)題。同時(shí)，3D的表現(xiàn)手法還可以通過(guò)光影和質(zhì)感來(lái)傳達(dá)更多信息，更加直觀易懂，具有極強(qiáng)的代入感。

 

 

 

 

符合空間用戶群體的基本調(diào)性

空間的主流用戶以年輕人居多，為了匹配用戶群體的基本調(diào)性需要打造一個(gè)“年輕”、“有趣”的3D擊掌動(dòng)畫(huà)。為此，我們以“3D”、“young”、“fun”作為關(guān)鍵詞收集參考素材，以此建立情緒版。

 

 

 

1 趣味和輕量的質(zhì)感

如前文所述，對(duì)于擊掌反饋行為是一個(gè)輕量化的互動(dòng)，為避免3D表現(xiàn)手法過(guò)于寫(xiě)實(shí)而帶來(lái)不必要的厚重感，同時(shí)也為了增加動(dòng)畫(huà)的趣味性，我們選擇卡通的手掌造型進(jìn)行建模；在材質(zhì)的選擇上我們偏向黏土材質(zhì)，弱化高光，讓視覺(jué)上體驗(yàn)更加輕量。

 

 

 

 

2 彈性曲線讓動(dòng)畫(huà)更生動(dòng)

現(xiàn)實(shí)生活中的擊掌動(dòng)作是一個(gè)減速運(yùn)動(dòng)，但是為突出擊掌的動(dòng)勢(shì)和加強(qiáng)趣味性，我們采用了非寫(xiě)實(shí)的彈性曲線來(lái)打造這個(gè)動(dòng)畫(huà)，以此加強(qiáng)動(dòng)畫(huà)的趣味性。

 

 

 

 

3 禮花烘托氛圍

在后續(xù)的產(chǎn)品迭代優(yōu)化過(guò)程中，我們引入了無(wú)限擊掌的玩法，用戶之間可以無(wú)限回贊。這就導(dǎo)致動(dòng)畫(huà)被重復(fù)播放，會(huì)加速用戶對(duì)動(dòng)畫(huà)的審美疲勞。所以為配合產(chǎn)品玩法的升級(jí)對(duì)動(dòng)畫(huà)的設(shè)計(jì)也進(jìn)行了迭代，基于擊掌次數(shù)設(shè)計(jì)了不同的展示彩蛋——在擊掌達(dá)到特定次數(shù)后，會(huì)有彩帶禮花蹦出，在烘托多次擊掌的熱情氛圍的同時(shí)，給用戶帶來(lái)更多趣味和驚喜。

 

 

 

在擊掌功能的設(shè)計(jì)過(guò)程中，我們不斷在發(fā)現(xiàn)問(wèn)題、解決問(wèn)題的循環(huán)中不斷尋求更優(yōu)解，逐步把一個(gè)不到100像素范圍內(nèi)的擊掌icon做到更好，以此來(lái)喚起用戶的對(duì)現(xiàn)實(shí)擊掌的記憶，建立起與用戶情感上的連接。另外，通過(guò)趣味性的視覺(jué)表現(xiàn)手法不斷推敲動(dòng)畫(huà)設(shè)計(jì)，讓Qzone的年輕用戶不僅從心理上建立連接，在表現(xiàn)層也能感知到符合自身標(biāo)簽的趣味調(diào)性。

 

 

4 趣味性的玩法升級(jí)

除上文提到的彩帶禮花以外，在擊掌玩法升級(jí)過(guò)程中，我們也拓展了更多內(nèi)容：

 

 

給用戶制造驚喜

隨著用戶間反復(fù)擊掌次數(shù)變多，粒子效果會(huì)不斷升級(jí)，并加入富有層次的入場(chǎng)效果；而且達(dá)到關(guān)鍵擊掌次數(shù)的時(shí)候，會(huì)展示擊掌的次數(shù)，通過(guò)用戶的成就感來(lái)刺激其產(chǎn)生更多的擊掌行為。

 

 

個(gè)性化的延展

為了豐富手掌樣式的選擇，給用戶提供更多樣的體驗(yàn)，我們和增值團(tuán)隊(duì)一起設(shè)計(jì)了更多的手掌形式，同時(shí)引入一些IP形象，讓擊掌更能喚起用戶的共鳴，也更加有趣。

 

 

5 寫(xiě)在最后

擊掌這個(gè)功能從前期探索到上線和二次迭代經(jīng)歷了很長(zhǎng)一段時(shí)間，整個(gè)項(xiàng)目對(duì)設(shè)計(jì)師來(lái)說(shuō)也是一次收獲滿滿的過(guò)程。

 

 

創(chuàng)新也可以是從1到N的過(guò)程

創(chuàng)新并不都是從0到1從無(wú)到有的創(chuàng)新，尤其對(duì)于功能和框架體系成熟的產(chǎn)品，盲目的追求創(chuàng)新去改變用戶的認(rèn)知和習(xí)慣是不妥的，從小的問(wèn)題點(diǎn)著手去深挖和思考，找到合適的解決方案并打磨細(xì)節(jié)給用戶創(chuàng)造驚喜，以小博大去做創(chuàng)新也能達(dá)到四兩撥千斤的效果。

 

 

打磨細(xì)節(jié)創(chuàng)造驚喜

探索和挖掘到一個(gè)不錯(cuò)的想法之后，打磨細(xì)節(jié)也是同樣重要的，我們出了各種不同的擊掌效果方案，去找到給用戶驚喜和操作輕量的平衡，這個(gè)功能上線以后我們也一直在關(guān)注用戶的反饋，從用戶反饋中發(fā)現(xiàn)還可以做驚喜升級(jí)，從一個(gè)點(diǎn)出發(fā)，把這個(gè)點(diǎn)不斷的擴(kuò)充做的更細(xì)致和更加閉環(huán)。

 

 

從生活中來(lái)，到生活中去

擊掌這個(gè)功能之所以有這個(gè)好的數(shù)據(jù)和用戶認(rèn)可度，有一個(gè)很重要的原因是因?yàn)楸旧磉@個(gè)行為和現(xiàn)實(shí)生活中的場(chǎng)景是相對(duì)應(yīng)的，所以讓用戶能很快的理解和操作，符合用戶真實(shí)場(chǎng)景的認(rèn)知所以學(xué)習(xí)成本比較低，我們?cè)谧鲈O(shè)計(jì)的時(shí)候用生活場(chǎng)景挖掘產(chǎn)品，能達(dá)到事倍功半的效果。