社交互動創(chuàng)新 | 從點(diǎn)贊到擊掌
如何在產(chǎn)品功能上做更多的創(chuàng)新,并體現(xiàn)出設(shè)計(jì)價值一直是設(shè)計(jì)師關(guān)注的話題。尤其是在體系成熟的產(chǎn)品里,如何對完善的基本框架和功能進(jìn)行突破、如何挖掘用戶的互動訴求并拓展更多的互動行為等,對于設(shè)計(jì)師來講都是很大的挑戰(zhàn)。
筆者的團(tuán)隊(duì)從前期互動行為的挖掘、情感化的視覺體驗(yàn)打磨以及趣味的玩法升級三個方面,剖析Qzone擊掌功能的整個設(shè)計(jì)歷程,或許能為大家提供一些參考性的思路和設(shè)計(jì)方法。
一、何為互動
我們先從真實(shí)生活場景中的互動說起。
人與人之間的互動無處不在,它是我們生活中必要的組成部分,也是整個人類社會的基石。從本質(zhì)上來講,社交產(chǎn)品要解決的問題就是人與人之間的互動問題。
那么如何定義互動呢,我們可以從日常的生活場景中窺得一二。
1. 反饋鏈
首先,讓我們來看一看日常生活中的互動案例:
這是一個很常見的熟人互動案例。我們可以看到,熟人間很容易產(chǎn)生話題,并持續(xù)互動下去。但是如果同樣的話題發(fā)生在不是很熟悉的人之間,可能就會是另一番場景:
在例二中,因?yàn)锳與B互相不熟悉,所以A沒有對B的回復(fù)產(chǎn)生進(jìn)一步互動,對話因此而結(jié)束。
我們可以進(jìn)一步推理,其實(shí)在這個案例中,不管原因變成什么,只要A沒有響應(yīng)B的反饋,那么A與B的互動就大概率會終止。
這是因?yàn)榱己玫幕有袨橐欢ㄊ请p方(或多方)的互相行為,一旦因?yàn)槟承┰驅(qū)е缕渲械姆答佒袛?,互動將無法持續(xù)。
由此可以總結(jié)出:互動在本質(zhì)上是由一系列的反饋(互動)組成的一條反饋鏈。
2. 反饋質(zhì)量
但是光有反饋鏈還遠(yuǎn)遠(yuǎn)不夠,在社交場景下,我們往往希望反饋鏈足夠長,這樣才能讓互動雙方產(chǎn)生感情升溫。
在例二中,其實(shí)是存在著一條很短的反饋鏈的——A與B互動了一個回合后,由于B的反饋質(zhì)量較低,所以A沒有繼續(xù)響應(yīng)B的反饋。
試想,當(dāng)A向B問好時,若B的回復(fù)是“早上好,你今天穿得真精神!”,那么A會不會響應(yīng)B的反饋呢?我想大概是會的。
由此可見:反饋鏈的長短取決于每次反饋(互動)的質(zhì)量。
高質(zhì)量的反饋具備很多特點(diǎn),其中有三個尤為重要:
1. 反饋鏈中的指向性
我們?nèi)粘I钪械幕有袨?,一般都會以一個“握手機(jī)制”作為開端。
這個握手機(jī)制可以是顯性的(直接喊出對方的稱呼,可以是名字、外號,也可以是關(guān)系稱謂),有時也可以是隱性的(眼光的對視、話題的流轉(zhuǎn)等)。
這個握手機(jī)制幫助互動雙方建立了互動的場景,讓雙方達(dá)成”開始交流”的共識,以便信息的接收者做好傾聽并回復(fù)的準(zhǔn)備,這就是互動中的指向性。
任何互動行為都是發(fā)生在兩個或者多個明確的對象之間的,因此在良好的互動行為中,指向性顯得尤為重要——沒有人會去響應(yīng)別人的自言自語。
在互動的過程中,指向性不明確的互動行為是低質(zhì)量的,不容易獲得進(jìn)一步的反饋。例如評論區(qū)中的統(tǒng)一回復(fù)、群發(fā)的新年問候、領(lǐng)導(dǎo)在臺上的講話等。
反之指向性明確的互動是高質(zhì)量的,比較容易獲得反饋,例如群聊中@某個人、收件人為某個人而非郵件組的郵件、多人聊天時眼光的對視等。
2. 適度的互動行為
互動行為的適度包含兩個方面:信息適度及行為適度。
一方面,由于互動行為本質(zhì)上是信息的傳遞過程,因此每次反饋的信息質(zhì)量會直接影響到反饋的整體質(zhì)量。
好的反饋應(yīng)該傳達(dá)適度的信息,讓接收者可以對傳遞的信息進(jìn)行輕松的接收及處理,最大程度降低接收者的反饋門檻。
另一方面,傳遞信息的行為也應(yīng)該是適度的。
在生活中不同的場合,我們會選擇不同的行為來表達(dá)同樣的意思,比如比較正式的場合會選擇握手作為問好,而與家人久別后的見面則可能是一個熱情的擁抱。
3. 反饋的即時性
互動行為是依賴于一定語境的,當(dāng)語境消失,互動也將停止。
在社交產(chǎn)品的互動場景中,互動語境一般會隨時間流逝而逐漸減弱直到消失,所以反饋的質(zhì)量也隨時間的流逝而逐漸衰減。若想讓反饋鏈可以得到延續(xù),要盡量保證在語境消失前產(chǎn)生反饋行為,因此即時性的反饋就顯得十分重要。
三、點(diǎn)贊到擊掌的互動探索
有了以上的理論基礎(chǔ),接下來分析一下Qzone中的互動行為。
Qzone中的互動方式可以歸為三類:評論、轉(zhuǎn)發(fā)、點(diǎn)贊。其中,評論和轉(zhuǎn)發(fā)都可以產(chǎn)生完整的反饋鏈。
- 針對評論,用戶還可以繼續(xù)通過評論、點(diǎn)贊等方式進(jìn)行反饋。
- 針對轉(zhuǎn)發(fā)內(nèi)容,用戶也可以進(jìn)行進(jìn)一步的評論、轉(zhuǎn)發(fā)、點(diǎn)贊。
- 對于點(diǎn)贊行為,反饋鏈到此戛然而止,用戶無法對點(diǎn)贊行為進(jìn)行直接的反饋。
因此,為了讓用戶的點(diǎn)贊可以形成完整的反饋鏈,我們的設(shè)計(jì)目標(biāo)就呼之欲出——為Qzone中的點(diǎn)贊行為尋找一個具有指向性的、適度的、具有即時性的反饋行為。
1. 互動場景的選擇
既然要設(shè)計(jì)的是一個具有指向性的互動行為,我們就必須在可以接收到贊的場景里去做這件事。所以我們首先遍歷了主人態(tài)下,所有可以看到別人給自己點(diǎn)贊的場景。
但是以上的場景中,并不是都適合承載點(diǎn)贊的反饋行為。
根據(jù)用戶的行為目的,我們可以把以上場景分為兩類:圍繞點(diǎn)贊行為的關(guān)鍵行為路徑(圖c.消息列表、圖d.點(diǎn)贊列表)、不以點(diǎn)贊為核心目標(biāo)的其他場景(圖a.好友動態(tài)、圖b.個人主頁)。
顯然,我們應(yīng)該把圍繞點(diǎn)贊行為的關(guān)鍵行為路徑作為主要互動場景。并且所有對于點(diǎn)贊的反饋都是直接依附于點(diǎn)贊行為本身的,使反饋行為具有明確的指向性。
2. 適度的語義及交互
前文提到,適度的互動包含“信息適度”和“行為適度”兩個方面,落地到產(chǎn)品里,就是定義互動行為的“語義”和“交互行為”。
關(guān)于點(diǎn)贊反饋行為的語義表達(dá),我們列舉了很多來自現(xiàn)實(shí)社交場景中的備選方案,然后以動作的情感程度和成熟程度劃分了4個象限,對這系列動作進(jìn)行歸類。
由于點(diǎn)贊行為本身所傳達(dá)的情感是比較輕量化的,我們更傾向于選擇一個輕量化的情感表達(dá)方式作為點(diǎn)贊的反饋;同時由于Qzone的用戶群體以年輕用戶為主,我們還需要選擇一個盡量貼合年輕用戶感官的語義。
因此我們在象限圖中初步選中位于左下角的“擊掌”和“剪刀手”兩個概念。
考慮到“擊掌”比“剪刀手”具有更為明顯的指向性,所以確定“擊掌”為最終的落地方案。
同時,因?yàn)辄c(diǎn)贊行為本身是一個及其輕量化的行為,所以我們也用最輕量的交互操作作為它的反饋,只需要一次點(diǎn)擊即可。
3. 反饋的及時觸達(dá)
用戶每次收到針對點(diǎn)贊的反饋,都會收到一條與點(diǎn)贊相同的消息提醒,通過push、首頁新消息提醒、紅點(diǎn)等讓用戶第一時間知曉。
在消息箱列表中,每一條點(diǎn)贊和回贊都成為單獨(dú)的一條消息,可以讓用戶最直觀的查看并進(jìn)行反饋。
綜上所述,我們確定了整個反饋鏈的交互框架:
四、情感化的視覺體驗(yàn)打磨
擊掌的視覺設(shè)計(jì)是一個發(fā)現(xiàn)問題到解決問題不斷循環(huán)的過程。在這個過程中,推動解決方案逐步升級的核心方法是情感化設(shè)計(jì)。
擊掌動作本身就帶有豐富的情緒,而情感化的設(shè)計(jì)方法可以讓情緒的釋放更大化。所以在視覺設(shè)計(jì)階段,我們要以情感化設(shè)計(jì)作為方法去推進(jìn)方案逐步完善,最終建立起用戶與產(chǎn)品、用戶與用戶間的情感連接,加深用戶對功能的認(rèn)可和共鳴,帶來更加有趣的體驗(yàn)。
情感化設(shè)計(jì)具象到擊掌這個功能,需要解決兩個問題:
- 如何喚起用戶在現(xiàn)實(shí)場景中的擊掌記憶。
- 如何符合空間用戶群體的基本調(diào)性。
1. 喚起用戶在現(xiàn)實(shí)場景中的擊掌記憶
設(shè)計(jì)之初,我們用平面icon的形式來表現(xiàn)擊掌,雖然可以滿足基本的功能訴求,但是在視覺體驗(yàn)上乏善可陳,我們又嘗試更豐富的各種視覺表現(xiàn)以此引起用戶對擊掌這個動作的共鳴。
在設(shè)計(jì)推敲的過程中共經(jīng)歷了三個階段,在不斷發(fā)現(xiàn)問題和解決問題的循環(huán)中尋找更優(yōu)的設(shè)計(jì)方案:
Step 1 | 靜態(tài)展示到動勢塑造
我們用兩個手掌疊加的樣式構(gòu)造了擊掌icon的基本造型。
為了增強(qiáng)用戶對于“擊掌”的語義感知使用了漫畫中常用的動態(tài)線條,讓用戶從視覺上直觀感受到這是一個動態(tài)的互動行為,而非簡單的單方面點(diǎn)亮icon,以此加強(qiáng)用戶對擊掌這個互動行為的認(rèn)知。
Step 2 | 2D動畫演繹
但是這樣的動勢表達(dá)仍然具有局限性,動態(tài)線條的表達(dá)方式并不具備普適性,無法保證用戶可以理解其中的含義。
因此我們在第二個階段的設(shè)計(jì)迭代中使用更加直觀的動畫來幫助用戶理解,使其與現(xiàn)實(shí)生活中的動作產(chǎn)生呼應(yīng)。
Step 3 | 3D表現(xiàn)
在解決了語義表達(dá)的問題后,我們遇到了一個新的挑戰(zhàn)——由于整個動畫的展示視范圍較小,在視覺表現(xiàn)力上并不理想。
因此在第三個設(shè)計(jì)階段中,我們通過放大動畫、嘗試3D表現(xiàn)形式的方法解決上述問題。同時,3D的表現(xiàn)手法還可以通過光影和質(zhì)感來傳達(dá)更多信息,更加直觀易懂,具有極強(qiáng)的代入感。
2. 符合空間用戶群體的基本調(diào)性
空間的主流用戶以年輕人居多,為了匹配用戶群體的基本調(diào)性,需要打造一個“年輕”、“有趣”的3D擊掌動畫。
為此,我們以“3D”、“young”、“fun”作為關(guān)鍵詞收集參考素材,以此建立情緒版。
1. 趣味和輕量的質(zhì)感
如前文所述,對于擊掌反饋行為是一個輕量化的互動,為避免3D表現(xiàn)手法過于寫實(shí)而帶來不必要的厚重感,同時也為了增加動畫的趣味性,我們選擇卡通的手掌造型進(jìn)行建模。
在材質(zhì)的選擇上我們偏向黏土材質(zhì),弱化高光,讓視覺上體驗(yàn)更加輕量。
2. 彈性曲線讓動畫更生動
現(xiàn)實(shí)生活中的擊掌動作是一個減速運(yùn)動,但是為突出擊掌的動勢和加強(qiáng)趣味性,我們采用了非寫實(shí)的彈性曲線來打造這個動畫,以此加強(qiáng)動畫的趣味性。
3. 禮花烘托氛圍
在后續(xù)的產(chǎn)品迭代優(yōu)化過程中,我們引入了無限擊掌的玩法,用戶之間可以無限回贊。這就導(dǎo)致動畫被重復(fù)播放,會加速用戶對動畫的審美疲勞。所以為配合產(chǎn)品玩法的升級對動畫的設(shè)計(jì)也進(jìn)行了迭代,基于擊掌次數(shù)設(shè)計(jì)了不同的展示彩蛋——在擊掌達(dá)到特定次數(shù)后,會有彩帶禮花蹦出,在烘托多次擊掌的熱情氛圍的同時,給用戶帶來更多趣味和驚喜。
在擊掌功能的設(shè)計(jì)過程中,我們不斷在發(fā)現(xiàn)問題、解決問題的循環(huán)中不斷尋求更優(yōu)解,逐步把一個不到100像素范圍內(nèi)的擊掌icon做到更好,以此來喚起用戶的對現(xiàn)實(shí)擊掌的記憶,建立起與用戶情感上的連接。
另外,通過趣味性的視覺表現(xiàn)手法不斷推敲動畫設(shè)計(jì),讓Qzone的年輕用戶不僅從心理上建立連接,在表現(xiàn)層也能感知到符合自身標(biāo)簽的趣味調(diào)性。
五、趣味性的玩法升級
除上文提到的彩帶禮花以外,在擊掌玩法升級過程中,我們也拓展了更多內(nèi)容:
1. 給用戶制造驚喜
隨著用戶間反復(fù)擊掌次數(shù)變多,粒子效果會不斷升級,并加入富有層次的入場效果;而且達(dá)到關(guān)鍵擊掌次數(shù)的時候,會展示擊掌的次數(shù),通過用戶的成就感來刺激其產(chǎn)生更多的擊掌行為。
2. 個性化的延展
為了豐富手掌樣式的選擇,給用戶提供更多樣的體驗(yàn),我們和增值團(tuán)隊(duì)一起設(shè)計(jì)了更多的手掌形式,同時引入一些IP形象,讓擊掌更能喚起用戶的共鳴,也更加有趣。
六、寫在最后
擊掌這個功能從前期探索到上線和二次迭代經(jīng)歷了很長一段時間,整個項(xiàng)目對設(shè)計(jì)師來說也是一次收獲滿滿的過程。
1. 創(chuàng)新也可以是從1到N的過程
創(chuàng)新并不都是從0到1從無到有的創(chuàng)新,尤其對于功能和框架體系成熟的產(chǎn)品,盲目追求創(chuàng)新去改變用戶的認(rèn)知和習(xí)慣是不妥的。
從小的問題點(diǎn)著手去深挖和思考,找到合適的解決方案并打磨細(xì)節(jié)給用戶創(chuàng)造驚喜,以小博大去做創(chuàng)新也能達(dá)到四兩撥千斤的效果。
2. 打磨細(xì)節(jié)創(chuàng)造驚喜
探索和挖掘到一個不錯的想法之后,打磨細(xì)節(jié)也是同樣重要的。
我們出了各種不同的擊掌效果方案,去找到給用戶驚喜和操作輕量的平衡。這個功能上線以后我們也一直在關(guān)注用戶的反饋,從用戶反饋中發(fā)現(xiàn)還可以做驚喜升級,從一個點(diǎn)出發(fā),把這個點(diǎn)不斷擴(kuò)充做得更細(xì)致和更加閉環(huán)。
3. 從生活中來,到生活中去
擊掌這個功能之所以有這個好的數(shù)據(jù)和用戶認(rèn)可度,有一個很重要的原因是因?yàn)楸旧磉@個行為和現(xiàn)實(shí)生活中的場景是相對應(yīng)的。能夠讓用戶能很快地理解和操作,符合用戶真實(shí)場景的認(rèn)知,所以學(xué)習(xí)成本比較低,我們在做設(shè)計(jì)的時候用生活場景挖掘產(chǎn)品,能達(dá)到事倍功半的效果。
作者:ISUX,公眾號:騰訊ISUX(ID:tencent_isux)
來源:https://mp.weixin.qq.com/s/si5hGZAg-7ucvjK64iZiNQ
題圖來自Unsplash,基于CC0協(xié)議
思路很好
關(guān)于反饋的指向性,我們在設(shè)計(jì)推送消息的時候,是否可以優(yōu)化一下文案,讓用戶覺得這條推送是針對他的,而不是系統(tǒng)群推送的
提出的問題是:對于點(diǎn)贊行為,反饋鏈到此戛然而止,用戶無法對點(diǎn)贊行為進(jìn)行直接的反饋。
但是最后的擊掌設(shè)計(jì),也并沒有解決反饋鏈到此戛然而止的問題呀。如果贊(擊掌)就給與實(shí)時的push,是否打擾用戶?
我也覺得存在這個問題。
很不錯的效果,可是是否過度強(qiáng)化了點(diǎn)贊,導(dǎo)致喧賓奪主,也可能會使用戶產(chǎn)生不必要的視覺負(fù)擔(dān)
好的創(chuàng)新。
在好的產(chǎn)品上進(jìn)行微創(chuàng)新,在已有的認(rèn)同感下增加差異性和增強(qiáng)互動性
設(shè)計(jì)的太牛了!?。?!學(xué)習(xí)學(xué)習(xí)
這個太強(qiáng)了吧