隨著移動互聯(lián)網(wǎng)的不斷發(fā)展，「以移動為中心」的理念和戰(zhàn)略也不斷滲透，互聯(lián)網(wǎng)的「短、平、快」往往使設(shè)計(jì)師們無法長時(shí)間停下來思考可用性設(shè)計(jì)，快速找到最佳的設(shè)計(jì)方式是對我們一大挑戰(zhàn)?！敢苿佣私缑嬖O(shè)計(jì)模式」是基于大量設(shè)計(jì)師的智慧和嘗試總結(jié)下來的可實(shí)施的解決方案，可以幫助我們解決絕大多數(shù)常見的移動界面設(shè)計(jì)需求，因此，在這里我將移動端的設(shè)計(jì)模式一一闡述，并附上我們常見的一線移動端產(chǎn)品作為案例作為解釋。希望給廣大的設(shè)計(jì)師們在設(shè)計(jì)方案中提供基石和支撐。

一、導(dǎo)航設(shè)計(jì)定義

導(dǎo)航設(shè)計(jì)也可以稱之為框架設(shè)計(jì)，將產(chǎn)品的核心點(diǎn)（業(yè)務(wù)層）集中突出，盡可能做到任務(wù)路徑的扁平化和用戶操作便捷性，將用戶最常用行為（用戶層）分類組織，讓這些功能元素被用戶以最容易的方式獲取和使用，在移動界面設(shè)計(jì)中，是非常重要的模塊，可以大膽的說：一個移動端界面設(shè)計(jì)就是不同類型的導(dǎo)航設(shè)計(jì)以不同方式的合理組裝。

目前市面上移動界面設(shè)計(jì)所使用的導(dǎo)航設(shè)計(jì)，基本分為以下（桌面式、選項(xiàng)卡式、列表式、側(cè)邊抽屜式、下拉菜單式、點(diǎn)聚式）6大基礎(chǔ)導(dǎo)航模式，為了不斷滿足業(yè)務(wù)、用戶需求，涌出（舵式、輪播式等）新穎的混合型導(dǎo)航模式。設(shè)計(jì)師們在基礎(chǔ)導(dǎo)航模式上仍在不斷做升級優(yōu)化以及組合創(chuàng)新。

二、導(dǎo)航設(shè)計(jì)的類型

按照操作方式，我們可以將導(dǎo)航設(shè)計(jì)大致分為三種不同的類型：全局型、瞬時(shí)型、混合型。

1. 全局型導(dǎo)航

只需打開應(yīng)用，就直截了當(dāng)?shù)恼故緦?dǎo)航中的各個選項(xiàng)。換言之，無需操作，就可以看到并通過各個功能入口。通常固定在頁面中，占據(jù)頁面的一定的面積。其中常用包括：桌面式、標(biāo)簽式、列表式（如下圖）

跳版式/桌面式

通常占據(jù)屏幕的大多數(shù)面積。

標(biāo)簽式/選項(xiàng)卡式

iOS 和 Android端常用的導(dǎo)航模式，算是標(biāo)準(zhǔn)選項(xiàng)卡導(dǎo)航，還有其他新的創(chuàng)新。

列表式

更多的文字和狀態(tài)的描述和變化。

2. 瞬時(shí)導(dǎo)航

點(diǎn)擊一個入口（icon/標(biāo)題/箭頭）或手勢操作，才會展示各個菜單選項(xiàng)，入口相對占頁面面積非常小，用戶需要的時(shí)候調(diào)出，算是打破屏幕邊界和運(yùn)用頁面視覺層級的高明手法。其中常用包括：抽屜式、菜單式、點(diǎn)聚式。

抽屜式/側(cè)邊式

點(diǎn)擊左上角的頭像，左側(cè)劃入功能入口。

下拉菜單式

點(diǎn)擊添加，彈出下來功能選項(xiàng)。

點(diǎn)聚式

點(diǎn)擊一個入口，圍繞其散開，并展示出其中的功能入口。

3. 混合導(dǎo)航

擁有直接展示功能入口并結(jié)合需要操作才展示的其他剩余功能。換言之，全局導(dǎo)航與瞬時(shí)導(dǎo)航的結(jié)合，其中常用包括：舵式、輪播式等。

