毫無疑問網站的配色是非常重要的。創建一套具有凝聚力又能抓人眼球的色板是創建一個成功網站的先決條件。在技術發展的驅動之下，我們在網頁設計的時候可以更加精確地控制色彩，這也使得色板的精細打磨顯得更加必要和重要。今天這個網站配色完全學習指南，就是想更加系統地解決這個問題。

這篇指南的作者是Aleksandra Tamarina，發表于Thinkful網站，由優設編譯。

入門

在開始探索配色和色板創建之道之前，你首先要考慮一下你想做一個什么樣的網站，而創建這個網站的目的又是什么。

另一個需要考慮的重要因素是，你的網站是否擁有現成的品牌。如果你擁有現成的品牌那么就意味著你構建網站的時候，會使用到現成的品牌風格指南，這時候你有著現成的色板，你只需要根據需求適當地拓展出不同深淺、色度的衍生色。當然，更多的時候，你需要從無到有構建一個全新的色板，而這篇文章正是要幫你完成這項任務。

構建網站的“情感”

色彩與品牌有著千絲萬縷的聯系。不同于語言和文字，色彩為品牌提供了一種非口頭傳達的意義和信息。而色彩給人的感覺和所蘊含的含義主要來源于所處的文化和環境。在深入了解一個網站之前，用戶通常先注意到色彩，色彩所傳達出來的情緒會下意識地感染用戶，所以你可以利用這種原理來設計網站、優化品牌。

那么你需要向用戶傳遞什么樣的情感呢？你希望用戶怎樣和你的網站互動？這可能還得從品牌識別（BI）來考量（如果有的話），同時也可以讓網站成為品牌的延伸?；c時間仔細想想吧。

接下來，我們一同來探討一下，美國的文化背景下的大眾品牌中的色彩的含義。

色彩的含義

下面是一些常見色彩的含義：

?紅色：能量，力量，活力，領導地位，勇氣，激情，快樂，危險，邪惡，憤怒，血，高識別度；
?橙色：開朗，熱情，快樂，激情，魅力，創意，有趣，輕浮，華麗，粗魯，低端；
?黃色：樂觀，清新，法律，教育，傲慢，怯懦，疾病，背叛，幼稚；
?綠色：財富，金錢，平靜，樹木，野心，耐力，治愈，冷靜，打賭，自然，完備，保護，羨慕，嫉妒，不成熟；
?藍色：安全，守信，穩定，忠誠，智慧，信任，友愛，保鮮，勇氣，科學，悲傷，抑郁，冷漠，穩重；
?紫色：神奇，神秘，靈性，潛意識，創造力，尊嚴，皇室，悲哀，殘酷，自大，自負；
?黑色：強大，神秘，高貴，精致，功能性，死亡，病態，瘟疫，孤傲；

有些著名的品牌在色彩的情感傳達上非常突出，麥當勞就是其中的佼佼者：

麥當勞LOGO中，黃色的拱門能夠喚起用戶新鮮、快樂的情緒，黃色還能引起饑餓感。LOGO中的紅色所包含的活力感、愉悅和能量會促使用戶快速地離開，這樣也就促使餐廳中人流的快速流轉。作為快餐店，這樣的色彩搭配構成了麥當勞獨特的品牌情感傳達，和品牌故事。雖然麥當勞官網目前還沒有追隨設計潮流，尚需要一些設計上的提升，但是它的色彩非常簡明，并且專注于視頻領域的推廣和傳播。有意思的是，同LOGO相比，在網頁配色上相對降低了紅色所占據的比例，因為這家快餐巨頭想留住你來瀏覽，而非促使你離開。

不僅是麥當勞從這種配色方式中受益，許多同類的快餐店也使用了類似的配色，比如DairyQueen、BurgerKing、Wendy's、Sonic以及Pizza Hut。這種配色方案的本質就是吸引人來購買，然后敦促他們離開，以便能服務更多人。

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

綠色常常被賦予自然、環境和治愈等含義，而Whole Foods正是一個全天然有機食品品牌。這些有機食品和品牌與綠色完美的融合在一起，Wholefood.com 網站中使用了大量的綠色的元素和形象，喚起用戶對于自然的認同感，配合黑色和白色這種中性色來完成整個網站的設計，三種色彩在網站設計中達到了平衡點。

除了Whole foods之外，同類型的食品雜貨品牌Publix也使用了類似的配色方案來裝點網站。如果你熟悉這類食品雜貨品牌，你會發現這種綠色為主的配色應用得非常普遍，因為這種色彩使用可以呈現出品牌的自然和品質感。

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

使用多色彩的品牌通常都傳遞出創意、色彩和藝術性。雖然谷歌已經成長為一個龐大的科技企業，但是它依然保持著多年以前的那種創意、愉悅和自然。毫無疑問，谷歌掌控著搜索的藝術，谷歌搜索的主頁也一直是以實用為主要訴求。雖然使用了多種色彩，但是谷歌還是選擇藍色作為LOGO中的基礎色，這種選擇你可以在谷歌的鏈接和小LOGO上感受到。而LOGO中其他的色彩，主要是賦予整個LOGO以層次感和對比度。

類似的LOGO還有蘋果早期的品牌LOGO和奧林匹克的標識。當年蘋果所發布的G3系列的iMac和iBook所使用的多彩塑料材質正好呼應了這種多彩的設計，后續的iPod也延續了這些色彩使用。奧林匹克也是，豐富的色彩正好呼應了人類的活力和競爭的主題。

探索網站配色

接下來，你要開始寫下你的網站想要具備什么樣的個性，想傳達什么樣的感情。有了這些基礎的東西之后，你就可以根據這些含義來匹配顏色了?？纯茨切┮呀浲惖?、成型的品牌/網站所使用的配色吧，你再想想他們的品牌價值觀是怎樣的，他們的情感和色彩是如何結合到一起的，他們又是如何看待用戶的。接下來，我們先看看下面的幾個案例：

你想激發用戶信心？

作為一個大型品牌，Virgin 主要使用了紅色和白色來傳遞信心的感覺，其中的紅色傳遞出行動、能量和激情的感覺，讓品牌具備了力量感。

CNN也是如此，他們需要用戶和讀者來相信他們的新聞來源。所以CNN使用了紅色來表現他們的領導地位，以及激情、能量的感覺。

你想讓用戶感覺高端？

Burberry使用暗灰色來散發出神秘、高貴和精致的感覺。當用戶瀏覽Burberry的網站的時候，會覺得這個網站是有講究的，有品質的，形成信任感。

Groupon 使用了綠色和灰色來表現“節約資金”和“獨特”的特性。

你想被信任？

藍色能夠賦予用戶安全、可信和穩定感，這符合信用卡所應具備的所有特性。

作為社交網站，Facebook 極其需要用戶的信任，讓用戶能夠自如地發布關于他們生活的信息，所以Facebook選擇了藍色來傳遞出“信任”的感受。

當你寫下你的網站所需要的全部特性之后，你就需要選擇一個合適的色彩開始你的設計了。為了更深入的挖掘這些信息，你需要了解一些關于色彩的術語和知識。文章的下半部分，我將為你詳細講述這些內容。

用色彩來定義網站：

色彩中的朋克！
《25個驚人的黃色系網站設計欣賞》

色彩中的暖男！
《20個風格多樣的綠色系網站欣賞》

色彩中的雅痞！
《26個優雅的藍色網站設計欣賞》

原文地址：Thinkful
優設網譯者：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量86萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：