本文沒有咬文嚼字的地方，只是一個(gè)配色技巧的分享，十分簡(jiǎn)單，簡(jiǎn)單到流淚，但或許對(duì)你來說又十分實(shí)用，實(shí)用到無(wú)語(yǔ)。原本就是天然的饋贈(zèng)，你我只是順手采擷之......

 

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

 

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

 

當(dāng)然不！

 

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

 

 

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

 

 

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

 

 

網(wǎng)頁(yè)案例剖析

 

“網(wǎng)頁(yè)配色不宜超過三種。”

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

 

注意：透明度與填充略有不同，填充不會(huì)影響到“混合選項(xiàng)”的效果，而透明度則是作用于整個(gè)圖層。

 

順便，花幾分鐘時(shí)間了解一下這個(gè)配色技巧的原理：

 

 

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

 

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

 

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

 

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

 

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

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

 

簡(jiǎn)單三步：

①  一個(gè)黑或白色，或黑白漸變（可以是點(diǎn)、線、面...甚至字體）

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

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

 

如下圖：

 

（無(wú)論你采用何種主色，用黑白色彩疊加或柔光，你都可以輕松自如的獲得完美匹配的整套色系，附件有PSD源文件：下載地址在回復(fù)中的226樓）

 

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

 

 

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

 

假如將該方法運(yùn)用到一個(gè)按鈕上......

 

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

 

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

 

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

 

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

 

案例歷練：

 

 

后記：

 

疊柔配色法：無(wú)招勝有招~把抓不住的感覺交給精密的計(jì)算機(jī)，科學(xué)化進(jìn)行你的設(shè)計(jì)。

更短的時(shí)間，更高的品質(zhì)，你，值得擁有~......

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

 

分享來自：TGideas-騰訊游戲官方設(shè)計(jì)團(tuán)隊(duì)

 

 

 

藍(lán)藍(lán)設(shè)計(jì)(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

作者：孔雀
鏈接：https://www.zcool.com.cn/article/ZMzI5ODg=.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。