起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識干貨：導航的信息架構(gòu)
本文由江南大學設(shè)計學院研究生盧孩翻譯，作者：Anastasios Karafillis，查看原文
雖然導航作為用戶體驗至關(guān)重要要的一部分，但它只是達到目的（找到內(nèi)容）的一種方式。用戶對內(nèi)容和導航有不同期望，內(nèi)容應(yīng)該是獨特、驚人或令人興奮的，而導航應(yīng)該盡可能地簡單并且可被預(yù)測。
該系列的文章要分成兩部分，有四個有效簡化導航的步驟。通過分析內(nèi)容的類型和數(shù)量，選擇并且仔細設(shè)計導航菜單的正確類型。
創(chuàng)建理想導航系統(tǒng)的四步驟
為了建立一個可用的導航系統(tǒng)，網(wǎng)頁設(shè)計師需要回答以下四個問題：
- 如何才能最好地組織內(nèi)容？
- 如何才能最好地解釋導航選擇？
- 哪一種導航菜單類型是最適合的選擇？
- 如何才能設(shè)計最佳的導航菜單？
前兩個問題涉及到內(nèi)容的結(jié)構(gòu)和標簽，通常被稱為信息架構(gòu)。信息架構(gòu)師通常在站點地圖中將他們的工作成果可視化。
站點地圖描述網(wǎng)站的導航結(jié)構(gòu)。(圖像來源：Web Tuts)
然而，只為用戶提供站點地圖可能不是最好的用戶體驗，在本系列的課程中將會詳細解釋這些原因。設(shè)計一個自定義的導航菜單也是重要的，可以適應(yīng)用戶的選擇，并以此來安排選項。因此，用戶可以輕松得尋找內(nèi)容，瀏覽內(nèi)容并跳躍式選擇。
當回答了前面提及的第三和第四個問題時，這樣的導航菜單就能設(shè)計成功。這兩個問題涉及到導航體驗中的交互設(shè)計。前兩個問題將在第一部分解答，后兩個問題將在第二部分解答。
結(jié)構(gòu)化的內(nèi)容
正確的結(jié)構(gòu)化一個網(wǎng)站的內(nèi)容，首先要考慮的是用戶搜索信息的方式，然后按照這些偏好來結(jié)構(gòu)化內(nèi)容。
用戶是如何尋找信息的呢？
當一個用戶正在尋找——車輛、食譜、金融服務(wù)、服裝類目、新聞文章、健身鍛煉、娛樂食譜或是任何其他物品或信息時——他們可能知道或不知道他們正在尋找的物品的確切名字。如果我們假設(shè)用戶總是知道他所要搜查的事物的準確名稱，那么我們需要提供大型的完整索引（從A到Z）或是簡單地讓他們在搜索框中輸入，以此來讓他們找到所要的事物。當然，事情往往不是這么簡單的。更詳細的解釋在第二部分展示。
即使用戶知道他們要找的事物的名稱，從A到Z的完整索引和搜索框存在固有的交互問題，讓它們作為導航主要或唯一的方式是不足夠的。此外，用戶通常是不知道所搜事物的準確名稱的，他們甚至不關(guān)心類目或物品的名稱；相反，他們在搜索時會有一個和所尋事物相關(guān)的關(guān)鍵詞。
指導用戶到達正確內(nèi)容是第一步，接著，在網(wǎng)站上區(qū)分內(nèi)容的類別。
元數(shù)據(jù)是導航系統(tǒng)的基礎(chǔ)
關(guān)于內(nèi)容條目或內(nèi)容片段的信息通常被稱為元數(shù)據(jù)——這是關(guān)于信息內(nèi)容的信息。
不去看細節(jié)，內(nèi)容條目可能屬于不同的元數(shù)據(jù)類別。不管是一篇新聞的政治焦點，一個顯示器的顯示尺寸，一段視頻的導演，一件襯衫的領(lǐng)型，還是健身運動的難度，這些都是不同的元數(shù)據(jù)。當然，多個條目也可以分享相同類別，如價格、知名度和出版日期。
用戶可以通過這些元數(shù)據(jù)類型來瀏覽內(nèi)容。然而，正如我們看到的，給用戶提供瀏覽內(nèi)容的全部方式是不必要或沒用的。這樣做得話將會讓界面變得雜亂，瀏覽速度減慢，將導航過程復雜化，更糟的是，這樣會讓用戶覺得混淆、疲勞和煩惱，然后他們就會放棄網(wǎng)站。
仔細考慮是否或是在哪個階段向用戶展示類別。
元數(shù)據(jù)的三種類別
根據(jù)是否呈現(xiàn)或何時呈現(xiàn)元數(shù)據(jù)類別，將元數(shù)據(jù)分成三組：重要的，可選的，無關(guān)緊要的。
信息架構(gòu)的挑戰(zhàn)是：根據(jù)目標群眾，網(wǎng)站目標和內(nèi)容數(shù)量將類別分為重要的，可選的和無關(guān)緊要的。然而，一旦你選定了一個合適的分類，一些簡單的規(guī)則將幫助你去決定什么時候顯示什么類別。
重要類別
對目標用戶來說，最重要的是重要類別。這些類別是少見的，但在每一個項目中至少會有一個重要類別，它簡化了設(shè)計師的工作和用戶的導航體驗。
確定重要類別
食譜的元數(shù)據(jù)類別也許包含“菜式”，“主要成分”，“特殊飲食”，“場合”，“烹飪”，“料理時間”。在這些類別中，“菜式”是最重要的。不是每個人都是一個特殊的飲食者，不是每次吃飯都是在特殊場合中，但是幾乎所有人在每一天都是分開吃開胃菜、早餐、主菜、配菜、沙拉和甜點等。
對目標用戶來說，菜式是最重要的，這應(yīng)該作為第一個類別呈現(xiàn)給他們。
菜式是食譜中重要的元數(shù)據(jù)類別。（圖像來源：Our Best Bites）
然而，如前所述，目標受眾或是網(wǎng)站目標可能影響類別的分類，特別是在理想的網(wǎng)站中。
例如，在主流的食譜網(wǎng)站中，用戶可能看不到烹飪法的相關(guān)內(nèi)容。但是如果一個網(wǎng)站搜集來自世界各地受歡迎的美食的烹飪方法，“烹飪法”對目標受眾來說可能是非常重要的類別，那么就要考慮在“菜式”之外是否再增加“烹飪法”或是用“烹飪法”取代“菜式”成為唯一重要的類別。不管怎樣，因為“烹飪法”是網(wǎng)站的主題，首先顯示它（而不是“菜式”）會更適合。
網(wǎng)站有不同重要類別的元數(shù)據(jù)。(圖像來源：Recipes by Nation)
安排重要的類別
以上的例子解釋了只有單一重要類別的情況。然而，一組條目中可能包含多個重要的類別。
對于衣服來說。一個重要的類別可能是衣服的類型，像“襯衫”，“褲子”，“鞋子”，“毛衣”。另一個重要但相互排斥的類別是性別，“男”和“女”。第三個類別可能是和場合有關(guān)，如“休閑服”，“工作服”，“禮服”。我們可能還會有更多的重要類別，但是我們先將它們放在一邊。
然后，問題是如何最好地調(diào)解或解決潛在多個重要類別之間的沖突。
首先，將全部重要類別放在相同的最高層級上似乎是符合邏輯的。畢竟，它們都是重要的。但是，要做得卻是相反的。重要類別最好是在逐增的層級上一個接一個得顯示。為了更好地理解這點，我們來看看下圖中網(wǎng)站的信息架構(gòu)。
水平導航通常會列出網(wǎng)站提供的產(chǎn)品類型。（圖像來源：LL BEAN）
水平導航條列出了LL Bean可用產(chǎn)品的類型，像“家居裝飾”，“獵具和漁具”，“戶外用品”，“鞋類”和“衣服”。然而，設(shè)計師為“衣服”做了一些改變。衣服應(yīng)該按“男”、“女”分，而不是在水平菜單中列出一打的衣服類別，設(shè)計師們用更精簡的分類來當做重要類別。用戶先從“男”、“女”簡單得開始，再在下拉菜單中看到所有的衣服類別。這使水平導航有更多的選項。
為主要的導航欄騰出更多空間，在精簡的分類下使用重要類別。（圖像來源：LL Bean）
這提出了一個稍微不一致的信息架構(gòu)，但是設(shè)計師們接受了它并在水平導航條上騰出了更多的空間。在這種情況下，只要這種不一致不會混淆用戶，這種解決方案就很好。然而，將類別“鞋子”（將鞋子分為男鞋和女鞋是可以理解的）也放在同樣的水平導航上并不是一個明智的決定。
重要類別應(yīng)該逐個呈現(xiàn)，而不是一個挨著一個顯示。（圖像來源：LL Bean）
這種解決方案的問題是兩個重要類別被放在相同的水平上。“鞋子→男鞋”和“男性→鞋子”都是直接路徑。因為兩個類別都是重要的，用戶都必須看過。但是，由于它們被放在同一層上，用戶要在兩者之間做出選擇，這破壞了兩種類別都是重要的假設(shè)。因此，這兩種路徑要刪掉一種——或許應(yīng)該是“鞋子→男鞋”需要刪除。
可選的類型
如果存在多個重要類別，類別中也許不需要其它條目。一個網(wǎng)站沒有超過一打的服裝條目，設(shè)計師可以讓用戶簡單得選擇是否看男性或是女性的全部服裝。然而，在許多情況卻下是相反的。即便所有重要類別都已經(jīng)選定，仍然還有大量的條目存在著。因此，額外的類別應(yīng)該允許用戶去進一步過濾。這就是可選的類別。
可選類別對某些而不是全部用戶來說是重要的。例如，“汽車”的兩個元數(shù)據(jù)類別可能是“車門的數(shù)量”和“燃油類型”。有些人對燃油類型很關(guān)注但是不關(guān)心有多少個車門。其他人卻相反。
在可選類別中進行優(yōu)先級排序
一般來說，在用戶已經(jīng)選擇了重要類別后需要顯示可選類別。
但是，在許多零售的網(wǎng)站中，像時尚和電子零售店，一種產(chǎn)品類型（一種重要類別）的品牌列表（一種可選類別）在同一層次上。
重要類別和可選類別應(yīng)該在不同水平上顯示。（圖像來源：Flipkart）
這種方法的問題是，如果用戶在一個服裝網(wǎng)站上選擇了一個品牌，他們可能要面對成百上千的物品，然后他們必須選擇一種衣服的類型來縮小范圍。因此，將可選類別和重要類別放在相同的層次上就像給重要類別創(chuàng)建了沉余的路徑，增加了選擇的復雜性，并且使導航變得雜亂。
提供許多過濾選擇是一個好方法，不是從一開始就給用戶提供很多導航選項，先給他們提供一些重要選擇，一旦他們選完重要類別，再提供可選項。
因此，在以上例子中，從這些層級中移除品牌，讓用戶先只能選擇一種類型的衣服可能會好些。在接下來的一個層級上，再給用戶提供品牌的可選項。
在用戶已經(jīng)選擇了重要類型后，才能看見品牌可選項。（圖像：Flipkart）
動態(tài)過濾選擇
如前所述，重要類別應(yīng)該逐級顯示，但可選類別最好在同一層級上全部顯示。
唯一的例外是，如果可選類別是相互排斥的，它們應(yīng)該在重要類別的同一個菜單中的下一個層級中顯示。但是，如果可選類別可以合并，它們應(yīng)該實現(xiàn)動態(tài)過濾選擇。
在截屏圖片中，注意面包屑導航中的重要類別，可選類別呈現(xiàn)為動態(tài)過濾選擇。
可選類別很可能可以合并，它們應(yīng)該實現(xiàn)動態(tài)過濾選擇。（圖像來源：Sears）
重要類別和可選類別的區(qū)別在下文進行解釋。每個類別都是對可用內(nèi)容的過濾選擇，動態(tài)過濾選擇之所以說是動態(tài)的，是因為它們允許用戶選擇或是改變動態(tài)變化的選項。相反的，在傳統(tǒng)的層級導航系統(tǒng)中，用戶不得不從一個層級到另一個層級上去選擇選項。正如上文所述，如果這是個重要類別，這就不是問題，但是如果是可選類別，情況就有點不同了。
當用戶在尋找一件襯衫時，許多可選元數(shù)據(jù)類別發(fā)揮作用：“品牌”，“領(lǐng)型”，“袖長”，“織物”，“花樣”，“口袋”，“折扣”，“價格”，“評級”，“流行”等等。準確地知道這些類別中哪個是用戶感興趣的（類別）是困難的?？赡苡腥藢@些類別全都不感興趣，或是只喜歡一兩個，或是全部都喜歡。
設(shè)計師們應(yīng)該給用戶在相同層級上提供一系列動態(tài)的，可選的選項，而不是給用戶呈現(xiàn)全部的可選分類，也不管用戶對他們是不是感興趣。因此，用戶應(yīng)該可以選擇他們喜歡的類別。
相反的，如下所示的網(wǎng)站，重要類別和可選類別并沒有清晰地區(qū)分開。它顯示了所有類別（還包括重要的類別）。
重要類別不應(yīng)該作為動態(tài)選擇項。（圖像來源:Nike）
這種差別帶來幾個問題。
首先，它占據(jù)了垂直空間，將其他的可選項下推，要求用戶頻繁地滾動頁面來選擇選項。
第二，動態(tài)選擇面板作為一個重要的小組件：它很強大，但是資源太多而且雜亂。每當用戶選擇了一個選項，對應(yīng)的列表就會刷新。這種反饋是有道理的，但這并沒有讓交互過程更快。讓用戶在傳統(tǒng)菜單中選擇重要選項能更簡單快捷得達到同樣的效果。事實上，Nike的設(shè)計師們提供了這樣的菜單，允許我們在相同的界面中來測試這種假設(shè)，比較兩種交互模型的速度和效率。
重要類別在傳統(tǒng)導航菜單中最好實現(xiàn)。（圖像來源：Nike）
相互排斥的類別
在可選類別可能結(jié)合的情況下，動態(tài)過濾選擇就是必須的。如果可選類別是相互排斥的，應(yīng)該在主導航菜單中的下一層級上顯示。
在下面的截屏中，每日快報在第一層級上向用戶詢問重要的問題——選擇新聞的話題：像“金融”，“娛樂”，“生活方式”。在主頁上的可選區(qū)域，用戶可以看到這個話題的最新新聞。每個用戶都希望查看三四個最新新聞。對于那些想要深入研究特定的主題的人，下一級欄目在下一層級中顯示。
相互排斥的可選類別最好在額外的主要導航菜單中顯示。（圖像來源：Daily Express）
上圖的下一級菜單可以認為是相互排斥的類別，因為娛樂項目通常在書本，電影，電視等等媒體上顯示。當然，合并也是可能的，一本書可以拍成電影或是話劇。但是用戶想要看到這樣的合并嗎？如果是用戶希望的，動態(tài)過濾選擇是有意義的。
請注意這個問題的答案主要取決于類目的數(shù)量和多樣性，很少考慮項目的類型和特定目標受眾的利益。
比如，用戶可能不會找一份中式低脂并且還是圣誕主題的早餐食譜。相反的，他們將會尋找可能是中式的，可能是低脂的，或可能是圣誕主題的早餐食譜。所以，可選的食譜類別一般不太可能合并。然而，如果一個網(wǎng)站有成千上萬的食譜，而目標用戶有非常特別的喜好，給他們更強大的動態(tài)過濾選擇將會更有幫助。
在一個有龐大而多樣內(nèi)容的網(wǎng)站中給用戶的特定興趣提供有保證的動態(tài)過濾選擇。（圖像來源：Food52）
最后，考慮第三組元數(shù)據(jù)類別。
無關(guān)緊要的類別
目標受眾不關(guān)心無關(guān)緊要類別中的內(nèi)容。但是，這些類別對整體的用戶體驗而言并不是沒關(guān)系的。
文章的兩類元數(shù)據(jù)可能是“字數(shù)統(tǒng)計”和“圖像統(tǒng)計”。如果這些類別在數(shù)據(jù)庫中以列顯示，內(nèi)容策略專家將在類別中檢測這些文章，然后推斷出哪些文章太長或是缺少圖像，從而解釋為什么用戶在沒有閱讀完這些文章就離開了網(wǎng)站。內(nèi)容策略專家將會和設(shè)計師或委托人討論這些問題，然后提升內(nèi)容質(zhì)量。雖然，這些類別可以給設(shè)計師帶來有價值的信息，但是用戶不會使用“字數(shù)統(tǒng)計”或是“圖像統(tǒng)計”來瀏覽網(wǎng)站。
簡而言之，無關(guān)緊要的類別不應(yīng)該出現(xiàn)在網(wǎng)站上。它們需要被忽略，不然會擾亂界面，也許會使用戶困擾。不過，大量的無關(guān)緊要的內(nèi)容整合在一起可以當成一個可選類別。比如，在瀏覽文章時，“文字計數(shù)”就是一個無關(guān)緊要的類別。但是下面顯示的這個網(wǎng)站積累了這么多的文章，設(shè)計師認為為用戶更好得過濾內(nèi)容而增加“文章長度”的可選項是必須的。
大量不相關(guān)的元數(shù)據(jù)類型合并能變成一個可選的類別。（圖像來源：Time）
上面展示食譜和服裝的網(wǎng)站很合適解釋優(yōu)先級的微妙之處和重要性，因為它們通常需要許多元數(shù)據(jù)類別。但是它們不說明很多設(shè)計師在某一時刻都會面臨的問題，特別是在為一個公司進行設(shè)計時，設(shè)計師面臨的問題會更加復雜。
公司產(chǎn)品類別
大多數(shù)食譜網(wǎng)站不加選擇地任意收集食譜，并將它們留給設(shè)計師去分類。但是公司通常有自己內(nèi)部的產(chǎn)品分類方法，這可能會導致需求沖突。
首先考慮的重要元數(shù)據(jù)類別是汽車，你可能會有一個根據(jù)大小或是生活方式的類別，名稱可能是“小汽車”，“貨車”，“跑車”，“轎車”，“豪華轎車”等等。這些類別是至關(guān)重要的，因為每種類型的汽車服務(wù)于一種特定的生活方式，這對每一個駕駛這種車的人都至關(guān)重要。例如，小汽車在城市里簡潔小巧且便宜、易于駕駛和停靠。貨車有很大的空間，非常適合家庭。而跑車迎合了另外一種截然不同的生活方式。
然而，許多汽車公司用他們內(nèi)部的方式為自己的汽車分類。下圖所示的BMW，使用以數(shù)字為基礎(chǔ)的分類方法（1,3,5,7等）。
某些時候，一個公司的分類有很好的效果。（圖像來源：BMW）
但是一個公司內(nèi)部的分類方案會導致可用性問題。BMW的方法的確讓信息架構(gòu)更加有用。這種方法為大眾所熟悉，根據(jù)汽車的大小，數(shù)字有邏輯地變化著，或多或少符合小汽車，轎車，豪華轎車等的分類。在這種情況下，除了公司的分類方法，其他方法會使事物分離從而難以理解，而不是在幫助用戶。
下一個例子的內(nèi)部分類方案并不好。Opel同樣根據(jù)其內(nèi)部的命名規(guī)則列出了它的汽車樣模。
對用戶來說，內(nèi)部分類并不總是顯而易見的。（圖像來源：Opel）
問題是這個產(chǎn)品線的結(jié)構(gòu)并不清晰，用戶不得不滑動產(chǎn)品線去看全部的樣模，但是這方式并不容易（這個問題涉及更多的交互）。用戶沒有簡單的方式來了解產(chǎn)品之間的相互關(guān)系，因此，他們沒有簡單的方法根據(jù)自己的喜好進行篩選。
如果內(nèi)部分類方法不好用，可以優(yōu)先考慮一種為人熟知的外部分類方法。
注意Volkswagen（如下）公司有自己的命名方式和車模分類方法：“捷達”，“大眾”，“途銳”等等。但是這個公司更加重視一種常見的外部分類方案。這樣的結(jié)果是：菜單非常容易理解，并且能讓用戶關(guān)注他們感興趣的一部分。
優(yōu)先考慮常見的分類方案能讓導航菜單易于理解。（圖像來源：Volkswagen）
當然，公司高層可能不喜歡自己公司的內(nèi)部分類方法被棄之不用。然而，作為一個信息架構(gòu)師，職責就是讓網(wǎng)站中的內(nèi)容易于理解，所以你有責任去和高層溝通這個方案。
解釋導航選項
根據(jù)用戶喜好來構(gòu)建導航選項是簡化網(wǎng)站信息架構(gòu)的重要一步，但是如果用戶在第一時間不能理解選項，再精致復雜的結(jié)構(gòu)都是無用的。所以，花些時間考慮如何最好地解釋導航選項。
只給用戶他們需要的信息，任何更多的信息都有使用戶疲勞、混亂界面和延遲導航的風險，甚至會讓他們放棄現(xiàn)在的選擇。
不要給他們太多的信息，如果用戶會猜測鏈接指向，然后對鏈接到的頁面很失望，他們會對界面失去信心，接著就會離開網(wǎng)站。
設(shè)計師可以選擇三種方法來解釋導航選項：
- 標簽；
- 標簽和圖片；
- 標簽，圖片和描述。
選擇正確的方法，評估目標受眾最熟悉的標簽。
標簽
如果使用的標簽是為人熟知的，那它們就已經(jīng)足夠了。大張的圖片或是長篇的描述沒有必要去解釋什么是“牛仔褲”，“短褲”，“襯衫”，“夾克”。
為人熟知的項目用標簽足以。（圖像來源：Rock Revival）
同時，推薦使用短標簽。標簽可以簡短，但是不能是以表意不清為代價。像UX和BMI的縮寫和術(shù)語，只要是目標用戶熟悉就能較好得起作用。有時候單個術(shù)語是容易理解的，但是放在上下文中，可能就會模糊不清。許多大型組織的網(wǎng)站都有固定的指向主要工作的水平導航，和指向次要工作的與上下文相關(guān)的垂直導航。這可能會導致重復標簽。巴斯大學（如下圖），在頂部的全局水平菜單和左側(cè)狹窄的垂直菜單上都有標簽“Research”。
有許多子部門的大型組織更傾向于重復標簽。（圖像來源：巴斯大學）
雖然這可能會迷惑用戶，但仔細的設(shè)計可以避免歧義。在上面的截圖中，菜單標題“探索部門”是一個很好的指示，但在這之下的“Research”標簽指向的是部門，而不是整個大學。絕對肯定的是，可以加長“About Us”的標簽，改為“About This Department”。
在一些菜單中，一個類別的條目數(shù)量用標簽顯示。（圖像來源：BJ’s）
這些數(shù)字通常在動態(tài)過濾選擇面板中顯示。
在許多有動態(tài)過濾選擇的界面上，類別中的項目數(shù)量通常用一個值來顯示。
雖然許多用戶喜歡看這些數(shù)字，但設(shè)計師還是要仔細考慮何時去顯示它們。比如，通過查看主頁來猜測一個網(wǎng)站有多少內(nèi)容是困難的。所以，明確顯示有多少內(nèi)容可以贏得用戶，他們可能會想“對的，這個網(wǎng)站有我要的東西?！?/p>
主頁上量化的內(nèi)容讓用戶更容易操作。（圖像來源：O’Reilly）
當然，如果你的網(wǎng)站還沒有內(nèi)容，你可能并不想透露這樣一個數(shù)字。
同樣的，當用戶瀏覽某一類別并對其一特定主題感興趣，他們會想要探索相關(guān)的類別，即使不相關(guān)的類別包含更多條目而這個類別只有很少的東西。當然，顯示的數(shù)字會拖慢瀏覽器加載速度，擾亂界面。
在某種情況下，數(shù)據(jù)會阻礙用戶。（圖像來源：Digistore，教育部，新西蘭）
這種情況同樣適用于動態(tài)過濾選擇面板。用戶會根據(jù)所包含的條目數(shù)量來選擇類別嗎？如果是這樣，這些顯示的條目數(shù)量就是有意義的。如果不是這樣，你應(yīng)該提供的唯一的一種反饋類型是顯示灰色或刪除零值的項。
另外，在動態(tài)過濾選擇的情況下，顯示條目數(shù)量是有用的信息。一旦用戶選擇了一個類別，顯示這個類別的數(shù)量。
圖標是另一種有時會附加到標簽上的元素。當圖標制作精良和易于識別時，它們將是非常有用的補充。當沒有必要去解釋用戶的選項時，圖標能更容易區(qū)分不同的選項。在下面的截屏中，我將圖標從菜單條目中刪除。注意到標簽還是足以解釋每個選項，每個人都知道什么是“汽車”，“房車”，“摩托車”和“卡車”。
有時候標簽就足夠了，但是需要更多的時間來識別。（圖像來源Mobile.de）
將圖標放在標簽旁邊能讓用戶更容易得理解和區(qū)別不同的選項。
圖標讓用戶更容易理解和區(qū)別不同的選項。（圖像來源Mobile.de）
但是，單獨的圖標就會引起混亂。即使這個圖標是為人熟知的，用戶可能會不確定它在一個特定上下文中代表的意思。
標簽和圖片
標簽和圖標在為人熟知的事物上起到很大作用。但是對于不常見的事物，圖像就是必須的。想想品牌名稱。在以下截屏中，汽車模型的名稱在標簽中是純文本格式的文字。
理解品牌名稱需要更多信息（不僅是標簽）。（圖像來源：Subaru）
但是，我不知道什么是“Tribeca”或“Legacy”。標簽還不足以幫助我來決定去探索哪些產(chǎn)品。像下圖所示，標簽和圖片是一個更好得解決方式。
標簽和圖片是解釋不熟悉術(shù)語的一種好方式。（圖像來源：Mazda）
什么時候在導航里使用圖像或是圖標是一個有意思的問題。顯而易見的，解釋一個非常具體的項目，像“13-inch Macbook Pro”或是“Samsung Galaxy Note 3”，沒有什么比實際產(chǎn)品圖片更好的了。解釋一個產(chǎn)品類別并不簡單。在一些菜單中，這些分類在進行解釋時會使用圖標。
在一些菜單中，用圖標來解釋分類。（圖像來源：Flipkart）
在其他菜單里，這些相同的分類使用實際產(chǎn)品的照片來解釋這個類別。
在一些菜單中，使用實際產(chǎn)品的圖像來解釋這個類別。（圖像來源：Target）
對于產(chǎn)品類別來說，圖標比圖片更加適合。使用制作精良的圖標使菜單看上去顯得更加專業(yè)。并且，使用一個產(chǎn)品來代表這個產(chǎn)品類別可能會下意識地提升用戶的疑問。“為什么這個特殊的產(chǎn)品代表了這個類別呢？”“這個產(chǎn)品是他們最好的嗎？”“產(chǎn)品的范圍是以這個特定的項目為中心的嘛？”“如果我不是找這種物品，這對我來說就不是一個好網(wǎng)站?！比绻脩舻谝谎劭吹降纳唐奉悇e和他們在菜單中看到的一樣時，這種憂慮可能會加強。相反，圖標能不多不少地簡單表述一個類別中包含某類產(chǎn)品。
不過，圖標的技巧必須達到某種標準。如果圖標沒有畫好，看起來就會很不專業(yè)。并且，如果它不容易辨認，它甚至會混淆用戶。所以，圖標更適合產(chǎn)品類別，但是如果你沒有信心將圖標做得專業(yè)和容易辨認，你最好使用圖片。
標簽，圖片和描述
有時候，標簽和圖標還不足以解釋產(chǎn)品。許多服務(wù)提供商都有復雜的解決方式，像銀行、保險服務(wù)公司和因特網(wǎng)服務(wù)提供商，經(jīng)常給他們的產(chǎn)品命名為“50+”和“活躍網(wǎng)站”。已婚夫婦和代理的對話，或是一個女孩在講電話的照片也許還不足以解釋提供商的服務(wù)。對于此類產(chǎn)品，幾行的描述和標簽，再加上圖片會對用戶很有幫助。
復雜產(chǎn)品也許需要標簽、圖片和描述才能理解。（圖像來源：Naspa）
標題和文章題目是不同的標簽，標題可能需要附帶圖片和描述，而文章題目可能不需要。
許多作者建議前置標題要有重要信息，并且保持標題盡可能的短。
一種常見的建議是保持短標題，并且將重要信息前置。（圖像來源：BBC）
雖然上面的標題簡短而有重點，但是這種風格并不適合每一個網(wǎng)站。
第一個問題是，是否要有描述語句和如何去寫描述。BBC的頭條標題本來也有描述語句，在上圖中，我將它們刪除，就留下孤單的頭條標題。在下圖中，我將描述語句恢復，你可以注意到這些語句基本上都是冗長乏味的，沒有一些新信息。
描述語句應(yīng)該傳達的是頭條標題還沒有表述的信息。（圖像來源：BBC）
如果頭條標題里面就都是關(guān)鍵信息了，那么描述語句就不再需要。因為用戶在閱讀完標題后就可以點擊鏈接到文章了，再閱讀多余沒有新意的描述語句只為放緩閱讀速度。
但是，單獨顯示頭條標題或是用這種方式寫標題通常不太好或甚至是不明智的。如果一篇文章只是簡單地報道一個事件，那么像BBC這樣的標題是一個好選擇。但是如果文章有更多的細節(jié)，那么標題、圖片和描述將會更有效、更迷人。
下面截圖中的標題比內(nèi)容更吸引人，關(guān)鍵信息被分在下面兩行。同時，旁邊的圖片為文章定下了基調(diào)。
標題、圖片和描述通常是深入解釋新聞的最好方法。（圖片來源：World）
從小片段中了解這篇文章是講什么的并不困難。使用標題作為焦點，使用描述來解釋文章，并用圖片來為文章定調(diào)，整個片段給了不僅能吸引用戶，也傳達了文章的觀點。
最后，通常需要仔細思考頭條標題，這樣它們出現(xiàn)在網(wǎng)站外也能被理解。畢竟，標題能出現(xiàn)在其他媒體或是文章的搜索結(jié)果中。一些作者甚至為了這個目的而去設(shè)計公式。
許多作者嘗試寫出在其他網(wǎng)站上顯示時也能被易于理解的標題。（圖像來源：Baymard Institute）
在標題中添加信息時，小心不要創(chuàng)建沉余信息。
上圖中的標題沒有提供足夠的上下文信息，因為這個網(wǎng)站是關(guān)于網(wǎng)頁設(shè)計的，并且多欄布局在主頁、文章等中起作用，而不局限在表單上。所以，“表單字段的可用性”主要是在來源網(wǎng)站上增加上下文。適應(yīng)外部環(huán)境的標題并不總是必須的，因為搜尋這些標題的人更渴望去提供自己的上下文。
搜索引擎開發(fā)者明白，如果搜索結(jié)果不能滿足用戶需求，那么用戶最終會放棄它們。所以，他們?yōu)榱颂岣咚阉鹘Y(jié)果的相關(guān)性和成功率不斷工作著，不管是通過添加豐富的片段、圖片、預(yù)覽還是簡單得改進算法——也就是說，添加上下文。同樣的，如果在其他文章的推薦讀物中出現(xiàn)這篇文章，這篇文章需要提供必要的上下文。最后，在社會媒體中，個人分享的標題或是有眾多粉絲的品牌不太可能引起歧義。
總結(jié)
信息架構(gòu)——內(nèi)容結(jié)構(gòu)化并配有標簽——是可用導航的基礎(chǔ)。設(shè)計師通過結(jié)構(gòu)化內(nèi)容來有效簡化網(wǎng)站的信息架構(gòu)，為了讓目標受眾能進行更好地選擇，減少或增添選項，并解釋這些選項來最大限度地減少用戶的認知負荷。
本文中給出的建議在以下兩個列表中進行總結(jié)，分別是“結(jié)構(gòu)化內(nèi)容”和“標簽項”。
結(jié)構(gòu)化內(nèi)容
- 搜集并且分類導航所需的元數(shù)據(jù)類型。
- 將元數(shù)據(jù)分為重要的，可選的和無關(guān)緊要的類別。重要類別對所有目標受眾都很重要，可選類別對一些人來說是重要的，無關(guān)緊要類別對目標受眾來說是不重要的。
- 只將一個重要類別放在第一層級上。
- 如果在第二層級上的類別沒有超過一定數(shù)量，增加額外的類別也是沒有必要的。另外，將下一個重要類別逐個放在隨后的層級上。
- 當所有重要選項都安排好后，給用戶提供一個頁面，列出用戶選擇的所有匹配項。
- 如果剩余的可選類別仍然超過一定數(shù)量，將這些類別都放在同一層級上。
- 如果可選類別是相互排斥的，那么在另一個的層級上呈現(xiàn)它們。如果可選類別是組合化的，那么實現(xiàn)過濾動態(tài)選擇。
標簽項
- 如果標簽是為人熟知的，那么它就已經(jīng)足夠了。保持標簽盡可能地簡短明晰。在主頁上和分類頁面上顯示項目的總數(shù)。為了使選擇過程和選項更容易理解和區(qū)分，可以考慮使用圖標。
- 如果標簽并不為人所熟悉，可以考慮增加圖片。當使用圖標解釋分類時，圖標要制作精良并容易識別，否則還是使用圖片比較好。
- 對于復雜的服務(wù)和產(chǎn)品，除了標簽外，考慮增加圖片和描述。描述應(yīng)該提供全新的信息，不能只是對標題的重述。同時，要注意給內(nèi)容增加標題的同時不要產(chǎn)生沉余信息。
一旦簡化了信息架構(gòu)，用戶應(yīng)該能夠滿意得進行選擇。因此，你需要設(shè)計一個導航菜單，能讓用戶舒適地進行選項選擇。設(shè)計導航菜單的過程將在本系列的第二部分中討論。
轉(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
太長了
mark 好東西 慢慢吸收