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

5 評(píng)論 27281 瀏覽 138 收藏 30 分鐘

編輯導(dǎo)語:我們經(jīng)常會(huì)使用到很多產(chǎn)品,一些產(chǎn)品里的色彩搭配也會(huì)給我們留下深刻的影響,比如你會(huì)記得淘寶的橙色、支付寶的藍(lán)色等等,色彩對(duì)于用戶的體驗(yàn)也很重要;本文作者分享了關(guān)于色彩在UI設(shè)計(jì)中的應(yīng)用,我們一起來看一下。

一、色彩的應(yīng)用

人腦對(duì)于色彩的記憶度要高于形態(tài),即一個(gè)App給用戶留下深刻印象的往往是界面的色彩;例如說到支付寶,我們可能想不起它的首頁長(zhǎng)什么樣子,標(biāo)簽欄圖標(biāo)是那些,但能馬上記起它的界面主色是藍(lán)色;因此運(yùn)用好色彩對(duì)UI設(shè)計(jì)十分重要,它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格,能有效的幫助用戶組織和閱讀信息,與界面設(shè)計(jì)產(chǎn)生聯(lián)系和記憶。

好的配色往往依靠設(shè)計(jì)師審美、感覺搭配出來,但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐,下面結(jié)合相關(guān)案例為大家講解色彩運(yùn)用的幾個(gè)技巧。

1. 不得觸碰的禁區(qū)

分析研究了很多優(yōu)秀設(shè)計(jì)作品,發(fā)現(xiàn)他們?cè)谟蒙臅r(shí)候有一部分區(qū)域是不會(huì)使用的,也就是我們常說的“配色禁區(qū)”;當(dāng)然,這里的“禁區(qū)”是帶雙引號(hào)帶的,并沒有什么絕對(duì)的禁區(qū),只是說這些顏色不易控制,在連基礎(chǔ)色都沒有駕馭好之前,盡量少碰。

配色禁區(qū)大概分為這三種:三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)(紅色為禁區(qū)),如下圖:

綜合看來,不管是那種禁區(qū),右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深,當(dāng)然什么顏色都能駕馭的大師請(qǐng)略過。

知識(shí)點(diǎn):

在界面設(shè)計(jì)中,一般主色和輔助色都集中在右上角,次要的和不可點(diǎn)的顏色都集中在中中上方,而文字信息和背景色則集中在左側(cè),右下角禁區(qū)是我們要重點(diǎn)避開的對(duì)象。

2. 色調(diào)一致

在App設(shè)計(jì)之前應(yīng)先確定界面的主色調(diào),主色將占據(jù)界面中很大的比例,通常是品牌色,而輔助色、點(diǎn)綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來搭配,這樣才能保證App整體色調(diào)的一致。

色調(diào)一致的界面,能帶給用戶始終如一的視覺體驗(yàn)。例如馬蜂窩將黃色(品牌色)作為主色,以及從主色搭配出的藍(lán)色(對(duì)比色)貫穿App始終。

3. 60-30-10原則

60% 30% 10%的原則,是達(dá)到色彩平衡的最佳比例。在60%的空間使用主色,可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中,使之成為整個(gè)App的視覺焦點(diǎn)和色彩關(guān)系;30%的空間使用輔助色,可以平衡過多的主色而造成的視覺疲勞;最后剩下10%的空間為點(diǎn)綴色,可以用在一些不太重要的元素又需要區(qū)分的時(shí)候。

6:3:1原則構(gòu)建了一種豐富的色彩層次,讓界面看上去和諧、平衡和不雜亂。

嗶哩嗶哩將粉色運(yùn)用到頁簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上,藍(lán)色的輔助色用在角標(biāo)、圖標(biāo)上,還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上,主次非常清晰明了。

4. 色不過三

經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色,其實(shí)就是「色不過三」原則,即在一個(gè)頁面中不要使用超過3種顏色搭配,這也和上面說的“60-30-10原則”類似,即一個(gè)主色、一個(gè)輔助色和一個(gè)點(diǎn)綴色。

但在實(shí)際UI設(shè)計(jì)中,迫于產(chǎn)品的需要可能會(huì)使用更多數(shù)量的色彩,但切記不可超過7種色相(注意不是7種色值),每個(gè)色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。

