首頁

初識數(shù)據(jù)可視化——圖表(基礎(chǔ)篇)

資深UI設(shè)計者

深度挖掘數(shù)據(jù)可視化圖表設(shè)計的框架和規(guī)范

在B端設(shè)計中,數(shù)據(jù)可視化是必不可少而且非常重要,越來越多的設(shè)計師需要和數(shù)據(jù)打交道,但是很多設(shè)計師不懂可視化當中不同用途的圖表規(guī)范,只是單純設(shè)計出好看的數(shù)據(jù)圖表,卻不能給用戶帶來更多的信息和價值。


因此掌握數(shù)據(jù)可視化能力是設(shè)計師必不可少的一個技能,然而目前國內(nèi)互聯(lián)網(wǎng)對于數(shù)據(jù)的教學(xué)不夠全面,這讓很多B端的設(shè)計師很苦惱,所以今天我結(jié)合自己的工作經(jīng)驗和大家分享一下--“數(shù)據(jù)可視化之圖表設(shè)計”,為大家梳理一套完整的數(shù)據(jù)可視化的框架,以及關(guān)于視化設(shè)計基本準則規(guī)范。幫助大家理解什么樣的數(shù)據(jù)對應(yīng)什么樣的圖標,了解顏色的意義,知道數(shù)據(jù)排版的要點。


一、基礎(chǔ)概念

將不可見的數(shù)據(jù)轉(zhuǎn)化為可見的圖形和符號,從中發(fā)現(xiàn)規(guī)律和特征,以獲取更多的信息和價值。

在當前互聯(lián)網(wǎng)的時代下,一頁圖可能對標一個龐大且復(fù)雜的數(shù)據(jù)表格,按照人類本身對圖的記憶遠大于對抽象文字的記憶,所以我們要學(xué)會讓數(shù)據(jù)說話,數(shù)據(jù)可視化除了“簡潔直觀”,還可有容易理解和記憶、傳遞信息更豐富的特點。

接下來我們開始思考如何制作數(shù)據(jù)可視化圖標?首先規(guī)范的流程是最好的前提,下面的工作流程結(jié)合我自己的經(jīng)驗和日常企業(yè)的數(shù)據(jù)分析場景,找到了一個合適的參考,我們就可以步步為營,避免很多不必要的返工,保證設(shè)計質(zhì)量和項目進度。


二、選定可視化圖表

很多小伙伴在做可視化圖表設(shè)計過程中,肯定遇到過這樣的困擾,發(fā)現(xiàn)自己做完的圖標并未能準確表達自己的意圖,也無法傳達自己的意圖,圖表通常讓用戶看完困惑不已,主要問題出現(xiàn)在分析的維度沒有找準或定義的比較混亂,面對B端龐大復(fù)雜的圖標,同樣的一個指標的數(shù)據(jù),我們從不同維度分析就會出現(xiàn)不同結(jié)果。用一句古話來形容:橫看成嶺側(cè)成峰。


國外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示,他把數(shù)據(jù)的關(guān)系分成了4種類型,幫助我們?nèi)ミx擇合適的圖表來呈現(xiàn),我對其進行了總結(jié)并美化(如下圖)。

上圖向大家展示了數(shù)據(jù)分析常用的4個維度,我們在選定數(shù)據(jù)指標后,我們需要和數(shù)據(jù)產(chǎn)品經(jīng)理溝通我們核心需求,是我們想通過可視化向用戶傳遞什么價值信息。上圖引導(dǎo)我們從“聯(lián)系、分布、比較、構(gòu)成”四個維度更有邏輯的思考這個問題,我們在進行圖表設(shè)計時首先進行需求的分析,熟悉數(shù)據(jù)并且明確數(shù)據(jù)要展現(xiàn)出來的信息,然后選用合適的圖表來進行數(shù)據(jù)的展現(xiàn)。

聯(lián)系:數(shù)據(jù)之間的相關(guān)性

分布:指標里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律

比較:數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面

構(gòu)成:指標里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何

考慮到日常企業(yè)的數(shù)據(jù)分析場景,圖中有些圖表使用頻率是非常低的。所以我參考了上圖的部分內(nèi)容,對其進行了總結(jié),重新整合成三個維度

圖表的作用,是幫助我們更好地看懂數(shù)據(jù)。選擇什么圖表,需要回答的首要問題是『我有什么數(shù)據(jù),需要用圖表做什么』,而不是 『圖表長成什么樣』 ,根據(jù)數(shù)據(jù)選用合適的圖表展現(xiàn)來把數(shù)據(jù)的信息傳達給用戶。因此我們從數(shù)據(jù)出發(fā)、熟悉每種圖表的定義、適用場景、優(yōu)缺點,從功能角度對圖表進行分類,這樣才能快速選擇合適的圖表。

2.2.1 比較類圖表

(1)柱狀圖

定義:柱狀圖是一種以長方形的長度為變量的統(tǒng)計圖表。長條圖用來比較兩個或以上的價值(不同時間或者不同條件),只有一個變量,通常利用于較小的數(shù)據(jù)集分析。

特點:

1、這個分類不限于地區(qū)、品牌等,可以是一個時間周期;

2、數(shù)量控制在5-12條最佳;

使用建議:

1、使用合適的寬度去適配柱條的寬度

當柱子太窄時,用戶的視覺可能會集中在兩個柱中間的負空間,而這里是不承載任何數(shù)據(jù)的。寬度推薦使用在1/2 柱寬到 1 柱寬之間,但也要視情況而定。

2、不推薦采用全圓角

柱形圖可以有適當?shù)膱A角,全圓角則有可能歪曲可視化圖表的表達,用戶可能無法明確是圓心還會頂點作為峰值。

3、不要使用非水平和豎直的文字標注,也不要使用轉(zhuǎn)行

有時坐標軸上的注釋文字會很多,所以很多人為了妥協(xié),在小空間內(nèi)顯示出所有的文字標注內(nèi)容,而使用傾斜的文本,或者將文本轉(zhuǎn)行處理。

不要用過于復(fù)雜的設(shè)計形式,數(shù)據(jù)可視化的第一要義是簡單易懂,所以在遇到標簽文字過長時,可以采用將柱狀圖轉(zhuǎn)化為條形圖


(2)條形圖

定義:條形圖是用寬度相同的條形的高度或長短來表示數(shù)據(jù)多少的圖形。條形圖能夠使人們一眼看出各個數(shù)據(jù)的大小,易于比較數(shù)據(jù)之間的差別。當條目較多,如大于12條,移動端上的柱狀圖會顯得擁擠不堪,更適合使用條形圖。

特點:

1、與柱狀圖類似,只是交換了X軸與Y軸位置;

2、多用于豎長的顯示區(qū)域,例如手機端、大屏的一側(cè);

3、多用于top排行或分類名稱較長的情況;

4、數(shù)量一般不超過30條,否則易帶來視覺和記憶負擔

使用建議:

1、采用有序排列,軸標簽右對齊

對多個數(shù)據(jù)系列排序時,如果不涉及到日期等特定數(shù)據(jù),最好能符合一定的邏輯用直觀的方式引導(dǎo)用戶更好的查看數(shù)據(jù)。

可以通過升序或降序排布,例如按照數(shù)量從多到少來對數(shù)據(jù)進行排序,也可以按照字母順序等來排布??傊凑者壿嬇判蚩梢砸欢ǔ潭壬弦龑?dǎo)人們更好地閱讀數(shù)據(jù)。

2、標簽直接顯示在柱體上

條形圖還可以通過省略橫軸和縱軸,并直接在柱子上表明數(shù)值,來降低數(shù)據(jù)墨水比,進一步提高信息的獲取效率。


(3)折線圖

定義:用于顯示數(shù)據(jù)在一個連續(xù)的時間間隔或者時間跨度上的變化,它的特點是反映事物隨時間或有序類別而變化的趨勢。折線圖分為直線折線圖和曲線折線圖。折線圖可以清晰的反映數(shù)據(jù)是遞增還是遞減、增減的速率、增減的規(guī)律(周期性、螺旋性等)、峰值等特征。

特點:

1、橫軸如果不是表示連續(xù)數(shù)值,折線圖的意義不大

2、數(shù)量一般不少于3條,否則用柱狀圖更合適

使用建議:

1、反映事物隨時間或有序類別而變化的趨勢

折線圖看的是趨勢,所有不是有序類別的不適合使用折線圖

2、視覺美化

折線圖可以清晰的反映數(shù)據(jù)是遞增還是遞減,不能和面積圖累計的概念混淆,由于折線圖放在界面上的視覺重量很弱,所以我們可以通過添加微漸變加重視覺。




(4)面積圖

定義:面積圖又叫區(qū)域圖。 它是在折線圖的基礎(chǔ)之上形成的, 它將折線圖中折線與自變量坐標軸之間的區(qū)域使用顏色或者紋理填充,顏色的填充可以更好的突出趨勢信息,需要注意的是顏色要帶有一定的透明度,透明度可以很好地幫助使用者觀察不同序列之間的重疊關(guān)系,沒有透明度的面積會導(dǎo)致不同序列之間相互遮蓋,減少可以被觀察到的信息。

使用建議:

1、不要超過7個序列

當數(shù)據(jù)系列過多時,往往造成用戶難以觀察的痛苦,所以建議使用堆疊面積圖時數(shù)據(jù)系列最好不要超過7個。


(5)分組條形圖

分組條形圖屬于條形圖的一種,又叫簇狀條形圖,是一種以不同分組高度相同的長方形的寬度為變量的統(tǒng)計圖表,每個分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區(qū)別各個分類,各個分組之間需要保持間隔。

特點:

1、適用場景

分組條形圖適用于表達相同分類不同組別的數(shù)據(jù),或者相同組別不同分類的數(shù)據(jù),簡而言之,就是根據(jù)一個相同變量的不同分組進行數(shù)據(jù)表達。

2、不適用場景

分組條形圖不適合用于表達分組過多的,數(shù)據(jù)量較大的數(shù)據(jù),也不適合用于表達趨勢類的數(shù)據(jù)。



(6)雙向條形圖

定義:雙向柱狀圖又叫正負條形圖,是使用正向和反向的柱子顯示類別之間的數(shù)值比較,其中分類軸表示需要對比的分類維度,連續(xù)軸代表相應(yīng)的數(shù)值。


(7)玫瑰圖

定義:一種圓形直方圖,使用半徑長短表示數(shù)值大小。可以在視覺上夸大數(shù)據(jù)之間的差異。

特點:

1、由于面積等于半徑的平方,玫瑰圖會將數(shù)值之間的差異放大

2、南丁格爾玫瑰圖不能用于表示占比構(gòu)成

3、數(shù)量:一般 不超過30條,否則易帶來視覺和記憶負擔


(8)雷達圖

定義:雷達圖又稱為蜘蛛網(wǎng)圖、網(wǎng)絡(luò)圖,蜘蛛圖,星圖,是以在同一點開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數(shù)據(jù)的方法,所有這些方面都可以類似地量化,常用于排名、評估、評論等數(shù)據(jù)的展示,比如我們玩王者榮耀中英雄的各項性能指標。

特點:

1、指標得分接近圓心,說明處于較差狀態(tài),應(yīng)分析改進;指標得分接近外變現(xiàn),說明處于理想狀態(tài)

2、數(shù)量控制在5-8個最佳


(9)子彈圖

定義:對比分類數(shù)據(jù)的數(shù)值大小以及是否達標

特點:

1、可以通過標記刻度區(qū)間,來進行更好的評估

2、數(shù)量控制在10個以內(nèi)


(10)漏斗圖

定義:由多個梯形從上而下疊加而成。從上到下的項有邏輯上的順序關(guān)系,梯形面積表示某個業(yè)務(wù)量與上一個環(huán)節(jié)之間的差異,通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較,能夠直觀地發(fā)現(xiàn)和說明問題所在,為決策者提供一定的參考。

特點:

適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單向分析,不適合表示無邏輯順序的分類對比

使用建議:

1、漏斗圖不是表示各個分類的占比情況,而是展示數(shù)據(jù)變化的一個邏輯流程,如果數(shù)據(jù)是無邏輯順序的占比比較,建議使用餅圖更合適。

2、可以根據(jù)數(shù)據(jù)選擇使用對比色或同一種顏色的色調(diào)漸變,從最暗到最淺來依照漏斗的尺寸排列。切記,不要添加許多圖層和顏色造成漏斗圖難以閱讀。


比較類圖表總結(jié)

2.2.2 構(gòu)成類圖表

(1)餅圖

定義:用于表示不同分類的占比情況,通過弧度大小來對比各種分類,將一個圓餅按照分類的占比劃分成多個區(qū)塊,整個圓餅代表數(shù)據(jù)的總量,每個圓弧所在的塊表示該分類占總體的比例大小,所有圓弧所在的塊組成的圓餅等于 100%,這樣可以很好地幫助用戶快速了解數(shù)據(jù)的占比分配。

特點:

1、可以通過標記刻度區(qū)間,來更好的評估

2、數(shù)量控制在10個以內(nèi)

使用建議:

1、餅圖適合用來展示單一維度數(shù)據(jù)的占比,要求其數(shù)值中沒有零或負值,并確保各分塊占比總和為100%

