「四步走」——理想的導航系統

要做一個可用的導航系統，網頁設計師必須按順序回答以下4個問題：

1. 如何組織内容？

2. 如何解釋導航的選項？

3. 哪種導航菜單最适合容納這些選項？

4. 如何設計導航菜單？

前兩個問題關注構建和便簽内容，通常稱為信息架構。信息架構師通常用網站地圖(site map diagram)來可視化他們的工作成果。

網站地圖給出一個網站的導航結構

然而，由于某些原因（後面會詳細解釋），用網站地圖來并不能提供最好的體驗。設計一個定制導航菜單，容納、整理、逐步揭開它們的選項也是很重要的，所以要讓用戶舒适地浏覽、尋找、忽視選項。

成功設計這樣一個導航菜單，還需要回答後兩個問題，這關乎到導航體驗的交互設計。前兩個問題會在Part 1裡談到，後兩個問題在Part 2。(Part 2還沒寫！！)

構建内容

要恰當地構建網站的内容，首先要考慮用戶是如何尋找信息，然後用與之适應的方法來構建内容。

用戶是如何尋找信息

當用戶找些什麼東西的時候，如，車、食譜、财務服務、衣服…… 他們不一定知道這些東西的确切名字。如果我們假設用戶知道它們的确切名字，那麼我們就認為最近的方法就是提供一個A-Z的索引表，又或是提供一個搜索框。

事實上，事情并不是這麼簡單。即使用戶知道确切的名字，A-Z的索引表和搜索都會有先天的交互問題，它們不能成為主導航，這個放到Part 2中再讨論。然而，用戶通常不知道确切的名字，他們也不關心這些名字；他們有關鍵字或是關于物品的特征描述。

指引用戶找到正确内容的第一步，彙集并分類網站的内容。

元數據(META DATA)是導航系統的基礎

元數據就是收集内容的信息——信息的信息。

不需要理會具體内容，每個條目都歸屬于不同的元數據類别，如：政治類文章、屏幕尺寸、視頻的導演、衣服的領口……當然，還有一些類别是大家共有的，如：價錢、受歡迎程度……

通過這些元數據類别，用戶可以浏覽内容。然而，給用戶提供所有的可能方式去浏覽内容時不現實，也沒好處。這樣會讓界面混亂，讓導航的過程變複雜，甚至會混淆用戶，以至于他們會抛棄這個網站。

小心地考量是否要，或是在哪個階段展示這些類别。

元數據類别的3種類型

決定什麼時候展示元數據類别，首先把類别劃分成3個組别：重要的，可選的，無關的。

信息架構的一大挑戰就是按照重要的，可選的，無關的來分類，這很大程度上取決于目标用戶的偏好，網站的目的，内容的量。一旦你選定了适合的分類标準，這裡有一些簡單的規則來幫你決定什麼時候展示什麼類别。

重要的類别

重要的類别是指對所有目标用戶的很重要。這樣的類别一般較少，但至少每個條目都會有一個重要的類别，這可以簡化設計師的工作，同時提供更好的導航體驗。

決定重要類别

對食譜來說，元數據的類别可能是“過程”、“原料”、“特殊飲食”、“場合”、“烹饪方式”、“烹饪時間”。在這些類别中，最重要的可能是“過程”。不是每個人都有特殊飲食喜好，也不是每頓飯都會有特别的場合，但是幾乎每個人都會把他們的餐飲分為開胃菜、主菜、配菜、沙拉、甜點等。

由于“過程”對每個人來說都是如此重要，首先提供的類别就應該是“過程”。

食譜中，“過程”是最重要的元數據類别

就像前面提到的，目标用戶或是網站目的會影響分類，特别是小衆網站(niche websites)。

例如，“烹饪方式”與一般人去食譜的網站的目的沒有聯系。但是如果有一個網站收集了地球上最好的烹饪食譜，“烹饪方式”可以成為重要類别，你可以增添這樣一個重要類别，也可以取代“過程”成為唯一的重要類别。無論如何，“烹饪方式”才是這個網站的主題，先展示它才是最适合的做法。

小衆網站會有不一樣的重要類别

整理重要類别

上面的例子是有一個重要類别。然後，當你有一大堆條目，就會有各種不同的重要類别。

