如今大眾使用手機的時間越來越長，很多APP和系統考慮到用戶的用眼問題，而紛紛推出深色模式。本文將介紹深色模式的實用UI設計技巧，讓大家更好地掌握這種風格的設計。
什麼是深色模式?
經過多年的人因研究，開發人員發現：用戶使用手機熒屏的時間越長，眼睛更容易出現疲勞;而與淺色模式相比，深色模式有助於緩解用戶眼睛疲勞，尤其是在光線不足或夜間的情況下，深色模式能給用戶提供更好的工作環境。
提起深色模式，很多人或許以為它是近兩年的產物，事實上在《The Matrix》中那個「黑色背景+綠色代碼」已是最早的深色模式。不過，這種經典的深色外觀在80年代時已經過時，取而代之的是在白色背景使用黑色文本模仿紙張上的墨水外觀。
在過去將近三十年時間裏，這也一直是UI設計的規範之一。直到2018年Google證實深色模式可以節省電池壽命，並將該功能置入於Android操作系統後，其他操作系統隨後也陸續推出了深色模式。
深色模式的UI設計技巧有哪些?
總的來說，深色模式就通過將亮度降低，並為用戶的創造一個即使在黑暗條件下也能舒適地使用產品的環境，並減少熒屏對眼部造成的疲勞感。作為近兩年最受用戶歡迎的UI設計風格之一，iOS和Android等操作系統都將深色模式作為UI中的重要組成部分。
要做好深色模式的UI設計，大家可嘗試以下這個幾個實用技巧：
UI設計技巧 ① ：避免純黑
不要在純黑(#000000)界面中使用純白文字，如此高的對比度會更容易讓眼睛產生不適感。
相比完全純黑的背景，使用深灰色作為界面的主要配色會更為安全。一來，深灰色界面與白色文字的對比度會比純黑色背景與白色文字的對比度要低，能降低色彩對眼部造成的壓力;二來，深灰色的界面也有很多配色方案選擇，投影也會更加好做。
UI設計技巧 ② ：避免使用太高飽和度的前景色
飽和度高的色彩雖然在淺色界面上看起來很好，但在深色界面上容易讓用戶產生視覺抖動，減低界面內容的易讀性。
將前景色的飽和度控制在50-200左右，可以提高內容的可讀性、減少視覺抖動。事實上，前景色的飽和度減低並不會影響UI的表現力，並緩解用戶在使用產品時產生的視覺疲勞。
UI設計技巧 ③ ：符合無障礙顏色對比度標準
確保內容在深色模式下依然清晰易讀，內容與背景之間要保持合適的對比度。在Google設計規範中，推薦文本內容與背景之間的對比度至少要達到15.8：1的比例。
UI設計技巧 ④：對文字使用不同透明度強調不同層級
文字在深色主題下會被默認為純白色(#FFFFFF)，但這種是一種很明亮的顏色，容易在深色背景下產生視覺「抖動」，因此Google設計規範推薦使用稍暗的白色文字，可以防止畫面形成太強的對比，如：
• 最需要強調的文本不透明度為87%
• 中等強調的文本不透明度為60%
• 禁用文本使用38%的不透明度
* 需要注意的是，淺色文本在深色背景上會比深色文本在淺色背景上顯得更粗，因此在深色模式下要使用更細的字體。
UI設計技巧 ⑤ ：考慮界面傳達的情緒
淺色背景轉換成深色背景並非改一下配色就可以，你還需要考慮界面所傳達的情緒。
一般來說，不同背景顏色所帶來的感知是不同的，這意味深色主題和淺色主題在傳達信息上是有區別的，容易讓用戶產生不同的情緒。要善用這種區別，就需要重新思考產品特性，並及時優化UI設計。
UI設計技巧 ⑥：善用灰色營造空間感
與淺色主題設計一樣，深色主題設計同樣需要透過清晰的層級結構，以突出界面的重要元素。
而空間感就是我們用來傳達元素層次結構的工具。一般來說，界面空間感越強，投影就越寬。在淺色模式下，我們會使用陰影來突出空間感;但同樣方法在深色模式是行不通的，這主要是因為深色背景很難看出陰影，因此最好使用不同的亮度來表達元素的空間感。
UI設計技巧 ⑦：允許用戶從普通模式切換到深色模式
如果讓系統決定何時開啟或關閉深色主題，這可能會對用戶而言是一個非常糟糕的體驗。因為相當於從用戶手上搶奪了控制權，讓系統為他們做決定。
因此產品最好不止有自動切換模式，還應該允許用戶使用UI控件打開/關閉深色主題，避免因為剝削了用戶的控制權而給用戶帶來不好的體驗。
上述技巧都做好後，就需要留意UI在淺色模式和深色模式下的外觀細節，並根據不同情況適時調整好UI設計，確保用戶在不同環境下都能暢通無阻地使用產品。
香港網頁提供一站式數碼營商方案服務，包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務，全方位滿足客戶的業務需要，歡迎隨時聯絡我們，香港網頁是您開拓網路商機的最佳伙伴。
聯絡電話: 37499734 電郵地址: [email protected] 網址: www.hkweb.com.hk
