關(guān)于設(shè)計(jì)色彩的文章，我寫的不多（好像木有吧...），也許是自身也并不太擅長，前些天恰巧看外文文章，一個(gè)國外設(shè)計(jì)師寫的一篇基礎(chǔ)的色彩運(yùn)用文章，清晰明了，也比較適合剛?cè)胄械脑O(shè)計(jì)師們閱讀學(xué)習(xí)，所以進(jìn)行了轉(zhuǎn)譯，分享給大家。

顏色是一個(gè)設(shè)計(jì)師手中強(qiáng)大的力量。 它吸引你的眼睛，喚起你的情緒，連接各種含義。在一個(gè)被廣泛引用的色彩研究題目對市場的影響中，研究人員發(fā)現(xiàn)，人們購買產(chǎn)品時(shí)，90％草率做出決定的人是單獨(dú)根據(jù)顏色來選擇的。因此，有效地利用色彩來設(shè)計(jì)非常重要。但是，不同的顏色進(jìn)行組合也很困難。每種顏色都有自己的意思，也可以進(jìn)行多種多樣的組合。這篇文章的目的是作為一個(gè)指南，以幫助你拿出調(diào)色板的設(shè)計(jì)。鼓勵(lì)你去探索更多的顏色，幫助你開發(fā)出對于色彩組合的良好直覺。

一.選擇調(diào)色板

有時(shí)，一個(gè)調(diào)色板是靈光一現(xiàn)的結(jié)果。但大多數(shù)時(shí)候，它是系統(tǒng)化方法的結(jié)果。

1.確定目標(biāo)

做任何事情之前，首先確定你的設(shè)計(jì)目的。問問自己以下幾個(gè)問題：

你想傳達(dá)的設(shè)計(jì)信息是什么？

你的設(shè)計(jì)的目的是什么？為了傳達(dá)信息？為了說服？

你的設(shè)計(jì)要表達(dá)的情感是什么？

你設(shè)計(jì)的目的應(yīng)當(dāng)作為你選擇調(diào)色板的向?qū)А?/p>

2.找出你的聽眾

人們感知到的顏色不同。顏色基于個(gè)人喜好，文化教養(yǎng)和生活體驗(yàn)，有不同的效果。因此，為了了解人們對你設(shè)計(jì)作品的反應(yīng)，你需要確定你的聽眾。

有些顏色的含義是普遍大眾的，有些則不是。比如紅色在不同文化里有不同的解釋。在西方世界，紅色與火，暴力和戰(zhàn)爭有關(guān)，但它也代表了愛和激情，然而，在中國就把紅色與繁榮和幸福聯(lián)系了起來。

由于顏色有這么多不同的含義，設(shè)計(jì)的顏色與目標(biāo)受眾的心理模型匹配很重要。

3.回顧色彩理論

當(dāng)選擇一個(gè)調(diào)色板時(shí)，你有時(shí)會(huì)順便了解一些色彩理論。色彩理論是混合顏色的邏輯結(jié)構(gòu)和現(xiàn)實(shí)顏色的指導(dǎo)意義。它包括一切在色輪的顏色的各種含義。

4.尋找靈感

有時(shí)很難選出正確的調(diào)色板來進(jìn)行設(shè)計(jì)。但沒關(guān)系，偉大的藝術(shù)家偷竊?；蛘哒f，他們在其他藝術(shù)家的作品是獲取靈感。作為調(diào)色板靈感獲取網(wǎng)站——Dribbble、Behance。如果你想找到一個(gè)特定的設(shè)計(jì)風(fēng)格來獲取色彩靈感，，比如材料設(shè)計(jì)風(fēng)格，你可以使用像MaterialUI這類的網(wǎng)站。平面設(shè)計(jì)可以在FlatUIColors獲取靈感。

這些網(wǎng)站是有用的，但盡量搜集那些你正在設(shè)計(jì)的相關(guān)有用信息，這樣做有助于你想出意外獨(dú)特且清新悅目的色彩調(diào)色板。舉個(gè)例子，可以看看室內(nèi)設(shè)計(jì)。

如果你想要不同的東西，在其他文化的設(shè)計(jì)中尋找色彩靈感。例如，韓國音樂視頻集設(shè)計(jì)被稱為繽紛醒目的調(diào)色板。每一幀都可以作為靈感的源泉。

但是你不必去韓國找色彩靈感。它無處不在，甚至包括你的日常生活。你出去的時(shí)間，停下來欣賞你周圍的顏色，就可以獲得色彩靈感。當(dāng)你找到激勵(lì)你的東西，為它創(chuàng)建一個(gè)調(diào)色板。你可以在最喜歡的設(shè)計(jì)程序中使用滴管工具，梳理出一個(gè)調(diào)色板并在必要時(shí)進(jìn)行調(diào)整。

5.建立系統(tǒng)的設(shè)計(jì)

