由于嗶哩嗶哩的用戶(hù)性格從整體上說(shuō)更偏向于活潑，所以B站在具體的細(xì)節(jié)上的設(shè)計(jì)也考慮到了用戶(hù)的調(diào)性，并不是一沉不變的。單從導(dǎo)航這一種設(shè)計(jì)上看，就出現(xiàn)了多達(dá)8種設(shè)計(jì)方式。幾乎覆蓋了所有現(xiàn)網(wǎng)上出現(xiàn)過(guò)的導(dǎo)航類(lèi)型，讓用戶(hù)可以更好的玩兒自己的APP。我們可以在了解導(dǎo)航種類(lèi)的同時(shí)，更深一層次的思考，哪種導(dǎo)航類(lèi)型更適合哪種使用場(chǎng)景。

首先列舉一下嗶哩嗶哩使用過(guò)的導(dǎo)航種類(lèi)，如下圖所示：

接下來(lái)，我們就具體的看看每一個(gè)導(dǎo)航，及其原型實(shí)現(xiàn)。

一、標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航又稱(chēng)為底部導(dǎo)航，在APP中的最底部，這種導(dǎo)航非常常見(jiàn)。微信、微博、支付寶等常用APP都采用這種導(dǎo)航的形式。標(biāo)簽導(dǎo)航形式的優(yōu)點(diǎn)非常明顯，標(biāo)簽導(dǎo)航位置顯而易見(jiàn)，容易讓用戶(hù)察覺(jué)到它的存在。而且標(biāo)簽導(dǎo)航，每個(gè)標(biāo)簽之間切換頻率很高，標(biāo)簽之間的點(diǎn)擊或者滾動(dòng)切換，便于用戶(hù)操作。一般用于非常重要的導(dǎo)航中。

原型實(shí)現(xiàn)

寫(xiě)在前面一點(diǎn)，原型用得到所有元部件，都并非截取的B站APP的截圖，都可以在FontAwesome圖標(biāo)字體Axure部件庫(kù)中找到。這個(gè)元件庫(kù)的icon可以任意的修改樣式和顏色，很強(qiáng)大很方便。

我們從頭開(kāi)始畫(huà)原型，要先理清整個(gè)APP的樣式架構(gòu)方式，底部的四個(gè)導(dǎo)航是整個(gè)APP里面最大的分類(lèi)，所以整體被分成了四部分：home、category、dynamic、news。在交互上由于同時(shí)存在頂部導(dǎo)航，所以這四個(gè)導(dǎo)航之間只是通過(guò)點(diǎn)擊button切換，沒(méi)有左右滑動(dòng)的實(shí)現(xiàn)。這個(gè)標(biāo)簽導(dǎo)航?jīng)]有交互方式上的難度，但不證明原型就可以隨便畫(huà)畫(huà)了事。

高保真原型不僅僅要實(shí)現(xiàn)高保真的實(shí)現(xiàn)具體的交互，樣式上的也要高保真實(shí)現(xiàn)。所以在樣式上有很多的細(xì)節(jié)值得我們注意，比如說(shuō)APP的外邊框，我們最好選擇330px*584px；每個(gè)icon每個(gè)模塊的布局和大小，都要遵從原APP的布局，可以借助網(wǎng)格線(xiàn)功能；每個(gè)icon和模塊的填色問(wèn)題，這里有一個(gè)筆者經(jīng)常用的小技巧分享給大家。QQ或者微信的截圖，熱鍵截圖之后，對(duì)于鼠標(biāo)所在的像素點(diǎn)，截圖功能自帶RGB顏色展示，我們可以通過(guò)這種方式獲取icon或者模塊的顏色。只不過(guò)這里的RGB是十進(jìn)制的，Axure中是十六進(jìn)制，在線(xiàn)轉(zhuǎn)換一下就好了。我們按照剛才的原則，先搭好如下四個(gè)頁(yè)面，如下圖所示：

四個(gè)頁(yè)面之間的相互跳轉(zhuǎn)，我們可以通過(guò)動(dòng)態(tài)面板實(shí)現(xiàn)，也可以通過(guò)四個(gè)page實(shí)現(xiàn)，這里我選擇的是四個(gè)page，原因是page更方便之后的更改，實(shí)戰(zhàn)當(dāng)中，萬(wàn)一自己給自己計(jì)劃的需求變了呢（滑稽臉）。如果你覺(jué)得page的方式跳轉(zhuǎn)延遲看著不舒服，可以都做好了最后變成動(dòng)態(tài)面板。具體的實(shí)現(xiàn)方法我想大家都可以自己動(dòng)手實(shí)現(xiàn)，這里就不贅述了。

