移動UI設計中的7種主要導航模式

正如精良的設計一樣，優秀的導航也大象無形。不管是瀏覽好友資訊，還是租賃汽車，完美的導航設計能讓使用者根據直覺使用應用程式，也能讓使用者非常容易地完成所有任務。一款應用的導航可以被設計成各種樣式，但我想著重介紹６種主要的導航模式，也就是主選單的導航模式（見圖1-1）。

圖1-1 主要導航模式

跳板式 跳板式導航對作業系統並沒有特殊要求，在各種裝置上都有良好表現。它有時也被稱為“快速啟動板”（Launchpad）。跳板式導航的特徵是，登入介面中的選單選項就是進入各個應用的起點。Facebook 應用沿用了iOS 主介面上的跳板式設計，其他應用隨之跟風（見圖1-2 至圖1-4）。

1
圖1-2 Facebook 的跳板式導航和Ovi Maps 應用

2
圖1-3 Trulia 和LinkedIn 的導航設計

3
圖1-4 Palm 手機上的NewsRoom 和Nokia 手機上的Yahoo ！

個性化的跳板式導航可在顯示選單選項的同時顯示使用者個人資料。通常會提供自定義功能，允許使用者改變跳板式導航的佈局（見圖1-5）

4
圖1-5 PayPal 使用者個性化的跳板式導航和Gowalla 應用的早期版本

常見的佈局形式是3×3、2×3、2×2 和1×2 的網格（見圖1-6）。但跳板式導航不一定非要拘泥於網格佈局，你可以成比例地放大某些選項，以彰顯其重要性。在iPhone的應用Masters 中，VIDEO 選項就是其他選單選項的2 ～ 3 倍大（見圖1-7）

5
圖1-6 跳板式導航的網格佈局

[6]
圖1-7 Norton Mobile 的2×2 網格佈局和Masters 的不規則佈局

為同等重要的內容項使用網格佈局，為相比之下更為重要的內容項使用不規則佈局形式。視情況使用個性化設定和自定義選項。

列表選單式 列表選單式導航與跳板式導航的共同點在於，每個選單項都是進入應用各項功能的入口點。這種導航有很多種變化形式，包括個性化列表選單（Personalized List Menu）、分組列表（Grouped List）和增強列表（Enhanced List）等。增強列表是在簡單的列表選單之上增加搜尋、瀏覽或過濾之類的功能後形成的（見圖1-8 至圖1-11）。

1
圖1-8 列表選單：Valspar Paint 和Kayak 應用

2
圖1-9 列表選單：Palm 手機上的RadioTime 和Cozi 應用

3
圖1-10 個性化列表：Blackboard 和Zoho CRM 應用

4
圖1-11 增強列表：Amazon MP3 應用；分組列表：Stratus 應用

列表選單很適合用來顯示較長或擁有次級文字內容的標題。使用列表選單的應用要在所有次級螢幕內提供一個選項，用來返回選單列表。通常的做法是在標題欄上顯示一個帶有列表圖示或“選單”字樣的按鈕。

選項卡式

選項卡式導航在不同的作業系統上有不同表現，對於選項卡的定位和設計，不同作業系統有不同的規則（見圖1-12）。如果要為你的應用選擇這種導航模式，就要為不同的作業系統專門定義選項卡的位置。

圖1-12 不同作業系統內選項卡的位置

iOS、WebOS 和BlackBerry 系統都把選項卡放在了螢幕底端，這樣使用者就可以用拇指進行操作（見圖1-13 和圖1-14）。

圖1-13 位於螢幕底部的選項卡：Jamie Oliver Recipes 和Molome 應用

圖1-14 位於螢幕底部的選項卡：BlackBerry 系統的應用World 和WorldMate

螢幕底部水平滾動的選項卡是個非常不錯的設計，如圖1-15 中的Starbucks 和Blue Mobile 應用，它可以在同一屏內提供更多的操作選項。

圖1-15 位於螢幕底部的滾動選項卡：Starbucks 和Blue Mobile 應用

Android、Symbian 和Windows 系統都把選項卡定位在螢幕的頂端，這種形式看上去很眼熟，因為它模仿了標準的網站導航模式。Nokia 和Windows 都在螢幕頂端設計了可滾動的選項卡，使用者移動選項卡後能看到更多的選單項（見圖1-16 和圖1-17）。

圖1-16 位於螢幕頂端的滾動選項卡：Harvest TimeTractor 應用和Nokia 上的Fring 應用

圖1-17 位於螢幕頂端的選項卡：Foursquare 和HitPost 應用

為已選擇的選單項設定不同的視覺效果，使用者就能清晰地知道自己選擇了哪一項。使用易於識別或帶有標籤的圖示。

陳列館式

陳列館式的設計通過在平面上顯示各個內容項來實現導航，主要用來顯示一些文章、菜譜、照片、產品等，可以佈局成輪盤、網格或用幻燈片演示（見圖1-18 至圖1-20）。

圖1-18 BBC 和PULSE 應用

圖1-19 Flickr 應用和Palm 手機上的PictureIt 應用

有時，對這些內容進行分組更易於使用者瀏覽。Dwell 利用側邊選項卡把陳列館式導航裡的內容組織成了可供使用者管理的內容塊。

圖1-20 Dwell 應用

陳列館式導航能很好地應用於使用者需要經常瀏覽，頻繁更新的內容。

儀表式

儀表式導航提供了一種度量關鍵績效指標（Key Performance Indicators，KPI）是否達到要求的方法。經過設計以後，每一項量度都可以顯示出額外的資訊。這種主要的導航模式對於商業應用、分析工具以及銷售和市場應用非常有用（見圖1-21）。

圖1-21 Mint 和Ego 應用中的儀表式導航

不要使用過多的儀表式導航。你需要開展研究才能決定應該對哪些關鍵量度採用儀表式導航。

隱喻式

這種導航的特點是用頁面模仿應用的隱喻物件。這種導航主要用於遊戲，但在幫助導航 人們組織事物（如日記、書籍、紅酒等），並對其進行分類的應用中也能看到（見圖1-22 至圖1-25）。

圖1-22 Awesome Note 應用

圖1-23 Cellar 應用

圖1-24 DoItTomorrow 和TripJournal 應用

圖1-25 Aldiko Book Reader 應用

一定要謹慎地使用隱喻式導航，蹩腳的模仿很可能造成10.1 節出現的反模式（anti-Pattern）。

超級選單式

移動裝置上的超級選單式導航與網站所用的超級選單導航類似，它在一個較大的覆蓋皮膚上分組顯示已定義好格式的選單選項。RipCurl 網站就利用超級選單顯示服飾的次級類別（見圖1-26）。

圖1-26 RipCurlShop.com

WebOS 系統版本的Facebook 利用超級選單來精簡導航，避免了跳板式導航中過多的選項。Walmart 在它們的Android 應用中也採用了超級選單式（見圖1-27）。

在選擇導航模式之前，首先要確定資訊架構。如果要導航的物件僅僅是應用中少數主要內容，就可以使用選項卡之類的導航模式。

圖1-27 WebOS 系統下的Facebook 和Android 系統下的Walmart

本文摘自《移動應用UI設計模式》