標(biāo)簽可以幫助傳達(dá)信息，進(jìn)行產(chǎn)品分類，進(jìn)行營銷分流等。本文圍繞標(biāo)簽規(guī)范設(shè)計(jì)方法進(jìn)行分析，總結(jié)了一些方法論，希望對(duì)你有幫助。

前言

標(biāo)簽是我們最常用的設(shè)計(jì)組件之一，由于功能強(qiáng)大，使用場景多樣化深受喜愛。好的標(biāo)簽設(shè)計(jì)就像一劑完美的助攻，可以用于信息的傳達(dá)、建立操作預(yù)知，可以幫用戶及產(chǎn)品進(jìn)行分類，也可以進(jìn)行營銷分流與智能場景的運(yùn)用，能幫助用戶完成當(dāng)前的任務(wù)，幫助產(chǎn)品達(dá)到業(yè)務(wù)目標(biāo)。鑒于其重要性和多樣化，建立一套標(biāo)簽視覺規(guī)范更好的去賦能和指導(dǎo)設(shè)計(jì)尤為重要。以下內(nèi)容是針對(duì)我司業(yè)務(wù)所做的標(biāo)簽規(guī)范過程中的一些思考和探索…

目錄

標(biāo)簽的定義

百度釋義：「網(wǎng)絡(luò)標(biāo)簽(Tag)是一種互聯(lián)網(wǎng)內(nèi)容組織方式，是相關(guān)性很強(qiáng)的關(guān)鍵字，它幫助人們輕松的描述和分類內(nèi)容，以便于檢索和分享，Tag 已經(jīng)成為 web 2.0 的重要元素。標(biāo)簽將內(nèi)容的組織權(quán)利從網(wǎng)站管理者下放到用戶手中，充分體現(xiàn)了 web2.0 自下而上，用戶參與的特點(diǎn)」

標(biāo)簽體系在產(chǎn)品設(shè)計(jì)過程中是非常重要的，也是設(shè)計(jì)連接前后端同學(xué)將業(yè)務(wù)需求在開發(fā)落地中不可或缺的一部分。科學(xué)的標(biāo)簽設(shè)計(jì)會(huì)根據(jù)業(yè)務(wù)需求+品牌理念的設(shè)計(jì)策略，此類標(biāo)簽擁有獨(dú)特的視覺符號(hào)，方便用戶快速識(shí)別，提升信息轉(zhuǎn)化的效率。

標(biāo)簽相當(dāng)于連接內(nèi)容的"傳聲筒"，其音量的大小可以影響到用戶的決策。依托于用戶場景，將重點(diǎn)信息內(nèi)容透傳給用戶側(cè)，對(duì)提升用戶對(duì)內(nèi)容的認(rèn)知度有所幫助，輔助用戶決策，即標(biāo)簽的價(jià)值。

簡而言之，標(biāo)簽就是結(jié)合產(chǎn)品內(nèi)容和特征提煉出的一種關(guān)鍵詞，便于用戶根據(jù)自身需求查找和使用的一種描述和定義。用戶最終通過標(biāo)簽進(jìn)行信息反饋和交互操作。

標(biāo)簽的組成元素

標(biāo)簽由顏色、文字、形狀等元素組成，每個(gè)元素相輔相成，和諧統(tǒng)一。

1. 顏色

顏色是標(biāo)簽設(shè)計(jì)中的一個(gè)重要元素，可以幫助用戶快速識(shí)別，提升信息轉(zhuǎn)化的效率。標(biāo)簽的顏色應(yīng)用上不僅要清晰，精準(zhǔn)，高效的傳達(dá)信息，同時(shí)在多種顏色組合中也要兼顧著品牌。所以建立一套顏色板可以更好的方便標(biāo)簽的設(shè)計(jì)應(yīng)用，建立的色板的原則是什么？以及有哪些方法來指導(dǎo)顏色板的建立呢？待我一一揭曉…

色彩模式選擇

