[[115941]]

本文轉(zhuǎn)自百度MUX

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

[[115942]]

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

[[115943]]

比如，如同路標(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. 框架層級判斷： 扁平 vs 樹狀

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

[[115944]]

為什么需要框架整理呢?

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

框架整理的方法

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

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

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

[[115946]]

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

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

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

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

(圖片來源: University of York, HCI 課程講義)

任務(wù)分析是指將用戶為了實(shí)現(xiàn)某個(gè)目標(biāo)執(zhí)行的一系列動作或者是進(jìn)行的認(rèn)知過程進(jìn)行分析的一種行為。通過任務(wù)分析，能讓設(shè)計(jì)師清晰地了解到當(dāng)前APP將要實(shí)現(xiàn)的功能層級順序以及信息在系統(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ì)以及分析的子單元。

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

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

Dashboard是扁平層級導(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è)頁面將扁平化的信息層級展現(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è)功能的層級不宜過于復(fù)雜，并且需要提供快 速返回首頁的設(shè)置，讓用戶能再次做出選擇。

列表設(shè)計(jì)適用于內(nèi)容瀏覽類應(yīng)用的扁平信息層級設(shè)計(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)航模式，都屬于典型的扁平化信息層級，因此列表導(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/ )

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

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

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

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

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

(圖片來源： http://www.androidpatterns.com/ )

而對于Android的樹狀層級導(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)擊后會快速地回到Android手機(jī)桌面，是一種全局導(dǎo)航體現(xiàn)。搜索按鈕，如果執(zhí) 行的應(yīng)用程序中有搜索設(shè)置，則會開啟軟件的相關(guān)搜索部分;如果沒有搜索，則會調(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ì)事半功倍。