網站設計的公認公式是白色背景、黑色或深灰色文字以及遍布各處的品牌色彩。絕大多數效果最好的網站都使用此公式產生了很大的效果。
但這是唯一可以成功的公式嗎？
在本文中，我將深入研究如何創建具有深色背景的設計，以及為什麼有時最好使用此概念，因為有時具有深色背景的網站的性能可能優於白色。
很多WordPress主題，例如SquareSpace、Webflow、Weebly或許多其他網頁設計工具，它將自動加載帶有黑色文本的白色背景頁面。你當然可以更改它，但是這種組合是公認的規範。
但這不是絕對的。
如果操作正確，網站的深色背景可能會比你想像中的效果要好。
任何網頁設計的首要問題是用戶想要什麼？哪種顏色適合媒體、品牌、預期用途、目標受眾、以及在用於訪問網站的設備上可以使用什麼顏色？
大多數客戶認為這將是帶有黑色或深色sans serif字體的白色背景。
為什麼是白色？
將黑白相結合視為規範的主要原因有兩個。
但這實際上植根於歷史：打印和可讀性。
當我在紙上做所有事情時，米白色的紙張意味著使用黑色墨水更容易。你需要的染料更少，這是一個更清潔，更輕鬆的工作。那些最初印刷的小冊子是用淺色紙上的黑色墨水印刷的，印刷一直保持了這種狀態。
另一個原因是可讀性。對於許多用戶，尤其是在移動設備上的用戶而言，暗黑白色並不總是能很好地閱讀。那些具有像散光這樣的視覺障礙的人很難分辨出深色背景上的白色文字。
使瞳孔像黑屏一樣擴大的任何事物的確意味著損害會被放大，從而使頁面非常難以閱讀。
但是，出色的設計可以克服這些缺點，並且可以以白色背景根本無法實現的方式產生影響，傳達情感並影響訪問者。
你需要了解的深色背景知識
我在這裡說很多深色，但不是黑。
黑色是網站深色背景的明顯選擇，但這不是唯一的選擇。深色背景有數千種，而黑色只是其中之一。深紅色、深綠色、深藍色等可以在正確的情況下使用正確的設計。
在設計中，色彩的使用涉及很多方面，在這裡，我不會太深入說明，我將專注於與深色背景有關的那些方面。
黑暗的視覺感知
ProBlogger早在2009年進行的一次民意調查顯示，網絡用戶並不像我最初想像的那樣偏愛白色背景。
儘管現在已經10年了，但民意調查發現只有47％的受訪者更喜歡總是淺色的背景。另有36％的人說這取決於博客，有10％的人說他們總是喜歡黑暗，而有7％的人無法決定。
大多數人可能更喜歡白色背景，但有43％的人說他們喜歡深色或這應取決於整個網站的設計。
四年後，在CSS-Tricks上進行的進一步調查發現，大多數受訪者實際上更喜歡深色背景上的淺色文字。明確地說，這是一次關於使用編碼工具的民意調查，詢問用戶喜歡哪種配置。在做出回應的人中，有63％的人更喜歡深色背景。
對比方面
標題生動的“The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention”是一項有趣的研究。
它研究了網頁設計中背景顏色和文本顏色之間的對比度是決定其可用性的決定因素，而不是所用顏色決定。我這裡不是在談論美學，純粹是可用性。
研究發現，極化對可讀性的影響大於背景的實際顏色。因此，只要兩種顏色之間有足夠的對比度，所以保持黑色白色的可讀性、易讀性和易用性就一樣有效。
對比度在網頁設計中非常重要。
一些現代網站嘗試使用低對比度設計，但結果卻不盡相同。甚至蘋果公司也在自己的網站上嘗試了一些頁面。
低對比度頁面較難閱讀，不適用於視障人士，需要讀者付出更多努力才能理解。這些都不能保證良好的頁面設計。
這與對比方面背道而馳，這是讀者的苦惱。在我看來，只要對比度高到可以幫助提高可讀性的程度，使用什麼都沒關係。
可讀性方面
在某些情況下，深色背景可能是理想的設計選擇。
大量文字的網站不是這種情況之一。對比度對頁面的可讀性有較大影響，而顏色選擇也有影響。根據雅各布·尼爾森（Jacob Nielsen）的說法，否定性文本（即深色背景上的白色文本）在閱讀方面比在白色背景上為黑色文本的肯定性文本要花費更多的精力，並且閱讀速度較慢。
除此之外，只要文本和背景之間的對比度足夠，可讀性就不會受到影響。
我要補充一點。只要設計正確，在深色背景上使用白色文本不會影響可讀性。
對我來說，這意味著：
- 靈活利用塊之間的空白空間。
- 在簡短句子、簡短段落、簡短單詞和易於消化的副本方面遵循正確的可讀性規則。
- 仔細選擇字體，以最大程度地提高在不同屏幕尺寸上的可讀性。
- 在深色背景下保持最大對比度。
- 避免使用深色背景的漸變和陰影。
字體選擇在任何網頁設計中都很重要，但在處理深色背景時更是如此。
我通常選擇serif字體，因為它們為設計增添了層次感或雅緻感，並使用sans serif字體實現現代性。在深色背景上處理淺色文本時，選擇範圍僅縮小到sans serif。
sans serif字體可以工作，但需要讀者做更多工作才能理解。當使用較小的屏幕或手機時，這種情況會加劇。
情感感知方面
我們都知道，不同的顏色可以喚起不同的情感。我已經知道了很多年，最近的研究也對此進行了支持。我們知道，不同的顏色組合會以不同的方式影響大腦，一些營銷人員認為，單獨使用顏色可以增加轉換率。
色彩心理學告訴我們，當我們看到色彩時，我的大腦會發出激素釋放的信號，這會使我們感到情緒激動。不同的顏色會導致釋放出不同的激素，這可能會影響我們對特定顏色的感覺。
這與我們對顏色的含義的理解相結合，可以用來對我進行營銷和銷售。
我對顏色的含義已根深蒂固。
例如，黑色通常被關聯爲有力的顏色、色情、神秘、正式和優雅。白色給人以清新、清新、現代、年輕、通達和熟悉的感覺。紅色代表大膽、有力、自信和感性。
每種顏色在讀者中引起不同的感受，這就是為什麼，作為網頁設計師會花費過多的時間來嘗試找到完美的組合，然後再花更長的時間說服客戶選擇的顏色是行得通的。
深色背景的好處
深色背景並不適合所有設計或項目。
如果適合，深色背景可以為網頁設計增添個性、影響力、強調感和一些情感反應。我已經介紹了所有內容，因此讓我看看在設計中使用深色背景的其他好處。
減少眼睛疲勞
顯然，使用深色背景時，閱讀更長的時間更容易。即使閱讀速度較慢，但只要該對比度足夠寬且設計聽起來不錯，我就可以長時間閱讀而不會造成眼睛疲勞。
就眼睛而言，深色背景對睡眠的影響也較小。屏幕將包含比傳統網頁少的藍/白光。現在，人們普遍認為這種藍光會影響我們的晝夜節律、影響我們的睡眠、引起疾病、並對我的日常生活造成負面影響。
時尚
這是每個女人都有黑色小禮服或豪華轎車是黑色的原因。它增加了一種風格和優雅感，這是其他地方難以企及的。只要總體設計是高質量的，就可以使用深色背景立即賦予這種感覺，從而影響購買決策，建立情感聯繫或使讀者更加重視自己的見解。
熟識
具有深色背景的網站過去非常罕見。我看到的那些代碼經常根本不遵循可用性規則，並且表現不佳。
隨著更多使用深色背景的程序UI，遊戲越來越多地在各種設備中使用菜單、導航和過場動畫以及夜間模式中的深色背景，深色不再是那麼罕見。
我隨處可見。來自許多Adobe產品，Windows 10暗模式、Mac OS暗模式、Adobe Photoshop和Dreamweaver以及許多其他領先程序。
現在，我更習慣於在深色背景上看到淺色的文本，它不會像以前那樣驚奇或對我的期望產生負面影響。
脫穎而出
儘管具有深色背景的網站越來越受歡迎，但它們仍然是少數。一旦有人登陸頁面，這提供了一種影響力。甚至在閱讀單詞或掃描圖像之前，你的頁面就已經給人留下了深刻的印象，並使讀者以嶄新的眼光看待設計。
只要該設計以最初的第一印象為基礎，並具有良好的可讀性、良好的空間利用率和一些有影響力的圖像，那麼你就是贏家。
淡入背景
黑暗的用戶界面和背景提供了最初的影響，但隨後可以悄悄地淡入背景以使內容顯現出來。在UI設計中更是如此，但在網站設計中也具有相關性。精心放置的具有正確對比度的圖像和內容將在背景本身不可見的情況下更加突出。
這可以幫助你在明亮的環境（例如戶外或強光）下閱讀頁面內容。在較暗的環境中，白色或淺色背景會使眼睛疲勞並且難以看清。在較亮的環境中，深色背景可能相反。儘管我無法針對特定的環境進行設計，但是深色背景的好處是可以在陽光下很好地閱讀。
使用深色背景的缺點
在設計中使用深色背景並不普遍。這種風格有一些缺點，因此不應低估它們。
認真考慮
深色背景不適用於所有客戶或每種情況。與傳統的淺色背景相比，此設計主題需要更多的思考和規劃。它還將需要進行更多的用戶測試，以確保在啟動之前平衡正確。並非所有品牌方案都可以在深色背景下使用，並非所有產品或主題都可以使用它。
一些客戶仍然以消極的方式感知黑暗的背景。即使你認為要走黑暗的路，與說服傳統路線的人相比，說服客戶的難度可能更大。
精心計劃
所有設計選擇都需要仔細計劃、選擇顏色、字體和圖像。使用深色背景可以為你帶來更多思考。白色/深色空間對於阻止光線滲入黑暗並確保文本可讀性變得更加重要。圖像和設計元素需要真正分開，以使其清晰易讀，並防止光或顏色洩漏到其他區域。
因此，在深色背景下，開發過程可能會花費更長的時間。可能需要更多的用戶測試，並且還需要考慮對移動體驗的更多改進。
細心的平衡
在設計中使用深色元素會增加頁面的重量。太多的重量會使頁面感到笨重。在處理深色背景時更是如此。每個頁面都需要非常仔細地平衡，以防止它感到沉重，並展現其固有的優雅而不是笨拙。
這是一個艱鉅的問題，需要進行大量優化和在頁面上使用大量白色/黑色空間來保持平衡。
輔助功能
可訪問性是深色設計無法引起廣泛關注的一個方面。在設計的最早階段，每個網頁設計都應考慮可訪問性。幸運的是，只要你遵循有關文本和背景之間高對比度的一般規則，大多數用戶將能夠閱讀和理解你的頁面。
網頁內容可訪問性指南（WCAG）要求普通文本的文本和背景之間的顏色對比為4.5.1，大文本的文本之間為3：1。它建議在黑色背景上使用白色文本，但對於其他顏色，只要對比度保持盡可能寬，就會有一些餘地。
我之前提到過散光，因為這是一種由於使用深色背景而受到負面影響的損害。散光是角膜的缺陷，導致視力模糊或失真。在黑暗的背景下，瞳孔必須膨脹才能閱讀，從而加劇了模糊感。
儘管這只是在許多人的世界中造成的一種損害，但大約33％的美國人患有某種形式的散光。如果你將其擴展到全球受眾，則將近三分之一的潛在受眾可能在某種程度上具有散光。這是每個設計都需要考慮的問題。
什麼時候應該使用深色背景
在許多情況下，深色背景很適合網頁設計。它們包括：
- 當你想要產生最初的視覺效果時。
- 天黑時適合客戶的品牌形象。
- 展示豪華或高檔產品或服務時。
- 設計是現代的還是簡約的。
- 當你需要在設計中創造戲劇性或神秘性時。
什麼時候不應該使用深色背景
同樣，有時背景較暗不是你的最佳選擇，應不惜一切代價避免。即使客戶堅持使用一種。
- 當頁面內容沉重時。
- 當品牌聲音不支持它時。
- 當已知目標受眾對它的反應不佳時。
- 如果頁面上發生了很多事情，則白色/黑色空間非常寶貴。
- 當意圖是B2B或官方（例如政府）時。
深色背景主題的10個示例
為了向你展示我對正確完成後看起來很棒深色背景的理解是什麼意思，我收集了十個使用它們的出色主題。每種設計在設計上都略有不同，但都具有共同點，它們使用深色背景以達到最佳效果。
Divi with Web Freelancers Layout Pack
Divi WordPress主題必須是最靈活的主題之一。儘管其許多模板都是淺色背景，但你可以在幾秒鐘內將其反轉。將Web Freelancers Layout Pack添加到Divi，你可以使用任何深色背景的一流網站在任何用途上。
你需要做的就是安裝兩個主題，激活主題，打開頁面並將背景切換為深色。然後使用頁面部分的“Extend Background Colour”選項將所有內容統一顯示。
Astra with Photographer Starter Site
在攝影師演示網站中使用Astra框架可提供出色的黑色背景網站。充分利用空間，對比鮮明的字體和簡約設計，使主題脫穎而出。
Genesis with Parallax Pro
Parallax Pro是Genesis框架的主題，這個框架使用交替的單色設計效果很好。這是另一種簡單的設計，可讓頁面內容容易閱讀，並提供了一個很好的示例，說明深色背景如何如此出色地工作。
Lens From PixelGrade
PixelGrade的鏡頭採用網格設計，以深色主題為我提供作品集或圖像展示。黑暗的背景只有在側邊菜單中才真正可見，主題以一種非常有趣的方式使用對比色，添加黑白以外的顏色才能真正脫穎而出。
Divi with Electrician Dark Pack
另一個Divi主題，這次是黑暗的電工著陸頁。這是一個非常高質量的主題，具有深色背景，鮮明的版式，對圖像的很好利用以及一些補充性的色彩，以增加興趣。這是個人的最愛，我認為它的效果非常好。
Aldo from ThemeRex
ThemeRex的Aldo是使優雅外觀變得容易的主題。這是一個毫不費力的主題，適用於許多主題，並且在深色背景下平衡了許多頁面內容，而不會導致頁面過載。這是一款非常出色的設計，可以在任何屏幕尺寸上正常運行。
Neve Pro with Dark Parallax Images
帶有深色視差圖像的Neve Pro使用Neve主題及其所有功能，速度和功能。結合深色背景和互補性主題，此WordPress主題是最好的主題之一。頁面平衡良好，加載迅速，內容引導讀者平穩地瀏覽頁面，而你一無所獲。
Telling with Gamer Layout
The Telling with Gamer Layout是一個很好的示例，說明了如何使用其他大膽的顏色來豐富深色背景。不要被遊戲玩家的綽號所迷惑，你可以將這個主題用於任何事物，而且看起來仍然很棒。強大的菜單、出色的佈局、出色的清晰度和對比度以及對空間的充分利用只是其中的一些優點。
Nextout
Nextout是一個非常時尚的WordPress主題，它使用較淺的深色背景，具有對比色和補色。使用引人入勝的頂部滑塊，你可以向下滾動到平舖的佈局，該佈局非常適合於面向圖像的網站。流暢的導航和精心設計的佈局，絕對是這裡更好的Web主題之一。
Hestia Pro with Dark Parallax Images
帶有深色視差圖像的Hestia Pro是另一個非常光滑的主題，它可以使深色背景與淺色元素、對比色和出色的版式保持平衡。頁面豐富但並不過度，無論你使用哪種類型的屏幕，平衡都恰到好處。它可以在任何設備上運行，適用於任何主題，並且絕對是可以嘗試的設備。
結論：在網頁設計中使用深色背景
關於現代互聯網最好的事情之一就是表達自己和打破規則的自由。雖然其中一些規則絕對不應該被打破，但有些可以。例如自17世紀以來就一直存在的傳統的黑白設計。
我認為，如果仔細觀察，深色背景看起來會很棒。他們產生了最初的影響，然後逐漸淡出背景。它們在大多數光線條件下都可以很好地工作，並且平衡使用巧妙地利用空間的頁面可以使背景比白色背景更好地強調頁面的產品或意圖。
深色設計不適合每個項目或每個意圖，比白色背景需要更多的規劃，完善和測試。但是，做得好，我認為所有額外的時間和精力都值得！
你想知道如何將自己的技能包裝成一個人人都想購買的百萬線上課程，並且自動化營運，享受你的理想生活嗎？
在這個60分鐘的線上培訓裡面，你將會學到：
– 秘密 #1：我是如何在只有高中學歷的情況下吸引到超過4000位的付費學生加入我的線上課程，並且一直持續有新的學生加入 (P.S. 這個線上課程現在售價超過兩萬)
– 秘密 #2：如何在沒有任何專業技能的情況下製作成功的線上課程？(P.S. 真正的「專家」不一定能經營起一個成功的線上課程)
– 秘密 #3：如何最大化你的課程利潤，不被課程平台給吃掉，同時也不用跟別人做低價競爭？
– 秘密 #4：一個99%的人都不知道的重要銷售觀念，你只要理解這個觀念，就能確保你的課程能大賣，不管你課程售價是多少
0 Comments