為 Web 設計時絕對必須避免的 5 種顏色選擇

Web 一直在變得更加可視化。 好的內容仍然是王道，但最好將內容包裝在吸引人的視覺包裝中以脫穎而出。

對於設計專業人士來說，這不是什麼大問題。 他們完全沉浸在色彩理論和色彩心理學中。

但是，越來越多的網絡用戶試圖讓他們的網絡內容跟上網絡不斷增長的視覺特性，他們又會怎樣呢？ 即使是那些總結色彩理論和色彩心理學的網絡文章，雖然在分享設計中色彩的基礎知識方面表現出色，但可能會被那些沒有圖形專業背景的人誤解，從而導致潛在的災難性決定。

那麼，您必須絕對避免在您的網頁中選擇哪些顏色？

純黑

讓我們從黑色開始 - 純黑色 - 在 HTML 中編碼為 #000000。

驚訝嗎？ 黑色無處不在，不是嗎，就像大多數網頁上的文字、無處不在的小黑裙和夜空一樣？

好吧，純黑色並不像你想像的那麼常見。 真正的#000000 純黑色實際上是一種不自然的顏色。 它在自然界中不存在。 純黑色需要吸收所有光譜的光，而這在自然界中根本不會發生。 自然色更加混合和柔和。

因此，純黑色不是我們的眼睛習慣看到的東西。 這很苛刻。 它很突出（這是讓那件黑色小禮服如此受歡迎的部分原因）。 那麼為什麼不在網頁設計中使用它呢？ 畢竟，涉及色彩心理學的網絡文章強調它與魅力、精緻、權力和權威的聯繫。 那些鼓勵使用黑色的文章有錯嗎？

他們一點都沒有錯。 黑色可​​以用來在人們的腦海中激起一些強大的積極聯想。 關鍵是使用不是純黑色的黑色。

因為純黑色不是自然色，大腦更難處理。 將您的黑色從 #000000 提升到 #111111 或類似的非常深的灰色，您仍然可以獲得黑色的引人注目的好處，而不會給訪問者的大腦帶來太多壓力。

界面元素中的霓虹色

霓虹色雖然引人注目，但也有同樣的壓倒大腦的傾向。 作為自然界中不出現的顏色，它們對大腦來說是陌生的，並且比更柔和、混合的顏色更難處理。

將令人瞠目結舌的霓虹色保存為圖形亮點，使您的視覺內容更流行，而不是在您的界面元素中。 並確保您不僅使用它們來吸引對圖形的注意，而且將訪問者的注意力吸引到關鍵信息所在的頁面部分。

換句話說，將霓虹色遠離文本將疊加在其上的背景，例如主文本、側邊欄、導航功能區或按鈕的背景。

使用更自然、輕微混合的顏色作為文本內容的背景，更容易在眼睛上看到。 作為文本或文本背景的霓虹色往往會使眼睛疲勞。 這可能會給網站及其提供的內容留下潛意識的負面印象，這是您最不想要的。 您想讓訪問者對您的業務產生積極的感覺。

涵蓋要避免的前兩種顏色選擇的一般規則是避免在 HTML 編碼中具有色譜極端特徵的顏色 - 零和 F，尤其是在文本和文本背景中。 將它們稍微遠離不自然的絕對純色，它們將更容易被大腦處理，並給訪問者留下更良好的印象。

對比度過高的組合

除了避免過於純正的顏色外，還要注意某些顏色的組合。

儘管紅色和綠色是聖誕節的主食，但它在網站設計中帶來了許多問題——以至於設計師之間的一首小詩寫道：“永遠不應該看到紅色和綠色，中間沒有顏色”

這是因為大腦處理這兩種顏色的方式。 紅色是最溫暖的顏色，可以刺激大腦的活動。 這是最容易引起我們注意的顏色。 紅色攪動大腦。

另一方面，綠色註冊為冷色。 它使大腦平靜。 將兩者放在一起會使大腦處於處理視覺的不舒服位置，同時試圖激發和平靜它。 它使大腦陷入衝突。 這不利於給人留下好印象。

與前面提到的在文本或文本背景中使用霓虹色一樣，同時使用紅色和綠色會給訪問者留下與產品本身無關的負面潛意識印象。 相反，這種負面印象來自處理衝突顏色的內部不適。

