設計配色之：教你正確的選色邏輯

Sponsor

在設計中，色彩選擇邏輯是決定配色方案成功與否的關鍵要素。本文主要聚焦于如何科學、理性地挑選出更適用的色彩，并將其應用于主色、輔助色以及中性色的選擇上。在設計中如何選出更適用的色彩呢？這便是本章探討的內容——色彩的選擇邏輯。

首先說明一下標題為什么用了“選色邏輯”而非“配色邏輯”，在筆者理念中產品配色的重點不在于“配”，而在于“選”?！芭洹笔侵冈谧髌分腥绾谓M織、編排顏色，是為了畫面更好看，而“選”是指經過理性思考、嚴謹推導得出的解決方案，是為了色彩更適用。那如何選出更適用的色彩呢？這便是本章探討的內容——色彩的選擇邏輯。

產品設計中會將色彩依次分為：主色、輔助色、功能色及中性色，不同色彩選擇邏輯是不一樣的，我們會逐一進行介紹。由于功能色業內已形成固定認知，綠色代表成功、紅色代表錯誤，事實上已經不用再去選色，所以本章暫且不表。

一、主色

主色在產品用色中占據主要場景，關乎品牌調性與產品印象，選色時可以從產品情緒、行業屬性、目標用戶三個層面去思考。

1、產品情緒

顏色本身并無過多內涵，只是人眼對于可見光的視覺感知。但隨著人類與自然共處，逐漸將一些對自然事物的心理感知投射到顏色上，此時顏色便產生了不同含義。例如火可以帶給人類溫暖，使用不當也可以招至災禍，所以火焰的紅色便有了熱情、警示的含義。再如燒不盡，春又生的野草，讓人們對綠色有了成長與希望的感受。色彩的不同內涵也催生了一門學科叫做“色彩的情緒價值”，最早研究色彩情緒價值的學者是日本照明大師大庭三郎，他在《色彩的世界》一書中提出了基于東方人群的色彩情緒價值表，解析了不同色彩對人類的物化映射和心理映射。所以在產品設計之前會建立情緒版，確定產品情緒為色彩選擇提供依據。

2、行業屬性

不同行業在色彩選擇上會有不同偏好，如科技行業更喜歡藍色，能源、食品行業更喜歡綠色。這背后也催生了兩種選色邏輯：一、符合行業偏好，二、異于行業偏好。選擇一可以使你的產品處于相對安全的境地，它的色彩不會引起用戶反感和不適，但缺乏個性。選擇二會使你的產品迅速從同行中跳脫出來，同時也表達了個性。具體使用哪種邏輯需要你對產品策略做好充足規劃。下面是一份來自skilled公司的調查報告，他們從行業角度出發，調查并研究了色彩在不同行業的流行程度，最終規劃出了三個級別：流行行業、不流行行業、可能并不適合使用該顏色的行業。此報告不作為絕對權威，僅作為選色參考。

3、目標用戶

作為產品最終使用者，用戶喜好也作為選色必要參考。首先不同文化對用戶喜好產生影響，雖然人類群體對色彩的心理反應都很類似，但研究表明不同文化下人們對于同種顏色會有不同反應。例如股票交易，國際市場通常是綠漲紅跌，而在中國卻是紅漲綠跌。這是由于紅色在西方國家代表財政赤字，綠色代表財富；而中國正好相反，紅色對于中國人民有著非同一般的情感，紅色常常意味著喜事正在發生。

其次不同年齡段用戶，色彩喜好也不盡相同。Faber Birren在他的《色彩心理學》一書中有提到關于年齡和色彩的實驗，結果顯示年輕人傾向于鮮艷、明亮、高飽和的色彩，而嬰幼兒、老年人更喜歡柔和、低飽和的色彩。

最后用戶性別也影響著色彩喜好，男性更喜歡藍色、綠色，而女性除了藍色更喜歡紫色、粉色。

二、輔助色

輔助色常與主色搭配使用，在產品配色中起著非常重要的作用。選色時可從搭配效果和作用方式進行考慮。

1、搭配效果

