本文針對的是從 UX 角度出發的標簽系統設計，不同于數據庫的標簽系統設計。「標簽系統」的概念來源于《信息架構：超越 web 設計》一書。

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

一、什么是標簽系統

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

△ 豆瓣「書影音」的標簽系統

《信息架構：超越 web 設計》一書對標簽系統進行了詳細的介紹，包括標簽系統的類型、設計原則和設計方法。閱讀的時候就在思考，要如何將這些理論更好的運用在實際操作當中呢？

二、標簽系統設計實踐

最近在做一個產品的頻道首頁，當我們在對頻道首頁的功能入口進行命名時，就涉及到標簽系統的設計。個人覺得算是一個比較小的標簽系統，嘗試結合書里的內容來幫助設計。

在命名標簽時遇到的兩個難點：

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

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

△ 命名標簽的難點

1. 初始版本

初始版本的標簽命名有以下幾個思路：

• 功能/業務本身。比如給用戶提供的是靈活存取的理財產品，標簽就可以命名為：靈活理財。
• 競品。查看競品的產品標簽，借用一些大家都在用的，比如「活期」、「余額寶」、「零錢」。
• 行業術語。比如「定期」、「活期」是銀行存款慣用的名稱。

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

• 盡可能縮小范圍：針對更明確的受眾和場景。
• 一致性：一致性可以帶來可預測性，讓用戶更容易學習。一致性包括語言風格一致、視覺樣式一致、語法一致、粒度一致、目標用戶一致等。

2. 表格法

以表格的方式整理標簽，可以排除界面的其他元素，更系統、更清楚地審視標簽。

比如在用表格法檢查初始版本的標簽時，就發現幾個一句話文案內容重復、稍顯贅述。

可以是同一頁面的標簽表格整理，也可以是跨頁面的。這樣我們就可以知道，從不同頁面之間跳轉，標題的表達連不連貫，統不統一。

△ 用表格法系統性審視標簽

3. 用戶測試

為什么要做用戶測試？

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

測試方法

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

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

△ 分步測試法

測試大綱

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

測試的時候做好記錄，然后整理搜集到的信息，優化標簽的表達方式，優化后的方案可以再找用戶測試，反復打磨迭代。

此外，標簽系統的設計還要注重拓展性，這樣以后新增的標簽才不會破壞當前的標簽系統。標簽系統還需要跟隨產品迭代和用戶認知進行調整和優化。

總結

由于語言本身的模糊性和用戶認知的差異性，「標簽永遠都不會完美」。但是我們在設計標簽系統的時候可以注重一些原則，使用一些方法（例如表格法和用戶測試），為標簽系統的設計提供依據，讓標簽盡可能有效地傳達信息。

「提升用戶體驗的細節」

• 《為什么你的設計很棒，但用戶體驗還是很爛？》
• 《內容為王的時代，阿里設計師用實戰案例解讀內容化設計！》
• 《進階學習！如何做好產品界面中的內容設計？》

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