推薦：交互設(shè)計實用指南系列(5) – 突出重點，一目了然
看到這張照片，我們一眼能夠看到天宏(圖中這位UED俊男)的眼睛。我們能從他的表情里讀出一些他的性格。一張好的攝影作品，最重要的一點，就是這個照片是否有焦點，照片的主題是否一目了然。而攝影作品的用光、構(gòu)圖、景深等等手法，其實就是在讓一個照片能夠有其焦點，并

導(dǎo)航標(biāo)簽彼此互斥、完全窮盡。

導(dǎo)航標(biāo)簽其實就是一種文字表達形式，我們用標(biāo)簽來代表網(wǎng)站上的各種分類信息。比如“聯(lián)系我們”這個標(biāo)簽，代表的內(nèi)容通常會包括公司名稱、電話、地址、郵箱等信息。它可以是文字，也可以是圖片。在英文里被稱作“Label”，并不同于我們常說的“tag”標(biāo)簽云圖。

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

然而，站在用戶的角度，導(dǎo)航標(biāo)簽代表的是整個網(wǎng)站的內(nèi)容、產(chǎn)品的結(jié)構(gòu)，他們必須依靠標(biāo)簽的內(nèi)容和組織方式來尋找網(wǎng)站中的信息。

標(biāo)簽是訪客行為的觸發(fā)詞，好的標(biāo)簽?zāi)芪�引訪客注意力，引導(dǎo)他們準(zhǔn)確地找到信息。導(dǎo)航標(biāo)簽是訪客預(yù)測目標(biāo)頁內(nèi)容的重要依據(jù)，緊跟著它的就是導(dǎo)航中的關(guān)鍵點，網(wǎng)頁的過渡，所以尤為重要，有歧義的標(biāo)簽逼人猜測它的意圖，甚至讓用戶走錯路或迷失方向。

比如這個網(wǎng)站的標(biāo)簽：

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

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

怎樣的標(biāo)簽才能稱作好的標(biāo)簽？它應(yīng)該滿足這幾個方面：

1、好的標(biāo)簽，應(yīng)該使用客戶的語言，避免使用術(shù)語、行話、縮寫詞等用戶難以理解的詞語；

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

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

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

5、在粒度、語法、展現(xiàn)、用法等方面保持標(biāo)簽的一致性；

6、較長的標(biāo)簽往往比短標(biāo)簽更好，但并非越長越好，請盡量控制在12個字以內(nèi)（這不是一個硬性規(guī)定）。

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

1、你自己的網(wǎng)站或產(chǎn)品

你的網(wǎng)站和產(chǎn)品，在前期建設(shè)中，已經(jīng)積累了很多標(biāo)簽。我們要做的，就是遍走整個網(wǎng)站，盡可能收集所有標(biāo)簽，然后用表格進行整理。

比如,我們在淘江湖改版時，對現(xiàn)有標(biāo)簽系統(tǒng)進行了一次整理，在表格的幫助下，比較容易看出現(xiàn)有標(biāo)簽系統(tǒng)存在的問題。

2、類似網(wǎng)站或競爭對手網(wǎng)站

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

你可以用同樣的方式，收集同類型或競爭對手網(wǎng)站的標(biāo)簽，以供參考：

3、受控詞表或敘詞表

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

在完全沒有依據(jù)的情況下，我們必須設(shè)計新的標(biāo)簽系統(tǒng)時，應(yīng)該怎么辦呢？

你可以對通過對內(nèi)容進行分析、要求內(nèi)容的產(chǎn)生者提供、或者象專家或你的直接用戶求助�？ㄆ�分類法也是比較流行的一種做法。

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

1、招募志愿者，大部分項目適當(dāng)?shù)目ㄆ�分類志愿者人�?shù)是 15 人，大型項目可以達到 30 人。個人覺得如果只是想對自己想法進行驗證的話，5-10 人即可。

2、  準(zhǔn)備卡片，寫上你預(yù)先設(shè)定好的標(biāo)簽（這些標(biāo)簽必須是你們內(nèi)部討論或請教過專家的結(jié)果）。

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

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

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

參考文獻

《Web信息架構(gòu)：設(shè)計大型網(wǎng)站》 （美）莫維里，（美）羅森費爾德 著

《Web導(dǎo)航設(shè)計》 （美）卡爾巴赫（Kalbach，J.） 著

分享：交互設(shè)計實用指南系列(4)—簡潔清晰，自然易懂
我們生活在信息繁雜的社會，尤其是在互聯(lián)網(wǎng)時代，人們開始通過網(wǎng)絡(luò)開始接觸越來越多的信息，那么，如何獲取/傳遞有效而準(zhǔn)確的信息將非常重要。在網(wǎng)頁交互設(shè)計中，我們提出： 信息獲取和傳達的過程必須是簡潔清晰，自然易懂。這樣用戶才能夠有效的獲取這些信息，并迅速