2、餅圖不適合被用于數(shù)據(jù)的比較


(2)環(huán)圖

定義:本質(zhì)是將餅圖中間區(qū)域挖空

特點:

1、餅圖的整體性太強,我們會將注意力更多集中在扇形的面積上,環(huán)圖則可以很好地避免這個問題

2、建議分類數(shù)量不超過9個

使用建議:

餅圖更加集中面積,環(huán)圖會集中在角度和弧長上,所以我們中間的空間利用率還可以更好的利用。


(3)旭日圖

定義:旭日圖(Sunburst)由多層的環(huán)形圖組成,在數(shù)據(jù)結(jié)構(gòu)上,內(nèi)圈是外圈的父節(jié)點。因此,它既能像餅圖一樣表現(xiàn)局部和整體的占比,又能像矩形樹圖一樣表現(xiàn)層級關(guān)系。

特點:

1、旭日圖=N張餅圖

2、離遠心越近,代表層級越高

3、下一層級的總和構(gòu)成上一層級

4、可以無限向外擴展

(4)堆疊面積圖

定義:堆積面積圖是一種特殊的面積圖,可以用來比較在一個區(qū)間內(nèi)的多個變量。如果有多個數(shù)據(jù)系列,并想分析每個類別的部分到整體的關(guān)系,并展現(xiàn)部分量對于總量的貢獻時,使用堆積面積圖是非常合適的選擇。

特點:

1、適合表達總量和分量的構(gòu)成情況

2、分類指標的縱軸起點,并不是從0開始,而是在上一個分類基礎(chǔ)上疊加

使用建議:

1、圖表有重疊的數(shù)據(jù)時,類別數(shù)量越多,重疊越多,因此可見度越低,所以不建議堆疊面積圖中包含過多數(shù)據(jù)系列.

2、堆積面積圖要展示部分和整體之間的關(guān)系,所以不能用于包含負值的數(shù)據(jù)的展示。

3、建議堆疊面積圖中把變化量較大的數(shù)據(jù)放在上方,變化量較小的數(shù)據(jù)放在下方會獲得更好的展示效果。


(5)堆疊柱狀圖

定義:堆疊柱狀圖是柱狀圖的擴展,不同的是,柱狀圖的數(shù)據(jù)值為并行排列,堆疊柱圖則是一個個疊加起來的。它可以展示每一個分類的總量,以及該分類包含的每個小分類的大小及占比,因此非常適合處理部分與整體的關(guān)系。

特點:

1、二級分類并不是按照同一基準對齊的

使用建議:

大多數(shù)的堆疊柱狀圖都是垂直繪制的,但是如果你的數(shù)據(jù)標簽特別長時,考慮更好地展示效果,可以選擇使用水平堆疊的方式。


(6)瀑布圖

定義:通過顯示正值(收入)和負值(支出)對總量的貢獻來顯示結(jié)果累積的過程,因為形似瀑布流水而被稱之為瀑布圖。瀑布圖通過巧妙的設(shè)置,使圖表中數(shù)據(jù)的排列形狀(稱為浮動列)看似瀑布懸空,從而反映數(shù)據(jù)在不同時期或受不同因素影響的程度及結(jié)果,還可以直觀反映出數(shù)據(jù)的增減變化,在工作表中非常實用。

特點:

1、過程值為正的時候,向上加;

2、過程值為負的時候,向下減;

構(gòu)成類圖標總結(jié)

2.2.3 分布和聯(lián)系類圖表

(1)地圖

定義:特殊高亮的形式顯示數(shù)據(jù)集中的區(qū)域和數(shù)據(jù)所在的地理區(qū)域的圖示。使用地圖作為背景,對數(shù)據(jù)的地理分布顯示直觀通過顏色深淺、氣泡大小等容易判斷度量的大小,將數(shù)據(jù)在不同地理位置上的分布通過顏色或者氣泡映射在地圖上。

特點:

1、結(jié)合散點:位置坐標更清晰

2、結(jié)合飛線圖:表達起始點和目標點的鏈接或流向關(guān)系

使用建議:

1、必須要有地理位置

2、展現(xiàn)的通常是以某個地區(qū)為單位的匯總的連續(xù)信息

3、當你用基于地圖的熱力圖的時候,顏色梯度變化一定是有規(guī)律的,一定根據(jù)數(shù)值遞增遞減來變化的,否則在視覺上產(chǎn)生錯誤引導(dǎo)


(2)散點圖

定義:數(shù)據(jù)點在直角坐標系平面上的分布圖,表示因變量隨自變量而變化的大致趨勢。

(3)氣泡圖

定義:氣泡圖是顯示變量之間相關(guān)性的一種圖表。與散點圖類似。在直角坐標系中顯示數(shù)據(jù)的兩個變量(X和Y軸)之間的關(guān)系,數(shù)據(jù)顯示為點的集合。與散點圖不同的是,氣泡圖是一個多變量圖,它增加了第三個數(shù)值即氣泡大小的變量,在氣泡圖中,較大的氣泡表示較大的值??梢酝ㄟ^氣泡的位置分布和大小比例,來分析數(shù)據(jù)的規(guī)律。

特點:

有一定的數(shù)據(jù)量是展現(xiàn)三個變量之前的相關(guān)性,數(shù)據(jù)具有3個序列、特征及相關(guān)值。

舉個栗子:

我們回歸到線下場景,我們通常在逛生鮮超市類如盒馬生鮮、沃爾瑪?shù)?,會發(fā)現(xiàn)里面售賣的雞蛋、生鮮類會比外面便宜很多,因為他們?nèi)菀走^期,屬于成本極高的食品,通過限購來讓他們引流,從而吸引更多的顧客來買那些成本低、單品收入高的商品。

三、總結(jié)

最后給大家總結(jié)一下,首先我們拿到數(shù)據(jù)后先明確我們的使用目標,是讓用戶用最短的時間了解到數(shù)據(jù)帶來的信息,結(jié)合每個圖表的優(yōu)缺點,選擇合適的圖表,從需求和目標出發(fā),切忌盲目的增加和刪減元素,圖表的易用性大于它的美觀度。



 

 


以上就是本篇文章的全部內(nèi)容,數(shù)據(jù)可視化是一門龐大系統(tǒng)的科學(xué),關(guān)于可視化相關(guān)的知識還有很多沒有涉及到,例如可視化圖表的構(gòu)成、圖表運用場景、數(shù)據(jù)可視化大屏等等,后續(xù)希望大家持續(xù)關(guān)注。


參考文獻:

《CCtalk B端產(chǎn)品設(shè)計》by 美芳

螞蟻數(shù)據(jù)可視化

設(shè)計師要了解的數(shù)據(jù)可視化 —— 基礎(chǔ)篇

ECharts數(shù)據(jù)可視化


文章來源:站酷   作者:佩奇一只居

藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


如何推導(dǎo)一套色彩體系?

資深UI設(shè)計者

前文的原子設(shè)計中我曾經(jīng)講過,原子是構(gòu)成所有元素的最小單元,沒有辦法再被細分。它通常對應(yīng)著產(chǎn)品設(shè)計中的通用樣式及構(gòu)成組件的最小顆粒。而顏色,作為整個設(shè)計系統(tǒng)中極為重要的原子之一,在心智模型中占據(jù)了關(guān)鍵的地位。

我們看到紅色能夠感受到熱情、興奮和危險,看到綠色時往往就感受到安全、自然和平靜??梢哉f,顏色調(diào)動我們的情緒只需要一瞬間,而且它在我們的記憶中可以停留更久。

接下來,我結(jié)合公司目前的業(yè)務(wù)CROV Dropshipping(以下簡稱DS),來進行色彩體系的探索,以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點啟發(fā)。

大綱走起:

  • 業(yè)務(wù)背景
  • 為什么我們需要色彩體系
  • 如何創(chuàng)造一套色彩體系
  • WCAG無障礙測試

業(yè)務(wù)背景

CROV DS是針對美國市場的線上一件代發(fā)平臺(類似阿里巴巴的一件代發(fā)業(yè)務(wù)),屬于跨境電商B2C行業(yè)。平臺幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路,時間靈活可控,讓用戶專注于銷售本身。

為什么我們需要色彩體系?

1. 對于業(yè)務(wù)

目前CROV DS業(yè)務(wù)日益繁雜,但是除了品牌色之外,輔助色的定義過于隨意。而且隨著業(yè)務(wù)場景的擴展,臨時增加的顏色很容易被遺漏在某個不知名角落的畫板中,導(dǎo)致一次性用色的風(fēng)險。(tips:一次性即前一篇我所講到的用完即扔、未被復(fù)用的設(shè)計)

而且用色本身的隨意也導(dǎo)致研發(fā)還原結(jié)果的不統(tǒng)一,一處地方色彩各異的現(xiàn)象比比皆是。

因此,我們需要基于我們自身的業(yè)務(wù)特征來產(chǎn)出一套足夠完善的色彩體系,讓業(yè)務(wù)從用色上達成基本的一致統(tǒng)一。

2. 對于設(shè)計師

我們設(shè)計師在定義顏色時,更多的是直接在色板上進行取色,但這樣的取色方法存在諸多弊端。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

增加決策

可能很多設(shè)計師選色時會有這種情況,一會覺得這個顏色臟了,一會又覺得那個顏色太刺眼了,有時候完美主義作祟,為了得到一個滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時更為嚴重。

其實這和不用網(wǎng)格系統(tǒng)來布局是一個道理。(注:網(wǎng)格系統(tǒng)是一種能夠極大提升布局效率的方法,后面會講~)

色板中取色的范圍趨近于無窮。如果將HSB模式下的單個H、S和B作為一個最小單元格,那么我們可以選擇的格子高達數(shù)百萬個。顆粒度過細的情況(其實根本就沒有顆粒度)導(dǎo)致我們在取色時往往會被迫進行反復(fù)的微調(diào)和嘗試。

缺乏秩序和邏輯性

直接在色板中取色主要依賴的是”直覺“這種相對感性的存在。

比如一個按鈕的狀態(tài)可以包括normal、hover、pressed、disable等多個狀態(tài),如果我們僅僅靠自己的直覺自由調(diào)整明度和飽和度,最后的配色方案其實缺乏內(nèi)在的邏輯性和秩序性。

難以復(fù)用

對于B端這些偏后臺工具、場景復(fù)雜的業(yè)務(wù),顏色運用得往往也比較廣泛,如果我們沒有一套完善的色彩體系,那每次一遇到新的項目及業(yè)務(wù)場景需要用到新的顏色時,之前定義的顏色難以復(fù)用,導(dǎo)致我們需要重新定義顏色。而且這種相對主觀的方法也缺乏說服力,難以體現(xiàn)專業(yè)度。

而如果設(shè)計師提前定義好一套色彩體系,一方面只需要在對應(yīng)的色板中選擇即可,大大減少了設(shè)計決策。另一方面色彩體系所提供的不同色彩梯度也便于各個需求、業(yè)務(wù)場景的復(fù)用。而且色彩體系富有邏輯和秩序,因此從中挑選的顏色也同樣是這樣,顯著降低設(shè)計師依賴”直覺“所帶來的主觀和不可控。

如何創(chuàng)建一套色彩體系?

Alipay Design團隊提過:

以同色系配色為主導(dǎo),多色搭配為輔。

同色系為統(tǒng)一的色相,使用中可以加深品牌色的感知,可以讓界面更有層次,同時可以讓界面保持色彩上的一致性;由于業(yè)務(wù)的多樣化,我們需要多色搭配為輔;多色的輔助顏色,也可稱之為功能色,可設(shè)定不同的任務(wù)屬性和情感表達;再搭配中性色黑白灰,賦予更多的變化和層次。兩種配色通過主次、使用比例,可靈活運用在業(yè)務(wù)的各個場景中,具有非常好的延展性。

接下來我以DS項目為例進行色彩體系探索——

首先,所有的色彩模型統(tǒng)一采用HSB模型進行,正如Ant Design設(shè)計團隊說的那樣,這個模型利于調(diào)整色彩時對顏色有明確的心理預(yù)期,同時便于團隊溝通。

這里再簡單普及下HSB模型。H指的是色相(Hue),S指飽和度(Saturation),B指明度(Brightness)。S控制顏色混入白色的量,S值越高,意味著混入白色的量越少,顏色也就越“純”。B控制顏色混入黑色的量,B值越高,意味著混入黑色的量越少,顏色也就越“亮”。(通俗點說,它們分別代表了明色區(qū)域和暗色區(qū)域)

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

1. 品牌色

Crov Dropshipping基于其時間自由靈活、可兼職副業(yè)、成本風(fēng)險低的業(yè)務(wù)特征,使得對應(yīng)的用戶群越來越多的集中在年輕一代的e-tailer(線上零售商)當中。他們不同于我們常規(guī)認知里那類傳統(tǒng)的retailer(線下實體零售商),大部分的DSer擁有自己的事業(yè)和工作,為了賺取外快,將其當做自己的副業(yè)。因此,年輕化是這類用戶群的主要標簽。

所以,我們采用了高飽和度、偏向藍色色相的紫色,來作為crov dropshipping的品牌色。它的HSB值是 (250,80,100)。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

