本文由江南大學(xué)設(shè)計(jì)學(xué)院研究生盧孩翻譯，作者：Anastasios Karafillis，查看原文

雖然導(dǎo)航作為用戶體驗(yàn)至關(guān)重要要的一部分，但它只是達(dá)到目的（找到內(nèi)容）的一種方式。用戶對(duì)內(nèi)容和導(dǎo)航有不同期望，內(nèi)容應(yīng)該是獨(dú)特、驚人或令人興奮的，而導(dǎo)航應(yīng)該盡可能地簡(jiǎn)單并且可被預(yù)測(cè)。

該系列的文章要分成兩部分，有四個(gè)有效簡(jiǎn)化導(dǎo)航的步驟。通過分析內(nèi)容的類型和數(shù)量，選擇并且仔細(xì)設(shè)計(jì)導(dǎo)航菜單的正確類型。

創(chuàng)建理想導(dǎo)航系統(tǒng)的四步驟

為了建立一個(gè)可用的導(dǎo)航系統(tǒng)，網(wǎng)頁設(shè)計(jì)師需要回答以下四個(gè)問題：

1. 如何才能最好地組織內(nèi)容？
2. 如何才能最好地解釋導(dǎo)航選擇？
3. 哪一種導(dǎo)航菜單類型是最適合的選擇？
4. 如何才能設(shè)計(jì)最佳的導(dǎo)航菜單？

前兩個(gè)問題涉及到內(nèi)容的結(jié)構(gòu)和標(biāo)簽，通常被稱為信息架構(gòu)。信息架構(gòu)師通常在站點(diǎn)地圖中將他們的工作成果可視化。

站點(diǎn)地圖描述網(wǎng)站的導(dǎo)航結(jié)構(gòu)。(圖像來源：Web Tuts)

然而，只為用戶提供站點(diǎn)地圖可能不是最好的用戶體驗(yàn)，在本系列的課程中將會(huì)詳細(xì)解釋這些原因。設(shè)計(jì)一個(gè)自定義的導(dǎo)航菜單也是重要的，可以適應(yīng)用戶的選擇，并以此來安排選項(xiàng)。因此，用戶可以輕松得尋找內(nèi)容，瀏覽內(nèi)容并跳躍式選擇。

當(dāng)回答了前面提及的第三和第四個(gè)問題時(shí)，這樣的導(dǎo)航菜單就能設(shè)計(jì)成功。這兩個(gè)問題涉及到導(dǎo)航體驗(yàn)中的交互設(shè)計(jì)。前兩個(gè)問題將在第一部分解答，后兩個(gè)問題將在第二部分解答。

結(jié)構(gòu)化的內(nèi)容

正確的結(jié)構(gòu)化一個(gè)網(wǎng)站的內(nèi)容，首先要考慮的是用戶搜索信息的方式，然后按照這些偏好來結(jié)構(gòu)化內(nèi)容。

用戶是如何尋找信息的呢？

當(dāng)一個(gè)用戶正在尋找——車輛、食譜、金融服務(wù)、服裝類目、新聞文章、健身鍛煉、娛樂食譜或是任何其他物品或信息時(shí)——他們可能知道或不知道他們正在尋找的物品的確切名字。如果我們假設(shè)用戶總是知道他所要搜查的事物的準(zhǔn)確名稱，那么我們需要提供大型的完整索引（從A到Z）或是簡(jiǎn)單地讓他們?cè)谒阉骺蛑休斎耄源藖碜屗麄冋业剿氖挛?。?dāng)然，事情往往不是這么簡(jiǎn)單的。更詳細(xì)的解釋在第二部分展示。

即使用戶知道他們要找的事物的名稱，從A到Z的完整索引和搜索框存在固有的交互問題，讓它們作為導(dǎo)航主要或唯一的方式是不足夠的。此外，用戶通常是不知道所搜事物的準(zhǔn)確名稱的，他們甚至不關(guān)心類目或物品的名稱；相反，他們?cè)谒阉鲿r(shí)會(huì)有一個(gè)和所尋事物相關(guān)的關(guān)鍵詞。

指導(dǎo)用戶到達(dá)正確內(nèi)容是第一步，接著，在網(wǎng)站上區(qū)分內(nèi)容的類別。

元數(shù)據(jù)是導(dǎo)航系統(tǒng)的基礎(chǔ)

關(guān)于內(nèi)容條目或內(nèi)容片段的信息通常被稱為元數(shù)據(jù)——這是關(guān)于信息內(nèi)容的信息。

不去看細(xì)節(jié)，內(nèi)容條目可能屬于不同的元數(shù)據(jù)類別。不管是一篇新聞的政治焦點(diǎn)，一個(gè)顯示器的顯示尺寸，一段視頻的導(dǎo)演，一件襯衫的領(lǐng)型，還是健身運(yùn)動(dòng)的難度，這些都是不同的元數(shù)據(jù)。當(dāng)然，多個(gè)條目也可以分享相同類別，如價(jià)格、知名度和出版日期。

用戶可以通過這些元數(shù)據(jù)類型來瀏覽內(nèi)容。然而，正如我們看到的，給用戶提供瀏覽內(nèi)容的全部方式是不必要或沒用的。這樣做得話將會(huì)讓界面變得雜亂，瀏覽速度減慢，將導(dǎo)航過程復(fù)雜化，更糟的是，這樣會(huì)讓用戶覺得混淆、疲勞和煩惱，然后他們就會(huì)放棄網(wǎng)站。

