網(wǎng)站的顏色方案：50視覺沖擊力的網(wǎng)站的調(diào)色板激勵(lì)你

你知道嗎，現(xiàn)在大多數(shù)網(wǎng)站是藍(lán)色的，因?yàn)槿祟愑屑t綠色盲。

“藍(lán)色是我富有的顏色; 我可以看到所有的藍(lán)色“扎克伯格說。雖然這種顏色的選擇似乎并不很科學(xué)，但它仍然證明了很多心思投入顏色的選擇。

作為緩沖寫道，我們的產(chǎn)品的評(píng)估，超過90％是在顏色單獨(dú)做，所以它使色彩應(yīng)謹(jǐn)慎考慮每個(gè)設(shè)計(jì)決定的，特別是在網(wǎng)站上的感覺。機(jī)會(huì)是，如果我們不喜歡的調(diào)色板，我們不打算留在網(wǎng)站上很長(zhǎng)時(shí)間。

為了讓您對(duì)自己的調(diào)色板開始，我們搜集了50，你可以從靈感多才多藝的配色方案美觀的網(wǎng)站。因此，事不宜遲，讓我們沒膝深的一些靚麗的色彩。

簡(jiǎn)介色彩理論的網(wǎng)頁(yè)設(shè)計(jì)師

今天我們要學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)色彩的重要性以及如何選擇一個(gè)令人愉悅的色彩方案。本文是我們的BASIX系列，其目的是在那些具有小設(shè)計(jì)經(jīng)驗(yàn)提供的設(shè)計(jì)原則的實(shí)際和簡(jiǎn)明解釋的一部分。

在我們開始之前，通過我們來看看  網(wǎng)頁(yè)模板，如果您需要為您的下一個(gè)項(xiàng)目一個(gè)親的主題。還有一些網(wǎng)站的顏色主題很好的例子也是如此。 

現(xiàn)在，讓我們開始本教程。

誰(shuí)這篇文章是寫為：

本文是為那些剛剛開始學(xué)習(xí)正規(guī)的設(shè)計(jì)原則的人寫。這并不意味著是怎樣的色彩運(yùn)用到設(shè)計(jì)中（我們有充裕那些在未來的）進(jìn)行全面的研究，而是它是為那些尋找實(shí)用的建議，這將有助于他們的總體統(tǒng)計(jì)法色彩理論中一個(gè)網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目的范圍內(nèi)。

我寫這篇文章，因?yàn)槲乙恢庇X得很難上一個(gè)項(xiàng)目運(yùn)行良好配色方案作出決定; 這可能是我必須做，作為一個(gè)設(shè)計(jì)師艱難的決定之一。然而，通過學(xué)習(xí)色彩理論和一些優(yōu)秀的工具的基礎(chǔ)知識(shí)在網(wǎng)絡(luò)上可用，我已經(jīng)能夠加強(qiáng)我的設(shè)計(jì)和考慮這一弱點(diǎn)。

對(duì)于目標(biāo)受眾的幾個(gè)候選人：

尋找咨詢程序員，幫助他們創(chuàng)建一個(gè)具有視覺吸引力的原型。

一個(gè)有抱負(fù)的設(shè)計(jì)師誰(shuí)愿意主題的簡(jiǎn)要概述

人誰(shuí)不明白Web開發(fā)和網(wǎng)頁(yè)設(shè)計(jì)之間的差異。

簡(jiǎn)而言之，什么是色彩理論？

色彩理論實(shí)際上涵蓋了一些事情，但在基本的層面上它的顏色通過互補(bǔ)，對(duì)比度和活力設(shè)計(jì)的互動(dòng)。

的顏色在通過互補(bǔ)，對(duì)比度和活力一個(gè)設(shè)計(jì)的相互作用。

雖然這個(gè)定義的第一部分是簡(jiǎn)單的（誠(chéng)然平淡），它是后3條款，定義基本色彩理論：

互補(bǔ)