2. 基于品牌色生成24色“彩帶”

為了覆蓋掉Crov DS本身復(fù)雜的前后臺業(yè)務(wù)場景,需要額外搭配各類型的輔助色。我們想要提取24類色相,所以直接通過360/24得出了色環(huán)中每類色相的基本角度15°。

因此,這里以品牌色色相為基礎(chǔ),在HSB 360°色環(huán)中,對色相(H)正向和反向各自±15°,飽和度(S)和明度(B)保持不變,得到24色的色環(huán)彩帶。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

后續(xù)我們的顏色體系就在彩帶上的24個顏色上面進行提取。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

3. 品牌色同色系配色

品牌色同色系是指,根據(jù)品牌色不同的飽和度和明度變化,生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達了品牌性,多個梯度的變化也能夠適應(yīng)及通用盡可能多的業(yè)務(wù)場景,也便于多信息的層級劃分。

而同色系配色的輸出則遵循了antDesign發(fā)明的tint/shade 色彩系統(tǒng)算法,說人話,就是在顏色中分別加入一定比例的黑色或者白色來更科學(xué)地生成色階。

sketch中可以直接將這套算法可視化處理,便于設(shè)計師直接生成所有顏色的色階。需要注意的是明色區(qū)(就是上方橫向的那塊取色區(qū)域,白色至純色時S由0過渡至100)和暗色區(qū)(右側(cè)縱向的取色區(qū)域,純色至黑色時B由100過渡至0)遵循了兩種不同的規(guī)則,具體規(guī)則見下:

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

當S飽和度變化時(明色區(qū)域),S值以S/5的結(jié)果值為一個增量進行遞減,B值以(100-B)/5的結(jié)果值為一個增量進行遞增。我們品牌色的S和B分別是80和100,所以這里的兩個增量分別是16和0。

品牌色在明色區(qū)的下兩個色階對應(yīng)的HSB參數(shù)就是(250,64,100),(250,48,100),以此類推。

而當B明度產(chǎn)生變化時(暗色區(qū)域),S值以(100-S)/5的結(jié)果值為一個增量進行遞增,而B值以B/5的結(jié)果值為一個增量進行遞減。得出的兩個增量分別為4和20。

品牌色在暗色區(qū)的下兩個顏色對應(yīng)的HSB參數(shù)即(250,84,80)、(250,88,60),剩下的所有顏色以此類推。

根據(jù)這兩個定義規(guī)則推導(dǎo)出全部不同梯度的色階,我們就可以將其作為品牌色同色系配色。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

4. 定義輔助色

我們使用品牌色來傳達品牌價值,還需要輔助色來滿足多樣化業(yè)務(wù)場景的需要,對用戶進行不同的情緒引導(dǎo),同時也可以緩解用戶對單一主色產(chǎn)生的視覺疲勞。

輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環(huán)形式,來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對比色和互補色。

結(jié)果見下:

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

首先,由于相差15°的同類色與品牌色差距過小,色相對比感微弱,傳遞的調(diào)性過于相似,所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會作為功能色使用,這里同樣直接舍棄。

類似色

類似色即色相差在30度左右的顏色,屬于較弱對比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調(diào)性與品牌色類似,并且色彩體系中需要一個典型的冷色來覆蓋一些場景,所以這里使用了H220的顏色作為冷系的輔助色。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

中差色

中差色即色相相差90度左右的顏色,屬于中等對比色。H340偏粉,與常規(guī)紅色相差過多,所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”,對H340進行了色相校正,調(diào)整至H355。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

對比色

對比色即色相相差120度左右的顏色,屬于強對比色。最后得出的H130調(diào)性與中差色的H160過于類似,直接舍棄。H10與H340調(diào)性類似,但是可以向橙色系發(fā)展,所以微調(diào)到同類色進行色相校正。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

互補色

互補色即色相相差180度左右的顏色,屬于高強度對比色。最后得出的H70偏綠,這里同樣進行了色相校正,將其調(diào)整為H55。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

最后,得出了共計5種輔助色。不過這些輔助色并不能直接使用,還需要進行感官明度的校正。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

5. 感官明度校正

感官明度校正方法來自支付寶設(shè)計團隊,這是是確認輔助色的最后關(guān)鍵一環(huán)。每種顏色都有屬于自己的“感官明度”,即發(fā)光度。品牌色即輔助色的發(fā)光度不一致,就會導(dǎo)致視覺上會有明顯的明暗差別。所以,我們需要通過發(fā)光度來進行最終的顏色校正。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

明度較高的灰色意味著高發(fā)光度,明度較低則意味著低發(fā)光度。保持品牌色發(fā)光度不變,我們對其他輔助色進行微調(diào)。

我們只需要將那些視覺明暗差距明顯的顏色進行調(diào)整。注意,并非所有的顏色都要調(diào)整到品牌色的感官明度,這些值僅僅是一個參考。最終的校正依然取決于我們的視覺!比如黃色感官明度本身很高,但是視覺緩和、不像綠色那么刺激,所以基本無需校正。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

最后得到校正后的如下輔助色。藍色、綠色、黃色以及紅色在界面中可以作為功能色使用,可以分別代表常規(guī)、成功、警告和報錯狀態(tài)。而橙色則可以用作突出類的提示信息,它比bold字重要高出一個層級。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

6. 輔助色的同色系配色

與品牌色一樣,使用tint/shade規(guī)則推導(dǎo)出全部輔助色不同梯度的色階。具體過程不再贅述~

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

7. 定義文本色

CROV DS的文本色并非純粹的中性色,我們通過加入一點點品牌色來讓文本呈現(xiàn)色彩傾向,以此提升頁面的活力及年輕感,同時也可以讓界面更加耐看,減緩B端產(chǎn)品長期使用時的視覺疲勞。

具體方法就是,分別在#222、#555、#888、#b3b3b3的一、二、三級中性文本色代表的色塊上,覆蓋一層10%透明度的品牌色。最后得出了四個層次的文本色。當然,中性文本色你也可以參考antDesign中通過透明度進行定義的方法,不一定需要按照某個具體色值來。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

WCAG無障礙測試

我們必須要承認的現(xiàn)實是,設(shè)計師所定義出的色彩在mac上看上去是很出彩,但是這并不能代表所有用戶。也許在用戶中依然有一部分人群,他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環(huán)境,有可能是在刺眼的陽光下、有可能是在昏暗的環(huán)境中。如果色彩不去做可用性測試,在很多的情況下存在體驗降低的風(fēng)險。

而WCAG(Web Content Accessibility Guideline,Web內(nèi)容無障礙指南)解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了:易于感知的(Perceivable)、便于操作的(Operable)、穩(wěn)定理解的(Understandable)、穩(wěn)定耐用的(Robust)。

而顏色則正是對應(yīng)了易于感知的這一無障礙原則。網(wǎng)站中的文字和圖像應(yīng)該具備足夠高的色彩對比度,使之更易被用戶感知識別。

WCAG顏色對比度無障礙的兩個標準分別為:「1.4.3條例:最小對比度標準」和「1.4.6條例:加強對比度標準」,分別對應(yīng)著AA級和AAA級。

AA級的定義為:普通文本的視覺呈現(xiàn)與背景至少要有4.5:1的對比度,大文本與背景至少有3:1的對比度

AAA級的定義為:普通文本的視覺呈現(xiàn)與背景至少要有7:1的對比度,大文本與背景至少有4.5:1的對比度

(這里的大文本即≥18pt常規(guī)字重的文本或者≥14pt加粗字重的文本)

這兩個條例被大廠們廣泛運用到了產(chǎn)品的顏色標準當中。

比如MD規(guī)范中的文本移動性規(guī)范標準中的數(shù)據(jù)就是來自WCAG的1.4.3條例標準。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

同樣,阿里巴巴在前不久發(fā)布的B-Design中的無障礙色acs指標和WCAG本質(zhì)上也是一樣。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

1. 顏色對比度驗證

那該如何驗證我們的顏色符合這倆標準呢?

easy。這里直接上個網(wǎng)址,https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值,即可得到最終的對比度數(shù)據(jù)。比如我錄入了白色和一級文本色數(shù)值,最后的12.28即兩者的對比度,嗯,達到了AAA級標準。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

一樣的步驟,分別測試了其他文本色的對比度(產(chǎn)品無暗色模式,所以此處僅驗證白色背景下的顏色對比度),分別達到了7.59、4.71和2.38??梢钥闯龀?.38外,其他文本色的對比度均符合可見度標準。

不過WCAG中指出,一些特殊情況下的文本無對比度的限制,其中就包含了表單字段的占位符(placeholder)。而2.38對比度對應(yīng)的文本色主要用于暗提示,因此這種情況就可以無視掉了~

最后

色彩體系的初步探索到此結(jié)束了,不過篇幅原因并沒有面面俱到,比如漸變色、實際落地效果等等。另外,一些地方我自己也在摸索階段,因此很多分析也可能存在不足,文章僅作參考。


文章來源:優(yōu)設(shè)   作者:轉(zhuǎn)行人的設(shè)計筆記

藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

周周

作為UI設(shè)計師,雖然現(xiàn)在做了很多項目,但是實際上每一次想要做好,過程都還是很痛苦的。尤其是前段時間,身心俱疲,時間、心情、精力都不在線。但恰恰接到的又是一個重頭的急活,產(chǎn)品方也不清楚自己想要什么效果,所以一開始改版的心路很渺茫。

不過也由于這次的經(jīng)歷也讓我更加明白設(shè)計方法的重要性,越是短時間內(nèi),越需要理性分析。在實際工作中,產(chǎn)品有時候因為項目急需上線,給我們的時間會非常有限,根本沒有太多的時間去給你思考,就比如我這次,只有半天時間去思考設(shè)計。那么如此短的時間,如何提出有效的設(shè)計方案呢?

搞清楚需求來自哪里,具體是什么

以這次為例,學(xué)習(xí)圈頁面剛上線不久,當時也是設(shè)計了許多方案,都被pass了,如下:

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

產(chǎn)品方提出頁面上方的發(fā)布按鈕需要重新設(shè)計,那我就要搞清楚具體是誰提出的意見,為什么要重新設(shè)計,這樣才不會讓自己處于完全被動狀態(tài)。

由于項目剛上線,數(shù)據(jù)庫也因為某些原因還不能檢測點擊和轉(zhuǎn)化量,無法得知哪種按鈕點擊量高。產(chǎn)品方也不清楚想要什么效果,需求方向不明確就著急去動手設(shè)計,那對于設(shè)計師來說無疑是效的,問明白需求后再通過競品分析、產(chǎn)品體驗、用戶喜好等方式去突破。

所以接下來需要我們主動出擊引導(dǎo)產(chǎn)品方,得出一些需求具體的方向。那怎么去引導(dǎo)?反向思維法,既然需要改動的是不確定的,那么我們可以確定那些不需要改動的地方——通過排除不需要改動的,來確定需要改動。

需要排除的是:整體頁面排版布局、按鈕設(shè)計方向(扁平、立體、簡潔、卡通等方向)、動效方向、背景(顏色元素)。

通過溝通后明確的是:

  • 整體布局沒有問題,所以這塊不需要有改動
  • 按鈕點擊感不強,產(chǎn)品用戶群體是6~14歲的學(xué)生,根據(jù)用戶審美偏好,所以主要方向就是立體、卡通
  • 動效不夠明顯,需要更明顯有趣一些
  • 整體顏色太冷靜,所以背景顏色和元素細節(jié)需要修改

在第一版時已經(jīng)對相關(guān)競品做了分析,基本是一個純色背景上加一個具象化大按鈕,發(fā)布功能使用加號、筆、照相機等元素來制作按鈕,原則:按鈕凸顯,背景元素比較少。其實按鈕如果用照相機這種結(jié)構(gòu)復(fù)雜點的元素去設(shè)計會更有方向,但是我們左上角會有拍米幣的功能,用相機會更直接一些,而加號筆畫過于簡單,可延展性不強,所以改版的話最終決定還是使用鉛筆作為圖標設(shè)計元素。

關(guān)于整體顏色方向,上一版顏色設(shè)計原理是背景用產(chǎn)品主色(藍色)+白色按鈕,不過產(chǎn)品方提出太過冷靜,一開始我想用色肯定要跟整個app的主色相關(guān)呀,就跳不出藍色背景的思維,后來決定先跳出來,配色思維反過來,背景不局限在主色,按鈕及周邊裝飾元素可使用產(chǎn)品的主色。

時間緊急,當時想到的是常用的太空元素(有空間感、好延展、符合用戶喜好),于是背景就選了藍紫色(據(jù)研究,紫色也是小學(xué)生最喜歡的顏色,性別傾向相對偏弱,在色環(huán)上是藍色的鄰近色,協(xié)調(diào)又會有對比。)

想明白要嘗試的方向

在設(shè)計前,我先在心里大致分了兩個設(shè)計方向:

  • 常規(guī)大按鈕樣式
  • 非常規(guī)按鈕樣式

以下便是常規(guī)大按鈕設(shè)計稿:

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

非常規(guī)按鈕設(shè)計稿

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

