最近一直在整理移動設(shè)計模式，終于把導(dǎo)航部分整理好了。先跟大家分享這一部分吧，有遺漏的或是有爭議的歡迎大家建言~

導(dǎo)航就像一部小說的章節(jié)標(biāo)題。正常閱讀小說時，你不用刻意找它，它也不會故意蹦跶到你面前；要定位時，它能讓你知道自己的位置，怎樣跳頁。正如《ios7人機界面準(zhǔn)則》提到的，除非和用戶期望相悖，否則人們不會注意到app的導(dǎo)航體驗，你需要做的就是讓app的導(dǎo)航與應(yīng)用的結(jié)構(gòu)和意圖相契合，而不讓用戶注意到導(dǎo)航本身。

我們可以把現(xiàn)有的導(dǎo)航歸為三類，分別對應(yīng)于三種不同的應(yīng)用結(jié)構(gòu)：

層級式導(dǎo)航

扁平式導(dǎo)航

內(nèi)容/體驗主導(dǎo)式導(dǎo)航

在層級app中，每一個頁面進行一次選擇導(dǎo)航直達目標(biāo)頁面，用戶要到達另一個位置時，需原路返回幾步（或者回到開始重新出發(fā)）并作出不同的選擇。

1.1?列表菜單與擴展列表

列表導(dǎo)航通常用于二級頁，不會默認(rèn)展示任何實質(zhì)內(nèi)容，所以通常app不會在首頁使用它。這種導(dǎo)航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應(yīng)的頁面。

列表項目可以通過間距、標(biāo)題等進行分組，形成擴展列表。

列表菜單導(dǎo)航可以將重要的UI部分以列表的形式進行呈現(xiàn)，讓用戶可以滾動查看自己要執(zhí)行的操作或內(nèi)容。這一模式還可讓UI的標(biāo)題和腳標(biāo)能夠?qū)崿F(xiàn)更多“通用”導(dǎo)航，例如操作欄等。

列表菜單很適合用來顯示較長或擁有次級內(nèi)容的標(biāo)題。常用作列表，如病人列表，用戶列表，功能列表等。

擴展列表——“跟隨式”固定導(dǎo)航

滾動頁面時保持頂部、側(cè)邊或底部導(dǎo)航欄不變。在某些情況下，頁面部分子節(jié)的標(biāo)題也可在滾動時保持固定，或附著到已有的固定導(dǎo)航欄上。這種模式可以迅速定位目標(biāo)。

1.2 抽屜式導(dǎo)航

抽屜式導(dǎo)航的核心思路是“隱藏”。隱藏非核心的操作與功能，讓用戶更專注于核心的功能操作上去。如果應(yīng)用主要的功能和內(nèi)容都在一個頁面里面。只是一些用戶設(shè)置和選項需要顯示在其他頁面里。處于讓主頁面看上去干凈美觀的目的可以把這些輔助功能放在側(cè)邊欄里。

而如果你的應(yīng)用有不同的視圖，且他們是平級的，需要用戶同等地對待，側(cè)邊欄將會浪費掉大多數(shù)的用戶對于側(cè)邊欄中入口的潛在參與度和交互程度。當(dāng)各內(nèi)容項不需常切換時，可以采用抽屜式導(dǎo)航。

2、扁平式導(dǎo)航

在一個扁平式信息結(jié)構(gòu)的app中，所有的主要類別都可以從主頁面進入，用戶可以直接從一個類別調(diào)到另一個類別。

2.1 跳板式（又稱快速啟動板或?qū)m格導(dǎo)航）

1、利用網(wǎng)格布局將主要入口全部聚合在頁面，讓用戶做出選擇，各項之前同等重要。

2、利用不規(guī)則的布局方式可以凸顯某些項的重要性。

3、視情況使用個性化和用戶自定義選項。

缺點：無法第一時間看到內(nèi)容，選擇壓力大

當(dāng)有多個內(nèi)容項（＞5個）時，可以考慮用這種導(dǎo)航方式。

往往用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。

2.2 選項卡(標(biāo)簽導(dǎo)航)?

常見于屏幕底端或屏幕頂端兩種，選用選項卡式導(dǎo)航則各選項之間為并列關(guān)系，其中常選狀態(tài)為最重要，操作最頻繁一項。為已選擇的菜單項設(shè)置不同的視覺效果，用戶就能清晰地知道自己選擇了哪一項。使用易于識別或帶有標(biāo)簽的圖標(biāo)。