仔細(xì)考慮是否或是在哪個(gè)階段向用戶展示類別。

元數(shù)據(jù)的三種類別

根據(jù)是否呈現(xiàn)或何時(shí)呈現(xiàn)元數(shù)據(jù)類別，將元數(shù)據(jù)分成三組：重要的，可選的，無關(guān)緊要的。

信息架構(gòu)的挑戰(zhàn)是：根據(jù)目標(biāo)群眾，網(wǎng)站目標(biāo)和內(nèi)容數(shù)量將類別分為重要的，可選的和無關(guān)緊要的。然而，一旦你選定了一個(gè)合適的分類，一些簡(jiǎn)單的規(guī)則將幫助你去決定什么時(shí)候顯示什么類別。

重要類別

對(duì)目標(biāo)用戶來說，最重要的是重要類別。這些類別是少見的，但在每一個(gè)項(xiàng)目中至少會(huì)有一個(gè)重要類別，它簡(jiǎn)化了設(shè)計(jì)師的工作和用戶的導(dǎo)航體驗(yàn)。

確定重要類別

食譜的元數(shù)據(jù)類別也許包含“菜式”，“主要成分”，“特殊飲食”，“場(chǎng)合”，“烹飪”，“料理時(shí)間”。在這些類別中，“菜式”是最重要的。不是每個(gè)人都是一個(gè)特殊的飲食者，不是每次吃飯都是在特殊場(chǎng)合中，但是幾乎所有人在每一天都是分開吃開胃菜、早餐、主菜、配菜、沙拉和甜點(diǎn)等。

對(duì)目標(biāo)用戶來說，菜式是最重要的，這應(yīng)該作為第一個(gè)類別呈現(xiàn)給他們。

菜式是食譜中重要的元數(shù)據(jù)類別。（圖像來源：Our Best Bites）

然而，如前所述，目標(biāo)受眾或是網(wǎng)站目標(biāo)可能影響類別的分類，特別是在理想的網(wǎng)站中。

例如，在主流的食譜網(wǎng)站中，用戶可能看不到烹飪法的相關(guān)內(nèi)容。但是如果一個(gè)網(wǎng)站搜集來自世界各地受歡迎的美食的烹飪方法，“烹飪法”對(duì)目標(biāo)受眾來說可能是非常重要的類別，那么就要考慮在“菜式”之外是否再增加“烹飪法”或是用“烹飪法”取代“菜式”成為唯一重要的類別。不管怎樣，因?yàn)椤芭腼兎ā笔蔷W(wǎng)站的主題，首先顯示它（而不是“菜式”）會(huì)更適合。

網(wǎng)站有不同重要類別的元數(shù)據(jù)。(圖像來源：Recipes by Nation)

安排重要的類別

以上的例子解釋了只有單一重要類別的情況。然而，一組條目中可能包含多個(gè)重要的類別。

對(duì)于衣服來說。一個(gè)重要的類別可能是衣服的類型，像“襯衫”，“褲子”，“鞋子”，“毛衣”。另一個(gè)重要但相互排斥的類別是性別，“男”和“女”。第三個(gè)類別可能是和場(chǎng)合有關(guān)，如“休閑服”，“工作服”，“禮服”。我們可能還會(huì)有更多的重要類別，但是我們先將它們放在一邊。

然后，問題是如何最好地調(diào)解或解決潛在多個(gè)重要類別之間的沖突。

首先，將全部重要類別放在相同的最高層級(jí)上似乎是符合邏輯的。畢竟，它們都是重要的。但是，要做得卻是相反的。重要類別最好是在逐增的層級(jí)上一個(gè)接一個(gè)得顯示。為了更好地理解這點(diǎn)，我們來看看下圖中網(wǎng)站的信息架構(gòu)。

水平導(dǎo)航通常會(huì)列出網(wǎng)站提供的產(chǎn)品類型。（圖像來源：LL BEAN）

水平導(dǎo)航條列出了LL Bean可用產(chǎn)品的類型，像“家居裝飾”，“獵具和漁具”，“戶外用品”，“鞋類”和“衣服”。然而，設(shè)計(jì)師為“衣服”做了一些改變。衣服應(yīng)該按“男”、“女”分，而不是在水平菜單中列出一打的衣服類別，設(shè)計(jì)師們用更精簡(jiǎn)的分類來當(dāng)做重要類別。用戶先從“男”、“女”簡(jiǎn)單得開始，再在下拉菜單中看到所有的衣服類別。這使水平導(dǎo)航有更多的選項(xiàng)。

為主要的導(dǎo)航欄騰出更多空間，在精簡(jiǎn)的分類下使用重要類別。（圖像來源：LL Bean）

這提出了一個(gè)稍微不一致的信息架構(gòu)，但是設(shè)計(jì)師們接受了它并在水平導(dǎo)航條上騰出了更多的空間。在這種情況下，只要這種不一致不會(huì)混淆用戶，這種解決方案就很好。然而，將類別“鞋子”（將鞋子分為男鞋和女鞋是可以理解的）也放在同樣的水平導(dǎo)航上并不是一個(gè)明智的決定。

重要類別應(yīng)該逐個(gè)呈現(xiàn)，而不是一個(gè)挨著一個(gè)顯示。（圖像來源：LL Bean）

