編輯導(dǎo)讀：標(biāo)簽可以幫助傳達(dá)信息，進(jìn)行產(chǎn)品分類，進(jìn)行營銷分流等，是一個強(qiáng)大且常用的設(shè)計組件之一。本文作者圍繞標(biāo)簽規(guī)范設(shè)計方法進(jìn)行分析，總結(jié)了一些方法論，希望對你有幫助。

標(biāo)簽是我們最常用的設(shè)計組件之一，由于功能強(qiáng)大，使用場景多樣化深受喜愛。好的標(biāo)簽設(shè)計就像一劑完美的助攻，可以用于信息的傳達(dá)、建立操作預(yù)知，可以幫用戶及產(chǎn)品進(jìn)行分類，也可以進(jìn)行營銷分流與智能場景的運用，能幫助用戶完成當(dāng)前的任務(wù)，幫助產(chǎn)品達(dá)到業(yè)務(wù)目標(biāo)。

鑒于其重要性和多樣化，建立一套標(biāo)簽視覺規(guī)范更好的去賦能和指導(dǎo)設(shè)計尤為重要。以下內(nèi)容是針對我司業(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自下而上，用戶參與的特點】

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

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

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

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

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

2.1 顏色

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

2.1.1 色彩模式選擇

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

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

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

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

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

2.1.2 色板的推導(dǎo)

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

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

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

Tints and Shades系統(tǒng)

我們在skctch里根據(jù)tint和shade系統(tǒng)的算法，將其可視化，方便每個顏色都在統(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）

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

2.1.3 顏色情緒

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

• 紅色：熱情、活潑、張揚、激動、警告……
• 橙色：成功、積極、活力、勇敢、自由….
• 黃色：年輕、溫暖、鼓舞、柔和…..
• 綠色：自然、健康、新鮮，安全、平靜、品質(zhì)、生命、希望…..
• 藍(lán)色：理智、安全、科技、寧靜、平和….
• 紫色：高貴、優(yōu)雅、神秘、權(quán)利…..
• 粉色：溫馨、浪漫、明快、真誠…..
• …….

2.2 形狀

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

基本型：4px圓角矩形，高度以28px為主；

異型：高度以32px為主，具體根據(jù)業(yè)務(wù)場景需要設(shè)計

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

三、標(biāo)簽信息層級定義

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

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

產(chǎn)品的角度：產(chǎn)品需要用戶能快速篩選信息，促使用戶快速抉擇轉(zhuǎn)化

用戶的角度：用戶需要目標(biāo)信息與自身相匹配，能快速找到需要的信息

3.1 KANO 模型

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

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

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

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

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

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

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

【舉例】：xxx模塊中的標(biāo)簽，選用KANO 模型正向維度從用戶和產(chǎn)品重要程度去分別評分，設(shè)定：必備型（4分） > 期望型（3分） > 魅力型（2分） > 無差異型（1分），通過訪談等形式，匯總不同側(cè)的排序順序并給出對應(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分)

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

標(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)簽層級： 標(biāo)簽2 ＞標(biāo)簽3 ＞標(biāo)簽1 ＞標(biāo)簽4

3.2 業(yè)務(wù)應(yīng)用實例

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

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

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

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

四、標(biāo)簽視覺層級定義

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

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

五、標(biāo)簽位置定義

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

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

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

第一視覺區(qū)：左上方，用戶首先注意到的地方

強(qiáng)休息區(qū)：右上方，較少被注意到

弱休息區(qū)：左下方，最少被注意到

終端視覺區(qū)：右下方，視覺流終點

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

首頁性：建議用左側(cè)全貼邊樣式標(biāo)簽（若不遮擋內(nèi)容，也可用孤立樣式）

重要性：左右皆可，看是否會和首頁性標(biāo)簽沖突，以及出現(xiàn)頻率高低（如沖突，居右展示）

一般性：建議采用居右貼邊樣式，減少用戶干擾。（若不存在其它優(yōu)先級影響，可以提升樣式重要度，如右貼邊樣式可以升級為孤立式……）

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

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

6.1 常規(guī)標(biāo)簽

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

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

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

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

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

6.2 異形標(biāo)簽

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

6.3 會員/等級標(biāo)簽

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

6.4 營銷引流標(biāo)簽

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

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

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

6.5 角標(biāo)

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

6.6 印章標(biāo)簽

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

七、總結(jié)

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

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

本文由 @微心主義 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議