導(dǎo)航是移動(dòng)UI設(shè)計(jì)常見(jiàn)的部分，現(xiàn)在出現(xiàn)了很多設(shè)計(jì)模式，這里給大家總結(jié)一下。

· 跳板式（Spring board）

跳板式設(shè)計(jì)模式，也稱為啟動(dòng)面板（2011年開(kāi)始流行）

3×3     3×2   九宮格       例：手機(jī)的主界面

缺點(diǎn)：全部選項(xiàng)被扁平化，沒(méi)有任何優(yōu)先級(jí)別

· 側(cè)邊抽屜式（Side Drawer）

Aza Raskin設(shè)計(jì)的火狐瀏覽器移動(dòng)版是開(kāi)啟抽屜式時(shí)代

優(yōu)點(diǎn)：比選項(xiàng)欄容納的選項(xiàng)多，通過(guò)對(duì)這些選項(xiàng)進(jìn)行邏輯分組來(lái)表達(dá)重要性或優(yōu)先級(jí)

· 磁貼模式（Tiles）      

可做主導(dǎo)航或二級(jí)導(dǎo)航模式搭配全局控制來(lái)使用

例：Windows Phone系統(tǒng)主界面

磁貼模式分為動(dòng)態(tài)、靜態(tài)，動(dòng)態(tài)磁貼可以顯示未接來(lái)電、下次約會(huì)安排情況或是最近聯(lián)系人頭像這樣的動(dòng)態(tài)信息

· 卡片式   

卡片式導(dǎo)航的原型是撲克牌，模仿了撲克牌中常見(jiàn)的切牌、洗牌、棄牌、翻牌等手法

優(yōu)點(diǎn)：卡片式設(shè)計(jì)模式給出一種展示內(nèi)容的優(yōu)雅方案

· 列表菜單式

列表菜單式的每一個(gè)列表都是進(jìn)入該應(yīng)用各項(xiàng)功能的入口，這一點(diǎn)與跳板是類似，并且模塊之間的切換需要返回到列表主頁(yè)。蘋果的設(shè)計(jì)規(guī)范將其稱為層級(jí)導(dǎo)航： 在層級(jí)式的應(yīng)用中，用戶通過(guò)在每個(gè)頁(yè)面選擇一次進(jìn)行導(dǎo)航，直至到達(dá)目標(biāo)位置。要到達(dá)另一個(gè)位置，用戶必須原路返回幾步（或者從頭開(kāi)始），然后做出不同的選擇?！霸O(shè)置”和“郵件”是使用層級(jí)式結(jié)構(gòu)應(yīng)用的典范

向上按鈕：多數(shù)用戶的預(yù)期是左箭頭和logo或圖標(biāo)同時(shí)可點(diǎn)

·    儀表盤式

設(shè)計(jì)優(yōu)秀的儀表盤讓用戶一眼就能看到他最需要的信息概覽，而不用轉(zhuǎn)到另一個(gè)頁(yè)面

儀表盤將數(shù)據(jù)作為各選項(xiàng)的入口，但不要載入過(guò)多信息，對(duì)于要展示的關(guān)鍵指標(biāo)或數(shù)據(jù)需經(jīng)過(guò)仔細(xì)研究在做決定。

· 陳列館式

陳列館式設(shè)計(jì)可用來(lái)呈現(xiàn)實(shí)時(shí)內(nèi)容，比如新聞、菜譜或照片，可采用網(wǎng)格布局或輪盤布局，還可以采用幻燈片模式進(jìn)行展示。

陳列館式設(shè)計(jì)最適合呈現(xiàn)經(jīng)常更新的、視覺(jué)效果直觀的無(wú)層級(jí)內(nèi)容。

· 選項(xiàng)卡菜單式

IOS系統(tǒng)中的標(biāo)簽限制在5個(gè)選項(xiàng)卡以內(nèi)，如果應(yīng)用的主要類別超過(guò)5個(gè)，那么你可以把“更多”放在最右側(cè)的第五個(gè)選項(xiàng)卡上。

理解IOS中的標(biāo)簽欄和工具欄之間的區(qū)別：

標(biāo)簽欄：應(yīng)用的主要類別之間進(jìn)行切換

工具欄：工具欄上顯示的是工具或是指向特定頁(yè)面的可執(zhí)行操作  

在設(shè)計(jì)這種標(biāo)簽欄時(shí)要確保選中狀態(tài)突出

