交互設(shè)計(jì):網(wǎng)易云音樂的抱一抱功能

5 評(píng)論 9199 瀏覽 27 收藏 19 分鐘

編輯導(dǎo)語:不知道云村的各位小伙伴發(fā)現(xiàn)了沒有,網(wǎng)易云音樂最近推出了一個(gè)新功能:抱一抱。在評(píng)論區(qū)里,看到觸動(dòng)你心弦的評(píng)論,可以使用抱一抱功能抱一抱對(duì)方。在使用功能進(jìn)行娛樂之余,本文作者站在交互設(shè)計(jì)的角度,對(duì)這個(gè)新功能進(jìn)行了分析。

對(duì)于大部分人來說,打開網(wǎng)易云的標(biāo)準(zhǔn)姿勢(shì)就是放歌,然后點(diǎn)開評(píng)論,通過評(píng)論區(qū)的內(nèi)容邊聽音樂邊消費(fèi)音樂背后的故事,尋找共鳴。之前聽歌的時(shí)候打開評(píng)論區(qū)看到了一個(gè)有意思的小細(xì)節(jié),在評(píng)論區(qū)頭像的下方有一句話叫做“收到了抱抱”,如下圖:

交互設(shè)計(jì) | 網(wǎng)易云音樂的抱一抱功能

抱一抱功能截圖

當(dāng)我看見這個(gè)交互的時(shí)候,我的第一反應(yīng)是這個(gè)是什么,我也好想玩,我也想抱抱這個(gè)陌生人。于是我琢磨了一下怎么抱抱的交互:點(diǎn)擊?長按?雙擊?手勢(shì)交互?

一、怎么抱?

1. 點(diǎn)擊

最直接方式就是點(diǎn)擊這個(gè)文案出現(xiàn)的地方,即頭像處。

對(duì)于沒有出現(xiàn)“抱抱”文案的頭像,點(diǎn)擊頭像即進(jìn)入個(gè)人主頁部分,和常規(guī)理解的交互一致。而對(duì)于出現(xiàn)了“抱抱”文案的頭像,點(diǎn)擊頭像之后多了一個(gè)“抱抱”彈窗,如下圖所示:

交互設(shè)計(jì) | 網(wǎng)易云音樂的抱一抱功能

抱一抱彈窗內(nèi)頁

彈窗內(nèi)的內(nèi)容相當(dāng)于一個(gè)抱抱記錄,上半部分是固定的,展示發(fā)表評(píng)論者的頭像和昵稱,以及對(duì)于這首歌的評(píng)論內(nèi)容,下半部分支持彈窗內(nèi)滑動(dòng),可以上下滑動(dòng)查看該評(píng)論收到的所有抱抱,右上角的抱抱圖案下可以總覽當(dāng)前該評(píng)論收到的抱抱總數(shù)。

進(jìn)到這個(gè)彈窗頁面第一反應(yīng)是:不愧是網(wǎng)易云,將情感化的內(nèi)容做成了落地頁,但是我還是沒有整明白如何抱抱。所以我再次在這個(gè)彈窗頁面嘗試了點(diǎn)擊頭像,這回直接進(jìn)入了個(gè)人主頁,沒有了和抱抱相關(guān)的內(nèi)容。

那么,是不是在抱抱彈窗里面,點(diǎn)擊那個(gè)抱抱圖案就可以雙擊+1呢?

畢竟如果要有交互上的反饋的話,一種思路是再次彈一個(gè)toast說“xx收到了你的抱抱”,另一個(gè)思路就是抱抱的數(shù)目+1,這兩種反饋都能滿足我給這位用戶抱抱的一個(gè)交互的心理預(yù)期。而且雙擊+1的思路在其他應(yīng)用中也曾經(jīng)被教育過,這里是否復(fù)用呢?

很遺憾,也不是,這個(gè)圖案做的這么大這么明顯,但目前不支持任何交互。

然后我又戳了彈窗內(nèi)的其他位置,發(fā)現(xiàn)藍(lán)字部分可以點(diǎn)擊查看給這個(gè)評(píng)論抱抱的用戶的主頁,此外,這個(gè)彈窗頁不再支持任何點(diǎn)擊交互。

