移動端導(dǎo)航設(shè)計，這里一定有你不知道的——細節(jié)系列第 01 篇

      為什么寫這篇講導(dǎo)航的，本質(zhì)上是希望提高自己界面設(shè)計的組件化意識，也是對近期自己看的關(guān)于導(dǎo)航方面文章的一個總結(jié)和輸出。

      前言

      結(jié)構(gòu)和組織是關(guān)于建造房間的，而導(dǎo)航設(shè)計則是關(guān)于增加門窗的——《信息架構(gòu)》

      在英文中Navigation這個詞源于拉丁文，原意是：操縱船只在海上航行。所以導(dǎo)航的目的在于幫助我們到達目的地。通俗的l來說就是你知道自己在哪，下一步怎么走，如果不想去先前的目的地，那也可以順利的回到出發(fā)的原點，這就是導(dǎo)航的作用。

      對于導(dǎo)航優(yōu)缺點的思考，我主要從以下三方面來考量：

      第一，操作方式。是滑動、點擊還是其他手勢，不同的操作方式難易程度是不同的；

      第二，導(dǎo)航所處的位置。在頁面頂端還是底部，結(jié)合操作方式來考慮操作的便捷性，例：導(dǎo)航在頂部，但不能滑動操作，對用戶而言便捷性就比較差；

      第三，導(dǎo)航模塊之間切換是否方便。是否需要頁面的跳轉(zhuǎn)才能切換不同模塊，不同的切換方式難易程度也不同；

      這篇文章主要講的是移動端的導(dǎo)航，但我們需要知道的是，在產(chǎn)品中沒有孤立存在的模塊，導(dǎo)航系統(tǒng)與組織系統(tǒng)、標(biāo)簽系統(tǒng)之間是密不可分的。

      一、導(dǎo)航分類

      導(dǎo)航分為主導(dǎo)航與次級導(dǎo)航，主導(dǎo)航進一步又分為全局導(dǎo)航與瞬時導(dǎo)航。

      全局導(dǎo)航——你能看到每一個，找出你想要的那一個。

      瞬時導(dǎo)航——平時藏起來，需要的時候一點就出來。

      二、各種導(dǎo)航優(yōu)缺點

    （一）底部Tab欄（標(biāo)簽欄）

     底部 Tab 欄最大的優(yōu)勢在于不同模塊之間方便快速的切換，無論是 iOS 還是 Andriod 系統(tǒng)，我們看到最多的主導(dǎo)航方式就是底部Tab欄，形式如下圖所示：       優(yōu)點：

      切換快速方便——可以承載同一優(yōu)先級的內(nèi)容，位置處于頁面底部且層級扁平，可以進行方便快速的切換；

      缺點：

      遮擋內(nèi)容——常駐的Tab 欄遮擋了部分內(nèi)容，減少了頁面承載信息的容量，當(dāng)然現(xiàn)在有新型模式：上滑閱讀時隱藏Tab 欄，下滑返回時顯示，這種模式某種程度上解決了這個問題；

      承載數(shù)量有限——模塊數(shù)量不超過5個，數(shù)量上的限制也就限制了 APP 主導(dǎo)航的分類數(shù)量，是否使用此導(dǎo)航方式，要根據(jù) APP 的組織系統(tǒng)來決定；

      （二）底部Tab欄擴展形式——駝式導(dǎo)航

      優(yōu)缺點與底部Tab欄基本相同，“駝峰”的作用主要是把一項對于產(chǎn)品來說高優(yōu)先級的行動放在突出位置，并用較大的“視覺重量”來展示，如下圖所示的閑魚、有道云筆記的駝式導(dǎo)航，它們都有自己的最優(yōu)先級的模塊需要突出展示，因此選用了駝式導(dǎo)航。

            （三）跳板式導(dǎo)航 （宮格式導(dǎo)航）

      跳板式導(dǎo)航最大優(yōu)勢在于生動的圖標(biāo)設(shè)計使得模塊“好找”，當(dāng)然這也會有兩面性，形式如下圖所示：

      優(yōu)點：

      好找——較大的設(shè)計“重量”是通過圖標(biāo)來實現(xiàn)的，用戶對圖像的記憶是超過文字的，這也會使用戶在操作了幾次后潛意識就能找到要找的模塊，當(dāng)然僅有文字的跳板式導(dǎo)航無此優(yōu)點，如下圖所示，僅就好找這個維度，有圖標(biāo)的愛奇藝是勝過僅有文字的網(wǎng)易嚴選的；

      缺點:

      麻煩——無法在多入口間來回轉(zhuǎn)換，不適合信息較為扁平的 APP例：新聞類 APP不適合宮格式導(dǎo)航，你可以想象你看完軍事類的新聞，想看看科技新聞，總得先回到主頁面再跳轉(zhuǎn)到科技類頁面，頁面跳轉(zhuǎn)的增加導(dǎo)致用戶操作的繁瑣程度增加；

      壓力大——?？硕芍赋?，一個人面臨的選擇越多，壓力越大，這在宮格數(shù)量較多時會突顯，再加設(shè)計模式的扁平化，進一步增加用戶的選擇壓力；

      題外話：雖然現(xiàn)在宮格式導(dǎo)航出鏡率與早年相比大幅下降，但從手機操作系統(tǒng)誕生之日起，宮格式與輪播式導(dǎo)航的組合一直作為系統(tǒng)主導(dǎo)航存在，原因在于對大多數(shù)用戶而言經(jīng)常使用的 APP 最多也就十幾個，宮格式突出圖標(biāo)的展現(xiàn)方式有利于提高APP的辨識度。 

      （四）列表菜單式導(dǎo)航（層級導(dǎo)航）

      列表式導(dǎo)航的最大優(yōu)勢在于可以高效、清晰地展示信息，同時可以容納較多信息，形式如下圖所示：

            優(yōu)點：

      高效——Y軸方向占用空間少，可以高效、清晰地展示信息，X軸方向可以容納較多信息，適合于既要有名稱又要有描述的模塊，例：支付寶—支付-我的頁面—余額一欄就可以看到你有多少余額，而不用進入，體現(xiàn)了列表式導(dǎo)航欄的高效；

            好分組——鑒于屏幕Y軸方向有較大的空間可以利用，也就可以利用這些空間進行分組分類。

      缺點：

      麻煩——同宮格式導(dǎo)航導(dǎo)航缺點1，這里不在贅述；

      壓力大——同宮格式導(dǎo)航導(dǎo)航缺點2，舉個例子，無論iOS系統(tǒng)或Andriod系統(tǒng)設(shè)置使用的都是列表式導(dǎo)航，很多情況下主導(dǎo)航與次級導(dǎo)航都是列表式導(dǎo)航，這種層級較深的情況就需要增加搜索系統(tǒng)輔助查找，從視覺設(shè)計的角度來看，列表式與搜索的形式很契合；

      視覺疲勞——當(dāng)同級內(nèi)容過多時，由于列表式導(dǎo)航形式較為單一，不斷在Y軸方向滑動，容易造成視覺疲勞；

      題外話：鑒于以上優(yōu)缺點，列表式導(dǎo)航也主要以次級導(dǎo)航的方式存在，僅有設(shè)置、郵箱等突出效率的 APP會將其作為主導(dǎo)航。

      （五）固定選項卡&分段選項卡&滾動選項卡

      iOS平臺的分段選項卡與Andriod平臺的固定選項卡、滾動選項卡本質(zhì)上都是通過在頁面頂端對內(nèi)容進行再分類，這三種導(dǎo)航的最大優(yōu)點在于在能夠使用戶清晰的看到APP的分類，滾動選項卡、分段選項卡一般以二級導(dǎo)航的形式存在，固定選型卡既有以主導(dǎo)航形式存在的情況，也有以二級導(dǎo)航形式存在的情況，下面來看看他們分別有什么優(yōu)點與缺點。

      （1）固定選項卡，形式如下圖所示：

      

 優(yōu)點：

      方便——相比列表菜單及跳板式導(dǎo)航，固定選項卡能夠通過滑動方便的在模塊間切換內(nèi)容；

      優(yōu)先級一致——可以承載重要性及使用頻率處于同一等級的信息、模塊或者任務(wù)等；

      顯眼——位置處于頁面頂部，基于用戶由上至下的瀏覽習(xí)慣，固定選項卡處于頁面“顯眼處”；

      缺點： 

      承載數(shù)量有限——數(shù)量一般不超過4個；

      遮擋內(nèi)容——同 Tab 欄缺點1；

      （2）滾動選項卡：

                                                                                              優(yōu)點：

      能裝——可以承載多個選項卡，且部分應(yīng)用選項卡內(nèi)容及順序可以自己定制，這也就解決了固定模式帶來的弊端——某些用戶喜歡的內(nèi)容需要滑動半天：

      瘦——由于滾動選項卡是以滑動操作為主，點按的操作方式較為低頻，因此選項卡大多以“瘦小”的文字形式展現(xiàn)，占用空間較少；

     缺點：

     壓力大——同跳板式導(dǎo)航缺點2，一般滾動選項卡數(shù)量較多，這就增加了用戶的選擇壓力。

     遮擋內(nèi)容——同 Tab 欄缺點1

      （3）分段式選項卡：

            優(yōu)點：

      優(yōu)先級一致——可以承載重要性及使用頻率處于同一等級的信息、模塊或者任務(wù)等；

      顯眼——位置處于頁面頂部，基于用戶由上至下的瀏覽習(xí)慣，固定選項卡處于頁面“顯眼處”；

      缺點：

      不能滑——不能滑動操作，只能點按，且因分段式選項卡處于頁面頂端，給用戶的操作帶來了不便：

      承載數(shù)量有限——數(shù)量一般不超過3個；

      （五）陳列館式導(dǎo)航

      一般以次級導(dǎo)航的方式存在，最大的優(yōu)勢在于能夠突出展示內(nèi)容，與跳板式導(dǎo)航的區(qū)別在于，陳列館式導(dǎo)航可以隨時更新內(nèi)容，類似圖片直播類的 APP 使用這種導(dǎo)航形式比較多，一般有三種形式——網(wǎng)格式布局、輪盤布局、瀑布流網(wǎng)格布局，如下圖所示，從左至右分別是一直播、小米有品、花瓣：

            優(yōu)點：

      直觀——可以實時更新內(nèi)容，對于內(nèi)容的展示較為直觀；

      缺點：

      不適合當(dāng)家做主——由于其適合作為展示內(nèi)容的窗口，因此不適合作為主導(dǎo)航；

      題外話：瀑布流網(wǎng)格式布局的部分畫面半隱藏式的展示內(nèi)容，吸引用戶繼續(xù)往下探索，有利于使用戶進入沉浸式狀態(tài)，但輪盤式布局的缺點在于在用戶以縱向瀏覽為主的情況下，向X軸要空間的但會打斷用戶向下瀏覽的順暢性，且承載內(nèi)容有限，一般卡片的數(shù)量都少于10個。

      （六）隱喻式導(dǎo)航

      隱喻式導(dǎo)航的最大優(yōu)勢在于降低學(xué)習(xí)成本，但我們需要避免的是為了隱喻而隱喻，不應(yīng)該被隱喻限制住了手腳。

      例：如果在移動端或者PC端使用隱喻式文件夾，那你就不可能在一個文件夾中放一個文件夾，再放一個文件夾......但實際上我們可以以俄羅斯套娃的形式不斷在文件夾套文件夾，從而使對我們的資源進行更好的分類管理，打破現(xiàn)實中文件夾的局限性，而不是要死板硬套的隱喻。

      題外話：如下圖所示，這是錘子科技的 Smartisan OS 系統(tǒng)的相機圖標(biāo)，這就是很好的隱喻，采用相機鏡頭=作為手機相機圖標(biāo)，降低了用戶成本，當(dāng)然畫的也很好。

      （七）抽屜式導(dǎo)航

      抽屜式導(dǎo)航最大的優(yōu)勢在于能藏，這也注定了它最大缺點是藏起來的內(nèi)容人們經(jīng)常會忘了它們的存在。如下圖所示，從左至右抽屜式導(dǎo)航主要有三種形式，浮層式、嵌入式、3D模式。

      優(yōu)點：

      能藏——將大部分模塊隱藏起來，使得界面更加美觀，且突出產(chǎn)品的核心功能，避免用戶被不太重要的內(nèi)容所影響，畢竟用戶精力有限

      好展現(xiàn)創(chuàng)意——由于主導(dǎo)航的內(nèi)容在大半個頁面上，頁面背景部分給設(shè)計師留下的創(chuàng)意空間就比較大，設(shè)計師可以結(jié)合品牌特點在背景上營造相應(yīng)的氛圍。

      缺點：

      容易忘——藏在抽屜里的模塊，優(yōu)先級明顯降低，所以產(chǎn)品大流量入口不適合放在抽屜導(dǎo)航中；

      題外話：基于用戶從左到右的文字瀏覽習(xí)慣，抽屜導(dǎo)航的圖標(biāo)大部分情況下是在左上角，屬于用戶單手操作的盲區(qū)。

      （八）下拉菜單式

      與抽屜式導(dǎo)航類似，最大優(yōu)勢在于能藏，使得界面內(nèi)容保持簡潔，一般下拉式菜單不會覆蓋整個頁面，甚至也不會增加黑色蒙版，因此會給用戶頁面層級較少的錯覺，避免了頻繁的頁面跳轉(zhuǎn)。

      優(yōu)點：

      能藏——將功能隱藏在一小塊，保證了界面的簡潔，同時也使得界面上能夠容納更多的操作；

      缺點：

      容易忘——同抽屜式導(dǎo)航缺點1。   

      題外話：在iOS中下拉菜單為自定義控件，而Andriod 系統(tǒng)為這種導(dǎo)航提供了特別的控件——Spinner控件。Spinner用于同一個類別下的不同視圖間進行導(dǎo)航，類似便簽類APP，在頂部設(shè)置文件夾，在此導(dǎo)航中包括各種不同的文件夾，類似通話便簽、私密便簽等各類文件夾，但我們在保證對用戶而言可理解且符合邏輯的情況下，不應(yīng)該過于死板。

      （九）卡片式導(dǎo)航

      卡片式導(dǎo)航的原型是撲克牌，模仿了撲克牌中常見的切牌、洗牌、翻牌等手法，卡片式導(dǎo)航的最大優(yōu)點在于可以突出內(nèi)容，例：如下圖所示，最新版（8.11.0版）微博在信息架構(gòu)上做了調(diào)整，視頻模塊采用了卡片式導(dǎo)航。

      優(yōu)點：

      有趣——配合操作動效，與用戶交互的方式比較有趣，相比其他交互方式更為吸引用戶；

      秩序感——卡片整體性較好，秩序感更強，每個卡片就是一塊內(nèi)容；

      缺點：

      效率低——對于卡片只能逐個查看，不能進行全局性瀏覽，也不能進行跳躍式查看，效率較低；    

      浪費空間——占用頁面空間較大,最好在需要突出內(nèi)容的 APP使用這種導(dǎo)航方式，也就是物盡其用，避免在不必要的情況下使用卡片式導(dǎo)航，造成頁面空間的浪費。

      （十）輪播式導(dǎo)航

      這種導(dǎo)航方式主要是通過增加頁面指示器配合卡片式導(dǎo)航，讓用戶知道這里不僅僅有一張卡片，本質(zhì)上來說這也是增加了頁面指示器的卡片式導(dǎo)航，卡片式導(dǎo)航有的優(yōu)缺點，它也都有，只是這種導(dǎo)航方式不會占據(jù)整個頁面空間，從這個角度來說它最大的優(yōu)勢在于向X軸方向要空間，拓展頁面范圍。

      優(yōu)點：

      增加空間——從X軸方向要空間，拓展頁面范圍，使得同樣一塊內(nèi)容可以展示較多內(nèi)容，主要在banner、天氣類APP中使用，如下圖所示這是錘子科技商城首頁中的輪播式 banner。

      缺點:

      大家不一樣——處于第一頁面的卡片優(yōu)先級遠高于其他頁面；

      承載數(shù)量有限——一般數(shù)量不會超過10個；

      效率低——同卡片式導(dǎo)航的缺點，對于卡片只能逐個查看，不能進行全局性瀏覽，也不能進行跳躍式查看，效率較低；  

      (十一)折疊菜單式導(dǎo)航

      折疊菜單式導(dǎo)航最大的優(yōu)勢在于不用跳轉(zhuǎn)頁面就能夠看到更多信息，除列表式的折疊菜單外，也有部分APP金剛區(qū)使用折疊式菜單，如下圖所示的酷狗音樂首頁，采用這種方式的目的在于只給用戶展示最重要的流量入口，節(jié)省首頁的空間資源；

            

      優(yōu)點：

      能藏——類似于抽屜式導(dǎo)航優(yōu)點1；

      減少跳轉(zhuǎn)——避免頁面的跳轉(zhuǎn)，從而給用戶層級較少的感覺，減輕用戶使用壓力；

      缺點：

      承載數(shù)量有限——能夠承載的模塊有限，適于隱藏太多內(nèi)容；        

      （十二）儀表盤式導(dǎo)航

      儀表盤式導(dǎo)航類似于列表式導(dǎo)航，通過各種類型圖表展示關(guān)鍵數(shù)據(jù)， 使得用戶不用跳轉(zhuǎn)至下一頁面，也能夠瀏覽關(guān)鍵數(shù)據(jù)，其優(yōu)勢與劣勢同列表式導(dǎo)航；

      三、尾巴

      最后跟大家說說在選擇導(dǎo)航時的需要把握的要點，我們還是得從產(chǎn)品出發(fā)，從產(chǎn)品信息架構(gòu)出發(fā)，對于寬而淺的組織架構(gòu)，我們可能會選擇滾動式選項卡作為二級導(dǎo)航，例：今日頭條、網(wǎng)易新聞；對于核心業(yè)務(wù)突出的產(chǎn)品，我們可能會選擇抽屜式導(dǎo)航作為主導(dǎo)航，例：滴滴出行。設(shè)計，只有適合與否，適合的就是好的。

     最后的最后，這是我“這一篇就夠了”系列第一篇，下一篇講注冊登錄流程，感謝你的閱讀并期待你的關(guān)注，能對你有所啟發(fā)，是我的榮幸。