寫在前面

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

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

更多相關(guān)干貨：

一、Tag 是什么？

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

1. 核心功能

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

狀態(tài)標(biāo)記：展示動(dòng)態(tài)信息

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

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

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

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

簡潔：內(nèi)容簡短，文案精準(zhǔn)表意，不給用戶認(rèn)知負(fù)擔(dān)

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

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

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

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

主要規(guī)則 ↓

3. Button Tag Tooltip 分不清？

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

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

二、平衡功能與用戶體驗(yàn)

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

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

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

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

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

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

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

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

一致性規(guī)則

同一場景下所有 Tag 采用統(tǒng)一處理策略（全截?cái)嗷蛉珦Q行）

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

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

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

3. Tag 的可交互行為

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

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

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

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

確保觸控?zé)釁^(qū) ≥ 48×48dp（Material Design 標(biāo)準(zhǔn)）；通常建議高度不小于 44px，以方便用戶在移動(dòng)設(shè)備上進(jìn)行觸摸操作

體驗(yàn)層：反饋即時(shí)性

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

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

情感層：微交互記憶點(diǎn)

定制品牌化動(dòng)效，如標(biāo)簽選中時(shí)彈出吉祥物表情

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

4. 自定義 Tag

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

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

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

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

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

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

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

① 知乎「熱榜」標(biāo)簽（信息分級(jí)策略）：

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

② 抖音「時(shí)下流行」動(dòng)態(tài)標(biāo)簽（場景化推薦）：

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

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

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

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

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

寫在最后

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

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

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