網(wǎng)絡(luò)為我們的網(wǎng)站建設(shè)工作提供了各種各樣的顏色選擇。對于迅速抓住用戶注意力來說，顏色是一個極好的工具，它能夠為視覺提供興趣點和制造影響，并通過創(chuàng)造對比度來增強頁面信息的可讀性。顏色也是許多設(shè)計趨勢的中心，包括平面和材料風(fēng)格。

想想，你是否曾有用錯顏色的時候?有什么色調(diào)或色彩組合，你應(yīng)該在網(wǎng)站設(shè)計之初就應(yīng)該避開?一句話...有的!今天我們看看在網(wǎng)站建設(shè)和App設(shè)計及開發(fā)時應(yīng)該避免的顏色或顏色組合。如果你已經(jīng)犯了其中一個錯誤，我們也會提供其他建議。

1.霓虹燈效果(霓虹色)

霓虹色也許能創(chuàng)造更有趣、扭曲的個性元素，它可以在網(wǎng)頁設(shè)計的色彩應(yīng)用中添加很多的流行色或元素。 不幸的是，對于用戶的眼睛來說，這簡直就是一場“災(zāi)難”，這種顏色應(yīng)用會給用戶一種“淚流滿面”的感覺，因為所有的一切都在傷害他們的視覺。

霓虹色的主要問題在于，它們太亮導(dǎo)致不容易閱讀，并導(dǎo)致配對的背景往往不是太暗就是太淺的問題。當(dāng)與文本一起使用時，霓虹色目前的可讀性問題主要在于背景，因為文字幾乎滲入到背景之中無法辨識。霓虹色需要搭配的背景通常過于搶眼，分散了設(shè)計中的主要信息。

嘗試這樣做：從霓虹色的顏色中去除一些亮度，使它們在屏幕上有一個更暗，更微妙的外觀。

Orange You Glad網(wǎng)站在很多部分“幾乎”將霓虹色融入到他們主頁的設(shè)計中。這種主題的共同點在于，他們將霓虹色用于較小的元素并使用微妙的顏色變化，使粉紅色，黃色和綠色這些更容易被視覺接受的色系。

2.“振動”色

當(dāng)在網(wǎng)頁設(shè)計中將高飽和度的顏色配對時，它們會產(chǎn)生一種“振動效應(yīng)”，其中顏色似乎在模糊或發(fā)光的運動中游移。事實上，你不想這樣做。

這種振動對于用戶來說是令人不安的，正如顏色理論家約瑟夫·阿爾伯斯在他的經(jīng)典指南“顏色的相互作用”中所概述的：“這種最初令人興奮的效果同時也會讓人感覺到侵略性，長時間看著它們甚至?xí)刮覀兊难劬Ω杏X不舒服。人們發(fā)現(xiàn)它很少被使用，除了在廣告中為了創(chuàng)造出驚艷的效果，但是結(jié)果卻令人不快，厭惡以及極力想去避免的。”

當(dāng)你在進行網(wǎng)站建設(shè)工作的時候，你幾乎可以預(yù)測什么顏色在你將他們搭配在一起時會產(chǎn)生“震動效果”。

· 使用的顏色都是高飽和度的;

· 色輪上的互補色;

· 在色輪上間隔180度的顏色;

· 將顏色轉(zhuǎn)換為灰度，導(dǎo)致對比度異常小。

對于這種搭配，一個典型的例子就是將明亮的紅和綠搭配在一起。流行的“圣誕節(jié)”組合是最大(最廣泛使用)的“罪魁禍?zhǔn)?rdquo;。這些組合還存在可區(qū)分性問題，因為它們對于具有色盲的人來說是不可辨識的。

嘗試這樣做：如果你實在必須使用“振動”顏色來組合的話，請使用他們的中間色(最好是中性色)來過度他們。

3.在亮色中疊加另外的亮色

這是常見的配色錯誤之一。也許是因為你可以在后面的工作中用打印項目來完成它，也許是因為某些屏幕設(shè)置，使其可行，但淺色的光色組合最終的結(jié)果是你很難將他們區(qū)分開。

每一次這種嘗試帶來的結(jié)果都是是閱讀變得異常困難。

