互聯網產品設計（網頁、UI等）時，如何給產品選擇配色？

一個產品的設計，經常設計到主色、輔助色、強調色等等色彩的用法。

我們可以通過企業LOGO或者產品特性確定一個主色，那麼其他顏色該選擇？

近年來，很多產品開始弱化界面中色彩，在這種潮流中，設計師在產品設計時又該如何做出選擇？

其實方法也有很多，直接用LOGO色是最簡單實用的一種，還有就是用AI的混合工具，選中兩個顏色，混合，改少步數，從裡面選色。

或者AI裡面的色板——顏色參考，從裡面選也可以。

要麼就是產品色，補色，或者用PS的web存儲——GIF預設32仿色，64仿色直接生成色板。ctrl+alt+shift+s，格式改為GIF，顏色選擇32，然後下面有個顏色，點開後面的角標，選擇存儲顏色表，就可以做一個色板。

安裝PS色環插件，可以在同一飽和度，明度下，更改色相。

切換到HSB模式的顏色，可以通過調整S值更改飽和度，調整B值更改明度。

但實際上UI設計越做越性冷淡，網頁倒還好，app的話經常會看到雙色的，黑白的，less is more，雖然看起來好像挺舒服，但對於我這種喜歡五顏六色的人來說真是食之無味。

很多小夥伴都說自己配色如屎，因為沒學過色彩，沒畫過畫，導致每次配色時都小心翼翼的。

然後去網上搜各種配色理論，看了什麼冷暖、明暗等術語後開始照著去配色，然而還是一坨...（我也是這樣）

所以有段時間我專門去了解配色這玩意兒，發現配色其實沒那麼難，至少沒像做平面、廣告等那些設計那麼難，UI 視覺界面的配色其實更「簡單」（這裡說的簡單不是說配色簡單，而是用色更簡約）。

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

Material Design（MD）

MD 是由 Google 推出的設計語言，它更適用於 UI 視覺界面的配色，能起到更統一、更舒服的作用。

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

它的色彩靈感來自於當代建築等，並由此引發出了大膽的顏色，與單調乏味的周邊環境形成鮮明的對比。

包括目前很多優秀的作品，都是參照它的規範來設計的。

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

MD 視覺調色板

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

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

不過在使用的過程中一定要學會限制數量。我們都知道，做界面設計的時候，顏色是「越少越好」（簡約）的，所以在眾多基礎色中選出三個色值以及一個強調色來做搭配就足夠了。

三個色度

三個色度如：

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

舉個例子：

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

這樣整個界面的基調都處於一個範圍內，看起來也會很統一。

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

強調色

那強調色是什麼呢？比如你選擇了三個色度值之後，想要突出按鈕，那麼就用其他顏色的色值來做按鈕色來盡量突出這個按鈕，所以你選擇的這個顏色就是強調色。

舉個例子：

這個按鈕的顏色就是強調色，主要看你如何去搭配使用。

如果你大範圍的用到強調色，那隻需要用透明度來做不同位置的控制就足夠了，不需要用過多的顏色來強調。

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

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

主題色

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

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

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

總結

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

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

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

END.