拿衣服做例子。衣服的類型是一個重要類别，如：“襯衫”、“褲子”、“鞋”、“毛衣”……還會有其他類别，性别、場合，如：“休閑”、“工作”、“舞會”。我們還能找到更多的重要類别。

一開始，把所有的重要類别放在同一個層級似乎很有邏輯。事實上這樣做完全不符合邏輯。重要類别應該一個接一個，有順序地出現。看下下面這個網站信息架構，你大概就明白。

水平的導航欄通常會列出所有種類的商品

這個導航欄列舉了商品的種類，“居家配件”、“打獵&釣魚”、“戶外工作”、“鞋”、“衣服”。但是，對于“衣服”這個類别，設計師做了一點不一樣的處理。衣服被劃分成“男士”、“女士”，而不是把各種類型的衣服都列舉在這個水平的導航欄上，設計師決定用更少的分類。用戶從“男士”、“女士”開始，然後才在下拉菜單中看到衣服的所有種類，從而提供更多的選項。

用更少的分類來騰出空間

這樣的處理方式産生的問題就是，兩個分類放在同一個層級裡面。“鞋→男士”和“男士→鞋”兩種路徑，它們處于相同的層級，使得用戶要在其中做出選擇，這破壞了兩種分類都很重要的假設。因此，其中一條路徑應該會去除——大概是“鞋→男士”吧。

可選的類别

如果有多個重要類别存在，那麼其中一些條目就無需納入其中。如果一個網站隻有十多個衣服條目，那麼隻需要簡單地提供“男士”、“女士”的選擇就好。

在很多案例中，事情走向了另一個方向。即使使用了所有的重要類别進行篩選，還是出現很多條目。所以，需要額外的類别，讓用戶進行進一步篩選内容。可選類别就是出現在這種情形。

可選分類對部分用戶有用。例如，“汽車”的兩個元數據類别，“門的數量”、“燃料類型”。一些人可能對燃料特别感興趣，不太介意是幾門的汽車，而另一些用戶可能會有相反想法。

重要類别優先于可選類别

可選類别應該出現在用戶使用主要類别進行篩選之後。

然而，很多零售網站，譬如賣電子産品或是時裝，會把品牌（可選類别）放到和産品類型（重要類别）一樣的層級。

重要類别和可選類别應該放在不同的層級

這個方法會出現的問題：如果用戶選擇了一個品牌，然後就會出現上百個條目，他就必須選擇衣服類型進行進一步篩選。所以把可選和重要放在同一個層級會增加多餘的路徑，添加選擇的複雜性、導航的混亂度。

提供各種過濾器不是壞事，但是不要在一開始就把各種導航選項提供給用戶，先提供重要的選項，重要的選修都用完了，再引入可選的。

所以，上述的案例，在這個層級裡去掉品牌，先讓用戶選擇衣服類型。再下一個層級中，才提供品牌的選擇。

隻有在用戶已經選擇重要類别後，可選類别才能出現

動态過濾器

前面提到，重要類别應該一個接一個，有順序地出現。所有可選類别最好是同時提供。

除了一種例外情況，如果可選類别互斥，那麼它們就應該像重要類别那樣處理（前面提到“男士”、“女士”就是一組互斥的類别），出現在下一個層級的同一菜單中。如果可選類别可能會被合并，它們就應該做成動态過濾器。

在下面的截圖中，可以看到Sears在面包屑路徑中列出了重要類别，可選類别就成為冬天過濾器。

可選類别被合并成為動态過濾器

重要類别和可選類别之間的差異可以這樣解釋。每一個類别都是一個内容的過濾器，動态過濾器之所以動态是因為它允許用戶選擇和改變多個多個值。相反，在傳統的層級化導航系統裡面，用戶隻有在不同的層級才能選擇值。如果是重要類别，像之前的例子，就不會出現問題；但是可選類别，情況就不一樣了。

當用戶尋找一件襯衫，很多可選類别都會發揮作用：“品牌”、“衣領類型”、“袖長”、“布料”、“圖案”、“口袋數”、“折扣”、“價錢”、“評價”、“受歡迎程度”等等。了解用戶糾結對哪個類别感興趣是很困難的，有的人可能都沒興趣，有的人會對多個、甚至全部都感興趣。

與其一個接一個地給出可選類别，設計師應給提供一個動态的可選過濾器。這樣，用戶就可以隻選擇感興趣的類别。

