為什么寫這篇講導航的，本質上是希望提高自己界面設計的組件化意識，也是對近期自己看的關于導航方面文章的一個總結和輸出。

      前言

      結構和組織是關于建造房間的，而導航設計則是關于增加門窗的——《信息架構》

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

      對于導航優缺點的思考，我主要從以下三方面來考量：

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

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

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

      這篇文章主要講的是移動端的導航，但我們需要知道的是，在產品中沒有孤立存在的模塊，導航系統與組織系統、標簽系統之間是密不可分的。

      一、導航分類

      導航分為主導航與次級導航，主導航進一步又分為全局導航與瞬時導航。

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

      瞬時導航——平時藏起來，需要的時候一點就出來。

      二、各種導航優缺點

    （一）底部Tab欄（標簽欄）

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

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

      缺點：

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

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

      （二）底部Tab欄擴展形式——駝式導航

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

            （三）跳板式導航 （宮格式導航）

      跳板式導航最大優勢在于生動的圖標設計使得模塊“好找”，當然這也會有兩面性，形式如下圖所示：

      優點：

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

      缺點:

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

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

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

      （四）列表菜單式導航（層級導航）

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

            優點：

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

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

      缺點：

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

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

      視覺疲勞——當同級內容過多時，由于列表式導航形式較為單一，不斷在Y軸方向滑動，容易造成視覺疲勞；

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

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

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

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

      

 優點：

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

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

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

      缺點： 

      承載數量有限——數量一般不超過4個；

      遮擋內容——同 Tab 欄缺點1；

      （2）滾動選項卡：

                                                                                              優點：

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

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

     缺點：

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

     遮擋內容——同 Tab 欄缺點1

      （3）分段式選項卡：

            優點：

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

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

      缺點：

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

      承載數量有限——數量一般不超過3個；

      （五）陳列館式導航

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

            優點：

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

      缺點：

      不適合當家做主——由于其適合作為展示內容的窗口，因此不適合作為主導航；

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

      （六）隱喻式導航

      隱喻式導航的最大優勢在于降低學習成本，但我們需要避免的是為了隱喻而隱喻，不應該被隱喻限制住了手腳。

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

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

      （七）抽屜式導航

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

      優點：

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

      好展現創意——由于主導航的內容在大半個頁面上，頁面背景部分給設計師留下的創意空間就比較大，設計師可以結合品牌特點在背景上營造相應的氛圍。

      缺點：

      容易忘——藏在抽屜里的模塊，優先級明顯降低，所以產品大流量入口不適合放在抽屜導航中；

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

      （八）下拉菜單式

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

      優點：

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

      缺點：

      容易忘——同抽屜式導航缺點1。   

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

      （九）卡片式導航

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

      優點：

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

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

      缺點：

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

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

      （十）輪播式導航

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

      優點：

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

      缺點:

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

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

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

      (十一)折疊菜單式導航

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

            

      優點：

      能藏——類似于抽屜式導航優點1；

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

      缺點：

      承載數量有限——能夠承載的模塊有限，適于隱藏太多內容；        

      （十二）儀表盤式導航

      儀表盤式導航類似于列表式導航，通過各種類型圖表展示關鍵數據， 使得用戶不用跳轉至下一頁面，也能夠瀏覽關鍵數據，其優勢與劣勢同列表式導航；

      三、尾巴

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

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