在嘗試的這期間,對于有疑問的地方一定要跟需求方及時溝通,及時反饋,確保自己的設(shè)計在功能上沒有遺漏。比如我這次,是通過詢問一個產(chǎn)品經(jīng)理,才得知,按鈕上需要加文字,才在后面加上了。

善于運用對比進行排除

大體方案出來后,通過優(yōu)缺點分析對比,同產(chǎn)品方選出最適合的方案。

1. 常規(guī)按鈕設(shè)計稿

優(yōu)點:容易被用戶所熟知,用戶的學(xué)習(xí)成本低,更容易點擊

缺點:對于小學(xué)生來說吸引力不夠,形狀上偏規(guī)矩,不夠活潑,另外上方第一個元素稍微有一點搶主角的光環(huán)

2. 非常規(guī)按鈕設(shè)計稿

優(yōu)點:配合動效會更有吸引力一些

缺點:用戶的學(xué)習(xí)成本比較高

通過對比,大家一致傾向非常規(guī)按鈕,那就在氣泡與星球這兩者中選出最終方案。在APP的任務(wù)頁面也有星球的按鈕,用戶已經(jīng)對星球有了一定的點擊感知,減少了學(xué)習(xí)成本,最終選擇了星球。

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

細節(jié)優(yōu)化

優(yōu)化方向:

  • 顏色調(diào)整
  • 細節(jié)元素調(diào)整
  • 添加動效

1. 顏色調(diào)整

現(xiàn)在看著球跟背景區(qū)分不是很明顯,整體偏灰,需要加強對比,球的顏色需要調(diào)亮調(diào)純。我們看下色環(huán):

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

90度以內(nèi)的鄰近色,搭配在一起和諧又不失活潑。所以可以嘗試將球的顏色改為背景藍紫色的鄰近色:紅色或者天藍色,如圖:

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

紅色的球雖然跟背景拉開了對比,但是過于鮮艷,大家反應(yīng)有點類似于心臟。

所以相對來說藍色的球比較適合,也跟APP的主色相呼應(yīng)。

2. 細節(jié)元素調(diào)整

球的環(huán)境色過于明顯,需弱化一些;周邊增加幾個小球,四周邊緣的球太搶,也需要弱化 ;文字“寫一寫”由常規(guī)字體改為大一點的手寫字體:

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

3. 添加動效

鑒于上線版本的動效反饋說不明顯,按鈕點擊感偏弱,所以這次動效優(yōu)化點需要凸顯星球本身。第一想到的就是呼吸效果,但是只有一個呼吸有點單一,周邊可以添加一些社交鼓勵的元素,如鮮花、笑臉、太陽,動效一開始想著是從球兩邊飛出來,但是經(jīng)過對比就參考了直播送獎勵的形式,相對來說輔助性稍微好一些,視覺上不會過于太搶主角,如下最終呈現(xiàn)結(jié)果:

實戰(zhàn)案例!如何在短時間內(nèi),提出有效的設(shè)計方案?

如果有限時間內(nèi)想要讓需求方得到滿意方案,所以以下兩點我覺得是挺重要的:

  • 對比排除法是一個很好的工作方法;一個西瓜到底好不好,拿另一個進行比較就知道了。
  • 及時反饋:很多時候什么結(jié)果并不是一開始就知道,所以在做的過程中需要不斷理順想法。此時很重要的一點就是,跟需求方及時反饋,無論是正向的還是負向的,否則結(jié)果不是老板所期望的,自己也會陷入無限的苦惱中。

好啦,文章寫到這里,如果大家有更好地意見也歡迎留言


文章來源:優(yōu)設(shè)網(wǎng)     作者:麥芽糖



藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

周周

為什么要建立Banner組件庫

在互聯(lián)網(wǎng)公司中,運營Banner往往是由不同的運營團隊去完成,甚至在一些跨國企業(yè),運營Banner是由不同國家的運營團隊完成的。那么如何保證大家輸出的運營Banner在保證視覺沖擊力的同時,還能輸出以及體現(xiàn)統(tǒng)一的設(shè)計語言呢?甚至不用設(shè)計師也能輕松替換Banner組件?想要解決這種難題的最好方法就是設(shè)計Banner組件庫,Banner組件庫的四大優(yōu)點能夠完美解決以上的問題。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

Banner組件庫的類別

根據(jù)設(shè)計師個人及每個公司業(yè)務(wù)的不同需求,我一共把Banner組件庫分為兩大類別:

1. 設(shè)計師及設(shè)計團隊操作的Banner組件庫:

這類組件庫面向的操作人群是設(shè)計師,僅有設(shè)計師才對其有操作權(quán)限:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

案例部分效果演示:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

2. 非設(shè)計師操作的Banner組件庫:

這類組件庫面向的操作人群是非設(shè)計師人員(運營、銷售、子公司員工等),是設(shè)計師根據(jù)運營的需求特制的Banner組件庫。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

我當時制作這個組件庫的原由是因為母、子公司經(jīng)常都會有相同的模板化設(shè)計界面替換,而每次替換都需要花費設(shè)計師很多零碎的時間,所以我們干脆就直接設(shè)定好Banner組件庫,讓運營人員自行替換,我們先教會母公司的主運營操作流程,主運營再去負責子公司的操作流程培訓(xùn),這樣一套下來省去了運營人員與設(shè)計師的溝通及修改過程,運營人員可直接輸出成品,從而提升了整個團隊的生產(chǎn)力,也讓設(shè)計師專注于設(shè)計上的創(chuàng)意與用戶體驗。

案例部分效果演示:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

Banner組件庫的四大知識要點

不管是建立哪一類別的Banner組件庫,想要設(shè)計好它,那么首先就要清楚的了解Banner中的基本構(gòu)成以及設(shè)計原則,從底層邏輯出發(fā)去構(gòu)建Banner組件庫,我構(gòu)建Banner組件庫的思路主要依據(jù)以下四大知識點:

1. Banner的層級拆分

Banner層級拆分的主要目的是為了組件的設(shè)定,我們通過層級拆分可以有規(guī)律的把每一個層級都設(shè)置為可替換選項,在Banner組件庫中可分為5個層級:

  • 背景層:可替換背景顏色、背景樣式
  • 文案層:可替換字體、顏色
  • 標簽層:可替換標簽、顯示隱藏標簽、標簽顏色
  • 點綴層:可替換點綴元素、元素顏色
  • 產(chǎn)品配圖:可替換顯示圖片、也可更換為插畫元素

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

案例:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

2. 合理運用Banner中的點線面

在組件化的Banner設(shè)定中,我們可以用點、線、面來劃分畫面的整體層面,我們要羅列出哪些層級是用點來表達,哪些層級是用線或面來表達,這樣不僅有利于組件庫的快速建立,也有利于Banner整體畫面的視覺表達。

點、線、面是相對存在的,點可能在畫面中成為線、面,線也可能在畫面中成為點、面。

“點”越大就可能會變成“面”,“點”發(fā)生規(guī)律性變化也可能成為“線”。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

當“線”在畫面上顯得短小時,可以把它看成“點”,當把“線”加粗一定程度,那么我們就會把它看成“面”。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

當“面”成為未封閉狀態(tài)時就會成為“線”,當“面”在畫面中的比例縮小時我們可以把它看成“點”。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

我們在組件Banner時要事先把層級的點線面歸納好,這樣才不會在我們設(shè)計相同元素時出現(xiàn)雜亂的現(xiàn)象,層級與點線面的常規(guī)關(guān)系圖如下(這樣的常規(guī)組合關(guān)系有利于建立組件庫):

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

需要注意的是在Banner組件庫中點綴層與標簽層并非一定要存在于Banner中。

3. Banner組件庫常用版式

Banner的版式復(fù)雜多樣,而我們的組件庫想要達到輕量化,所以更適用于下面三種常規(guī)的版式,如下:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

4. Banner設(shè)計五大原則

組件庫的建立必須遵循Banner設(shè)計五大原則:對齊、統(tǒng)一、對比、留白、結(jié)構(gòu)平衡。

對齊

Banner的內(nèi)容都要有一個對齊的準則,特別是文案層面,每個元素都有自己應(yīng)該處于的位置,要有秩序化,才有舒適感。常見的對齊方式有左對齊、右對齊、居中對齊,建議一個板式只使用其中一種對齊方式。一個小小的Banner版面,如果使用了多種對齊方式,實際上在用戶看來這些信息都是零散的,增加了認知成本。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

統(tǒng)一

字體以及字體顏色最好不超過兩種,內(nèi)容元素設(shè)計風(fēng)格也必須一致,太多容易導(dǎo)致內(nèi)容雜亂,干擾過強。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

對比

了解各項信息的權(quán)重大小,重要的信息要加強顯示,次要信息可以弱化。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

留白

要為Banner留出一定空間,讓Banner多一些呼吸感,這樣也更容易聚焦重要信息。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

降噪原則

在Banner設(shè)計中不要使用過多的字體、顏色或者過于復(fù)雜的圖形,這種不斷做“乘法”的行為,實際上是在增加用戶認知的“噪音”。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

組件庫制作流程及案例展示

1. 制作前提:設(shè)計規(guī)范(字體/顏色/版式說明)

字體使用規(guī)范

在字體的使用中,我們要確定字體類型以及字體的大小。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

顏色使用規(guī)范

為了保證Banner擁有較強的適應(yīng)性,我們可以不規(guī)定精準顏色,用顏色明度的使用區(qū)間來代替。(顏色規(guī)范僅限于主色調(diào),并不包含特殊用色:如標簽、點綴元素)

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

版式說明

制定版式的整體尺寸、元素間距、排版、字數(shù)限制。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

2. 設(shè)計師應(yīng)用版制作流程:

設(shè)計師應(yīng)用的Banner組件庫可以用Sketch制作,也可以用Figma制作。

如果是用于外包設(shè)計或公司設(shè)計師僅有一人,那么建議用Sketch制作;如果設(shè)計團隊人數(shù)較多,那么建議用Figma,我這里就用SKetch給大家講解一下制作流程。

第一步:根據(jù)層級與點線面設(shè)計Banner中的元素

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

第二步:把每一層級的元素組件化

在Sketch中只用選擇想要組件的圖層(或組),點擊按鈕即可立即生成組件,如下圖:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

在組件層級時我們需要注意從哪里開始,到哪里結(jié)束。例如我做的這個寵物Banner案例,第一層是Banner樣式切換,接著才是樣式里面的層級切換,并不是把內(nèi)部所有層級都組件完后就結(jié)束了,可能層級中還存在更多的小組件切換,比如在樣式2中我沒有把點綴層合成一個組件切換,而是分為三個組件切換,甚至在三個切換里你還可以設(shè)置它們的顏色切換,全部設(shè)置完后這樣才算真正的組件結(jié)束,下面是我組件的層級圖:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

第三步:設(shè)計可替換組件

在完成元素組件化后,我們就可以在組件庫里添加更多可替換組件的樣式,添加方式如下圖:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

當把可替換的組件全部設(shè)計完后就可以使用了,如果發(fā)現(xiàn)內(nèi)容不夠用還可以往內(nèi)部再次添加,下面是Banner樣式1的切換效果展示:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

Banner樣式2的效果展示:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

注意要點:

  • Banner組件庫的內(nèi)部層數(shù)不宜過多,盡量輕量化。
  • 組件庫內(nèi)部的相同元素可以同時使用,例如樣式1與樣式2的文案部分,都可以用一個組件,不用再單獨設(shè)置。
  • 命名要清晰,層級之間用“/”隔開,以免發(fā)生組件庫內(nèi)部的調(diào)取錯亂。
  • 因SKetch的組件機制,組件的尺寸大小要有區(qū)分,如果出現(xiàn)相同大小的組件請任意修改一個。(增加1px)
  • 想要快速得到組件,可以把左側(cè)的圖層面板更換為組件面板,直接可拖取內(nèi)部組件。
3. 運營人員應(yīng)用版制作流程:

運營人員應(yīng)用的Banner組件庫的建立需要用到的軟件是PS與Excel。

在設(shè)計這類組件庫時我們一定要多從操作人員的角度出發(fā)去設(shè)計,最簡單化,下面案例來自于之前在老東家做的PS組件。

第一步:根據(jù)層級與點線面設(shè)計Banner中的元素

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

第二步:設(shè)計可替換元素組件

在設(shè)定前我們需要了解以下幾點知識:

  • PS做組件庫用到的是圖像-變量屬性。
  • 我們進行所有的元素替換都不在PS內(nèi)部,而是在Excel操作替換,若有圖片替換,圖片則與源文件存在同一文件夾內(nèi)。
  • 可設(shè)置所有元素的顯示和隱藏。

通過以上4點可以得知我們需要設(shè)計的元素僅僅只有背景圖片,而其他元素可以通過變量來達到效果,下面是設(shè)計的4張不同顏色的背景替換圖:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

第三步:定義變量元素

只是給需要變量的元素打標簽,具體該如何變量在第四步

定量步驟:選擇想要定量的圖層-圖像-變量-定義

注:PS會自動識別定量元素,如果是組,那么只有可見性選項(可見性選項的意思就是可顯示可隱藏);如果是圖片,則會多出像素替換(替換圖片);如果是文字則會有文字替換(替換文字)

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