互補(bǔ)是指，我們看到他們與其他顏色相互關(guān)系方面顏色的方式。當(dāng)顏色占據(jù)了彩色光譜的兩端，它們會(huì)導(dǎo)致人們考慮的設(shè)計(jì)在視覺上建立一個(gè)折中的眼睛可以駐留在吸引人的。而不是使勁以適應(yīng)彩色光譜的特定區(qū)域，映入眼簾的是提供了一個(gè)平衡。有互補(bǔ)的兩種常見用法：我們將在后面討論三元復(fù)合和配色方案。互補(bǔ)可以帶你到設(shè)計(jì)精巧的新高度時(shí)，你可以開始掌握色彩組合的復(fù)雜性。

對(duì)比

對(duì)比度降低眼睛疲勞，并在頁(yè)面上清晰地分割件重點(diǎn)用戶的關(guān)注。對(duì)比度的明顯的例子是背景和文本顏色的有效的選擇，如下所示：

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師色彩理論

如果您有疑問是有史以來好的做法通常是選擇一個(gè)很淡的顏色為背景，和一個(gè)非常黑暗的顏色文本本身。這是一個(gè)領(lǐng)域，色彩理論是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)的可用性至關(guān)重要; 在大多數(shù)項(xiàng)目中，大文本區(qū)域，不要試圖成為真正的創(chuàng)意的地方 - 所以保持它的簡(jiǎn)單和清晰。

隨著建立可讀的文本，對(duì)比度也可以吸引觀眾的注意力轉(zhuǎn)向一個(gè)頁(yè)面的特定元素。想想突出的教科書：當(dāng)你想提請(qǐng)你注意頁(yè)面的特定部分，可以使周邊地區(qū)看起來比文本的其余部分不同。同樣的原則也適用于網(wǎng)頁(yè)設(shè)計(jì)：采用各種對(duì)比色可以幫助集中觀眾的注意力集中在特定的頁(yè)面元素。

如果你的網(wǎng)站有一個(gè)黑暗的背景，注重的主要內(nèi)容用打火機(jī)的顏色。

這一原則也適用于類似的顏色（我們將在后面討論）：

活力

不健全的愚蠢，但活力決定了你的設(shè)計(jì)的情感。明亮的顏色會(huì)導(dǎo)致用戶的感覺，你的設(shè)計(jì)，當(dāng)你試圖做廣告的產(chǎn)品或援引的情緒反應(yīng)是特別有效的結(jié)果更有活力。暗色調(diào)放松的用戶，讓他們的頭腦集中于其他事情。這方面的一個(gè)很好的例子是CNN和Ars Technica的之間的比較：

CNN的網(wǎng)站功能在頂部，因?yàn)樗鼈兪怯稍O(shè)計(jì)的活力（之間的網(wǎng)站的紅，白，黑 - 和主要的配色方案對(duì)比）刺激導(dǎo)致情緒加劇用戶的一個(gè)鮮明的紅色橫幅。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師色彩理論

Ars Technica的用于其背景和頭部放松對(duì)用戶和集中他們的注意力轉(zhuǎn)向其內(nèi)容較暗的顏色方案。通過這樣做，其技術(shù)和詳細(xì)書面被認(rèn)為是該網(wǎng)站的前沿。而更重要的是，允許用戶轉(zhuǎn)移精力傳統(tǒng)上為應(yīng)對(duì)鮮艷的色彩來理解文章的內(nèi)容。

我該如何選擇有效的配色方案？

這里有一個(gè)很好的配色方案普遍接受的結(jié)構(gòu)3：三元，化合物和類似：

三元配色方案

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師色彩理論

的3種顏色的顏色光譜的單獨(dú)端部組成。有一個(gè)很簡(jiǎn)單的方法來創(chuàng)建一個(gè)三元配色方案：

以色輪，并選擇您的基色。

從這個(gè)角度繪制一個(gè)等邊三角形。

三角形的三個(gè)點(diǎn)會(huì)形成你的三色方案。

通過利用正三角形，可以保證顏色有平等的活力和互相恭維正常。

