網(wǎng)頁(yè)美工設計

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

編輯：時(shí)間：2017-01-13 21:16:39

　　5. 為強調色添加變化

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

　　在顏色選擇器上強調色周?chē)蟿?dòng)選色點(diǎn)來(lái)創(chuàng )建變色。

　　在以下這些元素上使用變色：

　　懸停效果

　　邊框

　　強調色上的文本

　　漸變

　　光和陰影的效果

　　6. 避開(kāi)調色面板右上角的位置

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

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

　　為了說(shuō)明這一點(diǎn)，看一下假如我只改變設計的色相，不再動(dòng)顏色選擇器，會(huì )是什么效果。

　　它仍然看起來(lái)非常漂亮，對吧?但是如果我把選色點(diǎn)拖拽到顏色選擇器的右上角，它突然就變得不太好了。

　　唉媽呀我的眼睛!如果你確定不想燒焦訪(fǎng)問(wèn)者的眼睛，遵循一般的指南避開(kāi)顏色面板上右上角的位置來(lái)進(jìn)行調色。

　　你剛剛學(xué)會(huì )了：

　　在上兩個(gè)部分你已經(jīng)學(xué)會(huì )了運用色彩理論的幾個(gè)不同的方面。您學(xué)會(huì )了如何使用：

　　飽和度和明度

　　當你在顏色選擇器上拖動(dòng)選色點(diǎn)的時(shí)候，你會(huì )看到“S”和“B”的值在改變，這分別代表“飽和度”和“亮度”。同時(shí)你會(huì )也看到色相的值保持不變。所以你是通過(guò)改變基礎色的飽和度和亮度來(lái)創(chuàng )建變色的。

　　飽和度和色彩

　　飽和度生動(dòng)地表達了你的顏色。舉個(gè)例子來(lái)說(shuō)，想象一下“我的白襯衫被溢出的紅酒滲透了”。在顏色選擇器上，飽和度取決于有多少的白色與你的基本色進(jìn)行混合。白色越少，飽和度越高。

　　當你向右拖動(dòng)選色點(diǎn)的時(shí)候，你減少了白色的量，提高了飽和度，因此“S”值上升了。當你向左拖動(dòng)選色點(diǎn)的時(shí)候，你增加了白色的量，降低了飽和度，因此“S”值下降了。

　　這種將基本色與白色混合的方式也叫做創(chuàng )建一種“色彩”。這個(gè)詞來(lái)自于顏料混合，就是將白色的顏料與彩色的顏料進(jìn)行混合。

　　亮度與色度

　　亮度是往你的顏色中混合多少黑色。黑色越少，亮度越大。

　　當你向上拖動(dòng)選擇點(diǎn)的時(shí)候，你減少了黑色的量，提高了亮度，因此，拾色器上的“B”值就上升了。當向下拖動(dòng)選擇點(diǎn)的時(shí)候，你增加了黑色，“B”值就下降了。

　　這種將基本色與黑色混合的方式也叫做創(chuàng )建“色度”。這同樣來(lái)自于顏料混合，就是將黑色的顏料與彩色的顏料進(jìn)行混合。

　　色調

　　當你用灰色混合基本色時(shí)就創(chuàng )建了“色調”。當你從色板的右上角挪出的時(shí)候，你同時(shí)降低了飽和度和亮度，也就是同時(shí)增加了白色和黑色(灰色)，也就創(chuàng )建了色調。因此基本上任何時(shí)候只要你的飽和度和亮度都不到100%，這就是一種色調。

　　同樣，這個(gè)術(shù)語(yǔ)來(lái)自于顏料混合，將灰色顏料與一種彩色顏料混合。這也就是詞語(yǔ)“調淡”的由來(lái)。很酷吧?

　　單色配色方案

　　“單色”配色方案是你使用基本色以及基于基本色調整顏色的濃淡、陰影及色調來(lái)進(jìn)行擴展。你剛剛已經(jīng)學(xué)習過(guò)了所有這些術(shù)語(yǔ)在實(shí)踐設置中的含義。因此通過(guò)挑選一種強調色以及它的變色，你實(shí)際上已經(jīng)創(chuàng )建了單色的配色方案。

　　接下來(lái)呢?

　　在灰度基礎上繼續練習你的單色配色方案直到你已經(jīng)非常自信。試著(zhù)用不同的色相作為你的強調色來(lái)進(jìn)行創(chuàng )作，嘗試在使用中改變飽和度和亮度。

　　當你覺(jué)得得心應手的時(shí)候，繼續添加一個(gè)額外的強調色。我建議你在第一次嘗試的時(shí)候使用橙色和藍色，因為它們是相處最和諧的“二人組”。然后嘗試綠色和藍色，在我的經(jīng)驗中，這是第二簡(jiǎn)單的。這些組合是最容易打動(dòng)客戶(hù)的。

　　為了幫助你更好地理解網(wǎng)頁(yè)設計的配色方案，你能做的最好的事絕對是利用瀏覽器擴展插件顏色取樣器來(lái)抓取顏色樣例，比如說(shuō)Colorzilla，通過(guò)它來(lái)開(kāi)始研究經(jīng)驗豐富的設計師是怎么做的。當你瀏覽網(wǎng)頁(yè)時(shí)，看到一個(gè)非常棒的配色方案，用顏色取樣器將配色方案分離出來(lái)。分析樣例中每個(gè)色相，看看什么飽和度和亮度水平效果最好。也要注意這些顏色都是怎么相互搭配的。

　　如果有疑問(wèn)，你可以求助于你的“安全第一”指南，這樣你就能遠離“慘不忍睹”了。

2/2 首頁(yè) 上一頁(yè) 1 2

<< 上一篇：網(wǎng)頁(yè)設計為什么要堅持好的設計？

>> 下一篇：網(wǎng)頁(yè)設計中3種響應式設計災禍

推薦資訊