提起Dark Mode，相信很多設計師和用戶都並不陌生。尤其是2019年之後，Dark Mode更成為當今的一大主流UI設計趨勢，確保用戶在低亮度環境下亦能舒適地與3C設備進行交互，甚至最大限度減少用戶的眼疲勞。

Inspirr網頁製作提醒，Dark Mode設計可不是簡單地處理黑色背景和內容顏色反轉就可以。那麼，Dark Mode該如何設計?今天小編就為大家簡單介紹設計Dark Mode時需要掌握的UI設計技巧吧!

▍ 什麼是Dark Mode?

從字面意思來說，Dark Mode就是一種有利於介面在黑暗模式下正常使用的高對比度模式。與傳統的Light Mode相比，Dark Mode可以讓用戶在夜間長時間瀏覽網站/APP時不再忍受刺眼的螢幕強光，並為他們提供更舒適的操作體驗。

什麼是Dark Mode

那麼，Dark Mode具體對用戶體驗有哪些好處?

☑ 減少對眼睛的傷害*。特別在光線不好的情況下，Dark Mode可以最大程度地為用戶提供更舒適的瀏覽體驗。

☑ 節省設備的電量。實驗證明：比起Light Mode，Dark Mode可以節省15%的電量;如果與100%的亮度相比，Dark Mode甚至可以節省高達60%的電量。

☑ 增加產品的可讀性。根據經驗，黑底白字的對比效果比白底黑字更明顯，這意味着Dark Mode可以為用戶提供更好的閱讀體驗，有助於延長他們的使用時間。

☑ 加強產品的視覺衝擊效果。黑色與亮色的配色方案往往更容易製造出驚艷的視覺效果，同時在整體產品的情感表達上也會更加濃烈。

* 目前對於Dark Mode是否可以螢幕對眼睛的傷害仍存在爭議，比如對於部分散光的人來說，他們在閱讀黑色背景上的內容時，瞳孔需要適當放大讓更多光線進入眼睛，從而導致眼睛更容易出現疲勞。

▍ Dark Mode該如何設計?掌握這3個UI設計技巧

UI設計技巧①：Dark Mode的設計層級

在設計Light Mode時，我們通常會使用陰影等UI設計方式來區分介面的層級關係，而且效果非常自然。

UI設計技巧之Dark Mode的設計層級

但在Dark Mode下，利用陰影來區分層級的效果並不明顯，因此我們需要運用黑色的不同灰度來加強頁面的層級性，保證用戶可以在最短時間內完成自己的目標。

UI設計技巧②：圖標與文字的合理搭配

圖標不建議在Dark Mode下使用純色、高飽和度的顏色，用戶長時間閱讀時容易出現重影而造成視覺疲勞。因此圖標使用的配色方案，應盡可能降低飽和度和明度，確保彩色在深色背景上可以達到最佳的視覺效果。

UI設計技巧之圖標與文字的合理搭配

設計Dark Mode時，切記不要直接採用純白色文字，這會給用戶造成很大的視覺刺激而引起視覺疲勞。為了介面可以達到最佳的觀感和層次性，建議使用不同程度的灰色來對文字進行層級區分，以便用戶更容易地捕捉介面中的重點信息。

UI設計技巧③：對重要圖片進行特殊處理

在APP設計過程中，不可避免出現大量廣告圖片和產品圖片，而目前主流的圖片規範以乾淨的淺色底為主。然而，設計Dark Mode時若出現大量淺色底圖片，圖片區域會顯得比較突兀。

UI設計技巧之對重要圖片進行特殊處理

面對這種情況，普通圖片建議還是以淺色底為主，但是比較很重要的圖片可能需要適當地對圖片色彩進行特殊處理如主體以外區域透明化等，以保證圖片在DarkMode下更加協調。

什麼時候需要使用Dark Mode

最後，什麼時候需要使用Dark Mode?一般來說，閱讀類產品會更適合長期開啟Dark Mode，因為它們會藉助黑底白字的高對比度來讓用戶視線保持集中。此外，其他場景則可以根據用戶意願來自行選擇，以增加用戶的掌控性。