不同的色調(diào)能夠調(diào)動(dòng)不同的情緒和反映，能夠影響用戶對(duì)于品牌的感知。簡(jiǎn)單說來，色彩可以造就不同的網(wǎng)站設(shè)計(jì)。與此同時(shí)，研究表明，色彩能夠強(qiáng)化品牌認(rèn)知度，加深用戶印象，讓品牌的設(shè)計(jì)和文本在同類中脫穎而出，與海淘科技一起來看看網(wǎng)頁設(shè)計(jì)中色彩運(yùn)用秘技吧~
如何找到完美的色彩搭配,獲得正確的顏色既是一門藝術(shù)，也是一門科學(xué)。
幸運(yùn)的是，我們的早已遠(yuǎn)離可選色彩匱乏的年代。技術(shù)的革新使得人們選取色彩不再受到天然色素的限制，合成色素與屏幕的出現(xiàn)讓色彩和我們的生活越來越緊密，也使得選取和決定所需考慮的因素更加復(fù)雜。正是因?yàn)樯实臉O大豐富，配色方案的選取的確越來越麻煩了。Colourlovers 社區(qū)已經(jīng)為近800萬種進(jìn)行了命名，不過依然有超過1600種色彩在后面正排隊(duì)等候。
聽起來是不是有點(diǎn)不堪重負(fù)的意思?別擔(dān)心，聽聽來自Creative Market社區(qū)的頂級(jí)設(shè)計(jì)師的建議吧，他們會(huì)告訴你關(guān)于色彩選取的最佳技巧，讓你也可以輕松挑選最佳的色彩組合。
首先，我們簡(jiǎn)單理解一下色相和色調(diào)概念：
接下來我們按三個(gè)大類的配色方法，結(jié)合一些案例，分析色彩在頁面中的應(yīng)用手法。
同色系配色是指主色和輔色都在統(tǒng)一色相上，這種配色方法往往會(huì)給人頁面很一致化的感受。
近鄰色配色方法比較常見，搭配比同色系稍微豐富，色相柔和過渡看起來也很和諧。
類似色配色也是常用的配色方法，對(duì)比不強(qiáng)給人色感平靜、調(diào)和的感覺。
中差色對(duì)比相對(duì)突出，色彩對(duì)比明快，容易呈現(xiàn)飽和度高的色彩。
主導(dǎo)的對(duì)比配色需要精準(zhǔn)地控制色彩搭配和面積，其中主導(dǎo)色會(huì)帶動(dòng)頁面氣氛，產(chǎn)生激烈的心理感受。
用一些中性的色彩作為基調(diào)搭配，常應(yīng)用在信息量大的網(wǎng)站，突出內(nèi)容，不會(huì)受不必要的色彩干擾。這種過配色比較通用，非常經(jīng)典。
主色和其他搭配色之間的關(guān)系會(huì)更豐富，可能有類似色、中差色、對(duì)比色等搭配方式，但其中某種色彩會(huì)占主導(dǎo)。
互補(bǔ)的色相搭配在一起，通過統(tǒng)一色調(diào)的手法，可以緩和色彩之間的對(duì)比效果。
多色彩經(jīng)過統(tǒng)一色調(diào)處理，區(qū)域間非常協(xié)調(diào)，也不影響整體頁面陰暗氣氛表現(xiàn)。
飽和度與純度特性明顯的搭配，在達(dá)到視覺沖擊力的同時(shí)，可適當(dāng)采用對(duì)比色或降低明度等方法調(diào)和視覺表現(xiàn)。
以低暗色調(diào)構(gòu)成整體畫面氛圍，小面積明亮部分不會(huì)影響整體感覺。
同色調(diào)不同色彩的模塊，就算承載著不同的信息內(nèi)容也能表現(xiàn)很和諧。
綜合運(yùn)用的情況，整體界面是有主導(dǎo)色調(diào)，在布局例如重點(diǎn)圖標(biāo)等是同色調(diào)配色靈活運(yùn)用。
同色深淺配色有著極高的統(tǒng)一性，但有點(diǎn)枯燥。
色彩間對(duì)比視覺沖擊強(qiáng)烈，容易吸引用戶注意，使用時(shí)經(jīng)常大范圍搭配。
不管是整體對(duì)比還是局部對(duì)比，對(duì)比色給人強(qiáng)烈的視覺沖擊，結(jié)合色彩心理學(xué)對(duì)品牌傳達(dá)效果更佳。
三色對(duì)比色相上更為豐富，通過加強(qiáng)色調(diào)重點(diǎn)突出某一種顏色，且在色彩面積更為講究。
多色對(duì)比給人豐富飽滿的感覺，色彩搭配協(xié)調(diào)會(huì)使頁面會(huì)非常精致，模塊感強(qiáng)烈。
相對(duì)與色相對(duì)比，純度差對(duì)比，對(duì)比色彩的選擇非常多，設(shè)計(jì)應(yīng)用范圍廣泛，可用于一些突出品牌、營(yíng)銷類的場(chǎng)景。
明度對(duì)比接近生活實(shí)際反映，通過環(huán)境遠(yuǎn)近、日照角度等明暗關(guān)系，設(shè)計(jì)趨于真實(shí)。
藝術(shù)家Marc Chagall 曾經(jīng)說過一句被廣泛引用的話：“所有的色彩都是隔壁色彩的朋友，也是相反位置色彩的愛人?！逼鋵?shí)這句話說的就是色輪。
來自溫哥華Cultivated Mind 的設(shè)計(jì)師Cindy Kinash 曾說過：“當(dāng)使用水彩繪制花朵的時(shí)候，展現(xiàn)陰影最好的方式是使用色輪上相鄰的色彩來繪制。”
在Cindy的作品中，淺藍(lán)和深藍(lán)、紫色相鄰，這一連串的色彩使用，渲染出了深度。色輪的使用技巧非常之廣，色彩之間的關(guān)系是如此的清晰而富有規(guī)律，你可以輕松運(yùn)用在不同的場(chǎng)合，創(chuàng)造出許多獨(dú)特的組合。
明度是配色的重要因素，明度的變化可以表現(xiàn)事物的立體感和遠(yuǎn)近感。如希臘的雕刻藝術(shù)就是通過光影的作用產(chǎn)生了許多黑白灰的相互關(guān)系，形成了成就感;中國(guó)的國(guó)畫也經(jīng)常使用無彩色的明度搭配。有彩色的物體也會(huì)收到光影的影響產(chǎn)生明暗效果。
如果你對(duì)此并不了解，也不用擔(dān)心，網(wǎng)上有大把的相關(guān)工具幫你搞定色輪的使用。
不同的設(shè)計(jì)領(lǐng)域，在處理色彩上有著相同的經(jīng)驗(yàn)。在室內(nèi)設(shè)計(jì)領(lǐng)域，設(shè)計(jì)師需要使用紋理、物體和色彩來調(diào)和空間。
在這方面，來自MyCreativeLand 的英國(guó)設(shè)計(jì)師 Elena Genova 有過不錯(cuò)的建議：“室內(nèi)設(shè)計(jì)的許多設(shè)計(jì)規(guī)則運(yùn)用在平面設(shè)計(jì)上非常靠譜，比如用色，60%的主色調(diào)、30%的輔助色、10%的強(qiáng)調(diào)色，這樣的配色比例就非常不錯(cuò)。如果你需要引入第四種色彩，最好從輔助色當(dāng)中分出一部分來?！?
其實(shí)許多領(lǐng)域當(dāng)中知識(shí)和規(guī)律都是相通的，在不同的科學(xué)和藝術(shù)領(lǐng)域中借鑒規(guī)律并非是扯淡。所以，建筑學(xué)規(guī)律運(yùn)用到平面設(shè)計(jì)中來，一點(diǎn)違和感都沒有。
我們對(duì)于自然的色彩有著天然的親和。如果你打算從大自然借色彩，還是有一些地方需要注意的。來自CO-OP的 設(shè)計(jì)師Gary說過，自然的色彩里，有著無限的色彩組合。每一片葉子和沒一個(gè)水果都有著令人驚艷的色彩，這些自然的東西能給人靈感。Gary 在南非有著自己的網(wǎng)絡(luò)商店，他的設(shè)計(jì)靈感來自南非“光明而溫暖的陽關(guān)”。
在這些富有水彩畫質(zhì)感的作品中，我們不難看出他的靈感來源：溫暖的火紅色，日落般絢爛的色彩，鮮艷的森林綠，充滿生命力。
你可以輕松在網(wǎng)上找到別人的設(shè)計(jì)和方案，但是只有你從自然獲取到的色彩，才是屬于你自己的。
設(shè)計(jì)師 Nicky Laatz 擁有一家攝影與設(shè)計(jì)商店，她分享了她是如何將漂亮的配色保存下來并復(fù)用的：“每當(dāng)我看到漂亮的圖片和配色不錯(cuò)的照片的時(shí)候，我會(huì)截圖并保存下來。當(dāng)我需要尋求配色方案的時(shí)候，我會(huì)在圖片庫(kù)當(dāng)中尋求靈感，總能找到符符合需求的方案?！?
Vanilla Frosting 是 Nicky商店中賣得最好的字體，它的配色和設(shè)計(jì)靈感就是來自于蛋糕。這也就是說，你的配色和設(shè)計(jì)靈感可以來自于許多不同的地方，不要給自己設(shè)限。
你可能已經(jīng)很熟悉Pinterest和花瓣這樣的網(wǎng)站了，這些靈感網(wǎng)站不僅能瀏覽，還能保存許多數(shù)字化的設(shè)計(jì)作品用作靈感來源。那么物理實(shí)體怎么辦呢?
設(shè)計(jì)師Austin Kleon在自己的書《Steal Like An Artist》中提到過一種方案：用文件夾和筆記本將你看到的雜志、傳單等你覺得漂亮的印刷品等搜集起來，創(chuàng)造你自己的色卡和配色方案!
Colourlovers 就是一個(gè)典型的圍繞色彩而存在的創(chuàng)意社區(qū)，來自世界各地的色彩愛好者在這里集結(jié)，加入社區(qū)便可以同370萬來自世界各地的設(shè)計(jì)師一同探討配色方案。
有的時(shí)候，顯示屏背后的數(shù)碼色輪并不能滿足你對(duì)于色彩的全部需求。離開屏幕，看看這個(gè)世界的色彩，而彩通配色正好為你滿足了你的這一需求。
設(shè)計(jì)師 Callie Hegstrom 就是這樣做的，她以一種更加老派的方式來展示色彩的“物理形態(tài)”——使用彩通的配色手冊(cè)(Pantone Color Bridge)。她是這樣解釋的：“有的時(shí)候有一本物理形態(tài)的色彩手冊(cè)，是非常有用的。尤其是當(dāng)用戶需要一種特定的色彩的時(shí)候，手冊(cè)會(huì)向他展示實(shí)際的效果?！?
其實(shí)仔細(xì)想想，彩通的色卡和手冊(cè)也算不上太過“老派”，畢竟色卡上每個(gè)色彩都有對(duì)應(yīng)的HEX值。對(duì)于有印刷和涉及色彩實(shí)體的設(shè)計(jì)師而言，有個(gè)色卡或者手冊(cè)還是非常省時(shí)省力的，這會(huì)節(jié)省相當(dāng)多的時(shí)間、金錢，尤其省卻了不必要的來回折騰。
除非你是要設(shè)計(jì)一套奇花無比的“彩虹系”的作品，那么盡量避免色彩使用過量。智利平面設(shè)計(jì)師 Rodrigo German 認(rèn)為，將整個(gè)設(shè)計(jì)的色彩控制在三到四個(gè)，會(huì)讓整體看起來清爽而不會(huì)太過。如果需要超過三個(gè)色彩，盡量在現(xiàn)有色彩中加入黑白灰創(chuàng)造同色系色彩。
這個(gè)案例中，Rodrigo 使用了Marty字體，色彩上也堅(jiān)持了他的三色原則，只使用了粉色、黑色和綠色。
所以，如果你想堅(jiān)持自己的創(chuàng)意和設(shè)計(jì)，但是又感覺還有缺陷存在，不妨看看是不是配色方案用色過多。記住，最佳的配色方案是三種色彩。
想想看，你的設(shè)計(jì)到底是針對(duì)的什么主題。是關(guān)于運(yùn)動(dòng)、時(shí)尚、美容還是商務(wù)?決定了領(lǐng)域之后，你需要考慮的是與之相關(guān)的情緒是怎樣的。這應(yīng)該是一個(gè)可愛的時(shí)尚的宣傳單，還是一個(gè)積極向上的體育海報(bào)?它應(yīng)該是女性化的，還應(yīng)該是優(yōu)雅而開朗的?
Graphic Box 的設(shè)計(jì)師 Salome 是這樣的建議的：“你應(yīng)該線構(gòu)思出一個(gè)粗略的顏色主題，然后繼續(xù)打磨細(xì)節(jié)。比如，你需要一個(gè)浪漫的紫色，或者可愛的粉紅色。”
在她的秋季Graphic Kit 中，Salome 就采用了相對(duì)樸實(shí)的綠色、淺橙色和復(fù)古紅。
仔細(xì)看看周圍的類似的圖片、網(wǎng)頁設(shè)計(jì)和創(chuàng)意網(wǎng)頁作品，他們用了什么色調(diào)、傳達(dá)了什么情緒，如果你要借鑒的話，兩者之間有什么區(qū)別，要注意什么細(xì)節(jié)，又該怎么使用。
另外一個(gè)不錯(cuò)的選擇是自己鉆研色彩理論。研讀一下色彩理論和色彩心理學(xué)，了解色彩之間的關(guān)系、色彩對(duì)于用戶心理的影響。不過，請(qǐng)記住：選擇那些最有效的色彩!
來自Make Media 的 Callie Hegstrom 是一名才華橫溢的設(shè)計(jì)師，對(duì)于獲取靈感，她是這樣建議的：“我常常通過漂亮的照片來獲取斑斕絢爛的配色方案，取色的時(shí)候直接通過PS或者AI就可以。圖片是非常不錯(cuò)的配色來源，不過前提條件是你選取的圖片一定要有足夠的凝聚力。”
所以，如果真的有色彩讓你特別喜歡的照片，不妨直接借助它來制作一個(gè)好用而高效的配色方案。諸如 Photocopa 這樣的工具會(huì)讓這個(gè)過程更快捷，你所需要做的就是上傳照片，然后探索可能的方案。
雖然國(guó)內(nèi)的花瓣擁有大量“符合國(guó)人需求”的畫板合集，但是用戶基數(shù)與品質(zhì)依然比不上這個(gè)領(lǐng)域的開拓者Pinterest。Pinterest 幾乎是世界上最大的創(chuàng)意工作者的集散地，這里也有著數(shù)量龐大、可供選擇的調(diào)色板。Vintage Design Co., 創(chuàng)始人 Ian Barnard 為我們?cè)敿?xì)講述了在Pinterest 尋找配色方案的過程：
“很簡(jiǎn)單，如果我正打算做一個(gè)海灘主題的海報(bào)，那么我通常只需要搜索‘Summer Color Palettes’，然后在搜索結(jié)果中挑選一個(gè)中意的就好了。 ”
就這么簡(jiǎn)單?當(dāng)然，不過好玩兒的地方在于，你還可以繼續(xù)細(xì)化篩選，針對(duì)不同領(lǐng)域篩選：室內(nèi)設(shè)計(jì)、時(shí)尚、網(wǎng)頁設(shè)計(jì)，甚至活動(dòng)設(shè)計(jì)。
色彩可以成就設(shè)計(jì)，也可以毀掉設(shè)計(jì)。它可以帶來美麗與平和，也可以創(chuàng)造尖銳的效果，營(yíng)造恐怖的氛圍，而這些都取決于你，這些效果都最終歸結(jié)于你對(duì)于色調(diào)的選取是否認(rèn)真，都源自于你對(duì)于設(shè)計(jì)最初的想法。
無論你的配色的靈感是源自于其他的作品，還是得自于天然，如果這是一套靠譜的方案，它會(huì)有助于網(wǎng)頁設(shè)計(jì)。那么為何不多加探索，讓你的設(shè)計(jì)擁有更強(qiáng)大的生命力呢?
以上就是《新年大招！網(wǎng)頁設(shè)計(jì)中色彩運(yùn)用秘技》，更多精彩，點(diǎn)擊《動(dòng)效設(shè)計(jì)的作用》，了解更多。
