一款小小的手機(jī)應(yīng)用，卻包羅萬象，融合這復(fù)雜的信息內(nèi)容或功能邏輯。要讓用戶在使用中獲得最好的體驗(yàn)，迅速掌握應(yīng)用的框架結(jié)構(gòu)，其導(dǎo)航的設(shè)計(jì)是一個(gè)重要的環(huán)節(jié)。

手機(jī)應(yīng)用的導(dǎo)航和現(xiàn)實(shí)世界中的路標(biāo)或者地圖的作用很類似。它是應(yīng)用軟件的虛擬框架，對(duì)用戶具有指示標(biāo)識(shí)以及識(shí)別的功能。

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

APP導(dǎo)航設(shè)計(jì)的步驟主要為以下三步：
1. APP框架整理：信息架構(gòu) or 任務(wù)分析
2. 框架層級(jí)判斷： 扁平 vs 樹狀
3. 導(dǎo)航具體表現(xiàn)形式：控件形式and擺放位置

Step1: APP框架整理： 信息架構(gòu)or 任務(wù)分析

為什么需要框架整理呢？
這和建造一棟大樓一樣。 在搭建一棟宏偉的建筑之前，需要預(yù)先對(duì)建筑中的各個(gè)小房間進(jìn)行規(guī)劃，以確保大樓結(jié)構(gòu)的正確規(guī)劃和安排。 而蘊(yùn)含著在App設(shè)計(jì)的最初階段，需要先建立一個(gè)App藍(lán)圖，來確保在之后軟件導(dǎo)航的設(shè)計(jì)過程中，設(shè)計(jì)人員能對(duì)功能產(chǎn)品所屬層級(jí)以及需要兼顧的前后關(guān)系進(jìn)行宏觀的掌控。

框架整理的方法

在建立藍(lán)圖的過程中，需要根據(jù)App自身的特性，選取適當(dāng)?shù)姆椒ā．?dāng)下的App應(yīng)用主要可以分為兩大類，內(nèi)容瀏覽類應(yīng)用和功能操作型應(yīng)用。對(duì)于內(nèi)容瀏覽類應(yīng)用，需要通過信息架構(gòu)的方法，對(duì)信息數(shù)據(jù)進(jìn)行整合歸類。而對(duì)于功能操作型應(yīng)用，則需要通過任務(wù)分析的方法，將功能分解組織形成一個(gè)能夠閉環(huán)的網(wǎng)狀操作模式。

信息架構(gòu)的定義及使用方法

信息架構(gòu)是一種對(duì)信息進(jìn)行組織分類的方法，提升信息的可用性和可尋性，以使其能更加高效有序地被用戶認(rèn)知。

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

對(duì)大規(guī)模的數(shù)據(jù)信息進(jìn)行架構(gòu)是復(fù)雜的，而對(duì)于這類信息的架構(gòu)需要有專業(yè)的信息分析師從多維度進(jìn)行分析整理。而在實(shí)際的手機(jī)產(chǎn)品設(shè)計(jì)中，信息量相對(duì)較為簡單，對(duì)于這類信息目前采用的分析方法主要有：信息結(jié)構(gòu)，邏輯樹和卡片分類三種方法。

信息結(jié)構(gòu)主要是從物理世界中人們已經(jīng)獲得普遍贊同的信息的基礎(chǔ)結(jié)構(gòu)對(duì)信息進(jìn)行排布，如歌曲的標(biāo)題信息按照26字母的順序進(jìn)行排列；邏輯樹則是按照人們心智模型中普遍認(rèn)知的邏輯結(jié)構(gòu)，將信息按照樹狀邏輯進(jìn)行梳理，比如類別信息（顏色，材料等），從屬信息（紅色屬于顏色，木頭屬于材料）； 卡片分類則是對(duì)一些不確定的信息，按照用戶習(xí)慣，通過卡片分類和統(tǒng)計(jì)的方法，來對(duì)信息進(jìn)行歸類，在電商的物品類別和網(wǎng)站地圖的設(shè)計(jì)中進(jìn)行了廣泛的應(yīng)用。

任務(wù)分析的定義及使用方法

任務(wù)分析是指將用戶為了實(shí)現(xiàn)某個(gè)目標(biāo)執(zhí)行的一系列動(dòng)作或者是進(jìn)行的認(rèn)知過程進(jìn)行分析的一種行為。通過任務(wù)分析，能讓設(shè)計(jì)師清晰地了解到當(dāng)前APP將要實(shí)現(xiàn)的功能層級(jí)順序以及信息在系統(tǒng)中傳遞的狀態(tài)，使其在設(shè)計(jì)中能全局地把握住產(chǎn)品的結(jié)構(gòu)以及用戶當(dāng)前所需要進(jìn)行的操作。

任務(wù)分析的首要任務(wù)需要明白用戶的目標(biāo)，然后將用戶實(shí)現(xiàn)目標(biāo)進(jìn)行的操作進(jìn)行拆解，此時(shí)每一個(gè)操作都可視作為一個(gè)原始任務(wù)。 再原始任務(wù)的基礎(chǔ)上，根據(jù)需要深入的程度將任務(wù)再進(jìn)行更加細(xì)致的拆解。在產(chǎn)品設(shè)計(jì)中，拆解的終點(diǎn)一般視為可以單獨(dú)進(jìn)行設(shè)計(jì)以及分析的子單元。

Step2 ： 功能層級(jí)判斷： 扁平 VS 樹狀

