B端設(shè)計(jì) | 設(shè)計(jì)師必須了解的色彩系統(tǒng)搭建
導(dǎo)語:分析界面視覺基本方式是“形色字構(gòu)質(zhì)”,我準(zhǔn)備慢慢寫一些實(shí)戰(zhàn)基礎(chǔ)的文章,爭取每一篇都可以深入解決一個(gè)設(shè)計(jì)的基本問題。B端設(shè)計(jì)非常依賴于設(shè)計(jì)系統(tǒng),好的顏色定義,能幫我們設(shè)計(jì)出一些更加統(tǒng)一、舒適、層級分明、可讀性強(qiáng)的界面。
本篇文章將通過以下三個(gè)章節(jié),由淺入深的一步步搭建色彩系統(tǒng):
- 色彩理論簡析
- HSB的概念
- 搭建色彩系統(tǒng)的方法及工具
一、色彩理論簡析
如果你對色彩理論很熟悉,可直接跳過這一部分,因?yàn)楸竟?jié)較長。
顏色在設(shè)計(jì)中和日常生活中都起著至關(guān)重要的作用,我們可以通過顏色喚起特定的情緒或情感。而在一些沒有文字的場景,色彩也是傳遞信號的媒介。
我們先來溫習(xí)一下色彩理論(Color Theory),它可以幫助我們在不同的條件下正確的使用顏色,也可以幫助我們認(rèn)識顏色的基礎(chǔ)。
1.1 傳統(tǒng)色輪(Traditional Color Wheel)
首先,我們先學(xué)會傳統(tǒng)色輪的構(gòu)成。
我們都知道紅色、黃色、藍(lán)色是原色(Primary Color),如下圖所示:
當(dāng)我們把紅色、黃色、藍(lán)色在圓環(huán)中分別混合時(shí)候,會生成次要顏色(Secondary Color),綠色、橙色、紫色,如下圖所示:
如果我們再進(jìn)一步色環(huán)混合,就構(gòu)成了艾薩克·牛頓(Isaac Newton)創(chuàng)建的傳統(tǒng)12色色輪(沒錯,就是牛頓),如下圖:
1.2 色調(diào)、飽和度、明度、色溫
關(guān)于顏色的屬性,有四種重要屬性值得我們?nèi)プ⒁?,分別是色調(diào)、飽和度、色值、色溫。
1.2.1 色調(diào)(Hue)
色調(diào)就是顏色在色輪的位置,色輪主要有12種顏色,但是我們按上述方法無限去分割混合顏色,我們的色輪將是一個(gè)由漸變組成的圓環(huán),圓是360度,所以,色調(diào)的值就是0-360。如下圖所示:
1.2.2 飽和度(Saturation)
飽和度也可以稱為色彩強(qiáng)度(Intensity)或者色度(Chroma),高飽和的顏色是充滿活力且強(qiáng)烈的,低飽和的顏色是灰色和暗淡的。如下圖所示:
1.2.3 色值(Value)
色值告訴我們顏色的深或者淺。我們可以給顏色混合黑色(Shade),這樣可以使顏色變黑;也可以把顏色混合白色(Tint),來使得顏色變白;還可以在顏色表面混合灰色(Tone),來使得顏色變灰;如下圖所示:
1.2.4 色溫(Temperature)
色溫,色輪可以分割成兩組,主要是暖色組和冷色組,如下圖所示:
當(dāng)我們在色輪上移動時(shí),顏色也會隨著色溫變化,暖紅色逆時(shí)針移動時(shí),多了更多的黃色,當(dāng)我們順時(shí)針移動,就多了更多的藍(lán)色,變成了冷色紅,這就是我們通過旋轉(zhuǎn)色輪來制作紅色溫度帶。如下圖所示:
當(dāng)我們把色調(diào)、飽和度、色值、色溫結(jié)合起來時(shí),我們發(fā)現(xiàn)最初的12種顏色中的每一種都有無數(shù)的變化。
1.3 色彩調(diào)和(Color Harmonies)
那么我們該怎么組合這些色,使顏色使用變得平衡呢?這里有一些常見的方式去組合顏色,也就是我們俗稱的配色或色彩調(diào)和(Color Harmonies)。
單色(Monochromatic Colors):我們只要選取一個(gè)顏色,并調(diào)整明度和飽和度來創(chuàng)建。
互補(bǔ)色(Complementary Color):這個(gè)方案是從色輪的兩側(cè)選取兩種顏色,也就是色環(huán)上對立的180度的兩個(gè)色。這種配色適合創(chuàng)造強(qiáng)烈的對比的配色。
分散互補(bǔ)色搭配(Split-Complementary Color):這個(gè)方案是選用了互補(bǔ)色的兩個(gè)鄰居顏色。這樣既適合創(chuàng)造強(qiáng)烈的對比配色,又讓我們多了一個(gè)色調(diào)的選擇。
三角對立配色(Triadic colors):如果要尋找三種互相平衡的顏色,可以選擇12色的色輪上任意三個(gè)三角對立的顏色。這樣可以組合出大膽而充滿活力的顏色。
矩形配色模式(Tetradic Color Scheme) :矩形配色是由兩組互補(bǔ)色所構(gòu)成,通常具有五光十色的繽紛感,但至少有一種主色來突顯效果。
鄰近色(Analogous Color ):相似色是指以色相環(huán)上鄰近的2-4個(gè)顏色組成,我們稱之為近似色。是最常使用的和諧顏色。
角度配色:
同類色:色環(huán)角度相距 30° 以內(nèi)的顏色。這種顏色構(gòu)成的畫面給人一種和諧、統(tǒng)一、高級的感覺,比單色搭配又了一分生動。
近似色:色環(huán)角度相距 30°-90° 的顏色。近似色既可以適度色彩對比,又可以協(xié)調(diào)統(tǒng)一,色彩生動又不失和諧。
對比色:色環(huán)角度相距 120°-180° 的顏色。對比色能表達(dá)強(qiáng)烈的視覺情感,帶來較大的視覺沖擊力。
互補(bǔ)色:色環(huán)上相對的顏色,也就是色環(huán)相距 180° 的顏色為互補(bǔ)色。互補(bǔ)色是色彩對比最為強(qiáng)烈的兩個(gè)顏色。
1.4 配色網(wǎng)站推薦
1.4.1 一鍵配色:
- Paletton
- Muzli Colors
- Color space
- Adobe color
1.4.2 漸變色生成:
- Uigradients
- Webgradients
1.4.3 色彩靈感
- Nipponcolors 日式配色
- Brand Colors 所有品牌配色(建議再看品牌搜官網(wǎng),分析大牌拼色主色和網(wǎng)站主色區(qū)別和聯(lián)系)
- Material Colors
- Apple Colors
- Fluent Colors
1.4.4 圖片顏色提取
Eagle App(建議設(shè)計(jì)師擁有的圖片采集工具,儲存最好鏈接iCloud)
二、HSB的概念
2.1 HSB的定義
直接引用百度(這次百度講的比wiki輕量易懂)的定義:
HSB色彩模式即色度/色調(diào)(Hue)、飽和度(Saturation)、亮度(Brightness)。它采用顏色的三屬性來表色,即將顏色三屬性進(jìn)行量化,飽和度和亮度以百分比值(0%-100%)表示,色度以角度(0°-360°)表示 。 HSB色彩模式以人類對顏色的感覺為基礎(chǔ),描述了顏色的三種基本特性 。
通過上文色彩理論得知,將組成色彩的四要素改變?yōu)镠SB的三要素即可,下面我們逐一整合。
2.2 色調(diào)(Hue)
H-表示色調(diào),即顏色的相貌,顏色的調(diào)性,在色輪上,色相是按位置度量的,取值在0—360度之間(黑色與白色無色相)。這個(gè)與色彩理論的色輪是相同的,當(dāng)我們把色輪展開,就會出現(xiàn)設(shè)計(jì)軟件內(nèi)拾色器的色相調(diào)整帶了。
2.3 飽和度 (Saturation)
S-表示顏色的飽和度,即顏色的純度,飽和度高色彩較艷麗,取值在0—100之間。飽和度低色彩就接近灰色。
特別高的飽和度容易產(chǎn)生“椰樹牌椰汁”的設(shè)計(jì)感,而相對較低的飽和度則可創(chuàng)造高級感。
2.4 明度(Brightness)
B-表示顏色明度/亮度,即顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到純白,最低得到純黑。
2.5 拾色器
設(shè)計(jì)軟件中的拾色器就是把明度變?yōu)閅軸,飽和度變?yōu)閄軸,將色輪展開變?yōu)樯珟А?/p>
在色彩理論中的色值被融合到了明度,去掉了顏色溫度也用色調(diào)帶來調(diào)節(jié)。
三、搭建色彩系統(tǒng)的方法及工具
從工作角度,Material Design 的色彩系統(tǒng)實(shí)戰(zhàn)且有理有據(jù),所以這一篇章是在它基礎(chǔ)上結(jié)合我的個(gè)人項(xiàng)目經(jīng)驗(yàn)整合的。
3.1 建立色彩系統(tǒng)的原則
層級感:顏色可以表示哪些元素是可交互式的,元素之間的關(guān)系以及它們的強(qiáng)弱程度。
可讀性:當(dāng)文字出現(xiàn)在彩色背景上時(shí),文本和重要元素(如圖標(biāo))應(yīng)符合可讀性標(biāo)準(zhǔn)。
表現(xiàn)力:通過顏色展現(xiàn)產(chǎn)品個(gè)性,體現(xiàn)品牌基因。
一致性:建立色彩系統(tǒng)可以提高設(shè)計(jì)的一致性。
3.2 色彩系統(tǒng)(Baseline Color Theme)的組成
色彩系統(tǒng)一般是按顏色的類型+功能分類,我們也可以把顏色分為主色、輔助色、中性色、背景色、遮罩色、功能色、業(yè)務(wù)色。
主色(Primary Color):主色是我們系統(tǒng)的代表顏色,一般與品牌色相關(guān)聯(lián)。
輔助色(Secondary Color):在b端中常用中常與中性色合二為一。
中性色(Neutral color):中性色又稱為無彩色系,指由黑色、白色及由黑白調(diào)和的各種深淺不同的灰色系列,中性色不屬于冷色調(diào)也不屬于暖色調(diào)。黑白灰是常用到的三大中性色。一般用作前景色,也可部分用于背景色。(我個(gè)人的習(xí)慣是中性色代替輔助色,背景使用的中性色直接移入背景色)
背景色(Background Color/UI Base Color):用作頁面、模塊、組件的背景顏色。
遮罩色(Overlay):常用的是全局overlay;在states中,一般以黑色、白色為基色,配合百分比使用。
功能色(Status Color):鏈接色、成功色、警告色、錯誤色。
業(yè)務(wù)色(Business color):一般由較多的色彩組成,一般用在數(shù)據(jù)可視化、業(yè)務(wù)標(biāo)簽等情景。
3.3 色板的制作方式
我們在Material Design經(jīng)??吹筋伾忻Q和Color ID。
https://materialui.co/colors 在這個(gè)網(wǎng)站可以選擇hsl點(diǎn)擊查看顏色詳情,這樣能更好理解不顏色的變化。
名稱就是我們給這個(gè)顏色的代稱,比如綠色我們?yōu)榱搜髿饪梢苑Q為“Teal“,比如背景色我們可以叫“Ui-base”。
Color ID 表示了顏色明度+飽和度的層級代號,同樣的color ID表示了顏色在不同色調(diào)的情況下明度+飽和度是在視覺上是層級統(tǒng)一的。
在建立色盤時(shí),我比較建建議采用Material Design的這種命名方式。
下面我來分享幾種色盤的制作方式:
方式一:HSB精細(xì)調(diào)整(耗時(shí))
- 第一步:選定主色
- 第二步:用主色的色調(diào)加減15,得到24色相帶(360/15=24)
- 第三步:挑選出12或者16個(gè)顏色,作為色相帶。挑選原則是,過于相似的色多次出現(xiàn)可以刪掉
- 第四步:感官明度矯正,微調(diào)色相帶的明度和飽和度,使其看起來更加一致、柔和
- 第五步:制作色板:首先我們選定基色;然后我們給基色有序降低透明度,再去吸色,這樣就得到淺色衍生色;我們用#000000的有序透明度疊加到主色上,再去吸色,這樣就得到了深色衍生色。
如下圖所示:
我們可以注意到,這個(gè)方式做出的色板色調(diào)是完全一致的。
在色板中,淺色衍生時(shí),飽和度層層遞減;暗色衍生時(shí),明度層層遞減。這個(gè)是很多大企業(yè)選色的標(biāo)準(zhǔn)方式,很繁瑣但是很規(guī)范。需要注意的是,規(guī)范不是限制,很多時(shí)候,我們需要根據(jù)實(shí)際情況,再對顏色做一些微調(diào)。
關(guān)于第五步色板制作制作方式除了剛才所說的,我們也可以用市面上也有色板生成工具:
網(wǎng)站一:Material Design
這個(gè)是我比較推薦的色板生成方式,因?yàn)闀詣訖z測對應(yīng)顏色明暗度的ID,這樣命名就很方便了,還可以取保不同色調(diào)下,相同明度+透明度的顏色統(tǒng)一。
網(wǎng)站二:Coolors
Coolors的優(yōu)勢是可以生成梯度非常豐富的色板。
方式二:HSB粗略調(diào)整(快速)
我們跟著上圖一步步嘗試:
- 第一步:選一個(gè)基色
- 第二步:打開拾色器,把顏色向左拖動一點(diǎn)(降低飽和度),制作出稍淺的顏色
- 第三步:把顏色向左再拖一點(diǎn)(降低飽和度),制作出更淺的顏色
- 第四步:把顏色向左拖動時(shí),顏色變灰了,于是將顏色亮度高一些,把顏色飽和再稍高點(diǎn)。飽和度過低發(fā)灰時(shí),可以提升亮度,略高升飽和度來調(diào)制。
- 第五步:將顏色向下拖一點(diǎn)(降低亮度),制作出稍深的顏色。
- 第六步:改變色調(diào),來制作更多顏色的色盤,有時(shí),只改變色調(diào)會導(dǎo)致同色調(diào)下顏色區(qū)分不大,再微調(diào)明度和飽和度即可。如下圖所示:
在拖動顏色時(shí),有時(shí)明度和飽和度一起會有變化,這是可以接受的。這個(gè)方式比較適合色感非常好、經(jīng)驗(yàn)豐富的設(shè)計(jì)師去做,或者是做一些網(wǎng)頁項(xiàng)目可以采用。
3.4 主色(Primary Color)
主色是我們系統(tǒng)的代表顏色,一般與品牌色相關(guān)聯(lián)。
主色的應(yīng)用場景:
- 高亮提醒
- 選中、開關(guān)等當(dāng)前狀態(tài)
- 按鈕
- 空狀態(tài)
選擇主色
要點(diǎn)1:?主色的選擇需要盡量選擇冷色系(冷色系見色彩理論P(yáng)t. 1),這是為了避免用戶長時(shí)間使用帶來視覺疲勞。
要點(diǎn)2:?避免與錯誤、警告顏色沖突(如果沖突,可用鄰近色替換錯誤、警告顏色)
要點(diǎn)3:?在亮色模式下,飽和度和亮度不低于70。
可以在ant design中進(jìn)行在線檢測 https://ant.design/docs/spec/colors-cn,當(dāng)選擇非合適主色時(shí),會出現(xiàn)提示
3.5 中性色(Neutral color/Grayscale)
界面中的黑色、白色、灰色的梯度。
中性色的應(yīng)用場景:
中性色主要被大量的應(yīng)用在界面的文字部分,此外背景、邊框、分割線等場景中也非常常見。
中性色板的創(chuàng)建方式如下:
- 第一步:利用#000000或者便黑色的顏色在#FFFFFF背景上建立透明度梯度
- 第二步:吸色(這一步可以省略),我們發(fā)現(xiàn)了UI設(shè)計(jì)中常見的顏色:#333333、 #666666、#999999、 # CCCCCC
- 第三步:疊加藍(lán)色或主色透明度的2-10%,再吸色。疊加藍(lán)色會使我們的文字閱讀更舒適,主色最好為冷色系的情況再疊加。
3.6 前景色(Foreground Color)/ “On” Colors的概念
我們先明確一個(gè)顏色的“位置”概念,前景色(Foreground color)、背景色(Background Color)和遮罩(Overlay),任何設(shè)UI計(jì)場景無非就是這三個(gè)色的疊加或反復(fù)疊加創(chuàng)造出的效果。
前景色一般是文字、icon、分割線、描邊的顏色,遮罩一般在前景色和背景色之間,背景色在最底部。常見場景如下圖所示:
需要注意的是,在沒有states或者我們定好了背景顏色梯度的情況,overlay是沒有的;當(dāng)依賴overlay制作梯度,梯度最低的情況,overlay透明度也是0,所以視覺上是沒有的。
接下來,我們來看一下Material Design的例子,如下圖:
我們注意到,Material Design顏色中出現(xiàn)了“on xx“的顏色,其實(shí)on xx color (之后簡稱為“on Color”)顏色就是我們之前提到的前景色的的前景色。on單詞后對應(yīng)的Primary/Secondary/Surface等就是對應(yīng)的背景色。
從上圖我們看出,在primary color/Error color為背景色的情況,前景色為白色;在secondary/background/surface為背景色的情況,前景色為黑色。當(dāng)然,前景色還可能是主色、輔助色、警示色等等。
前景色的梯度方式除了用色板,還可以直接使用透明的梯度,比如下圖:
以透明度控制前景色顏色層級的好處是,前景色可以和背景色更好的融合,帶來更好的閱讀和視覺體驗(yàn)。我們也可以用這樣的方法制作出自己的前景色透明度梯度,甚至功能色也可以加入其中,如下圖所示:
3.7 可讀性標(biāo)準(zhǔn)(Legibility standards)
所有文本都應(yīng)清晰易讀并符合(WCAG 2.0)無障礙閱讀標(biāo)準(zhǔn),WCAG 2.0 中將顏色對比等級分為 3 種,A級、AA級、AAA級,等級越高意味著顏色的對比度越高,呈現(xiàn)出來的視覺壓力越大。
- A級:對比度 3:1,是普通觀察者可接受的最低對比;
- AA級:對比度 4.5:1,是普通視力損失的人可接受的最低對比度;
- AAA級:對比度 7:1,是嚴(yán)重視力損失的人可接受的最低對比度。
WCAG的網(wǎng)站:https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
網(wǎng)站可讀性必須達(dá)到AA級別,也就是內(nèi)容文本至少4.5:1,標(biāo)題文本至少達(dá)到3:1
可讀性可以在https://color.review/輕松查看,如下圖:
根據(jù)上文,我們知道前景色有時(shí)候也會為透明度,在我們建立色彩系統(tǒng)選色的時(shí)候就需要用到Materiel Design的可讀性檢測網(wǎng)站了:
https://material.io/resources/color/
從上圖我們可以看到,在我們選好主色,并且主色為背景的情況下,對應(yīng)的黑色、白色和我們自定義文字顏色,在我們選好的主色上的是否有可讀性,如果有,最低的透明度的值是多少可以滿足可讀性。
3.8 交互狀態(tài)顏色(Inactive States Colors)
B端交互狀態(tài)顏色的設(shè)計(jì)原則是:
明顯的:狀態(tài)必須有明確的不同將它們與其他和周圍的 UI 設(shè)計(jì)和交互狀態(tài)區(qū)分開來,并根據(jù)其優(yōu)先級進(jìn)行強(qiáng)調(diào)。
連續(xù)的:交互狀態(tài)的改變要做到連續(xù)的,不能是跳躍性過大。
一致的:交互狀態(tài)應(yīng)該在不同組件之間保持,以提高可用性。
常見的交互狀態(tài)我們依然參考Material Design,如下圖:
默認(rèn)態(tài) Normal/Enable:啟用狀態(tài)表示組件或元素可交互。
懸停態(tài) Hover:當(dāng)用戶將光標(biāo)置于交互元素上方時(shí),出現(xiàn)懸停交互狀態(tài)。
點(diǎn)擊態(tài) Pressed:當(dāng)用戶按下時(shí)的交互狀態(tài)。
聚焦態(tài) Focused:當(dāng)用戶使用鍵盤或語音等輸入方法突出顯示元素時(shí),出現(xiàn)聚焦?fàn)顟B(tài)
禁用態(tài) Disabled:禁用狀態(tài)表示組件或元素不可交互。
已選擇 Selected:表示用戶已選擇的狀態(tài)。
激活態(tài) Activated:激活狀態(tài)傳達(dá)突出顯示組件或交互元素,表示已激活。
拖拽 Dragged:當(dāng)用戶點(diǎn)擊后拖拽移動元素或組件。
開關(guān)(啟用/禁用)on/ff:上圖中將checkbox和radio也放在了開關(guān)內(nèi),checkbox和radio狀態(tài)其實(shí)需單獨(dú)列出,并疊加其他狀態(tài)。
功能狀態(tài) Status:含在錯誤、警告、成功、信息時(shí)的狀態(tài)。
在b端設(shè)計(jì)中,常見的是將Normal、Hover、Press、Disable狀態(tài)的色彩列出,其余狀態(tài)配合組件顯示。
常見的用色彩表示狀態(tài)的方式有以下4種:
方式一:利用色板的顏色梯度來表示狀態(tài),比如Ant Design,如下圖:
方式二:用利用透明度創(chuàng)建梯度表示狀態(tài),如下圖:
方式三:利用HSB來創(chuàng)建色彩梯度表示狀態(tài):
- Hover:H不變 S加10 B減5
- Pressed:H不變 S加20 B減10
- Disable:HSB均不變,不透明度 30%
方式四:利用Overlay的透明度創(chuàng)建梯度:
之前提到的前景、遮罩、背景概念在這里就派上用場了,我們來用Material Design來做例子,如下圖:
需要注意的是,遮罩的的基色是是與前景色一致的。
3.9 梯度(Elevation)
在界面中,陰影的大小可以使界面產(chǎn)生高低不同的層級感。
比如在B端設(shè)計(jì)中,Drawer、Dialog等彈窗出現(xiàn)時(shí),伴隨的就是陰影。
陰影是為了創(chuàng)造界面中的z軸層級而出現(xiàn)的??梢酝ㄟ^透明度創(chuàng)造“投影遠(yuǎn)近”來定義。也可以根據(jù)Material Design的陰影梯度來調(diào)整,如下圖:
最后,關(guān)于色彩系統(tǒng)搭建,其實(shí)還需要有暗色模式的部分,準(zhǔn)備在顏色篇(二)去講述,希望這些贅述能給你幫助。
微信公眾號:JQ DESIGN
微信號:JQ_Zhao
參考:
https://en.wikipedia.org/wiki/HSL_and_HSV
https://baike.baidu.com/item/HSB色彩模式?tp=4_11
http://theventurebank.com/pd/4603466.html
https://mp.weixin.qq.com/s/CZxY9gLBmbSy-q-LvHlCuQ
https://www.youtube.com/watch?v=uSZirUYhtf4
http://theventurebank.com/ucd/1729140.html
http://theventurebank.com/pd/4758224.html
本文由 @JQ Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
寫多很詳細(xì),文章質(zhì)量很高,????