在定義時為了避免操作錯誤,定義名稱就為圖層名稱,定義完成一個就按“下一個”按鈕,直到全部定義完成再按“確認”按鈕,案例中的Banner一共定義了6個元素,分別為商品圖(像素替換)、商品名(文字替換)、原價(文字替換)、優(yōu)惠價(文字替換)、特價標(可見性)背景圖(像素替換)

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

第四步:制作Excel表格

我們所有的數(shù)據(jù)修改都是在Excel里面進行的,Excel表格制作非常簡單,第一排為定義的名稱,我們只需把剛才定義好的6個名稱輸入到表格的第一排。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

如上圖,建議大家多加入一個編號定義,在PS里把編號定義的圖層隱藏就行了,目的是為了選取數(shù)據(jù)組時更直觀,操作如下:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

除了第一排,下面的排列都是輸入性定義,如果要改變商品名的文字,就可以在下方輸入修改的文字;

如果要替換圖片,就要輸入替換圖片的名字及后綴,僅支持png與jpg格式的圖片,并且圖片必須與源文件在一個文件夾內(nèi)。

如果要顯示或隱藏某個元素,那么就可以輸入大寫的“TRUE”或“FALSE”。

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

當把表格信息都填完后,最后一步就是把表格存為.csv格式。(注:.csv文件必須與PS源文件、圖片文件存在于同一文件夾內(nèi))

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

第五步:導(dǎo)入操作

當全部設(shè)定完后,我們就可以在PS內(nèi)導(dǎo)入切換不同的數(shù)據(jù)應(yīng)用。

操作路徑:圖像-變量-數(shù)據(jù)組-導(dǎo)入數(shù)據(jù)組-選擇數(shù)據(jù)-應(yīng)用-確定

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

這五步下來我們的Banner組件庫就順利完成了!

特別提醒:避免運營人員操作失誤,建議把PS內(nèi)部的所有圖層鎖定。

第六步:培訓(xùn)運營人員

通過上面的組件建立,運營人員只需添加Excel文件的子列表,并在PS選中導(dǎo)出即可完成操作,可以讓運營人員把PS看成圖片導(dǎo)出工具,可以非常輕松的完成。(機械化流程)

因為考慮到運營人員可能無法理解設(shè)計邏輯,所以很可能會出現(xiàn)操作失誤或不知道怎么操作的情況,所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導(dǎo)運營人員操作。

  • 直播優(yōu)勢:直播在線操作,不懂可以及時詢問,能讓運營人員快速上手。
  • 文件優(yōu)勢:主要用于操作者忘記操作或操作失誤時的提醒。
  • 特別提醒:給予運營人員文件中必須包含:操作文件(PS源文件、背景圖片、Excel表格)、字體包(PS中用到的字體)、操作提示文檔(視頻、PDF、GIF)

下面是員工PDF操作步驟圖示:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

案例源文件提取

Sketch組件庫源文件:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

PS、Excel組件庫源文件:

太好用了!超詳細的 Banner 組件庫建立指南(附案例源文件)

下載鏈接:https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取碼:e3li


文章來源:優(yōu)設(shè)網(wǎng)     作者:黑獅力



藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


如何設(shè)計B端表格?這篇近5000字的干貨幫你完全掌握!

周周

顏色的本質(zhì)

當今是色彩的世界,物體顏色的不同,帶給我們的情緒也截然不同。想要掌握顏色,首先就要研究顏色的本質(zhì)。

顏色分為光學(xué)三原色和顏料三原色。

1. 光學(xué)三原色

光學(xué)三原色由:紅、綠、藍組成。

色值分別是:

  • 紅(red ):#FF0000 RGB(255,0,0)
  • 綠(green):#00FF00 RGB(0,255,0)
  • 藍(blue):#0000FF RGB(0,0,255)

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

2. 顏料三原色

顏料三原色由:品紅、黃、青組成。

色值分別是:

  • 品紅(magenta):#FF00FF CMYK(42,64,0,0)
  • 黃(yellow):#F8F400 CMYK(0,11,92,0)
  • 青(cyan):#00FFFF00FFFF CMYK(38,0,16,0)

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

理論上,原色可以調(diào)制出絕大部分的其他色,而其他色都調(diào)不出原色。

那么,這兩種有什么區(qū)別呢?

3. 區(qū)別

光學(xué)三原色和顏料三原色最主要的區(qū)別就是他們的混合原理不同,分為相加混色和相減混色。

光學(xué)三原色為相加混色(可以理解為光的疊加),混合后顏色的明度提高,三色混合即為白色。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

相反,顏料三原色采用相減混色(可以理解為光的吸收),混合后顏色的明度和純度都會下降,三個混合即為黑色。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

在設(shè)計中我們可以區(qū)分為 RGB(光學(xué)三原色)和 CMYK(顏料三原色)。

RGB 模式本質(zhì)上與 CMYK 模式?jīng)]有區(qū)別,只是產(chǎn)生顏色的方式不同。顯示器采用RGB模式,就是因為顯示器是電子光束轟擊熒光屏上的熒光材料發(fā)出亮光從而產(chǎn)生顏色,當沒有光的時候為黑色,光線加到最大時為白色。而打印機呢?它的油墨不會自己發(fā)出光線。因而只有采用吸收特定光波而反射其它光的顏色,所以需要用減色法來解決。

運用場景:

  • 光學(xué)三原色:RGB模式,燈光色彩中;
  • 顏料三原色:CMYK模式,繪畫和印刷領(lǐng)域。

冷暖色調(diào)

冷暖色由三種原色、三種間色和六種復(fù)色組成的系統(tǒng)就稱為十二色環(huán),從紫色至黃綠為冷色,黃色至紫色為暖色。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

冷色可以讓人聯(lián)想到海洋、天空、雨雪等,讓人產(chǎn)生理智、寒冷、沉寂的感覺。

暖色可以讓人聯(lián)想到火焰、太陽等,讓人產(chǎn)生溫暖、熱情、開放的感覺。

實際案例中,冷暖色調(diào)的搭配,直接決定了觀賞者的第一感官。觀賞者第一眼的情緒感觸,就由此而來。

顏色的三個屬性

顏色的三個屬性分別為:色相(Hue)、明度(Brightness)、飽和度(Saturation)。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

1. 色相

色相指的是這些不同波長的色的情況。波長最長的是紅色,最短的是紫色。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

色彩是由于物體上的物理性的光反射到人眼視神經(jīng)上所產(chǎn)生的感覺。色的不同是由光的波長的長短差別所決定的。把紅、橙、黃、綠、藍、紫和處在它們各自之間的紅橙、黃橙、黃綠、藍綠、藍紫、紅紫這 6 種中間色——共計 12 種色作為色相環(huán)。在色相環(huán)上排列的色是純度高的色,被稱為純色。

2. 明度

明度是表示色所具有的亮度和暗度。計算明度的基準是灰度測試卡。黑色為 0,白色為 10,在 0~10 之間等間隔的排列為 9 個階段。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

色彩可以分為有彩色和無彩色,但后者仍然存在著明度。作為有彩色,每種色各自的亮度、暗度在灰度測試卡上都具有相應(yīng)的位置值。彩度高的色對明度有很大的影響,不太容易辨別。在明亮的地方鑒別色的明度比較容易的,在暗的地方就難以鑒別。

3. 飽和度

飽和度是用數(shù)值表示色的鮮艷或鮮明的程度。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

飽和度為 0 時,就是黑白灰。有彩色的各種色都具有彩度值,無彩色的色的彩度值為0,對于有彩色的色的彩度(純度)的高低,區(qū)別方法是根據(jù)這種色中含灰色的程度來計算的。

顏色搭配

1. 單色

單色指的是某個顏色純度的變化,就是在原有色上疊加 10%~90% 的白色/黑色得到的一個顏色。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

這種方法運用到產(chǎn)品中,會給人一種樸素、低調(diào)干凈的感覺;同時,也會給人一種單調(diào)的感覺。單色的顏色搭配適合沉浸式的產(chǎn)品中使用,不會因為色彩而打亂用戶的體驗。

產(chǎn)品案例:MUJI

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

2. 互補色

互補色是指在色相環(huán)上對立(180°)的兩個顏色。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

色彩中的互補色有紅色與綠色互補,藍色與橙色互補,紫色與黃色互補。

補色并列時,會引起強烈對比的色覺,會感到紅的更紅、綠的更綠。

互補色是很難把控的一種色彩搭配。由于色彩沖擊力極強,用好了可以達到視覺峰值,反之則會很“村氣”

3. 鄰近色

鄰近色是指在色環(huán)上相鄰的兩三個顏色,在色相環(huán)上相距 60°

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

它們色相彼此相近,冷暖性質(zhì)一致、色調(diào)統(tǒng)一和諧、感情特性一致。鄰近色是選擇相近色彩時很不錯的方法,可以在同一個色調(diào)中制造豐富的質(zhì)感和層次。一些效果不錯的色彩組合有藍綠色、藍色和藍紫色,還有黃綠色、黃色和橘黃色等。

4. 對比色

對比色是人的視覺感官所產(chǎn)生的一種生理現(xiàn)象,是視網(wǎng)膜對色彩的平衡作用。指在相環(huán)上相距 120° 到 180° 之間的兩種顏色。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

對比色能使色彩效果表現(xiàn)更明顯,形式多樣,極富表現(xiàn)力。需要注意的是,互補色一定是對比色,但是對比色不一定是互補色。

色彩的視覺呈現(xiàn)

1. 光源色

物體只有在光的照射下我們才能看到他們的顏色。

發(fā)光體發(fā)出的光,形成了不同的色彩,我們將這些色光稱之為光源色。

2. 固有色

固有色就是我們平時看到物體的顏色。

比如在正常光照下我們看到一個物體是紅色,那他的固有色就是紅色。

3. 環(huán)境色

環(huán)境色是物體周圍環(huán)境的顏色。

環(huán)境色對我們看到物體顏色的影響非常大。大家平時肯定也遇到過一個物體在不同的光照下,呈現(xiàn)出來的物體顏色也不盡相同。比如,一個在藍色天空下的蘋果會呈現(xiàn)部分淡藍色,就是環(huán)境色的影響。

色彩格式

1. RGB

RGB 色彩模式是工業(yè)界的一種顏色標準,是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的,RGB 即是代表紅、綠、藍三個通道的顏色,這個標準幾乎包括了人類視力所能感知的所有顏色,是目前運用最廣的顏色系統(tǒng)之一。

2. HSB

在 HSB 模式中,H(hues)表示色相,S(saturation)表示飽和度,B(brightness)表示明度。

3. HSL

在 HSL 模式中,H(hues)表示色相,S(saturation)表示飽和度,L(Lightness)表示明度。

4. HSB 和 HSL 的區(qū)別

HSB 和 HSL 都是表示色相、飽和度和明度,不同的點在于應(yīng)用開發(fā)中,不同開發(fā)語言下可調(diào)節(jié)的明度值名詞不同,所以這兩個格式不用過于糾結(jié)哪個用的更多,具體使用中就是需要哪個用哪個。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

不同顏色的感受

1. 黑色

黑色代表著品質(zhì)、權(quán)威、嚴肅、穩(wěn)重、高級。它是所有顏色中最有力量的,黑色+金色凸顯高貴感,黑色+紅色凸顯時尚感。

黑色是永不過時的顏色。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

2. 白色

白色代表純潔、信任、樸素、簡單。黑色和白色經(jīng)常會被用作無色,這兩個顏色沒有色彩傾向,屬于中性色,所以常常被忽略掉。在界面設(shè)計中,白色常常被用作背景色,提高畫面明度,凸顯其他內(nèi)容,提高文字的易讀性。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

3. 紅色

紅色代表喜慶、熱情、奔放、自由、歡樂。它是很強勢的顏色,一出現(xiàn)就會使人熱血沸騰,常常出現(xiàn)在電商活動中,讓人有購物的沖動。同時,紅色也有一種警告的含義。一些產(chǎn)品高危操作的 Button,都是用紅色來提醒用戶。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

4. 藍色

藍色代表冷靜、商務(wù)、未來、科技、安全,它是一種比較理智的顏色,在色彩心理學(xué)的測試中發(fā)現(xiàn),幾乎沒有人對藍色反感。主色調(diào)用藍色的太多了:知乎、Twitter、Behance、釘釘?shù)?,藍色的運用給用戶一直安全、放心的感覺。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

5. 黃色

黃色代表輝煌、高貴、信心。它的明度極高,雖然沒有紅色給人那么強烈的感官,但是黃色給人一種警示的意思。黃色經(jīng)常會以高貴的含義被用到:網(wǎng)站的 VIP。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

6. 綠色

綠色代表健康、活力、生命、安全、和平、寧靜。綠色可以治愈心靈,當你不開心的時候,看一下綠色的東西,會讓你的愉悅值增加。它在生活中用到最多的含義是安全:綠色通道、綠燈等。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

7. 紫色

紫色代表浪漫、時尚、性感、夢幻、創(chuàng)造力。紫色+粉色經(jīng)常在女性化妝品被用到,紫色在自然生活中很少看到,所以也有一種稀有、高貴的感覺。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

色彩在設(shè)計中的應(yīng)用

1. 數(shù)量

