Thinkful網(wǎng)站配色完全學(xué)習(xí)指南

2014-11-14    藍(lán)藍(lán)設(shè)計(jì)的小編

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

thinkful-color-theory-basics-1-1

毫無(wú)疑問(wèn)網(wǎng)站的配色是非常重要的。創(chuàng)建一套具有凝聚力又能抓人眼球的色板是創(chuàng)建一個(gè)成功網(wǎng)站的先決條件。在技術(shù)發(fā)展的驅(qū)動(dòng)之下,我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)的時(shí)候可以更加地控制色彩,這也使得色板的精細(xì)打磨顯得更加必要和重要。今天這個(gè)網(wǎng)站配色完全學(xué)習(xí)指南,就是想更加系統(tǒng)地解決這個(gè)問(wèn)題。

這篇指南的作者是Aleksandra Tamarina,發(fā)表于Thinkful網(wǎng)站,由優(yōu)設(shè)編譯。

入門

在開(kāi)始探索配色和色板創(chuàng)建之道之前,你首先要考慮一下你想做一個(gè)什么樣的網(wǎng)站,而創(chuàng)建這個(gè)網(wǎng)站的目的又是什么。

另一個(gè)需要考慮的重要因素是,你的網(wǎng)站是否擁有現(xiàn)成的品牌。如果你擁有現(xiàn)成的品牌那么就意味著你構(gòu)建網(wǎng)站的時(shí)候,會(huì)使用到現(xiàn)成的品牌風(fēng)格指南,這時(shí)候你有著現(xiàn)成的色板,你只需要根據(jù)需求適當(dāng)?shù)赝卣钩霾煌顪\、色度的衍生色。當(dāng)然,更多的時(shí)候,你需要從無(wú)到有構(gòu)建一個(gè)全新的色板,而這篇文章正是要幫你完成這項(xiàng)任務(wù)。

構(gòu)建網(wǎng)站的“情感”

色彩與品牌有著千絲萬(wàn)縷的聯(lián)系。不同于語(yǔ)言和文字,色彩為品牌提供了一種非口頭傳達(dá)的意義和信息。而色彩給人的感覺(jué)和所蘊(yùn)含的含義主要來(lái)源于所處的文化和環(huán)境。在深入了解一個(gè)網(wǎng)站之前,用戶通常先注意到色彩,色彩所傳達(dá)出來(lái)的情緒會(huì)下意識(shí)地感染用戶,所以你可以利用這種原理來(lái)設(shè)計(jì)網(wǎng)站、優(yōu)化品牌。

那么你需要向用戶傳遞什么樣的情感呢?你希望用戶怎樣和你的網(wǎng)站互動(dòng)?這可能還得從品牌識(shí)別(BI)來(lái)考量(如果有的話),同時(shí)也可以讓網(wǎng)站成為品牌的延伸?;c(diǎn)時(shí)間仔細(xì)想想吧。

接下來(lái),我們一同來(lái)探討一下,美國(guó)的文化背景下的大眾品牌中的色彩的含義。

色彩的含義

下面是一些常見(jiàn)色彩的含義:

?紅色:能量,力量,活力,領(lǐng)導(dǎo)地位,勇氣,激情,快樂(lè),危險(xiǎn),邪惡,憤怒,血,高識(shí)別度;

?橙色:開(kāi)朗,熱情,快樂(lè),激情,魅力,創(chuàng)意,有趣,輕浮,華麗,粗魯,低端;

?黃色:樂(lè)觀,清新,法律,教育,傲慢,怯懦,疾病,背叛,幼稚;

?綠色:財(cái)富,金錢,平靜,樹(shù)木,野心,耐力,治愈,冷靜,打賭,自然,完備,保護(hù),羨慕,嫉妒,不成熟;

?藍(lán)色:安全,守信,穩(wěn)定,忠誠(chéng),智慧,信任,友愛(ài),保鮮,勇氣,科學(xué),悲傷,抑郁,冷漠,穩(wěn)重;

?紫色:神奇,神秘,靈性,潛意識(shí),創(chuàng)造力,尊嚴(yán),皇室,悲哀,殘酷,自大,自負(fù);

?黑色:強(qiáng)大,神秘,高貴,精致,功能性,死亡,病態(tài),瘟疫,孤傲;

有些著名的品牌在色彩的情感傳達(dá)上非常突出,麥當(dāng)勞就是其中的佼佼者:

麥當(dāng)勞LOGO中,黃色的拱門能夠喚起用戶新鮮、快樂(lè)的情緒,黃色還能引起饑餓感。LOGO中的紅色所包含的活力感、愉悅和能量會(huì)促使用戶快速地離開(kāi),這樣也就促使餐廳中人流的快速流轉(zhuǎn)。作為快餐店,這樣的色彩搭配構(gòu)成了麥當(dāng)勞獨(dú)特的品牌情感傳達(dá),和品牌故事。雖然麥當(dāng)勞官網(wǎng)目前還沒(méi)有追隨設(shè)計(jì)潮流,尚需要一些設(shè)計(jì)上的提升,但是它的色彩非常簡(jiǎn)明,并且專注于視頻領(lǐng)域的推廣和傳播。有意思的是,同LOGO相比,在 網(wǎng)頁(yè)配色 上相對(duì)降低了紅色所占據(jù)的比例,因?yàn)檫@家快餐巨頭想留住你來(lái)瀏覽,而非促使你離開(kāi)。

