多彩的情緒：Web UI設(shè)計(jì)的視覺內(nèi)涵
顏色的使用是一門藝術(shù)。
在人類歷史上，畫家和藝術(shù)大師都會(huì)因其顏色運(yùn)用得恰到好處而為人認(rèn)可〔ブ溃現(xiàn)代社會(huì)這種藝術(shù)形式被用于商業(yè)領(lǐng)域如廣告和現(xiàn)在的Web設(shè)計(jì)，由于顏色的含義深不可測(cè)，顏色的運(yùn)用技巧也在逐漸精進(jìn)拒啰，且永無止境
我們將探索顏色的理論基礎(chǔ)及其使用方案，并考察顏色所傳達(dá)出的情感深意
顏色理論
顏色的理論一本書也說不完完慧，我們將重點(diǎn)闡述關(guān)于UI設(shè)計(jì)的部分谋旦。我們將顏色的設(shè)計(jì)理論分為3類：
1. 對(duì)比 — 每一種顏色都有一系列的對(duì)比色—就是相互之間的對(duì)比比其他顏色來得更為強(qiáng)烈。你能通過下圖找到每個(gè)顏色的對(duì)比色，簡(jiǎn)單的說就是在色環(huán)的對(duì)面册着。
2. 互補(bǔ)（應(yīng)該是相似-譯者注）— 顏色之間并不總是對(duì)比的拴孤，相鄰色之間相輔相成，互為映襯甲捏。相鄰色在色環(huán)上是緊挨著的演熟。例如，紫色的相鄰色是藍(lán)色和粉紅司顿。
3. 內(nèi)涵 — 每一種顏色都會(huì)引起一種特別的情緒：明亮的暖色（紅芒粹、橙、黃）會(huì)帶給人能量大溜，使人警覺化漆。而較深的冷色（綠、藍(lán)猎提、紫）會(huì)讓人放松获三，平靜。CNN的導(dǎo)航欄使用紅色來使標(biāo)題更加醒目锨苏，這是運(yùn)用顏色將新聞內(nèi)容分開疙教。
在web 設(shè)計(jì)中顏色并不只是視覺的裝飾品，在商業(yè)中也會(huì)起到戲劇般的效果伞租。如果你不信贞谓，可以讀一下Jeremy Smith的文章—顏色心理學(xué)是如何拓展你的業(yè)務(wù)的。
顏色是一種科學(xué)葵诈，運(yùn)用的好能使你的界面大變樣裸弦。
顏色的情感化暗示
沒有人會(huì)否認(rèn)顏色和情感之間的聯(lián)系：事實(shí)上自從中世紀(jì)人類已經(jīng)書面記載了顏色對(duì)于人們的心理影響。自然而然所有的 web 設(shè)計(jì)師都想把顏色處理好作喘，因?yàn)轭伾脤?duì)了理疙，網(wǎng)站傳達(dá)出的情感和氛圍也就對(duì)了。
我們分析了在Vandelay Design和Smashing Magazine的研究者的建議泞坦，并且根據(jù)我們自己的經(jīng)驗(yàn)將其做了過濾窖贤。
請(qǐng)注意到不同的文化中顏色代表的意義也不同。我們主要是以西方文化為背景來看待顏色所傳達(dá)出的情感贰锁。如果想更深入得了解不同的文化是怎樣看待不同的顏色的赃梧，請(qǐng)看來自Web Designer Depot 的文章。
紅色
代表：力量豌熄、重要授嘀、青春
紅色是最醒目的顏色，它充滿能量增加了人的血液循環(huán)锣险。代表激情和力量的紅色最吸引人的注意力蹄皱，這也是為什么它會(huì)用在警示和重要的注意事項(xiàng)上览闰。
紅色用在No Way NSA上很適合，這個(gè)網(wǎng)站的目的就是警示來自美國(guó)國(guó)安局的威脅巷折。紅色運(yùn)用在只有一個(gè)頁(yè)面的網(wǎng)站非常明智焕济，因?yàn)榧t色傳達(dá)出了通過往下翻頁(yè)趕快離開危險(xiǎn)地帶的信息，這誘使用戶獲取更多的網(wǎng)站內(nèi)容盔几。
然而，紅色也有可能跟你唱反調(diào)掩幢，它會(huì)激起憤怒逊拍，至少會(huì)使人過分激動(dòng)。如果你想營(yíng)造一個(gè)輕松的氛圍际邻，少用點(diǎn)紅色（至少將亮度調(diào)低）或者不要用芯丧。
橙色
代表：友好、充滿能量世曾、獨(dú)特的
作為最柔和的暖色,橙色作用尤其多缨恒。當(dāng)作為主要顏色時(shí)它是多么得迷人和充滿能量，作為次要顏色時(shí)它也能悄悄地展現(xiàn)這些特性轮听。橙色幫助制造了運(yùn)動(dòng)和充滿能量的感覺骗露。
橙色除了運(yùn)用在芬達(dá)的品牌風(fēng)格上，還用在了芬達(dá)的輕松卡通化得網(wǎng)站上血巍，在顯得親近的同時(shí)還展現(xiàn)出了創(chuàng)造力萧锉。
黃色
代表：高興、熱情述寡、古老（深色）
黃色是一個(gè)多用途的顏色柿隙，作用由它的深淺決定。
亮黃色是最充滿能量的顏色鲫凶，但并沒有紅色那么劇烈禀崖。中等色度的黃色又會(huì)給人一種爽快、舒服的感覺螟炫。暗黃色（包括金色）給人一種古老的的感覺營(yíng)造了年代久遠(yuǎn)波附、睿智、珍貴的氛圍不恭。
上面的的例子來自于web設(shè)計(jì)機(jī)構(gòu)Flash Media叶雹，深黃色滲透出一種充滿能量、珍貴换吧、權(quán)威的氣息折晦。這對(duì)于一個(gè)致力于打造業(yè)務(wù)和技能價(jià)值的公司是相當(dāng)重要的。
綠色
代表：生長(zhǎng)沾瓦、穩(wěn)定满着、財(cái)務(wù)相關(guān)谦炒、環(huán)境相關(guān)
綠色在暖色調(diào)和冷色調(diào)之間架起了一座橋梁，即使更多的時(shí)候被看成是冷色調(diào)风喇。這意味著綠色擁有藍(lán)色一樣的冷靜宁改，但也有黃色的能量，由此創(chuàng)造出一種平衡穩(wěn)固的氛圍魂莫。深綠色給人一種富裕的感覺还蹲，你可以看一下上圖的Ameritrade網(wǎng)站。
藍(lán)色
代表：冷靜耙考、安全谜喊、開放（低色度）、可靠（深色度）
像黃色倦始，藍(lán)色也是根據(jù)顏色深淺表達(dá)不同的含義斗遏。所有的藍(lán)色都有放松、安全的意義鞋邑，但是淡藍(lán)色更多的是友好诵次，而深藍(lán)色更多的是憂郁。像Twitter 和 Facebook 這樣的社交媒體將藍(lán)色運(yùn)用的爐火純青枚碗，將充滿力量和可信賴的深藍(lán)色作為主色調(diào)輔以淡藍(lán)色清新友好逾一。
Van Vliet & Trap一個(gè)活動(dòng)設(shè)計(jì)網(wǎng)站，藍(lán)色用的非常好视译。將藍(lán)色的花做背景嬉荆，在視覺上暗示他們的主業(yè)是花藝設(shè)計(jì)，同樣也流露出可信任可信賴酷含。也為他們?cè)O(shè)計(jì)高品質(zhì)的活動(dòng)（如婚禮）做了完美的鋪墊鄙早。
紫色
代表：奢華、浪漫（低色調(diào)）椅亚、神秘（暗色調(diào)）
長(zhǎng)久以來紫色就和王室相關(guān)限番，骨子里透露出尊貴的氣息，即使現(xiàn)在已經(jīng)不興這一套了呀舔。
紫色暗示著奢華浪費(fèi)弥虐，時(shí)尚的奢侈品經(jīng)常選用的顏色（即使是用在Cadbury巧克力上也是如此）。淺色調(diào)像薰衣草色（添加了粉紅色）讓人聯(lián)想到浪漫媚赖，深色調(diào)則是奢靡及神秘霜瘪。
黑色
代表：力量、急躁惧磺、混合
最強(qiáng)大的中立色颖对，黑色幾乎存在于每一個(gè)網(wǎng)站。
黑色會(huì)根據(jù)其他輔色來變化它的“性格”磨隘，甚至用的過多會(huì)占據(jù)所有顏色所表達(dá)出來的情緒缤底。讓其他顏色占大部分面積顾患，作為點(diǎn)綴的黑色在其中起到的作用是中立的，而當(dāng)黑色做主要顏色時(shí)个唧，會(huì)給人一種急躁江解、強(qiáng)詞奪理、或者邪惡的感覺徙歼。
在大多數(shù)網(wǎng)站犁河，黑色用來營(yíng)造一種混合、永恒的感覺魄梯。當(dāng)配合白色字體呼股，極簡(jiǎn)布局則逼格滿滿，請(qǐng)看Bose的“Dream and Reach”microsite?画恰。
白色
代表：干凈、優(yōu)雅吸奴、簡(jiǎn)潔
在西方文化中允扇，白色象征著優(yōu)美、純潔则奥、清純考润。
極簡(jiǎn)主義和追求簡(jiǎn)潔的網(wǎng)站大多數(shù)會(huì)采用白色為背景。作為最不起眼的顏色读处，通常白色是用來承載其他顏色的糊治。
設(shè)計(jì)師Kaloian Toshev的網(wǎng)站?awwwards-winning 將白色運(yùn)用得非常好。白色的背景將注意力都吸引到他的畫作上去了罚舱，創(chuàng)造出一種優(yōu)雅畫廊的感覺井辜。
灰色
代表：中立、禮節(jié)性的管闷、憂郁的
雖然大多數(shù)時(shí)候看起來是沉悶悲傷的粥脚，但是在表達(dá)傳統(tǒng)和專業(yè)的方面灰色也是非常不錯(cuò)的“觯灰色的優(yōu)勢(shì)就是它色度的變化 — 通過色度的調(diào)整能夠在白色和黑色之間變化刷允，在老手的手里灰色是一個(gè)神器。
將亮度較高的灰色運(yùn)用在扁平化的界面上碧囊，awwwards的灰色背景就顯得高大上而不是陰沉的感覺了树灶。
米黃色
適合做背景色
米黃色是百搭款，它主要是為了突出其他顏色糯而。
米黃色有點(diǎn)遲鈍的感覺天通。然而，米黃色會(huì)展現(xiàn)周圍顏色的特點(diǎn)歧蒋，作為一個(gè)有趣的設(shè)計(jì)工具經(jīng)常作為次要顏色或背景顏色出現(xiàn)土砂。
像Dishoom網(wǎng)站所用的色度較深的米黃色展現(xiàn)了一種泥土般或者紙質(zhì)般的質(zhì)感州既。色度較淺的米黃色給人一種新鮮的感覺。內(nèi)亮外暗的設(shè)計(jì)會(huì)讓人感覺酒店不僅時(shí)尚新鮮而且菜品帶有泥土一般的原汁原味氣息萝映。（這也太扯了吧吴叶。。序臂。）
象牙色
代表：舒服蚌卤、優(yōu)雅、簡(jiǎn)單
在情感表達(dá)方面奥秆，象牙色（奶油色）和白色有少許差別逊彭。
象牙色比白色來的更暖些（或者說更柔和些），在表達(dá)極簡(jiǎn)和復(fù)雜方面時(shí)讓人更舒服些构订，象牙色一般用在降低淺色和深色的對(duì)比時(shí)侮叮。art in my coffee網(wǎng)站中，橘色/棕色被加入到奶油色的背景中去了（看起來稍微有點(diǎn)灰）讓人感覺暖暖噠悼瘾。
如果想閱讀更多關(guān)于顏色及情感關(guān)系的分析囊榜，查看1stWebDesigner 寫的頂尖的20個(gè)品牌的顏色解析文章。
配色方案
每一個(gè)網(wǎng)站都有配色方案亥宿，主體色被用在最重要的地方卸勺。就像我們剛才討論的那樣，重復(fù)使用的顏色會(huì)潛移默化地影響著用戶的心智和心情烫扼，所以我們必須搭配好曙求。
有許多不同的顏色搭配方案，這里我們討論3種最成功最典型的的方法：
1. 三角配色?— 三角配色在這三個(gè)方案中是最基礎(chǔ)最平衡的結(jié)構(gòu)映企。運(yùn)用內(nèi)涵及互補(bǔ)原則悟狱，去掉了復(fù)雜的對(duì)比，三角結(jié)構(gòu)是最安全最可靠的配色方案堰氓。在12色相環(huán)中芽淡，你可以選擇任何相距120度的顏色：一個(gè)做背景，一個(gè)用在內(nèi)容中豆赏，一個(gè)用在導(dǎo)航中挣菲。
2. 混合配色（分開互補(bǔ)配色）—這個(gè)配色方案運(yùn)用起來有點(diǎn)復(fù)雜，但是如果搭配的好的話值得一試掷邦。主要用4種顏色白胀，兩種對(duì)比色及其各自相鄰色。
Florida Flourish 網(wǎng)站運(yùn)用了它本身的顏色抚岗。文字標(biāo)簽和植物使用了紅綠對(duì)比或杠，再加上沙漠天空上使用藍(lán)色和橙色。所以紅色宣蔚、橙色之間的相似及藍(lán)綠之間的相似將網(wǎng)站整體看上起不錯(cuò)向抢。
3. 相似配色?
— 這是最近流行的配色方案认境，專門針對(duì)相似色。這種方案強(qiáng)調(diào)被選顏色的寓意挟鸠，例如叉信，紅橙黃的相似配色看起來充滿能量和生機(jī)勃勃。這種配色方案較容易使用原因在于決定采用顏色的何種寓意之后艘希，這種寓意會(huì)被夸大硼身。
通過在相似網(wǎng)站上藍(lán)色、孔雀藍(lán)覆享、綠色的使用,Blinksale 制造出一種平和安全的氛圍佳遂。注意他們?cè)诼?lián)系電話按鈕上使用的對(duì)比較為強(qiáng)烈的黃色來吸引用戶的注意力。
我們剛才討論的是怎樣運(yùn)用顏色理論來提高你的界面設(shè)計(jì)觀感撒顿，至于用到什么程度還是看你自己丑罪，你可以看一下Smashing Magazine 上的怎樣創(chuàng)造自己的顏色風(fēng)格。
顏色輔助工具
有一點(diǎn)值得慶幸凤壁，那就是有很多工具都可以幫助你將顏色理論應(yīng)用于實(shí)際巍糯。下面這些預(yù)設(shè)好的調(diào)色工具，會(huì)幫你省去很多初始步驟客扎。
1.?Adobe Color CC：前身是 kuler，最值得信任的顏色輔助工具之一罚斗。
2.?Paletton：如果你正需要一個(gè)能快速上手的簡(jiǎn)單工具徙鱼，這個(gè)最能幫助你。新手尤其適用针姿。
3.?Flat UI Color Picker：只需要平面 UI 設(shè)計(jì)工具時(shí)袱吆，它非常方便實(shí)用。
如果想在學(xué)習(xí)之路上少交點(diǎn)學(xué)費(fèi)距淫，你還可以看看這個(gè)绞绒，28 個(gè)顏色工具網(wǎng)站。
小結(jié)
沒人指望你成為米開朗琪羅榕暇，但是懂得最基本的顏色的使用是網(wǎng)頁(yè)設(shè)計(jì)的必備條件蓬衡。
就像我們剛才所說，顏色承載了很多不為人知的東西彤枢，無論選擇什么顏色都會(huì)對(duì)整個(gè)設(shè)計(jì)產(chǎn)生直接影響狰晚，也許是產(chǎn)生了對(duì)比或相似，也許是表達(dá)了一種情感缴啡。
視覺層級(jí)5秒測(cè)試
研究表明只需0.1秒用戶就能對(duì)你的網(wǎng)站形成大概的印象壁晒。為了吸引用戶，你的網(wǎng)站必須在顏色业栅、空間秒咐、對(duì)比等邏輯結(jié)構(gòu)方面在用戶面前快速形成一定的視覺層級(jí)谬晕。
讓我們來看一下將你的網(wǎng)站模糊之后，是否還能清晰地表意携取。
模糊測(cè)試
設(shè)計(jì)師Lee Munroe 說模糊測(cè)試就是將你的網(wǎng)站模糊化之后看還有什么元素是比較明顯的攒钳。
如果凸顯出來的元素并不是你想要強(qiáng)調(diào)的那么就需要重新設(shè)計(jì)了。從模糊的角度看你的網(wǎng)頁(yè)將會(huì)顯現(xiàn)網(wǎng)站的視覺層級(jí)的骨架歹茶，讓你從新的角度看待網(wǎng)頁(yè)的布局夕玩，實(shí)際操作時(shí)可以用ps將頁(yè)面截圖虛化5-10像素。
下圖就是虛化后的結(jié)果惊豺。
在上圖Wufoo的主頁(yè)中燎孟，注冊(cè)按鈕和產(chǎn)品特征仍然較為鮮明，較少的內(nèi)容在第二層級(jí)尸昧。點(diǎn)擊按鈕的顏色和背景形成對(duì)比較為顯眼揩页，而且較大的留白也將用戶的注意力集中在了產(chǎn)品特色方面。
其他方法
如果你不想虛化你的網(wǎng)站烹俗，你可以通過站在3英尺之外看你的屏幕也能達(dá)到虛化的效果爆侣。即使這種方法好像比較笨，但確實(shí)有效幢妄。
如果你設(shè)計(jì)的網(wǎng)站已經(jīng)上線了兔仰，你可以在Chorne中試一試這些方法。
1. 在Chrome 中打開開發(fā)者工具
2. 在body中添加 -webkit-filter：blur（5px）蕉鸳。虛化的像素可以自定乎赴，推薦在5-10像素之間。
3. 重復(fù)這個(gè)步驟
第一次進(jìn)行模糊測(cè)試后你可能會(huì)發(fā)現(xiàn)需要修改視覺層級(jí)
這時(shí)候潮尝，就像Lee Munroe建議的那樣你可能需要調(diào)整這些東西：
大小 ? ?對(duì)比 ? ?顏色 ? ?形狀 ? ?空格和邊距 ? ?方向和位置
當(dāng)你調(diào)整完之后再次進(jìn)行模糊測(cè)試榕吼，直到滿意為止。最后用ps或Chrome 將虛化值改為10像素看層級(jí)是否清晰勉失。
小結(jié)
一個(gè)好的設(shè)計(jì)師不僅要有創(chuàng)造力更需要對(duì)結(jié)構(gòu)羹蚣、顏色、大小等等細(xì)節(jié)做考慮乱凿，考慮什么可以展現(xiàn)出來以及更重要的什么不能展現(xiàn)出來顽素，這并不容易，所以我們才對(duì)像達(dá)芬奇梵高等藝術(shù)大師致以崇高的敬意徒蟆。
剛說的3種模糊測(cè)試方法將會(huì)保證頁(yè)面的所有元素傳達(dá)出同一種含義戈抄。研究指出視覺是我們?nèi)祟愖钪饕母杏X，所以要確保你的設(shè)計(jì)能夠傳達(dá)給用戶正確的第一印象后专。
我們希望這本書中的知識(shí)能夠在實(shí)際工作當(dāng)中幫到你划鸽，讓我們開始設(shè)計(jì)吧。
