社交產品互動創(chuàng)新，從點贊到擊掌過程

 

 

 

1 前言

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

 

2 何為互動

我們先從真實生活場景中的互動說起。

 

人與人之間的互動無處不在，它是我們生活中必要的組成部分，也是整個人類社會的基石。從本質上來講，社交產品要解決的問題就是人們之間互動的問題。那么如何定義互動呢，我們可以從日常的生活場景中窺得一二。

 

 

 

反饋鏈

首先，讓我們來看一看日常生活中的互動案例：

 

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

 

在例二中，因為A與B互相不熟悉，所以A沒有對B的回復產生進一步互動，對話因此而結束。我們可以進一步推理，其實在這個案例中，不管原因變成什么，只要A沒有響應B的反饋，那么A與B的互動就大概率會終止。

 

 

這是因為良好的互動行為一定是雙方(或多方)的互相行為，一旦因為某些原因導致其中的反饋中斷，互動將無法持續(xù)。由此可以總結出：

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

 

 

 

 

反饋質量

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

 

反饋鏈的長短取決于每次反饋(互動)的質量。

高質量的反饋具備很多特點，其中有三個尤為重要

 

 

 

 

1 反饋鏈中的指向性

我們日常生活中的互動行為，一般都會以一個“握手機制”作為開端。這個握手機制可以是顯性的（直接喊出對方的稱呼，可以是名字、外號，也可以是關系稱謂），有時也可以是隱性的（眼光的對視、話題的流轉等）。這個握手機制幫助互動雙方建立了互動的場景，讓雙方達成"開始交流"的共識，以便信息的接收者做好傾聽并回復的準備，這就是互動中的指向性。

 

任何互動行為都是發(fā)生在兩個或者多個明確的對象之間的，因此在良好的互動行為中，指向性顯得尤為重要——沒有人會去響應別人的自言自語。在互動的過程中，指向性不明確的互動行為是低質量的，不容易獲得進一步的反饋，例如評論區(qū)中的統一回復、群發(fā)的新年問候、領導在臺上的講話等。反之指向性明確的互動是高質量的，比較容易獲得反饋，例如群聊中@某個人、收件人為某個人而非郵件組的郵件、多人聊天時眼光的對視等。

 

 

 

 

2 適度的互動行為

互動行為的適度包含兩個方面：信息適度及行為適度。

 

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

另一方面，傳遞信息的行為也應該是適度的。在生活中，不同的場合下，我們會選擇不同的行為來表達同樣的意思，比如比較正式的場合會選擇握手作為問好，而與家人久別后的見面則可能是一個熱情的擁抱。

 

 

 

3 反饋的即時性

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

 

 

 

3 點贊到擊掌的互動探索

有了以上的理論基礎，接下來分析一下Qzone中的互動行為。

 

Qzone中的互動方式可以歸為三類：評論、轉發(fā)、點贊。其中，評論和轉發(fā)都可以產生完整的反饋鏈。針對評論，用戶還可以繼續(xù)通過評論、點贊等方式進行反饋；針對轉發(fā)內容，用戶也可以進行進一步的評論、轉發(fā)、點贊。而對于點贊行為，反饋鏈到此戛然而止，用戶無法對點贊行為進行直接的反饋。

 

 

因此，為了讓用戶的點贊可以形成完整的反饋鏈，我們的設計目標就呼之欲出——為Qzone中的點贊行為尋找一個具有指向性的、適度的、具有即時性的反饋行為。互動場景的選擇

 

 

 

互動場景的選擇

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

 

 

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

 

 

 

適度的語義及交互

前文提到，適度的互動包含“信息適度”和“行為適度”兩個方面，落地到產品里，就是定義互動行為的“語義”和“交互行為”。

關于點贊反饋行為的語義表達，我們列舉了很多來自現實社交場景中的備選方案，然后以動作的情感程度和成熟程度劃分了4個象限，對這系列動作進行歸類。

 

 

由于點贊行為本身所傳達的情感是比較輕量化的，我們更傾向于選擇一個輕量化的情感表達方式作為點贊的反饋；同時由于Qzone的用戶群體以年輕用戶為主，我們還需要選擇一個盡量貼合年輕用戶感官的語義。因此我們在象限圖中初步選中位于左下角的“擊掌”和“剪刀手”兩個概念?？紤]到“擊掌”比“剪刀手”具有更為明顯的指向性，所以確定“擊掌”為最終的落地方案。

 

 

同時，因為點贊行為本身是一個及其輕量化的行為，所以我們也用最輕量的交互操作作為它的反饋，只需要一次點擊即可。

 

 

 

