一款小小的手機應用，卻包羅萬象，融合這復雜的信息內容或功能邏輯。要讓用戶在使用中獲得最好的體驗，迅速掌握應用的框架結構，其導航的設計是一個重要的環節。

手機應用的導航和現實世界中的路標或者地圖的作用很類似。它是應用軟件的虛擬框架，對用戶具有指示標識以及識別的功能。

比如，如同路標，導航能在使用中，定位用戶當前在哪兒，為用戶突出當前視圖重要的功能，告知用戶可以去哪兒，在不同的視圖和區域迅速地切換信息，記錄使用的操作軌跡防止用戶迷失等。那么導航應該如何設計呢？

APP導航設計的步驟主要為以下三步：
1. APP框架整理：信息架構 or 任務分析
2. 框架層級判斷： 扁平 vs 樹狀
3. 導航具體表現形式：控件形式and擺放位置

Step1: APP框架整理： 信息架構or 任務分析

為什么需要框架整理呢？
這和建造一棟大樓一樣。 在搭建一棟宏偉的建筑之前，需要預先對建筑中的各個小房間進行規劃，以確保大樓結構的正確規劃和安排。 而蘊含著在App設計的最初階段，需要先建立一個App藍圖，來確保在之后軟件導航的設計過程中，設計人員能對功能產品所屬層級以及需要兼顧的前后關系進行宏觀的掌控。

框架整理的方法

在建立藍圖的過程中，需要根據App自身的特性，選取適當的方法。當下的App應用主要可以分為兩大類，內容瀏覽類應用和功能操作型應用。對于內容瀏覽類應用，需要通過信息架構的方法，對信息數據進行整合歸類。而對于功能操作型應用，則需要通過任務分析的方法，將功能分解組織形成一個能夠閉環的網狀操作模式。

信息架構的定義及使用方法

信息架構是一種對信息進行組織分類的方法，提升信息的可用性和可尋性，以使其能更加高效有序地被用戶認知。

該方法最早起源于圖書館的圖書分類，圖書管理員通過將相似書籍歸類并且進行編號，使讀者能快捷方便地在上萬冊的圖書中找尋到自己所需要的書籍。隨著計算機科學技術的發展，信息量日益增多，該方法也廣泛地開始應用于虛擬數據和信息的管理中，如數據庫，內容管理系統CMS（contents management system）和網站設計中。

對大規模的數據信息進行架構是復雜的，而對于這類信息的架構需要有專業的信息分析師從多維度進行分析整理。而在實際的手機產品設計中，信息量相對較為簡單，對于這類信息目前采用的分析方法主要有：信息結構，邏輯樹和卡片分類三種方法。

信息結構主要是從物理世界中人們已經獲得普遍贊同的信息的基礎結構對信息進行排布，如歌曲的標題信息按照26字母的順序進行排列；邏輯樹則是按照人們心智模型中普遍認知的邏輯結構，將信息按照樹狀邏輯進行梳理，比如類別信息（顏色，材料等），從屬信息（紅色屬于顏色，木頭屬于材料）； 卡片分類則是對一些不確定的信息，按照用戶習慣，通過卡片分類和統計的方法，來對信息進行歸類，在電商的物品類別和網站地圖的設計中進行了廣泛的應用。

任務分析的定義及使用方法

任務分析是指將用戶為了實現某個目標執行的一系列動作或者是進行的認知過程進行分析的一種行為。通過任務分析，能讓設計師清晰地了解到當前APP將要實現的功能層級順序以及信息在系統中傳遞的狀態，使其在設計中能全局地把握住產品的結構以及用戶當前所需要進行的操作。

任務分析的首要任務需要明白用戶的目標，然后將用戶實現目標進行的操作進行拆解，此時每一個操作都可視作為一個原始任務。 再原始任務的基礎上，根據需要深入的程度將任務再進行更加細致的拆解。在產品設計中，拆解的終點一般視為可以單獨進行設計以及分析的子單元。

Step2 ： 功能層級判斷： 扁平 VS 樹狀

再分析了App的框架結構后，產品功能的邏輯層次也就基本確定。建議可以利用一些框架繪制軟件將分析整理的框架記錄下來，形成一張大的藍圖。在后期的導航設計中，許多功能的安排以及排布可以直接從圖中所示的位置關系進行設計。

在導航的設計中，經常遇見的功能層級主要是兩種：一種是扁平層級，即所屬功能在框架藍圖中屬于同一層級的并列關系，這種主要出現在信息架構較為扁平化，同級別任務功能較多的視圖中，如Dashboard和列表設計；另外一種則是樹狀層級，即信息架構較為層次化或者任務之間有從屬關系，需要用戶逐層深入的視圖中，如iOS中的單進單出式層級導航。

Dashboard是扁平層級導航設計中經常使用到一種模式，系統的首頁和App的入口作為全局導航的一種方式應用廣泛。在手機操作系統中，一般采用圖標加消息數目的形式配合出現，讓用戶在第一個頁面即可以選擇想使用的軟件功能。

