設計規(guī)范
在界面設計中，我們會遇到不知如何選取顏色，或配出來的色彩不和諧的情況，其實遇到這些困擾是因為我們沒有搭建好我們的UI色彩體系。
色彩體系就是我們制定好的配色色板，它是我們在UI設計中的配色指南。像Ant design、Material design等設計規(guī)范中都有明確的給出自身產品的色彩體系。搭建產品的色彩系統(tǒng)對設計師是非常有必要的的。
△Material Design 色板
△Ant Design 色板
那么如何科學的搭建UI色彩系統(tǒng)呢？跟大家分享一套自己學習與總結的方法，希望對你有所啟發(fā)，也歡迎大家一起交流呀～
01
定義品牌色
品牌色是?體現產品特性和傳播理念?最直觀的視覺元素之一。在色彩選取時，需要先明確產品的品牌色。
了解業(yè)務屬性與產品性格
品牌色的選取一般根據?業(yè)務屬性與產品性格?進行選取。需要設計師了解產品所屬領域、產品定位、目標受眾群體等，以及我們的品牌色想?傳遞給用戶怎樣的情感，?喚起用戶某種情緒呢？
不同的顏色會帶給用戶不同的情感認知：
? 紅色：?代表興奮、激動、力量...
? 橙色：?代表愉悅、歡快、親切...
? 黃色：?代表溫暖、明亮、高貴...
? 藍色：?代表安全、可靠、智慧...
? 綠色：?代表生機、健康、環(huán)保...
比如支付寶的藍色給人安全可靠的感覺，橙色的淘寶能激起人們的購物欲，星巴克的綠色給人自然環(huán)保的印象等等。
當我們不知如何選取品牌色時可以先看看我們同業(yè)務屬性的產品有哪些顏色，這里給大家分享一個非常棒的網站：
這個網站包含全世界500強產品的品牌色，我們可以從這個網站找尋與我們產品業(yè)務相似的品牌色，獲取靈感。
02
制定同頻色板
定好品牌色之后，我們需要以品牌色的為基礎，制定出我們產品的配色色板。后續(xù)在配色的時候，我們就從配好的色板去選取顏色。
制定24色板
我們以品牌色的色相（H）為基礎，將?360°的色環(huán)分割成24份，得到24種不同的顏色。?也就是色相需要分別遞增或者遞減?15°?（15°x24=360°）
為什么是24色板（24個色相組成的色環(huán)）
因為在360°色環(huán)上提取24個色相，需要我們以15°為增量進行計算。（15°x24=360°）
另外大家都知道相差15°的顏色為鄰近色，那我們提取出來的任何兩個相鄰的顏色都是鄰近色，我們拆分出來的色彩是比較和諧的。
我以支付寶的品牌色（#205 93 91）為例，來制定它的24色板。
保持S（純度）、B（明度）不變，將其H（色相）分別遞增或遞減15°，得到24種不同的顏色。
24色板是幫助我們提取輔助色的便捷工具，后續(xù)我們想選取任何顏色直接從我們制定好的色板中選取就行了。但是，在UI設計中，我們是用不了這么多顏色的，24色板中有很多顏色是非常接近的。
我們可以根據自身產品系統(tǒng)的復雜度，?在24色板上去掉接近的顏色，進一步篩選出我們所需要的顏色數量。?通常會制定16色板、12色板或8色板。比如ant design的系統(tǒng)級色彩體系是制定了12個色板，Spotify是制定的16個色板。
色彩校正
雖然在制定24色板時，我們保持了純度（S）、明度(B)不變，但是這些顏色看起來依舊是不同頻的。比如剛剛制定的色板中，色相為175的青色看起來較亮，而色相為10的紅色看起來就暗一些。
這是因為?顏色本身自帶感官明度屬性，?也就是發(fā)光度有所區(qū)別，所以導致我們制定出來的24色板依然不是同頻的，會讓整個色板看起來是凹凸不平的。為了讓不同顏色看上去更和諧、畫面不跳躍，我們需要進行色彩校正。
方法：?在色彩上疊加一層?純黑?圖層，將純黑圖層顏色?模式調整為色相，?通過無彩色系下的明度色值進行對比校正，?以主色明度為標準，?讓不同顏色與主色?達到同頻?（優(yōu)先調整B值，當B值無法滿足時調整H值）。
03
制定同色系色階
通過色彩校正后我們就得到我們所需要的同頻色板，我們還需要進一步?制定同色系色階，衍生出更多的顏色。
制定同色階方法
方法：?在sketch、或ps配色面板中，我們知道，越往左S越小，往右S越大；往下B越小，往上B越大。
有了這個概念后，下面的內容就很好理解了。
設定品牌色為色值為（S?，B?），?連接品牌色色值點與左上純白點右下純黑點，?得到兩條線段。將這兩條線段分別?均分為5份，?我們會得到?11個點，計算出S、b值，?這11個點組成的色板就是我們的同色系色階。
我還是以支付寶的品牌色（#205 93 91）為例，來計算其同色系色階。
第一步：連接品牌色與白色、黑色，得到?兩條線段。
第二步：將?線段1?（S0到左上白色點的這一條線段）?均分為5份，?分別?計算出S、B值。
我們知道點越往左上移動，S越來越小，B越來越大。
品牌色坐標點?左側?的點:
橫坐標 (飽和度)以(So/5)遞減；
縱坐標(明度)以[(100-Bo)/5]遞增；
分別計算出這從左往右五個點的值為：
第三步：將?線段2?（S0到右下黑色點的這一條線段）?均分為5份，?分別計算出S、B值。
我們知道點越往右下移，S越來越大，B越來越小。
所以品牌色坐標點?右側?的點:
橫坐標 (飽和度)以[(100-So)/5]遞增
縱坐標(明度)以(Bo/5) 遞減
分別計算出這五個點的值為：
最后我們就整合我們的同色階色板，得到了一條由主色衍生出來的同色系色階
以同樣的方法我們可以得出所有顏色的同色系色階。
值得注意的是，雖然我們按照方法制定出了11個色階，但是有的衍生色非常黑或者非常白，我們需要將其刪除掉。ant design是刪掉了最后一個色彩，只留下了10階。
△Ant Design 同色系色階
04
色彩系統(tǒng)輸出
通過前面的步驟我們得出了主色、24同頻色板、同色色階。將我們所有的色板進行整理輸出，就可以得到我們產品的整個色彩系統(tǒng)。有了色彩系統(tǒng)這個配色指南，我們的配色過程就會輕松很多了。
在UI設計中，色彩規(guī)范主要包括主色、輔助色、文字顏色。所以光有色板還是不夠的，我們還需做進一步的補充說明。
選取輔助色
在UI設計中，選取的輔助色通常滿足：
1. 平衡主色。?減少用戶在使用產品的過程中對品牌色產生的視覺疲勞。
2. 與主色有明顯區(qū)分。?避免所選輔助與品牌色差距不大，傳遞的調性太過一致。
根據色彩原理：
? 鄰近色：?色相差值15°以內的顏色為鄰近色
? 類似色：?色相差值30°以內的顏色為類似色
? 互補色：?色相差值180°的顏色為互補色
? 分裂互補三色組：?一種顏色與其互補色的鄰近兩種色
類似色是最合適的選擇之一，與主色有區(qū)分且平衡主色，讓畫面更和諧，另外需要與主色有明顯區(qū)分，但又不能太突兀，我們通常會選補色的鄰近色，而不是直接選取補色。當然如果補色與主色不是很突兀的話，也可以之間用補色作為輔助色。
那么我們基于品牌色就衍生出了 3 個輔助色：?1個類似色+2個分裂互補色。?直接從我們之前做好的色板中提取出這三個顏色，與它的同色系色階就行啦～
在UI設計中輔助色被作為功能色使用，功能色代表了明確的信息以及狀態(tài)，比如成功、出錯、失敗、提醒、鏈接等。功能色的選取需要遵守用戶對色彩的基本認知。比如出錯會選用紅色、成功會選用綠色。
中性色
中性色包含了黑、白、灰，是頁面中文字、背景常用的顏色，合理地選擇中性色能夠令頁面信息具備良好的主次關系，助力閱讀體驗。
大家常最熟悉的文字顏色就是#333，#666，#999，我們需要注意在UI設計中，應避免純黑色的使用。
文字顏色還有一種做法是通過?調純黑色（或者帶一點色彩傾向的黑色）的不透明度來實現。
總結
科學搭建UI色彩體系分為以下六個步驟：
1. 定義主色
2. 制定同頻24色板
3. 色彩校正
4. 選取輔助色
5. 補充中性色
6. 輸出整個色彩系統(tǒng)
希望通過搭建色彩體統(tǒng)，為我們的配色帶來便利，以及方便組內的所有設計師遵循同一套配色體系，讓界面設計更加規(guī)范。
求關注呀~