舵式

全局導(dǎo)航-底部標(biāo)簽欄式 + 瞬時(shí)導(dǎo)航-點(diǎn)聚式 = 舵式導(dǎo)航

輪播式

全局導(dǎo)航-桌面式 + 瞬時(shí)導(dǎo)航-抽屜式 = 輪播式導(dǎo)航

三、導(dǎo)航設(shè)計(jì)的層次

導(dǎo)航設(shè)計(jì)中各類型設(shè)計(jì)模式是可以自由的組合，根據(jù)業(yè)務(wù)需求結(jié)合用戶體驗(yàn)找到一套適合的組合拳。我們通常選擇一個導(dǎo)航作為主體框架，其他導(dǎo)航作為輔助。

主導(dǎo)航：從一個主類別切換到另一個主類別的一級菜單，主類別的切換。次導(dǎo)航：指在選中的模塊內(nèi)活動的二級導(dǎo)航。

導(dǎo)航內(nèi)功能的層級（微博：混合導(dǎo)航-舵式做為一級導(dǎo)航 + 混合導(dǎo)航-輪播式作為二級導(dǎo)航）

導(dǎo)航與導(dǎo)航之間的層級（餓了么：全局導(dǎo)航-標(biāo)簽式做為一級導(dǎo)航， 混合導(dǎo)航-輪播式作為二級導(dǎo)航； 咸魚：混合導(dǎo)航-舵式做為一級導(dǎo)航，全局導(dǎo)航-桌面式作為二級導(dǎo)航）

四、怎么區(qū)分全局型導(dǎo)航、瞬時(shí)型導(dǎo)航還是混合型導(dǎo)航？

是否需要手勢操作，展示功能入口-全局；需要點(diǎn)擊或者手勢-瞬時(shí)型；展示了部分的功能入口，還需要通過點(diǎn)擊或者手勢展開剩余功能-混合型。

五、好的導(dǎo)航設(shè)計(jì)要滿足哪些要求呢？

• 一種在應(yīng)用內(nèi)跳轉(zhuǎn)不同頁面的方法。在有限的屏幕中我們不能將內(nèi)容一股腦的拋在用戶眼前，因此導(dǎo)航設(shè)計(jì)必須能自然而然的促進(jìn)或引導(dǎo)用戶的跳轉(zhuǎn)行為。
• 跳轉(zhuǎn)入口和所包含的內(nèi)容之間的關(guān)系。僅僅提供一個跳轉(zhuǎn)入口的列表是不夠的。入口和按鈕之間相互之間有什么關(guān)系？是否有業(yè)務(wù)功能的側(cè)重點(diǎn)？傳達(dá)的信息對于用戶快速理解一個產(chǎn)品，上手使用一個產(chǎn)品是非常非常必要的。
• 結(jié)構(gòu)化傳達(dá)內(nèi)容和當(dāng)前瀏覽頁面之間的關(guān)系。幫助用戶去快速理解哪個跳轉(zhuǎn)入口可以最好的支持他們的任務(wù)或他們想要達(dá)到的目標(biāo)/目的地。

這篇文章只是簡單的介紹了在移動端界面設(shè)計(jì)模式中導(dǎo)航設(shè)計(jì)的各個類型。便于廣大設(shè)計(jì)師們理解，我們通過簡單的方式將其劃分開三大導(dǎo)航模式（全局型、瞬時(shí)型、混合型），要做出緊貼實(shí)際業(yè)務(wù)以及好的用戶體驗(yàn)的導(dǎo)航設(shè)計(jì)，卻并不容易。

下一篇文章，我將闡述每一個模式的特色，拆解并分析多個產(chǎn)品界面中導(dǎo)航設(shè)計(jì)的運(yùn)用。

歡迎關(guān)注作者的微信公眾號：「三分設(shè)」

圖片素材作者：Michelle Yuen

「導(dǎo)航設(shè)計(jì)指南」

• 《交互基礎(chǔ)小課堂！移動端的導(dǎo)航設(shè)計(jì)模式》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之導(dǎo)航類》
• 《超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄》
• 《設(shè)計(jì)師進(jìn)階筆記！APP導(dǎo)航的設(shè)計(jì)套路》