△ 豆瓣 App 電影榜單卡片

顏色的搭配其實是一個非常值得研究的問題。深入剖析的話內容也會很多，本文會告訴你，顏色如何挑選會更有規律，并保證基本和諧。

1. 色彩學概念淺談

想要做好色彩的搭配，需了解一些色彩學概念。色彩學將顏色分為：同類色、類似色、鄰近色、中差色、對比色、互補色。這幾種顏色通過色相環的角度進行取色，如下圖所示：

任意顏色都可以作為基色，每一個基色都有其相對應的同類色、對比色、互補色等等。

通常情況下，相鄰的兩個顏色，選擇基色和鄰近色之間的顏色，也就是與基色之間的角度 ≤ 60° 的顏色，會讓頁面的顏色顯得和諧統一。

△ 得到 App 服務內容卡片

△ QQ 音樂 App 榜單卡片

如果選用對比色和互補色，則需要控制顏色的面積，比如以紅色為主的頁面中可以出現藍色，但藍色的面積占比最好不要超過 20%。

除了色相上的變化，顏色還有明度和純度上的變化，對于顏色的影響也至關重要。這三個詞匯的概念如下：

• 色相 Hue：也稱色調，是指色彩的相貌
• 純度 Saturation：也稱飽和度，是指色彩的鮮艷程度
• 明度 Brightness：也稱亮度，是指顏色的明暗程度

色相、純度、明度三者構成了色立體的概念，讓色相環由二維變成了三維的概念。

2. HSB 色彩模式

RGB 和 CMYK 是我們較為熟知的色彩模式。而根據上文提到過的色彩學概念，在實際工作中我們也可以借鑒 HSB 色彩模式進行調色和選擇顏色。

在 sketch 和 PS 的 HSB 色板界面如下圖：

其中：

• 色相 Hue (H)：取值在 0-360 度之間
• 純度 Saturation (S)：取值在 0-100 之間，數值越高色彩就越純艷
• 明度 Brightness (B)：取值在 0-100 之間，數值越高色彩就越明亮

由于純度 Saturation (S) 和明度 Brightness (B) 之間的數值都是在 0-100 之間，因此兩者具備一定的對應關系。這些數值可以為你在選擇顏色時提供依據。

具體怎么使用這些數值，我們用案例來說明：

案例  

某 PC 端產品功能卡片需要做配色設計：

已知產品的品牌色是以下兩個顏色，其 HSB 色值如下圖所示：

– 顏色 A：H=233，S=74，B=100（主色）

– 顏色 B：H=267，S=79，B=100（輔色）

因此卡片的衍生色我們可以使用：藍色調 + 臨近色，且臨近色的顏色最好介于藍色和紫色之間，會使產品頁面顏色的搭配更加和諧統一。

于是我們可以先根據品牌主色：

– 顏色 A：H=233，S=74，B=100

來確定初步顏色，我們只改變色相（H）的數值，分別在 233 的基礎上進行 +10 和 -10，由此可以得到三個顏色 A1、A2、A3，呈現效果如下圖：

– 顏色 A1：H=253，S=74，B=100

– 顏色 A2：H=243，S=74，B=100

– 顏色 A3：H=223，S=74，B=100

現在的卡片顏色略顯單薄，我們可以再給每一張卡片加一個顏色，做出過渡色效果。于是我們在數值 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 端卡片最后的效果如下圖：

3. 補充說明

一個頁面中元素的色彩選擇有很多影響因素，比如：產品的品牌色、頁面的功能、頁面的內容、氛圍等等，所以還是要具體情況具體分析，綜合考慮選擇顏色。

當然，以上提出的這些數值只是參考，為的是給你的顏色選擇提供理論支撐。在實際應用中，也還是需要設計師根據具體情況，以及人眼視覺感知的效果，酌情做顏色上的優化處理。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》詳解｜交互設計中的色彩搭配，這樣更有效！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司