那么點(diǎn)擊空白退出這個(gè)彈窗頁面,有沒有可能是點(diǎn)擊評(píng)論會(huì)出現(xiàn)抱抱功能,畢竟我是基于這個(gè)人在這首歌曲下所說的話而產(chǎn)生了共鳴,共鳴的來源是這些文字和內(nèi)容,所以點(diǎn)擊文字然后選擇抱抱選項(xiàng)也是合理的可接受的邏輯。

但很遺憾,也不是。點(diǎn)擊評(píng)論內(nèi)容是進(jìn)行回復(fù),并沒有出現(xiàn)我預(yù)期的抱抱功能入口。

2. 長按/手勢(shì)交互

最基礎(chǔ)的點(diǎn)擊交互看起來沒戲了,和這條評(píng)論有關(guān)的地方除了點(diǎn)贊和評(píng)論以外的地方我都點(diǎn)擊過了。那么是否有可能這個(gè)行為比較低頻,為了防止誤觸所以使用了門檻比較高的手勢(shì)交互或者長按呢?

一般來說,比較小眾的功能都會(huì)收起到長按里面。比如說大部分社區(qū)支持長按復(fù)制,微信聊天內(nèi)容可以支持長按復(fù)制、轉(zhuǎn)發(fā)、收藏、撤回等等。

所以我試了試長按,希望出現(xiàn)抱抱的入口,但長按只出現(xiàn)了分享、復(fù)制、舉報(bào)還有一個(gè)匪夷所思的贊賞。那有沒有可能是更小眾一點(diǎn)的手勢(shì),比如按住并左滑,按住并右滑,按住并上滑,按住并下滑,發(fā)現(xiàn)都不是。

那么,有沒有可能是類似探探卡片的玩法,單條評(píng)論左滑或者右滑表示態(tài)度,類似ios系統(tǒng)刪除短信時(shí)的操作。左滑代表對(duì)這條評(píng)論感到不適,想要?jiǎng)h除;而右滑代表我對(duì)這條內(nèi)容很有同感,而且想抱抱這個(gè)陌生人。

也失敗了…

鑒于上述的嘗試都失敗了,受到微信的教育,有沒有可能是雙擊頭像產(chǎn)生交互呢,微信是拍一拍,網(wǎng)易云是抱一抱,類似這種。但也失敗了,雙擊在這里沒有特殊的交互,只是變成了兩次單擊的效果疊加而已。

難道是我不配……這個(gè)只有尊貴的黑膠會(huì)員才能抱一抱嘛?

充了一個(gè)月黑膠會(huì)員之后重復(fù)上述操作,依舊沒有找到抱抱的入口。最后求助了萬能的度娘,抱抱的正確打開方式是——“在評(píng)論區(qū)頁面,兩個(gè)手指放置在評(píng)論區(qū)位置,往中間滑動(dòng),模擬張開雙手擁抱對(duì)方的操作“。

二、雙指交互是不是個(gè)好設(shè)計(jì)?

盡管作為一個(gè)產(chǎn)品小白,琢磨了一圈沒有想明白怎么抱抱,還去百度了教程才知道怎么抱,大多數(shù)用戶可能并沒有我這樣的好奇心,可能也不會(huì)使用這個(gè)功能。

但我們?nèi)匀徊荒苷f直接下定論說這是個(gè)不好的設(shè)計(jì),畢竟產(chǎn)品設(shè)計(jì)本身是有自己的產(chǎn)品定位和用戶場(chǎng)景需求的,也許我根本不是目標(biāo)用戶,那么用這個(gè)設(shè)計(jì)攔住我就是大成功的。

這個(gè)功能是2020年8月6號(hào)上線的,上線的背景是網(wǎng)易云被大家群嘲網(wǎng)愈云,因?yàn)樵u(píng)論區(qū)逐漸出現(xiàn)了一些抖機(jī)靈和復(fù)制粘貼的無效評(píng)論文字,以及一些編纂出來的悲情故事,大量評(píng)論區(qū)內(nèi)容同質(zhì)化。

因此網(wǎng)易云上線了“云村評(píng)論治愈計(jì)劃”,這個(gè)抱一抱的設(shè)計(jì)就是治愈計(jì)劃的一小部分。