一個頁面中盡量不要超過 3 種顏色(黑白除外),顏色過多會讓用戶的興奮值上升,不易長期查看。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

2. 統(tǒng)一性

每一個產(chǎn)品都有自己的主色調(diào),所有的頁面的色彩搭配都要和主色調(diào)呼應(yīng),主色調(diào)的合理運用直接關(guān)系到用戶對產(chǎn)品的信任值。同一組件、場景中,顏色使用要保持一致,切忌“自由發(fā)揮”,毫無規(guī)范可言。

3. 60-30-10原則

60%、30%、10% 的原則,是達到色彩平衡的最佳比例。在 60% 的空間使用主色,可以運用到導(dǎo)航欄、按鈕、圖標等關(guān)鍵的元素中,使之成為整個 App 的視覺焦點和色彩關(guān)系;30% 的空間使用輔助色,可以平衡過多的主色而造成的視覺疲勞;最后剩下 10% 的空間為點綴色,可以用在一些不太重要的元素又需要區(qū)分的時候。6:3:1 原則構(gòu)建了一種豐富的色彩層次,讓界面看上去和諧、平衡和不雜亂。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

4. 顏色禁忌

禁用純黑、純灰,純黑和純灰會使用戶陷入負面情緒中,可以在黑色和灰色中加入一些色調(diào),讓顏色看上去更柔和,另外純黑色看時間久了會使人疲憊,在實際產(chǎn)品中,也很少有用純黑的。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

5. 文字中的使用

超鏈接顏色用藍色,為什么呢?

最早期電腦中用的是深灰色背景+黑色字,那時候能用非黑色最深的顏色就是藍色,所以這個習(xí)慣一直延續(xù)至今。這種用戶習(xí)慣非常一致的情況下,盡量不要去改顏色,因為改成別的顏色就會顛覆用戶認知,學(xué)習(xí)成本就會增加。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

6. 卡片陰影

一定不要用純黑色陰影,陰影的顏色會受到環(huán)境色和固有色的影響,對于有顏色卡片的背景,盡量使用比卡片更深的同色系顏色來調(diào)陰影,會使得陰影更干凈、整潔。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

配色網(wǎng)站推薦

1. Wbgradients

網(wǎng)站鏈接:https://webgradients.com/

Wbgradients 是一個在線調(diào)整漸變色的網(wǎng)站 ,可以根據(jù)你想要的調(diào)整效果,同時支持復(fù)制 CSS 代碼,可以更好的與開發(fā)對接。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

2. Grabient

網(wǎng)站鏈接:https://www.grabient.com/

Grabient 是一個非常漂亮且實用的漸變配色網(wǎng)站,支持 CSS 樣式代碼復(fù)制、360度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。設(shè)計師可以在色塊下方自由添加和調(diào)整漸變的色系、以及線性漸變方向。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

3. Color Grid

網(wǎng)站鏈接:https://www.0to255.com/740941

該網(wǎng)站隨意選色值,它自動換算出已選色值的 32 種明度色值,簡單易用。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

4. Eva Design System

網(wǎng)站鏈接:https://colors.eva.design/

Eva Design System 是一個基于深度學(xué)習(xí)算法的配色網(wǎng)站。適用于給我們的產(chǎn)品或品牌生成一個系統(tǒng)的配色方案。右上角可以切換淺色模式和深色模式的對比。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南

5. Color Hunt

網(wǎng)站鏈接:https://colorhunt.co/

Color Hunt 是開放的調(diào)色板集合,可以添加到 chrome 瀏覽器,方便隨時隨地使用。

新手來看!寫給設(shè)計小白的色彩基礎(chǔ)指南




文章來源:優(yōu)設(shè)網(wǎng)     作者:友設(shè)青年



藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

周周

前文的原子設(shè)計中我曾經(jīng)講過,原子是構(gòu)成所有元素的最小單元,沒有辦法再被細分。它通常對應(yīng)著產(chǎn)品設(shè)計中的通用樣式及構(gòu)成組件的最小顆粒。而顏色,作為整個設(shè)計系統(tǒng)中極為重要的原子之一,在心智模型中占據(jù)了關(guān)鍵的地位。

我們看到紅色能夠感受到熱情、興奮和危險,看到綠色時往往就感受到安全、自然和平靜??梢哉f,顏色調(diào)動我們的情緒只需要一瞬間,而且它在我們的記憶中可以停留更久。

接下來,我結(jié)合公司目前的業(yè)務(wù)CROV Dropshipping(以下簡稱DS),來進行色彩體系的探索,以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點啟發(fā)。

大綱走起:

  • 業(yè)務(wù)背景
  • 為什么我們需要色彩體系
  • 如何創(chuàng)造一套色彩體系
  • WCAG無障礙測試

業(yè)務(wù)背景

CROV DS是針對美國市場的線上一件代發(fā)平臺(類似阿里巴巴的一件代發(fā)業(yè)務(wù)),屬于跨境電商B2C行業(yè)。平臺幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路,時間靈活可控,讓用戶專注于銷售本身。

為什么我們需要色彩體系?

1. 對于業(yè)務(wù)

目前CROV DS業(yè)務(wù)日益繁雜,但是除了品牌色之外,輔助色的定義過于隨意。而且隨著業(yè)務(wù)場景的擴展,臨時增加的顏色很容易被遺漏在某個不知名角落的畫板中,導(dǎo)致一次性用色的風(fēng)險。(tips:一次性即前一篇我所講到的用完即扔、未被復(fù)用的設(shè)計)

而且用色本身的隨意也導(dǎo)致研發(fā)還原結(jié)果的不統(tǒng)一,一處地方色彩各異的現(xiàn)象比比皆是。

因此,我們需要基于我們自身的業(yè)務(wù)特征來產(chǎn)出一套足夠完善的色彩體系,讓業(yè)務(wù)從用色上達成基本的一致統(tǒng)一。

2. 對于設(shè)計師

我們設(shè)計師在定義顏色時,更多的是直接在色板上進行取色,但這樣的取色方法存在諸多弊端。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

增加決策

可能很多設(shè)計師選色時會有這種情況,一會覺得這個顏色臟了,一會又覺得那個顏色太刺眼了,有時候完美主義作祟,為了得到一個滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時更為嚴重。

其實這和不用網(wǎng)格系統(tǒng)來布局是一個道理。(注:網(wǎng)格系統(tǒng)是一種能夠極大提升布局效率的方法,后面會講~)

色板中取色的范圍趨近于無窮。如果將HSB模式下的單個H、S和B作為一個最小單元格,那么我們可以選擇的格子高達數(shù)百萬個。顆粒度過細的情況(其實根本就沒有顆粒度)導(dǎo)致我們在取色時往往會被迫進行反復(fù)的微調(diào)和嘗試。

缺乏秩序和邏輯性

直接在色板中取色主要依賴的是”直覺“這種相對感性的存在。

比如一個按鈕的狀態(tài)可以包括normal、hover、pressed、disable等多個狀態(tài),如果我們僅僅靠自己的直覺自由調(diào)整明度和飽和度,最后的配色方案其實缺乏內(nèi)在的邏輯性和秩序性。

難以復(fù)用

對于B端這些偏后臺工具、場景復(fù)雜的業(yè)務(wù),顏色運用得往往也比較廣泛,如果我們沒有一套完善的色彩體系,那每次一遇到新的項目及業(yè)務(wù)場景需要用到新的顏色時,之前定義的顏色難以復(fù)用,導(dǎo)致我們需要重新定義顏色。而且這種相對主觀的方法也缺乏說服力,難以體現(xiàn)專業(yè)度。

而如果設(shè)計師提前定義好一套色彩體系,一方面只需要在對應(yīng)的色板中選擇即可,大大減少了設(shè)計決策。另一方面色彩體系所提供的不同色彩梯度也便于各個需求、業(yè)務(wù)場景的復(fù)用。而且色彩體系富有邏輯和秩序,因此從中挑選的顏色也同樣是這樣,顯著降低設(shè)計師依賴”直覺“所帶來的主觀和不可控。

如何創(chuàng)建一套色彩體系?

Alipay Design團隊提過:

以同色系配色為主導(dǎo),多色搭配為輔。

同色系為統(tǒng)一的色相,使用中可以加深品牌色的感知,可以讓界面更有層次,同時可以讓界面保持色彩上的一致性;由于業(yè)務(wù)的多樣化,我們需要多色搭配為輔;多色的輔助顏色,也可稱之為功能色,可設(shè)定不同的任務(wù)屬性和情感表達;再搭配中性色黑白灰,賦予更多的變化和層次。兩種配色通過主次、使用比例,可靈活運用在業(yè)務(wù)的各個場景中,具有非常好的延展性。

接下來我以DS項目為例進行色彩體系探索——

首先,所有的色彩模型統(tǒng)一采用HSB模型進行,正如Ant Design設(shè)計團隊說的那樣,這個模型利于調(diào)整色彩時對顏色有明確的心理預(yù)期,同時便于團隊溝通。

這里再簡單普及下HSB模型。H指的是色相(Hue),S指飽和度(Saturation),B指明度(Brightness)。S控制顏色混入白色的量,S值越高,意味著混入白色的量越少,顏色也就越“純”。B控制顏色混入黑色的量,B值越高,意味著混入黑色的量越少,顏色也就越“亮”。(通俗點說,它們分別代表了明色區(qū)域和暗色區(qū)域)

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

1. 品牌色

Crov Dropshipping基于其時間自由靈活、可兼職副業(yè)、成本風(fēng)險低的業(yè)務(wù)特征,使得對應(yīng)的用戶群越來越多的集中在年輕一代的e-tailer(線上零售商)當中。他們不同于我們常規(guī)認知里那類傳統(tǒng)的retailer(線下實體零售商),大部分的DSer擁有自己的事業(yè)和工作,為了賺取外快,將其當做自己的副業(yè)。因此,年輕化是這類用戶群的主要標簽。

所以,我們采用了高飽和度、偏向藍色色相的紫色,來作為crov dropshipping的品牌色。它的HSB值是 (250,80,100)。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

2. 基于品牌色生成24色“彩帶”

為了覆蓋掉Crov DS本身復(fù)雜的前后臺業(yè)務(wù)場景,需要額外搭配各類型的輔助色。我們想要提取24類色相,所以直接通過360/24得出了色環(huán)中每類色相的基本角度15°。

因此,這里以品牌色色相為基礎(chǔ),在HSB 360°色環(huán)中,對色相(H)正向和反向各自±15°,飽和度(S)和明度(B)保持不變,得到24色的色環(huán)彩帶。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

后續(xù)我們的顏色體系就在彩帶上的24個顏色上面進行提取。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

3. 品牌色同色系配色

品牌色同色系是指,根據(jù)品牌色不同的飽和度和明度變化,生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達了品牌性,多個梯度的變化也能夠適應(yīng)及通用盡可能多的業(yè)務(wù)場景,也便于多信息的層級劃分。

而同色系配色的輸出則遵循了antDesign發(fā)明的tint/shade 色彩系統(tǒng)算法,說人話,就是在顏色中分別加入一定比例的黑色或者白色來更科學(xué)地生成色階。

sketch中可以直接將這套算法可視化處理,便于設(shè)計師直接生成所有顏色的色階。需要注意的是明色區(qū)(就是上方橫向的那塊取色區(qū)域,白色至純色時S由0過渡至100)和暗色區(qū)(右側(cè)縱向的取色區(qū)域,純色至黑色時B由100過渡至0)遵循了兩種不同的規(guī)則,具體規(guī)則見下:

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

當S飽和度變化時(明色區(qū)域),S值以S/5的結(jié)果值為一個增量進行遞減,B值以(100-B)/5的結(jié)果值為一個增量進行遞增。我們品牌色的S和B分別是80和100,所以這里的兩個增量分別是16和0。

品牌色在明色區(qū)的下兩個色階對應(yīng)的HSB參數(shù)就是(250,64,100),(250,48,100),以此類推。

而當B明度產(chǎn)生變化時(暗色區(qū)域),S值以(100-S)/5的結(jié)果值為一個增量進行遞增,而B值以B/5的結(jié)果值為一個增量進行遞減。得出的兩個增量分別為4和20。

品牌色在暗色區(qū)的下兩個顏色對應(yīng)的HSB參數(shù)即(250,84,80)、(250,88,60),剩下的所有顏色以此類推。

根據(jù)這兩個定義規(guī)則推導(dǎo)出全部不同梯度的色階,我們就可以將其作為品牌色同色系配色。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

4. 定義輔助色

我們使用品牌色來傳達品牌價值,還需要輔助色來滿足多樣化業(yè)務(wù)場景的需要,對用戶進行不同的情緒引導(dǎo),同時也可以緩解用戶對單一主色產(chǎn)生的視覺疲勞。

輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環(huán)形式,來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對比色和互補色。

結(jié)果見下:

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

首先,由于相差15°的同類色與品牌色差距過小,色相對比感微弱,傳遞的調(diào)性過于相似,所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會作為功能色使用,這里同樣直接舍棄。

類似色

類似色即色相差在30度左右的顏色,屬于較弱對比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調(diào)性與品牌色類似,并且色彩體系中需要一個典型的冷色來覆蓋一些場景,所以這里使用了H220的顏色作為冷系的輔助色。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

