每日干货分享

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現


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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

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

詳解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中是十六進位,在線轉換一下就好了。我們按照剛才的原則,先搭好如下四個頁面,如下圖所示:

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

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

二、頂部導航

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

原型實現

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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

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

完成點擊button的交互之後,我們接下來做左滑右滑的交互。不需要點進具體的面板狀態,對「content」動態面板添加交互即可,Axure提供了「向左拖動結束時」和「向右拖動結束時」兩個交互狀態,我們先選擇一個向左拖動結束時,選擇設置動態面板,分別勾選「content」和「滑動導航」兩個面板。兩個面板都選擇next狀態,並不勾選「向後循環」,因為向後循環的意思是,最後的一個狀態的next,會跳到第一個狀態,這與我們正常的交互不符。動畫效果這裡,由於content面板是左右滑動樣式,又因為交互狀態是向左拖動結束,所以動畫應該是向左滑動。「滑動導航」動畫交互,選擇逐漸就好。整體的流程如下圖所示:

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

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

三、抽屜導航

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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

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

原型實現

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

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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

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

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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

四、九宮格導航

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

原型實現

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

五、懸浮導航

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

原型實現

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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

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

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

六、船舵導航

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

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

原型實現

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

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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

七、輪播導航

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

八、Tab導航

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

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

九、資源共享

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

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

密碼: 9qyn

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

 

作者:Mitsuizq,微信公眾號:Mitsuizq