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

本文沒有咬文嚼字的地方，只是一個技巧的分享，十分簡單，簡單到流淚。

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

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

當然不！

關(guān)于網(wǎng)頁配色

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

由于CMYK與RGB色彩模式不同，網(wǎng)頁的色彩呈現(xiàn)數(shù)量要龐大的多，選用也應(yīng)該更自由，但在配色上卻常碰到設(shè)計作品偏臟、發(fā)灰、花哨等大問題，這事兒得解決。

網(wǎng)頁案例剖析

'網(wǎng)頁配色不宜超過三種。'

真理，這沒錯，但更多是從色相（赤橙黃綠青藍紫等不同顏色）上來說的。

色相差異明顯，主要色彩的選取就比較好辦，常見的有對比色、臨近色、冷暖色調(diào)互補等方式，可以簡單設(shè)定，或直接從成功作品中借鑒主輔色配比都可以，比如常見的朱紅點綴深藍、明黃點綴深綠等。

但通常，我們需要面對的設(shè)計需求在色彩分配上會有更多的問題出現(xiàn)：

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

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

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

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

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

★ 只需要明白三個關(guān)鍵詞：疊加、柔光和透明度（填充）。

如果連這三個關(guān)鍵詞都不甚明了，那就記住他們所在的位置（下圖）：

注意：透明度與填充略有不同，填充不會影響到'混合選項'的效果，而透明度則是作用于整個圖層。

順便，花幾分鐘時間了解一下這個配色技巧的原理：

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

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

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

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

要不要像上面圖示看起來的那樣復(fù)雜？
不用，只需要理解了上面的方法，就可以忘記圖示，在你的設(shè)計工作中自由發(fā)揮！

簡單三步：
①  一個黑或白色，或黑白漸變（可以是點、線、面...甚至字體）
②  混合模式選擇疊加或柔光
③  調(diào)整透明度（1%-100%隨意，省心的做法是直接鍵入一個整數(shù)值，比如：輕質(zhì)感類頁面可以選擇20%-40%，重質(zhì)感感類可以鍵入60%或以上）

如下圖：

（無論你采用何種主色，用黑白色彩疊加或柔光，你都可以輕松自如的獲得好匹配的整套色系）

這并不僅僅適用于色域劃分或提取幾個輔色，如下圖：字體顏色、細節(jié)線條、按鈕漸變、邊角高光、描邊陰影......都可以用黑白色肆意揮灑！

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

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

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

且無論形狀、色彩如何變化，這些細節(jié)都如影隨形、色彩都隨變而變~可節(jié)省大量重調(diào)細節(jié)或盲目選取配色的時間！

細節(jié)、品質(zhì)和效率，一石三鳥，兼而得之！

（近期看到設(shè)計圈有討論'網(wǎng)頁雕花不可取'的課題，假如讓細節(jié)成為習(xí)慣，讓美感成為直覺，雕花也便只是普通設(shè)計行為而已。）

案例歷練：

后記：

疊柔配色法：無招勝有招~把抓不住的感覺交給精密的計算機，科學(xué)化進行你的設(shè)計。
更短的時間，更高的品質(zhì)，你，值得擁有~......
另：方法是死的，人是活的，配合色階、曲線、色彩平衡等，讓你的網(wǎng)頁配色更加自由自在......

當前文章：網(wǎng)頁設(shè)計中 網(wǎng)頁配色的天然范兒
鏈接地址：http://www.muchs.cn/news12/159912.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站排名、面包屑導(dǎo)航、靜態(tài)網(wǎng)站、動態(tài)網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)