這種解決方案的問題是兩個(gè)重要類別被放在相同的水平上?！靶印行焙汀澳行浴印倍际侵苯勇窂?。因?yàn)閮蓚€(gè)類別都是重要的，用戶都必須看過。但是，由于它們被放在同一層上，用戶要在兩者之間做出選擇，這破壞了兩種類別都是重要的假設(shè)。因此，這兩種路徑要?jiǎng)h掉一種——或許應(yīng)該是“鞋子→男鞋”需要?jiǎng)h除。

可選的類型

如果存在多個(gè)重要類別，類別中也許不需要其它條目。一個(gè)網(wǎng)站沒有超過一打的服裝條目，設(shè)計(jì)師可以讓用戶簡(jiǎn)單得選擇是否看男性或是女性的全部服裝。然而，在許多情況卻下是相反的。即便所有重要類別都已經(jīng)選定，仍然還有大量的條目存在著。因此，額外的類別應(yīng)該允許用戶去進(jìn)一步過濾。這就是可選的類別。

可選類別對(duì)某些而不是全部用戶來說是重要的。例如，“汽車”的兩個(gè)元數(shù)據(jù)類別可能是“車門的數(shù)量”和“燃油類型”。有些人對(duì)燃油類型很關(guān)注但是不關(guān)心有多少個(gè)車門。其他人卻相反。

在可選類別中進(jìn)行優(yōu)先級(jí)排序

一般來說，在用戶已經(jīng)選擇了重要類別后需要顯示可選類別。

但是，在許多零售的網(wǎng)站中，像時(shí)尚和電子零售店，一種產(chǎn)品類型（一種重要類別）的品牌列表（一種可選類別）在同一層次上。

重要類別和可選類別應(yīng)該在不同水平上顯示。（圖像來源：Flipkart）

這種方法的問題是，如果用戶在一個(gè)服裝網(wǎng)站上選擇了一個(gè)品牌，他們可能要面對(duì)成百上千的物品，然后他們必須選擇一種衣服的類型來縮小范圍。因此，將可選類別和重要類別放在相同的層次上就像給重要類別創(chuàng)建了沉余的路徑，增加了選擇的復(fù)雜性，并且使導(dǎo)航變得雜亂。

提供許多過濾選擇是一個(gè)好方法，不是從一開始就給用戶提供很多導(dǎo)航選項(xiàng)，先給他們提供一些重要選擇，一旦他們選完重要類別，再提供可選項(xiàng)。

因此，在以上例子中，從這些層級(jí)中移除品牌，讓用戶先只能選擇一種類型的衣服可能會(huì)好些。在接下來的一個(gè)層級(jí)上，再給用戶提供品牌的可選項(xiàng)。

在用戶已經(jīng)選擇了重要類型后，才能看見品牌可選項(xiàng)。（圖像：Flipkart）

動(dòng)態(tài)過濾選擇

如前所述，重要類別應(yīng)該逐級(jí)顯示，但可選類別最好在同一層級(jí)上全部顯示。

唯一的例外是，如果可選類別是相互排斥的，它們應(yīng)該在重要類別的同一個(gè)菜單中的下一個(gè)層級(jí)中顯示。但是，如果可選類別可以合并，它們應(yīng)該實(shí)現(xiàn)動(dòng)態(tài)過濾選擇。

在截屏圖片中，注意面包屑導(dǎo)航中的重要類別，可選類別呈現(xiàn)為動(dòng)態(tài)過濾選擇。

可選類別很可能可以合并，它們應(yīng)該實(shí)現(xiàn)動(dòng)態(tài)過濾選擇。（圖像來源：Sears）

重要類別和可選類別的區(qū)別在下文進(jìn)行解釋。每個(gè)類別都是對(duì)可用內(nèi)容的過濾選擇，動(dòng)態(tài)過濾選擇之所以說是動(dòng)態(tài)的，是因?yàn)樗鼈冊(cè)试S用戶選擇或是改變動(dòng)態(tài)變化的選項(xiàng)。相反的，在傳統(tǒng)的層級(jí)導(dǎo)航系統(tǒng)中，用戶不得不從一個(gè)層級(jí)到另一個(gè)層級(jí)上去選擇選項(xiàng)。正如上文所述，如果這是個(gè)重要類別，這就不是問題，但是如果是可選類別，情況就有點(diǎn)不同了。

當(dāng)用戶在尋找一件襯衫時(shí)，許多可選元數(shù)據(jù)類別發(fā)揮作用：“品牌”，“領(lǐng)型”，“袖長(zhǎng)”，“織物”，“花樣”，“口袋”，“折扣”，“價(jià)格”，“評(píng)級(jí)”，“流行”等等。準(zhǔn)確地知道這些類別中哪個(gè)是用戶感興趣的（類別）是困難的。可能有人對(duì)這些類別全都不感興趣，或是只喜歡一兩個(gè)，或是全部都喜歡。

設(shè)計(jì)師們應(yīng)該給用戶在相同層級(jí)上提供一系列動(dòng)態(tài)的，可選的選項(xiàng)，而不是給用戶呈現(xiàn)全部的可選分類，也不管用戶對(duì)他們是不是感興趣。因此，用戶應(yīng)該可以選擇他們喜歡的類別。

相反的，如下所示的網(wǎng)站，重要類別和可選類別并沒有清晰地區(qū)分開。它顯示了所有類別（還包括重要的類別）。

重要類別不應(yīng)該作為動(dòng)態(tài)選擇項(xiàng)。（圖像來源:Nike）

這種差別帶來幾個(gè)問題。

首先，它占據(jù)了垂直空間，將其他的可選項(xiàng)下推，要求用戶頻繁地滾動(dòng)頁面來選擇選項(xiàng)。

