01 | b站W(wǎng)eb端動態(tài)頁頂部功能欄設(shè)計(jì)分析

時(shí)間：2023-09-09 07:06:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-09 07:06:01 來源：網(wǎng)站運(yùn)營

01 | b站W(wǎng)eb端動態(tài)頁頂部功能欄設(shè)計(jì)分析：

10秒鐘結(jié)論：現(xiàn)有的動態(tài)頁頂部下拉功能欄利用不充分，建議在左側(cè)增加“主站”按鈕，并修改“動態(tài)首頁”的操作邏輯為返回到“全部”或熱門動態(tài)，同時(shí)在右側(cè)增加“稍后再看”和“收藏夾”按鈕。

bilibili彈幕視頻網(wǎng)（后簡稱“b站”）是一個(gè)許多小伙伴都非常喜愛的網(wǎng)站，無論是其全面的番劇、各路up主的投稿還是零廣告的特性都讓它成了許多了生活中必不可少的內(nèi)容之一。現(xiàn)在的b站無論是內(nèi)容還是功能已然非常全面，但是仍然有一些設(shè)計(jì)值得商榷，今天我們就來分析一下b站動態(tài)頁頂部功能欄的設(shè)計(jì)。

1.動態(tài)頁頂部標(biāo)準(zhǔn)功能欄

打開b站后，點(diǎn)擊頂部功能欄中的“動態(tài)”，即可進(jìn)入動態(tài)頁。由于動態(tài)頁頂部沒有banner設(shè)計(jì)，所以 從主站頁進(jìn)入動態(tài)頁之后功能欄的變化僅僅是從有底紋變成了沒有底紋，功能項(xiàng)并沒有任何改變。

2.動態(tài)頁頂部下拉功能欄

打開動態(tài)頁肯定是要查看是否有動態(tài)更新的，稍微下拉動態(tài)頁面后，能夠看到頂部的功能欄變成了下面的樣子。




能夠看到，動態(tài)頁下拉后，功能欄中的功能項(xiàng)出現(xiàn)了大量的刪減和改動。左側(cè)刪掉了所有的功能按鈕，出現(xiàn)新功能按鈕“動態(tài)首頁”；右側(cè)僅保留了能夠進(jìn)入用戶個(gè)人空間的用戶頭像和功能按鈕“消息”，同時(shí)增加功能按鈕“發(fā)布動態(tài)”。

2.1 功能欄左側(cè)設(shè)計(jì)分析

左側(cè)新增的功能按鈕“動態(tài)首頁”和標(biāo)準(zhǔn)功能欄中的功能按鈕“動態(tài)”所提供的功能并不相同。“動態(tài)首頁”的功能是刷新當(dāng)前頁面，這個(gè)操作會讓你停留在當(dāng)前所在的動態(tài)分區(qū)，而“動態(tài)”則是打開動態(tài)頁并進(jìn)入且只能進(jìn)入其中的“全部”分區(qū)。

我認(rèn)為，這里有兩個(gè)值得商榷的地方：

