編輯導(dǎo)語(yǔ)：作為抓住了大量年輕用戶的視頻平臺(tái)之一，B站在功能設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)上都有哪些值得拆解和借鑒的地方？本篇文章里，作者便從網(wǎng)生用戶、網(wǎng)頁(yè)用戶、開發(fā)用戶等角度對(duì)B站的設(shè)計(jì)細(xì)節(jié)進(jìn)行了總結(jié)，一起來(lái)看看吧！

此次我將按照不同受眾用戶，進(jìn)行嗶哩嗶哩產(chǎn)品設(shè)計(jì)細(xì)節(jié)分析，一起來(lái)看B站在往多元化發(fā)展的設(shè)計(jì)發(fā)力點(diǎn)都有哪些。

前言

眾所周知，B站是一個(gè)二次元、鬼畜、學(xué)習(xí)、娛樂等等于一身的綜合視頻社區(qū)。近82%的用戶是Z世代用戶（90-09年出生的人群），他們也是生長(zhǎng)在互聯(lián)網(wǎng)下的一代人。

用戶規(guī)模與活躍度都持續(xù)高位，除了其產(chǎn)品側(cè)的發(fā)力，設(shè)計(jì)中的體驗(yàn)感知也功不可沒，本次分享bilibili中用戶最常能感知到的產(chǎn)品設(shè)計(jì)細(xì)節(jié)，幫助你豐富B站玩法的同時(shí)，學(xué)習(xí)產(chǎn)品中的過人之處，以便了解設(shè)計(jì)發(fā)力點(diǎn)。

越往下看你越驚嘆，總有一個(gè)你不知道的彩蛋設(shè)計(jì)細(xì)節(jié)。

一、網(wǎng)生用戶

1. 【防偷窺】登錄頁(yè)——2233娘遮眼

1）使用場(chǎng)景

再熟悉不過的頁(yè)面了吧。登錄頁(yè)面是除首頁(yè)外，每個(gè)用戶大概率要進(jìn)入的頁(yè)面。如何給予用戶安全感知，同時(shí)增強(qiáng)產(chǎn)品記憶點(diǎn)。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升用戶登錄B站時(shí)的安全感知。

設(shè)計(jì)方案：當(dāng)用戶在輸入驗(yàn)證碼或者密碼等較為敏感的信息時(shí)，2233娘會(huì)遮住眼睛，暗示隱私信息我們是不會(huì)偷看的。強(qiáng)化B站對(duì)安全隱私的重視度，增強(qiáng)用戶信任感。

同時(shí)B站的品牌IP2233娘從兒時(shí)到成年產(chǎn)品中都有體現(xiàn)。用戶登錄注冊(cè)賬號(hào)時(shí)，兒時(shí)Q版的2233娘呈現(xiàn)在眼前，暗示著2233娘未來(lái)的一路陪伴，共同成長(zhǎng)的愿景。這是第二層含義。

2. 【選封面】開屏頁(yè)——自選模式

1）使用場(chǎng)景

作為一個(gè)二次元發(fā)展起來(lái)的視頻社區(qū)，用戶對(duì)于產(chǎn)品品牌具有親切感。但B站發(fā)展至今二次元內(nèi)容逐漸被多元生態(tài)所代替，類目占比逐漸變小，老用戶的情感記憶那里體現(xiàn)。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升品牌IP傳播，讓用戶享受更加豐富的開屏頁(yè)，從而滿足用戶情緒。

設(shè)計(jì)方案：在「設(shè)置」-「開屏畫面設(shè)置」中，你可以隨機(jī)展示或者自定義選擇畫面，總共為用戶提供20張圖片，每一個(gè)都是2233娘和B站重要日子的組合插畫，其中不乏幾張經(jīng)典頁(yè)面。當(dāng)用戶選擇特定畫面時(shí)，不僅能強(qiáng)化IP記憶點(diǎn)，同時(shí)也體現(xiàn)出產(chǎn)品對(duì)用戶的重視程度。

3. 【彈幕清屏】視頻頁(yè)——雙指點(diǎn)擊快速隱藏

1）使用場(chǎng)景

B站彈幕是出了名的有趣，當(dāng)彈幕狂熱者看一個(gè)熱門爆款視頻，很可能彈幕全程霸屏，氣雖然氛感十足，但也會(huì)存在遮擋用戶查看所關(guān)注的內(nèi)容，從而錯(cuò)過精彩瞬間。如何解決？

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：優(yōu)化彈幕開關(guān)的便捷操作，給予用戶優(yōu)質(zhì)的交互體驗(yàn)。

