編者按：當我們討論配色的時候穴亏，通常聊的是配色趨勢蜂挪、配色規(guī)則和配色方法，但是與此同時嗓化，我也應當合理的規(guī)避一些比較典型的錯誤配色方式棠涮。這個配色黑名單并不長，但是覆蓋了多屬的配色問題刺覆，不妨仔細看看~
網(wǎng)絡是一個多彩的世界严肪，而色彩也是網(wǎng)絡吸引用戶注意力的主要手段之一，它令人產(chǎn)生興趣谦屑，給人帶來影響驳糯，并且通過對比、襯托帶來愉悅的瀏覽體驗氢橙。與此同時酝枢，色彩還是設計趨勢中無法忽略的一個重要組成部分，無論是扁平化設計還是Material Design悍手，色彩的運用都是重中之重隧枫。
但是，用錯色彩也是常見的現(xiàn)象谓苟。有沒有特定的色彩搭配是網(wǎng)頁設計中的大忌官脓？有！這個一定是有的涝焙，并且還不少卑笨。這些色彩組合會讓你的網(wǎng)頁出現(xiàn)各種各樣的問題，為配色制定一個黑名單勢在必行仑撞。今天的文章赤兴，我們就來聊聊配色的“黑名單”吧。
太亮的霓虹色
閃亮的霓虹色看起來很有趣隧哮，似乎能讓頁面顯得非常潮桶良、非常流行。但是他們并不會讓眼睛覺得舒服沮翔，往往會給人以“閃瞎了”的不適感覺陨帆。
霓虹色的主要問題在于使用這種色彩的文字內(nèi)容難于閱讀，不好識別，和暗色調(diào)的背景搭配的時候疲牵，這種晃眼的感覺尤其明顯承二。而如果用霓虹色作為背景的話，這個頁面幾乎是沒法看的纲爸，除了霓虹色之外的內(nèi)容幾乎都沒法看清楚亥鸠。
想解決這個問題，你可以試著降低霓虹色的亮度识啦，讓它看起來更暗负蚊，讓它看起來更加微妙，同屏幕顯示更匹配颓哮。
Orange You Glad?這個頁面就很好的解決了這個問題盖桥，他們使用了非常接近霓虹色的配色，并且通過漸變色的方法來增加頁面的豐富度题翻，色彩的亮度揩徊、對比度都用的相當微妙，不會令訪客感到不適嵌赠。
“震顫”的色彩
當高飽和度的色彩搭配在一起的時候塑荒，它們會產(chǎn)生一種“震顫效應”， 會讓你覺得兩種色彩之間會產(chǎn)生模糊姜挺、震顫或者發(fā)出光暈的視覺效果齿税。毫無疑問，這是令人不適的炊豪。
在Josef Albers 的經(jīng)典著作《色彩交互》中描述了色彩的“震顫效應”是如何給人帶來不安感的：“這種配色最初可能會給人帶來驚喜的效果凌箕，同時這種侵略性會讓人覺得不舒服，尤其是眼睛词渤。你們會發(fā)現(xiàn)牵舱，這種配色很少出現(xiàn)在廣告當中，因為它會讓人覺得不愉快缺虐，難受芜壁。”
不過即使你沒有嘗試搭配高氮，也可以通過它們的基礎特征慧妄，合理地規(guī)避“震顫”配色：
它們都是高飽和度的色彩
兩種色彩在色輪上是互補色
他們在色輪上相隔180度，處于對稱的位置
將兩種色彩轉(zhuǎn)化為灰度之后剪芍，兩者灰度非常接近
最典型的案例就是明亮的紅色和綠色塞淹。這是廣受歡迎的“圣誕節(jié)”配色，這也是受到最廣泛詬病的配色方案之一罪裹。它最主要的可訪問性問題就是饱普，色盲的用戶是完全分辨不出來的……
如果說你必須使用“震顫”配色运挫，這個矛盾也不是不能調(diào)和的：加入中性的色彩將兩者分隔開就好了。
淺色+淺色
淺色+淺色的搭配也是最常見的錯誤之一费彼。也許你在某個平面設計或者印刷相關(guān)的項目上這么配色，最終沒造成可讀性的影響口芍，這可能是設置的問題或者色差造成的箍铲，但是在絕大多數(shù)的情況下，是錯誤的鬓椭。
無論你怎么設計颠猴，這樣的配色一定很難閱讀其中的內(nèi)容，每一次都這樣小染。
這種錯誤最常見于網(wǎng)站的Banner圖中：帥氣的大圖和精心設計的白色字體搭配在一起翘瓮，而字體正好和色彩最淺的部分疊加在一起，這下就非常尷尬了裤翩。淺色+淺色的搭配讓內(nèi)容完全無法讀资盅，作為Banner的作用幾乎被削弱為0。
想要修復這個問題其實非常簡單：
選擇色彩均勻統(tǒng)一的背景踊赠，文字部分可以與之構(gòu)成對比
如果無法修改背景呵扛，可以在背景和文字之間加一層，增加對比
嘗試調(diào)整整個背景圖片的色調(diào)筐带、明暗今穿、飽和度等，以達成提升對比度的目的
彩虹式配色
當網(wǎng)站花成彩虹那樣的話伦籍，設計師一定是也生無可戀了蓝晒。想想看，當一大堆各種各樣的色彩都成為系統(tǒng)配色的一部分的話帖鸦，各種色彩之間的干涉芝薇，都不知道打破了多少配色的規(guī)則。這種設計雖然可能在一開始吸引用戶的注意力作儿，但是隨后讓用戶產(chǎn)生的惡心和不適絕對會遠超設計者的預期剩燥，即使網(wǎng)站內(nèi)容再好，都無法被人識別立倍。
如果你真的希望讓頁面更加“多彩”灭红，那么不要讓色彩都混雜到一起，試著使用卡片式設計來承載不同的色彩口注，合理的排布变擒，既可以讓色彩更加靈活，也可以保證組織性和流動感寝志。
亮色+亮色/深色+深色
就像淺色+淺色的搭配一樣娇斑，亮色+亮色和深色+深色的搭配策添，都是因為飽和度接近而造成的辨識度問題。毫無疑問毫缆，這也是要規(guī)避的問題唯竹。
你真的覺得這個問題不會發(fā)生到你身上？那么在做單色配色方案的時候苦丁，要小心這一點浸颓。即使是經(jīng)驗豐富的設計師，也可能會在這個時候掉坑里旺拉。
總之产上，千萬注意配色的對比度。如果這幾個色彩是必須使用的話蛾狗，不妨將頁面設計成滾動變色的晋涣，這樣你可以在保證對比和可讀性的同時，讓色彩也都用上沉桌。
“K”黑
我們常說的CMYK中的K是黑色谢鹊。許多設計師的設計作品會橫跨網(wǎng)頁版和印刷品，有時候會在做印刷品的設計的時候留凭，會誤將網(wǎng)頁配色中的黑色用上去撇贺。實際上網(wǎng)頁中的純黑（#000000）和印刷中的黑色有著巨大的差別，早在PS 7.0中冰抢，黑色的CMYK色標其實是C75 M68 Y67 K90松嘶，而常說的系統(tǒng)黑K100 在更廣泛的RGB配色中，也只是較深的灰色而已挎扰！
印刷品翠订，包括我們?nèi)粘Ｉ钪械脑S多黑色，其實分很多種遵倦，它們通常是某種色彩疊加了很多之后產(chǎn)生的效果尽超，比如渡鴉的羽毛是黑色的，但是你仔細看它會微微泛藍梧躺。
所以似谁，在設計這個黑色的時候，最好是挑選一個帶有你的品牌色調(diào)的黑色（而非#000000）掠哥。這樣可以在印刷的時候更容易協(xié)調(diào)巩踏。（比如讓黑色帶有一點藍色的色調(diào)，來抵消文本內(nèi)容中的黃色色調(diào)）舉個例子续搀，上面Wonderland的頁面中塞琼，黑色實際上是#0a0a0b。
結(jié)語
其實今天所談到的所有的配色的問題禁舷，幾乎都是關(guān)于對比度和可讀性問題的彪杉。實際上毅往，只要確保色彩和內(nèi)容的對比度和配色美感，幾乎所有的色彩都是能用的派近。
譯者：陳子木
來源：學ui網(wǎng)
