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

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

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

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

更多色彩神器：

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

1. 單色

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

2. 類似色

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

3. 互補(bǔ)色

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

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

4. 三等分配色

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

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

5. 分割互補(bǔ)配色

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

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

6. 矩形配色

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

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

7. 方形配色

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

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

二、反面配色案例

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

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

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

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

因?yàn)槠聊皇前l(fā)光的，所以會(huì)產(chǎn)生一種“無亮度”的發(fā)光效果，看起來非常不自然。盡量避免在設(shè)計(jì)中使用純黑 ，將對(duì)比度保持在安全范圍內(nèi)時(shí)，最好使用深灰色代替純黑色。

三、配色法則

1. 融入灰色

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

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

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

在中度灰的基礎(chǔ)上繼續(xù)調(diào)高亮度到 95，能得到一個(gè)淺灰色，這種顏色通常可以作為產(chǎn)品的背景色使用。

2. 黃金比例配色法

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

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

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

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

3. 控制飽和度

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

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

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

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

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

最后

以上是設(shè)計(jì)中需要了解并掌握的 7 種配色方案+配色法則，掌握這些配色知識(shí)之后，我們?cè)偃ダ煤谜{(diào)色板生成工具，能達(dá)到事半功倍的效果！

歡迎關(guān)注作者微信公眾號(hào)：「Clip設(shè)計(jì)夾」