設(shè)計(jì)方案：在視頻播放頁(yè)面，常規(guī)開關(guān)彈幕的方式是點(diǎn)擊左下角彈幕按鈕。想要在便捷一些，你可以雙指點(diǎn)擊屏幕，觸發(fā)開關(guān)彈幕功能，相比常規(guī)「先點(diǎn)擊屏幕」「再關(guān)閉彈幕」兩部操作，雙指點(diǎn)擊屏幕更加高效，雖然多指操作學(xué)習(xí)成本高，但這種隱藏交互會(huì)大大提升觀感體驗(yàn)。

如今的產(chǎn)品功能不斷堆疊，有時(shí)候常用的功能要進(jìn)入3個(gè)層級(jí)才能使用，何不換種思路，運(yùn)用多指交互來(lái)提升用戶操作體驗(yàn)，未嘗不是一種好的體驗(yàn)升級(jí)。

4. 【進(jìn)度條】視頻頁(yè)——眼睛跟隨方向

1）使用場(chǎng)景

一個(gè)產(chǎn)品除了空狀態(tài)、界面元素外，如何在視頻頁(yè)中給予用戶品牌感知，增加趣味體驗(yàn)。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升視頻頁(yè)進(jìn)度條的趣味性，從而強(qiáng)化B站品牌透?jìng)鳌?/p>

設(shè)計(jì)方案：在視頻頁(yè)中，當(dāng)你對(duì)視頻進(jìn)度進(jìn)行左右拖拽時(shí)，進(jìn)度條的指示圖標(biāo)「小電視」的眼睛會(huì)左右移動(dòng)，當(dāng)你向左滑動(dòng)眼睛跟隨左邊，向右滑動(dòng)小眼睛跟隨右邊，很是有趣，通過IP結(jié)合進(jìn)度條的交互設(shè)計(jì)讓原本單一的形態(tài)變得趣味橫生。

當(dāng)然，進(jìn)度條的樣式不止一種，還有很多彩蛋視頻也有不同的樣式，快去找一找吧（對(duì)了，最近在使用【優(yōu)酷】時(shí)也發(fā)現(xiàn)進(jìn)度條的微設(shè)計(jì)，感興趣的朋友不妨看看）。

5. 【一鍵三連】視頻頁(yè)——長(zhǎng)按點(diǎn)贊觸發(fā)聯(lián)動(dòng)

1）使用場(chǎng)景

一鍵三連最早的發(fā)源地，或許你此時(shí)才知道這個(gè)功能吧。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升在同質(zhì)化產(chǎn)品中的特殊功能點(diǎn)設(shè)計(jì)，強(qiáng)化產(chǎn)品一鍵三連功能。

設(shè)計(jì)方案：在視頻頁(yè)瀏覽時(shí)，看到超級(jí)喜歡的UP主視頻，激動(dòng)到想要一鍵三連，可以長(zhǎng)按點(diǎn)贊按鈕，你會(huì)看到右邊投幣和收藏顯示進(jìn)度條占比，當(dāng)一圈走完，點(diǎn)贊、投幣、收藏同時(shí)完成，這就是一鍵三連的激活功能。

不僅如此，移動(dòng)端、網(wǎng)頁(yè)端、以及接下來(lái)的「寫筆記」中都可觸發(fā)一鍵三連功能，產(chǎn)品特有的功能感知滿滿。

6. 【快速聽歌】視頻切換——你的下一款聽歌軟件何必是一款聽歌軟件

1）使用場(chǎng)景

想聽周董的歌，網(wǎng)易云音樂沒有，QQ音樂又要付費(fèi)聽，好難受啊～

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決用戶聽歌時(shí)視頻彈幕干預(yù)，將視頻切換音樂模式，專注聽歌。

設(shè)計(jì)方案：在視頻頁(yè)，點(diǎn)擊「更多」選擇「聽視頻模式」，當(dāng)前視頻會(huì)切換成音樂頁(yè)面，這難道不就是音樂軟件嘛。常用的循環(huán)、上一首、下一首功能都有、收藏、評(píng)論、轉(zhuǎn)發(fā)也有，簡(jiǎn)直不要太棒。

因?yàn)锽站是UGC（用戶生產(chǎn)內(nèi)容）、PGC（專業(yè)生產(chǎn)內(nèi)容）視頻平臺(tái)的獨(dú)特性，自身就不會(huì)太擔(dān)心侵權(quán)問題。難怪B站中Z世代的用戶更多，一款產(chǎn)品，滿足多場(chǎng)景多人群使用，怪不得能俘獲民心，有它的道理。

二、學(xué)習(xí)用戶

1. 【視頻放大】雙指移動(dòng)——放大縮小畫面

1）使用場(chǎng)景

當(dāng)你用B站學(xué)習(xí)時(shí)，小小的手機(jī)屏幕很難看到細(xì)節(jié)，該怎么解決？

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升細(xì)節(jié)放大展效果，讓用戶看清具體信息，提高學(xué)習(xí)效率