這個案發(fā)現(xiàn)場似乎在這里：我們在banner的設(shè)計中經(jīng)常配對圖像和白色文本，但文本卻落在圖像的一個亮色的部分。在這一點上，這些詞是難以被辨識和讀取的。它發(fā)生的方式比它應(yīng)該更頻繁。如果每個字母都不清楚導(dǎo)致無法讀取，你需要重新思考怎么去調(diào)整它。

嘗試這樣做：幸運的是，這個問題很容易修復(fù)：

· 選擇具有一致顏色背景的新圖片。

· 在有大量顏色變化的圖像頂部于文本使用彩色框。

· 考慮全色圖像疊加以增加背景和文本元素之間的對比度。

4.任何各種各樣色彩的隨意疊加

雖然這幾乎不用多說什么，五顏六色的網(wǎng)站是沒有任何實際作用的。(試想一下你打破了多少顏色理論規(guī)則當(dāng)你構(gòu)思一個五顏六色的網(wǎng)站的時候。)

各種各樣的顏色組合具有壓倒性和強大的吸引力。或許他們可能在最初會抓住用戶的注意，但是一旦用戶意識到內(nèi)容無法辨識，他們將會毫不猶豫的選擇離開。

嘗試這樣做：如果要使用寬范圍的調(diào)色板(如趨勢一樣)，那么考慮選擇顏色色塊或卡片樣式，其中顏色可以與元素相關(guān)聯(lián)。這種容器式的設(shè)計將允許更多的顏色靈活使用，同時創(chuàng)造一種組織和流動的感覺。

5.明配明，暗配暗

就像在亮色中疊加另外的亮色以及將類似的高飽和度的顏色組合在一起將會導(dǎo)致的問題一樣。這種形式應(yīng)該是不言而喻的，單純的只要避免它們。

如果你認(rèn)為這不會發(fā)生在你身上，當(dāng)你使用單調(diào)配色方案時就要小心。許多設(shè)計師就是在這里“一失足成千古恨”的。

嘗試這樣做：相比之下。如果要使用多種明亮的顏色或深色，請將它們視為滾動網(wǎng)站中的屏幕選項。在這種情況下你可以使用所有你喜歡的黑暗或明亮的顏色，但仍能保持文本的可讀性和可用性。(瞧，雙贏!)

6.“K”黑(純黑)

特別是如果你頻繁地在打印和web項目之間切換(正如許多設(shè)計師所做的)純黑可能會因為失誤而進入web項目?？偹苤?，“K”黑存在于打印項目中，因為它在數(shù)字項目中只使用一塊板或“純”黑色(#000000)，這種顏色只是平的。

想想現(xiàn)實，所有黑色的組合實際上都被作用在他上面的其他色調(diào)給過濾了才使它呈現(xiàn)了豐富性。(即使烏鴉的羽毛在合適的光線下看起來常常帶著藍(lán)色或偏紫色。)你可以使用包括其他顏色的黑色組合來創(chuàng)造豐富，深色的顏色，并保存純黑色用于打印。

嘗試這樣做：嘗試根據(jù)你的品牌匹配黑色的同時加入一些其他的提示顏色，或添加正確的顏色內(nèi)涵。當(dāng)你將黑色調(diào)亮為灰色的程度越深，輔助顏色就越容易被看到。試著考慮黑色與周圍的顏色一致，考慮每個的輔助色和它們?nèi)绾蜗嗷リP(guān)聯(lián)。(例如，使用帶有更多藍(lán)色色調(diào)的黑色來抵消文本或其他元素的橙色或黃色色調(diào)。)例如，上面的Wonderland的顏色是#0a0a0b。

總結(jié)

上文提到的應(yīng)該盡力避免的這些顏色和組合最大原因是他們?nèi)狈勺x性和對比度。實際上，我們還是有很多顏色可以選擇，幾乎任何色調(diào)都可以雜適當(dāng)?shù)臈l件下發(fā)揮他們的作用。

但有一個要點：在你實際網(wǎng)頁設(shè)計工作中，你可能不得不使你所用的顏色比你預(yù)期的偏暗或偏輕，才能更好的和你的設(shè)計更好的協(xié)調(diào)。記住，顏色都是來自周圍環(huán)境的屬性(包括屏幕上的背光)，必須進行相應(yīng)的調(diào)整。