2014-10-27 藍藍設計的小編
我依然清楚地記得老師把一些色彩明亮的繪畫放在幼小而充滿好奇的我面前的情景，那是我生命中的第一堂色彩課。我依然能回憶起，當我第一次把一種“主色”與一種“二級色”混合在一起時，自己有多么開心。我天真地猜測，如果兩種不同的顏色混合時便可以得到另一種鮮艷的新色彩，那么把所有的色彩都混合在一起，產(chǎn)生的色彩豈不是更漂亮嗎！但是當我把我所有能用上的色彩都混雜在一塊的時候，我卻失望地發(fā)現(xiàn)，無論我如何努力，我能看到的只是一團被我叫做“大亂燉”的模糊色塊。
多年以后,作為一個剛剛入行的設計師，我又經(jīng)歷了一次同樣的事。對一切都充滿渴求的我似乎又不可避免地掉入了一個陷阱，一個“用色過多”或“胡亂配色”的陷阱，其結果，像童年時一樣，我得到的只是一鍋“大亂燉”。
從那時候起，我便開始有意識地學習與網(wǎng)頁設計相關的配色知識，我也了解到了許多有趣的色彩理論常識。我認真地讀了對色彩，色調，陰影，強度，飽和度，亮度等一系列概念的介紹，對近似色，單相色，三角型配色，互補型配色和綜合配色技巧也都做了一番研究。
RGB基本配色圖
但在最開始，由于沒有實踐做基礎，這些純理論的東西對我做網(wǎng)頁設計并沒有提供太大幫助。直到后來我自己親自嘗試為網(wǎng)頁選擇配色方案時，從一步步的教訓和經(jīng)驗中，我才逐漸真正理解了我所學習的那些色彩理論知識。
在這個過程中，我總結出6條網(wǎng)頁配色的“安全守則”，如果時光能倒流，我真希望自己一開始就懂得這些準則。對于設計新手而言，一套完整的色彩理論知識可能并不是他們最需要的。一些更具體，指導性更強的“原則”或許比單純的理論探討更有實際意義。
你可以把我在這篇文章中分享的這6條“安全守則”作為理解網(wǎng)頁配色的基礎材料。它們并非什么至高原則，因為在你自己的設計生涯中，你獲得的配色經(jīng)驗也許會與我的完全不同。相反,它們只是一個起點,一些教你如何在投身設計行業(yè)的初始階段成功地生存下來，而不致于讓自己的配色淪為“大亂燉”的經(jīng)驗之談。
網(wǎng)頁設計中最為重要的一條原則便是：無論一個設計本身如何巧妙，耗費了你多少心血與心思，它的終極目的依然只是作為陪襯來抬高真正的主角--內容。因此你的網(wǎng)頁設計不應該比要呈現(xiàn)的內容本身還要“搶眼”。設計應立足于背景之中，其功能是彰顯網(wǎng)站前景中的內容。
巧妙的配色會將用戶的視線引向網(wǎng)頁中的圖像
而粗糙的配色則會將用戶的注意力從內容中引開---別把這番話當戲言,在充滿荒唐的網(wǎng)絡時代，真實的情況就是如此。
在網(wǎng)頁設計中，很多設計師都習慣于將設計同內容分離看待，他們的設計都是在Photoshop或Sketch中單獨完成的。如果在做網(wǎng)站設計時絲毫不考慮它與內容的關聯(lián)，很可能你的設計非常優(yōu)秀，單獨拿出來也被客戶所認可，但一旦放在網(wǎng)站中，卻會令用戶感到不舒服。在真實的案例中，一個網(wǎng)站的設計與內容是密不可分的，如果沒有了內容，許多貌似精巧的網(wǎng)站設計往往只剩下一個空架子。
一種可行的方案是，在你開始著手設計時，先選取一個與你要呈現(xiàn)的內容接近的模板，可以用設計軟件，也可以用代碼，然后整個后續(xù)的設計都以它中心展開。如果網(wǎng)站中包含風格較為特別的照片或圖像時，這種方法尤其值得一試，這樣才能保證你最終的設計與這些圖像在基調上保持和諧一致。請把要呈現(xiàn)的網(wǎng)站內容想象成一個獨特的生命，而你是一個裁縫，設計就是要為他量體裁衣，做出一套最合身的裝束。
理論上網(wǎng)站主背景和文字有無限多種顏色可供選擇。但我的建議是從最掌握最易學的配色開始，具體來說就是白色和/或淺灰色的背景搭配深灰色的文字。
如果考察一下當今的網(wǎng)站，模板或主題，我們可以發(fā)現(xiàn)這些網(wǎng)站中的大多數(shù)使用的正是深灰色的字體和白色/淺灰色的背景，這樣做是經(jīng)過精心考慮的。這樣的配色方案會為用戶提供最佳的可讀性，并且能使文字和圖象以良好的效果凸顯在前景之中。
作為示例，讓我們來看幾個以基本灰度色做背景的網(wǎng)站：
一般來講設計師應避免把深黑色用作字體顏色，因為相比較而言，深灰色的文字給用戶的閱讀體驗更好一些。從 #333333 到 #666666 便是個不錯的范圍。
至于網(wǎng)站的背景色彩,全白#FFFFFF對任何主流的字體都是最保險的搭配選項。其他網(wǎng)站元素則可以在#FFFFFF到#cccccc之間自由調整。
我想再次強調，你不一定非要按我說的那樣去配色，這些經(jīng)驗只是為了幫助你順利地展開設計，避免不必要的錯誤。
網(wǎng)頁配色中最常見的一個錯誤就是把若干種色彩統(tǒng)統(tǒng)混在一起。記?。耗闶褂玫念伾蕉啵刂扑鼈兙驮诫y。因此在設計的初始階段，如果要高亮顯示鏈接，標題，目錄，按鈕等元素時，較為穩(wěn)妥的方法是只選擇一種顏色。你可以自行選擇藍，綠，紅或任何一種你喜歡的顏色作為高亮色。
在背景色之上，用你選定的高亮顯示色先畫一個框。這樣你便能對高亮色與其他設計元素的關系有個較為清晰的概念。然后打開拾色器，點擊拾色器右上部區(qū)域（約占整個取色器四分之一大?。┑闹行狞c。
上下移動滑塊，選擇一種適用于你的設計的顏色。
至此，你已經(jīng)至少在設計中使用了三種不同的色彩：背景顯示一種，文字一種，高亮顯示一種。在將來，你可以選擇更多的顏色用于高亮顯示，但在起始階段，就像雜耍中的拋球訓練一樣，你目前能拋接的只有三個球，所以不妨先把這三個球練得順手，以后再逐漸增加球的數(shù)量。
到這一步，你已經(jīng)學會了如何選取“色相”。簡單來說，色相就是指某種基色。在拾色器中，當你上下移動滑塊時，你能看到一個字母“H”。
“H”代表英文的“Hue”(色相)，當你選定一個高亮顯示色時，方框中出現(xiàn)的數(shù)字便是與它對應的色相。
如果你對選擇什么顏色做高亮色拿不準，請直接選藍色。我可不是在開玩笑。藍色是一種極其靈活的色彩，各種類型的網(wǎng)站中都能見到它的影子。紫色和黃色也是相當不錯的選項，但如果運用不好的話，效果可能會令人無法直視。
而藍色則不一樣，當需要高亮顯示色時，你無論怎么用藍色都不會錯，就算錯也不會錯太多。當你開始學習色彩搭配，卻不知從何開始，或困惑于在一個新項目中究竟該選用哪種顏色做高亮顯示時，請考慮藍色吧。從海軍藍（色相235）到深藍（色相190）的諸多不同藍色都可以放心大膽地使用。
在我舉的例子中我使用了色相為205的藍色。一旦你選定了某種顏色做高亮顯示色，就不要再猶豫，盡管把它用在設計中需要出現(xiàn)的地方。不過，當你在選項按鈕或任何有文字出現(xiàn)的地方使用高亮顯示色時，你需要修改一下文字的色彩。在我的例子中，我把高亮顯示區(qū)的文字改成了白色。
當你選定了高亮顯示色之后，請把滑塊（色相條）置于未移動之前的位置。此時你可以為自己的設計再添加一些色彩，但為便捷起見，建議你選擇與高亮顯示色色相一致，但又略有不同的色彩。
在色彩拾取器內拖拽光標，可以得到不同的顏色。
你可以在下列情形中使用這些由高亮顯示色衍生的顏色：
懸停效果
邊緣
高亮顯示區(qū)的文字顯示
漸層
光影效果
拾色器的右上角是濃艷色彩的匯聚之地。這個區(qū)域的色彩好像F1方程式賽車，它們擁有令人艷羨和心動的優(yōu)越性能，但需要有豐富的經(jīng)驗才能駕馭。經(jīng)驗不足而貿然行事而可能導致嚴重的事故，對于剛入行的設計師來說，最好還是先從色彩不那么強烈的顏色開始。
這就是為什么在這篇文章的第三部分，在選擇高亮色彩之前，我要求設計師先點擊一下拾色區(qū)域右上部分的中心點,這樣做是為了保證選取的顏色不過于鮮艷。
為了說明這一點，請看如果不點擊拾色區(qū)域，只是改變一下設計中配色的色相，會發(fā)生什么。
它看上去仍然很不錯，對嗎？但當把光標拖到拾色器的右上角的時候，一切便忽然變得不那么美妙了。
當心你的眼睛!如果你不打算把網(wǎng)站用戶的視網(wǎng)膜燒焦，還是聽聽我的建議，先不要碰拾色器的右上角吧。
在上文的最后兩節(jié)，我們介紹了一些將色彩理論運用于實際設計中的策略。至此你已應該學會如何使用:
當你在拾色器的取色區(qū)域內拖動光標時，你或許會留意到“S”值和“B”值也在發(fā)生變化，其中字母S代表的是“Saturation(飽和度)”，B代表的是"Brightness"（亮度）。與此同時色相值并未發(fā)生變化。因此，要選擇色相相同但色彩略有變化的顏色，只需選擇一種顏色，然后改變它的飽和度和亮度即可。
飽和度 是用來描述色彩鮮艷程度的概念。例如我們可以說，“我的襯衣被灑出來的紅酒浸透（飽和）了”。在典型的拾色器中，飽和度由白色調與純色的混合程度決定。一種色彩中白色調越少，飽和度便越大。
當你將光標拖至拾色區(qū)的右半部分時，色彩中的白色調便逐次減少，飽和度，亦即S值便相應增加。當把光標向白色調區(qū)域一側拖動時，飽和度亦即S值也隨之減小。
“淺色澤”（tint）的概念源于傳統(tǒng)藝術中將白色顏料與彩色顏料調配的現(xiàn)象。
亮度是描述黑色調與純色組合的概念。一種色彩中黑色調越少，飽和度便越大。在拾色器的取色區(qū)中,光標向上移動時,黑色調隨之減少,飽和度增大,可以看到取色器中的B值也相應增加。當光標向下移動時，黑色調增加，B值也相應減少。
黑色調與純色的組合也被稱作“暗色澤”（shade，或譯作“陰影”）。這個概念源于傳統(tǒng)藝術中將黑色顏料與彩色顏料調配的現(xiàn)象。
色值（Tone）是描述灰色調與純色相組合的概念。當我們像在上文描述過的那樣,將光標移出拾色器右上角的取色區(qū)時,色彩的飽和度和亮度都會逐漸降低,這是便產(chǎn)生了一個色值。所以,一般來說,當一種色彩的飽和度和亮度都低于100%時,我們認為它有一個色值。
同樣,這個概念也是源于傳統(tǒng)藝術中將灰色顏料與彩色顏料調配的現(xiàn)象。這也是"tone things down(意為“使...緩和”，“使...含蓄”---譯注)"這個短語的由來。聽起來很酷吧?
所謂的單色配色是指在一個基準色之上因淺色澤，暗色澤及色值等不同而衍生出的一系列色彩。在這篇文章里，事實上我們已經(jīng)接觸過這些概念了。例如，當你選擇一種高亮顯示色及其衍生色時，我們便是在真正使用一種“單色配色方案”。
請在自己以后的網(wǎng)頁設計中積極運用灰色度背景+單色配色方案的策略,直至你能熟練掌握。請變換高亮顯示色的色相,看看選擇不同的色相時,飽和度和亮度如何改變。
熟悉一種顏色之后,你也可以嘗試去添加完全不同的高亮顯示色。我建議先從橙色-藍色這對組合開始,因為橙色-藍色組合的色彩相對而言比較容易控制。然后可以嘗試一下綠色-藍色組合,以我的經(jīng)驗,這是第二容易控制的色彩。這兩對色彩組合也最易得到客戶的認可。
為了加深對網(wǎng)頁設計中配色方案的理解,還有一件事情是你絕對值得一試的。你可以下載一個Colorzilla之類的瀏覽器擴展應用,用它來學習有經(jīng)驗的設計師們是如何搭配色彩的。這樣當你在瀏覽網(wǎng)頁時，如果看到某個網(wǎng)站的配色方案十分迷人，你可以立即打開下載的擴展應用（取色器）來查看該網(wǎng)頁所使用的所有色彩。一定要對取色器采集到的每種色彩的飽和度和亮度都要了解一下。還要特別注意網(wǎng)頁中不同的色彩是如何組合的。
如果在今后的網(wǎng)頁設計中涉及到配色的地方你遇到任何困惑，隨時都記得復習一下我總結的6條“安全守則”，也許不能讓你百分之百的成功，但至少可以保證讓你呈現(xiàn)給用戶的不再是一鍋“色彩亂燉”！