寫在前

在千島 App 的快速迭代過程中，作為高頻使用的 UI 元素 Tag，在使用過程中不同模塊的樣式不統(tǒng)一，顏色、大小、圓角等細節(jié)存在多個版本，帶給用戶對信息層級的認知混亂，折射出設(shè)計團隊在基礎(chǔ)組件認知上沒有統(tǒng)一。

今天，我們決定用系統(tǒng)化思維重構(gòu)移動端 Tag 組件的設(shè)計規(guī)范。通過規(guī)范來幫助設(shè)計師快速做出清晰一致的選擇，同時讓用戶在不同場景中都能感受到可預(yù)期使用體驗。

一、Tag 是什么？

Tag 組件是常見的 UI 元素，常用“標簽”釋義，常用于分類、標記、篩選或操作引導(dǎo)，給用戶提供快速的視覺參考，以幫助快速理解頁面信息。

1. 核心功能

分類與索引：通過聚合，幫助用戶快速定位

狀態(tài)標記：展示動態(tài)信息

交互操作：支持選中、關(guān)閉、跳轉(zhuǎn)等動作

視覺引導(dǎo)：通過顏色、形狀等吸引用戶注意

2. 規(guī)則與實現(xiàn)

可識別：有獨特外觀，文字簡潔、顏色對比，確保清晰易讀

簡潔：內(nèi)容簡短，文案精準表意，不給用戶認知負擔

一致：全應(yīng)用內(nèi)，Tag 的視覺風格和功能交互要統(tǒng)一，方便用戶熟悉操作

可操作：尺寸適中，點擊不小于 44px。點擊有反饋，操作實時呈現(xiàn)

靈活：提供多種樣式，如不同顏色、形狀、大小。具備擴展性

figma 上的靈活實現(xiàn)，方便調(diào)用 ↓

主要規(guī)則 ↓

3. Button Tag Tooltip 分不清？

三者的核心差異在于用戶預(yù)期：

1. 點擊 Button 意味著“我要做某事”
2. 看到 Tag 意味著“我知道這是什么”
3. 觸發(fā) Tooltip 意味著“我需要幫助理解”

二、平衡功能與用戶體驗

用戶平均每天在移動應(yīng)用中接觸 300 + 標簽，科學(xué)的標簽設(shè)計可降低用戶決策成本 40%（Google UX 研究數(shù)據(jù)）；無論是電商促銷標簽的“視覺轟炸”，還是工具類應(yīng)用的“冷靜標記”，Tag 的終極目標始終是提升用戶的信息獲取效率。

1. 封面圖上的統(tǒng)一

在梳理我們平臺上現(xiàn)有的 tag 樣式時，多個設(shè)計師在應(yīng)對多條業(yè)務(wù)線時 tag 的做法都不同，在統(tǒng)一規(guī)范時按先克制收斂，再應(yīng)用驗證到迭代的過程，如下圖對封面圖片上的標簽統(tǒng)一（后續(xù)可根據(jù)實際場景再進行擴展）。

2. 令人頭疼的長文本處理

在設(shè)計中常遇到長文本的情況，標簽過長會導(dǎo)致布局混亂、信息可讀性下降，甚至影響核心操作流程：

信息優(yōu)先級法則

保留關(guān)鍵詞（如“官方正品” → “官方”），刪除修飾詞（如“限時搶購” → “限時”）

數(shù)字優(yōu)先（如“滿 100 減 20” → “減20”）

一致性規(guī)則

同一場景下所有 Tag 采用統(tǒng)一處理策略（全截斷或全換行）

多語言適配：中文≤4字，英文≤8字符，德語等長單詞語言需特殊處理

在封裝 Dropdown 時注意居中的等分規(guī)則

這里不推薦 tag 內(nèi)長文本根據(jù)容器來等比縮小，因為長文本本身不可控，過長會導(dǎo)致字號過小而難以識別；另一方面會打亂頁面的視覺平衡，影響整齊度。

3. Tag 的可交互行為

交互是手段而非目的，每一次觸控都應(yīng)直指用戶核心訴求。

在移動端設(shè)計中，Tag 的交互性直接影響用戶的信息處理效率和操作體驗；賦予 Tag 可交互能力一般基于場景目標、用戶需求、技術(shù)限制三個維度綜合判斷。組件一般包含可關(guān)閉、可選擇、可長按、可拖拽等，一般原則：

基礎(chǔ)層：功能可見性

通過形狀、顏色、圖標箭頭/關(guān)閉符等明確交互暗示

確保觸控熱區(qū) ≥ 48×48dp（Material Design 標準）；通常建議高度不小于 44px，以方便用戶在移動設(shè)備上進行觸摸操作