相反，下面的網站就沒有明确區分出重要類别和可選類别。它把所以類别，包括重要類别都做成動态過濾器。

重要類别不應該做成動态過濾器

區分的缺失會導緻一系列問題。第一，占據了大量豎直空間，使其他可選類别往下移，讓用戶經常滾動才能看到，并做出選擇。

第二，動态過濾器是一個“重型裝備”：它很厲害，但是很耗費資源。當用戶選擇一個值，整個列表的值也會随之改變。這個提供了及時反饋，但是交互卻變慢了。用傳統的導航菜單，選擇重要類别也能得到相同的結果，而且也會更快。

事實上，Nike的設計師的确提供了這樣一個菜單，讓我們驗證了這個假設，在同一個界面裡面測試兩種方式的方式，比較他們的速度和效率。

重要類别還是應該做成傳統的導航菜單

互斥類别

動态過濾器隻有在可選類别可以被合并時才能使用。如果可選類别是互斥的，那麼它們就應該放在主導航菜單的下一個層級。

下面的截圖，Daily Express在最開始就問了用戶一個問題：選擇一種新聞的類型，如：“财經”、“娛樂”、“生活”。然後在主頁的選擇部分，會給出這個類型的一些新聞摘要，幾乎所有用戶都會去看其中3~4篇新聞。對于那些想要看特定主題的讀者，在第一層導航下面列舉了子欄目。

互斥的可選類型最好放在主導航菜單的下一個層級

上面的子欄目可以視作互斥類别，應為一個娛樂項目不會既是一本書，又是一個電影。當然，合并也是可以的；書也可以放到電影欄目裡面，但是文章摘要又怎麼匹配這種分類方式？如果不能匹配，那動态過濾器就有意義。

這個問題的答案，取決于條目的數量和多樣性，而不是類型，當然也取決于目标用戶的偏好。

譬如，用戶不會尋找中式、低脂、聖誕主題的早餐；相反，他們會去找一個既不中式，也不低脂，也不是聖誕主題的早餐。可選類别就很難合并在一起，如果一個網站有上千個食譜，而目标用戶又會有各自的偏好，動态過濾器就會很有用。

一大堆不同種類的内容 個性化的用戶偏好，就需要動态過濾器

最後，第3個元數據組别。

無關類别

無關類别就是目标用戶不看的内容，但是它們也是交互中的一部分。

文章的元數據類别裡面“字數”、“圖片數”。這些類别都會在數據庫中占據位置，内容策劃者可能會查看這些類别，來推斷文章是否過長，是否太少圖片。這可能是用戶沒看完内容就關閉網站的原因。内容策劃者就會與設計師或者客戶讨論這些可以提升内容質量的東西。這些類别對設計師很有價值，但是用戶不會因為“字數”、“圖片數”來選擇文章。

簡單來說，無關類别不應該出現在頁面，它們會被忽視，會照成界面混亂，甚至混淆用戶。但是，無關類别可以轉化為可選類别。

例如，“字數”可能是個無關類别。但是下面的網站就積累了大量文章，因此設計師覺得有必要增加“文章長度”作為内容的過濾器。

無關類别可以轉化為可選類别

上面展示食譜、衣服的網站也可以用來解釋優化類别的重要性，因為它們對元數據類别有需求。但是它們沒有談到一個很多設計師都會遇到的問題，特别是設計公司網站時會遇到。

公司産品分類

很多食譜網站會不加選擇地收集食譜，然後讓設計師去分類。但是公司通常都有内部的産品分類方式。這就可能會與需求沖突。

譬如說汽車的元數據類别。你可能會根據尺寸或是生活方式，如：“緊湊型”、“旅行車”、“運動型”、“轎車”、“豪華型”。這樣的分類很重要，因為每種車都是根據特定的生活方式設計出來，幾乎對每一個駕駛者來說都是如此。緊湊型，就是小巧、便宜、易于駕駛和方便停車；旅行車就很适合家庭；運動型……

很多汽車公司都會有自己的分類方案。寶馬，就是按數字來進行分類。

有時這種分類方案很有效

這種公司的内部分類方案會導緻可用性問題，寶馬的方案在信息架構上的确很好。這種方案知名度也很好，數字與車的尺寸相匹配，某種程度上也算是典型的以“緊湊型”、“轎車”、“豪華型”進行分類。在這個案例中，換成其他分類方式反而會讓用戶不适。

