網(wǎng)頁設計配色的天然范兒

網(wǎng)頁視覺層面主要是由形式（或叫布局）、色彩、圖片和文字信息組成，設計師通常對形式感關注的比較多，因為視覺沖擊力、設計差異性或創(chuàng)新大多都仰賴形式呈現(xiàn)，而色彩主要影響整體觀感、設計品質以及受眾情緒，很多時候我們設計了一個不錯的形式卻未能做出這個稿子應有的品質，會不會太可惜？

形式需要思考創(chuàng)造，圖片素材需要學習處理，文字需要梳理編排，但網(wǎng)頁色彩是不是一定需要有天生的色感、豐富的理論和多年經(jīng)驗沉淀才能運用自如？

當然不！

關于網(wǎng)頁配色
網(wǎng)頁配色的文章在網(wǎng)絡上很多，甚至有些泛濫，稍微關注過的同學應該都知道“色輪”、“色卡”等輔助性配色工具，但那更多都是從印刷介質上的色彩系統(tǒng)延伸出來的，不完全適用于網(wǎng)頁，甚至造成很大的局限，比如你會較真的通過色輪來選用網(wǎng)頁色彩嗎？再比如通過下面提供的配色組合，你能自由的應對一個又一個的類型相若的網(wǎng)頁設計需求嗎？


（由于本人從事游戲網(wǎng)頁視覺設計工作，故案例均以游戲網(wǎng)頁做示意說明，其他網(wǎng)頁類型可以做延伸思考或僅作參閱）

如上所示，根據(jù)網(wǎng)頁信息的多寡，會有更多色彩區(qū)域的層級劃分和文字信息層級區(qū)分需求，那么在守住“網(wǎng)頁色彩（相）不超過三種”的原則下，只能尋找更多同色系的色彩來完善設計，也就是在“飽和度”和“明度”上做文章。

這也就是本文為解決這一問題所要分享的“天然”配色技巧：疊柔配色法。

疊柔配色技巧分享（這里才是正文，上面都是廢話）

這個方法非常簡單，無需知道三角函數(shù)、四則運算，無需理解色彩指數(shù)和直方圖，甚至不用了解色階曲線和亮度強弱......甚至，你可以對色彩毫無知覺。

★只需要明白三個關鍵詞：疊加、柔光和透明度（填充）。
如果連這三個關鍵詞都不甚明了，那就記住他們所在的位置（下圖）：



即：用純白色（#ffffff）和純黑色（#000000）通過“疊加”和“柔光”的混合模式（效果類似調整飽和度和明度），在任意一個色彩上得到最匹配的顏色（然后通過調整透明度選取最適合的輔色）。


（上圖示例中，調整疊/柔模式的黑白色塊的不同透明度（取10%到100%整數(shù)值為例）就可以得到差異較明顯的40種配色，通過這種技巧，理論上每一種顏色都可以輕易獲得無窮盡的“天然配色”，并且是“0失誤”?。?br/>


★ 由于疊加和柔光模式對圖像內的最高亮部分和最陰影部分無調整，因此該配色方法對純黑色和純白色不起作用。


設計實戰(zhàn)演示：

要不要像上面圖示看起來的那樣復雜？

不用，只需要理解了上面的方法，就可以忘記圖示，在你的設計工作中自由發(fā)揮！




簡單三步：

①  一個黑或白色，或黑白漸變（可以是點、線、面...甚至字體）

②  混合模式選擇疊加或柔光

③  調整透明度（1%-100%隨意，省心的做法是直接鍵入一個整數(shù)值，比如：輕質感類頁面可以選擇20%-40%，重質感感類可以鍵入60%或以上）

如下圖：

方法延伸（細節(jié)篇）

假如將該方法運用到一個按鈕上......

通過混合選項中的“陰影、外發(fā)光、描邊（不適用疊柔法）、內陰影、內發(fā)光”可以自由的刻畫5層像素級細節(jié)（當然，通常在實際的使用中刻畫1到3層即可）。

后記：

疊柔配色法：無招勝有招~把抓不住的感覺交給精密的計算機，科學化進行你的設計。

更短的時間，更高的品質，你，值得擁有~......

另：方法是死的，人是活的，配合色階、曲線、色彩平衡等，還可以玩出更多花樣來......

分享來自：TGideas-騰訊游戲官方設計團隊