在以下場(chǎng)景中使用選項(xiàng)卡：

1.    預(yù)計(jì)你的用戶會(huì)經(jīng)常切換視圖

2.  頂級(jí)內(nèi)容視圖有限，最多3個(gè)

3.  你想讓用戶清楚地知道有可供選擇的視圖

· 新生模式

1.   折疊選項(xiàng)卡：用戶滾動(dòng)屏幕或向下滑動(dòng)頁(yè)面內(nèi)容時(shí)把網(wǎng)站或移動(dòng)界面頭部隱藏或是收縮起來(lái)。

2.  可配置選項(xiàng)卡式：是標(biāo)準(zhǔn)選項(xiàng)卡菜單式的另一變種。 添加一個(gè)頻道就增加一個(gè)新的選項(xiàng)卡，如果屏幕上已經(jīng)有太多選項(xiàng)卡，頭部就可以滾動(dòng)，用戶只需要長(zhǎng)按一個(gè)選項(xiàng)卡在拖動(dòng)到目標(biāo)位置，就可以調(diào)整選項(xiàng)卡的順序。 效果類似于網(wǎng)頁(yè)瀏覽器的標(biāo)簽頁(yè)。

·   隱喻式

隱喻式導(dǎo)航主要用在游戲設(shè)計(jì)中

主導(dǎo)航模式——瞬時(shí)導(dǎo)航（瞬時(shí)導(dǎo)航必須通過(guò)點(diǎn)擊或手勢(shì)才會(huì)清楚的顯示出來(lái)）

· 側(cè)邊抽屜式

側(cè)邊抽屜式有兩種風(fēng)格：

第一種，浮層，通過(guò)輕滑或點(diǎn)擊的手勢(shì)打開(kāi)抽屜，抽屜部分遮擋或覆蓋原來(lái)頁(yè)面的內(nèi)容。

第二種，嵌入式，通過(guò)輕滑、平移或點(diǎn)擊打開(kāi)抽屜，把原先的頁(yè)面內(nèi)容部分推出屏幕外。

側(cè)邊抽屜的設(shè)計(jì)可以多樣化，但是切忌不要讓它承載太多功能。抽屜的首要功能是展示主導(dǎo)航選項(xiàng)。

· 新興模式

嵌入式側(cè)邊抽屜的變種，即打開(kāi)側(cè)邊抽屜的時(shí)候，嵌入式抽屜不僅把上一級(jí)頁(yè)面想右推開(kāi)，還采用3D效果將其推到后面。

· 下拉菜單式

同樣下拉菜單也可以是嵌入式還可以是浮層式。

下拉菜單式的一個(gè)重要規(guī)則是，無(wú)論什么樣的手勢(shì)，都能打開(kāi)菜單，比如點(diǎn)擊圖標(biāo)、輕滑、平移，同樣，隱藏菜單也是這樣的。

· 轉(zhuǎn)盤菜單式

轉(zhuǎn)盤菜單也叫輪盤、環(huán)形菜單或徑向菜單。（建設(shè)銀行APP主頁(yè)采用了這種模式）

次級(jí)導(dǎo)航模式

·   翻頁(yè)式

通過(guò)滑動(dòng)手勢(shì)快速導(dǎo)航內(nèi)容頁(yè)，表現(xiàn)這種導(dǎo)航是的最常見(jiàn)方式是利用頁(yè)面指示器（頁(yè)面指示器如banner上左右滑動(dòng)下面原點(diǎn)表示所在頁(yè)）

運(yùn)用翻頁(yè)式時(shí)要利用移動(dòng)的手勢(shì)控制，不要依賴像下一步按鈕或標(biāo)簽頁(yè)這類桌面端模式。但要注意提供視覺(jué)指示，讓用戶知道可以使用滑動(dòng)手勢(shì)。

· 滾動(dòng)選項(xiàng)卡式

滾動(dòng)選項(xiàng)卡一般比標(biāo)準(zhǔn)的標(biāo)簽欄要窄，因?yàn)樗鼪](méi)有必要作為觸摸對(duì)象，更典型的是將它們用作水平滑動(dòng)指示。

· 折疊菜單式

折疊菜單式又稱手風(fēng)琴式，能使用戶在同一頁(yè)面上查看到更多信息。它們?nèi)际褂昧顺Ｒ?jiàn)的圖標(biāo)去指示面板的展開(kāi)或收起狀態(tài)。（上下箭頭）

文章來(lái)自：UI中國(guó)