對(duì)于列表而言,很重要的一個(gè)環(huán)節(jié)就是排序,什么樣的內(nèi)容值得靠前放,值得放在第一屏。目前大多數(shù)社區(qū)都是用點(diǎn)贊量進(jìn)行倒序排列的,或者把點(diǎn)贊和評(píng)論數(shù)綜合作為一個(gè)熱度的表現(xiàn)進(jìn)行倒序。

但是,網(wǎng)易云的評(píng)論區(qū)和其他的社區(qū)比如皮皮蝦、最右、b站、知乎等的評(píng)論區(qū)是有區(qū)別的。

在皮皮蝦等泛娛樂化的社區(qū),有趣的內(nèi)容是最重要的,有趣的內(nèi)容可以收獲大量的贊,大家也是奔著有趣來的,那么用贊的數(shù)量來篩選和排序?qū)τ脩糇钣袃r(jià)值的內(nèi)容是合理的。

在知乎,邏輯清晰,結(jié)論合理的答案是最重要的,但由于點(diǎn)贊的濫用導(dǎo)致贊的意義被模糊化了。因?yàn)橛脩舴植磺妩c(diǎn)贊的時(shí)候到底是因?yàn)橛腥み€是有用,所以導(dǎo)致純粹按照點(diǎn)贊排名的話,大量抖機(jī)靈的答案會(huì)變成高贊內(nèi)容,而真正有價(jià)值的答案被埋沒在后面。

在網(wǎng)易云,什么樣的評(píng)論最重要?有趣的內(nèi)容當(dāng)然也重要。但更重要的是有共鳴的內(nèi)容,同樣在聽這首歌的你和我,是不是都因?yàn)檫@首歌想起了自己的專屬回憶,想起了被塵封的一段往事,你和這首歌的故事里,有沒有我自己當(dāng)初的影子,我是否因?yàn)槟愕倪@段話而被治愈。

某些時(shí)候,目前的點(diǎn)贊和評(píng)論功能不足以表達(dá)我對(duì)這條評(píng)論的認(rèn)可,因?yàn)檫@條評(píng)論而涌現(xiàn)的許多回憶,因此我們需要一個(gè)更好的情緒出口。

這種感覺就好像朋友在微信朋友圈發(fā)了自己住院的消息,你想表達(dá)些什么,但又不知道說什么好,想表達(dá)你對(duì)他關(guān)心的態(tài)度,但這個(gè)態(tài)度絕不是“點(diǎn)贊”。

朋友圈的朋友有什么事情你至少還可以私下聯(lián)系去問候,但是很多時(shí)候當(dāng)我們看到陌生人的故事,很難真正做些什么,但一個(gè)情感的鼓勵(lì),一個(gè)抱一抱足以解決問題。

所以,對(duì)于用戶而言,抱一抱給到了他們除點(diǎn)贊和評(píng)論以外的一個(gè)深度感情出口,讓他們能夠基于這個(gè)出口對(duì)于和他們經(jīng)歷類似或者陌生網(wǎng)友觸動(dòng)人心的故事表達(dá)自己的態(tài)度,互相治愈。

按照我之前的猜想,抱一抱這個(gè)設(shè)計(jì)的入口至少還有三個(gè)選擇,都比當(dāng)前這個(gè)手勢(shì)交互好操作,那為啥選擇了這個(gè)非常冷門,除了地圖等圖面的雙指縮放以外目前還沒有別的產(chǎn)品使用過的雙指合并交互呢?

對(duì)于產(chǎn)品而言,正是因?yàn)榻换ラT檻足夠高,保證了抱一抱這個(gè)彩蛋設(shè)計(jì)只有少部分人知道,作為彩蛋的定位出現(xiàn)足夠讓人驚喜;也是因?yàn)榻换ラT檻足夠高,不容易被誤觸,也很難操作,所以不會(huì)被濫用,收到抱抱的數(shù)量就可以成為評(píng)論質(zhì)量的一個(gè)參考維度,即這個(gè)內(nèi)容是否能引發(fā)大多數(shù)人的共鳴。

三、抱一抱未來可以怎么玩?

盡管基于官方對(duì)這個(gè)功能的彩蛋的定位,某種程度上可以解釋為啥這個(gè)交互這么復(fù)雜。但是使用過程中,仍然有一些覺得未來可優(yōu)化的方向。

1. 關(guān)于功能的引導(dǎo)