體驗層：反饋即時性

點擊后 100ms 內(nèi)給出視覺反饋

網(wǎng)絡(luò)請求時顯示加載狀態(tài)，如骨架屏/占位符

情感層：微交互記憶點

定制品牌化動效，如標簽選中時彈出吉祥物表情

提供觸覺反饋（iOS 的 Taptic Engine / AndROId 的 Vibrator）

4. 自定義 Tag

形狀可定制，思維要克制；創(chuàng)意不越界，用戶才省力。設(shè)計側(cè)應(yīng)該避免雜亂與突兀：

1. 需要對齊尺寸、容器規(guī)范
2. 自由的字體設(shè)計時，避免使用過多字體，字號<12pt 時慎用襯線體
3. 漸變色標簽要測試低亮度模式（半透明背景+低對比文字，閱讀效率↓60%。）

5. 相信好的設(shè)計帶來好的轉(zhuǎn)化

Tag 很小，我們來看下明確對業(yè)務(wù)轉(zhuǎn)化提升的數(shù)據(jù)驗證：

電商類標簽承載著「限時折扣」「滿減」等促銷信息，數(shù)據(jù)表明合理的標簽設(shè)計可提升商品點擊率 23%-47%：

1. 阿里巴巴 UED 研究 2023 年淘寶首頁改版測試顯示，將「限時折扣」標簽從灰色描邊改為紅色填充后，商品點擊率提升 28%-42%
2. 京東零售設(shè)計研究院 2024 年 618 大促期間，通過 A/B 測試發(fā)現(xiàn)：
3. 促銷標簽采用「價格 + 進度條」組合樣式，點擊率提升 47%
4. 服務(wù)標簽加入「閃電退款」icon，轉(zhuǎn)化率提升 19%
5. eMarketer 行業(yè)報告 《2024 全球電商設(shè)計趨勢》指出，優(yōu)化標簽視覺層級可使移動端促銷信息傳達效率提升 35%，典型品牌如 Shein 通過標簽動畫設(shè)計將季末清倉轉(zhuǎn)化率提高 23%
6. 拼多多「百億補貼」標簽 通過異形設(shè)計 + 動態(tài)價格閃爍，使該標簽點擊率比常規(guī)標簽高出 3.2 倍（極光大數(shù)據(jù) 2024Q1 報告）
7. 亞馬遜 Prime Day 標簽 采用「倒計時 + 進度條」組合，引導(dǎo)用戶點擊后加購率提升 63%（據(jù)亞馬遜官方設(shè)計博客披露）

內(nèi)容類標簽通過「熱榜」「原創(chuàng)」等標簽完成流量分發(fā)，頭部內(nèi)容平臺利用標簽實現(xiàn)用戶停留時長提升 15%

① 知乎「熱榜」標簽（信息分級策略）：

A/B 測試顯示，帶「熱榜」標簽的入口點擊率比普通文字鏈提升 62%，用戶平均瀏覽時長增加 9 分鐘（占全站時長 15%）

② 抖音「時下流行」動態(tài)標簽（場景化推薦）：

在視頻封面疊加半透明動態(tài)標簽，文字內(nèi)容由算法實時生成（如「10w+北京白領(lǐng)在跳」「海淀區(qū)早餐新寵」）2023 年 Q2 財報顯示，帶場景化標簽的視頻完播率提升 23%，相關(guān)話題用戶 UGC 產(chǎn)出量增長 47%

設(shè)計秘密：將冰冷算法轉(zhuǎn)化為具象的地域/人群標簽，觸發(fā)「身份認同」

③ 紅書「原創(chuàng)」徽章系統(tǒng)（創(chuàng)作者激勵）：

2024 創(chuàng)作者大會披露，獲得「原創(chuàng)」標簽的博主周更頻率提高 2.1 倍，用戶對帶標內(nèi)容信任度評分達 86.7 分

原創(chuàng)標簽商品鏈接轉(zhuǎn)化率比普通筆記高 38%，推動平臺廣告 CPM 價格上漲 17%

寫在最后

這份組件規(guī)范并不是最終答案，因為規(guī)范文檔的價值不在于完美無缺，而在于它能否在版本迭代中保持生命力。

在實際使用中，我們可能會遇到各種特殊場景或超出當前規(guī)則的情況，這些不是例外，而是幫助我們完善系統(tǒng)的契機。

正如千島的產(chǎn)品在不斷進化，我們的設(shè)計系統(tǒng)也將在持續(xù)打磨中愈發(fā)成熟。期待你的反饋~

作者：Echo Design