每天一點(diǎn)PS·點(diǎn)綴生活色彩
網(wǎng)絡(luò)是一個(gè)多彩的世界，而色彩也是網(wǎng)絡(luò)吸引用戶注意力的主要手段之一，它令人產(chǎn)生興趣，給人帶來影響，并且通過對(duì)比、襯托帶來愉悅的瀏覽體驗(yàn)。與此同時(shí)，色彩還是設(shè)計(jì)趨勢(shì)中無法忽略的一個(gè)重要組成部分，無論是扁平化設(shè)計(jì)還是Material Design，色彩的運(yùn)用都是重中之重。
但是，用錯(cuò)色彩也是常見的現(xiàn)象。有沒有特定的色彩搭配是網(wǎng)頁設(shè)計(jì)中的大忌？有！這個(gè)一定是有的，并且還不少。這些色彩組合會(huì)讓你的網(wǎng)頁出現(xiàn)各種各樣的問題，為配色制定一個(gè)黑名單勢(shì)在必行。今天的文章，我們就來聊聊配色的“黑名單”吧。
閃亮的霓虹色看起來很有趣，似乎能讓頁面顯得非常潮、非常流行。但是他們并不會(huì)讓眼睛覺得舒服，往往會(huì)給人以“閃瞎了”的不適感覺。
霓虹色的主要問題在于使用這種色彩的文字內(nèi)容難于閱讀，不好識(shí)別，和暗色調(diào)的背景搭配的時(shí)候，這種晃眼的感覺尤其明顯。而如果用霓虹色作為背景的話，這個(gè)頁面幾乎是沒法看的，除了霓虹色之外的內(nèi)容幾乎都沒法看清楚。
想解決這個(gè)問題，你可以試著降低霓虹色的亮度，讓它看起來更暗，讓它看起來更加微妙，同屏幕顯示更匹配。
Orange You Glad 這個(gè)頁面就很好的解決了這個(gè)問題，他們使用了非常接近霓虹色的配色，并且通過漸變色的方法來增加頁面的豐富度，色彩的亮度、對(duì)比度都用的相當(dāng)微妙，不會(huì)令訪客感到不適。
當(dāng)高飽和度的色彩搭配在一起的時(shí)候，它們會(huì)產(chǎn)生一種“震顫效應(yīng)”， 會(huì)讓你覺得兩種色彩之間會(huì)產(chǎn)生模糊、震顫或者發(fā)出光暈的視覺效果。毫無疑問，這是令人不適的。
在Josef Albers 的經(jīng)典著作《色彩交互》中描述了色彩的“震顫效應(yīng)”是如何給人帶來不安感的：“這種配色最初可能會(huì)給人帶來驚喜的效果，同時(shí)這種侵略性會(huì)讓人覺得不舒服，尤其是眼睛。你們會(huì)發(fā)現(xiàn)，這種配色很少出現(xiàn)在廣告當(dāng)中，因?yàn)樗鼤?huì)讓人覺得不愉快，難受?！?/span>
不過即使你沒有嘗試搭配，也可以通過它們的基礎(chǔ)特征，合理地規(guī)避“震顫”配色：
·它們都是高飽和度的色彩
·兩種色彩在色輪上是互補(bǔ)色
·他們?cè)谏喩舷喔?80度，處于對(duì)稱的位置
·將兩種色彩轉(zhuǎn)化為灰度之后，兩者灰度非常接近
最典型的案例就是明亮的紅色和綠色。這是廣受歡迎的“圣誕節(jié)”配色，這也是受到最廣泛詬病的配色方案之一。它最主要的可訪問性問題就是，色盲的用戶是完全分辨不出來的……
如果說你必須使用“震顫”配色，這個(gè)矛盾也不是不能調(diào)和的：加入中性的色彩將兩者分隔開就好了。
淺色+淺色的搭配也是最常見的錯(cuò)誤之一。也許你在某個(gè)平面設(shè)計(jì)或者印刷相關(guān)的項(xiàng)目上這么配色，最終沒造成可讀性的影響，這可能是設(shè)置的問題或者色差造成的，但是在絕大多數(shù)的情況下，是錯(cuò)誤的。
無論你怎么設(shè)計(jì)，這樣的配色一定很難閱讀其中的內(nèi)容，每一次都這樣。
這種錯(cuò)誤最常見于網(wǎng)站的Banner圖中：帥氣的大圖和精心設(shè)計(jì)的白色字體搭配在一起，而字體正好和色彩最淺的部分疊加在一起，這下就非常尷尬了。淺色+淺色的搭配讓內(nèi)容完全無法讀，作為Banner的作用幾乎被削弱為0。
想要修復(fù)這個(gè)問題其實(shí)非常簡(jiǎn)單：
·選擇色彩均勻統(tǒng)一的背景，文字部分可以與之構(gòu)成對(duì)比
·如果無法修改背景，可以在背景和文字之間加一層，增加對(duì)比
·嘗試調(diào)整整個(gè)背景圖片的色調(diào)、明暗、飽和度等，以達(dá)成提升對(duì)比度的目的
當(dāng)網(wǎng)站花成彩虹那樣的話，設(shè)計(jì)師一定是也生無可戀了。想想看，當(dāng)一大堆各種各樣的色彩都成為系統(tǒng)配色的一部分的話，各種色彩之間的干涉，都不知道打破了多少配色的規(guī)則。這種設(shè)計(jì)雖然可能在一開始吸引用戶的注意力，但是隨后讓用戶產(chǎn)生的惡心和不適絕對(duì)會(huì)遠(yuǎn)超設(shè)計(jì)者的預(yù)期，即使網(wǎng)站內(nèi)容再好，都無法被人識(shí)別。
如果你真的希望讓頁面更加“多彩”，那么不要讓色彩都混雜到一起，試著使用卡片式設(shè)計(jì)來承載不同的色彩，合理的排布，既可以讓色彩更加靈活，也可以保證組織性和流動(dòng)感。
就像淺色+淺色的搭配一樣，亮色+亮色和深色+深色的搭配，都是因?yàn)轱柡投冉咏斐傻谋孀R(shí)度問題。毫無疑問，這也是要規(guī)避的問題。
你真的覺得這個(gè)問題不會(huì)發(fā)生到你身上？那么在做單色配色方案的時(shí)候，要小心這一點(diǎn)。即使是經(jīng)驗(yàn)豐富的設(shè)計(jì)師，也可能會(huì)在這個(gè)時(shí)候掉坑里。
總之，千萬注意配色的對(duì)比度。如果這幾個(gè)色彩是必須使用的話，不妨將頁面設(shè)計(jì)成滾動(dòng)變色的，這樣你可以在保證對(duì)比和可讀性的同時(shí)，讓色彩也都用上。
我們常說的CMYK中的K是黑色。許多設(shè)計(jì)師的設(shè)計(jì)作品會(huì)橫跨網(wǎng)頁版和印刷品，有時(shí)候會(huì)在做印刷品的設(shè)計(jì)的時(shí)候，會(huì)誤將網(wǎng)頁配色中的黑色用上去。實(shí)際上網(wǎng)頁中的純黑（#000000）和印刷中的黑色有著巨大的差別，早在PS 7.0中，黑色的CMYK色標(biāo)其實(shí)是C75 M68 Y67 K90，而常說的系統(tǒng)黑K100 在更廣泛的RGB配色中，也只是較深的灰色而已！
印刷品，包括我們?nèi)粘Ｉ钪械脑S多黑色，其實(shí)分很多種，它們通常是某種色彩疊加了很多之后產(chǎn)生的效果，比如渡鴉的羽毛是黑色的，但是你仔細(xì)看它會(huì)微微泛藍(lán)。
所以，在設(shè)計(jì)這個(gè)黑色的時(shí)候，最好是挑選一個(gè)帶有你的品牌色調(diào)的黑色（而非#000000）。這樣可以在印刷的時(shí)候更容易協(xié)調(diào)。（比如讓黑色帶有一點(diǎn)藍(lán)色的色調(diào)，來抵消文本內(nèi)容中的黃色色調(diào)）舉個(gè)例子，上面Wonderland的頁面中，黑色實(shí)際上是#0a0a0b。
其實(shí)今天所談到的所有的配色的問題，幾乎都是關(guān)于對(duì)比度和可讀性問題的。實(shí)際上，只要確保色彩和內(nèi)容的對(duì)比度和配色美感，幾乎所有的色彩都是能用的。
原文地址：designshack
聯(lián)系客服
