網(wǎng)站建設(shè)配色指南

　　本文分享一條教你怎樣避免在網(wǎng)頁設(shè)計中的第一次“試水”不要變得 “慘不忍睹”的安全配色指南。

　　1. 配色方案是畫布，不是畫

　　網(wǎng)頁設(shè)計中最基本的原則之一是，不管你花多長時間創(chuàng)造一個華麗的設(shè)計，其最終的角色都是這場秀中真正的明星——內(nèi)容的襯托。網(wǎng)頁設(shè)計中不應(yīng)該讓配色比內(nèi)容展示更加“熱鬧”。你的設(shè)計應(yīng)該是在后臺的，幫助將網(wǎng)站的內(nèi)容推向前臺。

　　用Photoshop或者Sketch等軟件設(shè)計網(wǎng)站的時候，創(chuàng)建設(shè)計的過程往往是相互獨立的。有些設(shè)計單個看起來很不錯，也能被你的客戶所接受，但是當(dāng)它真正被設(shè)計成網(wǎng)頁的時候，不適當(dāng)?shù)呐渖�往往會分散訪客的注意力。事實上，網(wǎng)頁設(shè)計過程與內(nèi)容是緊密聯(lián)系在一起的，但有許多高質(zhì)量的網(wǎng)站設(shè)計卻幾乎空無內(nèi)容。

　　這是一個好主意——將你希望出現(xiàn)在這個位置的內(nèi)容樣例在設(shè)計軟件里或直接在代碼里先擺放出來，然后圍繞它做設(shè)計。尤其是在與特定風(fēng)格的照片或圖像有關(guān)的時候，這樣你可以確保你的設(shè)計與它們搭配和諧。想象一下，你的網(wǎng)站內(nèi)容是一個獨特的個體，你必須為它設(shè)計一個完美的配件。

　　2. 從簡單的灰度模式開始

　　你可以為你的主背景和文本從無數(shù)的色彩組合中進行挑選。然而，我的建議是先掌握最簡單的，白色或淺灰色背景搭配深灰色的文本。

　　如果你觀察流行的網(wǎng)站所選擇的模板或主題，你會發(fā)現(xiàn)它們中的大多數(shù)都是使用深灰色的文字搭配白色或淺灰背景，這是有充分的理由的。這種組合你基本保證了為訪客提供可讀性，并允許基于內(nèi)容的文本和圖像進入前景。

　　一般來說，你應(yīng)該避免使用純黑的文本，深灰色相對來說更易閱讀。一個相對舒適的范圍是#333333至#666666。

　　基于上述，在任何文本主體下，最保險的背景色是全白#FFFFFF。對于其他的背景元素，背景色的范圍可以從#FFFFFF至#CCCCCC.

　　再次聲明，這些并不是你必須使用的顏色準(zhǔn)則，僅僅只是你可以開始安全設(shè)計的一些指南。

　　3. 只選擇一種強調(diào)色

　　配色方案出錯的最常見的地方就是顏色使用過多。你使用的顏色越多，你想要將它們都保持在控制中就越困難。所以一開始，在灰度基礎(chǔ)之上只添加一種額外的顏色來強調(diào)諸如鏈接、某些標(biāo)題、菜單、按鈕等等元素是很有用的。你的強調(diào)色可以是藍色、綠色、紅色或其它任何你喜歡的顏色。

　　開始在你的基礎(chǔ)圖上拉一個強調(diào)色的矩形框，這樣你可以衡量顏色是否與頁面上所有的元素匹配。然后打開顏色選擇器，選擇在顏色面板右上角四分之一中心位置的顏色。

　　上下移動滑塊，選擇一個你認(rèn)為適合你設(shè)計的顏色。

　　至此，你已經(jīng)使用了三種基本顏色：你的背景色，文本色，以及一種強調(diào)色。將來你可以，也應(yīng)該使用多個強調(diào)色，但是現(xiàn)在最好只是想一想。如今你已經(jīng)使用三種顏色了，請熟悉這三種顏色，當(dāng)你更自信的時候，你可以添加更多的顏色。

　　你已經(jīng)學(xué)會了：

　　你學(xué)會了怎樣選擇“色相”。簡而言之，色相就是一種基本色。當(dāng)你上下移動滑塊的時候你就會看到你的顏色選擇器中的“H”值在不斷變化。

　　“H”代表色相，一旦你選擇強調(diào)色，文本框中數(shù)值就是色相的值。

　　4. 如果有疑問，使用藍色

　　如果你對選擇什么強調(diào)色有任何疑問，請使用藍色。藍色通常是最靈活的顏色，適合多數(shù)的網(wǎng)站類型。紫色和黃色的顏色可以是很活潑的，但是如果使用不當(dāng)?shù)脑挘瑫�變得很花哨�?/p>

　　另一方面，你可以在以藍色為強調(diào)色的基礎(chǔ)上隨意發(fā)揮，但你也不能走的太遠。如果你不知道從哪里開始學(xué)習(xí)或者在項目中使用什么顏色的時候，就用藍色就對了。如果你要選擇特別的藍色，你可以選擇深藍色（H值235）至淺綠色（H值190）的范圍以保證自己在安全的領(lǐng)地。

　　5. 為強調(diào)色添加變化

　　一旦你選定了強調(diào)色，將色相（H）滑條位置保持不變。你現(xiàn)在需要為你的設(shè)計添加額外的顏色，不過為了讓事情變得更簡單，這些顏色都是你已經(jīng)選擇的強調(diào)色的變色。

　　在顏色選擇器上強調(diào)色周圍拖動選色點來創(chuàng)建變色。

　　6. 避開調(diào)色面板右上角的位置

　　顏色選擇器上右上角的位置是高純度的顏色。右上角的顏色像一級方程式賽車，它們的執(zhí)行力驚人，并且非常吸引人，但是我們一般需要足夠的經(jīng)驗才能很好地駕馭它們。如果沒有經(jīng)驗的話，它們可能會造成事故，所以最好去嘗試使用更緩和的顏色。

　　這就是為什么我在本教程的第三節(jié)讓你選擇右上角四分之一中心位置的顏色，以確保以一種相對柔和的顏色開始。