用好 MD 你也可以做配色達人
前言
很多小伙伴都說自己配色如屎，因為沒學過色彩，沒畫過畫，導致每次配色時都小心翼翼的。
然后去網上搜各種配色理論，看了什么冷暖、明暗等術語后開始照著去配色，然而還是一坨...（我也是這樣）
所以有段時間我專門去了解配色這玩意兒，發現配色其實沒那么難，至少沒像做平面、廣告等那些設計那么難，UI 視覺界面的配色其實更“簡單”（這里說的簡單不是說配色簡單，而是用色更簡約）。
所以我下面介紹一款配色利器給你。
1.Material Design（MD）
MD 是由 Google 推出的設計語言，它更適用于 UI 視覺界面的配色，能起到更統一、更舒服的作用。
MD 所展示的顏色較鮮艷，所以在設備上展示出來也是很有識別性。有時候大家看到某個界面顏色很突出，干凈且簡約，那一定是按照 MD 的顏色來設計的。
它的色彩靈感來自于當代建筑等，并由此引發出了大膽的顏色，與單調乏味的周邊環境形成鮮明的對比。
包括目前很多優秀的作品，都是參照它的規范來設計的。
因為我們今天只說顏色，所以如果你對 MD 的其他部分感興趣的話，可以去網上搜下關于 MD 的文檔。當中也包括有關于 Icon、框架層次、控件等如何搭配的講解。（建議如果你英語還可以，最好看原版的）
2.MD 視覺調色板
MD 給出的官方色譜你可能會看不懂，所以我做了一套更清晰的（本來我做的很簡單很丑，這個是看了 @大植子 的色板修改過的）：
這是我在 sketch 里面做的色板，我這次騎行單車 App 的設計，顏色也是借用于此，所以色澤會看起來相對比較舒服。
不過在使用的過程中一定要學會限制數量。我們都知道，做界面設計的時候，顏色是“越少越好”（簡約）的，所以在眾多基礎色中選出三個色值以及一個強調色來做搭配就足夠了。
3.三個色度
三個色度如：
利用這三個色值來做搭配，可以起到一個過渡的作用。
舉個例子：
大家看到這個界面，我一共使用了三種顏色，分別用不同的透明度來做調度，按鈕是一個顏色、兩種文字的搭配色、以及地圖顯示的顏色。
這樣整個界面的基調都處于一個范圍內，看起來也會很統一。
（雖然我做的都是一個色值的設計，但不代表它不能做漸變，原理也跟上面的是一樣的。）
4.強調色
那強調色是什么呢？比如你選擇了三個色度值之后，想要突出按鈕，那么就用其他顏色的色值來做按鈕色來盡量突出這個按鈕，所以你選擇的這個顏色就是強調色。
舉個例子：
這個按鈕的顏色就是強調色，主要看你如何去搭配使用。
如果你大范圍的用到強調色，那只需要用透明度來做不同位置的控制就足夠了，不需要用過多的顏色來強調。
當然，強調色是可有可無的，或許你看我的這個界面使用了這個顏色會覺得不搭，那是因為我的背景色全都偏暖了，所以加了個冷色會顯得很突兀，主要還是看你界面是否存在多樣性，然后自己看情況去配色。
我的建議是：前期你先做好同色系的色彩搭配，然后再慢慢延展去做多色混搭。（并不是說單色搭配容易，其實單色更難，這樣建議只是說先去做好統一，再去做變化）
5.主題色
很簡單，就是界面背景和面板色。因為我做的是暗色系的搭配，所以選擇了黑色。但是為什么我的黑色不是純黑呢？
上面其實也提到了下，因為為了配合我的黃色系，我在黑色中加了點黃色，這樣更能襯托出界面的基調。包括面板也是，加了亮黃，所以看起來比黑色更淺，但是不會突兀。
這就是主題色的搭配。整體來說還是比較簡單的，希望能幫到你。
總結
有時候我們看一個作品，會覺得這個作品好看，但是說不出來哪里好。包括不好的作品也一樣，說不出哪里不好。
這就是平時積累及總結的問題。人們經常說平時要多看多練，但其實多看多練不是最重要的。
最重要的是多想，想想它為什么這么做，多去看看官方的設計文檔、網上大家的作品及文章，自己再把它總結一遍，化為自己的知識，不然你就算看再多做再多，都是沒 Ruan 用的。
文/ 呆呆
微信公眾號:呆呆U理
本文版權歸原作者所有，轉載請注明原出處。如有任何問題，請加微信ixdc-apply詳談。
精選課程
共鳴設計——科學與審美的交匯，以Xiaomi SU7設計為例
李田原
小米汽車 設計總監
設計論文寫作：如何將實踐案例轉換為可發表的文本
2024產品設計專業系統化能力提升課程
2024體驗設計專業系統化能力提升課程
玩轉行為設計 高效提升產品業績（中文字幕）
Joris Groen
Buyerminds 聯合創始人,創意總監