設(shè)計(jì)方案：在視頻頁(yè)，除了上面說的雙指點(diǎn)擊觸發(fā)彈幕開關(guān)，你可以通過雙指拉伸把視頻任意放大，當(dāng)然你也可以捏和把視頻縮小。當(dāng)改變了原始視頻尺寸，底部會(huì)有一個(gè)「還原屏幕」的按鈕，點(diǎn)擊即可快速矯正視頻。還不快快用起來(lái)～

2. 【學(xué)英語(yǔ)】老友記——學(xué)習(xí)注釋

1）使用場(chǎng)景

是不是還在邊看英文電影邊學(xué)英語(yǔ)，這樣雖然是個(gè)辦法，但遇到不懂得單詞或是語(yǔ)法你還要在第三方翻譯軟件中翻譯，效率性大打折扣。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提高音樂學(xué)習(xí)效率，在視頻中增加實(shí)時(shí)英文解析，幫助快速學(xué)英語(yǔ)。

設(shè)計(jì)方案：目前已知在「老友記」中，用戶可以通過點(diǎn)擊左側(cè)「學(xué)音樂」進(jìn)入到英文學(xué)習(xí)分欄中，演員的每段對(duì)話，以及出現(xiàn)時(shí)間，都清晰羅列出來(lái)，你可以重復(fù)收聽某段對(duì)話，也可以針對(duì)當(dāng)前對(duì)話中不理解的單詞或語(yǔ)法進(jìn)行學(xué)習(xí)，簡(jiǎn)直就是學(xué)習(xí)英語(yǔ)者的福音。

3. 【一起看】放映廳——學(xué)習(xí)氛圍瞬間拉滿

1）使用場(chǎng)景

一起刷B站、一起看視頻、一起聊天等等這樣的場(chǎng)景可能只在現(xiàn)實(shí)中存在。真的是這樣嗎？

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決異地分開刷B站的阻隔感，提升隨時(shí)隨地一起刷劇學(xué)習(xí)的幸福感。

設(shè)計(jì)方案：在視頻頁(yè)，點(diǎn)擊「一起看」進(jìn)入放映廳，你可以自己新建放映廳，也可以進(jìn)入別人的放映廳，總之可以多些朋友一起看視頻，一起交流，完美解決異地或者獨(dú)處的孤獨(dú)感～

4. 【寫筆記】筆記功能——教學(xué)視頻的高效學(xué)習(xí)工具

1）使用場(chǎng)景

同樣是看視頻學(xué)習(xí)，當(dāng)你身邊只有手機(jī)時(shí)，需要做筆記，還在通過備忘錄等形式在App之間來(lái)回切換記錄嗎？

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決看視頻時(shí)難以記錄重點(diǎn)知識(shí)的情況，提升記錄筆記效率，從而高效學(xué)習(xí)。

設(shè)計(jì)方案：在公開課等教學(xué)類視頻中，通過點(diǎn)擊「更多」找到「筆記功能」就能解決一邊看視頻一邊記錄的痛點(diǎn)了。不僅如此，還能查看其他用戶的筆記內(nèi)容并且可以一鍵三連進(jìn)行互動(dòng)，具有雙向?qū)W習(xí)性，簡(jiǎn)直不要太棒。筆記做完還可以一鍵復(fù)制，粘貼到你的知識(shí)庫(kù)中，解決內(nèi)容遷移問題。在B站學(xué)習(xí)的用戶不妨快來(lái)試試～

三、網(wǎng)頁(yè)用戶

1. 【彈幕撤回】2分鐘內(nèi)可撤回——避免文字誤傷

1）使用場(chǎng)景

B站是個(gè)彈幕網(wǎng)，很多時(shí)候觀看者頭腦一熱隨意發(fā)表的彈幕言論，會(huì)給其他用戶帶來(lái)觀影不適以及平臺(tái)污染，如何解決。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：為用戶增加彈幕刪除功能，從而提升彈幕評(píng)論的綠色言論，凈化彈幕內(nèi)容。

設(shè)計(jì)方案：在視頻頁(yè)發(fā)送了一個(gè)彈幕，用戶可在視頻中看到自己的彈幕，鼠標(biāo)進(jìn)入，選擇撤回，要注意只能在2分鐘內(nèi)進(jìn)行撤回，并且一天之內(nèi)只能撤回5次彈幕。目的也是為防止用戶頻繁撤回的操作。手機(jī)端可點(diǎn)擊彈幕列表，找到自己的彈幕，長(zhǎng)按會(huì)出現(xiàn)撤回選項(xiàng)，點(diǎn)擊撤回即可。

2. 【鬼畜秘密】網(wǎng)頁(yè)端鬼畜區(qū)長(zhǎng)按「返回頂部」按鈕10s輸入對(duì)應(yīng)字母進(jìn)入經(jīng)典鬼畜區(qū)

1）使用場(chǎng)景

