網絡為我們的網站建設工作提供了各種各樣的顏色選擇。對于迅速抓住用戶注意力來說,顏色是一個極好的工具,它能夠為視覺提供興趣點和制造影響,并通過創造對比度來增強頁面信息的可讀性。顏色也是許多設計趨勢的中心,包括平面和材料風格。
想想,你是否曾有用錯顏色的時候?有什么色調或色彩組合,你應該在網站設計之初就應該避開?一句話...有的!今天我們看看在網站建設和App設計及開發時應該避免的顏色或顏色組合。如果你已經犯了其中一個錯誤,我們也會提供其他建議。
1.霓虹燈效果(霓虹色)
霓虹色也許能創造更有趣、扭曲的個性元素,它可以在網頁設計的色彩應用中添加很多的流行色或元素。 不幸的是,對于用戶的眼睛來說,這簡直就是一場“災難”,這種顏色應用會給用戶一種“淚流滿面”的感覺,因為所有的一切都在傷害他們的視覺。
霓虹色的主要問題在于,它們太亮導致不容易閱讀,并導致配對的背景往往不是太暗就是太淺的問題。當與文本一起使用時,霓虹色目前的可讀性問題主要在于背景,因為文字幾乎滲入到背景之中無法辨識。霓虹色需要搭配的背景通常過于搶眼,分散了設計中的主要信息。
嘗試這樣做:從霓虹色的顏色中去除一些亮度,使它們在屏幕上有一個更暗,更微妙的外觀。
Orange You Glad網站在很多部分“幾乎”將霓虹色融入到他們主頁的設計中。這種主題的共同點在于,他們將霓虹色用于較小的元素并使用微妙的顏色變化,使粉紅色,黃色和綠色這些更容易被視覺接受的色系。
2.“振動”色
當在網頁設計中將高飽和度的顏色配對時,它們會產生一種“振動效應”,其中顏色似乎在模糊或發光的運動中游移。事實上,你不想這樣做。
這種振動對于用戶來說是令人不安的,正如顏色理論家約瑟夫·阿爾伯斯在他的經典指南“顏色的相互作用”中所概述的:“這種最初令人興奮的效果同時也會讓人感覺到侵略性,長時間看著它們甚至會使我們的眼睛感覺不舒服。人們發現它很少被使用,除了在廣告中為了創造出驚艷的效果,但是結果卻令人不快,厭惡以及極力想去避免的。”
當你在進行網站建設工作的時候,你幾乎可以預測什么顏色在你將他們搭配在一起時會產生“震動效果”。
· 使用的顏色都是高飽和度的;
· 色輪上的互補色;
· 在色輪上間隔180度的顏色;
· 將顏色轉換為灰度,導致對比度異常小。
對于這種搭配,一個典型的例子就是將明亮的紅和綠搭配在一起。流行的“圣誕節”組合是最大(最廣泛使用)的“罪魁禍首”。這些組合還存在可區分性問題,因為它們對于具有色盲的人來說是不可辨識的。
嘗試這樣做:如果你實在必須使用“振動”顏色來組合的話,請使用他們的中間色(最好是中性色)來過度他們。
3.在亮色中疊加另外的亮色
這是常見的配色錯誤之一。也許是因為你可以在后面的工作中用打印項目來完成它,也許是因為某些屏幕設置,使其可行,但淺色的光色組合最終的結果是你很難將他們區分開。
每一次這種嘗試帶來的結果都是是閱讀變得異常困難。
這個案發現場似乎在這里:我們在banner的設計中經常配對圖像和白色文本,但文本卻落在圖像的一個亮色的部分。在這一點上,這些詞是難以被辨識和讀取的。它發生的方式比它應該更頻繁。如果每個字母都不清楚導致無法讀取,你需要重新思考怎么去調整它。
嘗試這樣做:幸運的是,這個問題很容易修復:
· 選擇具有一致顏色背景的新圖片。
· 在有大量顏色變化的圖像頂部于文本使用彩色框。
· 考慮全色圖像疊加以增加背景和文本元素之間的對比度。
4.任何各種各樣色彩的隨意疊加
雖然這幾乎不用多說什么,五顏六色的網站是沒有任何實際作用的。(試想一下你打破了多少顏色理論規則當你構思一個五顏六色的網站的時候。)
各種各樣的顏色組合具有壓倒性和強大的吸引力。或許他們可能在最初會抓住用戶的注意,但是一旦用戶意識到內容無法辨識,他們將會毫不猶豫的選擇離開。
嘗試這樣做:如果要使用寬范圍的調色板(如趨勢一樣),那么考慮選擇顏色色塊或卡片樣式,其中顏色可以與元素相關聯。這種容器式的設計將允許更多的顏色靈活使用,同時創造一種組織和流動的感覺。
5.明配明,暗配暗
就像在亮色中疊加另外的亮色以及將類似的高飽和度的顏色組合在一起將會導致的問題一樣。這種形式應該是不言而喻的,單純的只要避免它們。
如果你認為這不會發生在你身上,當你使用單調配色方案時就要小心。許多設計師就是在這里“一失足成千古恨”的。
嘗試這樣做:相比之下。如果要使用多種明亮的顏色或深色,請將它們視為滾動網站中的屏幕選項。在這種情況下你可以使用所有你喜歡的黑暗或明亮的顏色,但仍能保持文本的可讀性和可用性。(瞧,雙贏!)
6.“K”黑(純黑)
特別是如果你頻繁地在打印和web項目之間切換(正如許多設計師所做的)純黑可能會因為失誤而進入web項目。總所周知,“K”黑存在于打印項目中,因為它在數字項目中只使用一塊板或“純”黑色(#000000),這種顏色只是平的。
想想現實,所有黑色的組合實際上都被作用在他上面的其他色調給過濾了才使它呈現了豐富性。(即使烏鴉的羽毛在合適的光線下看起來常常帶著藍色或偏紫色。)你可以使用包括其他顏色的黑色組合來創造豐富,深色的顏色,并保存純黑色用于打印。
嘗試這樣做:嘗試根據你的品牌匹配黑色的同時加入一些其他的提示顏色,或添加正確的顏色內涵。當你將黑色調亮為灰色的程度越深,輔助顏色就越容易被看到。試著考慮黑色與周圍的顏色一致,考慮每個的輔助色和它們如何相互關聯。(例如,使用帶有更多藍色色調的黑色來抵消文本或其他元素的橙色或黃色色調。)例如,上面的Wonderland的顏色是#0a0a0b。
總結
上文提到的應該盡力避免的這些顏色和組合最大原因是他們缺乏可讀性和對比度。實際上,我們還是有很多顏色可以選擇,幾乎任何色調都可以雜適當的條件下發揮他們的作用。
但有一個要點:在你實際網頁設計工作中,你可能不得不使你所用的顏色比你預期的偏暗或偏輕,才能更好的和你的設計更好的協調。記住,顏色都是來自周圍環境的屬性(包括屏幕上的背光),必須進行相應的調整。
新聞熱點
疑難解答