第二，動(dòng)態(tài)選擇面板作為一個(gè)重要的小組件：它很強(qiáng)大，但是資源太多而且雜亂。每當(dāng)用戶選擇了一個(gè)選項(xiàng)，對(duì)應(yīng)的列表就會(huì)刷新。這種反饋是有道理的，但這并沒有讓交互過程更快。讓用戶在傳統(tǒng)菜單中選擇重要選項(xiàng)能更簡(jiǎn)單快捷得達(dá)到同樣的效果。事實(shí)上，Nike的設(shè)計(jì)師們提供了這樣的菜單，允許我們?cè)谙嗤慕缑嬷衼頊y(cè)試這種假設(shè)，比較兩種交互模型的速度和效率。

重要類別在傳統(tǒng)導(dǎo)航菜單中最好實(shí)現(xiàn)。（圖像來源：Nike）

相互排斥的類別

在可選類別可能結(jié)合的情況下，動(dòng)態(tài)過濾選擇就是必須的。如果可選類別是相互排斥的，應(yīng)該在主導(dǎo)航菜單中的下一層級(jí)上顯示。

在下面的截屏中，每日快報(bào)在第一層級(jí)上向用戶詢問重要的問題——選擇新聞的話題：像“金融”，“娛樂”，“生活方式”。在主頁上的可選區(qū)域，用戶可以看到這個(gè)話題的最新新聞。每個(gè)用戶都希望查看三四個(gè)最新新聞。對(duì)于那些想要深入研究特定的主題的人，下一級(jí)欄目在下一層級(jí)中顯示。

相互排斥的可選類別最好在額外的主要導(dǎo)航菜單中顯示。（圖像來源：Daily Express）

上圖的下一級(jí)菜單可以認(rèn)為是相互排斥的類別，因?yàn)閵蕵讽?xiàng)目通常在書本，電影，電視等等媒體上顯示。當(dāng)然，合并也是可能的，一本書可以拍成電影或是話劇。但是用戶想要看到這樣的合并嗎？如果是用戶希望的，動(dòng)態(tài)過濾選擇是有意義的。

請(qǐng)注意這個(gè)問題的答案主要取決于類目的數(shù)量和多樣性，很少考慮項(xiàng)目的類型和特定目標(biāo)受眾的利益。

比如，用戶可能不會(huì)找一份中式低脂并且還是圣誕主題的早餐食譜。相反的，他們將會(huì)尋找可能是中式的，可能是低脂的，或可能是圣誕主題的早餐食譜。所以，可選的食譜類別一般不太可能合并。然而，如果一個(gè)網(wǎng)站有成千上萬的食譜，而目標(biāo)用戶有非常特別的喜好，給他們更強(qiáng)大的動(dòng)態(tài)過濾選擇將會(huì)更有幫助。

在一個(gè)有龐大而多樣內(nèi)容的網(wǎng)站中給用戶的特定興趣提供有保證的動(dòng)態(tài)過濾選擇。（圖像來源：Food52）

最后，考慮第三組元數(shù)據(jù)類別。

無關(guān)緊要的類別

目標(biāo)受眾不關(guān)心無關(guān)緊要類別中的內(nèi)容。但是，這些類別對(duì)整體的用戶體驗(yàn)而言并不是沒關(guān)系的。

文章的兩類元數(shù)據(jù)可能是“字?jǐn)?shù)統(tǒng)計(jì)”和“圖像統(tǒng)計(jì)”。如果這些類別在數(shù)據(jù)庫中以列顯示，內(nèi)容策略專家將在類別中檢測(cè)這些文章，然后推斷出哪些文章太長(zhǎng)或是缺少圖像，從而解釋為什么用戶在沒有閱讀完這些文章就離開了網(wǎng)站。內(nèi)容策略專家將會(huì)和設(shè)計(jì)師或委托人討論這些問題，然后提升內(nèi)容質(zhì)量。雖然，這些類別可以給設(shè)計(jì)師帶來有價(jià)值的信息，但是用戶不會(huì)使用“字?jǐn)?shù)統(tǒng)計(jì)”或是“圖像統(tǒng)計(jì)”來瀏覽網(wǎng)站。

簡(jiǎn)而言之，無關(guān)緊要的類別不應(yīng)該出現(xiàn)在網(wǎng)站上。它們需要被忽略，不然會(huì)擾亂界面，也許會(huì)使用戶困擾。不過，大量的無關(guān)緊要的內(nèi)容整合在一起可以當(dāng)成一個(gè)可選類別。比如，在瀏覽文章時(shí)，“文字計(jì)數(shù)”就是一個(gè)無關(guān)緊要的類別。但是下面顯示的這個(gè)網(wǎng)站積累了這么多的文章，設(shè)計(jì)師認(rèn)為為用戶更好得過濾內(nèi)容而增加“文章長(zhǎng)度”的可選項(xiàng)是必須的。

大量不相關(guān)的元數(shù)據(jù)類型合并能變成一個(gè)可選的類別。（圖像來源：Time）

上面展示食譜和服裝的網(wǎng)站很合適解釋優(yōu)先級(jí)的微妙之處和重要性，因?yàn)樗鼈兺ǔＰ枰S多元數(shù)據(jù)類別。但是它們不說明很多設(shè)計(jì)師在某一時(shí)刻都會(huì)面臨的問題，特別是在為一個(gè)公司進(jìn)行設(shè)計(jì)時(shí)，設(shè)計(jì)師面臨的問題會(huì)更加復(fù)雜。

