移動網站中的「尋路系統」

原文：Wayfinding For The Mobile Web
註：文章觀點新穎、系統化、長度適中，是我近期讀到文章中很好的一篇。翻譯的話太耗時間，本文只算摘要。

現在流行「移動優先」，設計原則中提倡內容爲王，其餘內容統統讓位，這其中包括導航系統。由於移動端屏幕小，加上現在流行極簡的設計風，我們會砍掉屏幕上很多輔助功能來節省空間，但這可能造成應用必需的導航的缺失。

借鑑現實生活中的尋路系統，一般場景是這樣的（假設你剛下飛機）：

1. 站在門口，快速瀏覽週邊環境；
2. 觀察人們往哪兒走，跟着走；
3. 走動時留意兩旁的標誌物或標記，比如「領取行李箱」等；
4. 確認自己走的方向正確後，就會放鬆心情，瀏覽兩旁的店鋪、餐館等。

應用中的導航和真實的尋路場景有諸多相似之處。我們先提出尋路系統中的三個重要概念，再把它應用到應用的導航系統中：

• 循環系統：導航的基礎設施（可參看用建築理論做產品設計（一）——循環系統）
• 空間線索
• 標誌物

循環系統

數字應用中最常用的几類循環系統模型是：

Hierarchical Tree

自上而下的層級樹是富信息網站最常用的組織數據的結構。它很適合在桌面網頁上通過多級目錄展示。可以快速訪問同級和上下級的內容。這種「多鏈接」的導航模式，並不太適合小屏幕的頁面。設計師們在小屏幕上探索了一種unfolding experiences的理念，逐步地把信息展示給用戶。

Nested Doll

一種線性的目錄模式，在移動應用中有廣泛應用。它讓用戶一步步逼近並關注自己想找的內容，也很適合小屏幕展示，缺點是跨區域移動很不方便。

Hub and Spoke

這種模型有一個中心頁面，它指向的各個子區域相互獨立。如果想在子區域間跳轉，需要先回到中心頁面。它的優點是各頁面中不需要再有全局導航，很適合那些具體任務、希望避免干擾的應用。

Bento Box

該模型中的單頁承載了多個任務，通過不同區域的交互展開對應的更多內容，適合用戶可以和多種不同來源的信息進行交互的應用。

Filtered View

該模型和Bento Box的區別是，它處理的是同一套數據。該模型只是提供了不同的觀察、篩選這一套數據的維度。

多種模型的結合

真實的案例往往會按需求結合多種模型使用。實例見原文。

空間線索

尋路系統用來支持用戶的流動，空間線索則是告知用戶可以如何流動的。

標誌物

在UI設計中，標誌物一般指那些顯著的，位置保持固定的元素。
一些全局標誌物包括：

• Logo。導回首頁。
• 主導航。用戶可以快速在主區塊間切換。
• 麪包屑。告知當前位置，並可以快速向上級導航。
• 搜索。瀏覽導航以外的另一種查找信息的方式。

其它的局部標誌物包括：

• 區塊的標題欄。告知當前所處區塊。
• 區塊導航。
• 獨特的模板、組件。用戶會記得來過、返回到這些地點。

這些概念本身很簡單，但具體應用在多頁面網站設計和適應性設計（不同尺寸不同設計）時，還是有很多需要注意的地方。如今用戶都是跨設備的使用應用，爲避免給用戶造成困惑，各設備下的設計應該保持一定的一致性。通過以下角度可以檢查你的設計在不同尺寸、設備下的一致性：

• 位置
• 形式
• 顏色
• 視覺上的優先級
• 可見性

適應性固然很重要，但要在適應性和一致性間找到平衡。

邊界

邊界幫我們劃分應用中的不同區塊。大屏設計中可以利用留白和珊格系統來作爲邊界，小屏幕中則需要使用更明確的邊界：

• 提供明確的視覺線索告知鏈接、按鈕的可點擊區域；
• 通過不同的背景色或明顯的邊界區分不同區塊。

標記(Signage)

標記是指用戶需要做決定時應用提供的視覺指導，一般是文字或圖標的方式。應用界面中大部分非內容的部分，包括按鈕、目錄、分頁等元素，都起到了標記的作用。

使用圖標

節省空間，更好看，最大的問題是可能會產生歧義，而且增大了新用戶的認知成本。

文本標籤

圖標+文本的形式，文本權重相對更大，圖標爲輔。

研究表明，這種形式的表意效果最好：

• 文本+圖像好過只用文本；
• 只用文本好過只用圖像；
• 用戶會記憶圖標的樣子，但他們對圖標位置的記憶更快。

可見性和做出選擇

圖片傳達的信息更多，占的空間也越大。

一般來說，如果分類間的區別很明顯，額外的視覺線索幫助不大，就可以只顯示文本/標題，便於用戶看到所有選項並做出選擇。
如果產品很相似，難以比較，圖像可以幫助用戶區分，這種場景下區分就比在一個視圖中展示所有選項更重要。

規劃好路徑

用戶在視圖裏看到什麼，很大程度上決定他們之後會往哪兒流動。所以你最希望用戶流動的路徑，應該相應地給予最重的視覺效果。應用元素、結構上的優先級應該反映在UI中。

隱藏的目錄

現在流行把目錄隱藏起來的設計，通過點擊目錄按鈕展開。但即使用戶知道那個按鈕的作用，目錄裏的選項他一開始還是不知道的。用戶其實是通過網頁上的關鍵詞來決定自己瀏覽的方向，如果導航目錄裏還有清楚的關鍵詞信息，隱藏目錄是得不償失的。

在決定是否隱藏目錄前，思考以下問題：

• 我的用戶是怎麼查找信息的？
  如果大部分用戶很明確自己要找什麼，那他們很可能會使用搜索，所以要把搜索功能放在顯眼的位置。如果大部分用戶只是有個模糊的想法，也就是說他們很可能會到處瀏覽，那他們可以從展示出來的關鍵詞中獲益。
• 我的用戶來做什麼的？目錄裏導向的地方，有其它路徑可以到達嗎？
  如果導航只是一個輔助工具，主要是起到快捷導航的作用，那麼可以考慮隱藏；如果目錄是主要的，甚至是唯一的導航方式，那它應該是默認可見的。
• 我隱藏目錄是爲了展示哪些信息？
  如果屏幕上展示了很多信息，那麼那些信息的重要性是否比隱藏的目錄的重要性更大？同時需要考慮的是，文本鏈接也提供了關鍵詞信息，而抽象的圖像只是意味着它背後有更多內容。