社交互動創新：從點讚到擊掌

作者：佚名　來源：騰訊ISUX　時間：2019-07-14　標簽：社交互動點讚

如何在產品功能上做更多的創新來體現設計價值一直是設計師關注的話題，尤其是在體係成熟的產品裏，如何對完善的基本框架和功能進行突破，如何挖掘用戶的互動訴求並拓展更多的互動行為等對於設計師來說都是很大的挑戰。我們從前期互動行為的挖掘、情感化的視覺體驗打磨以及趣味的玩法升級三個方麵，剖析 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 表現手法過於寫實而帶來不必要的厚重感，同時也為了增加動畫的趣味性，我們選擇卡通的手掌造型進行建模。在材質的選擇上我們偏向黏土材質，弱化高光，讓視覺上的體驗更加輕量。

彈性曲線讓動畫更生動

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

禮花烘托氛圍

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