紅色和綠色還有第二個問題。 在西方世界的文化中，人們習慣於將紅色與停止或否聯繫起來，將綠色與進行或是聯繫起來。 再次，它迫使大腦處理一組相互矛盾的輸入，使大腦感到不舒服。 當大腦不舒服時，它會將那種不安的感覺轉移到你的提供上——根本不是你想要的。

儘管對比不那麼極端，但同樣的原理也適用於紅色和藍色的組合，並且在較小程度上也適用於所謂的二次色（即紫色、綠色或橙色）的任何組合。

紅色和藍色在非常溫暖的顏色和非常冷的顏色之間產生衝突。 二次色是原色的混合色（紫色是紅色和藍色的混合色，綠色是藍色和黃色的混合色，橙色是黃色和紅色的混合色）根本不能很好地混合。 這些組合中的任何一種都太強大了，大腦無法舒適地處理。

再次，爭取更自然、混合的顏色，避免使用色輪上直接相反的顏色或在溫暖和涼爽方面相反的顏色所帶來的大腦疲勞組合。

對比度過低的組合

但是，這並不意味著您應該只使用在色調（顏色）和值（相對暗度）方面幾乎相同的顏色。 你也可以朝那個方向走得太遠，給訪客帶來不同類型的問題。

在白色背景上放置淺色文本，例如白色背景上的粉紅色或黃色或淺藍色或淡紫色，會使訪問者難以辨認文本內容。 深色背景上的深色文本也是如此，例如黑色上的紅色或寶藍色或洋紅色。

其他特定的不良組合是綠色配黃色或黃色配綠色，以及帶有黑色、藍色或洋紅色的紅色背景。 您不僅冒著色盲訪問者可能根本看不到文字的風險，而且還會激怒非色盲訪問者，讓他們緊張地閱讀您所寫的內容。 我們在這裡不是在談論潛意識印象。 我們正在談論他們有意識地對您使您的網站如此難以閱讀而感到惱火。

當您將文本疊加在圖像上時，此錯誤尤其普遍，例如在頁面頂部的大標題圖像中。 始終確保您的所有文本在您的標題圖像上都能清楚地閱讀，而不僅僅是大部分。

多色背景

為網頁設計師提供免費紋理背景的網站比比皆是，您可能會覺得它們會讓您的網站脫穎而出。 但是，如果您選擇使用一個，請小心。 帶紋理的背景會冒著忙碌的風險，從而分散訪問者對您的內容的注意力。 與將文本疊加在圖像上一樣，您面臨著文本在紋理背景中丟失的危險。

在選擇帶紋理的背景時要小心。 避免使用早期互聯網時代流行的刺眼、撞色背景。 這些背景通常由微小的重複設計組成，具有明亮、衝突的顏色，文本很容易丟失。

今天的趨勢是一種微妙、自然的外觀，讓您的背景有一種深度感，而不會分散注意力。 網站調色板的一般經驗法則是使用不超過三種顏色，絕對不超過四種。

在使用紋理時要小心謹慎的同樣警告也適用於漸變（背景的顏色或暗度從背景的一部分逐漸變化到另一部分的圖形元素）。 避免將它們用於頁面上的多個文本塊。 並避免使用包含文本顏色的漸變，以免您的文本在漸變中丟失。 始終將您的文本放置在框或背景的清晰區域中，並與其他視覺元素留出足夠的空間，以便您的文本清晰地突出。

結論

為網站選擇顏色顯然不僅僅是挑選您喜歡的顏色或您在另一個網站上喜歡的一組顏色。 它涉及的不僅僅是從在線文章中獲取孤立的推薦，因為無需了解更多信息即可了解顏色選擇。

顏色是說服力非常強大的工具。 小心使用，它可以幫助訪問者採取您希望他們採取的行動。 如果使用不慎，它可能會讓訪問者對您的業務產生一種模糊的不安感，甚至讓他們有意識地對您網站的使用困難感到惱火。

將您的顏色選擇集中在易於大腦使用的顏色上，並繼續學習如何選擇可以很好地協同工作的顏色，您將很好地設計一個您的顏色與您的所有其他元素協同工作的網站網站來實現您的目標。