在移動(dòng)端，導(dǎo)航是APP最重要的區(qū)別。根據(jù)不同的內(nèi)容，選擇不同的導(dǎo)航方式。沒有完美的導(dǎo)航，只有合適的導(dǎo)航。根據(jù)具體的場(chǎng)景與需求，去選擇最合適的導(dǎo)航形式，是設(shè)計(jì)師需要去考慮的。
那么什么是導(dǎo)航，導(dǎo)航就像書的目錄一樣，它會(huì)講哪些內(nèi)容，以及這些內(nèi)容又是怎樣排布的，導(dǎo)航可以讓你在頁面中不迷路，告訴你當(dāng)前處于什么位置。
下面介紹移動(dòng)端幾種常見導(dǎo)航形式。
一.標(biāo)簽式導(dǎo)航（也叫Tab導(dǎo)航）
大多數(shù)app會(huì)選擇標(biāo)簽式導(dǎo)航，標(biāo)簽式導(dǎo)航結(jié)構(gòu)如下圖所示。底部標(biāo)簽導(dǎo)航是iOS頁面布局中比較推崇的一種導(dǎo)航方式。而頂部標(biāo)簽式導(dǎo)航是安卓常用的導(dǎo)航模式，它可以避免導(dǎo)航與底部虛擬按鈕之間發(fā)生沖突，引起誤操作。
使用場(chǎng)景：如果你的app有多個(gè)主要的任務(wù)而且你覺得它們都很重要，且不超過5個(gè)（考慮到手指接觸時(shí)候的面積因素），并且它們之間的切換比較頻繁，這個(gè)時(shí)候非常適用標(biāo)簽式導(dǎo)航。
優(yōu)點(diǎn)：1.入口扁平化，直接展現(xiàn)最重要的入口信息，用戶在各入口頻繁跳轉(zhuǎn)不會(huì)迷失方向；2.導(dǎo)航控件占據(jù)面積大，能夠輕松進(jìn)行點(diǎn)擊操作，進(jìn)行功能間的快速切換。
缺點(diǎn)：會(huì)占用一定高度的顯示面積。
案例：網(wǎng)易云音樂，App Store使用的就是標(biāo)簽式導(dǎo)航。如圖1.3所示
二.滾動(dòng)式標(biāo)簽式導(dǎo)航
前面介紹標(biāo)簽式導(dǎo)航使用時(shí)，任務(wù)切換不超過5個(gè)。那么任務(wù)較多時(shí)候，這時(shí)候應(yīng)該使用滾動(dòng)式標(biāo)簽導(dǎo)航。使用該導(dǎo)航往往需要給他們提示，告訴他們頁面之外還有一些標(biāo)簽存在。如圖2.1所示，會(huì)露出界面外的一部分文案，表示界面之外還有內(nèi)容。
三、分段式導(dǎo)航
分段式導(dǎo)航特點(diǎn)：1.有分段式控件所控制的一種導(dǎo)航模式；2.尺寸較小，能輕松地融入界面，不占用空間；3.設(shè)計(jì)師還能在其兩側(cè)放置其他的UI組件。
注意事項(xiàng)：1.它是IOS的標(biāo)準(zhǔn)控件；2.不適合作為一級(jí)導(dǎo)航，往往作為二級(jí)導(dǎo)航與標(biāo)簽導(dǎo)航嵌套使用
案例：網(wǎng)易云音樂朋友頁面
四、 舵式導(dǎo)航
舵式導(dǎo)航可以看為底部標(biāo)簽式導(dǎo)航的一種變體。它在后者的基礎(chǔ)上，突出強(qiáng)調(diào)了一個(gè)標(biāo)簽并且放在中間的位置，樣子看起來像攢了一個(gè)舵，所以取名為舵式導(dǎo)航。如圖3.1所示，中間的標(biāo)簽作為重要且操作頻繁的入口，一般都用圖形或者顏色凸顯出來。
使用場(chǎng)景：如果你的app幾個(gè)重要的功能，并且它們切換頻繁，其中一個(gè)作為app的核心功能或者是操作。這個(gè)時(shí)候可以選擇舵式導(dǎo)航。
優(yōu)點(diǎn)：中間重要商務(wù)操作顯眼，較大限度引導(dǎo)用戶進(jìn)行操作。
缺點(diǎn)：中間按鈕旁邊的按鈕點(diǎn)擊率會(huì)低。
案例：微博，Lofter,我的生活in記等，如圖3.2所示。
五、抽屜式導(dǎo)航
抽屜式導(dǎo)航的核心就是“藏”，：隱藏不重要的功能，從而讓你的核心功能更加突出。菜單隱藏在當(dāng)前頁面后，只要單擊入口就能將它拉出來，大大減少了主界面中的導(dǎo)航控件的數(shù)量。讓你的主界面更加干凈利落。常用于社交類app，例如QQ我的頁面。
優(yōu)點(diǎn)：節(jié)省頁面空間
缺點(diǎn)：1.抽屜內(nèi)部功能點(diǎn)擊入口變深；2.左上角的小按鈕具有隱蔽性
此外，隨著大屏的普及，一是：減少頁面控件，節(jié)省頁面空間，變得沒那么重要。二是：屏幕變大，左上角的抽屜式導(dǎo)航按鈕反而用一只手去操作的時(shí)候很難按到，故而網(wǎng)易新聞客戶端之前的抽屜式導(dǎo)航，最后變成了標(biāo)簽式導(dǎo)航。抽屜式導(dǎo)航常用于突出一個(gè)核心功能，其他不重要藏，例如打車app，核心功能是打車，其他功能沒有那么重要就可以藏。
六、下拉式導(dǎo)航
特點(diǎn)：當(dāng)用戶點(diǎn)擊該UI后，它將在頁面上加上一個(gè)菜單的條目列表。這種操作比較復(fù)雜，現(xiàn)在比較少用，但是下拉菜單作為導(dǎo)航，還是有一些在其他地方繼續(xù)應(yīng)用。常常和其他導(dǎo)航結(jié)合使用。
使用場(chǎng)景：和滾動(dòng)式導(dǎo)航相結(jié)合，滾動(dòng)式導(dǎo)航的特點(diǎn)是顯示數(shù)目有限，但是能夠?qū)崿F(xiàn)快速的切換，而下拉導(dǎo)航的特點(diǎn)是能夠顯示足夠多的條目，但是切換起來比較麻煩，兩者結(jié)合，正好進(jìn)行優(yōu)勢(shì)互補(bǔ)。
案例：Lofter發(fā)現(xiàn)頁面，網(wǎng)易新聞等
七、列表導(dǎo)航
7.1垂直列表導(dǎo)航
使用場(chǎng)景：適用于二級(jí)導(dǎo)航或者功能層級(jí)比較淺，且功能間切換不頻繁的主導(dǎo)航，垂直列表的視線都是從左往右，從上到下，所以要把最重要的條目放在最上方。偶爾也用于一級(jí)導(dǎo)航，有多個(gè)平級(jí)功能，且入口較淺，例如郵箱。
優(yōu)點(diǎn)：清晰冷靜，利于理解，冷靜高效，快速定位。
缺點(diǎn)：1.不能充分利用整個(gè)界面；2.條目的個(gè)數(shù)與條目的詳細(xì)程度成反比。要根據(jù)特定的情況選擇合適的形式。例如美團(tuán)外賣需要每個(gè)列表足夠詳細(xì)，用戶直接看列表就可以知道想要的信息。通訊錄用戶要尋找聯(lián)系人，這時(shí)候就要展示足夠多的條目，列表信息詳細(xì)程度反而沒那么重要。
7.2輪播列表導(dǎo)航
使用場(chǎng)景：適用一些選項(xiàng)比較少，且不頻繁跳轉(zhuǎn)的app中或者瀏覽體驗(yàn)式app中。
優(yōu)點(diǎn)：輪播式導(dǎo)航，隱藏其余導(dǎo)航選項(xiàng)，保證頁面簡(jiǎn)潔，讓用戶在同一時(shí)間只專注一個(gè)目標(biāo)，并且往往配合大圖大背景，獲得較好的體驗(yàn)。
缺點(diǎn)：用戶很難跳轉(zhuǎn)到非相鄰的選項(xiàng)。
7.3宮格式導(dǎo)航
功能扁平化，例如桌面導(dǎo)航，這種展現(xiàn)形式讓我們以一種上帝視角去看整個(gè)頁面的情況。所以所有的圖標(biāo)都是以平鋪的形式去逐一的擺布。如果說列表式導(dǎo)航還有等級(jí)的區(qū)分，那么宮格式導(dǎo)航更佳扁平。除了運(yùn)用于桌面上，也常用于app中，常用于二級(jí)導(dǎo)航，例如支付寶和微信。在界面上平鋪使用頻率相近但彼此又相互獨(dú)立的功能條目。
優(yōu)點(diǎn)：功能扁平化，充分利用整個(gè)頁面，適用作為二級(jí)導(dǎo)航，在有限空間內(nèi)羅列大量功能。
總結(jié)：沒有完美的導(dǎo)航，只有合適的導(dǎo)航。導(dǎo)航往往不是單一的存在，例如抽屜式和標(biāo)簽式導(dǎo)航相結(jié)合，下拉式導(dǎo)航和滾動(dòng)式導(dǎo)航相結(jié)合，沒有最完美的導(dǎo)航，只有最合適的導(dǎo)航，而最合適的導(dǎo)航也會(huì)隨著場(chǎng)景和需求的變化而變化。
網(wǎng)易交互微專業(yè)
《交互設(shè)計(jì)精髓》
《術(shù)與道-移動(dòng)應(yīng)用UI設(shè)計(jì)必修課》
