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