美團(tuán)外賣的首頁20個(gè)功能入口大圖標(biāo)的背景用了9種不同的色彩,每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變,但并沒有顯得雜亂,而是呈現(xiàn)一種年輕時(shí)尚的律動(dòng)感。

這是因?yàn)檫@里雖然使用了9種不同的色彩,但仔細(xì)觀察發(fā)現(xiàn)只使用了3種色彩,其他6種則是從前者鄰近色中提取出來的搭配,再將它們錯(cuò)落放置,呈現(xiàn)出豐富多彩的色彩搭配,整體和諧統(tǒng)一。

5. 遠(yuǎn)離純黑色和純灰色

黑色就像沒有生命力的深淵,使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色,是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里;嘗試在純黑和純灰中加入一些色調(diào),會(huì)讓界面看上去更柔和自然;另外,純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度,看久了會(huì)使人疲勞,讓用戶產(chǎn)生焦慮的情緒。

MONO的導(dǎo)航欄并不是深黑色,而是加入了藍(lán)色的低飽和度藍(lán)黑色,它的界面背景也是加入了藍(lán)色的的淺色,這樣就不會(huì)讓界面看上去死氣沉沉的。

6. 遵循色彩心理學(xué)

前文我們已經(jīng)了解過各種色彩的心理學(xué)知識(shí),就是為了我們?cè)谶M(jìn)行App設(shè)計(jì)時(shí)提供依據(jù);這些色彩都是源于人類對(duì)大自然最原始的感受,藍(lán)色的天空、綠色的草地、黃色的沙漠等等,自然的色彩,對(duì)于我們來說是司空見慣的,但其中卻蘊(yùn)含著豐富的美感,并達(dá)到了和諧統(tǒng)一。

網(wǎng)易云音樂使用紅色作為主色,這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。

7. 良好的可讀性

良好的可讀性在界面設(shè)計(jì)中能為用戶提供主次分明、層次清晰的閱讀體驗(yàn),而一個(gè)可讀性差的界面則會(huì)成為用戶瀏覽的障礙。

那如何確保界面具有良好的可讀性呢?

這就需要在界面設(shè)計(jì)中注意色彩搭配的對(duì)比,如在淺色背景上使用深色文字,在深色背景上使用淺色文字,使用高對(duì)比的度的亮色展示重要的元素,用低對(duì)比度的淺色來體現(xiàn)需要弱化和次要的內(nèi)容;例如蘋果Music的主要功能入口,標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色,與其他元素從形成鮮明對(duì)比,就連深灰色的輔助文字都有著清晰的可讀性。

8. 從大自然中獲得靈感

配色中盡量使用大眾熟悉的色彩,如自然界中人們常見的色彩等;從大自然中獲取的配色靈感可以使你的設(shè)計(jì)更加切合用戶的審美,非常自然;而藝術(shù)是對(duì)自然的直接反映,是非常寶貴的資源,值得好好利用。

我們可以搜集各種與自然風(fēng)光相關(guān)的圖片,從中提取色彩運(yùn)用到設(shè)計(jì)中,這些幾近完美的搭配呈現(xiàn)出來的和諧美感能瞬間打動(dòng)人心;天氣應(yīng)用Marline就是一個(gè)很好的例子,它的界面背景漸變就參考大自然的變化,隨著不同時(shí)間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色,打開應(yīng)用即喚起了用戶的快樂情緒。

9. 將UX顏色與品牌相匹配

品牌價(jià)值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用,但是它們不是唯一重要的因素,行業(yè)規(guī)范也是關(guān)鍵;使用與品牌主要競(jìng)爭(zhēng)產(chǎn)品幾乎相同的配色方案不失一種好方法。

配色在品牌視覺中所發(fā)揮的作用是不言而喻的,但是,色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部;比如一個(gè)行業(yè)當(dāng)中,很多產(chǎn)品都使用了藍(lán)色,那么你的產(chǎn)品繼續(xù)使用藍(lán)色,可以讓用戶更快「識(shí)別出」你所屬的領(lǐng)域;但是本身也存在讓人混淆的風(fēng)險(xiǎn)。如果你想要在視覺上脫穎而出,可以試著使用不同的色彩。

