Halo，這里是設(shè)計夾，今天為大家分享的是「調(diào)色板設(shè)計」。

創(chuàng)建調(diào)色板對于設(shè)計過程至關(guān)重要，調(diào)色板有助于保持系統(tǒng)顏色的一致性、劃分層次結(jié)構(gòu)和理解操作類型。

現(xiàn)在網(wǎng)上有很多調(diào)色板生成工具，例如 Materia design、Arco design，確定主色后，這些調(diào)色板生成工具會生成完整的色板。

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

一、調(diào)色板類型

1. 單色

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

2. 類似色

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

3. 互補色

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

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

4. 三等分配色

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

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

5. 分割互補配色

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

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

6. 矩形配色

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

創(chuàng)建矩形配色方案時，最好先選定主色，讓其他三種顏色作為輔助色，平衡暖色調(diào)和冷色調(diào)以獲得最優(yōu)效果。

7. 方形配色

方形調(diào)色是矩形調(diào)色板的變體，主要區(qū)別在于方形配色的四種顏色是在色環(huán)上均勻分布，生成的形狀是一個標(biāo)準(zhǔn)的正方形。

像矩形配色一樣，嘗試使用一種顏色作為主色，并控制其他顏色的出現(xiàn)比例。

二、反面配色案例

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

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

對于純黑色 (#000000)的使用一直以來都有爭議性，你覺得在設(shè)計中應(yīng)該使用純黑色嗎？

雖然純黑色提供了最清晰的對比度(尤其在白色背景上)，但并不是數(shù)字設(shè)計中最佳的顏色選擇，高對比度會對頁面的可讀性產(chǎn)生負(fù)面影響。

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

三、配色法則

1. 融入灰色

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

例如基礎(chǔ)色#2F51D2，將亮度和飽和度降低到 30 左右，會得到與主色完美混合的深灰色陰影。

如果將基礎(chǔ)色的亮度提高到 90，飽和度降低 10，就會得到一個中度灰色。

在中度灰的基礎(chǔ)上繼續(xù)調(diào)高亮度到 95，能得到一個淺灰色，這種顏色通?？梢宰鳛楫a(chǎn)品的背景色使用。

2. 黃金比例配色法

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

例如 60%深藍(lán)色、30%紫色和 10%粉色。深藍(lán)色是基礎(chǔ)色，基于主色的深、淺藍(lán)色調(diào)作為背景和低優(yōu)先級元素，占據(jù)設(shè)計中大約 60%的面積。

紫色是輔助色，適合層級更高的元素，為了保證足夠可見，紫色的使用大約在 30%。

粉色是強調(diào)色和 CTA 按鈕的顏色，因此 10%的使用面積效果最好，突出最重要的元素。

3. 控制飽和度

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

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

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

4. 定義系統(tǒng)狀態(tài)

在創(chuàng)建調(diào)色板時，為每種顏色定義在系統(tǒng)中的狀態(tài)會讓設(shè)計過程更清晰。常見的狀態(tài)包括：成功/確認(rèn)、錯誤/失敗、警告等。

最后

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

作者：Clip設(shè)計夾