標(biāo)簽規(guī)范設(shè)計方法探索
編輯導(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é)議
這篇文章對標(biāo)簽設(shè)計講解得很透徹,實用性強(qiáng),對于提升產(chǎn)品設(shè)計很有幫助!
很全面,很有收獲!
6666
還有很多不足,共同努力加油~
牛逼哇哇哇哇
感謝老鐵~多交流共成長~
66666