色彩模式是數(shù)字世界中表示顏色的一種算法。在數(shù)字世界中，為了表示各種顏色，人們通常將顏色劃分為若干分量。由于成色原理的不同，決定了生成顏色方式上的區(qū)別。日常生活中有哪些常用色彩模式？

RGB 模式：以"加色混合"的方式，由紅、綠、藍(lán)（三原色），三色混合，表現(xiàn)出各種的顏色，我們的計(jì)算機(jī)屏幕就使用這種方式表現(xiàn)顏色。這種色彩表現(xiàn)方式，稱為 RGB 色彩。適用于顯示器、投影儀、掃描儀、數(shù)碼相機(jī)等。

CMYK 模式：以"減法原則"成色，物體色彩的反射色，是用畫具或染料、油墨等"色材"來表現(xiàn)顏色，印刷品基本是由青、洋紅、黃、黑四種油墨相互組合而成，這種方式稱為 CMYK 色彩。適用于打印機(jī)、印刷機(jī)等。

HSB 模式：以人類對(duì)顏色的感覺為基礎(chǔ)，描述了顏色的三種基本特性。它以色相（H）、飽和度（S）和亮度（B）來描述顏色的基本特征，為將自然顏色轉(zhuǎn)換為計(jì)算機(jī)創(chuàng)建的色彩提供了一種直接方法。

HSB 模式最友好的特性就是，可以完美固定 HSB 中的某一個(gè)參數(shù)，只對(duì)其他兩個(gè)參數(shù)做改變或者只改動(dòng)其中的一個(gè)參數(shù)，這一點(diǎn)，完全符合人的色彩直覺，也只有 HSB 能做到，而 RGB、CMYK 都是牽一發(fā)動(dòng)全身的節(jié)奏。(故選此色彩模式建立基礎(chǔ)色板）

色板的推導(dǎo)

為了覆蓋我司多業(yè)務(wù)線的復(fù)雜場景以及設(shè)計(jì)側(cè)輸出的規(guī)范統(tǒng)一性，以品牌色為基礎(chǔ)在色環(huán)上 0°-360°之間取色，同時(shí)遵循高效易識(shí)別的原則。

這里需要強(qiáng)調(diào)的是標(biāo)簽的配色有別于日常配色設(shè)計(jì)，需加大色相區(qū)分，保證清晰識(shí)別。所以將間隔設(shè)定為±30°取色，按照色環(huán)順序：品牌色——類似色（正負(fù) 30° 位置）——鄰近色（正負(fù) 60° 位置）——對(duì)比色（正負(fù) 120° 位置）——互補(bǔ)色（180° 位置）生成12個(gè)主彩色（黑灰無色相）

為了獲得更豐富的色彩和保持頁面統(tǒng)一性，基于 12 個(gè)主顏色，在其中增加白色和黑色，改變明度和飽和度，形成同色系的調(diào)色板，在色彩系統(tǒng)里稱為 Tints and Shades 系統(tǒng)，通過此算法可以獲得更多色階滿足設(shè)計(jì)需要。

Tints and Shades 系統(tǒng)

我們?cè)?skctch 里根據(jù) tint 和 shade 系統(tǒng)的算法，將其可視化，方便每個(gè)顏色都在統(tǒng)一的規(guī)則里形成衍生色，形成基礎(chǔ)色板。

根據(jù)上圖我們可以發(fā)現(xiàn)：

「亮度區(qū)域」：S 值以 S/5 結(jié)果值為增量遞減，B 值以（100-B)/5 結(jié)果值為增量遞增；

「飽和度區(qū)域」：S 值以（100-S)/5 結(jié)果值為增量遞增，B 值以 B/5 結(jié)果值為增量遞減;

以我司品牌色，H（29）、S（88）、B（98）為例：

「亮度色階」HSB 參數(shù)：（29，88，98）、（29，、70，98）、（29，52，98）、（29，34，98）、（29，16，98）

「飽和度色階」HSB 參數(shù)：（29，88，98）、（29，、90，78）、（29，92，58）、（29，94，38）、（29，96，18）

