零基礎(chǔ)小白利用谷歌這個神器，也能成為配色達(dá)人！

編者按：本文寫給那些看了一堆色彩理論依然做不好配色的同學(xué)，@呆呆丶L?教你借助谷歌的Material Design配色板，輕松晉升UI 配色達(dá)人。

2017年流行色丨《玩轉(zhuǎn)草木綠！在這里了解2017的年度潘通流行色》

前言

很多小伙伴都說自己配色如屎，因為沒學(xué)過色彩，沒畫過畫，導(dǎo)致每次配色時都小心翼翼的。

然后去網(wǎng)上搜各種配色理論，看了什么冷暖、明暗等術(shù)語后開始照著去配色，然而還是一坨...（我也是這樣）

所以有段時間我專門去了解配色這玩意兒，發(fā)現(xiàn)配色其實沒那么難，至少沒像做平面、廣告等那些設(shè)計那么難，UI 視覺界面的配色其實更“簡單”（這里說的簡單不是說配色簡單，而是用色更簡約）。

所以我下面介紹一款配色利器給你。

1. Material Design（MD）

MD 是由 Google 推出的設(shè)計語言，它更適用于 UI 視覺界面的配色，能起到更統(tǒng)一、更舒服的作用。

MD 所展示的顏色較鮮艷，所以在設(shè)備上展示出來也是很有識別性。有時候大家看到某個界面顏色很突出，干凈且簡約，那一定是按照 MD 的顏色來設(shè)計的。

它的色彩靈感來自于當(dāng)代建筑等，并由此引發(fā)出了大膽的顏色，與單調(diào)乏味的周邊環(huán)境形成鮮明的對比。

包括目前很多優(yōu)秀的作品，都是參照它的規(guī)范來設(shè)計的。

因為我們今天只說顏色，所以如果你對 MD 的其他部分感興趣的話，可以去網(wǎng)上搜下關(guān)于 MD 的文檔。當(dāng)中也包括有關(guān)于 icon、框架層次、控件等如何搭配的講解。（建議如果你英語還可以，最好看原版的）

2. MD 視覺調(diào)色板

MD 給出的官方色譜你可能會看不懂，所以我做了一套更清晰的（本來我做的很簡單很丑，這個是看了@大植子的色板修改過的）：

這是我在 sketch 里面做的色板，我這次騎行單車 App 的設(shè)計，顏色也是借用于此，所以色澤會看起來相對比較舒服。

不過在使用的過程中一定要學(xué)會限制數(shù)量。我們都知道，做界面設(shè)計的時候，顏色是“越少越好”（簡約）的，所以在眾多基礎(chǔ)色中選出三個色值以及一個強(qiáng)調(diào)色來做搭配就足夠了。

3. 三個色度

三個色度如：

利用這三個色值來做搭配，可以起到一個過渡的作用。

舉個例子：

大家看到這個界面，我一共使用了三種顏色，分別用不同的透明度來做調(diào)度，按鈕是一個顏色、兩種文字的搭配色、以及地圖顯示的顏色。

這樣整個界面的基調(diào)都處于一個范圍內(nèi)，看起來也會很統(tǒng)一。

（雖然我做的都是一個色值的設(shè)計，但不代表它不能做漸變，原理也跟上面的是一樣的。）

4. 強(qiáng)調(diào)色

那強(qiáng)調(diào)色是什么呢？比如你選擇了三個色度值之后，想要突出按鈕，那么就用其他顏色的色值來做按鈕色來盡量突出這個按鈕，所以你選擇的這個顏色就是強(qiáng)調(diào)色。

舉個例子：

這個按鈕的顏色就是強(qiáng)調(diào)色，主要看你如何去搭配使用。

如果你大范圍的用到強(qiáng)調(diào)色，那只需要用透明度來做不同位置的控制就足夠了，不需要用過多的顏色來強(qiáng)調(diào)。

當(dāng)然，強(qiáng)調(diào)色是可有可無的，或許你看我的這個界面使用了這個顏色會覺得不搭，那是因為我的背景色全都偏暖了，所以加了個冷色會顯得很突兀，主要還是看你界面是否存在多樣性，然后自己看情況去配色。

我的建議是：前期你先做好同色系的色彩搭配，然后再慢慢延展去做多色混搭。（并不是說單色搭配容易，其實單色更難，這樣建議只是說先去做好統(tǒng)一，再去做變化）

5. 主題色

很簡單，就是界面背景和面板色。因為我做的是暗色系的搭配，所以選擇了黑色。但是為什么我的黑色不是純黑呢？

上面其實也提到了下，因為為了配合我的黃色系，我在黑色中加了點黃色，這樣更能襯托出界面的基調(diào)。包括面板也是，加了亮黃，所以看起來比黑色更淺，但是不會突兀。

這就是主題色的搭配。整體來說還是比較簡單的，希望能幫到你。

總結(jié)

有時候我們看一個作品，會覺得這個作品好看，但是說不出來哪里好。包括不好的作品也一樣，說不出哪里不好。

這就是平時積累及總結(jié)的問題。人們經(jīng)常說平時要多看多練，但其實多看多練不是最重要的。

最重要的是多想，想想它為什么這么做，多去看看官方的設(shè)計文檔、網(wǎng)上大家的作品及文章，自己再把它總結(jié)一遍，化為自己的知識，不然你就算看再多做再多，都是沒 Ruan 用的。

歡迎關(guān)注作者的微信公眾號：「呆呆U理」

「色彩科普系列教程」

1. 紅色篇：《設(shè)計師的讀書筆記！帶你重新全面認(rèn)識色彩系列之紅色篇》
2. 橙色篇：《深入淺出學(xué)配色！帶你重新全面認(rèn)識色彩系列之橙色篇》
3. 黃色篇：《深入淺出學(xué)配色！帶你重新全面認(rèn)識色彩系列之黃色篇》
4. 綠色篇：《深入淺出學(xué)配色！帶你重新全面認(rèn)識色彩系列之綠色篇》
5. 藍(lán)色篇：《深入淺出學(xué)配色！帶你重新全面認(rèn)識色彩系列之藍(lán)色篇》
6. 紫色篇：《深入淺出學(xué)配色！帶你重新全面認(rèn)識色彩系列之紫色篇》
7. 橙色進(jìn)階：《帶你重新全面認(rèn)識色彩系列之橙色進(jìn)階篇》
8. 藍(lán)色+紅色進(jìn)階：《超多案例！零基礎(chǔ)學(xué)配色系列之紅色+藍(lán)色篇》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com