網(wǎng)頁(yè)設計中的安全配色指南

 　　網(wǎng)頁(yè)設計中最基本的原則之一是，不管你花多長(cháng)時(shí)間創(chuàng )造一個(gè)華麗的設計，其最終的角色都是這場(chǎng)秀中真正的明星——內容的襯托。 我仍然清楚地記得我最早的一次美術(shù)課，那時(shí)我還是一個(gè)小小的、對凡事都充滿(mǎn)渴望的孩子，我擺放出一大堆漂亮的彩色顏料。我仍然記得當我第一次看到原色與另一種顏色混合變成第二種顏色時(shí)的那種興奮，并且我想，既然兩種顏色能創(chuàng )造出一種全新的美麗色彩，那所有顏色在一起肯定會(huì )更棒!最終，我非常失望的發(fā)現，不論我怎樣混合它，只要我按照我自己的想法使用所有的顏色最終只能得到一種糟糕的顏色，只能用“慘不忍睹”來(lái)形容!

　　多年以后，當我還是一個(gè)羽翼未豐的網(wǎng)頁(yè)設計師的時(shí)候，我又經(jīng)歷了相同的過(guò)程。在學(xué)習的過(guò)程中，我不可避免地掉進(jìn)了這樣的陷阱——使用太多種顏色，或者是將多種顏色以一種錯誤的方式進(jìn)行組合，最終都使結果有一點(diǎn)“慘不忍睹”。

　　我開(kāi)始努力學(xué)習如何創(chuàng )建網(wǎng)頁(yè)的配色方案，同時(shí)我發(fā)現了許多極好的關(guān)于色彩理論的知識。我讀了色相(Hue)、色彩(Tint)、色度(Shade)、色調(Tone)、飽和度(Saturation)和明度(Brightness)，還有類(lèi)比色、單色、三元色、互補色以及混合色配色方案。

　　然而，沒(méi)有一個(gè)實(shí)際操作的框架去應用這些信息，我發(fā)現起初的時(shí)候，這些色彩理論并沒(méi)有幫助我更好的進(jìn)行網(wǎng)站配色設計。事實(shí)上，直到我通過(guò)反復試驗來(lái)開(kāi)始創(chuàng )建可靠的配色方案時(shí)，我所看過(guò)的所有色彩理論才開(kāi)始變得有意義。

　　在這個(gè)過(guò)程中，我撿起一些我最開(kāi)始就希望知道的網(wǎng)站配色“安全指南”。最開(kāi)始的時(shí)候，全部的色彩理論不一定是你需要的。通常在學(xué)習實(shí)踐的過(guò)程中你需要像“滾雪球”一樣，一點(diǎn)一點(diǎn)添加理論知識。

　　在本教程中，我將與你分享六條心得。你可以遵循“不會(huì )錯”指南基本掌握色彩在網(wǎng)頁(yè)設計中的運用。這些不是規則，你可以在你的職業(yè)生涯中創(chuàng )建更多的配色方案，使它往完全不同的方向發(fā)展。相反，這只是一個(gè)起點(diǎn)，一條教你怎樣避免在網(wǎng)頁(yè)設計中的第一次“試水”不要變得 “慘不忍睹”的安全指南。

　　1. 配色方案是畫(huà)布，不是畫(huà)

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

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

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

　　2. 從簡(jiǎn)單的灰度模式開(kāi)始

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

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

　　利用一些示例內容制定一個(gè)基本的灰度布局，例如：

　　一般來(lái)說(shuō)，你應該避免使用純黑的文本，深灰色相對來(lái)說(shuō)更易閱讀。一個(gè)相對舒適的范圍是#333333至#666666。

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

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

　　3. 只選擇一種強調色

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

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

　　上下移動(dòng)滑塊，選擇一個(gè)你認為適合你設計的顏色。

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

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

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

　　“H”代表色相，一旦你選擇強調色，文本框中數值就是色相的值。

　　4. 如果有疑問(wèn)，使用藍色

　　如果你對選擇什么強調色有任何疑問(wèn)，請使用藍色。藍色通常是最靈活的顏色，適合多數的網(wǎng)站類(lèi)型。紫色和黃色之類(lèi)的顏色可以是很活潑的，但是如果使用不當的話(huà)，立馬會(huì )變得很花哨。

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

　　在我的布局示例中，我選擇值為205的色相。當你已經(jīng)選定了強調色，將它添加到任何你認為必需的位置。假如你在按鈕或任何其他有文字的區域使用了強調色，也要相應地改變文本的顏色。在這個(gè)例子中，我將強調色區域之上的文字改成了白色。