其中運(yùn)算結(jié)果數(shù)值出現(xiàn)小數(shù)點(diǎn)時(shí)四舍五入，根據(jù)此算法由此得到 12 色的基礎(chǔ)色板如下：

顏色情緒

不同的顏色帶給我們不同的色彩情緒，比如一說到藍(lán)、藍(lán)紫、藍(lán)綠、紫、淡藍(lán)等色，則容易聯(lián)想到太空、冰雪、海洋等物像，就會(huì)產(chǎn)生寒冷、理智、平靜、稀薄的、淡的、遠(yuǎn)的、輕的、等感覺。 暖色有大紅、桔黃、玫紅、黃橙、紅紫等著色，就聯(lián)想到太陽、火焰、熱血等物像，產(chǎn)生溫暖、熱烈、危險(xiǎn)等感覺，使人產(chǎn)生沖動(dòng)情緒….，所以標(biāo)簽的色彩應(yīng)用要與業(yè)務(wù)的行業(yè)屬性契合，不只是簡單的色彩堆砌，對(duì)色彩情緒的了解會(huì)我們做標(biāo)簽設(shè)計(jì)起到事半功倍的效果。

紅色：熱情、活潑、張揚(yáng)、激動(dòng)、警告……

橙色：成功、積極、活力、勇敢、自由….

黃色：年輕、溫暖、鼓舞、柔和…..

綠色：自然、健康、新鮮，安全、平靜、品質(zhì)、生命、希望…..

藍(lán)色：理智、安全、科技、寧靜、平和….

紫色：高貴、優(yōu)雅、神秘、權(quán)利…..

粉色：溫馨、浪漫、明快、真誠…..

…….

2. 形狀

形狀是標(biāo)簽信息的一個(gè)外化直觀傳遞，應(yīng)符合產(chǎn)品的品牌調(diào)性（比如直角、圓角、其它隱喻造型…..)，根據(jù)我司業(yè)務(wù)屬性將標(biāo)簽大致分為：

• 基本型：4px 圓角矩形，高度以 28px 為主；
• 異型：高度以 32px 為主，具體根據(jù)業(yè)務(wù)場景需要設(shè)計(jì)

在標(biāo)簽組合使用中，同屬性的標(biāo)簽造型組合應(yīng)統(tǒng)一和諧，規(guī)避不規(guī)則的造型應(yīng)用如下：

標(biāo)簽信息層級(jí)定義

日常項(xiàng)目需求中，最棘手的莫過于，產(chǎn)品業(yè)務(wù)側(cè)在功能模塊里堆加一大堆標(biāo)簽，并且都強(qiáng)調(diào)是最重要的，在這種情況下對(duì)于設(shè)計(jì)側(cè)而言就不只是設(shè)計(jì)好看的問題了，這需要對(duì)標(biāo)簽的優(yōu)先級(jí)作出分類，有序的設(shè)計(jì)表達(dá)。對(duì)用戶而言我們的標(biāo)簽不能既是療效又是腳鐐。

從用戶層面與產(chǎn)品層面分別去分析需求對(duì)用戶與產(chǎn)品的重要程度，配合著 KANO 模型對(duì)需求分析，確定標(biāo)簽的優(yōu)先層級(jí)排序：

1. 產(chǎn)品的角度：產(chǎn)品需要用戶能快速篩選信息，促使用戶快速抉擇轉(zhuǎn)化
2. 用戶的角度：用戶需要目標(biāo)信息與自身相匹配，能快速找到需要的信息

1. KANO 模型

KANO 模型是東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)提出的通過分析用戶對(duì)產(chǎn)品功能的滿意程度，對(duì)用戶需求分類和優(yōu)先排序，從而確定產(chǎn)品實(shí)現(xiàn)過程中的優(yōu)先級(jí)可將影響用戶滿意度的因素分為五類：基本型需求、期望型需求、興奮型需求、無差異需求、反向型需求。

需求分析工具：

必備型：如果不滿足該需求，用戶滿意度會(huì)大幅降低

期望型：如果提供該功能，用戶滿意度提高，如果不提供該功能，用戶滿意度會(huì)隨之下降

