2021-9-9 資深UI設計者
編輯導語：交互設計中配色問題是設計師經常會碰到的問題，其中色彩應當如何搭配以實現設計的美觀與和諧呢？作者在這篇文章里為我們分享了交互設計中關于配色的干貨，推薦正在從事交互設計或者對色彩搭配感興趣的小伙伴閱讀，一起來看。
交互設計中經常會遇到配色問題，比如設計師是如何確定以下這張頁面中的卡片配色的？又或者：這些卡片的色塊是如何挑選以保證色彩和諧的？
豆瓣App電影榜單卡片
顏色的搭配其實是一個非常值得研究的問題。深入剖析的話內容也會很多，本文會告訴你，顏色如何挑選會更有規律，并保證基本和諧。
想要做好色彩的搭配，需了解一些色彩學概念。色彩學將顏色分為：同類色、類似色、鄰近色、中差色、對比色、互補色。這幾種顏色通過色相環的角度進行取色，如下圖所示：
任意顏色都可以作為基色，每一個基色都有其相對應的同類色、對比色、互補色等等。
通常情況下，相鄰的兩個顏色，選擇基色和鄰近色之間的顏色，也就是與基色之間的角度 ≤ 60° 的顏色，會讓頁面的顏色顯得和諧統一。
△ 得到 App 服務內容卡片
△ QQ 音樂 App 榜單卡片
如果選用對比色和互補色，則需要控制顏色的面積，比如以紅色為主的頁面中可以出現藍色，但藍色的面積占比最好不要超過 20%。
除了色相上的變化，顏色還有明度和純度上的變化，對于顏色的影響也至關重要。這三個詞匯的概念如下：
色相、純度、明度三者構成了色立體的概念，讓色相環由二維變成了三維的概念。
RGB 和 CMYK 是我們較為熟知的色彩模式。而根據上文提到過的色彩學概念，在實際工作中我們也可以借鑒HSB 色彩模式進行調色和選擇顏色。
在 sketch 和 PS 的 HSB 色板界面如下圖：
其中：
由于純度 Saturation (S) 和明度 Brightness (B) 之間的數值都是在 0-100 之間，因此兩者具備一定的對應關系。這些數值可以為你在選擇顏色時提供依據。
具體怎么使用這些數值，我們用案例來說明：
某 PC 端產品功能卡片需要做配色設計：
已知產品的品牌色是以下兩個顏色，其 HSB 色值如下圖所示：
因此卡片的衍生色我們可以使用：藍色調 + 臨近色，且臨近色的顏色最好介于藍色和紫色之間，會使產品頁面顏色的搭配更加和諧統一。
于是我們可以先根據品牌主色：
顏色 A：H=233，S=74，B=100
來確定初步顏色，我們只改變色相（H）的數值，分別在 233 的基礎上進行 +10 和 -10，由此可以得到三個顏色 A1、A2、A3，呈現效果如下圖：
現在的卡片顏色略顯單薄，我們可以再給每一張卡片加一個顏色，做出過渡色效果。于是我們在數值 A1、A2、A3的基礎上，保持色相（H）不變，只改變這三個數值的明度（B）和純度（S）的數值。以顏色A1 為例：
顏色 A1：H=253，S=74，B=100
現在，我們想要得到一個比 A1 更深一點的顏色 A1-1，根據色彩學理論，我們可以降低明度（B）的數值，這樣顏色會變深，同時增加純度（S）的數值，這樣顏色會更沉穩純正，為了保證數值可控，我們將明度（B）降低 26，將純度（S）提高 26，所以可以得到顏色 A1-1的色值：
顏色 A1-1：H=253，S=100，B=74
A1 和 A1-1的顏色效果如下圖：
按照此方法，我們可以得到兩組顏色和其數值：
所以我們的卡片可以使用漸變色：
這樣卡片的顏色就基本確定下來了，我們可以再調整下卡片的細節，比如增加相關的背景插圖，調整卡片上的文字排版等等，這組 PC 端卡片最后的效果如下圖：
一個頁面中元素的色彩選擇有很多影響因素，比如：產品的品牌色、頁面的功能、頁面的內容、氛圍等等，所以還是要具體情況具體分析，綜合考慮選擇顏色。
當然，以上提出的這些數值只是參考，為的是給你的顏色選擇提供理論支撐。在實際應用中，也還是需要設計師根據具體情況，以及人眼視覺感知的效果，酌情做顏色上的優化處理。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務