12.2日(rì)音(yīn)訊，不(bù)得(de)不(bù)知(z©&εhī)的(de)網頁配色小(xiǎo)常識

　　12.2日(rì)音(yīn)訊，不(bù)得(de)不(b₹ ù)知(zhī)的(de)網頁配色小(x÷≠iǎo)常識，網頁視(shì)覺層面主要( Ωyào)是(shì)由形式（或叫布局）、色彩、圖片和(h‌‌δ'é)文(wén)字信息組成，設計(jì)師(♦×♣£shī)通(tōng)常對(duì)形式感關注的(de)比較多('‍βduō)，因為(wèi)視(shì)覺沖擊力✘∑¥¥、設計(jì)差異性或創新大(dà)多(↑ ‍duō)都(dōu)仰賴形式呈現(xiàn)，而色彩主要(yào₩σ¥)影(yǐng)響整體(tǐ)觀感、設計(jì)品質以及受衆情緒，₹$→☆很(hěn)多(duō)時(shí)候我們設計(jì)了(le)​" £一(yī)個(gè)不(bù)錯(cuò≠'•)的(de)形式卻未能(néng)做(zuò)出這(zhè)個(gè) €‌©稿子(zǐ)應有(yǒu)的(de)品質，會(huìε®)不(bù)會(huì)太可(kě)惜？

　　形式需要(yào)思考創造，圖片素材需要(yào)學習(xí)處理(∞>lǐ)，文(wén)字需要(yào)梳理(l♣σǐ)編排，但(dàn)網頁色彩是(shì)不(bù)是(shì)一© €"(yī)定需要(yào)有(yǒu)天生(shēn§↓g)的(de)色感、豐富的(de)理(lǐ)論和(hé)多(β duō)年(nián)經驗沉澱才能(néng)運用(yòn≠∏&₩g)自(zì)如(rú)？

　　當然不(bù)！