公司產(chǎn)品類別

大多數(shù)食譜網(wǎng)站不加選擇地任意收集食譜，并將它們留給設(shè)計(jì)師去分類。但是公司通常有自己內(nèi)部的產(chǎn)品分類方法，這可能會(huì)導(dǎo)致需求沖突。

首先考慮的重要元數(shù)據(jù)類別是汽車，你可能會(huì)有一個(gè)根據(jù)大小或是生活方式的類別，名稱可能是“小汽車”，“貨車”，“跑車”，“轎車”，“豪華轎車”等等。這些類別是至關(guān)重要的，因?yàn)槊糠N類型的汽車服務(wù)于一種特定的生活方式，這對(duì)每一個(gè)駕駛這種車的人都至關(guān)重要。例如，小汽車在城市里簡(jiǎn)潔小巧且便宜、易于駕駛和?？?。貨車有很大的空間，非常適合家庭。而跑車迎合了另外一種截然不同的生活方式。

然而，許多汽車公司用他們內(nèi)部的方式為自己的汽車分類。下圖所示的BMW，使用以數(shù)字為基礎(chǔ)的分類方法（1,3,5,7等）。

某些時(shí)候，一個(gè)公司的分類有很好的效果。（圖像來源：BMW）

但是一個(gè)公司內(nèi)部的分類方案會(huì)導(dǎo)致可用性問題。BMW的方法的確讓信息架構(gòu)更加有用。這種方法為大眾所熟悉，根據(jù)汽車的大小，數(shù)字有邏輯地變化著，或多或少符合小汽車，轎車，豪華轎車等的分類。在這種情況下，除了公司的分類方法，其他方法會(huì)使事物分離從而難以理解，而不是在幫助用戶。

下一個(gè)例子的內(nèi)部分類方案并不好。Opel同樣根據(jù)其內(nèi)部的命名規(guī)則列出了它的汽車樣模。

對(duì)用戶來說，內(nèi)部分類并不總是顯而易見的。（圖像來源：Opel）

問題是這個(gè)產(chǎn)品線的結(jié)構(gòu)并不清晰，用戶不得不滑動(dòng)產(chǎn)品線去看全部的樣模，但是這方式并不容易（這個(gè)問題涉及更多的交互）。用戶沒有簡(jiǎn)單的方式來了解產(chǎn)品之間的相互關(guān)系，因此，他們沒有簡(jiǎn)單的方法根據(jù)自己的喜好進(jìn)行篩選。

如果內(nèi)部分類方法不好用，可以優(yōu)先考慮一種為人熟知的外部分類方法。

注意Volkswagen（如下）公司有自己的命名方式和車模分類方法：“捷達(dá)”，“大眾”，“途銳”等等。但是這個(gè)公司更加重視一種常見的外部分類方案。這樣的結(jié)果是：菜單非常容易理解，并且能讓用戶關(guān)注他們感興趣的一部分。

優(yōu)先考慮常見的分類方案能讓導(dǎo)航菜單易于理解。（圖像來源：Volkswagen）

當(dāng)然，公司高層可能不喜歡自己公司的內(nèi)部分類方法被棄之不用。然而，作為一個(gè)信息架構(gòu)師，職責(zé)就是讓網(wǎng)站中的內(nèi)容易于理解，所以你有責(zé)任去和高層溝通這個(gè)方案。

解釋導(dǎo)航選項(xiàng)

根據(jù)用戶喜好來構(gòu)建導(dǎo)航選項(xiàng)是簡(jiǎn)化網(wǎng)站信息架構(gòu)的重要一步，但是如果用戶在第一時(shí)間不能理解選項(xiàng)，再精致復(fù)雜的結(jié)構(gòu)都是無用的。所以，花些時(shí)間考慮如何最好地解釋導(dǎo)航選項(xiàng)。

只給用戶他們需要的信息，任何更多的信息都有使用戶疲勞、混亂界面和延遲導(dǎo)航的風(fēng)險(xiǎn)，甚至?xí)屗麄兎艞壃F(xiàn)在的選擇。

不要給他們太多的信息，如果用戶會(huì)猜測(cè)鏈接指向，然后對(duì)鏈接到的頁面很失望，他們會(huì)對(duì)界面失去信心，接著就會(huì)離開網(wǎng)站。

設(shè)計(jì)師可以選擇三種方法來解釋導(dǎo)航選項(xiàng)：

1. 標(biāo)簽；
2. 標(biāo)簽和圖片；
3. 標(biāo)簽，圖片和描述。

選擇正確的方法，評(píng)估目標(biāo)受眾最熟悉的標(biāo)簽。

標(biāo)簽

如果使用的標(biāo)簽是為人熟知的，那它們就已經(jīng)足夠了。大張的圖片或是長(zhǎng)篇的描述沒有必要去解釋什么是“牛仔褲”，“短褲”，“襯衫”，“夾克”。

為人熟知的項(xiàng)目用標(biāo)簽足以。（圖像來源：Rock Revival）

同時(shí)，推薦使用短標(biāo)簽。標(biāo)簽可以簡(jiǎn)短，但是不能是以表意不清為代價(jià)。像UX和BMI的縮寫和術(shù)語，只要是目標(biāo)用戶熟悉就能較好得起作用。有時(shí)候單個(gè)術(shù)語是容易理解的，但是放在上下文中，可能就會(huì)模糊不清。許多大型組織的網(wǎng)站都有固定的指向主要工作的水平導(dǎo)航，和指向次要工作的與上下文相關(guān)的垂直導(dǎo)航。這可能會(huì)導(dǎo)致重復(fù)標(biāo)簽。巴斯大學(xué)（如下圖），在頂部的全局水平菜單和左側(cè)狹窄的垂直菜單上都有標(biāo)簽“Research”。