人們總對(duì)好奇的事物產(chǎn)生興趣，尤其是在自己不知道的前提下。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：增加鬼畜區(qū)彈幕彩蛋功能，提升此類目視頻曝光。

設(shè)計(jì)方案：在鬼畜區(qū)頻道，長(zhǎng)按10s右下角的返回頂部按鈕，會(huì)激活底部黑色輸入列表，文案寫著：“嘗試輸入字母，發(fā)現(xiàn)鬼畜秘密…”帶你進(jìn)入另一個(gè)神秘空間。

3. 【鬼畜霸屏】在鬼畜搜索下長(zhǎng)按A鍵頭會(huì)有另一個(gè)彩蛋等你

1）使用場(chǎng)景

文案的引導(dǎo)會(huì)激發(fā)用戶好奇產(chǎn)生嘗試。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：引導(dǎo)用戶進(jìn)行隨機(jī)字母輸入，提升彩蛋互動(dòng)玩法。

設(shè)計(jì)方案：在搜索框隨機(jī)輸入英文字母，會(huì)出現(xiàn)提示輸入的字母，當(dāng)你輸入完點(diǎn)回車，網(wǎng)頁(yè)會(huì)出現(xiàn)經(jīng)典的一句話彈幕。如果你長(zhǎng)按AAAAAAAA…,網(wǎng)頁(yè)彈幕伴隨音效不斷出現(xiàn)，很是鬼畜。當(dāng)你對(duì)某個(gè)彈幕頭像產(chǎn)生好奇，可點(diǎn)擊進(jìn)入視頻頁(yè)，進(jìn)行視頻瀏覽，同時(shí)可以后評(píng)論區(qū)同樣是彩蛋進(jìn)來(lái)的伙伴一起交流，很是熱鬧。

4. 【小黑屋】了解規(guī)則——查看案情加深學(xué)習(xí)

1）使用場(chǎng)景

當(dāng)B站上傳視頻以及評(píng)論不加以管制和制度教育，會(huì)帶來(lái)流失用戶的風(fēng)險(xiǎn)。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：為了建立良好的視聽環(huán)境和用戶體驗(yàn)，規(guī)范產(chǎn)品的內(nèi)容形式。

設(shè)計(jì)方案：在社區(qū)中心，小黑屋中，可以查看已經(jīng)被關(guān)小黑屋用戶的案情，針對(duì)案情的嚴(yán)重程度，進(jìn)行封禁時(shí)間限制，相比長(zhǎng)篇文章的制度規(guī)范，這種實(shí)際案例，更能讓用戶了解平臺(tái)規(guī)則，防止關(guān)進(jìn)小黑屋出不來(lái)。

四、開發(fā)者用戶

1. 【代碼良言】小黑屋 右箭源代碼——金石良言

1）使用場(chǎng)景

程序員在小黑屋頁(yè)面，想要越獄查看代碼等行為。

2）設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：告知程序員，開發(fā)者們小黑屋不僅是用來(lái)規(guī)范視頻用戶做出的行為，同樣也是針對(duì)開發(fā)者以及程序員的。

設(shè)計(jì)方案：在「小黑屋」頁(yè)面，右鍵「顯示 網(wǎng)頁(yè)源代碼」，在一行代碼中間，你會(huì)看到一句話：“一朝耍流氓，十年掛南墻；不乖的孩子統(tǒng)統(tǒng)都要打屁股；越獄是不可能越獄的，這輩子是不可能越獄的”極具搞笑的語(yǔ)言讓本就是嚴(yán)肅的事情變得輕松許多，同時(shí)增強(qiáng)小黑屋的準(zhǔn)則態(tài)度，讓B站用戶做一個(gè)遵守準(zhǔn)則的好用戶。

五、結(jié)語(yǔ)

設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗(yàn)流程。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。

認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

本期產(chǎn)品細(xì)節(jié)分析結(jié)束，點(diǎn)擊原文鏈接查看更多，那我們下期再見！

參考文獻(xiàn)：

B站2022第一季度財(cái)報(bào)：https://mp.weixin.qq.com/s/ctzbvBqPxtbQxCV2_XAGDQ

MikuFans彈幕視頻網(wǎng) ：https://www.bilibili.com/read/cv14244675/

Advertising：https://mp.weixin.qq.com/s/831jX19aq8cfI_WU7RQubw

時(shí)趣研究院：https://mp.weixin.qq.com/s/BUZoVle8ByLQjAFrCMm4ag

#專欄作家#

碳水Sir；微信公眾號(hào)：草蓉三石，人人都是產(chǎn)品經(jīng)理專欄作家。One More產(chǎn)品設(shè)計(jì)負(fù)責(zé)人，擅長(zhǎng)設(shè)計(jì)細(xì)節(jié)洞察分析。

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

題圖來(lái)自Unsplash，基于 CC0 協(xié)議。