1. 一般來說，Web界面左上角的功能按鈕都是打開這個(gè)網(wǎng)站的主界面，而b站的這個(gè)“動態(tài)首頁”則是刷新當(dāng)前界面，不符合用戶更為普遍的操作習(xí)慣。
2. 刷新界面并停留在當(dāng)前動態(tài)分區(qū)的設(shè)計(jì)可能存在一定問題。我分別在番劇區(qū)、科技區(qū)和鬼畜區(qū)三個(gè)內(nèi)容區(qū)中進(jìn)入當(dāng)前區(qū)域內(nèi)主推視頻的評論區(qū)進(jìn)行了查看了數(shù)十名用戶的關(guān)注情況，發(fā)現(xiàn)絕大部分用戶關(guān)注的up主數(shù)量大概為30~80。從我個(gè)人來講，我目前共關(guān)注了63名up主，其中不乏每天一更甚至多更的一些高產(chǎn)up。但是，這并沒有帶來動態(tài)頁“投稿視頻”區(qū)的頻繁更新，更有可能的情況是每一兩小時(shí)甚至四五小時(shí)才會有一次“投稿視頻”的更新，而“追番”、“小視頻”和“專欄”三個(gè)動態(tài)區(qū)的更新頻率更是低的令人發(fā)指，這讓刷完一波動態(tài)之后點(diǎn)擊“動態(tài)首頁”進(jìn)行刷新的操作沒有意義。只有類似微博的“圖片”區(qū)因?yàn)榘l(fā)送成本極低才會產(chǎn)生頻繁的更新。因此，刷新界面并保留在當(dāng)前動態(tài)分區(qū)的設(shè)計(jì)對于不同分區(qū)而言是不均衡的，也沒有很好的起到讓用戶刷刷刷完當(dāng)前動態(tài)再一刷新界面發(fā)現(xiàn)又有更新可以看了的快感，難以保留用戶。

針對以上兩個(gè)問題，我認(rèn)為應(yīng)該在下拉功能欄的最左側(cè)保留功能按鈕“主站”，并將“投稿視頻”按鈕的功能修改為刷新界面并打開“全部”動態(tài)分區(qū)。

2.2 功能欄右側(cè)設(shè)計(jì)分析

右側(cè)保留下來的按鈕功能也產(chǎn)生了一定的削弱，將鼠標(biāo)移至頭像上方時(shí)發(fā)現(xiàn)在下拉功能欄中，用戶頭像不再具有放大的效果，也取消了基本選項(xiàng)卡的彈出，而功能按鈕“消息”則保留了原有的跳轉(zhuǎn)和子選項(xiàng)卡彈出功能。新增的功能按鈕“發(fā)布動態(tài)”則使用戶能夠快速發(fā)送一條包含文字和圖片的短消息。

右側(cè)功能上的削減使得整個(gè)功能欄顯得更加簡潔，但我認(rèn)為這也是對功能欄的一種浪費(fèi)。事實(shí)上，我認(rèn)為在這個(gè)位置增加功能按鈕“稍后再看”和“收藏”是很有必要的，因?yàn)楫?dāng)用戶關(guān)注的up主達(dá)到數(shù)十人后，如果不是過于頻繁刷新b站的話很有可能每次刷新都會有數(shù)個(gè)投稿更新，而隨著關(guān)注人數(shù)的增加，用戶還將面臨從所有更新中篩選自己更感興趣的視頻進(jìn)行觀看的問題。我個(gè)人習(xí)慣于逐一挑出感興趣的視頻添加到“稍后再看”中，隨后統(tǒng)一進(jìn)行觀看，但是現(xiàn)在的功能欄設(shè)計(jì)導(dǎo)致這個(gè)操作不是很順暢，需要先點(diǎn)擊網(wǎng)頁右下角的小火箭返回到頁面頂端才能進(jìn)一步進(jìn)入“稍后再看”；另一方面，喜愛觀看直播的用戶也會不得不返回頁面頂端才能找到直播的入口，這些都會產(chǎn)生一定的使用停頓感而且效率明顯降低。

針對上面的問題，我認(rèn)為應(yīng)該在下拉功能欄的右側(cè)保留功能按鈕“稍后再看”和“收藏”，有效利用功能欄的空白區(qū)提供更加高效便捷的使用方式。

2.3 功能欄修改樣例

修改后的功能欄如下圖所示：




這樣修改后，在保留原有操作邏輯的基礎(chǔ)上更加符合直覺和方便，也保留了下拉功能欄相對簡潔的設(shè)計(jì)。

3.后記

本篇文章只是基于我的使用習(xí)慣和觀察身邊小伙伴的使用方式后得到的一些結(jié)論和建議，言論存在著大量本人主觀、臆測和想當(dāng)然的因素，網(wǎng)站本身仍存在大量其他的操作邏輯和使用方式，希望各位看官能夠各抒己見，不吝拍磚~