二、頂部導(dǎo)航

頂部導(dǎo)航的使用場(chǎng)景和底部導(dǎo)航的很相像，從樣式上看，頂部導(dǎo)航和底部導(dǎo)航一樣顯而易見(jiàn)，容易讓用戶(hù)發(fā)現(xiàn)。從功能上說(shuō)，都是從整體上對(duì)自有功能的一個(gè)大致的分類(lèi)，所以底部導(dǎo)航和頂部導(dǎo)航二者的地位都非常重要。唯一的區(qū)別就在于二者的位置差異產(chǎn)生的其他衍生的微小差異。底部導(dǎo)航的button，由于用戶(hù)的手持手機(jī)的習(xí)慣，可以更容易的觸碰到，所以交互上頂部導(dǎo)航由于手指不容易點(diǎn)到相應(yīng)的button，更多的采用的是左滑右滑的切換。

原型實(shí)現(xiàn)

第一步我們需要理清頁(yè)面的關(guān)系，在底部導(dǎo)航的home中，分為四個(gè)小部分：live、home、bangumi、專(zhuān)欄，這四個(gè)部分也正是頂部導(dǎo)航的四塊內(nèi)容。理清關(guān)系后，我們來(lái)動(dòng)手實(shí)現(xiàn)。首先新建兩個(gè)動(dòng)態(tài)面板，一塊放頂部導(dǎo)航的文字，命名為“滑動(dòng)導(dǎo)航”，另一塊放四個(gè)模塊的內(nèi)容部分，命名為“content”。這兩個(gè)面板都分別設(shè)置四個(gè)state，放置頂部導(dǎo)航及其對(duì)應(yīng)的內(nèi)容，呈現(xiàn)的樣式如下圖所示（內(nèi)容部分只是示意，沒(méi)有具體的畫(huà)）。

接下來(lái)，就要做增加交互了，首先我們還是梳理一下頂部導(dǎo)航的交互方式：1.點(diǎn)擊具體的button可以切換，2.左滑右滑實(shí)現(xiàn)切換。我們先實(shí)現(xiàn)第一個(gè)交互，點(diǎn)擊button實(shí)現(xiàn)切換。這塊的實(shí)現(xiàn)比較簡(jiǎn)單，在點(diǎn)進(jìn)每個(gè)頂部導(dǎo)航的標(biāo)簽中添加單擊時(shí)交互，如對(duì)live標(biāo)簽添加交互案例，設(shè)置兩個(gè)面板（滑動(dòng)導(dǎo)航、content）的狀態(tài)均為live，這里需要注意的一點(diǎn)是，在“滑動(dòng)導(dǎo)航”動(dòng)態(tài)面板里面每個(gè)狀態(tài)，里面的每個(gè)button都要進(jìn)行相應(yīng)的設(shè)置。

完成點(diǎn)擊button的交互之后，我們接下來(lái)做左滑右滑的交互。不需要點(diǎn)進(jìn)具體的面板狀態(tài)，對(duì)“content”動(dòng)態(tài)面板添加交互即可，Axure提供了“向左拖動(dòng)結(jié)束時(shí)”和“向右拖動(dòng)結(jié)束時(shí)”兩個(gè)交互狀態(tài)，我們先選擇一個(gè)向左拖動(dòng)結(jié)束時(shí)，選擇設(shè)置動(dòng)態(tài)面板，分別勾選“content”和“滑動(dòng)導(dǎo)航”兩個(gè)面板。兩個(gè)面板都選擇next狀態(tài)，并不勾選“向后循環(huán)”，因?yàn)橄蚝笱h(huán)的意思是，最后的一個(gè)狀態(tài)的next，會(huì)跳到第一個(gè)狀態(tài)，這與我們正常的交互不符。動(dòng)畫(huà)效果這里，由于content面板是左右滑動(dòng)樣式，又因?yàn)榻换顟B(tài)是向左拖動(dòng)結(jié)束，所以動(dòng)畫(huà)應(yīng)該是向左滑動(dòng)?！盎瑒?dòng)導(dǎo)航”動(dòng)畫(huà)交互，選擇逐漸就好。整體的流程如下圖所示：

完成了向左拖動(dòng)結(jié)束時(shí)，我們照葫蘆畫(huà)瓢，完成向右拖動(dòng)結(jié)束時(shí)。唯一的差別就是，兩個(gè)面板的狀態(tài)選擇要選“previous”，且由于是向右滑動(dòng)結(jié)束時(shí)，所以content的動(dòng)畫(huà)效果應(yīng)該選擇“向右滑動(dòng)”，其他的和向左拖動(dòng)結(jié)束時(shí)相同。這樣就完成了頂部導(dǎo)航的原型制作。