中國區(qū)或美國區(qū),紅色和藍(lán)色都是最流行的顏色

在進(jìn)行品牌設(shè)計(jì)的時(shí)候,選擇配色的第一步,始終是了解各種顏色或者色相的氣質(zhì)和情感屬性;然后,在具體設(shè)計(jì)的時(shí)候,再進(jìn)一步根據(jù)品牌的氣質(zhì)和需求,再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。

10. 從強(qiáng)調(diào)色入手

想要讓配色方案更加突出,在設(shè)計(jì)中添加強(qiáng)調(diào)色可能是最容易入手的地方;舉個(gè)例子,一個(gè)律師咨詢的App可能會(huì)使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色,但是,如果能夠加入檸檬綠作為強(qiáng)調(diào)色,會(huì)顯得獨(dú)特很多。

11. 冷暖色對(duì)比搭配

冷暖對(duì)比色是自然平衡的規(guī)律,可以在設(shè)計(jì)中大量使用,這樣的配色會(huì)使作品非常的出彩,同時(shí)不顯單調(diào),讓用戶感覺舒服平和;而且這種搭配方法基本沒有啥缺點(diǎn),使用在設(shè)計(jì)中,技巧性比較多,對(duì)設(shè)計(jì)的細(xì)膩感受要求比較高,需要多練習(xí)。

12. 黑白色搭配不過時(shí)

黑色是所有中性色中最強(qiáng)的,而白色是最常用的背景顏色。

黑色是一個(gè)很好的選擇,有種高端和永恒的感覺,而白色可以帶給用戶自由,寬敞和透氣的感覺;如上所述,黑色和白色也是最大的對(duì)比色,如果合理的使用黑色配合白色,會(huì)營造出一種優(yōu)雅的氛圍。

12. 強(qiáng)交互色彩

交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。

號(hào)召性用語必須相對(duì)于背景具有足夠的對(duì)比度,并且相對(duì)于其他組件必須具有足夠的視覺權(quán)重,以便用戶可以輕松識(shí)別它們;Nike健身應(yīng)用中,「開始」按鈕以高飽和度的檸檬綠作為主色,從背景中脫引而出。

但是,交互色彩并不總是以最具飽和度或最亮為特征,而是通過色調(diào)、形狀、大小或?qū)Ρ榷?,從屏幕上脫穎而出;因此,交互色彩的有效性將基于用戶識(shí)別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。

同時(shí),次要功能權(quán)重要更輕,并在視覺上更接近信息元素。如上圖Nike Training界面中,“設(shè)置”和“聲音”按鈕只用簡(jiǎn)單的白色,減輕對(duì)主按鈕的干擾,也避免了頁面中出現(xiàn)多個(gè)強(qiáng)交互按鈕。

13. 保證良好的可讀性

可讀性是任何設(shè)計(jì)中的重要因素。你的顏色應(yīng)該清晰易讀,尤其是在處理文字時(shí);因此對(duì)比度對(duì)視覺效果對(duì)影響就非常關(guān)鍵,對(duì)比度過小,就會(huì)使得界面出現(xiàn)灰蒙蒙對(duì)效果。

清晰的對(duì)比度,一般會(huì)采用色彩的兩極,黑紙白字或白紙黑字;而在彩色背景上要讓內(nèi)容清晰可見,就需要搭配純白或高明度的文字,避免灰色文字;也要注意避免彩色背景上搭配互補(bǔ)色和明度接近的文字,因?yàn)檫@兩種搭配會(huì)產(chǎn)生一種“震顫效應(yīng)”,發(fā)出光暈的視覺效果。

14. UI中的陰影

