在移動端，導航是APP最重要的區別。根據不同的內容，選擇不同的導航方式。沒有完美的導航，只有合適的導航。根據具體的場景與需求，去選擇最合適的導航形式，是設計師需要去考慮的。

那么什么是導航，導航就像書的目錄一樣，它會講哪些內容，以及這些內容又是怎樣排布的，導航可以讓你在頁面中不迷路，告訴你當前處于什么位置。

下面介紹移動端幾種常見導航形式。

一.標簽式導航（也叫Tab導航）

大多數app會選擇標簽式導航，標簽式導航結構如下圖所示。底部標簽導航是iOS頁面布局中比較推崇的一種導航方式。而頂部標簽式導航是安卓常用的導航模式，它可以避免導航與底部虛擬按鈕之間發生沖突，引起誤操作。

1.1-標簽式導航結構

1.2-標簽式導航

使用場景：如果你的app有多個主要的任務而且你覺得它們都很重要，且不超過5個（考慮到手指接觸時候的面積因素），并且它們之間的切換比較頻繁，這個時候非常適用標簽式導航。

優點：1.入口扁平化，直接展現最重要的入口信息，用戶在各入口頻繁跳轉不會迷失方向；2.導航控件占據面積大，能夠輕松進行點擊操作，進行功能間的快速切換。

缺點：會占用一定高度的顯示面積。

案例：網易云音樂，App Store使用的就是標簽式導航。如圖1.3所示

1.3-標簽式導航案例

二.滾動式標簽式導航

前面介紹標簽式導航使用時，任務切換不超過5個。那么任務較多時候，這時候應該使用滾動式標簽導航。使用該導航往往需要給他們提示，告訴他們頁面之外還有一些標簽存在。如圖2.1所示，會露出界面外的一部分文案，表示界面之外還有內容。

2.1-滾動式標簽導航結構

三、分段式導航

分段式導航特點：1.有分段式控件所控制的一種導航模式；2.尺寸較小，能輕松地融入界面，不占用空間；3.設計師還能在其兩側放置其他的UI組件。

3.1-分段式導航結構

注意事項：1.它是IOS的標準控件；2.不適合作為一級導航，往往作為二級導航與標簽導航嵌套使用

案例：網易云音樂朋友頁面

3.2-分段式導航案例

四、 舵式導航

舵式導航可以看為底部標簽式導航的一種變體。它在后者的基礎上，突出強調了一個標簽并且放在中間的位置，樣子看起來像攢了一個舵，所以取名為舵式導航。如圖3.1所示，中間的標簽作為重要且操作頻繁的入口，一般都用圖形或者顏色凸顯出來。

4.1-舵式導航結構

使用場景：如果你的app幾個重要的功能，并且它們切換頻繁，其中一個作為app的核心功能或者是操作。這個時候可以選擇舵式導航。

優點：中間重要商務操作顯眼，較大限度引導用戶進行操作。

缺點：中間按鈕旁邊的按鈕點擊率會低。

案例：微博，Lofter,我的生活in記等，如圖3.2所示。

4.2-舵式導航案例

五、抽屜式導航

抽屜式導航的核心就是“藏”，：隱藏不重要的功能，從而讓你的核心功能更加突出。菜單隱藏在當前頁面后，只要單擊入口就能將它拉出來，大大減少了主界面中的導航控件的數量。讓你的主界面更加干凈利落。常用于社交類app，例如QQ我的頁面。

5.1-抽屜式導航結構

5.2-抽屜式導航案例

優點：節省頁面空間

缺點：1.抽屜內部功能點擊入口變深；2.左上角的小按鈕具有隱蔽性

此外，隨著大屏的普及，一是：減少頁面控件，節省頁面空間，變得沒那么重要。二是：屏幕變大，左上角的抽屜式導航按鈕反而用一只手去操作的時候很難按到，故而網易新聞客戶端之前的抽屜式導航，最后變成了標簽式導航。抽屜式導航常用于突出一個核心功能，其他不重要藏，例如打車app，核心功能是打車，其他功能沒有那么重要就可以藏。

六、下拉式導航

特點：當用戶點擊該UI后，它將在頁面上加上一個菜單的條目列表。這種操作比較復雜，現在比較少用，但是下拉菜單作為導航，還是有一些在其他地方繼續應用。常常和其他導航結合使用。

6.1-下拉式導航

使用場景：和滾動式導航相結合，滾動式導航的特點是顯示數目有限，但是能夠實現快速的切換，而下拉導航的特點是能夠顯示足夠多的條目，但是切換起來比較麻煩，兩者結合，正好進行優勢互補。

案例：Lofter發現頁面，網易新聞等

6.2-下拉式導航與滾動式導航結合案例

七、列表導航

7.1垂直列表導航

使用場景：適用于二級導航或者功能層級比較淺，且功能間切換不頻繁的主導航，垂直列表的視線都是從左往右，從上到下，所以要把最重要的條目放在最上方。偶爾也用于一級導航，有多個平級功能，且入口較淺，例如郵箱。

垂直列表導航結構

垂直列表作為導航案例

優點：清晰冷靜，利于理解，冷靜高效，快速定位。

缺點：1.不能充分利用整個界面；2.條目的個數與條目的詳細程度成反比。要根據特定的情況選擇合適的形式。例如美團外賣需要每個列表足夠詳細，用戶直接看列表就可以知道想要的信息。通訊錄用戶要尋找聯系人，這時候就要展示足夠多的條目，列表信息詳細程度反而沒那么重要。

7.2輪播列表導航

使用場景：適用一些選項比較少，且不頻繁跳轉的app中或者瀏覽體驗式app中。

優點：輪播式導航，隱藏其余導航選項，保證頁面簡潔，讓用戶在同一時間只專注一個目標，并且往往配合大圖大背景，獲得較好的體驗。

缺點：用戶很難跳轉到非相鄰的選項。

輪播式導航

7.3宮格式導航

宮格式導航

功能扁平化，例如桌面導航，這種展現形式讓我們以一種上帝視角去看整個頁面的情況。所以所有的圖標都是以平鋪的形式去逐一的擺布。如果說列表式導航還有等級的區分，那么宮格式導航更佳扁平。除了運用于桌面上，也常用于app中，常用于二級導航，例如支付寶和微信。在界面上平鋪使用頻率相近但彼此又相互獨立的功能條目。

優點：功能扁平化，充分利用整個頁面，適用作為二級導航，在有限空間內羅列大量功能。

宮格式導航案例

總結：沒有完美的導航，只有合適的導航。導航往往不是單一的存在，例如抽屜式和標簽式導航相結合，下拉式導航和滾動式導航相結合，沒有最完美的導航，只有最合適的導航，而最合適的導航也會隨著場景和需求的變化而變化。

參考：移動導航篇

關于導航框架的那些破事

網易交互微專業

《交互設計精髓》

《術與道-移動應用UI設計必修課》