設計師自學手冊：配色方案指南

02-04

點評：比較系統的介紹了尋找配色方案靈感的一些思路，大量案例來解釋配色方法。

色彩是設計師手中強大的武器。

它吸引著用戶的視線，喚起情感，傳達內涵。在一項關於色彩的調研中，研究人員發現，用戶對於產品的快速決策 90% 是基於色彩的。

所以色彩的運用對於設計來說至關重要，每種顏色都有自己的意義，而多種顏色的組合也需要理論指導。

※ 選擇配色方案

有時候色彩搭配是一時的靈光乍現，但更多時候，它有更系統的方式來搭配。

※ 確定目的

在開始設計之前，先確定設計目的。在開始前問自己這些問題：

你想用你的設計傳達什麼信息？
你的設計的目的是什麼？要提供信息？說服？
你想讓你的設計喚起什麼情緒？

您的設計的目的應該為您選擇您的調色板時作為指南。

※ 確定你的受眾群體

人們對顏色的感覺是不同的。顏色是觀察者內部出現的心理現象。顏色根據個人偏好，文化培養和經驗對人們有不同的影響。因此，為了了解人們如何對您的設計做出反應，您需要確定您的受眾。

當然了，也有一些普遍適用的色彩的含義。綠色普遍代表大自然，因為它是植被的顏色。然而，像紅色這樣的顏色在不同文化中的解釋不同。在西方世界，紅色與火，暴力和戰爭有關。它也與愛和激情有關。然而，像中國這樣的國家將紅色與繁榮和幸福聯繫在一起。

因為顏色有很多不同的含義，所以將你作為設計師的心理顏色模型與你的觀眾相匹配是非常重要的。

要了解更多關於不同國家和人口統計的顏色意味著什麼，請查看顏色在市場營銷和品牌的顏色心理學和顏色的意義。

※ 回顧色彩理論

色彩理論是混合顏色的邏輯結構和實踐指南。它包含從色輪到各種顏色的意義的一切。

「色彩理論」和「色彩理論101」是很好地設計方法。你可以通過研讀而明白為什麼facebook 是藍色？顏色在營銷學的科學用法等知識。

※ 尋找靈感

很多時候我們可能沒有靈感，沒關係，就算是再偉大的藝術家也會如此，我們可以借鑒他人的作品，獲得啟發。

搜尋靈感的好網站是：

Dribbble
Behance

如果你想要找配色方案或者 Material 的靈感，可以試試

MaterialUI
FlatUIColors

這些網站是有用的，但嘗試看看從您正在設計的特定媒體之外的設計。這樣做將幫助你想出出乎意料的獨特和令人愉快的色彩方案。例如，你可以看看室內設計。

如果你想要不同的東西，尋找顏色靈感在其他文化的設計。例如，韓國音樂視頻集設計以其豐富多彩和眼睛捕捉的調色板而聞名。每個框架都可以作為靈感來源。推薦一篇專門分析 K-pop 設計的文章：設計師實踐手冊：K-pop 中的五個設計元素，非常詳細的介紹了這種設計風格。

色彩方案無處不在，包括你的日常生活。下一次出去，停下來欣賞你周圍的顏色。

※ 構建設計系統

一個設計系統，有時被稱為樣式指南，是一個框架，封裝所有的元素到你的設計內。這包括從按鈕到排版的一切。你需要考慮，什麼樣的按鈕和你的導航欄看起來像什麼。

有關設計系統的示例，請查看 Salesforce 的設計系統。對於更多的例子，這裡是一個50 個細緻的風格指南的列表，每個初學者在開始設計前都應該好好看看。

構建設計系統對配色有極大的幫助，即使是個草圖，也會給你提供思路，什麼樣的顏色，元素適合整體方案。

保持 Kiss 原則（盡量簡單），顏色越少越好，對於大多數設計系統，一下結構是一個好的開端：

背景
主要強調
次要強調
錯誤顏色
成功顏色

原色是最常用於重要按鈕和重音的顏色。對於許多公司，這也是他們的標誌的顏色。

輔助顏色是用於區分次要操作和主要操作的顏色。例如，主按鈕和輔助按鈕。錯誤和成功顏色，通常是紅色和綠色，傳達設計狀態。例如，成功或錯誤通知。

※ 選擇配色方案

現在你擁有靈感和設計系統的粗略草圖，現在是選擇一個配色方案的時候了。對於一個基本的調色板，我喜歡把我的顏色並排，就像是大家整齊地等待開會。

基礎顏色可以多一些，不要害怕嘗試大膽的顏色。

在進一步確認選擇顏色的時候，再問自己：

設計目的和受眾都清楚了么？
什麼顏色可以容易理解？
什麼顏色有視覺衝擊力和吸引你的眼睛？
你需要一個明亮或深色配色方案嗎？
一天的什麼時候人們會使用你的產品？
你想讓你的設計傳達什麼樣的心情？
你的配色方案比同類型別人做的更好么？

正如我在上一節中提到的，顏色將在您的設計系統中有不同的角色。這也意味著每種顏色在你的系統中都有不同的權重。例如，您的背景顏色將比主要提示更頻繁地使用。

因此，有時創建一個由不同尺寸的形狀組成的一次性設計是有好處的，每個尺寸大致等於給定頁面上的顏色的出現頻率和平均表面積。（園長：顏色權重越高，面積越大，比如背景色尺寸 > 主要提示色尺寸）

舉個例子，這有個 Invision 的配色方案：

你可以把基礎色變根據權重，換成不同大小來預覽配色方案。

※ 應用配色方案

為了讓大家了解如何將顏色應用於設計系統，讓我們來看看 Airbnb。Airbnb 的原色是Rausch（下圖右二），以公司起源的街道命名。Kazan（下圖右一）用作次要顏色，兩個灰色用作背景顏色。

對於大多數頁面，Airbnb 使用霧灰色作為背景。您可以看到，他們使用 Rausch 作為他們的主要顏色強調重要的行動，如要求預訂列表。

Kazan 用於捕捉和吸引你的眼睛。注意它如何補充原色。

對於錯誤消息，Airbnb 使用淺紅色，可以說是一種陰影。紅色，連同感嘆號，立即吸引你的眼睛，並通知你系統的狀態。

想想你的設計中的視覺層次結構。考慮什麼設計組件要突出顯示和分配適當的顏色。此外，請考慮對懸停和點擊狀態等內容使用不同顏色的陰影。試著把配色應用到你的產品上。

※ 最後

學習如何用顏色設計對於設計師來說是無價的，配色方案都是需要不斷嘗試和迭代的。如果你想更遊刃有餘地處理顏色，唯一的方法是做更多的工作和嘗試。

關聯閱讀：設計師實踐手冊：K-pop 中的五個設計元素（@FrozenTeeth MM 編譯的文章，非常詳細地解讀 K-POP 中的設計元素）

文章編譯自：Designing in color

歡迎關注

知乎專欄「極光日報」，每日 2 篇優質英文文章。

微信公眾號「極光開發者」（jiguangdev），每周 2 篇技術類文章。

「講真，點贊就是最好的支持，最後祝您身體健康，武運隆昌。」