沒有完全純黑的陰影,陰影的顏色是會(huì)受到物體本身固有色的影響,一定要避免使用純黑色(#000000),使用不太深的灰色,效果會(huì)更好;對(duì)于有顏色的元素,好的做法是為陰影設(shè)定與元素相同的顏色,并使其更暗一些。

如果是有顏色的元素,并且它處在黑暗的背景下,一般情況下,是不建議使用陰影的;但是如果你一定要用,把陰影透明度調(diào)到小于10%及以下,并且顏色跟隨主色調(diào)來;比如按鈕為綠色,則可以為按鈕設(shè)定一個(gè)更深的綠色陰影,并加上小于10%的透明度數(shù)值。

如下圖,左側(cè)的按鈕陰影很自然,右側(cè)的則有一層模糊發(fā)光的效果,顯得不夠漂亮。

知識(shí)點(diǎn):

為什么「超鏈接文字」要用藍(lán)色?

簡(jiǎn)單說,因?yàn)樵谧钤缙诘木W(wǎng)站頁面中,藍(lán)色能呈現(xiàn)最高的對(duì)比度。

Tim Berners-Lee——web 的主要開創(chuàng)者,被認(rèn)為是最早用藍(lán)色鏈接的人。

一個(gè)很早期的 web 瀏覽器 Mosaic,用的是深灰色背景和黑色文字;那時(shí)候,能用的非黑色、最深的文字顏色,就是藍(lán)色;所以,讓超鏈接文字突出顯示,同時(shí)保證可讀性,就選定了藍(lán)色,此后超鏈接文字都用藍(lán)色的傳統(tǒng)沿用至今。

二、app設(shè)計(jì)中的色彩搭配

App的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維;好的色彩搭配可以加深用戶對(duì)產(chǎn)品的印象;明確界面的視覺層次,讓用戶分清主次信息;同時(shí)還能給用戶賞心悅目的視覺享受。那么,在UI設(shè)計(jì)時(shí)該如何進(jìn)行色彩搭配呢?

我們可以從App中都包含了那些色彩開始,通常一個(gè)App中包含了主色、輔助色、點(diǎn)綴色、背景色這4類,下面就以微信讀書為例進(jìn)行詳細(xì)的講解(個(gè)人角度)。

1. 主色

主色是指在配色中處于主導(dǎo)地位的色彩,給用戶的第一眼印象,通常是產(chǎn)品的品牌色。

在App設(shè)計(jì)中,主色一般占有色相色彩的60%的比例;這里指的是60%的界面都使用到的主色比例,而不是使用面積(因?yàn)橥ǔR粋€(gè)界面中使用面積最大的是背景色);還有就是背景色多為淺灰色或白色,它們都屬于無色相色彩,因此不涉及到配色過程中。

我們看到微信讀書的第一印象,就可以判斷它的主色為藍(lán)色,這也是它的品牌色;在標(biāo)簽欄、按鈕、圖標(biāo)、注冊(cè)登陸全都使用了這種純凈的主色,使界面看上去非常和諧一致。

2. 輔助色

輔助色與主色相輔相成,輔助色的功能是幫助主色建立更完整的形象,使界面豐富精彩起來,避免畫面過于單一。

通常,主色的鄰近色、互補(bǔ)色、分散互補(bǔ)色和三角對(duì)立色都可以成為優(yōu)秀的輔助色,但注意輔助色不宜過多,否則就會(huì)使界面看上去花哨分散了主題;根據(jù)6:3:1原則,輔助色可以占有色相色彩的30%或更少為宜。

在微信讀書中,綠色、橙色、梅紅、藍(lán)紫色是除了主色以外使用最多的顏色,它們都是輔助色,主要用于功能圖標(biāo)和欄目分類上。

雖然輔助色看起來有點(diǎn)多,但其實(shí)都是從主色的鄰近色和對(duì)比色(及其鄰近色)中提取出來的搭配,而且只用在頁面中很少的地方,這種搭配技巧既可以豐富色彩的搭配,傳遞出年輕活躍的產(chǎn)品氣質(zhì),又保證了整體搭配的和諧統(tǒng)一。

3. 點(diǎn)綴色

點(diǎn)綴色是除了主色和輔助色以外的另一種色彩,通常體現(xiàn)在細(xì)節(jié)上。

其作用是,當(dāng)頁面中主色和輔助色不能滿足關(guān)鍵信息的提示時(shí),就需要點(diǎn)綴色來吸引用戶眼球,還有就是利用點(diǎn)綴色來平衡畫面的冷暖色調(diào)。