有許多子部門的大型組織更傾向于重復(fù)標(biāo)簽。（圖像來源：巴斯大學(xué)）

雖然這可能會(huì)迷惑用戶，但仔細(xì)的設(shè)計(jì)可以避免歧義。在上面的截圖中，菜單標(biāo)題“探索部門”是一個(gè)很好的指示，但在這之下的“Research”標(biāo)簽指向的是部門，而不是整個(gè)大學(xué)。絕對(duì)肯定的是，可以加長(zhǎng)“About Us”的標(biāo)簽，改為“About This Department”。

在一些菜單中，一個(gè)類別的條目數(shù)量用標(biāo)簽顯示。（圖像來源：BJ’s）

這些數(shù)字通常在動(dòng)態(tài)過濾選擇面板中顯示。

在許多有動(dòng)態(tài)過濾選擇的界面上，類別中的項(xiàng)目數(shù)量通常用一個(gè)值來顯示。

雖然許多用戶喜歡看這些數(shù)字，但設(shè)計(jì)師還是要仔細(xì)考慮何時(shí)去顯示它們。比如，通過查看主頁來猜測(cè)一個(gè)網(wǎng)站有多少內(nèi)容是困難的。所以，明確顯示有多少內(nèi)容可以贏得用戶，他們可能會(huì)想“對(duì)的，這個(gè)網(wǎng)站有我要的東西?！?/p>

主頁上量化的內(nèi)容讓用戶更容易操作。（圖像來源：O’Reilly）

當(dāng)然，如果你的網(wǎng)站還沒有內(nèi)容，你可能并不想透露這樣一個(gè)數(shù)字。

同樣的，當(dāng)用戶瀏覽某一類別并對(duì)其一特定主題感興趣，他們會(huì)想要探索相關(guān)的類別，即使不相關(guān)的類別包含更多條目而這個(gè)類別只有很少的東西。當(dāng)然，顯示的數(shù)字會(huì)拖慢瀏覽器加載速度，擾亂界面。

在某種情況下，數(shù)據(jù)會(huì)阻礙用戶。（圖像來源：Digistore，教育部，新西蘭）

這種情況同樣適用于動(dòng)態(tài)過濾選擇面板。用戶會(huì)根據(jù)所包含的條目數(shù)量來選擇類別嗎？如果是這樣，這些顯示的條目數(shù)量就是有意義的。如果不是這樣，你應(yīng)該提供的唯一的一種反饋類型是顯示灰色或刪除零值的項(xiàng)。

另外，在動(dòng)態(tài)過濾選擇的情況下，顯示條目數(shù)量是有用的信息。一旦用戶選擇了一個(gè)類別，顯示這個(gè)類別的數(shù)量。

圖標(biāo)是另一種有時(shí)會(huì)附加到標(biāo)簽上的元素。當(dāng)圖標(biāo)制作精良和易于識(shí)別時(shí)，它們將是非常有用的補(bǔ)充。當(dāng)沒有必要去解釋用戶的選項(xiàng)時(shí)，圖標(biāo)能更容易區(qū)分不同的選項(xiàng)。在下面的截屏中，我將圖標(biāo)從菜單條目中刪除。注意到標(biāo)簽還是足以解釋每個(gè)選項(xiàng)，每個(gè)人都知道什么是“汽車”，“房車”，“摩托車”和“卡車”。

有時(shí)候標(biāo)簽就足夠了，但是需要更多的時(shí)間來識(shí)別。（圖像來源Mobile.de）

將圖標(biāo)放在標(biāo)簽旁邊能讓用戶更容易得理解和區(qū)別不同的選項(xiàng)。

圖標(biāo)讓用戶更容易理解和區(qū)別不同的選項(xiàng)。（圖像來源Mobile.de）

但是，單獨(dú)的圖標(biāo)就會(huì)引起混亂。即使這個(gè)圖標(biāo)是為人熟知的，用戶可能會(huì)不確定它在一個(gè)特定上下文中代表的意思。

標(biāo)簽和圖片

標(biāo)簽和圖標(biāo)在為人熟知的事物上起到很大作用。但是對(duì)于不常見的事物，圖像就是必須的。想想品牌名稱。在以下截屏中，汽車模型的名稱在標(biāo)簽中是純文本格式的文字。

理解品牌名稱需要更多信息（不僅是標(biāo)簽）。（圖像來源：Subaru）

但是，我不知道什么是“Tribeca”或“Legacy”。標(biāo)簽還不足以幫助我來決定去探索哪些產(chǎn)品。像下圖所示，標(biāo)簽和圖片是一個(gè)更好得解決方式。

標(biāo)簽和圖片是解釋不熟悉術(shù)語的一種好方式。（圖像來源：Mazda）

什么時(shí)候在導(dǎo)航里使用圖像或是圖標(biāo)是一個(gè)有意思的問題。顯而易見的，解釋一個(gè)非常具體的項(xiàng)目，像“13-inch Macbook Pro”或是“Samsung Galaxy Note 3”，沒有什么比實(shí)際產(chǎn)品圖片更好的了。解釋一個(gè)產(chǎn)品類別并不簡(jiǎn)單。在一些菜單中，這些分類在進(jìn)行解釋時(shí)會(huì)使用圖標(biāo)。

