【深色主題的網頁設計】探討黑暗模式的優缺點，配色如何使用？

黑暗時代的降臨

「深色模式」為近年最夯的背景主題（意思是手機、平板、電腦等介面底色，以黑色或深灰色為主。）Youtube、Facebook、Line、Twitter 等社群平台紛紛加入黑暗時代，為使用者提供除了白色（淺色）主題外的更多選擇。
  

一、為什麼各大平台都開放了暗色主題/深色模式？

既蘋果 IOS 13 和 Google 推出深色模式，開始愈來愈多產品、用戶，都開始用這個風格的設計。它被視為是一種時髦、前衛的新UI設計典範。
Google 曾闡述了深色模式的三點優勢，分別為改善續航、提高低視力和強光敏感者的可視性，以及讓用戶在光線不足的環境下更好地使用設備。
有了Apple、Google、Facebook等大公司的領銜，各大平台也相繼跟風，參與這場黑色盛世。
   

二、暗色主題的緣起

雖然近年深色主題的風潮興於 Apple、Google，但其實黑色模式早在電腦誕生的初期就已經被使用。當時的裝置僅能支援簡單色系，彩色顯示器是在 1980 年代後才逐漸普及。
後來Mac在 1984 年帶來了全新介面，使用白色為介面底色，才一改業界黑底的顯示，也是電腦的劃時代改革，沿用至今。至於為何當年 Apple 會使用白色背景，這點 Apple 並未透露，但大概能夠聯想到是模擬「紙張」來符合人類的閱讀習慣。
  

三、使用黑暗主題的平台

做為內容消費型的 Netflix，也以深色為設計基底，這使得用戶能更集中注意在內容上，以延長使用時間；批踢踢 PTT 線上論壇，也是參考了工程師撰寫程式的介面，黑底白色，以顯眼的色差讓用戶能夠快速識別重要訊息。
 

黑暗主題的優缺點

2018 年，用戶關係管理（CRM）軟體服務提供商 SalesForce的設計師，為了研究哪種模式是最適合儀表板的，於是做了市調，大部分的用戶回饋，深色主題的圖表，會使反應更快且更加精準。這點在股票交易軟體得到了驗證。
然而深色模式優劣個說紛紜，以下針對黑暗主題進行優缺點比較：
 

一、深色模式的優點：

1. 省電

普渡大學研究人員表示，當手機亮度設定 30-40% 時切換到深色模式時，平均能節省 3 - 9 ％ 的電量；若亮度設定 100%，切換到深色模式時，竟可以節省 39 - 47 ％ 的電量。
　

2. 對視力低 / 強光敏感客戶友善

雖然深色模式已被證實沒有護眼的功能，但對於視力較低，或對強光敏感的用戶而言，卻是相對友善的。因為眼睛所需要接受的亮度面積大幅度的減少。
　

3. 低光環境專注提升也更舒適

亮色背景下的文字看久了容易疲乏，然而深色背景卻能補足這個缺點，將重要內容置於焦點，令你的眼睛更舒適，尤其是在黑房或飛機等昏暗環境。


 

二、深色模式的缺點：

1. 習慣轉換的不舒適感

散光為當代文明病，因於眼睛習慣在亮光下閱讀暗色文字，當切換回暗色背景時，會讓一些用戶在閱讀時感到不適。然這多出現於初始體驗暗色模式的用戶，大部分人在習慣這種模式之後，眼睛也會跟著適應。
　

2. 虹膜擴張引發的眼睛肌群疲乏

因虹膜在白底環境不需要太過擴張來吸收更多光線，但黑底的環境卻需要仰賴虹膜擴張。因此若長期使用深色模式，容易使得眼睛肌群疲勞。
　

網頁想要做暗色系，要留意什麼?

市面上的網頁設計，仍舊以白底、淺色底居多。為顧及網站的使用者體驗，製作深色網站時需要特別留意以下問題：
  

一、 設計細節留意：

1. 避免使用純黑色

高對比的色差容易讓人視覺疲勞，這不僅體現在純黑背景，純白背景也有同樣的情況。


 

2. 調整文字與飾色的色階

文字與裝飾色 / 配色在深色背景裡，宜使用較淺的色階，使得閱讀性提升。較淺的顏色不僅能加強 UI 視覺表現立，更能保持恰當對比度，減緩視覺疲勞。


    
 

二、網頁設計案例

愛貝斯網路深耕網頁設計領域已有 17 年之久，超過 1000 家以上的合作廠商。
其中當然不乏深色背景主題的客戶，參考清單如下：
 
台灣百合工業 | 網站設計案例
漢來大飯店 | 網站設計案例
這一鍋皇室鍋物 | 網站設計案例
起家雞韓式炸雞 | 網站設計案例
慕森設計 | 網站設計案例
比克斯服飾  | 網站設計案例
超人集運 | 網站設計案例
永沛得 | 網站設計案例
超悅廣告 | 網站設計案例
星星閃爍音樂設計 | 網站設計案例
永安棧  | 網站設計案例
     

網頁設計文章推薦

1. 【UX/UI設計是什麼？】強化使用者的網站體驗，SEO經驗談
2. 【飯店/民宿網頁設計】消費者要的不只是一張床，UX/UI設計談
3. 【如何選擇網站設計素材？】應該使用圖庫照片，還是請攝影商來拍照？
4. 【CIS企業識別的重要性】網站想要做的好，企業識別不能少
5. 【 SEO 文案怎麼寫才好看？】排名很重要，排版更重要！
6. 【深色主題的網頁設計】探討黑暗模式的優缺點，配色如何使用？
7. 【個資外洩怎麼辦？】身為購物車的管理業主，你必須知道的三大資安知識！
8. 【如何選擇網站設計素材？】應該使用圖庫照片，還是請攝影商來拍照？