由于篇幅所限，我們將6大配色方法論分為了上中下三冊(cè)。 文/萬(wàn)歲爺 校驗(yàn)/君 知更常青藤原創(chuàng)出品，轉(zhuǎn)載請(qǐng)注明出處，版權(quán)所有，侵權(quán)必究。  獻(xiàn)給學(xué)習(xí)設(shè)計(jì)的你??長(zhǎng)久以來(lái)，我們已經(jīng)走完了色彩體系的大部分課程。這些體系是未來(lái)深入學(xué)習(xí)色彩的基礎(chǔ)，讓我們回顧這7天的學(xué)習(xí)成果，并依據(jù)這些成果展開對(duì)色彩綜合學(xué)習(xí)。 ??當(dāng)你還是一個(gè)沒有任何設(shè)計(jì)基礎(chǔ)的新手的時(shí)候，我們從物理的角度分析了色彩的本質(zhì)，明白了物體并沒有色彩，也明白了色彩是電磁波與視覺系統(tǒng)的綜合反映。讓你對(duì)色彩有了最基本的認(rèn)識(shí)。 ??隨后，我們通過案例展示了光影的關(guān)系。光與陰影對(duì)UI的交互起著至關(guān)重要的作用，利用光影提供易用的交互模式，利用光影提供利于閱讀的用戶體驗(yàn)。也讓你明白了僅僅使用灰度就可以表現(xiàn)整個(gè)客觀世界。 ??然后是色彩的特性，你明白了什么是固有色、物體色、光源色、環(huán)境色。盡管這些特性的理解不會(huì)在你設(shè)計(jì)的時(shí)候提供有效的幫助，但是卻能夠幫助你深刻理解色彩的本質(zhì)，幫助你構(gòu)建優(yōu)秀的調(diào)色板。 ??我們還學(xué)習(xí)了色彩的屬性：色相、飽和度、明度。這三個(gè)屬性正是我們后來(lái)學(xué)習(xí)色彩的基礎(chǔ)概念，它們時(shí)刻被提起，并時(shí)刻被應(yīng)用。你應(yīng)當(dāng)明白如何利用色彩的三個(gè)屬性去定義和描述色彩，每當(dāng)你看見色彩的時(shí)候，你都能夠利用色相、飽和度、明度這三個(gè)屬性去思考和觀察。 ??最終，我們利用前面的基礎(chǔ)概念過渡到了色輪。從此以后，色輪將是你一直使用的色彩工具，如果沒有色輪你將很難進(jìn)行初級(jí)的配色。 ??這一章將是6種配色方法的學(xué)習(xí)，我們使用色輪來(lái)展現(xiàn)這種配色過程。因此，如果你還不明白色彩的三屬性以及基礎(chǔ)色彩理論，我想你值得看一看我的往期文章，去學(xué)習(xí)這些基礎(chǔ)理論，這是你看懂本章的基礎(chǔ)。 單色配色??盡管我們使用色輪來(lái)進(jìn)行配色，但是你需要理解色輪并非必須是圓形，如果你提前使用了Photoshop（我們不推薦先學(xué)習(xí)軟件），那么你需要明白這些軟件的取色器就是一個(gè)色輪，盡管它是矩形的。 ??當(dāng)你進(jìn)行設(shè)計(jì)的時(shí)候，配色是擺在你面前的首要問題。如果你是憑感覺在色輪中選擇色彩，那么你的作品至少失敗了一半。 ??在所有配色的方法論當(dāng)中，單色配色是最易上手的。如果一個(gè)設(shè)計(jì)中出現(xiàn)過多的鮮艷色彩，人的視覺系統(tǒng)會(huì)感到視覺疲勞，這種狀態(tài)不應(yīng)當(dāng)持續(xù)很久，這是不和諧的配色方法。 ??但是當(dāng)你盯著藍(lán)色大?；蛘呔G色森林看上一天也不會(huì)有這種感覺。你的視覺系統(tǒng)會(huì)感到異常放松。這并不意味著你只需要使用色相一致的純色單色，事實(shí)上，森林的綠色是豐富多彩的，盡管這些綠色都是同樣的色相，森林的細(xì)節(jié)里有許多不同的明度和飽和度。自然的“配色”總是讓人感到和諧和震撼，如果你實(shí)在沒有配色靈感，嘗試從身邊的大自然尋找調(diào)色板，你會(huì)有意外收獲。 ??單色配色的關(guān)鍵就在于：選擇一個(gè)合適的色相，在此基礎(chǔ)上，進(jìn)行飽和度和明度的調(diào)整，并且這種色調(diào)最好不要過多。當(dāng)超過7到8種單色之后，你就會(huì)很難分辨這些色彩之間的差異，因此，3-4個(gè)色彩是你最好的選擇。 ??我們以紅色和藍(lán)紫色的飽和版本為例，配置了單色的變化例子，請(qǐng)看下圖：  僅僅變化飽和度的單色漸變 ??在這幅圖中，我們給出了飽和度版本的單色配色，但是單色僅僅通過飽和度的變化是不夠的，你還記得我們說過明度最重要嗎？當(dāng)你使用單色配色的時(shí)候，如果丟失了明度的變化，那么你的場(chǎng)景將會(huì)失去深度，你要明白，世界的輪廓是通過明度來(lái)標(biāo)識(shí)的，因此，當(dāng)使用單色的配色時(shí)，你需要更寬廣的明度，否則會(huì)使你的設(shè)計(jì)顯得單調(diào)乏味，并且缺乏縱深。 ??我們?cè)俅涡薷倪@個(gè)配色，這次加大他們之間的明度差別：  飽和度與明度變化的單色 ??我們給出了一個(gè)利用單色配色的完美案例，這是一個(gè)藍(lán)綠色的魔方，作者利用了單色配色方法。它的明度跨度非常顯眼，在這個(gè)案例中，為了突出魔方的立體效果，明度的變化是考慮的首要因素。由于采用了單色的配色方案，因此，我相信新手會(huì)很容易獲得這種配色能力。不過，你最好掌握色彩的本質(zhì)和陰影的正確使用，這樣才能夠做到足夠優(yōu)秀。你放心，單色配色已經(jīng)足夠單純，相信你可以掌握。  單色的魔方 ??我們利用Photoshop的取色器提取了這個(gè)作品的色域，將其展示在作品下方，并且將調(diào)色板中的每一個(gè)色彩的HSV(Hue=色相；Saturation=飽和度；Value=明度)信息放到表格中。你會(huì)發(fā)現(xiàn)最左面的藍(lán)色明度非常低，很暗淡，但是飽和度卻很高，作品正是以這個(gè)低明度高飽和的色彩作為基本色進(jìn)行調(diào)整的。我們發(fā)現(xiàn)這個(gè)調(diào)色板的明度在逐漸提高，飽和度也隨著明度的變化逐漸降低，但是調(diào)色板的第二個(gè)和第三個(gè)色彩的飽和度卻升高了，這是作品有意為之的。不過我們想表明的一個(gè)觀點(diǎn)是：單色配色，明度變化盡量保持較寬的范圍。
??下圖是一個(gè)應(yīng)用軟件的UI界面，這個(gè)作品同樣使用了單色配色方法。請(qǐng)看下圖：  APP UI ??在這個(gè)案例中，我們提取了3種色彩。這些色彩都是藍(lán)紫色的不同明度版本，它們都具有不高的飽和度，并且明度逐漸增強(qiáng)。值得注意的是，這個(gè)界面的字體同樣是藍(lán)紫色的高明度版本，有些字體的色彩幾乎接近白色，但是依然可以感受到藍(lán)紫色的成分。
??單色配色很容易構(gòu)建和諧。對(duì)于新手，我們推薦你先使用單色配色，培養(yǎng)自己的經(jīng)驗(yàn)，進(jìn)而掌握更多的配色方法。正如我一直所說，你對(duì)色彩的理解建立在色彩原理的基礎(chǔ)之上，如果你不具備這些色彩原理的知識(shí)，我想你應(yīng)當(dāng)填補(bǔ)你的知識(shí)盲區(qū)，而不是死記硬背這些配色方案或者去網(wǎng)上收集配色板。 ??接下來(lái)我給你幾個(gè)單色配色的案例，你可以慢慢觀察并且學(xué)習(xí)提取這些色彩，然后組合成自己的調(diào)色板，切記：配色方案不可隨意復(fù)制，你應(yīng)當(dāng)根據(jù)產(chǎn)品面向的用戶以及產(chǎn)品本身的特點(diǎn)來(lái)構(gòu)建基礎(chǔ)色彩，或者從自然界尋找配色方案，但絕不是復(fù)制別人的調(diào)色板。  灰度的網(wǎng)站 ??這個(gè)網(wǎng)站的主圖采用了藍(lán)綠色的灰度配色，整個(gè)圖片保持了較高的明度和很低的飽和度。實(shí)際上它的色相十分接近灰色，這種色彩給網(wǎng)站一種輕盈的感覺，使得網(wǎng)站看起來(lái)不那么頭重腳輕。 ??網(wǎng)站還有大量的留白。這種極簡(jiǎn)的設(shè)計(jì)風(fēng)格在近幾年非常流行，不過受限于扁平化設(shè)計(jì)的弊端，設(shè)計(jì)師們正在尋找一種更加飽滿同時(shí)兼具扁平化簡(jiǎn)潔優(yōu)點(diǎn)的設(shè)計(jì)：漸變色就是其中一種。請(qǐng)看下圖：  漸變?cè)O(shè)計(jì) ??這個(gè)網(wǎng)站的頂部設(shè)計(jì)采用了漸變風(fēng)格，盡管如此，作者也只采用了青色和紫色的漸變。過多的漸變色彩會(huì)產(chǎn)生許多設(shè)計(jì)噪點(diǎn)，我們甚至可以采用單色的不同明度或者飽和度的漸變版本來(lái)構(gòu)建豐富的視覺設(shè)計(jì)。這種設(shè)計(jì)在今年（2018）正在變得流行。  青色的不同明度和飽和度的漸變版本 ??對(duì)單色配色的講解到此為止，我們?yōu)槟憧偨Y(jié)了單色配色的知識(shí)點(diǎn)：
相似色??色輪上3至5個(gè)相鄰色彩的組合形成相似色。  鄰近色 ??我們還可以利用相鄰的4個(gè)色彩的組合來(lái)創(chuàng)建鄰近色。當(dāng)超過5種相鄰的色彩組合，臨近色系兩邊的色彩之間的色相差距過大，這會(huì)導(dǎo)致主題的表達(dá)產(chǎn)生不和諧的感覺。  鄰近色 ??你可以直接選擇一組鄰近色，通常這是有效的，如上述兩組鄰近色的選擇。但是在色輪上，為鄰近色選擇一種基本的色彩，只是該調(diào)色板走向精細(xì)化的一個(gè)開始。 ??與單色配色一樣，你要為你選擇的基本色彩進(jìn)行進(jìn)一步地變化。你可以對(duì)一個(gè)色彩進(jìn)行深、淺、明、暗四個(gè)調(diào)子的調(diào)整，請(qǐng)保證總是能夠?qū)σ粋€(gè)色彩的明度和飽和進(jìn)行變化和調(diào)整。正如上述的4個(gè)鄰近色組合，盡管你選擇了相鄰的藍(lán)色、藍(lán)紫色、紫色、紫紅色，但是這只是你的開端，你可以進(jìn)一步地對(duì)每一個(gè)色彩進(jìn)行明度和飽和度的調(diào)整，你不必?fù)?dān)心這會(huì)違反鄰近色的定義。 ??如果你對(duì)上述的紫色進(jìn)行變化，可能會(huì)有三個(gè)版本的紫色，色彩更深、明度更亮、二者兼?zhèn)?。同理其他三個(gè)基本色彩。為此，我給出了一個(gè)案例，這個(gè)案例不是高清的，但是它卻能夠說明問題。  鄰近色的變化和應(yīng)用 ??你看到上面的圖形了嗎？是的，請(qǐng)先觀察右上方的色輪，我們選擇了藍(lán)紫色、藍(lán)色、藍(lán)綠色三個(gè)相鄰的基本色彩，在每個(gè)基本色彩的基礎(chǔ)上，我們調(diào)整了各自的明度和飽和度，尤其是明度的變化非常大，請(qǐng)記?。好鞫茸钪匾?/p> ??通過這種配色方式，我們得到了3組一共9種豐富的色彩，請(qǐng)你放心，在經(jīng)過明度和飽和度的變化之后，這些色彩的色相并不明顯，不會(huì)如補(bǔ)色那樣對(duì)立和沖突，相反，其中有兩種基本色彩是復(fù)色，通常復(fù)色的影響是最小的。 ??我們利用這9種色彩，繪制了色輪下方的抽象畫。在這幅畫中，你能夠感受到空間感，這是由明度的差異化導(dǎo)致的，同時(shí)一些高飽和的色相使得畫面的視覺效果變得豐富。 ??這些所有的色彩并不會(huì)有沖突的感覺。它們都是鄰近色組成的，鄰近色的定義使得各自都包含有兩邊的成分，因此，容易形成和諧一致的觀感。 ??盡管鄰近色的配置通常是安全的，但是你還是要注意，位于鄰近色最兩端的色彩依然相隔遙遠(yuǎn)，如上圖的藍(lán)紫色和藍(lán)綠色，有些鄰近色的兩端相隔更加遙遠(yuǎn)，這種情況下，二者會(huì)產(chǎn)生一些如混色和互補(bǔ)色的效果。這是你需要注意的，當(dāng)你需要這種效果的時(shí)候，你可以組合鄰近色最兩端的色彩。這種合理的差異化設(shè)計(jì)，使得鄰近色不僅可以應(yīng)對(duì)肯定和支持等和諧主題，也可以應(yīng)對(duì)需要產(chǎn)生沖突和強(qiáng)對(duì)比的主題場(chǎng)景。 總結(jié)??如你所見，我們介紹了單色配色和鄰近色配色的原理和方法論。我們希望你能夠從根本上理解這種理論，這使得你的設(shè)計(jì)生涯種有更多的可能。 ??正如文中所言，你不應(yīng)當(dāng)死記硬背這些配色方案，而應(yīng)當(dāng)吸取其中的配色思路和原理。 ??由于篇幅所限，我們將6大配色方法論分為了上中下三冊(cè)，期待你的下一次光臨。 下章內(nèi)容
|
|
|
來(lái)自： zhch1111 > 《Photoshop》