不同色彩搭配可以產生豐富的視覺效果，如何確?！靶Ч焙每词俏覀冃枰伎嫉?。工作中常有設計師根據以往經驗進行選色，這是一種感性的選擇方式，往往會忽略經驗以外的搭配，而經驗以外可能存在著更好的效果。所以我們需要進行理性選擇，何為理性選擇？即通過輔助色的定義，匹配到所有的輔助色，然后進行刪減，直到選出最好看的顏色。

不同輔助色的定義：

同類色：色相相差在15度左右的顏色。

類似色：色相相差在30度左右的顏色，屬于較弱對比色。

鄰近色：色相相差在60度左右的顏色。

中差色：色相相差90度左右的顏色，屬于中等對比色。

對比色：色相相差120度左右的顏色，屬于強對比色。

互補色：色相相差180度左右的顏色，屬于高強度對比色。

以上得到的色彩未必是最好看的，他們和主色并不處于同一色彩層級。為了獲取更好的搭配效果，需要進行飽和度、明度調整，此過程也稱為色彩的視覺感官校準。

2、作用方式

輔助色的作用方式可以是強化信息，也可以是區分業務。強化信息是指通過不同顏色對信息進行視覺分類，方便用戶接收主要信息。對于強調的信息可以使用對比度高、色相較暖的色彩，暖色具有前進性可以使你的信息更突出。例如京東拍拍商品列表中的促銷信息使用了橘色，餓了么的商品列表使用了橘色和紅色。

區分業務針對整個產品，不同業務使用不同色彩，方便用戶形成固定認知，快速定位業務。使用什么色彩需全局考慮，如色彩與業務的相關性、產品的整體調性等。此處列舉兩個例子，京東APP的京東超市使用了綠色區分此項業務，京東超市主要售賣生鮮食品，綠色可以給到用戶“新鮮”“安全”的暗示，運用到此處再適合不過。Twitter在22年初新增了Twitter Space功能，用戶可以輕松創建或加入純音頻聊天室，Twitter在設計這項功能時使用了紫色，紫色和Twitter的藍色同屬冷色，這樣可以使整個產品的調性更加統一。

三、中性色

中性色是由黑色、白色及黑白調和的各種深淺不同的灰組成，是產品中看到的最多的顏色，主要用于文本顯示和頁面背景。有人覺得中性色的推導不需要經過太多思考，且行業內給到一些具體色值可直接使用，如333、666、999這類的中性色。使用這類顏色沒有太大問題，但會使你的配色略顯普通，其實關于中性色的選擇還有很多地方值得探索。

1、色階調整

中性色的色階可以通過兩種方式調整，改變明度或透明度。相信大家都有這樣的體會，如果將灰色文本放置到其他色彩之上，文本會開始變得難以閱讀，其原因是色彩對比度不夠造成視覺區分困難。如果此時文本的灰色是通過調整透明度得到的，那么文本的灰色會疊加到其他色彩之上，從而解決這個問題。如果你的產品也會遇到類似的使用場景，不妨使用調整透明度的方式得到你的中性色。

2、色彩傾向

上文提到類似333、666、999這樣的中性色會使你的配色略顯普通，原因是此類色彩屬于純灰沒有色彩傾向。我們在選擇中性色時可以適當混入藍色，藍色被普遍認為是安全、舒適的色彩，在視覺上可以緩解焦慮和壓力，具有藍色傾向的中性色可以使文本更具可讀性。除此之外也可以在中性色中疊加品牌色，使你的中性色更具內在邏輯和品牌傾向。

3、無障礙設計

無障礙設計中對文字顏色的對比度有明確建議，對于AA級別正文文字的顏色對比度至少為4.5:1，標題或加粗的文字顏色對比度至少為3:1。我們為文字選擇中性色時通常會定義四個級別：主要文字、次要文字、提示文字、禁用文字，提示文字對應級別三，需要滿足顏色對比度至少為3:1的要求，禁用文字屬于不可用狀態可以低于對比度至少為3:1的要求。

通過以上介紹可以發現產品配色不僅僅是一項視覺工作，背后更是蘊含了大量的調研與思考，對于配色只有完美回答出“為什么要這樣選色”時，我想才會得到最優秀的方案。

作者：Ye_susu（zcool.com.cn/u/1072459）
來源：站酷

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。