再分析了App的框架結(jié)構(gòu)后，產(chǎn)品功能的邏輯層次也就基本確定。建議可以利用一些框架繪制軟件將分析整理的框架記錄下來，形成一張大的藍(lán)圖。在后期的導(dǎo)航設(shè)計(jì)中，許多功能的安排以及排布可以直接從圖中所示的位置關(guān)系進(jìn)行設(shè)計(jì)。

在導(dǎo)航的設(shè)計(jì)中，經(jīng)常遇見的功能層級(jí)主要是兩種：一種是扁平層級(jí)，即所屬功能在框架藍(lán)圖中屬于同一層級(jí)的并列關(guān)系，這種主要出現(xiàn)在信息架構(gòu)較為扁平化，同級(jí)別任務(wù)功能較多的視圖中，如Dashboard和列表設(shè)計(jì)；另外一種則是樹狀層級(jí)，即信息架構(gòu)較為層次化或者任務(wù)之間有從屬關(guān)系，需要用戶逐層深入的視圖中，如iOS中的單進(jìn)單出式層級(jí)導(dǎo)航。

Dashboard是扁平層級(jí)導(dǎo)航設(shè)計(jì)中經(jīng)常使用到一種模式，系統(tǒng)的首頁和App的入口作為全局導(dǎo)航的一種方式應(yīng)用廣泛。在手機(jī)操作系統(tǒng)中，一般采用圖標(biāo)加消息數(shù)目的形式配合出現(xiàn)，讓用戶在第一個(gè)頁面即可以選擇想使用的軟件功能。

沿用這種思路，在App的設(shè)計(jì)中，應(yīng)用的第一個(gè)頁面將扁平化的信息層級(jí)展現(xiàn)出來提供給用戶進(jìn)行選擇，可以讓用戶迅速定位到自己關(guān)注的功能點(diǎn)上。這種導(dǎo)航設(shè)計(jì)的優(yōu)點(diǎn)在于App的功能結(jié)構(gòu)較為扁平，用戶能迅速了解全局架構(gòu)，而同時(shí)又因?yàn)楣δ苓x擇過多集中在首頁上，那么單個(gè)功能的層級(jí)不宜過于復(fù)雜，并且需要提供快速返回首頁的設(shè)置，讓用戶能再次做出選擇。

列表設(shè)計(jì)適用于內(nèi)容瀏覽類應(yīng)用的扁平信息層級(jí)設(shè)計(jì)，將相同層級(jí)的類別信息聚合地放在一個(gè)縱向列表中。 操作系統(tǒng)中，使用到這種導(dǎo)航設(shè)計(jì)的主要有通訊錄，歌曲列表，商店應(yīng)用等以項(xiàng)目名字進(jìn)行排布的扁平化區(qū)域。

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

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

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

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

Step3: 導(dǎo)航具體表現(xiàn)形式：控件形式and擺放位置

通過前面兩個(gè)步驟的分析與設(shè)計(jì)，App的導(dǎo)航結(jié)構(gòu)可以算是基本完成。但因?yàn)楝F(xiàn)在手機(jī)平臺(tái)眾多，用戶使用習(xí)慣各不相同。所以在產(chǎn)品的具體設(shè)計(jì)中，為了給產(chǎn)品提供最好的用戶體驗(yàn)，還需要把握平臺(tái)特性，選擇合適的控件形式，并且根據(jù)用戶手持設(shè)備的操作系統(tǒng)，為用戶設(shè)計(jì)導(dǎo)航最易操作的位置。

如對(duì)于樹狀層級(jí)導(dǎo)航欄設(shè)計(jì)， iOS的導(dǎo)航欄控件被安排在了屏幕上方，因?yàn)樵谟|屏的使用時(shí)，頂部區(qū)域是信息展現(xiàn)率最完整的區(qū)域，在手指操作的過程中，該區(qū)域的信息不易被手的運(yùn)動(dòng)軌跡遮擋。通過此導(dǎo)航欄用戶能實(shí)時(shí)定位自己所處的當(dāng)前位置以及可以返回的上層界面。

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

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

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

返回按鈕讓用戶返回上一步的功能操作。菜單按鈕可以顯示當(dāng)前視圖中相關(guān)的操作，最多可以有6個(gè)，但和iOS的“可選管理區(qū)域”的設(shè)置方式略有不同，該區(qū)域一般是全局的功能操作，所以不一定和每個(gè)視圖都密切相關(guān)。手機(jī)桌面，用戶點(diǎn)擊后會(huì)快速地回到Android手機(jī)桌面，是一種全局導(dǎo)航體現(xiàn)。搜索按鈕，如果執(zhí)行的應(yīng)用程序中有搜索設(shè)置，則會(huì)開啟軟件的相關(guān)搜索部分；如果沒有搜索，則會(huì)調(diào)用系統(tǒng)的默認(rèn)搜索引擎

綜上，手機(jī)產(chǎn)品的導(dǎo)航設(shè)計(jì)需要在明確了設(shè)計(jì)的總體框架和結(jié)構(gòu)后，根據(jù)硬件的特點(diǎn)和用戶的使用習(xí)慣進(jìn)行設(shè)計(jì)。通過理性的架構(gòu)分析，感性的體驗(yàn)設(shè)計(jì)，好的導(dǎo)航結(jié)構(gòu)能讓你的App設(shè)計(jì)事半功倍。

來源：百度MUX