三、抽屜導(dǎo)航

抽屜導(dǎo)航的原型實(shí)現(xiàn)，應(yīng)該是這里面最難的一塊。在實(shí)戰(zhàn)中，我們經(jīng)常會(huì)看到抽屜導(dǎo)航的類(lèi)型，常用的APP里面，網(wǎng)易云音樂(lè)、QQ都有這樣的抽屜導(dǎo)航，如下圖所示：

現(xiàn)網(wǎng)中對(duì)抽屜導(dǎo)航的使用，也都是大同小異，抽屜導(dǎo)航里面呈現(xiàn)的內(nèi)容主要是用戶(hù)個(gè)人中心及相關(guān)設(shè)置，這樣設(shè)置的原因在于，個(gè)人設(shè)置本來(lái)作為一個(gè)大的分類(lèi)存在，但是它的打開(kāi)率和點(diǎn)擊率并不如其他內(nèi)容模塊的頻率高，所以放置在底部導(dǎo)航的話(huà)，就有些浪費(fèi)資源了。設(shè)置成抽屜導(dǎo)航，增加了一種漂亮的交互，還增加了APP的可玩性，一舉兩得。

原型實(shí)現(xiàn)

我們首先觀(guān)察抽屜導(dǎo)航的交互流程，屏幕左側(cè)左滑or點(diǎn)擊“bars”設(shè)置按鈕，彈出抽屜；抽屜的內(nèi)容呈現(xiàn)，底部是一些設(shè)置的入口，內(nèi)容部分是收藏、APP換膚等功能入口，并且這里需要注意的一點(diǎn)是，內(nèi)容部分的功能入口，一版是展示不完的，所以需要我們?cè)黾悠聊簧舷禄瑒?dòng)的交互；退出抽屜的交互也有兩種，點(diǎn)擊其他區(qū)域or右滑抽屜。

具體的實(shí)現(xiàn)方法如下，要實(shí)現(xiàn)左滑屏幕左側(cè)彈出抽屜，我們可以用熱區(qū)覆蓋，也可以用一塊透明的矩形代替，這里我們選擇用透明矩形的方法。在屏幕左側(cè)加一個(gè)動(dòng)態(tài)面板，命名為觸發(fā)板，動(dòng)態(tài)面板里面設(shè)置兩個(gè)狀態(tài)，一個(gè)狀態(tài)命名為“普通”，里是透明無(wú)邊框的矩形，另一個(gè)狀態(tài)命名為“焦點(diǎn)”，里面的內(nèi)容是彈出來(lái)的抽屜。我們添加一個(gè)交互案例“向右拖動(dòng)結(jié)束時(shí)”，右滑拖動(dòng)之后，設(shè)置動(dòng)態(tài)面板“觸控板”為焦點(diǎn)，在設(shè)置一下“向左拖動(dòng)結(jié)束時(shí)”，動(dòng)態(tài)面板“觸控板”為普通，所有的步驟如下圖所示。這樣就實(shí)現(xiàn)了左滑右滑彈出/隱藏抽屜。

但是這樣的效果和APP所呈現(xiàn)的效果差距甚遠(yuǎn)，我們發(fā)現(xiàn)彈出抽屜的時(shí)候，除了抽屜的出現(xiàn)之外，還會(huì)有一個(gè)半透明的浮層，當(dāng)抽屜消失之后，浮層也消失。現(xiàn)在我們就加上這個(gè)浮層。這里我們加一個(gè)黑色50%透明的矩形，大小與APP相同，位于順序觸控板之下，位于其他元件之上，初始的狀態(tài)為隱藏，命名為“黑色背景”。當(dāng)右滑結(jié)束時(shí)，加上交互事件“顯示黑色背景”。當(dāng)狀態(tài)為顯示抽屜之后，我們應(yīng)該想到一個(gè)細(xì)節(jié)，有兩種交互都可以使抽屜隱藏，一是點(diǎn)擊黑色背景，二是左滑抽屜，所以我們額外加上點(diǎn)擊黑色背景切換動(dòng)態(tài)面板“觸控板”的狀態(tài)。首先向右拖動(dòng)結(jié)束時(shí)，添加一個(gè)交互案例，顯示“黑色背景”：實(shí)現(xiàn)的是向右拖動(dòng)，彈出抽屜并顯示黑色背景。接著向左拖動(dòng)結(jié)束時(shí)，添加一個(gè)交互案例，隱藏“黑色背景”，實(shí)現(xiàn)的是向左滑動(dòng)，隱藏抽屜并隱藏黑色背景?，F(xiàn)在就完成了左滑右滑顯示/隱藏黑色背景。

