本文針對(duì)的是從 UX 角度出發(fā)的標(biāo)簽系統(tǒng)設(shè)計(jì)，不同于數(shù)據(jù)庫(kù)的標(biāo)簽系統(tǒng)設(shè)計(jì)?！笜?biāo)簽系統(tǒng)」的概念來(lái)源于《信息架構(gòu)：超越 web 設(shè)計(jì)》一書。

想看作者更多好文歡迎搜索知乎專欄「沁園的設(shè)計(jì)小跑」。

一、什么是標(biāo)簽系統(tǒng)

「標(biāo)簽」通俗來(lái)說(shuō)就是給界面元素命名，使用用戶語(yǔ)言來(lái)更好地向用戶傳達(dá)信息，降低用戶使用產(chǎn)品時(shí)的理解成本。當(dāng)產(chǎn)品各個(gè)部分關(guān)系很復(fù)雜的時(shí)候，就需要考慮「標(biāo)簽系統(tǒng)」了。產(chǎn)品中的文字和圖標(biāo)都是標(biāo)簽，普遍使用的是文字標(biāo)簽，圖標(biāo)標(biāo)簽在表達(dá)含義上相對(duì)會(huì)更困難一些。

△ 豆瓣「書影音」的標(biāo)簽系統(tǒng)

《信息架構(gòu)：超越 web 設(shè)計(jì)》一書對(duì)標(biāo)簽系統(tǒng)進(jìn)行了詳細(xì)的介紹，包括標(biāo)簽系統(tǒng)的類型、設(shè)計(jì)原則和設(shè)計(jì)方法。閱讀的時(shí)候就在思考，要如何將這些理論更好的運(yùn)用在實(shí)際操作當(dāng)中呢？

二、標(biāo)簽系統(tǒng)設(shè)計(jì)實(shí)踐

最近在做一個(gè)產(chǎn)品的頻道首頁(yè)，當(dāng)我們?cè)趯?duì)頻道首頁(yè)的功能入口進(jìn)行命名時(shí)，就涉及到標(biāo)簽系統(tǒng)的設(shè)計(jì)。個(gè)人覺(jué)得算是一個(gè)比較小的標(biāo)簽系統(tǒng)，嘗試結(jié)合書里的內(nèi)容來(lái)幫助設(shè)計(jì)。

在命名標(biāo)簽時(shí)遇到的兩個(gè)難點(diǎn)：

• 功能 ABCD 的命名無(wú)論從哪一個(gè)維度，其概念都有交叉的部分。就好比番茄同時(shí)屬于水果和蔬菜，事物有多種分類方式。例如想把功能 A 用概念1命名，但是功能 C 和功能 D 也屬于概念 1。無(wú)論用哪種維度，這無(wú)法獨(dú)立地表達(dá)這幾個(gè)功能。
• 由于語(yǔ)言本身具有模糊性，一個(gè)詞有多種含義，不同的用戶對(duì)同一個(gè)詞也有不同的理解。

這幾個(gè)功能的命名，小組討論了多次，每提出一種命名方式都會(huì)有人質(zhì)疑。因此，要采取更有依據(jù)的方式來(lái)命名標(biāo)簽。

△ 命名標(biāo)簽的難點(diǎn)

1. 初始版本

初始版本的標(biāo)簽命名有以下幾個(gè)思路：

• 功能/業(yè)務(wù)本身。比如給用戶提供的是靈活存取的理財(cái)產(chǎn)品，標(biāo)簽就可以命名為：靈活理財(cái)。
• 競(jìng)品。查看競(jìng)品的產(chǎn)品標(biāo)簽，借用一些大家都在用的，比如「活期」、「余額寶」、「零錢」。
• 行業(yè)術(shù)語(yǔ)。比如「定期」、「活期」是銀行存款慣用的名稱。

同時(shí)，也要注意以下幾個(gè)原則：

• 盡可能縮小范圍：針對(duì)更明確的受眾和場(chǎng)景。
• 一致性：一致性可以帶來(lái)可預(yù)測(cè)性，讓用戶更容易學(xué)習(xí)。一致性包括語(yǔ)言風(fēng)格一致、視覺(jué)樣式一致、語(yǔ)法一致、粒度一致、目標(biāo)用戶一致等。

2. 表格法