下一個例子就沒那麼直白。Opel用自己的内部命名約定來列舉車。

内部分類對外部用戶就不夠直接

這種産品線的架構不清晰，而且這樣的滑動浏覽汽車的交互也很麻煩（唔……這是一個交互問題）。用戶不能理解車與車的區别，也就不能按照喜好來過濾。

如果分類方案本身不夠好，那麼一個讓人熟悉的外部類别的優先級應該更好。

注意到，大衆也有自己的名稱分類：“Jetta,” “Passat,” “Touareg,” etc. 但是公司最注重常見的外部方案。結果就是，菜單更容易被理解，用戶也能更專注于他們喜歡的産品線。

優先使用常見的外部方案使導航菜單更容易被理解

客戶可能不喜歡他們的分類方案歸為次要位置。但是，信息架構師就是被請來把網站内容變得易于浏覽，你有與客戶溝通的義務。

解釋導航選項

根據用戶偏好來做構造導航選項是簡化網站信息架構的重要一步。但如果用戶一開始就不能理解這些選項，那最精巧的架構都沒用。所以，先要考慮解釋導航選項的最佳方法。

給用戶足夠的理解選項的信息量。過多的信息會有混淆界面，減慢導航，甚至讓用戶放棄使用的風險。

也不要給太少的信息。如果用戶要猜測，鍊接指向哪裡，哪裡結束，他們很快就會對界面失去信心，離開網站。

設計師可以選擇一種方式來解釋導航選項：

1. 标簽

2. 标簽 圖

3. 标簽 圖 描述

選擇正确的方式，先評估用戶對标簽的熟悉程度

标簽

如果你用的标簽已被人熟知，那麼隻使用标簽就夠了。解釋“牛仔褲”、“短褲”、“襯衫”、“夾克”不需要使用大圖和長描述。

熟悉的條目，用标簽足夠了

保持标簽很值得稱道，但簡潔不應該以清晰為代價。縮寫和術語可是可以的，如：UX, BMI(body mass index)，前提是目标用戶熟悉它們。

有時，盡管術語本身沒有問題，但是前後文可能會讓它産生歧義。很多大型機構的網站包含一個固定水平導航來指向機構的主要業務，和一個随内容變化的豎直導航來指向下屬機構。這樣會出現重複的标簽。巴斯大學(University of Bath)，“研究”這一标簽出現在全局導航和左邊的豎直導航裡。

有很多下屬機構的大機構經常出現重複标簽

雖然這個會迷惑用戶，細緻地設計就可以避免歧義。上面這幅截圖，菜單上面的标題“探索部門”就是很好的提示，下面的“研究”是指部門的，而不是學校的。或者我們可以使用長一點的标簽，“關于我們”改成“關于此部門”之類的做法。

另一個給标簽語境的方法就是使用數字，來表示這個類别下面有多少個條目。

在某些菜單中，數字可以配合标簽一起使用

這樣的數字經常出現在動态過濾器中。

動态過濾器旁邊經常會出現代表條目的數字

很多用戶喜歡數字，但是要注意考慮什麼時候展示它們。例如，浏覽首頁的時候，用戶通常都不知道有多少内容。這時候給出有多少内容就可以說服用戶，他們會想，“這裡一定有我想要的。”

在首頁标注内容數量可以說服用戶

當然，如果内容不多的情況下，你一定不想公開這個數字。

同樣地，用戶浏覽分類，然後找到感興趣的主題，他們會查看相關的類别，即使隻有幾個條目，又或者有很多條目。但是，這個時候展示數字就減低浏覽速度，也會混淆界面。

在某些情境，統計數據會妨礙用戶‘

動态過濾器也會有同樣的情況。用戶會因為條目的數量而選擇某個類别嗎？如果是，那就标出數字就講得通。如果不是，那隻有那些你會去除，或者以灰色标注的類别旁邊會有個“0”。

要不，用戶選擇某一個類别，才顯示類别的條目數；或者在動态選擇器選擇類别，才顯示相應的條目數也是有用的信息。

圖标是另一種會出現在标簽旁邊的元素。精巧而又識别度高的圖标是很有用的附加物。無需解釋選項的區别，圖标就是很好的區别。下面的截圖中，我移走了菜單上的圖标，你會注意到标簽本身就可以解釋選項的意義。

’

标簽足夠了，但會花費一點時間去識别。