在一些菜單中，用圖標(biāo)來解釋分類。（圖像來源：Flipkart）

在其他菜單里，這些相同的分類使用實(shí)際產(chǎn)品的照片來解釋這個(gè)類別。

在一些菜單中，使用實(shí)際產(chǎn)品的圖像來解釋這個(gè)類別。（圖像來源：Target）

對(duì)于產(chǎn)品類別來說，圖標(biāo)比圖片更加適合。使用制作精良的圖標(biāo)使菜單看上去顯得更加專業(yè)。并且，使用一個(gè)產(chǎn)品來代表這個(gè)產(chǎn)品類別可能會(huì)下意識(shí)地提升用戶的疑問。“為什么這個(gè)特殊的產(chǎn)品代表了這個(gè)類別呢？”“這個(gè)產(chǎn)品是他們最好的嗎？”“產(chǎn)品的范圍是以這個(gè)特定的項(xiàng)目為中心的嘛？”“如果我不是找這種物品，這對(duì)我來說就不是一個(gè)好網(wǎng)站?！比绻脩舻谝谎劭吹降纳唐奉悇e和他們?cè)诓藛沃锌吹降囊粯訒r(shí)，這種憂慮可能會(huì)加強(qiáng)。相反，圖標(biāo)能不多不少地簡(jiǎn)單表述一個(gè)類別中包含某類產(chǎn)品。

不過，圖標(biāo)的技巧必須達(dá)到某種標(biāo)準(zhǔn)。如果圖標(biāo)沒有畫好，看起來就會(huì)很不專業(yè)。并且，如果它不容易辨認(rèn)，它甚至?xí)煜脩?。所以，圖標(biāo)更適合產(chǎn)品類別，但是如果你沒有信心將圖標(biāo)做得專業(yè)和容易辨認(rèn)，你最好使用圖片。

標(biāo)簽，圖片和描述

有時(shí)候，標(biāo)簽和圖標(biāo)還不足以解釋產(chǎn)品。許多服務(wù)提供商都有復(fù)雜的解決方式，像銀行、保險(xiǎn)服務(wù)公司和因特網(wǎng)服務(wù)提供商，經(jīng)常給他們的產(chǎn)品命名為“50+”和“活躍網(wǎng)站”。已婚夫婦和代理的對(duì)話，或是一個(gè)女孩在講電話的照片也許還不足以解釋提供商的服務(wù)。對(duì)于此類產(chǎn)品，幾行的描述和標(biāo)簽，再加上圖片會(huì)對(duì)用戶很有幫助。

復(fù)雜產(chǎn)品也許需要標(biāo)簽、圖片和描述才能理解。（圖像來源：Naspa）

標(biāo)題和文章題目是不同的標(biāo)簽，標(biāo)題可能需要附帶圖片和描述，而文章題目可能不需要。

許多作者建議前置標(biāo)題要有重要信息，并且保持標(biāo)題盡可能的短。

一種常見的建議是保持短標(biāo)題，并且將重要信息前置。（圖像來源：BBC）

雖然上面的標(biāo)題簡(jiǎn)短而有重點(diǎn)，但是這種風(fēng)格并不適合每一個(gè)網(wǎng)站。

第一個(gè)問題是，是否要有描述語句和如何去寫描述。BBC的頭條標(biāo)題本來也有描述語句，在上圖中，我將它們刪除，就留下孤單的頭條標(biāo)題。在下圖中，我將描述語句恢復(fù)，你可以注意到這些語句基本上都是冗長(zhǎng)乏味的，沒有一些新信息。

描述語句應(yīng)該傳達(dá)的是頭條標(biāo)題還沒有表述的信息。（圖像來源：BBC）

如果頭條標(biāo)題里面就都是關(guān)鍵信息了，那么描述語句就不再需要。因?yàn)橛脩粼陂喿x完標(biāo)題后就可以點(diǎn)擊鏈接到文章了，再閱讀多余沒有新意的描述語句只為放緩閱讀速度。

但是，單獨(dú)顯示頭條標(biāo)題或是用這種方式寫標(biāo)題通常不太好或甚至是不明智的。如果一篇文章只是簡(jiǎn)單地報(bào)道一個(gè)事件，那么像BBC這樣的標(biāo)題是一個(gè)好選擇。但是如果文章有更多的細(xì)節(jié)，那么標(biāo)題、圖片和描述將會(huì)更有效、更迷人。

下面截圖中的標(biāo)題比內(nèi)容更吸引人，關(guān)鍵信息被分在下面兩行。同時(shí)，旁邊的圖片為文章定下了基調(diào)。

標(biāo)題、圖片和描述通常是深入解釋新聞的最好方法。（圖片來源：World）

從小片段中了解這篇文章是講什么的并不困難。使用標(biāo)題作為焦點(diǎn)，使用描述來解釋文章，并用圖片來為文章定調(diào)，整個(gè)片段給了不僅能吸引用戶，也傳達(dá)了文章的觀點(diǎn)。

最后，通常需要仔細(xì)思考頭條標(biāo)題，這樣它們出現(xiàn)在網(wǎng)站外也能被理解。畢竟，標(biāo)題能出現(xiàn)在其他媒體或是文章的搜索結(jié)果中。一些作者甚至為了這個(gè)目的而去設(shè)計(jì)公式。