以表格的方式整理標(biāo)簽，可以排除界面的其他元素，更系統(tǒng)、更清楚地審視標(biāo)簽。

比如在用表格法檢查初始版本的標(biāo)簽時(shí)，就發(fā)現(xiàn)幾個(gè)一句話文案內(nèi)容重復(fù)、稍顯贅述。

可以是同一頁(yè)面的標(biāo)簽表格整理，也可以是跨頁(yè)面的。這樣我們就可以知道，從不同頁(yè)面之間跳轉(zhuǎn)，標(biāo)題的表達(dá)連不連貫，統(tǒng)不統(tǒng)一。

△ 用表格法系統(tǒng)性審視標(biāo)簽

3. 用戶測(cè)試

為什么要做用戶測(cè)試？

產(chǎn)品的界面元素是為了和用戶更好的「交談」，標(biāo)簽的目標(biāo)是向用戶有效地傳達(dá)信息。適宜的標(biāo)簽可以讓用戶產(chǎn)生正確的聯(lián)想，并決定是否要點(diǎn)擊進(jìn)去了解更多內(nèi)容。所以標(biāo)簽的命名是要以用戶為中心的，因此，我們選擇做用戶測(cè)試，來(lái)檢查標(biāo)簽的命名是否可以讓用戶快速理解產(chǎn)品的功能和價(jià)值。

測(cè)試方法

針對(duì)頻道首頁(yè)的標(biāo)簽系統(tǒng)，我們采用了分步測(cè)試法。把頻道首頁(yè)拆成三個(gè)版本，每個(gè)版本只展示部分內(nèi)容，詢問(wèn)被測(cè)者并獲取反饋，評(píng)估標(biāo)簽的有效性。

尋找的被測(cè)者都是該頻道的新用戶，約6~8個(gè)人。

△ 分步測(cè)試法

測(cè)試大綱

• 第一步測(cè)試：給用戶展示第一個(gè)版本（只有功能入口），詢問(wèn)用戶認(rèn)為這個(gè)頻道提供了什么功能和服務(wù)，以及對(duì)這幾個(gè)功能的理解。
• 第二步測(cè)試：給用戶展示第二個(gè)版本（功能入口+一句話文案），詢問(wèn)用戶對(duì)這些功能的理解，和之前的理解有什么不一樣，有什么疑問(wèn)。
• 第三步測(cè)試：給用戶展示第三個(gè)版本（功能入口+一句話文案+內(nèi)容），詢問(wèn)用戶對(duì)這些功能的理解，和之前的理解有什么不一樣，有什么疑問(wèn)。

測(cè)試的時(shí)候做好記錄，然后整理搜集到的信息，優(yōu)化標(biāo)簽的表達(dá)方式，優(yōu)化后的方案可以再找用戶測(cè)試，反復(fù)打磨迭代。

此外，標(biāo)簽系統(tǒng)的設(shè)計(jì)還要注重拓展性，這樣以后新增的標(biāo)簽才不會(huì)破壞當(dāng)前的標(biāo)簽系統(tǒng)。標(biāo)簽系統(tǒng)還需要跟隨產(chǎn)品迭代和用戶認(rèn)知進(jìn)行調(diào)整和優(yōu)化。

總結(jié)

由于語(yǔ)言本身的模糊性和用戶認(rèn)知的差異性，「標(biāo)簽永遠(yuǎn)都不會(huì)完美」。但是我們?cè)谠O(shè)計(jì)標(biāo)簽系統(tǒng)的時(shí)候可以注重一些原則，使用一些方法（例如表格法和用戶測(cè)試），為標(biāo)簽系統(tǒng)的設(shè)計(jì)提供依據(jù)，讓標(biāo)簽盡可能有效地傳達(dá)信息。

「提升用戶體驗(yàn)的細(xì)節(jié)」

• 《為什么你的設(shè)計(jì)很棒，但用戶體驗(yàn)還是很爛？》
• 《內(nèi)容為王的時(shí)代，阿里設(shè)計(jì)師用實(shí)戰(zhàn)案例解讀內(nèi)容化設(shè)計(jì)！》
• 《進(jìn)階學(xué)習(xí)！如何做好產(chǎn)品界面中的內(nèi)容設(shè)計(jì)？》

想看作者更多好文歡迎搜索知乎專欄「沁園的設(shè)計(jì)小跑」。