目前功能的引導(dǎo)方式是將頭像周圍增加紅色描邊并配上紅字文案“收到了抱抱”,用來吸引用戶的視覺焦點(diǎn)。但這個(gè)引導(dǎo)目前和其他產(chǎn)品關(guān)于該用戶正在直播的引導(dǎo)有些類似,所以這也是我一開始并沒太關(guān)注到這個(gè)功能的原因。

因?yàn)樽约翰⒉幌矚g看直播,因此看直播純粹是一個(gè)功能引導(dǎo),對(duì)我來說沒有用戶價(jià)值,所以被各種app長期鍛煉下來我已經(jīng)可以直接忽略這個(gè)直播提醒了。

但是抱一抱是一個(gè)非常新穎的情感化設(shè)計(jì),因此是否在后續(xù)的功能引導(dǎo)上能夠區(qū)別于live直播等提示,讓對(duì)這種引導(dǎo)已經(jīng)疲勞的我能夠一眼區(qū)分出來。

交互設(shè)計(jì) | 網(wǎng)易云音樂的抱一抱功能

甚至跟wyy自家的live直播提醒都有一丟丟像

2. 關(guān)于交互的反饋

有興趣的朋友可以試一試,當(dāng)你雙指合并給對(duì)方一個(gè)抱抱的時(shí)候,會(huì)在該條評(píng)論上看到一個(gè)動(dòng)圖,兩個(gè)小人互相擁抱并且逐漸露出笑容。這個(gè)動(dòng)畫是很有視覺效果的,仿佛可以想象對(duì)方因?yàn)槲疫@個(gè)暖心的抱抱而受到了治愈走出陰霾的樣子,使用者的內(nèi)心反正是非常爽的。

但是另一側(cè),當(dāng)我收到他人的抱抱的時(shí)候,這個(gè)感知就非常弱了。首先入口就很深,因?yàn)槲規(guī)缀醪稽c(diǎn)開消息盒子,所以找朋友給我的評(píng)論抱抱了之后我基本是無感知的。

后續(xù)才在“我的-消息中心-通知”里面看到“xx給了你一個(gè)抱抱”,淹沒在一眾消息中,點(diǎn)進(jìn)去的落地頁也是靜態(tài)的,展示你的評(píng)論內(nèi)容和評(píng)論區(qū)的所有內(nèi)容。

交互設(shè)計(jì) | 網(wǎng)易云音樂的抱一抱功能

在眾多消息中才撈到這條消息,也就是,真正收到抱抱的人,落地頁沒有看見抱抱,而是看到了我自己的評(píng)論本身。

這個(gè)流程的問題在于:

  • 我自己的評(píng)論內(nèi)容我自己當(dāng)然清楚,對(duì)方也沒有文字或者其他回復(fù)的內(nèi)容需要我在這個(gè)頁面消費(fèi),落地到這個(gè)評(píng)論頁面就令人很疑惑,摸不著頭腦。
  • 本身對(duì)方作為網(wǎng)友給到我的就是一個(gè)虛無縹緲的情感支持,如果沒有強(qiáng)有力的交互反饋的話,那順著互聯(lián)網(wǎng)傳過來的就只有空氣,感知不到對(duì)方的任何支持,更不用談被陌生人溫暖和治愈了。

關(guān)于消息入口深這個(gè)問題也很好理解,畢竟這是個(gè)情感化的輕交互,總不能因?yàn)閷?duì)方抱了抱你就直接像微信一樣推送提示吧,這樣似乎又太重了。

我覺得一個(gè)可行的方式是,下次你再聽這首歌或者來到這首歌的評(píng)論區(qū)的時(shí)候,給到你反饋。畢竟真正喜歡的歌并且留下過評(píng)論的歌不會(huì)那么快忘記,再次回到這里除了有你當(dāng)時(shí)的評(píng)論,還有你評(píng)論后被你的文字治愈的人給你留下的一個(gè)溫暖抱抱。

  • 另外一個(gè)交互太弱的問題,后續(xù)是否可以考慮落地到抱抱彈窗頁面,展示最新的一條抱抱消息,“xx剛剛給了你一個(gè)抱抱”,并且配上動(dòng)畫展示,讓這份關(guān)心順著互聯(lián)網(wǎng)傳過來。否則這個(gè)抱一抱功能就流于表面,解決的只是我們面對(duì)他人的故事想要提供幫助的無力感,而不是真正讓人和人之間展開情感的互動(dòng)和鏈接。

