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

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

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

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

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

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

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

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

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

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

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

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

1. 初始版本

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

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

同時，也要注意以下幾個原則：

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

2. 表格法

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

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

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

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

3. 用戶測試

為什么要做用戶測試？

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

測試方法

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

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

△ 分步測試法

測試大綱

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

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

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

總結(jié)

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

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

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

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