中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

由于嗶哩嗶哩的用戶性格從整體上說更偏向于活潑，所以B站在具體的細節上的設計也考慮到了用戶的調性，并不是一沉不變的。單從導航這一種設計上看，就出現了多達8種設計方式。幾乎覆蓋了所有現網上出現過的導航類型，讓用戶可以更好的玩兒自己的APP。我們可以在了解導航種類的同時，更深一層次的思考，哪種導航類型更適合哪種使用場景。

首先列舉一下嗶哩嗶哩使用過的導航種類，如下圖所示：

接下來，我們就具體的看看每一個導航，及其原型實現。

一、標簽導航

標簽導航又稱為底部導航，在APP中的最底部，這種導航非常常見。微信、微博、支付寶等常用APP都采用這種導航的形式。標簽導航形式的優點非常明顯，標簽導航位置顯而易見，容易讓用戶察覺到它的存在。而且標簽導航，每個標簽之間切換頻率很高，標簽之間的點擊或者滾動切換，便于用戶操作。一般用于非常重要的導航中。

原型實現

寫在前面一點，原型用得到所有元部件，都并非截取的B站APP的截圖，都可以在FontAwesome圖標字體Axure部件庫中找到。這個元件庫的icon可以任意的修改樣式和顏色，很強大很方便。

我們從頭開始畫原型，要先理清整個APP的樣式架構方式，底部的四個導航是整個APP里面最大的分類，所以整體被分成了四部分：home、category、dynamic、news。在交互上由于同時存在頂部導航，所以這四個導航之間只是通過點擊button切換，沒有左右滑動的實現。這個標簽導航沒有交互方式上的難度，但不證明原型就可以隨便畫畫了事。

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

四個頁面之間的相互跳轉，我們可以通過動態面板實現，也可以通過四個page實現，這里我選擇的是四個page，原因是page更方便之后的更改，實戰當中，萬一自己給自己計劃的需求變了呢（滑稽臉）。如果你覺得page的方式跳轉延遲看著不舒服，可以都做好了最后變成動態面板。具體的實現方法我想大家都可以自己動手實現，這里就不贅述了。

二、頂部導航

頂部導航的使用場景和底部導航的很相像，從樣式上看，頂部導航和底部導航一樣顯而易見，容易讓用戶發現。從功能上說，都是從整體上對自有功能的一個大致的分類，所以底部導航和頂部導航二者的地位都非常重要。唯一的區別就在于二者的位置差異產生的其他衍生的微小差異。底部導航的button，由于用戶的手持手機的習慣，可以更容易的觸碰到，所以交互上頂部導航由于手指不容易點到相應的button，更多的采用的是左滑右滑的切換。

原型實現

第一步我們需要理清頁面的關系，在底部導航的home中，分為四個小部分：live、home、bangumi、專欄，這四個部分也正是頂部導航的四塊內容。理清關系后，我們來動手實現。首先新建兩個動態面板，一塊放頂部導航的文字，命名為“滑動導航”，另一塊放四個模塊的內容部分，命名為“content”。這兩個面板都分別設置四個state，放置頂部導航及其對應的內容，呈現的樣式如下圖所示（內容部分只是示意，沒有具體的畫）。

接下來，就要做增加交互了，首先我們還是梳理一下頂部導航的交互方式：1.點擊具體的button可以切換，2.左滑右滑實現切換。我們先實現第一個交互，點擊button實現切換。這塊的實現比較簡單，在點進每個頂部導航的標簽中添加單擊時交互，如對live標簽添加交互案例，設置兩個面板（滑動導航、content）的狀態均為live，這里需要注意的一點是，在“滑動導航”動態面板里面每個狀態，里面的每個button都要進行相應的設置。

完成點擊button的交互之后，我們接下來做左滑右滑的交互。不需要點進具體的面板狀態，對“content”動態面板添加交互即可，Axure提供了“向左拖動結束時”和“向右拖動結束時”兩個交互狀態，我們先選擇一個向左拖動結束時，選擇設置動態面板，分別勾選“content”和“滑動導航”兩個面板。兩個面板都選擇next狀態，并不勾選“向后循環”，因為向后循環的意思是，最后的一個狀態的next，會跳到第一個狀態，這與我們正常的交互不符。動畫效果這里，由于content面板是左右滑動樣式，又因為交互狀態是向左拖動結束，所以動畫應該是向左滑動?！盎瑒訉Ш健眲赢嫿换?，選擇逐漸就好。整體的流程如下圖所示：

完成了向左拖動結束時，我們照葫蘆畫瓢，完成向右拖動結束時。唯一的差別就是，兩個面板的狀態選擇要選“previous”，且由于是向右滑動結束時，所以content的動畫效果應該選擇“向右滑動”，其他的和向左拖動結束時相同。這樣就完成了頂部導航的原型制作。

三、抽屜導航

抽屜導航的原型實現，應該是這里面最難的一塊。在實戰中，我們經常會看到抽屜導航的類型，常用的APP里面，網易云音樂、QQ都有這樣的抽屜導航，如下圖所示：

現網中對抽屜導航的使用，也都是大同小異，抽屜導航里面呈現的內容主要是用戶個人中心及相關設置，這樣設置的原因在于，個人設置本來作為一個大的分類存在，但是它的打開率和點擊率并不如其他內容模塊的頻率高，所以放置在底部導航的話，就有些浪費資源了。設置成抽屜導航，增加了一種漂亮的交互，還增加了APP的可玩性，一舉兩得。