沿用這種思路，在App的設計中，應用的第一個頁面將扁平化的信息層級展現出來提供給用戶進行選擇，可以讓用戶迅速定位到自己關注的功能點上。這種導航設計的優點在于App的功能結構較為扁平，用戶能迅速了解全局架構，而同時又因為功能選擇過多集中在首頁上，那么單個功能的層級不宜過于復雜，并且需要提供快速返回首頁的設置，讓用戶能再次做出選擇。

列表設計適用于內容瀏覽類應用的扁平信息層級設計，將相同層級的類別信息聚合地放在一個縱向列表中。 操作系統中，使用到這種導航設計的主要有通訊錄，歌曲列表，商店應用等以項目名字進行排布的扁平化區域。

同理，在App的設計中，類別信息較多的電商類應用，由單條目名稱聚合的應用，信息訂閱型的新聞類應用的導航模式，都屬于典型的扁平化信息層級，因此列表導航的設計也非常適用。并且根據自身的特性，均有一些細微的差異。 如淘寶的類別目錄導航，類別在設計中根據用戶使用的熱度進行了自上而下的排版； 而Eataly菜譜導航，則因為名稱聚合較多，在右側提供了便捷選擇的字母索引；BBC的新聞導航則類似于類別信息與條目信息的綜合導航，因此列表導航在設計時，除了按照用戶關注熱度自上而下進行排列，類別欄目還能方便地收起展開或者在瀏覽的過程懸停在頁面頂端。

（圖片來源： http://www.androidpatterns.com/ ?）

樹狀層級結構的設計在移動設備的設計中應用極其廣泛。和傳統PC時代大量使用的“面包屑”網狀設計不同，樹狀層級結構只允許用戶從唯一的入口進入，并且從唯一的出口返回原處。這種設計模式非常適用于功能層級或者信息架構縱向非常復雜的應用，用戶能夠清晰地某個分枝上前進后退，而不用擔心在App 迷失了當前所在位置。

樹狀層級導航在App的設計上有兩種表現形式。 一種是如iOS中的導航欄設計。用戶從列表導航中選擇某項進入下一層級，通過導航欄左上位置的“返回”按鈕返回上一層級，整個導航給用戶的感覺就如同在一棵大樹上沿著縱向進行攀爬。 而另外一種設計則是Windows Phone7上的Metro UI設計。如圖所示，所屬層級的下級內容如同平鋪一般展現在同一維度上，而逐層的導航則以左右推移的方式進行，此種導航的設計讓用戶在逐層深入時，也縱觀到全局的設計。

Step3: 導航具體表現形式：控件形式and擺放位置

通過前面兩個步驟的分析與設計，App的導航結構可以算是基本完成。但因為現在手機平臺眾多，用戶使用習慣各不相同。所以在產品的具體設計中，為了給產品提供最好的用戶體驗，還需要把握平臺特性，選擇合適的控件形式，并且根據用戶手持設備的操作系統，為用戶設計導航最易操作的位置。

如對于樹狀層級導航欄設計， iOS的導航欄控件被安排在了屏幕上方，因為在觸屏的使用時，頂部區域是信息展現率最完整的區域，在手指操作的過程中，該區域的信息不易被手的運動軌跡遮擋。通過此導航欄用戶能實時定位自己所處的當前位置以及可以返回的上層界面。

整個導航欄控件由“返回按鈕”，“頁面標簽”和“可選管理區域”三個子控件組成?！胺祷匕粹o”一般放置于左上角區域，允許用戶在進行樹狀層級信息的瀏覽后，通過此按鍵逐層地返回上一層級。按鈕本身的設計該返回按鈕只對應唯一的入口信息，不允許放置多層級返回按鈕。頁面標簽則應是顯示對當前視圖信息的高度概括，可對應顯示視圖標題，序號位置等?？蛇x管理區塊可放置對于該屏幕的一些重要操作，實現屏幕內容的管理（如添加，編輯，翻頁，刪除，播放，詳細內容等）。但只能放置一種管理按鈕。

（圖片來源： http://www.androidpatterns.com/ ?）

而對于Android的樹狀層級導航，則更多的依賴于下部的硬件實體導航控件。主流的Android硬件導航提供四種功能：返回，菜單按鈕，手機桌面，以及搜索。

返回按鈕讓用戶返回上一步的功能操作。菜單按鈕可以顯示當前視圖中相關的操作，最多可以有6個，但和iOS的“可選管理區域”的設置方式略有不同，該區域一般是全局的功能操作，所以不一定和每個視圖都密切相關。手機桌面，用戶點擊后會快速地回到Android手機桌面，是一種全局導航體現。搜索按鈕，如果執行的應用程序中有搜索設置，則會開啟軟件的相關搜索部分；如果沒有搜索，則會調用系統的默認搜索引擎

綜上，手機產品的導航設計需要在明確了設計的總體框架和結構后，根據硬件的特點和用戶的使用習慣進行設計。通過理性的架構分析，感性的體驗設計，好的導航結構能讓你的App設計事半功倍。

來源：百度MUX