我們設(shè)計師在配色的過程中會遇到哪些問題點呢？

• 同色系把握不好：像下面這個案例，就屬于典型的同色系問題，可能他在設(shè)計的時候比較多的凸出品牌色，這個出發(fā)點是沒有錯的，但是如果這個比例沒有把控好的話，就會顯得很多余了，用戶看到這個界面的時候，品牌色哪里都是，他可能不知道哪里是重點，在整個界面當中沒有體現(xiàn)出來！

• 多色系不敢用：比如說我們設(shè)計一個APP，整個界面想要變現(xiàn)的多彩一些，那怎樣科學去配色呢？我們舉2個例子

  
  

我們大家都知道支付寶是一款金融理財類APP，而大麥網(wǎng)是一款販賣演唱會門票的APP，我們再配色過程中都會有一些情緒感受在里面的，比如整個藍色系是能夠代表一些科技和可靠，而紅色系呢，可以想象一下，我們?nèi)⒓友莩獣臅r候，內(nèi)心的心情是什么樣的呢，肯定是比較激動的，整個演唱會的氣氛是熱情四溢的，所以說這個大麥演唱會的APP它就采用這種代表熱情和激情的紅色和紫色。

ok，那么我們作為UI設(shè)計，怎樣才能合理的把控好整個配色方案呢，有兩種解決方案，第一種采用6-3-1原則，另一種就是使用工具Adobe color cc：

• 什么是6-3-1原則呢？

      就是主色60%，輔色30%，強調(diào)色10%，為什么是這個比例呢，這個比例達到一個視覺平衡點的比例，也就是說這個比例可以讓用戶從一個視覺焦點很舒服的移動到另一個視覺焦點；

• 那我們知道這個原則，那究竟怎么得出這些顏色呢？

這時候我們就要用到色環(huán)了，也就是要搞清楚什么是對比色，互補色，鄰近色，很多設(shè)計師可能會去一些平臺找一些配色好的圖片直接在Photoshop或者Sketch上面用吸管工具吸一下顏色，這個舉動就有點過于借鑒了，相當于是色彩抄襲了，所以我們要想自己有一個很好的色彩搭配就需要去了解這些色彩基礎(chǔ)理論。

• 鄰近色：用紅色做例就是紅色兩邊的色相；

• 類似色：比鄰近色更遠一些就是再左一邊的，右一邊的就是類似色；

• 互補色：也就是這個顏色對應(yīng)的對角線找到一個色彩；

  
  

總結(jié)的來說就是主色調(diào)60%我們采用品牌色，30%的輔色我們采用對比色相，那么10%的強調(diào)色我們采用互補色，這樣做出來的配色比例整個界面會讓用戶看的舒適一些；

另外一種就是使用Adobe color cc工具去做自動配色，我們輸入我們自己想要的顏色，它會自動匹配出相對合適的顏色，這樣也可以解決一些相對于復雜的配色，類似如下圖：

作為UI設(shè)計師，既要懂得配色的原理，也要懂得運用工具。

這是配色工具網(wǎng)址，有需要的可以看一下哦：https://color.adobe.com/zh/create/color-wheel/?base=2&rule=Analogous&selected=2&name=%E6%88%91%E7%9A%84%20Color%20%E4%B8%BB%E9%A1%8C&mode=rgb&rgbvalues=0.9547387354229991,0.7619037957431778,1,0.8097211003601875,0.6933324541262919,0.91,0.8616456328200695,0.8119037957431778,1,0.6933324541262919,0.6950631705006906,0.91,0.7619037957431778,0.8264625777260118,1&swatchOrder=0,1,2,3,4