本文從一位資深交互設(shè)計(jì)師的視角出發(fā)，深入分析了YouTube和B站這兩款流行視頻平臺(tái)的交互設(shè)計(jì)。通過(guò)評(píng)論、賬號(hào)內(nèi)搜索、暫停等三個(gè)交互點(diǎn)的對(duì)比，揭示了不同設(shè)計(jì)如何影響用戶(hù)體驗(yàn)。

我有個(gè)習(xí)慣，吃飯的時(shí)候喜歡看視頻。用的最多的是YouTube（下簡(jiǎn)稱(chēng)“油管”）和 B 站。作為一枚工作 10 年+的老交互，每次看視頻的時(shí)候，職業(yè)病就犯了。會(huì)不由自主的分析這兩款軟件，在交互上，哪家做得好。

今天我選取 3 個(gè)交互點(diǎn)，帶大家一起分析下。通過(guò)這 3 個(gè)交互，其實(shí)也能看到不同的交互方式對(duì)體驗(yàn)的影響。

一、評(píng)論

在 B 站，播放器的下方，是“熱門(mén)評(píng)論”區(qū)。評(píng)論的內(nèi)容以列表的形式展現(xiàn)，上下滑動(dòng)可查看所有的熱門(mén)評(píng)論（下圖綠框所示??）。

在“熱門(mén)評(píng)論”這個(gè)標(biāo)題右邊，展示著巨大的輸入框。

這種設(shè)計(jì)，對(duì)引導(dǎo)用戶(hù)輸入評(píng)論是有幫助的。

一個(gè)視頻的評(píng)論越多，用戶(hù)互動(dòng)越活躍，社區(qū)氛圍就越好。

如何定义B端产品及B端产品经理方法论

相较于C端产品，B端产品最大的特点是：面向特定领域用户，且数量少得多，但更注重对用户专业领域操作流程的深度挖掘——也就是专业性更强，与业务的结合更紧密。

查看详情 >

對(duì)于提升留存，是有一定幫助的。

在油管，播放器下方是一個(gè)“評(píng)論 + 評(píng)論數(shù)量”的卡片（如下圖綠框所示）。這張卡片只展示一條評(píng)論，用戶(hù)無(wú)法通過(guò)上下滑動(dòng)來(lái)查看更多。

這種方式對(duì)于空間的利用率不高，因?yàn)橛脩?hù)在這里無(wú)法看到更多評(píng)論，必須通過(guò)點(diǎn)擊操作，打開(kāi)評(píng)論的浮層，才能看到剩余的所有評(píng)論。而點(diǎn)擊操作的操作成本，比 B 站那種上下滑動(dòng)，要高很多。所以這種交互方式，將評(píng)論的內(nèi)容藏得較深。其實(shí)對(duì)用戶(hù)看評(píng)論的需求，滿(mǎn)足得不太好。

對(duì)于評(píng)論，還有個(gè)關(guān)鍵交互，就是如何展示所有評(píng)論的浮層。

B 站的做法，是浮層從右向左出現(xiàn)，類(lèi)似 PC 端里經(jīng)常用到的抽屜組件，比較符合用戶(hù)的心智模型。

油管的做法，是長(zhǎng)條形狀的浮層，從下向上出現(xiàn)。

就很神奇，神來(lái)之筆??，很難評(píng)啊很難評(píng)。

這兩種交互動(dòng)效，帶來(lái)的體驗(yàn)很不同：

首先，從效率和順滑程度上來(lái)說(shuō)，B 站的浮層移動(dòng)的距離小， 所以效率更高，“動(dòng)靜”更小，帶來(lái)的體驗(yàn)會(huì)更加順滑；而油管的浮層，移動(dòng)的距離大了很多， 動(dòng)靜明顯大了很多。

這其實(shí)沒(méi)有必要。?

因?yàn)檫@個(gè)動(dòng)效只是為了讓浮層的出現(xiàn)更加順滑，所以目標(biāo)應(yīng)該是動(dòng)靜越小越好，從而讓用戶(hù)感受到一種流暢的體驗(yàn)。而不需要用特別大的動(dòng)靜，吸引用戶(hù)的注意力。

二、賬號(hào)內(nèi)搜索

所謂賬號(hào)內(nèi)搜索，是指用戶(hù)進(jìn)入到一個(gè)Up主的空間， 想找該 Up 主發(fā)布的某個(gè)特定話(huà)題的視頻。?這個(gè)需求相對(duì)來(lái)說(shuō)比較低頻。但細(xì)節(jié)累積起來(lái)，也決定了用戶(hù)對(duì)應(yīng)用的整體印象。

