自iOS和Andriod相繼推出Dark Mode後，Dark Mode成為了APP UI設計中的一個必備選項。從Light Mode過渡到Dark Mode，我們需抽離原來的慣性思考，從UX設計的視角出發，探討用戶到底想要怎樣的Dark Mode效果。

UI設計基礎知識

UI設計基礎知識：Dark Mode需遵循哪些設計原則?

在進行APP UI設計之前，首先我們要建立對Dark Mode設計的正確思維，才能確定UI設計的出發點及落腳點。也就是說，在設計開始到結束這個過程，我們都需要遵循Dark Mode的設計原則來進行。

● Dark Mode設計原則一：保證操作上的熟悉性

UI設計基礎知識

無論產品有多少Mode，我們都應該確保用戶能通過相同操作而獲得相對應的預期結果，而不是影響用戶的慣性操作動線，否則會破壞用戶對產品早已形成的心理模式。

● Dark Mode設計原則二：維持平台上的一致性

UI設計基礎知識

Dark Mode的設計工作並不能僅針對某一終端設備來進行，而是針對所有終端設備。這就要求我們需要綜合各個終端設備的特點，通過不斷試驗來保持產品UI設計在各終端設備的屬性上，能保持一致性，包括顏色、外觀以及模式切換等。

● Dark Mode設計原則三：清晰的信息層級

UI設計基礎知識

無論用戶正在使用哪種模式，他在相同界面所關注的內容都是一致。因此，我們在設計Dark Mode過程，需繼續保持Light Mode的信息層級特性，確保用戶能輕鬆地獲取想要的信息以及完成主要的操作。

● Dark Mode設計原則四：無障礙操作

UI設計基礎知識

關於「無障礙操作」這一設計原則，我們大致可分解為四個方面來分析：

1. 視覺無障礙設計：應遵循WCAG(Web內容無障礙指南)。

2. 聽覺無障礙設計：應確保界面所有空間在沒有聲音時都能正常使用。

3. 行動無障礙設計：應給予輔助功能(如語音控制功能)，幫助用戶完成操作。

4. 認知無障礙設計：應配備輔助理解工具(如翻譯、釋義、鏈接等)，幫助用戶理解其含義，並保證信息的準確性。

● Dark Mode設計原則五：保持簡單

UI設計基礎知識

「簡單交互」一直是用用戶體驗設計的核心，目的是讓產品更容易被使用，甚至沒有經驗的用戶都可通過簡單的學習快速掌握產品的正確使用方法。在進行APP UI設計過程中，Dark Mode應延續Light Mode「簡單交互」的原則，保證用戶獲取簡單、掌握簡單、操作簡單。

UI設計基礎知識：Dark Mode的設計要點有哪些?

簡單來說，Dark Mode的設計原則主要是偏向「交互」而言，下面我們從「視覺設計」出發，探討如何從視覺方面將Dark Mode更好地呈現出來。

● Dark Mode設計要點一：避免使用純黑色

在我們的認知中，純黑色往往被定義為「百搭色」，然而套入到UI設計中純黑色卻是一個極為尷尬的顏色。即使在Light Mode的界面中，我們很少會看到純黑色的元素出現，而是大多會使用深灰色替代。

UI設計基礎知識

純白背景與純黑文字搭配，我們的眼睛往往會因為這種巨大的顏色亮度落差而造成視覺刺激，需要一定時間去適應。另外，長時間觀看這種光線對比懸殊的畫面，眼睛也會明顯感覺到疲勞。

UI設計基礎知識

同樣道理，純黑背景與純白文字組合所呈現視覺感受殊途同歸，結論不言而喻。因此我們在設計Dark Mode界面時，盡量避免使用純黑色。

● Dark Mode設計要點二：避免使用高純色

在Light Mode下，純度(飽和度)較高的顏色往往會帶給我們激情、生動、活力的感受，同時純色與淺色背景恰到好處的對比度，也會讓我們的眼睛很好地適應且不會出現違和或刺眼的感覺。

UI設計基礎知識

但個別純色放到Dark Mode後會出現恍惚、震動的視覺感受，可讀性差，容易造成視覺疲勞，影響界面整體的用戶體驗。面對這種情況，我們需要對顏色進行減低純度的處理，使元素更容易被識別和閱讀。

● Dark Mode設計要點三：規範使用顏色對比

在UI設計過程中，無論是文字、圖標、圖標，亦或是圖像，都應該確保與背景顏色的對比度，以幫助有視力障礙或閱讀困難人群能更好地使用產品，從而提升產品的價值。

UI設計基礎知識

根據WCAG2.0(Web內容無障礙指南2.0)對比度的標準，界面元素和背景的對比度至少要滿足AA級標準，即4.5：1的對比度。在iOS規範中，建議對比度至少滿足7：1;在Andriod規範中，因涉及不同背景層級的概念，甚至要求主要文字與最深色背景的對比度達到15.5：1的標準。

UI設計基礎知識

因此，我們可以根據產品特性建立屬於自己的對比度規範標準，保證讓用戶看到且影響判斷的元素，與背景顏色對比度不低於4.5：1。

● Dark Mode設計要點四：規範設置元素層級

界面內各元素都是用戶獲取信息的途徑，規範設置界面內元素的層級，是提升產品用戶體驗的關鍵。從Light Mode 過渡到Dark Mode，保持各個元素層級一致的同時，Dark Mode也需要一套全新的設計理論方法：

UI設計基礎知識

▶ 組件(包括區塊、卡片等)：設置不同透明度，通過與背景色不同明度的對比，產生視覺效果差，讓用戶第一時間看到他們想要的內容，還可清晰地分辨距離自己更近的內容。

▶ 文字：不同優先級的文字，設置不同透明度，有效保證用戶的閱讀效率，同時還能幫助他們更好地區分清晰邏輯關係，從而提高該界面的用戶留存率。

● Dark Mode設計要點五：自由切換

UI設計基礎知識

當我們使用智慧型手機啟動Dark Mode時，系統會彈出「是否支持根據時間自動切換兩種模式」的問題，這種建議有點像「到了傍晚手機會自動切換到護眼模式」的設置。然而，護眼模式不會將手機界面進行翻天覆地的改變，而是適當地增加屏幕色溫、減低顏色對比度，以緩解眼睛疲勞之感。

但Dark Mode明顯不是這樣的操作，而是改變我們對界面的視覺感受，價值Dark Mode並不能完全傳達Light Mode相同的情感訴求，這種設置有可能會給用戶提供更差的體驗。因此，將選擇權交給用戶，在應用顯眼的位置或設置界面提供選項，讓用戶根據喜好自由且主動地完成模式切換。

● Dark Mode設計要點六：場景測試

UI設計基礎知識

Dark Mode並不適合所有場景使用，例如在日間白天或燈光環境下，Light Mode的白底黑字特性能讓界面很好地適應光照環境下，但這種情景下反而會讓Dark Mode處於劣勢。

我們需要根據不同的使用後環境、場景的特性，針對Dark Mode中的元素進行反覆測試與調整，保證無論是白天還是夜間，都能清晰讀取信息、舒適實用應用，最終達到理想效果。

了解有關Dark Mode的設計原則與要點後，我們需要將這些理論融入到實際的UI設計工作中，並驗證這些理論是否符合公司的產品應用以及用戶的使用場景。如果您還想了解更多關於Dark Mode的內容或正在找一間專業靠譜的網站製作公司為您打點一切，歡迎諮詢我們!