3. 關(guān)于抱一抱彈窗內(nèi)頁的邏輯

目前抱一抱的內(nèi)頁羅列的是我們收到的所有抱抱內(nèi)容,誰誰誰給了xx一個(gè)抱抱,這個(gè)內(nèi)容和微信的拍一拍邏輯極其相似,xx拍了拍xx,這也是為什么我會(huì)突然聯(lián)想到是不是和微信一樣雙擊交互的方式。

但和拍一拍功能相比,目前的抱一抱彈窗內(nèi)頁有這么三個(gè)問題:

1)沒有針對(duì)性的優(yōu)化用戶查看自己彈窗的邏輯:目前抱一抱的文案是“xx給了xx一個(gè)抱抱”,xx部分是用戶名

但當(dāng)我查看自己的彈窗和給過他人抱抱的彈窗的時(shí)候,都沒有定制化且有人情味的昵稱替換。

比如xx給了你一個(gè)抱抱,你給了xx一個(gè)抱抱,讓我能夠感受到自己在這個(gè)抱抱列表中作出的共享,而不是看著昵稱和昵稱,覺得在說別人的故事,沒法建立情感的鏈接。

2)有沒有可能定制化自己的抱一抱文案,雖然咱們這個(gè)是個(gè)情感化的彩蛋功能,和微信拍一拍作為趣味化的功能的定位略有不同,但是產(chǎn)品邏輯或許可以借鑒和參考

大部分時(shí)候我拍一拍別人,是好奇別人的怕一拍文案。

但對(duì)于抱一抱來說,我是有天然的基于內(nèi)容的認(rèn)可想要抱一抱對(duì)方的沖動(dòng)的,所以不需要查看對(duì)方的抱一抱文案,但是我自己的抱一抱可以有自己的特色,比如定制我的抱一抱悄悄話。

當(dāng)我抱一抱他人的時(shí)候,帶上我的這句悄悄話送給對(duì)方,顯示“xx抱了抱你,并且說加油,陌生人”,再比如“xx抱了抱你,并且說生而為人,不用抱歉”等等。

3)未來是不是可以回抱

目前抱一抱是單向的,只支持看評(píng)論者給評(píng)論者抱抱,不支持回抱,比如我收到了一個(gè)抱抱,我也回抱一下陌生人,“謝謝你的支持”之類的;或者說除了評(píng)論者和看評(píng)論者之間,是否支持抱抱用戶之間互相抱抱,畢竟大家被同一個(gè)故事感動(dòng),是有機(jī)會(huì)共同抱團(tuán)取暖的。

#專欄作家#

李濤,微信公眾號(hào):檸檬two,人人都是產(chǎn)品經(jīng)理專欄作家。新人產(chǎn)品經(jīng)理,專注于產(chǎn)品求職分享和社交/社區(qū)賽道產(chǎn)品思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 第一次發(fā)評(píng)就收到了抱一抱,估計(jì)我太喪了

    回復(fù)
  2. 這個(gè)抱一抱的方式有點(diǎn)學(xué)習(xí)成本 網(wǎng)易剛推出這個(gè)功能的時(shí)候我還特意為了這個(gè)功能去評(píng)論區(qū)逛了逛 逛了一圈也沒發(fā)現(xiàn)軟件給我提示怎么去交互

    回復(fù)
  3. 最直接方式就是點(diǎn)擊這個(gè)文案出現(xiàn)的地方,即頭像處。
    —————————
    你在說什么?我按你說的方法都找不到抱一抱,能具體描述一下?

    來自廣東 回復(fù)
    1. 直接兩個(gè)大拇指一左一右按評(píng)論,往中間推就可以了,然后評(píng)論的右邊會(huì)出現(xiàn)兩個(gè)小人抱在一起。我發(fā)現(xiàn)如果你在左右側(cè)1/4的地方用大拇指按住往兩邊拉也有一樣的效果。

      回復(fù)
    2. 操作和手機(jī)縮放是一樣的,不過是限定在評(píng)論框服務(wù),橫向而已

      回復(fù)