認識深色UI網頁設計基本原則

如今，深色UI網頁設計非常流行。許多用戶喜歡它。這也是一個巨大的用戶體驗趨勢。但是數碼產品如何選擇呢？為什麼今天越來越多的公司選擇它作為品牌風格？有哪些原則？

儘管物理學家說黑色不是一種顏色，而是沒有光，但大多數用戶都會將深色主題稱為黑色。艾薩克牛頓爵士甚至沒有在配色方案中尋找它！然而，在談到基本的黑色UI網頁設計原則時，顏色並不是唯一需要考慮的因素。還有大約五個需要考慮。

1) 顏色

當我們討論深色主題螢幕時，背景顏色是首先出現的東西。事實上，深色主題並不一定與黑色的使用有關。最好將其視為昏暗的主題，因為顏色可以從深藍色到灰色以及其他用於深色主題界面的顏色。

大多數設計師認為黑色形成強烈的對比。然而，根據托普塔爾專家意見，您不應該使用純黑色 (# 000000) 作為背景或表面顏色。它適用於邊框或其他較小的 UI 元素。這裡面有很多道理。

2) 對比

設計深色UI元素的最大挑戰之一是實現最佳的顏色對比度。對比度對於分離視覺元素和建立可理解的文本是必要的。

應特別注意深色用戶界面中文本的對比度。谷歌的材料設計深色主題推薦使用深灰色（#121212）作為表面顏色。

還值得檢查其他 UI 元素之間的對比，例如不同顯示器和電子設備上的地圖、按鈕、欄位和圖標。但是，如果 UI 元素之間存在難以察覺的分離，則設計會顯得過於原始。

根據 Web 內容可訪問性指南 (WCAG)，文本的視覺呈現必須具有至少 4.5:1 的對比度。一個例外是對比度至少為 3:1 的大尺寸文本。因此，設計人員應始終確保文本在深色背景下閱讀時不會引起問題。因此，也介意明暗模式在選擇時。

3）負空間

成功的黑暗主題的最基本要素之一是巧妙地使用負空間。

基本上， 負空間 （通常稱為空白）是布局中留空的區域。它可能不僅在您放置的物體周圍。(design4users)

極簡主義設計不僅關乎有什麼，也關乎沒有什麼。明智地使用，負空間將使黑暗的界面更具可讀性，並使人們更容易吸收訊息。

在設計不佳的界面中，深色主題會使數字產品變得沉重和過飽和。為了平衡這一點，設計師可以通過在稀疏的最小設計中使用負空間來減輕黑暗主題。

4) 排版

排版就是關於樣式化的文字。

黑暗界面中的每一段文字都需要仔細研究。問題是雙重的：可讀性和對比度。

首先，注意字體大小。文本應該足夠大，以獲得良好的可讀性（深色背景上的小文本更難閱讀）。

其次，文字和背景之間必須有足夠的對比。

數以千計的數字字體可以輕鬆突出標題和主要訊息。設計師可以通過增加對比度和調整字體大小、字符間距、行高等來減少可讀性問題。

5) 海拔

在繪圖方面，深度或高度意味著創建顯示某物正面或側面的對象。就好像你從天花板上俯視房間，看到一切的頂部。但是，您無法查看對象的側面、正面或背面。

為什麼我們需要這種深度？深度有助於強調界面的視覺層次。大多數現代設計系統使用標高來傳達深度。深度感對應於自然世界。我們的眼睛感知深度，我們生活在一個三維世界中。

深色主題並不意味著平面界面。在燈光主題中，燈光和陰影營造出深度感。深色主題更難達到深度，因為它們主要包含帶有稀有顏色口音的深色表面。但是，設計人員可以使用具有適當配色方案的文本的三個或四個高度級別來傳達這種深度。

6) 深色 UI 與淺色 UI

黑色的UI設計應始終與淺色一起考慮。決定很大程度上取決於多種因素，不僅包括用戶的觀點，還包括業務目標、市場狀況和界面設計的當前趨勢。這就是為什麼光明與黑暗也將是一個標準。