中差色

中差色即色相相差90度左右的顏色,屬于中等對比色。H340偏粉,與常規(guī)紅色相差過多,所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”,對H340進行了色相校正,調(diào)整至H355。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

對比色

對比色即色相相差120度左右的顏色,屬于強對比色。最后得出的H130調(diào)性與中差色的H160過于類似,直接舍棄。H10與H340調(diào)性類似,但是可以向橙色系發(fā)展,所以微調(diào)到同類色進行色相校正。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

互補色

互補色即色相相差180度左右的顏色,屬于高強度對比色。最后得出的H70偏綠,這里同樣進行了色相校正,將其調(diào)整為H55。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

最后,得出了共計5種輔助色。不過這些輔助色并不能直接使用,還需要進行感官明度的校正。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

5. 感官明度校正

感官明度校正方法來自支付寶設(shè)計團隊,這是是確認輔助色的最后關(guān)鍵一環(huán)。每種顏色都有屬于自己的“感官明度”,即發(fā)光度。品牌色即輔助色的發(fā)光度不一致,就會導(dǎo)致視覺上會有明顯的明暗差別。所以,我們需要通過發(fā)光度來進行最終的顏色校正。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

明度較高的灰色意味著高發(fā)光度,明度較低則意味著低發(fā)光度。保持品牌色發(fā)光度不變,我們對其他輔助色進行微調(diào)。

我們只需要將那些視覺明暗差距明顯的顏色進行調(diào)整。注意,并非所有的顏色都要調(diào)整到品牌色的感官明度,這些值僅僅是一個參考。最終的校正依然取決于我們的視覺!比如黃色感官明度本身很高,但是視覺緩和、不像綠色那么刺激,所以基本無需校正。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

最后得到校正后的如下輔助色。藍色、綠色、黃色以及紅色在界面中可以作為功能色使用,可以分別代表常規(guī)、成功、警告和報錯狀態(tài)。而橙色則可以用作突出類的提示信息,它比bold字重要高出一個層級。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

6. 輔助色的同色系配色

與品牌色一樣,使用tint/shade規(guī)則推導(dǎo)出全部輔助色不同梯度的色階。具體過程不再贅述~

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

7. 定義文本色

CROV DS的文本色并非純粹的中性色,我們通過加入一點點品牌色來讓文本呈現(xiàn)色彩傾向,以此提升頁面的活力及年輕感,同時也可以讓界面更加耐看,減緩B端產(chǎn)品長期使用時的視覺疲勞。

具體方法就是,分別在#222、#555、#888、#b3b3b3的一、二、三級中性文本色代表的色塊上,覆蓋一層10%透明度的品牌色。最后得出了四個層次的文本色。當然,中性文本色你也可以參考antDesign中通過透明度進行定義的方法,不一定需要按照某個具體色值來。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

WCAG無障礙測試

我們必須要承認的現(xiàn)實是,設(shè)計師所定義出的色彩在mac上看上去是很出彩,但是這并不能代表所有用戶。也許在用戶中依然有一部分人群,他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環(huán)境,有可能是在刺眼的陽光下、有可能是在昏暗的環(huán)境中。如果色彩不去做可用性測試,在很多的情況下存在體驗降低的風(fēng)險。

而WCAG(Web Content Accessibility Guideline,Web內(nèi)容無障礙指南)解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了:易于感知的(Perceivable)、便于操作的(Operable)、穩(wěn)定理解的(Understandable)、穩(wěn)定耐用的(Robust)。

而顏色則正是對應(yīng)了易于感知的這一無障礙原則。網(wǎng)站中的文字和圖像應(yīng)該具備足夠高的色彩對比度,使之更易被用戶感知識別。

WCAG顏色對比度無障礙的兩個標準分別為:「1.4.3條例:最小對比度標準」和「1.4.6條例:加強對比度標準」,分別對應(yīng)著AA級和AAA級。

AA級的定義為:普通文本的視覺呈現(xiàn)與背景至少要有4.5:1的對比度,大文本與背景至少有3:1的對比度

AAA級的定義為:普通文本的視覺呈現(xiàn)與背景至少要有7:1的對比度,大文本與背景至少有4.5:1的對比度

(這里的大文本即≥18pt常規(guī)字重的文本或者≥14pt加粗字重的文本)

這兩個條例被大廠們廣泛運用到了產(chǎn)品的顏色標準當中。

比如MD規(guī)范中的文本移動性規(guī)范標準中的數(shù)據(jù)就是來自WCAG的1.4.3條例標準。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

同樣,阿里巴巴在前不久發(fā)布的B-Design中的無障礙色acs指標和WCAG本質(zhì)上也是一樣。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

1. 顏色對比度驗證

那該如何驗證我們的顏色符合這倆標準呢?

easy。這里直接上個網(wǎng)址,https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值,即可得到最終的對比度數(shù)據(jù)。比如我錄入了白色和一級文本色數(shù)值,最后的12.28即兩者的對比度,嗯,達到了AAA級標準。

從實戰(zhàn)出發(fā),手把手教你推導(dǎo)一套色彩體系!

一樣的步驟,分別測試了其他文本色的對比度(產(chǎn)品無暗色模式,所以此處僅驗證白色背景下的顏色對比度),分別達到了7.59、4.71和2.38。可以看出除了2.38外,其他文本色的對比度均符合可見度標準。

不過WCAG中指出,一些特殊情況下的文本無對比度的限制,其中就包含了表單字段的占位符(placeholder)。而2.38對比度對應(yīng)的文本色主要用于暗提示,因此這種情況就可以無視掉了~

最后

色彩體系的初步探索到此結(jié)束了,不過篇幅原因并沒有面面俱到,比如漸變色、實際落地效果等等。另外,一些地方我自己也在摸索階段,因此很多分析也可能存在不足,文章僅作參考。



文章來源:優(yōu)設(shè)網(wǎng)     作者:轉(zhuǎn)行人的設(shè)計筆記



藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


UI設(shè)計師必須要掌握的十項排版原則

前端達人

當我們合理的運用好文字排版時,它可以增強界面內(nèi)的可用性,可讀性,可訪問性和層次結(jié)構(gòu)



轉(zhuǎn)自:站酷.         作者:絲絨Store

藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)




設(shè)計師如何做競品分析

前端達人

孫子兵法有云:知己知彼,百戰(zhàn)不殆。知天知地,勝乃不窮。

“知己知彼”說明了解自己和競爭對手的重要性,“知天知地”則強調(diào)了了解行業(yè)競爭環(huán)境的重要性。能通過競品分析達到知己知彼、知天知地,是設(shè)計師的必備技能。


什么是競品分析

競品分析是對市場上存在直接或間接競爭關(guān)系的優(yōu)質(zhì)產(chǎn)品,進行分類、組織、對比、刨析,總結(jié)競品、以及自己產(chǎn)品的優(yōu)勢和不足,為下一步?jīng)Q策提供幫助。競品分析維度包含但不限于市場調(diào)研、盈利模式、戰(zhàn)略定位、產(chǎn)品功能、交互流程、頁面框架、視覺表現(xiàn)、文案內(nèi)容、運營方式等。

競品分析和市場分析、產(chǎn)品分析、產(chǎn)品體驗分析的關(guān)系如下:


競品分析的作用

對設(shè)計師來說,競品分析在了解行業(yè)現(xiàn)狀、熟悉功能、了解競爭對手、了解用戶習(xí)慣、明確自己產(chǎn)品定位等方面都有幫助,具體如下:

競品分析有這么多好處,那么設(shè)計師該如何做競品分析?


設(shè)計師如何做競品分析


1.明確競品分析的目標

做競品分析前最重要的是要明確競品分析的目標。明確競品分析目標的前提是要“知己”。

“知己”即了解自己產(chǎn)品處在哪一個階段,有什么問題,接下來打算怎么做或達成什么目標。然后根據(jù)產(chǎn)品當前問題確認“要通過本次競品分析獲得什么?”。競品分析一定是為自己的產(chǎn)品服務(wù)的,是通過了解競品來達成自己產(chǎn)品的某種目的。不能盲目地為分析而分析。


大多數(shù)工作流程中,設(shè)計師進行競品分析一般有以下幾種場景:

場景一:在產(chǎn)品需求確認之前,通過競品分析對某功能進行調(diào)研,了解行業(yè)中該功能的具體設(shè)計。

如設(shè)計師了解到產(chǎn)品計劃對帖子詳情頁面進行改版,產(chǎn)品需求還沒確認。此時進行競品分析的目的可以是:了解競品帖子詳情頁面的設(shè)計共有哪幾類表達方式,每一類表達方式的優(yōu)缺點各是什么。


場景二:.在產(chǎn)品需求確認之后,通過分析產(chǎn)品需求,推導(dǎo)出設(shè)計目標。此時競品分析是為產(chǎn)出能滿足設(shè)計目標的方案服務(wù)的。

如產(chǎn)品的設(shè)計需求是“提高帖子詳情頁的點贊數(shù)、留言數(shù)、評論回復(fù)數(shù)”。此時推導(dǎo)出的設(shè)計目標可能是“營造詳情頁互動氛圍、提高回復(fù)評論的效率、減少操作步驟”,對應(yīng)的競品分析目的可以是“總結(jié)競品營造社區(qū)互動氛圍、提高活躍度的方式。掌握競品回復(fù)評論功能中操作步驟少、效率高的設(shè)計方式及總結(jié)背后原因。”


場景三:產(chǎn)品大改版、重新設(shè)計,或者孵化新產(chǎn)品時,通過競品分析對行業(yè)內(nèi)的產(chǎn)品有一個整體的了解,從而得出自身產(chǎn)品的差異化定位。此時競品分析的維度會更多元:可以從用戶體驗的5個要素逐級進行分析,或使用SWOT分析、波士頓矩陣分析等。


場景四:競品的動態(tài)跟進,主要是跟進競品的迭代情況,以保持長期的“知彼”狀態(tài)??梢远ㄆ冢ㄈ?周或一個月)對競品迭代信息進行一次整理。App Store或七麥數(shù)據(jù)等網(wǎng)站可以查到競品每個版本的迭代內(nèi)容。


2.選擇合適的競品

競品可以選擇直接競品或間接競品。直接競品指市場環(huán)境、商業(yè)模式、目標用戶、產(chǎn)品功能都相似的產(chǎn)品。間接競品可以是市場環(huán)境和目標用戶相似,但商業(yè)模式和產(chǎn)品功能當前不同、未來可能相同的產(chǎn)品。如果只對產(chǎn)品交互流程、頁面框架、視覺表現(xiàn)等進行分析,還可以選取功能相似,或者目標用戶相似,用戶體驗好的產(chǎn)品進行分析。

建議通過易觀千帆、七麥數(shù)據(jù)、App Annie等平臺了解競品的數(shù)據(jù)情況,選取數(shù)據(jù)排名靠前的產(chǎn)品進行分析。


3.了解競品定位、盈利方式、用戶畫像

了解競品的定位、公司戰(zhàn)略、盈利方式和用戶畫像,有利于我們理解競品功能的背后的邏輯,利于我們分析競品為什么設(shè)計成這樣。競品分析不只是分析表面看到的功能,還要分析更深層次的原因。

1.了解競品定位、公司戰(zhàn)略途徑有:競品官網(wǎng)、維基百科、拉勾網(wǎng)、天眼查、IT桔子 、Questmobile、App Annie等

2.了解盈利方式的途徑有:36 氪

2.了解競品用戶畫像的方式有:競品官網(wǎng)、移動觀象臺、百度指數(shù)、艾瑞咨詢等網(wǎng)站。


4.選擇合適的競品分析方法

競品分析的目的不同,選用的競品分析方法也不同。以下介紹幾種常用的競品分析方法:


競品畫布

競品畫布是一個簡易的競品分析模板,用一頁紙包含了競品分析的9大問題,如下圖。

適用條件:

1.競品畫布可以用在競品分析之初,用來梳理競品分析的思路,是競品報告的MVP(最小可用產(chǎn)品)2.競品畫布包含競品分析的6個關(guān)鍵步驟,可以讓新手快速上手競品分析。

操作步驟

按照競品畫布模板上的問題依次的分析解答。競品畫布中包含了SWOT分析,注意優(yōu)勢、劣勢是對產(chǎn)品或公司內(nèi)部的分析,而機會和威脅是對外部環(huán)境的分析。另外,在分析第3點分析維度時,建議結(jié)合分析目標說明選擇這些方式的理由。

優(yōu)點:競品畫布相對其他方法來說視角更全面,可以結(jié)合其他分析方法一起使用。

缺點:對UI/UE來說,針對性不夠強。


矩陣分析法

矩陣分析法又稱知覺圖,主要是通過二維矩陣分析2個關(guān)鍵要素,以了解自己和產(chǎn)品的定位及競爭優(yōu)勢。

