DIV CSS 佈局教程網

網頁制作Poluoluo文章簡介：交互設計實用指南系列(6) –標簽明晰、有效.

導航標簽彼此互斥、完全窮盡。

導航標簽其實就是一種文字表達形式，我們用標簽來代表網站上的各種分類信息。比如“聯系我們”這個標簽，代表的內容通常會包括公司名稱、電話、地址、郵箱等信息。它可以是文字，也可以是圖片。在英文裡被稱作“Label”，並不同於我們常說的“tag”標簽雲圖。

說簡單一點，我們就是要為網站的信息做分類，並為它們起一個通俗易懂的名字。這其實是任何人都可以做的一件事情，所以在導航設計流程中，它的重要性也常常被忽略。在設計產品時，常會聽到這樣的話：“這個欄目該叫什麼名字？恩。。。先別管吧，把更重要的工作做了再說。”

然而，站在用戶的角度，導航標簽代表的是整個網站的內容、產品的結構，他們必須依靠標簽的內容和組織方式來尋找網站中的信息。 

標簽是訪客行為的觸發詞，好的標簽能吸引訪客注意力，引導他們准確地找到信息。導航標簽是訪客預測目標頁內容的重要依據，緊跟著它的就是導航中的關鍵點，網頁的過渡，所以尤為重要，有歧義的標簽逼人猜測它的意圖，甚至讓用戶走錯路或迷失方向。

比如這個網站的標簽：

這個網站的導航標簽比較極端，首先標簽之間的互斥性差，“淘寶潮流榜”、“愛物秀場”、“敗家俱樂部”等，含義和實際內容都非常接近；其次是一致性差，標簽的粒度不同、長度不同、語氣不同，甚至還有英文出現，可謂五花八門； 最糟糕的是，在標簽的選擇上，用了很多自作聰明的詞語，如“愛騷談資”，用戶很難預測到鏈接背後是什麼內容。

設計標簽的過程，實際上就是對信息分類的過程，我們應當堅持MECE原則，也就是彼此獨立、完全窮盡（Mutally Exclusive,Collectively Exhaustive）。這是一種客觀的角度。你也可以站在主觀的角度進行分類，但必須做到標准清晰、在目標群體中能獲得充分共識。

怎樣的標簽才能稱作好的標簽？它應該滿足這幾個方面：

1、好的標簽，應該使用客戶的語言，避免使用術語、行話、縮寫詞等用戶難以理解的詞語；

2、采用描述性的標簽，避免使用“信息”、“細節”等過於寬泛的詞語，盡量以某種方式加以限定,如：“給買家的信息”、“交易細節”。

3、標簽之間的互斥性要強，盡可能地尋找差異化；

4、使用聚焦地標簽，如，能把貓、狗、倉鼠等歸納為“寵物”，就不要用“動物”。

5、在粒度、語法、展現、用法等方面保持標簽的一致性；

6、較長的標簽往往比短標簽更好，但並非越長越好，請盡量控制在12個字以內（這不是一個硬性規定）。

那我們設計標簽時的詞匯從何而來呢？是憑空想象出來的嗎？當然不是啦，你可以從以下幾個方面獲得詞匯：

1、你自己的網站或產品

你的網站和產品，在前期建設中，已經積累了很多標簽。我們要做的，就是遍走整個網站，盡可能收集所有標簽，然後用表格進行整理。

比如,我們在淘江湖改版時，對現有標簽系統進行了一次整理，在表格的幫助下，比較容易看出現有標簽系統存在的問題。

2、類似網站或競爭對手網站

如果你還沒有網站和產品，那就要去同類型網站或競爭對手網站去收集標簽了。相信這一做法，在互聯網上，幾乎是無師自通的。你可以通過對同類型網站標簽系統的觀察和比較，得到一些行業類比較通用的詞匯，降低用戶的理解成本。

你可以用同樣的方式，收集同類型或競爭對手網站的標簽，以供參考：

3、受控詞表或敘詞表

這是由圖書館員和特定領域的專家所建立的資源，這些詞匯都是專家們付出很多努力的成果，表達方式精確且一致，而且這些資源通常是公開的。其實信息架構的很多理論，都來源於圖書館管理。

在完全沒有依據的情況下，我們必須設計新的標簽系統時，應該怎麼辦呢？

你可以對通過對內容進行分析、要求內容的產生者提供、或者象專家或你的直接用戶求助。卡片分類法也是比較流行的一種做法。

卡片分類大概有4個步驟：

1、招募志願者，大部分項目適當的卡片分類志願者人數是 15 人，大型項目可以達到 30 人。個人覺得如果只是想對自己想法進行驗證的話，5-10 人即可。

2、  准備卡片，寫上你預先設定好的標簽（這些標簽必須是你們內部討論或請教過專家的結果）。

3、  讓用戶進行分類，你可以觀察用戶的分類過程，以及對標簽的理解。

4、  對卡片分類的結果進行分析，如果數據龐大，你可以借用軟件進行分析，推薦工具有 IBM EZSort、CardZort、WebSort 等。

對卡片分類感興趣的同學可以進一步查閱資料，我們在這裡就不詳細說明了。