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

一、導航設計定義

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

目前市面上移動界面設計所使用的導航設計，基本分為以下（桌面式、選項卡式、列表式、側邊抽屜式、下拉菜單式、點聚式）6大基礎導航模式，為了不斷滿足業務、用戶需求，涌出（舵式、輪播式等）新穎的混合型導航模式。設計師們在基礎導航模式上仍在不斷做升級優化以及組合創新。

二、導航設計的類型

按照操作方式，我們可以將導航設計大致分為三種不同的類型：全局型、瞬時型、混合型。

1. 全局型導航

只需打開應用，就直截了當的展示導航中的各個選項。換言之，無需操作，就可以看到并通過各個功能入口。通常固定在頁面中，占據頁面的一定的面積。其中常用包括：桌面式、標簽式、列表式（如下圖）

（1）跳版式/桌面式

通常占據屏幕的大多數面積。

（2）標簽式/選項卡式

iOS 和 Android端常用的導航模式，算是標準選項卡導航，還有其他新的創新。

（3）列表式

更多的文字和狀態的描述和變化。

2. 瞬時導航

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

（1）抽屜式/側邊式

點擊左上角的頭像，左側劃入功能入口。

（2）下拉菜單式

點擊添加，彈出下來功能選項。

（3）點聚式

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

3. 混合導航

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

（1）舵式

全局導航-底部標簽欄式 + 瞬時導航-點聚式 = 舵式導航

（2）輪播式

全局導航-桌面式 + 瞬時導航-抽屜式 = 輪播式導航

三、導航設計的層次

導航設計中各類型設計模式是可以自由的組合，根據業務需求結合用戶體驗找到一套適合的組合拳。我們通常選擇一個導航作為主體框架，其他導航作為輔助。

主導航：從一個主類別切換到另一個主類別的一級菜單，主類別的切換。次導航：指在選中的模塊內活動的二級導航。

導航內功能的層級（微博：混合導航-舵式做為一級導航 + 混合導航-輪播式作為二級導航）

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

四、怎么區分全局型導航、瞬時型導航還是混合型導航？

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

五、好的導航設計要滿足哪些要求呢？

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

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

下一篇文章，我將闡述每一個模式的特色，拆解并分析多個產品界面中導航設計的運用。

作者：Nick益，原阿里、騰訊UED設計師

來源：微信公眾號“三分設（ID：sanfen-design）”

本文由 @三分設 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議