適用條件:

  1. 矩陣分析法主要用來幫助產(chǎn)品做2個關(guān)鍵要素方面的定位決策。如自營電商平臺可用矩陣分析法來決策平臺定位是售賣高價格、優(yōu)質(zhì)的商品平臺(如寺庫),還是售賣超低價格、質(zhì)量一般的商品的平臺(如拼多多)。以及幫助產(chǎn)品評估自己的競爭優(yōu)勢,判斷產(chǎn)品是否需要重新定位。

  2. 設(shè)計師還可以用矩陣分析法分析競品的視覺風(fēng)格,以輔助定位自身產(chǎn)品的視覺風(fēng)格。如下圖為視頻app logo風(fēng)格的矩陣分析

操作步驟:

(1)確定兩個關(guān)鍵競爭要素。這兩個競爭要素應(yīng)該是用戶最會關(guān)注、會影響用戶決策的關(guān)鍵屬性,如價格和配置。

如果是設(shè)計師用矩陣分析法來分析競品視覺風(fēng)格,可選取兩對意思相反,對視覺風(fēng)格有較大影響的關(guān)鍵詞。如嚴肅—活潑、扁平—擬物

(2)繪制橫縱坐標軸,把兩個對關(guān)鍵競爭要素作為橫坐標和縱坐標填入。

(3)針對競品關(guān)鍵競爭要素的表現(xiàn),把競品放到4個象限的對應(yīng)位置。并思考自身產(chǎn)品在4個象限中的位置。4個象限的空白區(qū)域可能存在機會,而4個象限中競品較多的區(qū)域,用戶群可能更廣泛,也意味同類公司更多。

優(yōu)點:矩陣分析法的優(yōu)點在于聚焦于關(guān)鍵的兩個要素,可以直觀的表現(xiàn)出用戶對自身產(chǎn)品和競品在關(guān)鍵要素方面的認知。

缺點:矩陣分析法的缺點是只能從兩個要素進行分析。如果要分析多個因素,可以使用雷達圖分析法。


雷達圖分析法

雷達圖分析法本身是對企業(yè)經(jīng)營情況進行系統(tǒng)分析的一種有效方法。我們可以將它運用到互聯(lián)網(wǎng)產(chǎn)品用戶體驗分析上,用圖示化的方式對競品多個維度的優(yōu)勢、劣勢作出直觀的展示。下圖為對母嬰類產(chǎn)品拍大肚照上傳功能進行的雷達圖分析:

適用條件:

分析競品多個維度的優(yōu)勢、劣勢(一般選6個維度分析)。

操作步驟:

(1)定義分析維度

定義分析維度主要是確認從哪幾個角度分析具體功能,如選擇可用性、防錯設(shè)計、易懂、一致性等。分析維度的選取也可以參考尼爾森的十大可用性原則,具體選取什么維度應(yīng)根據(jù)分析的功能來定。

(2)對競品的每個維度進行打分

定義好分析的維度后,我們依次對競品的每個維度的表現(xiàn)情況進行打分評估,每個維度滿分為100分。

優(yōu)點:雷達圖分析法的優(yōu)點是相對直觀、可以分析多個維度的優(yōu)勢,劣勢。

缺點:雷達圖包含多個維度,每個維度的滿分和量級指標是不一樣的。需要分析者心中對每一個維度的滿分有個大致預(yù)期。如流暢度怎么樣算90分,怎么樣算80分?有可能同一個產(chǎn)品A同學(xué)認為流暢度80分,B同學(xué)認為流暢度90分,因此分析可能帶有一定的主觀性。


表格法

表格法主要是用表格來統(tǒng)計競品功能元素的有無。

適用條件:

1.當我們想較為全面的了解一個功能的概況,或較為宏觀的把握競品的現(xiàn)狀,可使用表格法。2.當我們思考某個功能元素是否需要保留,可使用表格法分析競品的做法。

操作步驟:

(1)畫出一個N行M列的表格,首列填入功能元素的具體名稱,首行填入競品的具體名稱。

(2)對每一個競品的具體功能元素進行統(tǒng)計,若某元素存在則在表格上對應(yīng)位置打勾,不存在則空著。

(3)進行分析小結(jié)。

如果某一列功能元素所有競品都打了勾,則說明該功能元素競品都有,是個普遍元素,優(yōu)先級可能較高。如果某個功能元素是某個競品獨有的,則可能是該競品的差異化功能,可能是競品的特色。使用該方法時要注意:即使是其他競品都有的功能,自身產(chǎn)品也不一定要有,最終自身產(chǎn)品功能元素如何定,要根據(jù)需求來分析,不可盲目照搬。

優(yōu)點:表格法的優(yōu)點在于可以清晰展示功能細節(jié)的有無。

缺點:如果頁面元素過多會顯得雜亂,且表格中沒有顯示元素的優(yōu)先級。


多級功能表格比較法

適用條件:當產(chǎn)品功能較復(fù)雜,要統(tǒng)計競品功能元素、全面了解競品概括,可用該方法。

操作步驟:在表格法的基礎(chǔ)上,將功能點拆解成一級功能、二級功能、三級功能,再進行比較分析和總結(jié)。具體形式如下圖:

優(yōu)點:可以清晰的展示一級功能、二級功能、以及功能的子級。

缺點:如果層級太多,或者元素太多表格會比較龐大雜亂。


用戶路徑分析法

用戶路徑分析主要是把自己假想成用戶,體驗用戶操作某軟件中某功能流程,并記錄過程。如下圖是對親寶寶拍攝照片用戶路徑分析:


適用條件:適用于要分析某一個功能的具體交互流程。

操作步驟:

(1)把自己想成小白用戶,給自己布置一個小任務(wù),并用競品軟件操作,完成這個任務(wù),如完成上傳照片。

(2)操作時按照:發(fā)現(xiàn)入口—了解功能—操作上傳—跟進操作反饋的步驟進行。

(3)記錄自己在體驗功能時的感受,如哪一個步驟覺得疑惑,哪一個步驟覺得爽。

(4)梳理一下該功能的用戶路徑,看看產(chǎn)品設(shè)置的路徑中有哪些是自己在體驗時主要操作的,它們是不是該功能的主要路徑?哪些是自己體驗過程中忽略的,是競品有意弱化或者其他,并總結(jié)結(jié)論。

優(yōu)點:專注于操作流程中的細微體驗,聚焦于發(fā)現(xiàn)體驗問題。

缺點:自己的操作習(xí)慣不一定完全代表用戶的操作習(xí)慣,帶有一定主觀性。


產(chǎn)品視覺表達分析法

產(chǎn)品視覺表達分析指對競品某個模塊的頁面表達元素進行拆解分析,并總結(jié)每種表達方式體現(xiàn)的內(nèi)容優(yōu)先級和規(guī)律。

適用條件:適用于設(shè)計師橫向分析某個功能模塊的表達方式,及掌握每種表達方式的適用場景。

操作步驟

(1)將選擇競品具體模塊功能進行截圖并對比。

(2)提取每個模塊的表達元素,并在截圖的下方用色塊表達提取的元素。

(3)總結(jié)共有幾種表達方式,每種表達方式的突出對象是什么、適用條件如何、視覺優(yōu)先級如何。下圖為母嬰類產(chǎn)品問答功能視覺表達分析。

優(yōu)點:可以聚焦于單模塊的表達方式分析。

缺點:不適用于流程的縱向?qū)Ρ取?


5Why分析法

5Why分析法又稱5問法,即看到一個現(xiàn)象不斷的去問“為什么”來尋找根本原因,以找出解決某個問題治本對策的方法。該方法最初由豐田公司提出并在豐田公司廣泛采用。

適用條件:

適用于深挖某個功能表現(xiàn)背后的根本原因。也適用于幫助我們在做競品分析時養(yǎng)成透過現(xiàn)象看本質(zhì)的思維習(xí)慣。

操作步驟:

(1)把握現(xiàn)狀。主要是為了確認問題,調(diào)查基本的表現(xiàn)、數(shù)據(jù)情況等。

(2)原因調(diào)查。針對明確的問題,探究背后原因。找到淺層次的原因后,再問為什么,找更深層次的原因,問5次為什么。原因調(diào)查過程中要注意:一定要以事實為依據(jù)去探究背后原因,不可主觀臆想。另外,5why分析法也不一定都要問滿5個為什么,重要的是通過多次提問探究到根本原因。

(3)實時措施,糾正問題

(4)吸取教訓(xùn),從源頭上預(yù)防錯誤再發(fā)生

5Why分析法用到競品分析上,重點是在前2步,即把握問題和原因調(diào)查。我們不一定要完成5Why分析法的所有步驟,但我們要有問“為什么”的意識,不斷的問自己競品這么做的目的和原因。

優(yōu)點:聚焦現(xiàn)象背后深層原因,利于我們培養(yǎng)透過現(xiàn)象看本質(zhì)的思維。



用戶體驗5要素分析法

用戶體驗5要素分析指從戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層5個層級,逐級的去分析。

適用條件:適用于要全面系統(tǒng)地了解某個產(chǎn)品時,對該產(chǎn)品進行全局分析。

操作步驟:

可以按照用戶體驗要素的5個層級從上到下分析,或從下到上分析。每個層級的分析可以使用不同的分析方法,在此不贅述。需要注意的是使用該方法分析時要避免追求大而全,建議站在競品分析目的角度,分析時有一定傾向性。

優(yōu)點:分析較全面,對產(chǎn)品理解會比較深入。

缺點:要真正執(zhí)行并好不容易,需要對用戶體驗的5個要素有比較深的理解。


以上就是設(shè)計師常用的競品分析方法的解析說明,我們要根據(jù)分析目的靈活選擇方法。各方法的對比如下圖:


5.了解競品的用戶反饋

除了對競品進行分析,我們還要關(guān)注競品的用戶反饋,了解競品用戶在使用產(chǎn)品過程中遇到的問題,了解用戶覺得競品好在哪里。要對競品的問題進行規(guī)避,對好的使用體驗進行分析并學(xué)習(xí)借鑒。

可以通過網(wǎng)站 https://appbot.co/ 查找App store上的用戶反饋。如下圖為親寶寶產(chǎn)品的用戶反饋:


6.總結(jié)競品分析結(jié)論

不論使用哪一種分析方法,分析完之后都應(yīng)輸出分析小結(jié)。在所有分析結(jié)束之后,還要輸出整體的分析結(jié)論。結(jié)論可以由定性或者定量分析得出,可以既包含客觀分析的結(jié)論又包含主觀分析的結(jié)論。

客觀分析的結(jié)論如行業(yè)市場布局情況、競品數(shù)據(jù)情況、界面操作反饋、產(chǎn)品包含的功能點(普遍功能、特色功能、實現(xiàn)程度如何)等。主觀分析的結(jié)論如競品的可用性、易用性、操作體驗等。



總結(jié)

競品分析是通過分析競品,得出要解決的問題的結(jié)論過程。所以,了解自身產(chǎn)品當前處在哪個階段,有什么問題相當重要。通過當前問題推導(dǎo)競品分析目標,再跟進競品分析目標靈活運用分析方法。競品分析方法可以有很多,但確認好分析目標才是關(guān)鍵。


參考文獻:

《有效競品分析:好產(chǎn)品必備的競品分析方法論》——作者:張在旺

《步步為贏 交互設(shè)計全流程解析》——作者:董尚昊

《電商類APP:商品卡片競品分析》——作者:白鷺漫談




轉(zhuǎn)自:站酷

藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

2021最值得期待UI風(fēng)格 - 玻璃擬態(tài)全面解析

前端達人

通過這篇文章,你將全面了解2021UI趨勢中最熱門的Glassmorphism風(fēng)格


轉(zhuǎn)自:站酷

藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

從零開始!灰大帶你畫圖標

前端達人

圖標在UI設(shè)計體系中,是重要......



(此處省略1000字)




直接上圖!


上圖是我以前繪制的一套圖標作品,

感興趣的話就一起來了解一下我平時是怎么創(chuàng)作一套圖標的吧~




制作過程


1、搜集+臨摹+原創(chuàng)


積累素材是設(shè)計師必備的“基本功”,同時也是“職業(yè)病”。

平時我會有意識的在速寫本上繪制一些簡易的圖標,如果在一些APP中看到比較好的圖標,我也會臨摹下來。




下面給大家隨機展示一些我平時繪制的圖標。





除了繪制圖標以外,我平時也喜歡繪制一些其他的圖案。





2、反復(fù)打磨


將繪制好的圖標利用電腦矢量化后打印出來,根據(jù)打印稿用筆標記出不合理的地方,比如:線條太粗了,重心不穩(wěn).......對不合理的地方進行反復(fù)修改,再次打印,再修改,循環(huán)多次后直到得到自己滿意的效果,最后定稿。



下面這幅手繪圖就是文章一開始給大家展示的圖標成品的手繪最終稿了。






需要強調(diào)的是,這一次圖標的繪制,有一個特殊的地方,其中一個圖標是有實物的。(左:實物圖;右:對應(yīng)圖標)




3、圖標插件化


最后,將圖標上傳阿里的iconfont網(wǎng)站,制作成字體圖標





然后將字體圖標做成插件(我演示的是ps插件,也可以做成其它xd/sketch/figma插件)





制作過程就是給每個圖標賦予關(guān)鍵字,然后利用正則表達式,可以方便的搜索所有圖標。



不過這個步驟我就不詳細解釋了,因為



轉(zhuǎn)自:站酷

藍藍設(shè)計www.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.sillybuy.com

存檔