2023年為什么你設(shè)計(jì)的配色方案都不太好看

為什么你設(shè)計(jì)的配色方案都不太好看？藝術(shù)家亨利·馬蒂斯曾經(jīng)說過：“顏色給予人魔法般的能量”。

每個人都知道學(xué)會魔法最簡潔的方法是犧牲一只山羊，但我們卻不能為了設(shè)計(jì)出好的用戶界面去這樣做。

幸運(yùn)的是，在UI設(shè)計(jì)領(lǐng)域，我們可以更敏捷地運(yùn)用顏色：顏色可以向用戶傳遞肯定的信息，影響他們的選擇甚至是感受。并且由于沒有“山羊”必需被犧牲，因此可以100%地隨便使用顏色。

明顯，顏色理論并不是一門晦澀難懂的學(xué)科：它幾乎是大多數(shù)藝術(shù)和設(shè)計(jì)課程第一學(xué)期的東西，并且假如你正在閱讀這篇文章，可能你已經(jīng)至少對它有了一個基本的了解。

然而，我們肯定能忽視顏色所具備的潛力。尤其是在UI設(shè)計(jì)領(lǐng)域，奇妙地使用顏色可以引導(dǎo)用戶以你盼望的方式使用某些東西，或者它是勸說潛在客戶連續(xù)向下滾動你的登錄頁面的關(guān)鍵因素。擁有現(xiàn)有配色方案的品牌可以思索如何使用它們從而受益。新的應(yīng)用程序可以利用顏色脫穎而出，也可以融入到現(xiàn)有的APP中。

簡而言之：設(shè)計(jì)時，顏色應(yīng)當(dāng)時刻在你的腦海中。

以下的配色方案選擇的案例，講解了我是如何在設(shè)計(jì)中將其付諸實(shí)踐的，以及它是如何關(guān)心每個項(xiàng)目實(shí)現(xiàn)其目標(biāo)的。

聲明：在這篇文章中，我將以英式的方式拼寫colour(顏色)，而且“u”在整篇文章中隨處可見，所以泡一杯茶，拿一包麥克維蒂消化餅干，然后連續(xù)閱讀……

你好西雅圖

但我們?nèi)绾卧赨I設(shè)計(jì)中使用單色配色方案呢？

首先，很難找到真正單色的用戶界面，由于大多數(shù)時候都有灰色陰影，以及區(qū)分用戶交互動作勝利和錯誤的顏色，這些顏色都必不行少。

實(shí)際上，對于簡潔的界面來說，只有一種主色有助于強(qiáng)化你的品牌信息。我最近設(shè)計(jì)的一款自定義邊框圖像生成器APP就運(yùn)用了單色配色方案，以創(chuàng)建最小化且清楚的外觀：

單紫色配色方案

這個案例中我只在Logo設(shè)計(jì)運(yùn)用了主色調(diào)紫色，在APP本身的設(shè)計(jì)中用不同色值的紫色作為呼應(yīng)。這是個簡潔的APP，因此使用單色制造了一個簡約的品牌印象。

但是要留意，隨著界面變得簡單，主色和強(qiáng)調(diào)色對于區(qū)分靜態(tài)元素和交互元素起到重要作用，需要更奇妙的配色方案…

顏色世界中的兩極相吸

互補(bǔ)色是最受歡迎的顏色方案之一，由于這種組合有著充分的原理支撐?；パa(bǔ)色在色輪上相對而坐彼此吸引，就像千禧一代觀看《老友記》重映一樣。

HyeRyeongOh發(fā)表于Unsplash

上圖中的水母和海水，就是特別有視覺沖擊力的顏色對比。用苛刻的甲方的話來說，這種配色方案能讓作品變得“流行”。

在UI和品牌設(shè)計(jì)中，互補(bǔ)色很符合現(xiàn)有的設(shè)計(jì)慣例：有一個主要的品牌色和一個幫助色。

比如標(biāo)志性的宜家藍(lán)黃，或者喜力的（世界聞名的荷蘭啤酒品牌Heineken）綠紅。

當(dāng)設(shè)計(jì)用戶界面時，盡量保證在頁面的主體部分只使用一種顏色，這樣就不會讓用戶眼花繚亂不知所措。

下圖是我最近為一家壽司店設(shè)計(jì)的網(wǎng)站，每個頁面都有一個主色，而互補(bǔ)色恰到好處地突出重點(diǎn)，吸引用戶的留意力。頁面的顏色變化有助于制造用戶的視覺焦點(diǎn)，并供應(yīng)視覺變化防止用戶對顏色產(chǎn)生視覺疲憊。

壽司網(wǎng)站設(shè)計(jì)

當(dāng)然，假如常規(guī)的補(bǔ)色方案不足以體現(xiàn)你的設(shè)計(jì)共性，還可以選擇補(bǔ)色分割方案。

補(bǔ)色分割方案

下圖的阿姆斯特丹街景繪畫中，我運(yùn)用了補(bǔ)色分割的配色方案來區(qū)分自然河流、樹木和人造街道。

阿姆斯特丹街景

建筑本身也用了許多白色，這里有一個要點(diǎn)：不是全部的東西都需要上色。事實(shí)上，在你的設(shè)計(jì)中恰當(dāng)?shù)亓舭灼鸬搅藦?qiáng)調(diào)顏色和內(nèi)容的作用。下圖將給你展現(xiàn)一個在UI設(shè)計(jì)中運(yùn)用這個方法的案例：

PhilCohn的個人網(wǎng)站

這個作品里我不僅大量使用了留白，還使用了和阿姆斯特丹繪畫中相像的補(bǔ)色分割方案。

此外，確保一個頁面只讓一種顏色主導(dǎo)，由于太多的對比色會讓人產(chǎn)生視覺負(fù)擔(dān)，對于每個部分，也使用一種顏色為主，就像純素壽司的官網(wǎng)一樣。這也讓你可以加入更多顏色細(xì)節(jié)，例如下面背景中的三文魚配色與阿姆斯特丹房子相呼應(yīng)。

阿姆斯特丹系列插畫

對比色是吸引留意力的好方法，但在這個信息轟炸的時代，你想傳遞安靜的心情呢？看起來是屬于同類的鄰近色配色方案是最好的選擇。

相像的顏色聚在一起，就像南極的企鵝一樣

想想我們身邊連成片的樹木，一望無際的草地，沙如雪的大漠。完全不需要色輪的另一邊來凸顯他們的存在。在下圖中我運(yùn)用了鄰近色原理來制造和諧的感覺：

鄉(xiāng)村的小路插畫

食品品牌中常常使用這種配色方案，尤其是有機(jī)食品。它們也可以很簡單地應(yīng)用UI設(shè)計(jì)中，就拿我為一個餐館