標簽可以幫助傳達信息，進行產品分類，進行營銷分流等。本文圍繞標簽規范設計方法進行分析，總結了一些方法論，希望對你有幫助。

拓展閱讀：

前言

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

目錄

標簽的定義

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

標簽體系在產品設計過程中是非常重要的，也是設計連接前后端同學將業務需求在開發落地中不可或缺的一部分。科學的標簽設計會根據業務需求+品牌理念的設計策略，此類標簽擁有獨特的視覺符號，方便用戶快速識別，提升信息轉化的效率。

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

簡而言之，標簽就是結合產品內容和特征提煉出的一種關鍵詞，便于用戶根據自身需求查找和使用的一種描述和定義。用戶最終通過標簽進行信息反饋和交互操作。

標簽的組成元素

標簽由顏色、文字、形狀等元素組成，每個元素相輔相成，和諧統一。

1. 顏色

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

色彩模式選擇

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

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

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

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

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

色板的推導

為了覆蓋我司多業務線的復雜場景以及設計側輸出的規范統一性，以品牌色為基礎在色環上 0°-360°之間取色，同時遵循高效易識別的原則。

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

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

Tints and Shades 系統

我們在 skctch 里根據 tint 和 shade 系統的算法，將其可視化，方便每個顏色都在統一的規則里形成衍生色，形成基礎色板。

根據上圖我們可以發現：

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

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

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

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

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

其中運算結果數值出現小數點時四舍五入，根據此算法由此得到 12 色的基礎色板如下：

顏色情緒

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

色彩搭配指南：

紅色：熱情、活潑、張揚、激動、警告……

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

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

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

藍色：理智、安全、科技、寧靜、平和....

紫色：高貴、優雅、神秘、權利…..

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

…….

2. 形狀

形狀是標簽信息的一個外化直觀傳遞，應符合產品的品牌調性（比如直角、圓角、其它隱喻造型…..)，根據我司業務屬性將標簽大致分為：

• 基本型：4px 圓角矩形，高度以 28px 為主；
• 異型：高度以 32px 為主，具體根據業務場景需要設計

在標簽組合使用中，同屬性的標簽造型組合應統一和諧，規避不規則的造型應用如下：

標簽信息層級定義

日常項目需求中，最棘手的莫過于，產品業務側在功能模塊里堆加一大堆標簽，并且都強調是最重要的，在這種情況下對于設計側而言就不只是設計好看的問題了，這需要對標簽的優先級作出分類，有序的設計表達。對用戶而言我們的標簽不能既是療效又是腳鐐。

從用戶層面與產品層面分別去分析需求對用戶與產品的重要程度，配合著 KANO 模型對需求分析，確定標簽的優先層級排序：

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

1. KANO 模型

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

需求分析工具：

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

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

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

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

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

為了能夠將標簽層級區分，這里我選取其中影響用戶滿意度的 4 類象限屬性來評定優先級，分別為：必備型 > 期望型 > 興奮型 > 無差異型，并給予匹配的分值進行量化，然后從產品側和用戶側做訪談記錄，綜合兩側的得分來確定標簽的優先級。

「舉例」：xxx 模塊中的標簽，選用 KANO 模型正向維度從用戶和產品重要程度去分別評分，設定：必備型（4 分） > 期望型（3 分） > 魅力型（2 分） > 無差異型（1 分），通過訪談等形式，匯總不同側的排序順序并給出對應結果分數，如：

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

產品： 標簽 3(4 分) ＞標簽 2(3 分) ＞標簽 4(2 分) ＞標簽 1(1 分)

分別將對應標簽的得分乘積進行排序，確定標簽的功能層級，最后結合標簽顏色層級規范，進行最終的視覺樣式設計：

標簽 1: 4 * 1 = 4

標簽 2: 3 * 3 = 9

標簽 3: 2 * 4 = 8

標簽 4: 1 * 2 = 2

最終標簽層級： 標簽 2＞標簽 3＞標簽 1＞標簽 4

2. 業務應用實例

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

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

• 用戶：貨源標簽 ＞會員標簽＞品牌標簽＞特殊標簽
• 產品：貨源標簽、品牌標簽 ＞特殊標簽＞會員標簽

最終評分：貨源標簽：4*4=16、品牌標簽：2*4=8、特殊標簽：1*3=3、會員標簽：3*1=3，根據所得分數排序，結合顏色層級設計規則，有差別的通過線、面等樣式表現出標簽的權重層級

標簽視覺層級定義

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

多標簽組合應用中，顏色盡量控制在 3 種色相以內，具體根據實際應用場景而定，不同屬性的標簽配色需結合標簽的權重，明快且容易區分；相同屬性的標簽組合應用中可不做色相區分；若基礎色板不滿足業務需要，也可按基礎色靈活擴展補充顏色有序使用 。

標簽位置定義

標簽在日常應用場景中除了展示在內容中的常規位置外，還有 2 種常用的位置樣式，我稱之為：全貼邊式標簽、孤立式標簽

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

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

1. 第一視覺區：左上方，用戶首先注意到的地方
2. 強休息區：右上方，較少被注意到
3. 弱休息區：左下方，最少被注意到
4. 終端視覺區：右下方，視覺流終點

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

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

標簽類型/規范定義

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

1. 常規標簽

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

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

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

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

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

2. 異形標簽

適用于強調業務模塊中最重要層級的的功能信息標識，采用非標造型，重要層級：異形標簽>常規標簽，展示位置多采用全貼邊樣式（左上>右上…），根據內容重要層級而定。

3. 會員/等級標簽

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

4. 營銷引流標簽

主要用于描述業務目標對象的特色及等級，置于角落（左上，右上…）±45°展示

要適用于業務功能營銷轉化引導，展示樣式主要有：文字后加標簽、信息功能上部加標簽，對比鮮明，在某些場景使用上和徽標類似，除了對其識別造型統一外，還應對其使用場景加以明確：

居右側展示：與按鈕組合使用時，標簽字段數量不能大于標簽 1/2 寬度，末端與按鈕右對齊；

居左側展示：按鈕高度大于單行標準按鈕高度且重要層級高，或右側有選擇項占用時；

5. 角標

主要用于描述業務目標對象的特色及等級，置于角落（左上，右上…）±45°展示

6. 印章標簽

主要用于描述功能任務（如協議簽訂，流程權益…..)的完成狀態

總結

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

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