點(diǎn)綴色通常都是分散的,使用面積小,顏色非常顯眼,能與主色形成強(qiáng)烈的對(duì)比;一般點(diǎn)綴色是主色的互補(bǔ)色。在微信讀書中,使用了香檳金、梅紅和紅色作為點(diǎn)綴色;香檳金用在文章分享按鈕上,梅紅色用在點(diǎn)贊圖標(biāo)上,強(qiáng)調(diào)其特殊性,紅色用在通知及退出登錄提醒上,用于警示。

來康康這三種點(diǎn)綴色與主色之間存在什么樣的關(guān)系,在色相(H)上,3種點(diǎn)綴色為鄰近色,與主色為互補(bǔ)色;在明度(B)上,3種點(diǎn)綴色均為高明度色彩,起到強(qiáng)提醒的作用。這種強(qiáng)對(duì)比的互補(bǔ)色的點(diǎn)綴色可以快速引起用戶注意力。

4. 背景色

背景色就比較好理解了,通常為了襯托內(nèi)容,大多數(shù)App都是用淺灰色作為背景色,以白色作為背景色的對(duì)比色,來區(qū)分視覺層次;建議是可以根據(jù)前景色來提取背景色,將其調(diào)亮或變暗,這樣可以讓界面色調(diào)更加統(tǒng)一。

在微信讀書中背景色是偏藍(lán)色調(diào)的淺灰色,而不是純灰色,背景對(duì)比色是在白色里加入了藍(lán)色色相,而不是純白色,整體對(duì)比較柔和,給人清爽通透的感覺。

支付寶 Alipay Design 團(tuán)隊(duì)提出過一個(gè)配色原則:

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

同色系為統(tǒng)一的色相,使用中可以加深品牌色的感知,可以讓界面更有層次,同時(shí)可以讓界面保持色彩上的一致性;由于業(yè)務(wù)的多樣化,我們需要多色搭配為輔;多色的輔助顏色,也可稱之為功能色,可設(shè)定不同的任務(wù)屬性和情感表達(dá);再搭配中性色黑白灰,賦予更多的變化和層次。

兩種配色通過主次、使用比例,可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場(chǎng)景中,具有非常好的延展性。

三、迷人的漸變色

不同于單一色彩,漸變色不屬于任何色彩,它營造出千變?nèi)f化的視覺效果,卻又不會(huì)增加視覺負(fù)擔(dān)。

相較于單一的色彩,漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計(jì)中具有更強(qiáng)的視覺沖擊力,有助于快速搶占視線;如今,這種獨(dú)一無二的色彩正逐漸成為一種潮流,究其原因是目前大量的扁平風(fēng)格造成UI設(shè)計(jì)的嚴(yán)重同質(zhì)化,人們需要追求更加個(gè)性的視覺語言來滿足日益增長(zhǎng)的設(shè)計(jì)需求。

下面我們來了解幾種常見的漸變的使用技巧:

1. 色相、飽和度、明度的漸變

色相(H)漸變是指由一種色彩向另一種色彩的過渡,這種漸變因跨度大產(chǎn)生的視覺效果非常明顯;飽和度(S)漸變是指同一種色彩不同純度的過度,其產(chǎn)生的視覺效果比較和諧單調(diào);明度(B)漸變是同一種色彩不同明暗的過度,這種漸變的視覺效果給人一種沉靜的氛圍。

2. 漸變的表現(xiàn)形式

在界面設(shè)計(jì)中經(jīng)??炊喔鞣N各樣的漸變表現(xiàn)方式,使用最多的有以下幾種:

水平漸變:

這個(gè)很好理解,是指角度為0的線性漸變,是最流行的漸變形式;界面設(shè)計(jì)中多用在導(dǎo)航欄、進(jìn)度條、按鈕等元素上,能讓畫面變得精致而通透;例如京東使用橙紅漸變的設(shè)計(jì)語言貫穿整個(gè)App,從應(yīng)用圖標(biāo)到導(dǎo)航欄、按鈕、標(biāo)簽,全部都運(yùn)用了這種由紅色到橙色的過渡;仔細(xì)觀察發(fā)現(xiàn)在很多小標(biāo)簽上都使用了水平漸變?cè)O(shè)計(jì)手法,使產(chǎn)品看起來更年輕化。

知識(shí)點(diǎn):

