這篇文章比較系統(tǒng)的介紹了尋找配色方案靈感的一些思路,輔以大量案例來解釋配色方法,通俗易懂,最適合新手了。色彩是設(shè)計(jì)師手中強(qiáng)大的武器。它吸引著用戶的視線,喚起情感,傳達(dá)內(nèi)涵。在一項(xiàng)關(guān)于色彩的調(diào)研中,研究人員發(fā)現(xiàn),用戶對(duì)于產(chǎn)品的快速?zèng)Q策 90% 是基于色彩的。所以色彩的運(yùn)用對(duì)于設(shè)計(jì)來說至關(guān)重要,每種顏色都有自己的意義,而多種顏色的組合也需要理論指導(dǎo)。
有時(shí)候色彩搭配是一時(shí)的靈光乍現(xiàn),但更多時(shí)候,它有更系統(tǒng)的方式來搭配。
在開始設(shè)計(jì)之前,先確定設(shè)計(jì)目的。在開始前問自己這些問題:
人們對(duì)顏色的感覺是不同的。顏色是觀察者內(nèi)部出現(xiàn)的心理現(xiàn)象。顏色根據(jù)個(gè)人偏好,文化培養(yǎng)和經(jīng)驗(yàn)對(duì)人們有不同的影響。因此,為了了解人們?nèi)绾螌?duì)您的設(shè)計(jì)做出反應(yīng),您需要確定您的受眾。
當(dāng)然了,也有一些普遍適用的色彩的含義。綠色普遍代表大自然,因?yàn)樗侵脖坏念伾?。然而,像紅色這樣的顏色在不同文化中的解釋不同。在西方世界,紅色與火,暴力和戰(zhàn)爭(zhēng)有關(guān)。它也與愛和激情有關(guān)。然而,像中國(guó)這樣的國(guó)家將紅色與繁榮和幸福聯(lián)系在一起。
因?yàn)轭伾泻芏嗖煌暮x,所以將你作為設(shè)計(jì)師的心理顏色模型與你的觀眾相匹配是非常重要的。要了解更多關(guān)于不同國(guó)家和人口統(tǒng)計(jì)的顏色意味著什么,請(qǐng)查看顏色在市場(chǎng)營(yíng)銷和品牌的顏色心理學(xué)和顏色的意義。
色彩理論是混合顏色的邏輯結(jié)構(gòu)和實(shí)踐指南。它包含從色輪到各種顏色的意義的一切。你可以通過研讀而明白為什么Facebook 是藍(lán)色?
很多時(shí)候我們可能沒有靈感,沒關(guān)系,就算是再偉大的藝術(shù)家也會(huì)如此,我們可以借鑒他人的作品,獲得啟發(fā)。
搜尋靈感的好文章是:
這些文章是有用的,但嘗試看看從您正在設(shè)計(jì)的特定媒體之外的設(shè)計(jì)。這樣做將幫助你想出出乎意料的獨(dú)特和令人愉快的色彩方案。例如,你可以看看室內(nèi)設(shè)計(jì)。
如果你想要不同的東西,尋找顏色靈感在其他文化的設(shè)計(jì)。例如,韓國(guó)音樂視頻集設(shè)計(jì)以其豐富多彩和眼睛捕捉的調(diào)色板而聞名。每個(gè)框架都可以作為靈感來源。
色彩方案無處不在,包括你的日常生活。下一次出去,停下來欣賞你周圍的顏色。
一個(gè)設(shè)計(jì)系統(tǒng),有時(shí)被稱為樣式指南,是一個(gè)框架,封裝所有的元素到你的設(shè)計(jì)內(nèi)。這包括從按鈕到排版的一切。你需要考慮,什么樣的按鈕和你的導(dǎo)航欄看起來像什么。
有關(guān)設(shè)計(jì)系統(tǒng)的示例,請(qǐng)查看網(wǎng)易的設(shè)計(jì)規(guī)范:《內(nèi)部教程!超實(shí)用6步透視網(wǎng)易設(shè)計(jì)規(guī)范(附完整PDF下載)》,每個(gè)初學(xué)者在開始設(shè)計(jì)前都應(yīng)該好好看看。
構(gòu)建設(shè)計(jì)系統(tǒng)對(duì)配色有極大的幫助,即使是個(gè)草圖,也會(huì)給你提供思路,什么樣的顏色,元素適合整體方案。
保持 Kiss 原則(盡量簡(jiǎn)單),顏色越少越好,對(duì)于大多數(shù)設(shè)計(jì)系統(tǒng),一下結(jié)構(gòu)是一個(gè)好的開端:
原色是最常用于重要按鈕和重音的顏色。對(duì)于許多公司,這也是他們的標(biāo)志的顏色。
輔助顏色是用于區(qū)分次要操作和主要操作的顏色。例如,主按鈕和輔助按鈕。錯(cuò)誤和成功顏色,通常是紅色和綠色,傳達(dá)設(shè)計(jì)狀態(tài)。例如,成功或錯(cuò)誤通知。
現(xiàn)在你擁有靈感和設(shè)計(jì)系統(tǒng)的粗略草圖,現(xiàn)在是選擇一個(gè)配色方案的時(shí)候了。對(duì)于一個(gè)基本的調(diào)色板,我喜歡把我的顏色并排,就像是大家整齊地等待開會(huì)。
基礎(chǔ)顏色可以多一些,不要害怕嘗試大膽的顏色
在進(jìn)一步確認(rèn)選擇顏色的時(shí)候,再問自己:
正如我在上一節(jié)中提到的,顏色將在您的設(shè)計(jì)系統(tǒng)中有不同的角色。這也意味著每種顏色在你的系統(tǒng)中都有不同的權(quán)重。例如,您的背景顏色將比主要提示更頻繁地使用。
因此,有時(shí)創(chuàng)建一個(gè)由不同尺寸的形狀組成的一次性設(shè)計(jì)是有好處的,每個(gè)尺寸大致等于給定頁(yè)面上的顏色的出現(xiàn)頻率和平均表面積。(園長(zhǎng):顏色權(quán)重越高,面積越大,比如背景色尺寸 > 主要提示色尺寸)
舉個(gè)例子,這有個(gè) Invision 的配色方案:
你可以把基礎(chǔ)色變根據(jù)權(quán)重,換成不同大小來預(yù)覽配色方案。
為了讓大家了解如何將顏色應(yīng)用于設(shè)計(jì)系統(tǒng),讓我們來看看 Airbnb。Airbnb 的原色是Rausch(下圖右二),以公司起源的街道命名。Kazan(下圖右一) 用作次要顏色,兩個(gè)灰色用作背景顏色。
對(duì)于大多數(shù)頁(yè)面,Airbnb 使用霧灰色作為背景。您可以看到,他們使用 Rausch 作為他們的主要顏色強(qiáng)調(diào)重要的行動(dòng),如要求預(yù)訂列表。
Kazan 用于捕捉和吸引你的眼睛。注意它如何補(bǔ)充原色。
對(duì)于錯(cuò)誤消息,Airbnb 使用淺紅色,可以說是一種陰影。紅色,連同感嘆號(hào),立即吸引你的眼睛,并通知你系統(tǒng)的狀態(tài)。
想想你的設(shè)計(jì)中的視覺層次結(jié)構(gòu)。考慮什么設(shè)計(jì)組件要突出顯示和分配適當(dāng)?shù)念伾?。此外,?qǐng)考慮對(duì)懸停和點(diǎn)擊狀態(tài)等內(nèi)容使用不同顏色的陰影。試著把配色應(yīng)用到你的產(chǎn)品上。
學(xué)習(xí)如何用顏色設(shè)計(jì)對(duì)于設(shè)計(jì)師來說是無價(jià)的,配色方案都是需要不斷嘗試和迭代的。如果你想更游刃有余地處理顏色,唯一的方法是做更多的工作和嘗試。
海淘科技,后面還會(huì)更新非常有想法的配色方案,缺乏靈感的時(shí)候不妨一看。文章下載。點(diǎn)擊:網(wǎng)頁(yè)設(shè)計(jì)師自學(xué)手冊(cè)之色彩搭配簡(jiǎn)易指南