掌上指路標 —– APP架構與導航設計

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

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

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

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

框架整理的方法

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

資訊架構的定義及使用方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如對於樹狀層級巡覽列設計， iOS的巡覽列控制項被安排在了螢幕上方，因為在觸屏的使用時，頂部區域是資訊展現率最完整的區域，在手指操作的過程中，該區域的資訊不易被手的運動軌跡遮擋。 通過此巡覽列使用者能即時定位自己所處的當前位置以及可以返回的上層介面。

整個巡覽列控制項由「返回按鈕」，「頁面標籤」和「可選管理區域」三個子控制群組成。 「返回按鈕」一般放置於左上角區域，允許使用者在進行樹狀層級資訊的流覽後，通過此按鍵逐層地返回上一層級。 按鈕本身的設計該返回按鈕只對應唯一的入口資訊，不允許放置多層級返回按鈕。 頁面標籤則應是顯示對當前視圖資訊的高度概括，可對應顯示視圖標題，序號位置等。 可選管理區塊可放置對於該螢幕的一些重要操作，實現螢幕內容的管理（如添加，編輯，翻頁，刪除，播放，詳細內容等）。 但只能放置一種管理按鈕。

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

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

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

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

轉載請注明出自」百度MUX」