不僅是麥當(dāng)勞從這種配色方式中受益,許多同類的快餐店也使用了類似的配色,比如DairyQueen、BurgerKing、Wendy’s、Sonic以及Pizza Hut。這種配色方案的本質(zhì)就是吸引人來(lái)購(gòu)買,然后敦促他們離開(kāi),以便能服務(wù)更多人。

另外一個(gè)品牌配色的好案例就是Whole Foods了。

綠色常常被賦予自然、環(huán)境和治愈等含義,而Whole Foods正是一個(gè)全天然有機(jī)食品品牌。這些有機(jī)食品和品牌與綠色完美的融合在一起,Wholefood.com 網(wǎng)站中使用了大量的綠色的元素和形象,喚起用戶對(duì)于自然的認(rèn)同感,配合黑色和白色這種中性色來(lái)完成整個(gè)網(wǎng)站的設(shè)計(jì),三種色彩在網(wǎng)站設(shè)計(jì)中達(dá)到了平衡點(diǎn)。

除了Whole foods之外,同類型的食品雜貨品牌Publix也使用了類似的配色方案來(lái)裝點(diǎn)網(wǎng)站。如果你熟悉這類食品雜貨品牌,你會(huì)發(fā)現(xiàn)這種綠色為主的配色應(yīng)用得非常普遍,因?yàn)檫@種色彩使用可以呈現(xiàn)出品牌的自然和品質(zhì)感。

谷歌是一個(gè)典型的多色彩使用的品牌。

使用多色彩的品牌通常都傳遞出創(chuàng)意、色彩和藝術(shù)性。雖然谷歌已經(jīng)成長(zhǎng)為一個(gè)龐大的科技企業(yè),但是它依然保持著多年以前的那種創(chuàng)意、愉悅和自然。毫無(wú)疑問(wèn),谷歌掌控著搜索的藝術(shù),谷歌搜索的主頁(yè)也一直是以實(shí)用為主要訴求。雖然使用了多種色彩,但是谷歌還是選擇藍(lán)色作為L(zhǎng)OGO中的基礎(chǔ)色,這種選擇你可以在谷歌的鏈接和小LOGO上感受到。而LOGO中其他的色彩,主要是賦予整個(gè)LOGO以層次感和對(duì)比度。

類似的LOGO還有蘋(píng)果早期的品牌LOGO和奧林匹克的標(biāo)識(shí)。當(dāng)年蘋(píng)果所發(fā)布的G3系列的iMac和iBook所使用的多彩塑料材質(zhì)正好呼應(yīng)了這種多彩的設(shè)計(jì),后續(xù)的iPod也延續(xù)了這些色彩使用。奧林匹克也是,豐富的色彩正好呼應(yīng)了人類的活力和競(jìng)爭(zhēng)的主題。

探索網(wǎng)站配色

接下來(lái),你要開(kāi)始寫(xiě)下你的網(wǎng)站想要具備什么樣的個(gè)性,想傳達(dá)什么樣的感情。有了這些基礎(chǔ)的東西之后,你就可以根據(jù)這些含義來(lái)匹配顏色了。看看那些已經(jīng)同類的、成型的品牌/網(wǎng)站所使用的配色吧,你再想想他們的品牌價(jià)值觀是怎樣的,他們的情感和色彩是如何結(jié)合到一起的,他們又是如何看待用戶的。接下來(lái),我們先看看下面的幾個(gè)案例:

你想激發(fā)用戶信心?

作為一個(gè)大型品牌,Virgin 主要使用了紅色和白色來(lái)傳遞信心的感覺(jué),其中的紅色傳遞出行動(dòng)、能量和激情的感覺(jué),讓品牌具備了力量感。

CNN也是如此,他們需要用戶和讀者來(lái)相信他們的新聞來(lái)源。所以CNN使用了紅色來(lái)表現(xiàn)他們的領(lǐng)導(dǎo)地位,以及激情、能量的感覺(jué)。

你想讓用戶感覺(jué)高端?

Burberry使用暗灰色來(lái)散發(fā)出神秘、高貴和精致的感覺(jué)。當(dāng)用戶瀏覽Burberry的網(wǎng)站的時(shí)候,會(huì)覺(jué)得這個(gè)網(wǎng)站是有講究的,有品質(zhì)的,形成信任感。

Groupon 使用了綠色和灰色來(lái)表現(xiàn)“節(jié)約資金”和“獨(dú)特”的特性。

你想被信任?

藍(lán)色能夠賦予用戶安全、可信和穩(wěn)定感,這符合信用卡所應(yīng)具備的所有特性。

作為社交網(wǎng)站,F(xiàn)acebook 極其需要用戶的信任,讓用戶能夠自如地發(fā)布關(guān)于他們生活的信息,所以Facebook選擇了藍(lán)色來(lái)傳遞出“信任”的感受。

當(dāng)你寫(xiě)下你的網(wǎng)站所需要的全部特性之后,你就需要選擇一個(gè)合適的色彩開(kāi)始你的設(shè)計(jì)了。為了更深入的挖掘這些信息,你需要了解一些關(guān)于色彩的術(shù)語(yǔ)和知識(shí)。文章的下半部分,我將為你詳細(xì)講述這些內(nèi)容。

日歷

鏈接

個(gè)人資料

存檔