但到這里還不夠，在顯示出抽屜狀態(tài)的情況下，點(diǎn)擊黑色背景，應(yīng)該可以隱藏抽屜及黑色背景。這里我們需要首先判斷一下?tīng)顟B(tài)再增加交互，“觸控板”為焦點(diǎn)時(shí)，點(diǎn)擊“黑色背景”，隱藏“黑色背景”，具體的操作如下圖所示，添加完成之后，就可以實(shí)現(xiàn)左滑右滑及點(diǎn)擊黑色背景的所有交互了。

但是上述僅實(shí)現(xiàn)了左滑右滑觸發(fā)抽屜的事件，我們還應(yīng)該想到，點(diǎn)擊bars button，同樣可以觸發(fā)抽屜和黑色背景的顯示及隱藏。這里我們需要考慮的一個(gè)細(xì)節(jié)是，我們?cè)O(shè)置的觸發(fā)板是一個(gè)透明的矩形，雖然不可見(jiàn)，但是仍然是一個(gè)元件，若bars button一直處于最上層，就會(huì)在觸發(fā)抽屜之后顯得很怪異，若觸控板一直處于最上層，就無(wú)法通過(guò)bars button觸發(fā)抽屜，所以增加bars button的同時(shí)，要考慮到上下層順序的切換。所以我們的思路是，首先讓bars button處于最上層，觸發(fā)抽屜之后把它置于底層，等抽屜隱藏之后，再把它提上最上層，最后完整的交互如下圖所示。

四、九宮格導(dǎo)航

九宮格是一種最簡(jiǎn)單直白的導(dǎo)航方式，把所有的具體導(dǎo)航類(lèi)目平鋪在一個(gè)頁(yè)面中，這樣的做法優(yōu)缺點(diǎn)有顯而易見(jiàn)，優(yōu)點(diǎn)在于，不需要任何操作就可以看見(jiàn)所有的類(lèi)目細(xì)節(jié)，并且可以占滿(mǎn)屏幕，非常直觀(guān)。但是缺點(diǎn)依然也是很明顯，我們一下子看見(jiàn)這么多類(lèi)目，很難一下子就找到我們想要的那一個(gè)類(lèi)，所以通常九宮格導(dǎo)航的做法，都是在一些次重要的導(dǎo)航中呈現(xiàn)，并且這些導(dǎo)航類(lèi)目之間的聯(lián)系并不大，無(wú)法用體系關(guān)系把他們聯(lián)系到一起，平鋪直敘是最簡(jiǎn)單粗暴，也可能是最好的展示方法。通常，九宮格導(dǎo)航并不會(huì)單純的文字或者icon的展示，都會(huì)是兩者結(jié)合起來(lái)的展示方式，目的就是能讓用戶(hù)更容易一點(diǎn)找到想要找的具體標(biāo)簽。

原型實(shí)現(xiàn)

這塊的原型實(shí)現(xiàn)沒(méi)有什么特別要注意的，唯一想到的就是顏色的選取，之前也說(shuō)過(guò)了技巧，這里不再贅述。

五、懸浮導(dǎo)航

懸浮導(dǎo)航這種表現(xiàn)形式，顧名思義就是一直懸浮在固定的地方，這樣的交互方式，主要是想凸顯功能特點(diǎn)，比如APP通常會(huì)把自己最亮點(diǎn)的功能點(diǎn)做的最顯眼，而這個(gè)功能點(diǎn)要是在功能體系里面找起來(lái)又不是很方便，于是就做成了這種懸浮導(dǎo)航的交互，方便用戶(hù)的點(diǎn)擊。

原型實(shí)現(xiàn)

這里為了更好的演示懸浮的樣式，我自己修改了一下B站原型的設(shè)計(jì)，B站的交互是：點(diǎn)擊懸浮的直播button，顯示的是直播設(shè)置詳情頁(yè)（下圖左）；我改了一下交互，主要是為了凸顯懸浮導(dǎo)航，點(diǎn)擊直播button，彈出兩種直播的入口（下圖右）。

這個(gè)交互實(shí)現(xiàn)的思路是，點(diǎn)擊直播button，會(huì)彈出兩個(gè)入口，并且出現(xiàn)一個(gè)半透明的背景；當(dāng)再次點(diǎn)擊直播button或者點(diǎn)擊黑色背景，隱藏黑色背景及兩個(gè)直播入口。

