7種配色方案+配色法則，讓設計更吸引力

Sponsor

創建調色板對于設計過程至關重要，調色板有助于保持系統顏色的一致性、劃分層次結構和理解操作類型。

現在網上有很多調色板生成工具，例如Materia design、Arco design，確定主色后，這些調色板生成工具會生成完整的色板。

在使用這些工具前，我們要先了解有哪些常用的調色板分類，不同類型的色板會產生什么樣的效果，再合理借助工具幫助我們更精準地定義和使用顏色。

一、調色板類型

1) 單色

單色調色板指只使用一種顏色色調來定義配色。單色是相對保險的配色選擇，但是單色配色的對比度要比其他調色板低，頁面的視覺效果看起來可能會沉悶、不夠出彩。

2) 類似色

類似色是色環上彼此相鄰排列的一組顏色。這種調色板是一個穩定的選擇，可以為設計提供多套合適的色調，但類似色顏色之間的對比度也比其他類型的調色板弱一些。

3) 互補色

互補調色板使用的是色環上相互對立的顏色，這種配色方式對比度強烈，有助于吸引用戶的注意力。

互補色需要謹慎使用，最好選擇飽和度低于85%的顏色，避免顏色對比太強，造成視覺疲勞。另外，需要控制主色與互補色的使用面積，讓頁面的顏色看起來不和諧。

4) 三等分配色

三等分色是色環上均勻分布的三種顏色，形成一個等邊三角形。三等分配色更豐富，畫面的視覺效果更好。

在創建調色板時，需要確保色彩間的平衡關系，可以先確定主色占比60%，其次再選擇兩種強調色各占30%、10%的比例，保持頁面的平衡。

5)?分割互補配色

分割互補色是互補色色板的一種變體，在主色的基礎上，選擇色環上彼此相鄰的兩種顏色作為主色的互補色，形成一個等腰三角形。

分割互補配色的對比度要弱于互補色，這種類型的調色板可作為入門級常用的配色方案，實現簡約出色的設計效果。

6) 矩形配色

矩形配色是使用排列成兩對互補色的四種顏色創建而成。由于矩形配色是由兩對互補色組成，所以這樣的配色方案會讓頁面更有活力。

創建矩形配色方案時，最好先選定主色，讓其他三種顏色作為輔助色，平衡暖色調和冷色調以獲得最優效果。

7) 方形配色

方形調色是矩形調色板的變體，主要區別在于方形配色的四種顏色是在色環上均勻分布，生成的形狀是一個標準的正方形。像矩形配色一樣，嘗試使用一種顏色作為主色，并控制其他顏色的出現比例。

二、反面配色案例

有一些顏色看個看起來都不錯，但是組合在一起使用就會產生讓人一言難盡的效果，容易降低易讀性或者看起來不舒服，影響產品的體驗。

這里舉幾個反面配色案例，比如像下面兩種非常亮的顏色搭配在一起或者很奇怪的顏色搭配，在設計時盡量避免產生這種效果。

對于純黑色 (#000000)的使用一直以來都有爭議性，你覺得在設計中應該使用純黑色嗎？雖然純黑色提供了最清晰的對比度(尤其在白色背景上)，但并不是數字設計中最佳的顏色選擇，高對比度會對頁面的可讀性產生負面影響。

因為屏幕是發光的，所以會產生一種“無亮度”的發光效果，看起來非常不自然。盡量避免在設計中使用純黑 ，將對比度保持在安全范圍內時，最好使用深灰色代替純黑色。

三、配色法則

1) 融入灰色

在創建調色板時，最好在主色中加入一絲絲灰色，這樣的配色能更容易融入設計，提升頁面的精致感。

例如基礎色#2F51D2，將亮度和飽和度降低到30左右，會得到與主色完美混合的深灰色陰影。如果將基礎色的亮度提高到90，飽和度降低10，就會得到一個中度灰色。在中度灰的基礎上繼續調高亮度到95，能得到一個淺灰色，這種顏色通?？梢宰鳛楫a品的背景色使用。

2) 黃金比例配色法

創建調色板時，平衡其中的顏色使用比例也很重要。最好的方法是使用60/30/10的黃金比例配色法則。

例如60%深藍色、30%紫色和10%粉色。深藍色是基礎色，基于主色的深、淺藍色調作為背景和低優先級元素，占據設計中大約60%的面積。

紫色是輔助色，適合層級更高的元素，為了保證足夠可見，紫色的使用大約在30%。粉色是強調色和CTA按鈕的顏色，因此10%的使用面積效果最好，突出最重要的元素。

3) 控制飽和度

對比度是最基本的可讀性指標之一。然而，如果我們手機或者電腦屏幕的亮度很高，屏幕上再出現對比度很高的顏色，我們的眼睛很容易會產生疲勞。

所以如果想在設計中使用高飽和度、對比強的顏色，最好先考慮清楚這樣設計的目的，確保設計方案對用戶很友好。

通用做法是避免使用飽和度超過90%的顏色，盡量選擇相對安全的顏色使用區域，例如上圖標注區域，直到創建正確的顏色組合。

4) 定義系統狀態

在創建調色板時，為每種顏色定義在系統中的狀態會讓設計過程更清晰。常見的狀態包括：成功/確認、錯誤/失敗、警告等。

最后

以上是設計中需要了解并掌握的7種配色方案+配色法則，掌握這些配色知識之后，我們再去利用好調色板生成工具，能達到事半功倍的效果！

作者：?Clippp

來源：Clip設計夾（公眾號）

贊助商鏈接

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