興奮型：如果不提供此功能，不會(huì)降低用戶的滿意度，一旦提供此功能，用戶滿意度會(huì)大幅提升

無差異型：無論提供或不提供此功能，用戶滿意度不會(huì)發(fā)生改變，用戶根本不在意有沒有這個(gè)功能

反向性型：用戶根本都沒有此需求，提供后用戶滿意度反而下降

為了能夠?qū)?biāo)簽層級(jí)區(qū)分，這里我選取其中影響用戶滿意度的 4 類象限屬性來評(píng)定優(yōu)先級(jí)，分別為：必備型 > 期望型 > 興奮型 > 無差異型，并給予匹配的分值進(jìn)行量化，然后從產(chǎn)品側(cè)和用戶側(cè)做訪談?dòng)涗?，綜合兩側(cè)的得分來確定標(biāo)簽的優(yōu)先級(jí)。

「舉例」：xxx 模塊中的標(biāo)簽，選用 KANO 模型正向維度從用戶和產(chǎn)品重要程度去分別評(píng)分，設(shè)定：必備型（4 分） > 期望型（3 分） > 魅力型（2 分） > 無差異型（1 分），通過訪談等形式，匯總不同側(cè)的排序順序并給出對(duì)應(yīng)結(jié)果分?jǐn)?shù)，如：

用戶：標(biāo)簽 1(4 分) ＞標(biāo)簽 2(3 分) ＞標(biāo)簽 3(2 分) ＞標(biāo)簽 4(1 分)

產(chǎn)品： 標(biāo)簽 3(4 分) ＞標(biāo)簽 2(3 分) ＞標(biāo)簽 4(2 分) ＞標(biāo)簽 1(1 分)

分別將對(duì)應(yīng)標(biāo)簽的得分乘積進(jìn)行排序，確定標(biāo)簽的功能層級(jí)，最后結(jié)合標(biāo)簽顏色層級(jí)規(guī)范，進(jìn)行最終的視覺樣式設(shè)計(jì)：

標(biāo)簽 1: 4 * 1 = 4

標(biāo)簽 2: 3 * 3 = 9

標(biāo)簽 3: 2 * 4 = 8

標(biāo)簽 4: 1 * 2 = 2

最終標(biāo)簽層級(jí)： 標(biāo)簽 2＞標(biāo)簽 3＞標(biāo)簽 1＞標(biāo)簽 4

2. 業(yè)務(wù)應(yīng)用實(shí)例

拿到需求后，不是隨便的臨摹競品，而是要有理有據(jù)的使用 KANO 模型進(jìn)行需求分析，得到用戶與產(chǎn)品想要的效果。以我司貨源列表的標(biāo)簽應(yīng)用為例，主要有：貨源標(biāo)簽、會(huì)員標(biāo)簽、品牌標(biāo)簽、特殊標(biāo)簽等標(biāo)簽類型，按照以上方法進(jìn)行評(píng)分定級(jí)：

首先分別從用戶和產(chǎn)品的重要度去訪談并評(píng)測排序打分

• 用戶：貨源標(biāo)簽 ＞會(huì)員標(biāo)簽＞品牌標(biāo)簽＞特殊標(biāo)簽
• 產(chǎn)品：貨源標(biāo)簽、品牌標(biāo)簽 ＞特殊標(biāo)簽＞會(huì)員標(biāo)簽

最終評(píng)分：貨源標(biāo)簽：4*4=16、品牌標(biāo)簽：2*4=8、特殊標(biāo)簽：1*3=3、會(huì)員標(biāo)簽：3*1=3，根據(jù)所得分?jǐn)?shù)排序，結(jié)合顏色層級(jí)設(shè)計(jì)規(guī)則，有差別的通過線、面等樣式表現(xiàn)出標(biāo)簽的權(quán)重層級(jí)

標(biāo)簽視覺層級(jí)定義

