??每天十分鐘盅称，系統(tǒng)學(xué)習(xí)設(shè)計缩膝，成為設(shè)計師疾层。終生學(xué)習(xí)，受益終生俯逾。這里是【知更常青藤】，歡迎你的到來皇筛，這是我和你一起學(xué)習(xí)設(shè)計的第八天。如果你不想丟失這個體系彪置，可以關(guān)注我拳魁，轉(zhuǎn)發(fā)本文撮弧。
由于篇幅所限贿衍，我們將6大配色方法論分為了上中下三冊。
文/萬歲爺 校驗/君 知更常青藤原創(chuàng)出品，轉(zhuǎn)載請注明出處擎淤，版權(quán)所有揉燃，侵權(quán)必究炊汤。
獻給學(xué)習(xí)設(shè)計的你
??長久以來抢腐，我們已經(jīng)走完了色彩體系的大部分課程。這些體系是未來深入學(xué)習(xí)色彩的基礎(chǔ)伤靠，讓我們回顧這7天的學(xué)習(xí)成果宴合，并依據(jù)這些成果展開對色彩綜合學(xué)習(xí)卦洽。
??當(dāng)你還是一個沒有任何設(shè)計基礎(chǔ)的新手的時候斜棚，我們從物理的角度分析了色彩的本質(zhì)，明白了物體并沒有色彩酗失，也明白了色彩是電磁波與視覺系統(tǒng)的綜合反映昧绣。讓你對色彩有了最基本的認識夜畴。
??隨后斩启，我們通過案例展示了光影的關(guān)系。光與陰影對UI的交互起著至關(guān)重要的作用发绢，利用光影提供易用的交互模式边酒，利用光影提供利于閱讀的用戶體驗狸窘。也讓你明白了僅僅使用灰度就可以表現(xiàn)整個客觀世界翻擒。
??然后是色彩的特性陋气，你明白了什么是固有色、物體色痒玩、光源色蠢古、環(huán)境色草讶。盡管這些特性的理解不會在你設(shè)計的時候提供有效的幫助番川，但是卻能夠幫助你深刻理解色彩的本質(zhì)颁督，幫助你構(gòu)建優(yōu)秀的調(diào)色板沉御。
??我們還學(xué)習(xí)了色彩的屬性：色相吠裆、飽和度、明度诵棵。這三個屬性正是我們后來學(xué)習(xí)色彩的基礎(chǔ)概念履澳，它們時刻被提起距贷，并時刻被應(yīng)用吻谋。你應(yīng)當(dāng)明白如何利用色彩的三個屬性去定義和描述色彩漓拾，每當(dāng)你看見色彩的時候骇两，你都能夠利用色相脯颜、飽和度、明度這三個屬性去思考和觀察闸餐。
??最終舍沙，我們利用前面的基礎(chǔ)概念過渡到了色輪拂铡。從此以后，色輪將是你一直使用的色彩工具斗锭，如果沒有色輪你將很難進行初級的配色岖是。
??這一章將是6種配色方法的學(xué)習(xí)豺撑，我們使用色輪來展現(xiàn)這種配色過程聪轿。因此屹电，如果你還不明白色彩的三屬性以及基礎(chǔ)色彩理論跃巡，我想你值得看一看我的往期文章素邪，去學(xué)習(xí)這些基礎(chǔ)理論兔朦，這是你看懂本章的基礎(chǔ)沽甥。
單色配色
??盡管我們使用色輪來進行配色摆舟，但是你需要理解色輪并非必須是圓形，如果你提前使用了Photoshop（我們不推薦先學(xué)習(xí)軟件）媳瞪，那么你需要明白這些軟件的取色器就是一個色輪蛇受，盡管它是矩形的兢仰。
??當(dāng)你進行設(shè)計的時候把将，配色是擺在你面前的首要問題秸弛。如果你是憑感覺在色輪中選擇色彩递览，那么你的作品至少失敗了一半瞳腌。
??在所有配色的方法論當(dāng)中嫂侍，單色配色是最易上手的挑宠。如果一個設(shè)計中出現(xiàn)過多的鮮艷色彩各淀，人的視覺系統(tǒng)會感到視覺疲勞碎浇，這種狀態(tài)不應(yīng)當(dāng)持續(xù)很久，這是不和諧的配色方法悉默。
??但是當(dāng)你盯著藍色大撼危或者綠色森林看上一天也不會有這種感覺剖膳。你的視覺系統(tǒng)會感到異常放松吱晒。這并不意味著你只需要使用色相一致的純色單色仑濒，事實上墩瞳，森林的綠色是豐富多彩的驼壶，盡管這些綠色都是同樣的色相，森林的細節(jié)里有許多不同的明度和飽和度喉酌。自然的“配色”總是讓人感到和諧和震撼热凹，如果你實在沒有配色靈感，嘗試從身邊的大自然尋找調(diào)色板泪电，你會有意外收獲般妙。
??單色配色的關(guān)鍵就在于：選擇一個合適的色相，在此基礎(chǔ)上相速，進行飽和度和明度的調(diào)整，并且這種色調(diào)最好不要過多突诬。當(dāng)超過7到8種單色之后苫拍，你就會很難分辨這些色彩之間的差異，因此旺隙，3-4個色彩是你最好的選擇绒极。
??我們以紅色和藍紫色的飽和版本為例，配置了單色的變化例子蔬捷，請看下圖：
??在這幅圖中集峦，我們給出了飽和度版本的單色配色，但是單色僅僅通過飽和度的變化是不夠的抠刺，你還記得我們說過明度最重要嗎塔淤？當(dāng)你使用單色配色的時候，如果丟失了明度的變化速妖，那么你的場景將會失去深度高蜂，你要明白，世界的輪廓是通過明度來標識的罕容，因此备恤，當(dāng)使用單色的配色時，你需要更寬廣的明度锦秒，否則會使你的設(shè)計顯得單調(diào)乏味露泊，并且缺乏縱深。
??我們再次修改這個配色旅择，這次加大他們之間的明度差別：
??我們給出了一個利用單色配色的完美案例惭笑，這是一個藍綠色的魔方，作者利用了單色配色方法。它的明度跨度非常顯眼沉噩，在這個案例中捺宗，為了突出魔方的立體效果，明度的變化是考慮的首要因素川蒙。由于采用了單色的配色方案蚜厉，因此，我相信新手會很容易獲得這種配色能力畜眨。不過昼牛，你最好掌握色彩的本質(zhì)和陰影的正確使用，這樣才能夠做到足夠優(yōu)秀康聂。你放心贰健，單色配色已經(jīng)足夠單純，相信你可以掌握早抠。
??我們利用Photoshop的取色器提取了這個作品的色域霎烙，將其展示在作品下方撬讽，并且將調(diào)色板中的每一個色彩的HSV(Hue=色相蕊连；Saturation=飽和度；Value=明度)信息放到表格中游昼。你會發(fā)現(xiàn)最左面的藍色明度非常低甘苍，很暗淡，但是飽和度卻很高烘豌，作品正是以這個低明度高飽和的色彩作為基本色進行調(diào)整的载庭。我們發(fā)現(xiàn)這個調(diào)色板的明度在逐漸提高，飽和度也隨著明度的變化逐漸降低廊佩，但是調(diào)色板的第二個和第三個色彩的飽和度卻升高了囚聚，這是作品有意為之的。不過我們想表明的一個觀點是：單色配色标锄，明度變化盡量保持較寬的范圍顽铸。
??小貼士：你會發(fā)現(xiàn)我們利用取色器來歸納某些作品的調(diào)色板，我們希望你也這樣做料皇，這會讓你的色彩原理基礎(chǔ)能力提升很快谓松。在這個過程中你會接觸大量作品，你要分辨哪些作品好践剂，哪些是糟糕的設(shè)計鬼譬。對于優(yōu)秀的作品，你要能夠找出它們之間的共同點逊脯。我們的體系會一直帶著你做這種分析优质。幫助你更快地提升自己的欣賞和設(shè)計能力。很快你就會發(fā)現(xiàn)，自己會制作調(diào)色板了盆赤。
??下圖是一個應(yīng)用軟件的UI界面贾富，這個作品同樣使用了單色配色方法。請看下圖：
??在這個案例中牺六，我們提取了3種色彩颤枪。這些色彩都是藍紫色的不同明度版本，它們都具有不高的飽和度淑际，并且明度逐漸增強畏纲。值得注意的是，這個界面的字體同樣是藍紫色的高明度版本春缕，有些字體的色彩幾乎接近白色盗胀，但是依然可以感受到藍紫色的成分。
??小貼士：從視覺上看锄贼，由于界面背景使用了大量單色體系票灰，而字體的比例在這個UI種并不高，在這種面積對比情況下宅荤，字體容易在視覺上受到藍紫色的影響屑迂，從而感覺有藍紫色的成分。當(dāng)然冯键，事實是：作者的確使用了藍紫色的字體惹盼，只不過明度非常高。
??單色配色很容易構(gòu)建和諧惫确。對于新手手报，我們推薦你先使用單色配色，培養(yǎng)自己的經(jīng)驗改化，進而掌握更多的配色方法掩蛤。正如我一直所說，你對色彩的理解建立在色彩原理的基礎(chǔ)之上陈肛，如果你不具備這些色彩原理的知識揍鸟，我想你應(yīng)當(dāng)填補你的知識盲區(qū)，而不是死記硬背這些配色方案或者去網(wǎng)上收集配色板燥爷。
??接下來我給你幾個單色配色的案例蜈亩，你可以慢慢觀察并且學(xué)習(xí)提取這些色彩，然后組合成自己的調(diào)色板前翎，切記：配色方案不可隨意復(fù)制稚配，你應(yīng)當(dāng)根據(jù)產(chǎn)品面向的用戶以及產(chǎn)品本身的特點來構(gòu)建基礎(chǔ)色彩，或者從自然界尋找配色方案港华，但絕不是復(fù)制別人的調(diào)色板道川。
??這個網(wǎng)站的主圖采用了藍綠色的灰度配色，整個圖片保持了較高的明度和很低的飽和度。實際上它的色相十分接近灰色冒萄，這種色彩給網(wǎng)站一種輕盈的感覺臊岸，使得網(wǎng)站看起來不那么頭重腳輕。
??網(wǎng)站還有大量的留白尊流。這種極簡的設(shè)計風(fēng)格在近幾年非常流行帅戒，不過受限于扁平化設(shè)計的弊端，設(shè)計師們正在尋找一種更加飽滿同時兼具扁平化簡潔優(yōu)點的設(shè)計：漸變色就是其中一種崖技。請看下圖：
??這個網(wǎng)站的頂部設(shè)計采用了漸變風(fēng)格逻住，盡管如此，作者也只采用了青色和紫色的漸變迎献。過多的漸變色彩會產(chǎn)生許多設(shè)計噪點瞎访，我們甚至可以采用單色的不同明度或者飽和度的漸變版本來構(gòu)建豐富的視覺設(shè)計。這種設(shè)計在今年（2018）正在變得流行吁恍。
??對單色配色的講解到此為止扒秸，我們?yōu)槟憧偨Y(jié)了單色配色的知識點：
- 選擇一個基礎(chǔ)色
- 在基礎(chǔ)色的基礎(chǔ)上，進行飽和度和明度的變化冀瓦，明度的范圍可以適當(dāng)放寬伴奥，以獲得深度感
- 可以利用單色的不同飽和度和明度來進行漸變設(shè)計，這可以使設(shè)計更有視覺魅力
相似色
??色輪上3至5個相鄰色彩的組合形成相似色咕幻。
??我們還可以利用相鄰的4個色彩的組合來創(chuàng)建鄰近色渔伯。當(dāng)超過5種相鄰的色彩組合顶霞，臨近色系兩邊的色彩之間的色相差距過大肄程，這會導(dǎo)致主題的表達產(chǎn)生不和諧的感覺。
??你可以直接選擇一組鄰近色选浑，通常這是有效的蓝厌，如上述兩組鄰近色的選擇。但是在色輪上古徒，為鄰近色選擇一種基本的色彩拓提，只是該調(diào)色板走向精細化的一個開始。
??與單色配色一樣隧膘，你要為你選擇的基本色彩進行進一步地變化代态。你可以對一個色彩進行深、淺疹吃、明蹦疑、暗四個調(diào)子的調(diào)整，請保證總是能夠?qū)σ粋€色彩的明度和飽和進行變化和調(diào)整萨驶。正如上述的4個鄰近色組合歉摧，盡管你選擇了相鄰的藍色、藍紫色、紫色叁温、紫紅色再悼，但是這只是你的開端，你可以進一步地對每一個色彩進行明度和飽和度的調(diào)整膝但，你不必擔(dān)心這會違反鄰近色的定義冲九。
??如果你對上述的紫色進行變化，可能會有三個版本的紫色跟束，色彩更深娘侍、明度更亮、二者兼?zhèn)溆韭Ｍ砥渌齻€基本色彩憾筏。為此，我給出了一個案例花鹅，這個案例不是高清的氧腰，但是它卻能夠說明問題。
??你看到上面的圖形了嗎刨肃？是的古拴，請先觀察右上方的色輪，我們選擇了藍紫色真友、藍色黄痪、藍綠色三個相鄰的基本色彩，在每個基本色彩的基礎(chǔ)上盔然，我們調(diào)整了各自的明度和飽和度桅打，尤其是明度的變化非常大，請記子浮：明度最重要挺尾。
??通過這種配色方式，我們得到了3組一共9種豐富的色彩站绪，請你放心遭铺，在經(jīng)過明度和飽和度的變化之后，這些色彩的色相并不明顯恢准，不會如補色那樣對立和沖突魂挂，相反，其中有兩種基本色彩是復(fù)色馁筐，通常復(fù)色的影響是最小的涂召。
??我們利用這9種色彩，繪制了色輪下方的抽象畫眯漩。在這幅畫中芹扭，你能夠感受到空間感麻顶，這是由明度的差異化導(dǎo)致的，同時一些高飽和的色相使得畫面的視覺效果變得豐富舱卡。
??這些所有的色彩并不會有沖突的感覺辅肾。它們都是鄰近色組成的，鄰近色的定義使得各自都包含有兩邊的成分轮锥，因此矫钓，容易形成和諧一致的觀感。
??盡管鄰近色的配置通常是安全的舍杜，但是你還是要注意新娜，位于鄰近色最兩端的色彩依然相隔遙遠，如上圖的藍紫色和藍綠色既绩，有些鄰近色的兩端相隔更加遙遠概龄，這種情況下，二者會產(chǎn)生一些如混色和互補色的效果饲握。這是你需要注意的私杜，當(dāng)你需要這種效果的時候，你可以組合鄰近色最兩端的色彩救欧。這種合理的差異化設(shè)計衰粹，使得鄰近色不僅可以應(yīng)對肯定和支持等和諧主題，也可以應(yīng)對需要產(chǎn)生沖突和強對比的主題場景笆怠。
總結(jié)
??如你所見铝耻，我們介紹了單色配色和鄰近色配色的原理和方法論。我們希望你能夠從根本上理解這種理論蹬刷，這使得你的設(shè)計生涯種有更多的可能瓢捉。
??正如文中所言，你不應(yīng)當(dāng)死記硬背這些配色方案箍铭，而應(yīng)當(dāng)吸取其中的配色思路和原理泊柬。
??由于篇幅所限椎镣，我們將6大配色方法論分為了上中下三冊诈火，期待你的下一次光臨。
下章內(nèi)容
- 「一文掌獲配色能力」一勞永逸的配色方案状答，6大配色系統(tǒng)大放送(中)
??如果文章對你有價值冷守，讓你得到了提升，請你相信作者惊科，并且關(guān)注他拍摇，轉(zhuǎn)發(fā)文章讓更多的人看到有質(zhì)量的內(nèi)容」萁兀或者用【打賞】喂食作者充活，讓他繼續(xù)為你奮斗蜂莉。如果你有疑問或建議，請留言告訴我混卵。