在 B 站里，點(diǎn)擊Up 主空間里的搜索按鈕，會(huì)進(jìn)入搜索頁(yè)，頁(yè)面中明確地提示“搜索 ta 的視頻”??

這個(gè)提示非常關(guān)鍵，讓用戶(hù)很明確的知道，現(xiàn)在搜索的只是 ta的視頻，不是全站的。

輸入搜索詞“宇宙”，以卡片的形式展現(xiàn)所有視頻，屏效很高??

如果換個(gè)詞，沒(méi)有結(jié)果，那么會(huì)提示“沒(méi)有搜到相關(guān)內(nèi)容…”， 下面有個(gè)紅色的按鈕是搜索全站。

這個(gè)邏輯就給得很清晰：當(dāng)前Up主沒(méi)有該內(nèi)容，您還可以搜全站。

對(duì)于油管，點(diǎn)擊 Up 主空間的搜索按鈕，進(jìn)入的是如下的搜索頁(yè)。頁(yè)面展示的整站的搜索歷史

而當(dāng)我搜索“健康”之后，當(dāng)前 Up 主沒(méi)有相關(guān)結(jié)果，但是油管自作主張地展示了全站的內(nèi)容。

從場(chǎng)景來(lái)分析，這個(gè)設(shè)計(jì)我認(rèn)為不夠好。

因?yàn)橛脩?hù)在使用這個(gè)功能的時(shí)候，場(chǎng)景特別明確，就是希望找到這個(gè)Up主的視頻中，有關(guān)這個(gè)搜索詞的視頻?，F(xiàn)在的搜索結(jié)果，讓用戶(hù)無(wú)法明確當(dāng)前Up主到底有沒(méi)有該視頻。用戶(hù)需要經(jīng)過(guò)一番嘗試和推斷，才能得出結(jié)論。

這樣的設(shè)計(jì)就是讓用戶(hù)思考的設(shè)計(jì)。

我們知道有本書(shū)特別有名，叫《Don’t Make Me Think》。讓用戶(hù)思考的設(shè)計(jì)，往往就不是好設(shè)計(jì)。

三、暫停

關(guān)于暫停，兩個(gè)應(yīng)用的便捷性也差別很大。

B 站是雙擊播放器區(qū)域，就可以暫停；

油管是先單擊播放器，然后精確點(diǎn)擊暫停按鈕，實(shí)現(xiàn)暫停。

這兩個(gè)設(shè)計(jì)的差別，在以下場(chǎng)景中體現(xiàn)得淋漓盡致：

當(dāng)我吃完飯，我需要暫停視頻起身去做別的事情。

當(dāng)在B站操作的時(shí)候，我只要粗略看一下屏幕， 在播放器大概的位置雙擊就可以暫停；但是對(duì)于油管，我需要先點(diǎn)擊一下，然后盯著屏幕、非常精確地點(diǎn)擊暫停按鈕，這大概需要我3秒左右的時(shí)間。

雖然不多，但是沒(méi)有對(duì)比就沒(méi)有傷害。

油管的體驗(yàn)，和B站那種完全不用操心的體驗(yàn)，相差真的太多了。

以上從 3 個(gè)角度，對(duì)比了兩家的交互設(shè)計(jì)的差別。這些體驗(yàn)問(wèn)題看起來(lái)好像也不是什么大問(wèn)題。但是說(shuō)實(shí)話(huà)，如果是同樣的視頻，我更愿意選擇在B站觀看。

除了操作更加簡(jiǎn)便、順暢以外，還可以看到更多好玩的字幕。何樂(lè)而不為？

所以當(dāng)產(chǎn)品的內(nèi)容和服務(wù)差不多的時(shí)候，體驗(yàn)的不同就會(huì)對(duì)用戶(hù)的留存產(chǎn)生更大的影響。

最后，也想感嘆一下國(guó)內(nèi)的體驗(yàn)設(shè)計(jì)，其實(shí)是很一流的。奈何國(guó)際化做得不好，國(guó)外的用戶(hù)享受不到。

當(dāng)然，背后的原因很復(fù)雜，這一篇也先不展開(kāi)了。不過(guò)說(shuō)實(shí)話(huà)，寫(xiě)完這篇文章，作為中國(guó)體驗(yàn)行業(yè)的一分子，我也可以小小驕傲一把了，嘿嘿。