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

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

鑒于其重要性和多樣化，建立一套標簽視覺(jué)規范更好的去賦能和指導設計尤為重要。以下內容是針對我司業(yè)務(wù)所做的標簽規范過(guò)程中的一些思考和探索。

一、標簽的定義

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

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

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

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

二、標簽的組成元素

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

2.1 顏色

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

2.1.1 色彩模式選擇

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

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

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

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

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

2.1.2 色板的推導

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

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

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

Tints and Shades系統

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

根據上圖我們可以發(fā)現：

【亮度區域】：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）

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

2.1.3 顏色情緒

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

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

2.2 形狀

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

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

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

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

三、標簽信息層級定義

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

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

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

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

3.1 KANO 模型

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

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

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

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

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

反向性型：用戶(hù)根本都沒(méi)有此需求，提供后用戶(hù)滿(mǎn)意度反而下降

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

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

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

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

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

標簽1:4 * 1 = 4

標簽2:3 * 3 = 9

標簽3:2 * 4 = 8

標簽4:1 * 2 = 2

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

3.2 業(yè)務(wù)應用實(shí)例

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

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

用戶(hù)：貨源標簽 ＞會(huì )員標簽＞品牌標簽＞特殊標簽產(chǎn)品：貨源標簽、品牌標簽 ＞特殊標簽＞會(huì )員標簽

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

四、標簽視覺(jué)層級定義

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

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

五、標簽位置定義

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

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

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

第一視覺(jué)區：左上方，用戶(hù)首先注意到的地方

強休息區：右上方，較少被注意到

弱休息區：左下方，最少被注意到

終端視覺(jué)區：右下方，視覺(jué)流終點(diǎn)

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

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

重要性：左右皆可，看是否會(huì )和首頁(yè)性標簽沖突，以及出現頻率高低（如沖突，居右展示）

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

六、標簽類(lèi)型/規范定義

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

6.1 常規標簽

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

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

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

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

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

6.2 異形標簽

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

6.3 會(huì )員/等級標簽

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

6.4 營(yíng)銷(xiāo)引流標簽

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

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

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

6.5 角標

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

6.6 印章標簽

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

七、總結

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

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

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

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