　　網頁配色的(de)文(wén)章(πγ♣>zhāng)在網絡上(shàng)很(hěn)多(duō)， ♦甚至有(yǒu)些(xiē)泛濫，稍微(wēi)關注過的(de₹ ↔)同學應該都(dōu)知(zhī)道(dào)“色輪&r​♦σ dquo;、“色卡”等輔助性配色工(gō<§ng)具，但(dàn)那(nà)更多(duō)都(dōu)是(sh✔∑∞&ì)從(cóng)印刷介質上(shàng)的(de)色彩系統延↓♠伸出來(lái)的(de)，不(bù)完全适用(∏® yòng)于網頁，甚至造成很(hěn)大(dà)的(de)局限，比如(±≤≈"rú)你(nǐ)會(huì)較真的(de)通(tōng)過色輪來(lái&δ)選用(yòng)網頁色彩嗎(ma)？再比如(rú)通(tōng)₽σφ₩過下(xià)面提供的(de)配色組合，你(nǐ)能(néng∏‍‍↑)自(zì)由的(de)應對(duì)一(yī)個(gè)又(♦<÷βyòu)一(yī)個(gè)的(de)類型相(xi€€¶àng)若的(de)網頁設計(jì)需求嗎(ma)？

　　由于CMYK與RGB色彩模式不(b γù)同，網頁的(de)色彩呈現(xiàn)數(shù)量要(Ω≤yào)龐大(dà)的(de)多(duō)，選用(yòng)也(yě)應該✘​§₹更自(zì)由，但(dàn)在配色上(shàng)卻常碰到(dào)設計↓→♦(jì)作(zuò)品偏髒、發灰、花(huā)哨等大(dà)問(wèn)™₩δ≥題，這(zhè)事(shì)兒(ér)得(de)解決。

　　網頁案例剖析

　　“網頁配色不(bù)宜超←±€∏過三種。”

　　真理(lǐ)，這(zhè)沒錯(cuò)，但(dàn)更多(du Ω​ō)是(shì)從(cóng)色相(xiàng)（赤橙黃(ελεhuáng)綠(lǜ)青藍(lán)紫等不(bù)同顔色）上(shàn✔'★γg)來(lái)說(shuō)的(de)。

　　色相(xiàng)差異明(míng)顯，主要(yào)色彩的(¥ε☆de)選取就(jiù)比較好(hǎo)辦，常見(jiàn)的(de)有( "≈yǒu)對(duì)比色、臨近(jìn)色、冷(lěng)暖色調互補等​₹∞方式，可(kě)以簡單設定，或直接從(cóng)成功作(zuò)品→•€中借鑒主輔色配比都(dōu)可(kě)以，比如(rú)常見(jiàn)≈₹ 的(de)朱紅(hóng)點綴深藍(lán)、明(m♥π∏íng)黃(huáng)點綴深綠(lǜ)等。

　　但(dàn)通(tōng)常，我們需要(σβyào)面對(duì)的(de)設計(jì)需求在色彩分(fēn)配上(shà★Ωng)會(huì)有(yǒu)更多(duō)的(de)問(wèn)題出現↓ ♦↓(xiàn)：

　　邯鄲網絡公司首創網絡，根據網頁信息的(de)多(duō)寡，會(h>₩uì)有(yǒu)更多(duō)色彩區(qū)域的(de)₽♦¥Ω層級劃分(fēn)和(hé)文(wén)字信息層級區(qū)分(fēn)需求，∑ ÷那(nà)麽在守住“網頁色彩（相(xiàng♥∏‍)）不(bù)超過三種”的(de)原則下(x∞×∑ià)，隻能(néng)尋找更多(duō)同色系的(de)色彩來(lá∞™•i)完善設計(jì)，也(yě)就(jiù)是(shì)在♣σ γ“飽和(hé)度”和(hé)“明("×míng)度”上(shàng)做(zuò)文(wén)章(z₹§‍¥hāng)。

　　這(zhè)也(yě)就(jiù)是(shì)本文(wén β)為(wèi)解決這(zhè)一(yī)♣'問(wèn)題所要(yào)分(fēn)享的(de)“天←φα₩然”配色技(jì)巧：疊柔配色法。

　　疊柔配色技(jì)巧分(fēn)享（這(zhè)裡(lǐ)才是(sh¥ ì)正文(wén)，上(shàng)面都(dōu)是(shì)♥β↓‌廢話(huà)）

　　這(zhè)個(gè)方法非常簡單，無←‍₽需知(zhī)道(dào)三角函數(shù)、≠α四則運算(suàn)，無需理(lǐ)解色彩指數(×≠↓&shù)和(hé)直方圖，甚至不(bù)用(yòng)了(le)解色'¶¥階曲線和(hé)亮(liàng)度強弱......甚至♦♥，你(nǐ)可(kě)以對(duì)色彩毫無知(>δ≤↓zhī)覺。

　　★隻需要(yào)明(míng)白(bái)三個(gè)©♠≥關鍵詞：疊加、柔光(guāng)和(hé)透明(míng)​±←度（填充）。

　　如(rú)果連這(zhè)三個(gè)關鍵詞都(dōu)不(♣β✔bù)甚明(míng)了(le)，那(nà)就(jiù)記住他<≠↓(tā)們所在的(de)位置：

　　注意：透明(míng)度與填充略有(yǒu)不(bù)同，填充不(bù'×↑)會(huì)影(yǐng)響到(dào)™≠♥“混合選項”的(d‌<₹e)效果，而透明(míng)度則是(shì)作(zuò)用(yòng​>π)于整個(gè)圖層。

　　順便，花(huā)幾分(fēn)鐘(zhōng)時(shí)間££(jiān)了(le)解一(yī)下(x★÷§ià)這(zhè)個(gè)配色技(jì)巧的(de)原理♠®(lǐ)：

　　即：用(yòng)純白(bái)色（#ffffff）和©φ₹→(hé)純黑(hēi)色（#000000）通(tōn ↑g)過“疊加”和(hé)“柔光(guāngα≈✔™)”的(de)混合模式（效果類似調整飽和(hé)度和(héφδ )明(míng)度），在任意一(yī)個(gè)色彩上'→∏β(shàng)得(de)到(dào)最匹配的(de)顔色（然後通(≠✔tōng)過調整透明(míng)度選取最适合的(de)輔色）。

　　（上(shàng)圖示例中，調整疊/柔模φΩ₹式的(de)黑(hēi)白(bái)色塊的(de)不(b ₽→ù)同透明(míng)度（取10%到(dào)100%整數(shù)值為(w₩¥λ₽èi)例）就(jiù)可(kě)以得(de)到(dào)差異較βδ明(míng)顯的(de)40種配色，通(‌§§tōng)過這(zhè)種技(jì)巧，π★理(lǐ)論上(shàng)每一(yī)種顔色都(dōu)可(kεδ ≠ě)以輕易獲得(de)無窮盡的(de)&ldq&δ¥uo;天然配色”，并且是(shì)“0失誤&r€∏≠dquo;！）

　　★由于疊加和(hé)柔光(guāng)模式對(duì)圖像內λ‌(nèi)的(de)最高(gāo)亮(liδ™àng)部分(fēn)和(hé)最陰影(yǐng)部分(fēn) ↕β£無調整，因此該配色方法對(duì)純黑(hēi‍λπ§)色和(hé)純白(bái)色不(bù)起作(zuò)用(yòng)。

　　設計(jì)實戰演示：

　　要(yào)不(bù)要(yào)像上(shàng)面圖示看(kànε∏‍)起來(lái)的(de)那(nà)樣複雜(zá)？

　　不(bù)用(yòng)，隻需要(yào)理(lǐ)解了(le)上(sh<β↔àng)面的(de)方法，就(jiù)可(kě♣<←)以忘記圖示，在你(nǐ)的(de)設計(jì)工(gōng)&↑↑作(zuò)中自(zì)由發揮！

　　簡單三步：

　　①一(yī)個(gè)黑(hēi)或白(bái)色，或黑(hēi)白(b₹•ái)漸變（可(kě)以是(shì)點、線、面...甚至字體(tǐ)）

　　②混合模式選擇疊加或柔光(guāng)

　　③調整透明(míng)度（1%-100%随意，省心的(€&≤₽de)做(zuò)法是(shì)直接鍵入一(≈<₹yī)個(gè)整數(shù)值，比如(rúλ≥)：輕質感類頁面可(kě)以選擇20%-< φ40%，重質感感類可(kě)以鍵入60%或以上(shàng)）