缺點是會占用一定高度的空間。

如果應(yīng)用需要用戶頻繁的在不同分頁切換，可以采用這種導(dǎo)航。通常包含5個標(biāo)簽是比較合適的數(shù)量。當(dāng)標(biāo)簽過多時，可以將不常用標(biāo)簽放到通用標(biāo)簽下，或采用底部滑動選擇的方式。

2.3 舵式導(dǎo)航

目前流行一種標(biāo)簽導(dǎo)航的變體，有人稱之為“舵式導(dǎo)航”，因為它的樣式很像輪船上用來指揮的船舵，兩側(cè)是其他操作按鈕。

當(dāng)頁面有處于同一層級的幾大部分內(nèi)容，同時又需要一個非常重要且頻繁操作的入口，就可以采用這種APP導(dǎo)航模式。中間項標(biāo)簽不緊操作最頻繁，最重要，且需要引人注意，方便尋找。

2.4 tab導(dǎo)航

用于二級頁，本質(zhì)和標(biāo)簽導(dǎo)航相同，當(dāng)應(yīng)用層級較多的情況下，可以采用tab導(dǎo)航，典型場景是用于改變的當(dāng)前的視圖，或?qū)Ξ?dāng)前頁面內(nèi)容進行分類查看。

一般，下方tab頁的操作比上方頻繁。因此可將次級重要的標(biāo)簽放到上方。

2.5 超級菜單式

移動設(shè)備上的超級菜單式導(dǎo)航與網(wǎng)站所用的超級菜單導(dǎo)航類似，它在一個較大的覆蓋面板上分組顯示已定義好格式的菜單選項。

這種模式比較少見。與抽屜式導(dǎo)航有異曲同工之妙，當(dāng)內(nèi)容項很多且各內(nèi)容項之間切換不頻繁時可采用。

3、內(nèi)容/體驗主導(dǎo)式導(dǎo)航

直觀的用內(nèi)容或者體驗來進行導(dǎo)航。

3.1 圖片輪盤式

當(dāng)你的應(yīng)用信息足夠扁平，可以嘗試輪播導(dǎo)航，如果應(yīng)用得當(dāng)，能夠給人耳目一新的體驗。這種導(dǎo)航能夠最大程度的保證應(yīng)用的頁面簡潔性，實現(xiàn)極為流暢、直觀的用戶體驗和流程實現(xiàn)概覽和細節(jié)界面的無縫過渡。

缺點是第一眼無法掌控所有內(nèi)容。

頁面輪盤式導(dǎo)航能很好地應(yīng)用于少量頁面的導(dǎo)航?？捎脕碜鰹檎故灸承┣闆r，例如產(chǎn)品系列。

3.2 陳列館式

陳列館式導(dǎo)航能很好地應(yīng)用于用戶經(jīng)常瀏覽、頻繁更新的內(nèi)容。

陳列館式的設(shè)計通過在平面上顯示各個內(nèi)容項來實現(xiàn)導(dǎo)航，主要用來顯示一些文章、菜譜、照片、產(chǎn)品等，可以布局成輪盤、網(wǎng)格、瀑布流或用幻燈片演示。便于顯示扁平化信息，直觀，簡潔，便于瀏覽。

3.3 儀表式

儀表式導(dǎo)航提供了一種度量關(guān)鍵績效指標(biāo)（KPI）是否達到要求的方法。經(jīng)過設(shè)計以后，每一項量度都可以顯示出額外的信息。

這種主要的導(dǎo)航模式對于數(shù)據(jù)分析，統(tǒng)計非常有用。提取關(guān)鍵項，但不過多使用。

3.4 隱喻式

這種導(dǎo)航的特點是用頁面模仿應(yīng)用的隱喻對象。主要用于游戲，但在幫助人們組織事物（如日記、書籍、紅酒等），并對其進行分類的應(yīng)用中也能看到，其實就是將應(yīng)用與人們熟識的具象事物聯(lián)系起來，給軟件創(chuàng)造一種真實感。利用相似物，直觀給用戶操作方式指導(dǎo)。

我的 lofter：