然而，加上圖标可以讓用戶更好地識别和區别選項。

圖标使得識别的過程變得更容易

但是，隻會圖标會也會讓人迷惑。即使圖标已經為大家所熟知，用戶還是不太确定究竟它代表什麼。

标簽 圖

對于熟悉的條目，标簽和圖标都很好用。對于特殊的條目，圖片就很有必要。例如，品牌名稱。下面的截圖裡，車都是以純文字出現在菜單。

品牌名稱隻有标簽是不足以被理解

我不知道“Tribeca”和“Legacy”分别代表什麼。标簽不足以讓我做出選擇，帶圖片的标簽可能是一個更好方案。

标簽 圖對于不熟悉的術語是個更好的方案

在導航上用圖片或圖标是一件很有趣的事。譬如描述特定的産品，“13-inch Macbook Pro”、 “Samsung Galaxy Note 3”，除了産品圖，沒有更好的方案。

但是描述一類類别就沒這麼簡單。在某些菜單中，圖标可以被用來描述類别。

’

在某些菜單中，圖标可以被用來描述類别

在另一些菜單中，會用真實的産品圖片來做這件事。

在某些菜單中，會用真實的産品圖片來描述類别

對于産品分類，圖标可能比圖片更适用。一個寫實圖标讓整個菜單變得更專業。

用真實的産品圖片還可能産生新的問題。用戶會下意識問，“為什麼這個産品可以代表這個類别？”、“這就是這個類别最好的産品？”、“我可以在這個網站找到其他産品嗎？”……如果他們點進去發現第一個産品就是菜單上面的那個，這種憂慮還會擴大。相反，圖标隻是代表一個産品類别，僅此而已。

圖标還是有一定的标準。如果畫得不好，會顯得很業餘。如果不能被辨認出來，會混淆用戶。所以當你無法保證圖标的專業性和可識别性，還是用圖片吧。

标簽 圖 描述

有時标簽 圖都不夠用。服務商提供一些複雜的方案，譬如銀行、保險經紀、ISPs，然後它們的産品名像這樣，“50 Plus”、“Web on the Go”。一對夫婦跟保險經紀談話，一個女孩在打電話，這樣的圖片無法描述服務商提供的服務。對于這種情況，幾行描述 标簽 圖才是最有效的方法。

複雜的産品就需要标簽 圖 描述，才能被理解

頭條、文章标題這類标簽，可能需要，也可能不需要圖和描述。

很多作家支持标題隻需要關鍵信息點，而且要盡量簡短。

建議：标題隻需要關鍵信息點，而且要盡量簡短

标題很簡短，也有關鍵信息，但是這樣的書寫風格有它的風險，而且并不适合所有的網站。

應不應該，或者怎麼樣寫描述。事實上BBC的标題是有描述的，上面那副圖隻是被我去掉而已。下面那幅圖是有描述，你會發現基本上都是頭條新聞的詳細叙述，沒有大量的新信息。

描述包含标題未傳達的信息

如果标題應該像上面那樣用關鍵詞來堆砌，那麼描述的意義并不大。因為隻閱讀标題也能達到引導文章的效果。

然而，隻有标題，或者用這種風格來寫标題不一定是最好的辦法。如果隻是簡短的新聞時間，BBC風格是一個不錯的選作。如果是一篇長文章，标簽 圖 描述會更吸引人。

下面這個标題更注重吸引人，然後再用幾行小字寫信息點。圖片可以設定基調。

标簽 圖 描述更能深度闡釋文章

從一個小片段了解文章并不困難。用标題抓住眼球，再用描述來闡釋文章，再配圖。這整個小片段給作者更多的空間去告訴讀者信息，并傳遞文章觀點。

那些關于标題的建議，讓它在網站之外也被理解。因為标題通常出現在搜索結果、社交媒體、或是其他文章裡面。有些作者會做得更多，為這個目的設計書寫模闆。

很多作者會嘗試讓标題更容易在其他地方被理解

但是在增添前後文的時候，注意不要增添多餘的信息。

上圖的标題就沒有提供足夠前後文，因為在網頁設計裡面，多欄式的版面可以出現在首頁、菜單、文章頁……并不局限于表格。所以，“表格可用性”這個額外增添的解釋，就是脫離了原文。其實不一定增添這樣一個東西，因為看文章的人大多知道這是在說什麼。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!