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

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

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

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

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

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

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

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

（1）跳版式/桌面式

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

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

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

（3）列表式

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

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

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

（1）抽屜式/側(cè)邊式

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

（2）下拉菜單式

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

（3）點(diǎn)聚式

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

3. 混合導(dǎo)航

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

（1）舵式

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

（2）輪播式

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

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

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

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

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

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

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

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

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

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

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

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

作者：Nick益，原阿里、騰訊UED設(shè)計(jì)師

來源：微信公眾號(hào)“三分設(shè)（ID：sanfen-design）”

本文由 @三分設(shè) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議