国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

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

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

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

二、頂部導(dǎo)航

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

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

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

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

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

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

三、抽屜導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

五、懸浮導(dǎo)航

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

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

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

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

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

六、船舵導(dǎo)航

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

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

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

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

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

七、輪播導(dǎo)航

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

八、Tab導(dǎo)航

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

九、資源共享

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

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

密碼: 9qyn

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

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

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