用好 MD 你也可以做配色達(dá)人

前言

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

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

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

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

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)色是可有可無的，或許你看我的這個界面使用了這個顏色會覺得不搭，那是因為我的背景色全都偏暖了，所以加了個冷色會顯得很突兀，主要還是看你界面是否存在多樣性，然后自己看情況去配色。

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

5.主題色

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

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

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

總結(jié)

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

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

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

文/ 呆呆
微信公眾號:呆呆U理
本文版權(quán)歸原作者所有，轉(zhuǎn)載請注明原出處。如有任何問題，請加微信ixdc-apply詳談。