在水平漸變中,通常把輕(亮)的色彩放在左邊,重(暗)的色彩放在右邊,這樣由左向右的方向感剛好與人的瀏覽習(xí)慣保持一致;而反過來就會(huì)與人的瀏覽視線相悖,應(yīng)避免。

垂直漸變:

即角度為90°的線性漸變,它通常被用在正方形或豎條形的元素上,如注冊(cè)登陸頁,個(gè)人中心頭部等;垂直漸變中上下兩種色彩的深淺變化會(huì)產(chǎn)生截然不同的視覺效果,上淺下深會(huì)讓給人一種凸起的立體感,而上深下淺會(huì)給人一種凹陷下去的空間感。

例如「紀(jì)念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景,在讓整個(gè)畫面豐富的同時(shí)又不會(huì)太搶奪主體的色彩,使畫面顯得清新透氣而不沉悶。

角度漸變:

角度漸變通常有對(duì)角漸變和多角度漸變;有角度的漸變相比水平和垂直漸變,它的使用場(chǎng)景更廣,如圖標(biāo)背板、啟動(dòng)頁、注冊(cè)登錄頁、標(biāo)簽等;想讓界面更加絢麗、動(dòng)感和迷人,這時(shí)候我們可以考慮多組漸變搭配使用。

色塊漸變:

漸變的顏色不只可以運(yùn)用在一個(gè)色塊上,還可以運(yùn)用在一組色塊上;設(shè)計(jì)師運(yùn)用一組近似性色彩,將每個(gè)菜單項(xiàng)清晰區(qū)分開,讓界面平衡在一個(gè)頻率上,這樣的畫面更有節(jié)奏感和舒適性。

不同于平滑的漸變,色塊漸變不再是單純的背景裝飾,在某些地方還具有一定的功能性,比如使用不同的色塊來分割的列表樣式;Clear Todos是一款日常任務(wù)清單的APP,它拋棄了傳統(tǒng)的列表樣式,使用了一系列色塊來作為列表的分割,非常漂亮和精致。

徑向漸變:

是指色彩以圓心向四周擴(kuò)散的漸變,是一種模擬光源照射的視覺效果,因此光源是整個(gè)畫面的視覺焦點(diǎn),將關(guān)鍵元素放在光源中心就會(huì)成為主角;通常被運(yùn)用到大背景上,如啟動(dòng)頁、引導(dǎo)頁等。

Solar天氣應(yīng)用的背景就是徑向漸變,光源擴(kuò)散的效果營造出一種夢(mèng)幻般的美感。

3. 和諧的漸變色

漸變色是由一個(gè)色彩走向另一個(gè)色彩的過程,有著迷人的視覺效果;如果你仔細(xì)觀察兩種色彩的過渡關(guān)系,就會(huì)發(fā)現(xiàn)不是每次都會(huì)得到滿意的效果,例如紅綠漸變就很糟糕,因?yàn)樗鼈儍烧呤腔閷?duì)立的色彩,但是如果加入黃色的過渡色就會(huì)好很多;原因是當(dāng)兩種色彩之間超過90度就會(huì)導(dǎo)致其漸變色看上去不太和諧自然,只有控制在90度之內(nèi)才會(huì)產(chǎn)生美妙的變化。

如何改善超過90度的兩種色相的漸變呢?這時(shí)候可以在兩色之間加入過渡色進(jìn)行調(diào)和。例如當(dāng)從黃色到藍(lán)色漸變時(shí),就可以加入紫色作為過渡才能呈現(xiàn)完美的視覺效果。

知識(shí)點(diǎn):

在搭配漸變色時(shí),盡量只改變其色相(H)、飽和度(S)、明度(B)中的一項(xiàng),這樣才能創(chuàng)造出和諧的漸變色方案。

 

作者:Fyin印跡;公眾號(hào):印跡拾光

本文由 @Fyin印跡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. nb

    來自福建 回復(fù)
  2. 平面與UI設(shè)計(jì)的區(qū)別

    回復(fù)
  3. 我可以轉(zhuǎn)發(fā)嗎,會(huì)標(biāo)明出處

    回復(fù)
    1. 可以

      來自廣東 回復(fù)
    2. 好的,謝謝

      來自甘肅 回復(fù)