30
Dec.21
網頁新知

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

回上一頁

黑暗時代的降臨

「深色模式」為近年最夯的背景主題(意思是手機、平板、電腦等介面底色,以黑色或深灰色為主。)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. 【如何選擇網站設計素材?】應該使用圖庫照片,還是請攝影商來拍照?
報價洽詢