原型實現

我們首先觀察抽屜導航的交互流程，屏幕左側左滑or點擊“bars”設置按鈕，彈出抽屜；抽屜的內容呈現，底部是一些設置的入口，內容部分是收藏、APP換膚等功能入口，并且這里需要注意的一點是，內容部分的功能入口，一版是展示不完的，所以需要我們增加屏幕上下滑動的交互；退出抽屜的交互也有兩種，點擊其他區域or右滑抽屜。

具體的實現方法如下，要實現左滑屏幕左側彈出抽屜，我們可以用熱區覆蓋，也可以用一塊透明的矩形代替，這里我們選擇用透明矩形的方法。在屏幕左側加一個動態面板，命名為觸發板，動態面板里面設置兩個狀態，一個狀態命名為“普通”，里是透明無邊框的矩形，另一個狀態命名為“焦點”，里面的內容是彈出來的抽屜。我們添加一個交互案例“向右拖動結束時”，右滑拖動之后，設置動態面板“觸控板”為焦點，在設置一下“向左拖動結束時”，動態面板“觸控板”為普通，所有的步驟如下圖所示。這樣就實現了左滑右滑彈出/隱藏抽屜。

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

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

但是上述僅實現了左滑右滑觸發抽屜的事件，我們還應該想到，點擊bars button，同樣可以觸發抽屜和黑色背景的顯示及隱藏。這里我們需要考慮的一個細節是，我們設置的觸發板是一個透明的矩形，雖然不可見，但是仍然是一個元件，若bars button一直處于最上層，就會在觸發抽屜之后顯得很怪異，若觸控板一直處于最上層，就無法通過bars button觸發抽屜，所以增加bars button的同時，要考慮到上下層順序的切換。所以我們的思路是，首先讓bars button處于最上層，觸發抽屜之后把它置于底層，等抽屜隱藏之后，再把它提上最上層，最后完整的交互如下圖所示。

四、九宮格導航

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

原型實現

這塊的原型實現沒有什么特別要注意的，唯一想到的就是顏色的選取，之前也說過了技巧，這里不再贅述。

五、懸浮導航

懸浮導航這種表現形式，顧名思義就是一直懸浮在固定的地方，這樣的交互方式，主要是想凸顯功能特點，比如APP通常會把自己最亮點的功能點做的最顯眼，而這個功能點要是在功能體系里面找起來又不是很方便，于是就做成了這種懸浮導航的交互，方便用戶的點擊。

原型實現

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

這個交互實現的思路是，點擊直播button，會彈出兩個入口，并且出現一個半透明的背景；當再次點擊直播button或者點擊黑色背景，隱藏黑色背景及兩個直播入口。

原型上的實現方法和抽屜導航的類似，這里就只說一下思路，如果實現不了，可以參見文末給的原型文檔。

六、船舵導航

船舵的導航類型與懸浮導航極其類似，船舵導航主要會出現在底部導航的正中間，通常以一個加號的形式展示，主要的作用在于可以凸顯主要功能，并且可以在首頁節省空間。把重要或者在功能體系中不好找到的功能點設置成船舵導航，易于用戶的發現，并且增加APP交互的多樣性，使用戶不會出現使用疲勞的情況。

B站中的船舵導航，并不是傳統的出現在底部導航的正中間，而是出現在news頁面的右上角。和微信右上角的加號位置及功能點都極其類似，我們暫且歸結為船舵導航的形式。

原型實現

首先我們說一下交互的流程：點擊加號，彈出一個矩形框，矩形框里面放置著其他功能的入口；再次點擊加號or點擊其他區域，矩形框消失。

首先我們添加一個矩形框，里面放置一些功能點的入口，命名為“矩形框”，并且設置這個矩形框為隱藏狀態。然后設置“+”的交互案例，單擊時可以切換顯示/隱藏“矩形框”。同時我們要考慮到，在顯示矩形框的情況下，點擊其他位置，矩形框依然會消失。這里要首先添加一個條件，在矩形框的狀態為顯示的情況下，點擊其他區域，矩形框消失，所有的交互如下圖所示。

七、輪播導航

輪播導航具體的設計原理及效果實現，我在《Axure高保真原型，實現APP端輪播樣式》寫的已經很詳細了，大家可以參考，這里就不再贅述了。

八、Tab導航

Tab導航和頂部導航極其相似，都是出現在APP的頂端，通過不同的分類對APP自有的內容進行分類呈現。但是現在的tab導航中，多了許多的花樣，由于APP的內容不斷地增多，一級分類已經不夠讓用戶足夠清晰地看到自己想看到的內容，很多內容型的APP的內容信息，需要二級分類才能更好的展示出自有的內容信息。這就需要tab導航衍生更多的功能，在頂級tab分類下，每個tab點擊進去后，會展示二級分類方式，選好二級分類tab之后，才能更好的展示出相應的內容，就如目前大型內容型APP，攜程，大眾點評等呈現的那樣。

九、資源共享

整個APP端嗶哩嗶哩所有導航的Axure原型，我共享在了百度云網盤上，大家可以用來學習參考。

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

密碼: 9qyn

文章很長，花了很長時間做出原型，又花了很長時間寫出文章，只希望大家能互相學習共同進步，如果你讀到這里依然沒有點擊退出，感謝你的耐心~

作者：Mitsuizq，微信公眾號：Mitsuizq

本文由 @Mitsuizq 原創發布于人人都是產品經理。未經許可，禁止轉載。