標(biāo)簽應(yīng)用中應(yīng)根據(jù)信息級(jí)別高低有差別使用，標(biāo)簽顏色占比越大，造型個(gè)性且飽和度明度越高的標(biāo)簽層級(jí)越高，反之灰色系標(biāo)簽層級(jí)相對(duì)較低，適用于點(diǎn)綴輔助信息的傳達(dá)：有色>無色、有色面>線；

多標(biāo)簽組合應(yīng)用中，顏色盡量控制在 3 種色相以內(nèi)，具體根據(jù)實(shí)際應(yīng)用場景而定，不同屬性的標(biāo)簽配色需結(jié)合標(biāo)簽的權(quán)重，明快且容易區(qū)分；相同屬性的標(biāo)簽組合應(yīng)用中可不做色相區(qū)分；若基礎(chǔ)色板不滿足業(yè)務(wù)需要，也可按基礎(chǔ)色靈活擴(kuò)展補(bǔ)充顏色有序使用 。

標(biāo)簽位置定義

標(biāo)簽在日常應(yīng)用場景中除了展示在內(nèi)容中的常規(guī)位置外，還有 2 種常用的位置樣式，我稱之為：全貼邊式標(biāo)簽、孤立式標(biāo)簽

這些位置樣式根據(jù)標(biāo)簽的重要性去設(shè)置，在使用過程中如何確定哪個(gè)位置是重要的，用戶的視覺流順序是怎樣的呢，這里我結(jié)合古騰堡原則去分析使用。

「古騰堡原則」是由 14 世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出，早在 20 世紀(jì) 50 年代，他在設(shè)計(jì)報(bào)紙的過程中，提出了一項(xiàng)原則，認(rèn)為人的閱讀方式應(yīng)該是遵循某種習(xí)慣進(jìn)行的，就像讀書一樣，由左到右，從上到下。經(jīng)過研究最終得出被后人所熟知的結(jié)論：古騰堡原則，并附上了一張圖，名為「古騰堡圖」。古騰堡圖將畫面所呈現(xiàn)的內(nèi)容分成四個(gè)象限：

1. 第一視覺區(qū)：左上方，用戶首先注意到的地方
2. 強(qiáng)休息區(qū)：右上方，較少被注意到
3. 弱休息區(qū)：左下方，最少被注意到
4. 終端視覺區(qū)：右下方，視覺流終點(diǎn)

從而我們可以得出同一場景內(nèi)標(biāo)簽位置視覺醒目度：左上 > 右上，根據(jù)標(biāo)簽的重要性、背景元素等信息，確定標(biāo)簽的展示位置規(guī)則，將其劃分為：首要性標(biāo)簽 > 重要性標(biāo)簽 > 一般性標(biāo)簽

• 首頁性：建議用左側(cè)全貼邊樣式標(biāo)簽（若不遮擋內(nèi)容，也可用孤立樣式）
• 重要性：左右皆可，看是否會(huì)和首頁性標(biāo)簽沖突，以及出現(xiàn)頻率高低（如沖突，居右展示）
• 一般性：建議采用居右貼邊樣式，減少用戶干擾。（若不存在其它優(yōu)先級(jí)影響，可以提升樣式重要度，如右貼邊樣式可以升級(jí)為孤立式……）

標(biāo)簽類型/規(guī)范定義

對(duì)于標(biāo)簽類型而言，由于每個(gè)平臺(tái)的屬性各不同。所以面對(duì)復(fù)雜的應(yīng)用場景，我們?cè)谠O(shè)計(jì)匹配時(shí)要尋找屬于復(fù)合自身產(chǎn)品業(yè)務(wù)的屬性的方法，以我司為例標(biāo)簽的類型主要分為：常規(guī)標(biāo)簽、異形標(biāo)簽、會(huì)員/等級(jí)標(biāo)簽、營銷標(biāo)簽、角標(biāo)簽、印章標(biāo)簽

1. 常規(guī)標(biāo)簽

主要適用于貨源列表、訂單列表，小黑板，詳情頁…等業(yè)務(wù)功能場景，是產(chǎn)品中最高頻使用的類型，按重要層級(jí)可分為：首要標(biāo)簽 > 中等標(biāo)簽 > 一般標(biāo)簽 > 次要標(biāo)簽