設(shè)計(jì)系統(tǒng)，有時(shí)也被稱為風(fēng)格指南，是包含了你設(shè)計(jì)中的所有設(shè)計(jì)元素的設(shè)計(jì)框架。這包括從按鈕到排版的所有的事情，比如像你將要使用的按鍵種類和導(dǎo)航欄的樣子。選擇調(diào)色板之前建立一個(gè)設(shè)計(jì)系統(tǒng)是有益的，即使這只是一個(gè)粗略的草圖。這樣做會(huì)幫助你梳理設(shè)計(jì)中有什么元素和什么顏色更加匹配元素。當(dāng)選擇調(diào)色板來設(shè)計(jì)時(shí)，最好能堅(jiān)持KISS（保持簡單，愚蠢的）原則，色彩越少越好。對于大多數(shù)設(shè)計(jì)系統(tǒng)，下面的結(jié)構(gòu)是一個(gè)良好的開端：

背景

主要強(qiáng)調(diào)

次要強(qiáng)調(diào)

錯(cuò)誤顏色

成功的色彩

主要顏色是你最經(jīng)常使用的重要按鈕和重要部分的顏色。對于許多公司來說，這也是他們的標(biāo)志顏色。

二級(jí)顏色是用來區(qū)分那些主要行為的顏色。例如，主要和次要的按鈕，錯(cuò)誤和成功的顏色通常是紅色和綠色，成功或錯(cuò)誤的頁面通知。

6.選擇調(diào)色板

對于基本的調(diào)色板，我喜歡把我的顏色并排鋪在旁邊，就像一個(gè)藝術(shù)家會(huì)為他們的作品調(diào)色。

這是把你所有的色彩靈感迸發(fā)，并創(chuàng)建出調(diào)色板的最好時(shí)間，越多越好。不要害怕顏色搭配不好?？s小你的調(diào)色板選項(xiàng)，問問自己以下幾個(gè)問題：

什么顏色可以訪問？

什么顏色有視覺沖擊力吸引眼球？

你需要一個(gè)淺色或深色的配色方案嗎？用戶在一天內(nèi)什么時(shí)間會(huì)使用你的產(chǎn)品？

你的設(shè)計(jì)傳達(dá)了什么情緒？請問你有任何一個(gè)調(diào)色板做到這一點(diǎn)比其他人好嗎？

正如我在上一節(jié)中提到的，顏色會(huì)在你的設(shè)計(jì)系統(tǒng)中扮演不同的角色。這也意味著，每個(gè)顏色在系統(tǒng)中都扮演了不同角色。例如，你的背景顏色在使用頻率上往往會(huì)多于主色的使用。

正因?yàn)槿绱?，?chuàng)建不同大小的形狀組成一次性設(shè)計(jì)，有時(shí)也是一種不錯(cuò)的體驗(yàn)，每個(gè)形狀大小大約等于給定頁面上顏色的平均表面積的頻率。

舉一個(gè)例子，這里是INVISION的調(diào)色板。

幾何表示可能是這個(gè)樣子。

7.應(yīng)用調(diào)色板

為了教你如何運(yùn)用色彩來設(shè)計(jì)系統(tǒng)，讓我們來看看Airbnb的制作。 Airbnb的原色是Rausch，公司源于街道命名。Rausch作為二次色和兩個(gè)灰色用作背景顏色。

對于大多數(shù)頁面，Airbnb使用霧灰色為背景。你可以看到，他們使用的Rausch作為其主要的顏色。

Rausch，綠松石色，很容易被人眼捕捉到。

有關(guān)錯(cuò)誤的信息，Airbnb采用了淡紅色，可以說是Rausch的陰影。紅色與感嘆號(hào)一起，立即吸引你的眼球，并通知你系統(tǒng)的狀態(tài)。

剛開始設(shè)計(jì)界面時(shí)，你無需設(shè)計(jì)任何顏色，只要重點(diǎn)布局排版和元素的位置。在滿意排版和元素位置后，那么就可以開始應(yīng)用你的調(diào)色板到設(shè)計(jì)中了。

想要設(shè)計(jì)出視覺層次，首先要考慮一下你想要突出的元素并指定相應(yīng)的顏色是什么，此外，考慮使用的顏色深淺不同，怎樣更像懸停，以及單擊后的狀態(tài)是什么樣子的。

二.總結(jié)

顏色是所有設(shè)計(jì)有關(guān)實(shí)驗(yàn)和迭代的產(chǎn)物。如果你想在色彩的運(yùn)用上變得更好，唯一的答案就是做更多的工作。如果你的設(shè)計(jì)的布局和功能已經(jīng)完善，那么你就可以盡可能多的試用調(diào)色板，只要你想嘗試。

本文內(nèi)容由本公眾號(hào)原創(chuàng)轉(zhuǎn)譯，轉(zhuǎn)載請注明出處，否則后果必究。

關(guān)于大寶（我本人）：

互聯(lián)網(wǎng)領(lǐng)域設(shè)計(jì)師，跨界于廣告、創(chuàng)意、工業(yè)設(shè)計(jì)、用戶體驗(yàn)等領(lǐng)域，喜歡潮流，本身卻很土，定期寫文，歡迎提出你感興趣的設(shè)計(jì)、藝術(shù)、創(chuàng)意等話題，試著做一個(gè)書寫設(shè)計(jì)來影響你的人。

歡迎關(guān)注，閱讀更多原創(chuàng)設(shè)計(jì)思考。