復(fù)合顏色方案（又名斯普利特免費(fèi)）

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師色彩理論

該化合物顏色方案是基于提供一系列互補(bǔ)色的：兩種顏色從顏色光譜的相對(duì)端選擇。通過這樣做，設(shè)計(jì)者在設(shè)計(jì)允許的更多的自由，同時(shí)也從互補(bǔ)色的視覺吸引力獲益。

類似

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師色彩理論

一個(gè)類似的顏色方案是基于顏色的色彩頻譜的相同面積的仔細(xì)選擇。一般的顏色是由他們的活力，并且它們的對(duì)比度相互比較時(shí)區(qū)分。

一個(gè)類似的顏色方案的兩個(gè)例子是：

色調(diào)黃色和橙色

單色選擇（基色的灰度）

只是開始...

我們是在歷史上凡美現(xiàn)在的問題是，我們可以從科學(xué)和藝術(shù)色彩理論家百年受益。有跡象表明，已經(jīng)有許多關(guān)于色彩理論的細(xì)節(jié)整個(gè)卷，所以我會(huì)鼓勵(lì)那些你們誰(shuí)真的想深挖主題找到可供利用一些更深層次的概念眾多學(xué)術(shù)著作之一。我們也將在今后這里Webdesigntuts + :)發(fā)布的“色彩理論的網(wǎng)頁(yè)設(shè)計(jì)師”更深層次的文章。

現(xiàn)在，讓棗莊來看看，你可以用它來嘗試一些自己的偉大的工具：

如何使您的生活更輕松

值得慶幸的是，目前在我們所掌握的一些工具，使顏色選擇非常容易當(dāng)正確使用。重要的是，他們將進(jìn)一步推動(dòng)我們的色彩理論的理解。

通過在引導(dǎo)環(huán)境試驗(yàn)，我們能夠?qū)W習(xí)如何不成為沮喪，當(dāng)事情沒有完美的工作應(yīng)用這些原則。想想這些工具作為一種“色彩理論安全網(wǎng)”，幫助你探索自己的創(chuàng)造力而沒有需要從為令人愉悅的色彩組合建立的規(guī)則遠(yuǎn)遠(yuǎn)偏離。

的

對(duì)于棗莊網(wǎng)頁(yè)設(shè)計(jì)師色彩理論

由Adobe開發(fā)了一個(gè)工具的目的是提供一種直觀的方式來創(chuàng)建一個(gè)調(diào)色板。調(diào)色板上的每一種顏色都可以單獨(dú)修改，或者選擇作為基色，用幾個(gè)簡(jiǎn)單的點(diǎn)擊。調(diào)色板可以保存和出版，并有在其網(wǎng)站上提供了一些偉大的社會(huì)條目。下的每個(gè)顏色，提供了出口代碼（包括十六進(jìn)制）。然而，該接口可以在次麻煩，調(diào)整特定色彩的活力可以改變整個(gè)調(diào)色板（我希望他們有一個(gè)“鎖定”功能，阻止轉(zhuǎn)移其他顏色）�？偟膩碚f，我會(huì)推薦這個(gè)工具對(duì)于那些有概念和耐心，一個(gè)體面的把握時(shí)，事情并不那么順利，因?yàn)樗麄儗⑾Ｍ�運(yùn)行。

顏色方案設(shè)計(jì)3  

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師色彩理論

此工具正在迅速成為絕對(duì)的初學(xué)者，那些沒有耐心，或者在后期限的人我的首選。通過提供一個(gè)非常簡(jiǎn)單的和可控選擇器，配色方案設(shè)計(jì)提供了入門的一個(gè)非常低的障礙，而且其選擇的顏色原則提出了多種選擇。雖然它不教它的用戶，為什么顏色很好地協(xié)同工作（的Kuler的動(dòng)態(tài)色輪是在這方面更有效），其結(jié)果是作為一個(gè)偉大的起點(diǎn)或完成的原型。