許多作者嘗試寫出在其他網(wǎng)站上顯示時(shí)也能被易于理解的標(biāo)題。（圖像來源：Baymard Institute）

在標(biāo)題中添加信息時(shí)，小心不要?jiǎng)?chuàng)建沉余信息。

上圖中的標(biāo)題沒有提供足夠的上下文信息，因?yàn)檫@個(gè)網(wǎng)站是關(guān)于網(wǎng)頁設(shè)計(jì)的，并且多欄布局在主頁、文章等中起作用，而不局限在表單上。所以，“表單字段的可用性”主要是在來源網(wǎng)站上增加上下文。適應(yīng)外部環(huán)境的標(biāo)題并不總是必須的，因?yàn)樗褜み@些標(biāo)題的人更渴望去提供自己的上下文。

搜索引擎開發(fā)者明白，如果搜索結(jié)果不能滿足用戶需求，那么用戶最終會(huì)放棄它們。所以，他們?yōu)榱颂岣咚阉鹘Y(jié)果的相關(guān)性和成功率不斷工作著，不管是通過添加豐富的片段、圖片、預(yù)覽還是簡(jiǎn)單得改進(jìn)算法——也就是說，添加上下文。同樣的，如果在其他文章的推薦讀物中出現(xiàn)這篇文章，這篇文章需要提供必要的上下文。最后，在社會(huì)媒體中，個(gè)人分享的標(biāo)題或是有眾多粉絲的品牌不太可能引起歧義。

總結(jié)

信息架構(gòu)——內(nèi)容結(jié)構(gòu)化并配有標(biāo)簽——是可用導(dǎo)航的基礎(chǔ)。設(shè)計(jì)師通過結(jié)構(gòu)化內(nèi)容來有效簡(jiǎn)化網(wǎng)站的信息架構(gòu)，為了讓目標(biāo)受眾能進(jìn)行更好地選擇，減少或增添選項(xiàng)，并解釋這些選項(xiàng)來最大限度地減少用戶的認(rèn)知負(fù)荷。

本文中給出的建議在以下兩個(gè)列表中進(jìn)行總結(jié)，分別是“結(jié)構(gòu)化內(nèi)容”和“標(biāo)簽項(xiàng)”。

結(jié)構(gòu)化內(nèi)容

1. 搜集并且分類導(dǎo)航所需的元數(shù)據(jù)類型。
2. 將元數(shù)據(jù)分為重要的，可選的和無關(guān)緊要的類別。重要類別對(duì)所有目標(biāo)受眾都很重要，可選類別對(duì)一些人來說是重要的，無關(guān)緊要類別對(duì)目標(biāo)受眾來說是不重要的。
3. 只將一個(gè)重要類別放在第一層級(jí)上。
4. 如果在第二層級(jí)上的類別沒有超過一定數(shù)量，增加額外的類別也是沒有必要的。另外，將下一個(gè)重要類別逐個(gè)放在隨后的層級(jí)上。
5. 當(dāng)所有重要選項(xiàng)都安排好后，給用戶提供一個(gè)頁面，列出用戶選擇的所有匹配項(xiàng)。
6. 如果剩余的可選類別仍然超過一定數(shù)量，將這些類別都放在同一層級(jí)上。
7. 如果可選類別是相互排斥的，那么在另一個(gè)的層級(jí)上呈現(xiàn)它們。如果可選類別是組合化的，那么實(shí)現(xiàn)過濾動(dòng)態(tài)選擇。

標(biāo)簽項(xiàng)

1. 如果標(biāo)簽是為人熟知的，那么它就已經(jīng)足夠了。保持標(biāo)簽盡可能地簡(jiǎn)短明晰。在主頁上和分類頁面上顯示項(xiàng)目的總數(shù)。為了使選擇過程和選項(xiàng)更容易理解和區(qū)分，可以考慮使用圖標(biāo)。
2. 如果標(biāo)簽并不為人所熟悉，可以考慮增加圖片。當(dāng)使用圖標(biāo)解釋分類時(shí)，圖標(biāo)要制作精良并容易識(shí)別，否則還是使用圖片比較好。
3. 對(duì)于復(fù)雜的服務(wù)和產(chǎn)品，除了標(biāo)簽外，考慮增加圖片和描述。描述應(yīng)該提供全新的信息，不能只是對(duì)標(biāo)題的重述。同時(shí)，要注意給內(nèi)容增加標(biāo)題的同時(shí)不要產(chǎn)生沉余信息。

一旦簡(jiǎn)化了信息架構(gòu)，用戶應(yīng)該能夠滿意得進(jìn)行選擇。因此，你需要設(shè)計(jì)一個(gè)導(dǎo)航菜單，能讓用戶舒適地進(jìn)行選項(xiàng)選擇。設(shè)計(jì)導(dǎo)航菜單的過程將在本系列的第二部分中討論。

轉(zhuǎn)自：http://daichuanqing.com/index.php/archives/5711

延伸閱讀

• “Information Architecture 101: Techniques and Best Practices,” Cameron Chapman, Six Revisions
• “Classification Schemes (And When to Use Them),” Donna Spencer UX Booth
• “Information Architecture for News Websites,” Stijn Debrouwere
  A series of six articles.
• “Designing for Mobile, Part 1: Information Architecture,” Elaine McVicar UX Booth
• “The Elements of Navigation,” Petter Silfver, Smashing Magazine
  A guide to simplifying and testing labels and icons.
• Smashing Magazine icon packs