原型上的實(shí)現(xiàn)方法和抽屜導(dǎo)航的類(lèi)似，這里就只說(shuō)一下思路，如果實(shí)現(xiàn)不了，可以參見(jiàn)文末給的原型文檔。

六、船舵導(dǎo)航

船舵的導(dǎo)航類(lèi)型與懸浮導(dǎo)航極其類(lèi)似，船舵導(dǎo)航主要會(huì)出現(xiàn)在底部導(dǎo)航的正中間，通常以一個(gè)加號(hào)的形式展示，主要的作用在于可以凸顯主要功能，并且可以在首頁(yè)節(jié)省空間。把重要或者在功能體系中不好找到的功能點(diǎn)設(shè)置成船舵導(dǎo)航，易于用戶(hù)的發(fā)現(xiàn)，并且增加APP交互的多樣性，使用戶(hù)不會(huì)出現(xiàn)使用疲勞的情況。

B站中的船舵導(dǎo)航，并不是傳統(tǒng)的出現(xiàn)在底部導(dǎo)航的正中間，而是出現(xiàn)在news頁(yè)面的右上角。和微信右上角的加號(hào)位置及功能點(diǎn)都極其類(lèi)似，我們暫且歸結(jié)為船舵導(dǎo)航的形式。

原型實(shí)現(xiàn)

首先我們說(shuō)一下交互的流程：點(diǎn)擊加號(hào)，彈出一個(gè)矩形框，矩形框里面放置著其他功能的入口；再次點(diǎn)擊加號(hào)or點(diǎn)擊其他區(qū)域，矩形框消失。

首先我們添加一個(gè)矩形框，里面放置一些功能點(diǎn)的入口，命名為“矩形框”，并且設(shè)置這個(gè)矩形框?yàn)殡[藏狀態(tài)。然后設(shè)置“+”的交互案例，單擊時(shí)可以切換顯示/隱藏“矩形框”。同時(shí)我們要考慮到，在顯示矩形框的情況下，點(diǎn)擊其他位置，矩形框依然會(huì)消失。這里要首先添加一個(gè)條件，在矩形框的狀態(tài)為顯示的情況下，點(diǎn)擊其他區(qū)域，矩形框消失，所有的交互如下圖所示。

七、輪播導(dǎo)航

輪播導(dǎo)航具體的設(shè)計(jì)原理及效果實(shí)現(xiàn)，我在《Axure高保真原型，實(shí)現(xiàn)APP端輪播樣式》寫(xiě)的已經(jīng)很詳細(xì)了，大家可以參考，這里就不再贅述了。

八、Tab導(dǎo)航

Tab導(dǎo)航和頂部導(dǎo)航極其相似，都是出現(xiàn)在APP的頂端，通過(guò)不同的分類(lèi)對(duì)APP自有的內(nèi)容進(jìn)行分類(lèi)呈現(xiàn)。但是現(xiàn)在的tab導(dǎo)航中，多了許多的花樣，由于APP的內(nèi)容不斷地增多，一級(jí)分類(lèi)已經(jīng)不夠讓用戶(hù)足夠清晰地看到自己想看到的內(nèi)容，很多內(nèi)容型的APP的內(nèi)容信息，需要二級(jí)分類(lèi)才能更好的展示出自有的內(nèi)容信息。這就需要tab導(dǎo)航衍生更多的功能，在頂級(jí)tab分類(lèi)下，每個(gè)tab點(diǎn)擊進(jìn)去后，會(huì)展示二級(jí)分類(lèi)方式，選好二級(jí)分類(lèi)tab之后，才能更好的展示出相應(yīng)的內(nèi)容，就如目前大型內(nèi)容型APP，攜程，大眾點(diǎn)評(píng)等呈現(xiàn)的那樣。

九、資源共享

整個(gè)APP端嗶哩嗶哩所有導(dǎo)航的Axure原型，我共享在了百度云網(wǎng)盤(pán)上，大家可以用來(lái)學(xué)習(xí)參考。

鏈接: https://pan.baidu.com/s/1jHOAYGY

密碼: 9qyn

文章很長(zhǎng)，花了很長(zhǎng)時(shí)間做出原型，又花了很長(zhǎng)時(shí)間寫(xiě)出文章，只希望大家能互相學(xué)習(xí)共同進(jìn)步，如果你讀到這里依然沒(méi)有點(diǎn)擊退出，感謝你的耐心~

作者：Mitsuizq，微信公眾號(hào)：Mitsuizq

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