反饋的及時觸達

用戶每次收到針對點贊的反饋，都會收到一條與點贊相同的消息提醒，通過push、首頁新消息提醒、紅點等讓用戶第一時間知曉。在消息箱列表中，每一條點贊和回贊都成為單獨的一條消息，可以讓用戶最直觀的查看并進行反饋。

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

 

 

 

 

4 情感化的視覺體驗打磨

擊掌的視覺設計是一個發(fā)現問題到解決問不斷循環(huán)的過程。在這個過程中，推動解決方案逐步升級的核心方法是情感化設計。

 

擊掌動作本身就帶有豐富的情緒，而情感化的設計方法可以讓情緒的釋放更大化，所以在視覺設計階段，我們以情感化設計作為方法去推進方案逐步完善，最終建立起用戶與產品、用戶與用戶間的情感連接，加深用戶對功能的認可和共鳴，帶來更加有趣的體驗。

 

情感化設計具象到擊掌這個功能，需要解決兩個問題：

1.如何喚起用戶在現實場景中的擊掌記憶；

2.如何符合空間用戶群體的基本調性。

 

 

 

喚起用戶在現實場景中的擊掌記憶

設計之初，我們用平面icon的形式來表現擊掌，雖然可以滿足基本的功能訴求，但是在視覺體驗上乏善可陳，我們又嘗試更豐富的各種視覺表現以此引起用戶對擊掌這個動作的共鳴。

 

在設計推敲的過程中共經歷了三個階段，在不斷發(fā)現問題和解決問題的循環(huán)中尋找更優(yōu)的設計方案：

 

 

 

 

Step 1 | 靜態(tài)展示到動勢塑造

我們用兩個手掌疊加的樣式構造了擊掌icon的基本造型。為了增強用戶對于“擊掌”的語義感知使用了漫畫中常用的動態(tài)線條，讓用戶從視覺上直觀感受到這是一個動態(tài)的互動行為，而非簡單的單方面點亮icon，以此加強用戶對擊掌這個互動行為的認知。

 

 

 

 

Step 2 | 2D動畫演繹

但是這樣的動勢表達仍然具有局限性，動態(tài)線條的表達方式并不具備普適性，無法保證用戶可以理解其中的含義。因此我們在第二個階段的設計迭代中使用更加直觀的動畫來幫助用戶理解，使其與現實生活中的動作產生呼應。

 

 

 

 

Step 3 | 3D表現

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

 

 

 

 

符合空間用戶群體的基本調性

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

 

 

 

1 趣味和輕量的質感

如前文所述，對于擊掌反饋行為是一個輕量化的互動，為避免3D表現手法過于寫實而帶來不必要的厚重感，同時也為了增加動畫的趣味性，我們選擇卡通的手掌造型進行建模；在材質的選擇上我們偏向黏土材質，弱化高光，讓視覺上體驗更加輕量。

 

 

 

 

2 彈性曲線讓動畫更生動

現實生活中的擊掌動作是一個減速運動，但是為突出擊掌的動勢和加強趣味性，我們采用了非寫實的彈性曲線來打造這個動畫，以此加強動畫的趣味性。

 

 

 

 

3 禮花烘托氛圍

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

 

 

 

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

 

 

4 趣味性的玩法升級

除上文提到的彩帶禮花以外，在擊掌玩法升級過程中，我們也拓展了更多內容：

 

 

給用戶制造驚喜

隨著用戶間反復擊掌次數變多，粒子效果會不斷升級，并加入富有層次的入場效果；而且達到關鍵擊掌次數的時候，會展示擊掌的次數，通過用戶的成就感來刺激其產生更多的擊掌行為。

 

 

個性化的延展

為了豐富手掌樣式的選擇，給用戶提供更多樣的體驗，我們和增值團隊一起設計了更多的手掌形式，同時引入一些IP形象，讓擊掌更能喚起用戶的共鳴，也更加有趣。

 

 

5 寫在最后

擊掌這個功能從前期探索到上線和二次迭代經歷了很長一段時間，整個項目對設計師來說也是一次收獲滿滿的過程。

 

 

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

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

 

 

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

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

 

 

從生活中來，到生活中去

擊掌這個功能之所以有這個好的數據和用戶認可度，有一個很重要的原因是因為本身這個行為和現實生活中的場景是相對應的，所以讓用戶能很快的理解和操作，符合用戶真實場景的認知所以學習成本比較低，我們在做設計的時候用生活場景挖掘產品，能達到事倍功半的效果。