「標題」的標籤系統設計-實踐篇

來自專欄沁園的設計小跑5 人贊了文章

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

什麼是標籤系統

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

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

標籤系統設計實踐

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

在命名標籤時遇到的難點有兩個。

一是：功能ABCD的命名無論從哪一個維度，其概念都有交叉的部分。就好比番茄同時屬於水果和蔬菜，事物有多種分類方式。例如想把功能A用概念1命名，但是功能C和功能D也屬於概念1。無論用哪種維度，這無法獨立地表達這幾個功能。

第二個難點是由於語言本身具有模糊性，一個詞有多種含義，不同的用戶對同一個詞也有不同的理解。

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

• 初始版本

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

1、功能/業務本身。比如給用戶提供的是靈活存取的理財產品，標籤就可以命名為：靈活理財。

2、競品。查看競品的產品標籤，借用一些大家都在用的，比如「活期」、「餘額寶」、「零錢」。

3、行業術語。比如「定期」、「活期」是銀行存款慣用的名稱。

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

1、儘可能縮小範圍：針對更明確的受眾和場景

2、一致性：一致性可以帶來可預測性，讓用戶更容易學習。一致性包括：語言風格一致、視覺樣式一致、語法一致、粒度一致、目標用戶一致等。

• 表格法

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

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

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

• 用戶測試

為什麼要做用戶測試？

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

測試方法

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

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

測試大綱

大致如下：

1、第一步測試：給用戶展示第一個版本（只有功能入口）

2、詢問用戶認為這個頻道提供了什麼功能和服務，以及對這幾個功能的理解

3、第二步測試：給用戶展示第二個版本（功能入口+一句話文案）

4、詢問用戶對這些功能的理解，和之前的理解有什麼不一樣，有什麼疑問

5、第三步測試：給用戶展示第三個版本（功能入口+一句話文案+內容）

6、詢問用戶對這些功能的理解，和之前的理解有什麼不一樣，有什麼疑問

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

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

總結

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

謝謝閱讀！