其更高級(jí)的選項(xiàng)是非常有用的：功能，比如調(diào)節(jié)整個(gè)調(diào)色板的飽和度和對(duì)比度，色盲覆蓋和樣品網(wǎng)站預(yù)覽的能力，有些事情我希望的Kuler很快實(shí)現(xiàn)。不過，我覺得這個(gè)工具不應(yīng)該是那些誰(shuí)想要了解色彩理論 - 因?yàn)樗�太大了用戶的工作，并沒有讓他們同時(shí)保持每種顏色原則的基礎(chǔ)直觀實(shí)驗(yàn)中使用的主要工具。

是的，有很多很多的其他網(wǎng)站，你可以找到偉大的配色方案......棗莊需要實(shí)際高達(dá)四舍五入這些網(wǎng)站，并在不久的將來，分析它們（搜索網(wǎng)站為我們的資源搜捕出來時(shí)） 。

案例分析：玩家與喬布斯

為了完成這篇文章，讓我們來看看使用一些我們所討論的原則網(wǎng)站。與喬布斯玩家是致力于電子游戲更高的分析，通過其功能，播客，論壇和網(wǎng)站。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師色彩理論

灰色的頁(yè)面背景與白色背景的內(nèi)容重點(diǎn)用戶的注意力轉(zhuǎn)向該網(wǎng)站的中心。

在頁(yè)面的暗桿（通常為廣告預(yù)留）“幀”用戶的視圖到內(nèi)容。

使用橙紅色標(biāo)頭中的吸引用戶的類別，功能標(biāo)題，和該網(wǎng)站的各個(gè)方面。

中性色彩方案提供了足夠的視覺刺激，以保持觀眾的興趣，又能讓他們足夠的精神自由，享受網(wǎng)站的內(nèi)容。

閉幕詞全文及摘要

之一的顏色的工作中困難的方面是，有時(shí)當(dāng)顏色尚未布置在設(shè)計(jì)中，它們不會(huì)出現(xiàn)很好地協(xié)同工作。然而，一旦他們應(yīng)用，其視覺上的和諧通常會(huì)變得明顯。我已經(jīng)調(diào)整其應(yīng)用到設(shè)計(jì)之前的Kuler選擇的顏色造成自己的挫折相當(dāng)數(shù)量的，才發(fā)現(xiàn)顏色方案被修改剛好是沒有吸引力。

信托的理論！應(yīng)用通過彩色原則選擇的顏色，然后根據(jù)需要進(jìn)行調(diào)整。這樣做會(huì)為你節(jié)省大量的時(shí)間，并加強(qiáng)你的設(shè)計(jì)技能，你將開始看到更多的精致，美觀，甚至科學(xué)的方法顏色！

概要

在光譜的相對(duì)端選擇顏色創(chuàng)建為眼睛視覺和聲。

元素之間的高對(duì)比度使文字易于閱讀，并引導(dǎo)讀者的注意力。

顏色越亮，越精神能量，他們將消耗。

不要害怕使用工具如的和配色方案設(shè)計(jì)師3名，他們只讓你的生活更輕松，防止您的學(xué)習(xí)過程變得沮喪。

感謝您閱讀我的第一篇文章，我不得不寫它一噸的樂趣。請(qǐng)?jiān)谠u(píng)論部分的一些反饋，如果你覺得這樣的傾向，我想使這些條款盡可能有用。

哦! 如果你渴望了解更多，請(qǐng)查看另一個(gè)偉大的理論為基礎(chǔ)的文章，涉及到我們剛才談到：“ 在網(wǎng)頁(yè)設(shè)計(jì)理解的視覺層次”。

如果您需要為您的下一個(gè)項(xiàng)目一個(gè)親的主題，然后通過我們的瀏覽  網(wǎng)頁(yè)模板。有很多偉大的網(wǎng)站主題色的例子來解構(gòu)上為好�；蚱刚�(qǐng)?jiān)O(shè)計(jì)師的工作室

上篇文章：開發(fā)語(yǔ)言asp、php、jsp三種技術(shù)比較
下篇文章：選擇一個(gè)網(wǎng)站制作