首要標(biāo)簽：用于描述重要信息，主要以（深色面）背景樣式展示

中等標(biāo)簽：用于描述次重要信息，主要是以（淺色面）背景樣式展示

一般標(biāo)簽：用于描述一般信息，主要是以（有色描邊）樣式展示

次要標(biāo)簽：用于描述輔助信息，主要是以（灰色系）描邊或面的樣式展示（在不同情景下可由無色系升級(jí)為有色系展示）

2. 異形標(biāo)簽

適用于強(qiáng)調(diào)業(yè)務(wù)模塊中最重要層級(jí)的的功能信息標(biāo)識(shí)，采用非標(biāo)造型，重要層級(jí)：異形標(biāo)簽>常規(guī)標(biāo)簽，展示位置多采用全貼邊樣式（左上>右上…），根據(jù)內(nèi)容重要層級(jí)而定。

3. 會(huì)員/等級(jí)標(biāo)簽

主要用于會(huì)員業(yè)務(wù)的身份及等級(jí)標(biāo)識(shí)，多適用于人/姓名后展示，多以圖形或者圖形+文本的樣式展示

4. 營銷引流標(biāo)簽

主要用于描述業(yè)務(wù)目標(biāo)對(duì)象的特色及等級(jí)，置于角落（左上，右上…）±45°展示

要適用于業(yè)務(wù)功能營銷轉(zhuǎn)化引導(dǎo)，展示樣式主要有：文字后加標(biāo)簽、信息功能上部加標(biāo)簽，對(duì)比鮮明，在某些場景使用上和徽標(biāo)類似，除了對(duì)其識(shí)別造型統(tǒng)一外，還應(yīng)對(duì)其使用場景加以明確：

居右側(cè)展示：與按鈕組合使用時(shí)，標(biāo)簽字段數(shù)量不能大于標(biāo)簽 1/2 寬度，末端與按鈕右對(duì)齊；

居左側(cè)展示：按鈕高度大于單行標(biāo)準(zhǔn)按鈕高度且重要層級(jí)高，或右側(cè)有選擇項(xiàng)占用時(shí)；

5. 角標(biāo)

主要用于描述業(yè)務(wù)目標(biāo)對(duì)象的特色及等級(jí)，置于角落（左上，右上…）±45°展示

6. 印章標(biāo)簽

主要用于描述功能任務(wù)（如協(xié)議簽訂，流程權(quán)益…..)的完成狀態(tài)

總結(jié)

麻雀雖小，五臟俱全，標(biāo)簽這個(gè)在 UI 設(shè)計(jì)中看似不起眼的元素，卻包羅萬象，好的設(shè)計(jì)可以驅(qū)動(dòng)數(shù)據(jù)，賦能業(yè)務(wù)，一個(gè)科學(xué)的友好的標(biāo)簽應(yīng)該是經(jīng)得起推敲且能給用戶帶去更多便利和驚喜的精靈。本文是針對(duì)我們?cè)谛枨笤O(shè)計(jì)中從標(biāo)簽的誕生到成長應(yīng)用這一過程的量身定做，無規(guī)矩不成方圓，科學(xué)的規(guī)范會(huì)帶給我們更多的便捷，能做到你好！我好！用戶好！

設(shè)計(jì)是多元的，它不會(huì)朝著一個(gè)方向恒定發(fā)展，我們要做的是貼近生活現(xiàn)身場景迎接更豐富的變化萬千。合適的設(shè)計(jì)才是有價(jià)值的設(shè)計(jì)，需要你我去調(diào)整視角去審視自己的設(shè)計(jì)，審視我們的需求。科學(xué)的方法更是解決問題的關(guān)鍵，也是項(xiàng)目有序落地的保障，理論與實(shí)踐結(jié)合，知行合一。以上就是我在規(guī)范設(shè)計(jì)過程中的一些思考和探索，與君共享！

作者：金陵字造局