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

前言

很多小伙伴都說(shuō)自己配色如屎，因?yàn)闆]學(xué)過(guò)色彩，沒畫過(guò)畫，導(dǎo)致每次配色時(shí)都小心翼翼的。

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

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

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

1.Material Design（MD）

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

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

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

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

因?yàn)槲覀兘裉熘徽f(shuō)顏色，所以如果你對(duì) MD 的其他部分感興趣的話，可以去網(wǎng)上搜下關(guān)于 MD 的文檔。當(dāng)中也包括有關(guān)于 Icon、框架層次、控件等如何搭配的講解。（建議如果你英語(yǔ)還可以，最好看原版的）

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

MD 給出的官方色譜你可能會(huì)看不懂，所以我做了一套更清晰的（本來(lái)我做的很簡(jiǎn)單很丑，這個(gè)是看了 @大植子 的色板修改過(guò)的）：

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

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

3.三個(gè)色度

三個(gè)色度如：

利用這三個(gè)色值來(lái)做搭配，可以起到一個(gè)過(guò)渡的作用。

舉個(gè)例子：

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

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

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

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

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

舉個(gè)例子：

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

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

當(dāng)然，強(qiáng)調(diào)色是可有可無(wú)的，或許你看我的這個(gè)界面使用了這個(gè)顏色會(huì)覺得不搭，那是因?yàn)槲业谋尘吧计耍约恿藗€(gè)冷色會(huì)顯得很突兀，主要還是看你界面是否存在多樣性，然后自己看情況去配色。

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

5.主題色

很簡(jiǎn)單，就是界面背景和面板色。因?yàn)槲易龅氖前瞪档拇钆洌赃x擇了黑色。但是為什么我的黑色不是純黑呢？

上面其實(shí)也提到了下，因?yàn)闉榱伺浜衔业狞S色系，我在黑色中加了點(diǎn)黃色，這樣更能襯托出界面的基調(diào)。包括面板也是，加了亮黃，所以看起來(lái)比黑色更淺，但是不會(huì)突兀。

這就是主題色的搭配。整體來(lái)說(shuō)還是比較簡(jiǎn)單的，希望能幫到你。

總結(jié)

有時(shí)候我們看一個(gè)作品，會(huì)覺得這個(gè)作品好看，但是說(shuō)不出來(lái)哪里好。包括不好的作品也一樣，說(shuō)不出哪里不好。

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

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

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