如今，深色UI網(wǎng)頁(yè)設(shè)計(jì)非常流行。許多用戶喜歡它。這也是一個(gè)巨大的用戶體驗(yàn)趨勢(shì)。但是數(shù)碼產(chǎn)品如何選擇呢？為什么今天越來(lái)越多的公司選擇它作為品牌風(fēng)格？有哪些原則？

盡管物理學(xué)家說(shuō)黑色不是一種顏色，而是沒(méi)有光，但大多數(shù)用戶都會(huì)將深色主題稱為黑色。艾薩克牛頓爵士甚至沒(méi)有在配色方案中尋找它！然而，在談到基本的黑色UI網(wǎng)頁(yè)設(shè)計(jì)原則時(shí)，顏色并不是唯一需要考慮的因素。還有大約五個(gè)需要考慮。

1) 顏色

當(dāng)我們討論深色主題熒幕時(shí)，背景顏色是首先出現(xiàn)的東西。事實(shí)上，深色主題并不一定與黑色的使用有關(guān)。最好將其視為昏暗的主題，因?yàn)轭伾梢詮纳钏{(lán)色到灰色以及其他用于深色主題界面的顏色。

大多數(shù)設(shè)計(jì)師認(rèn)為黑色形成強(qiáng)烈的對(duì)比。然而，根據(jù)托普塔爾專家意見，您不應(yīng)該使用純黑色 (# 000000) 作為背景或表面顏色。它適用于邊框或其他較小的 UI 元素。這里面有很多道理。

2) 對(duì)比

設(shè)計(jì)深色UI元素的最大挑戰(zhàn)之一是實(shí)現(xiàn)最佳的顏色對(duì)比度。對(duì)比度對(duì)于分離視覺(jué)元素和建立可理解的文本是必要的。

應(yīng)特別注意深色用戶界面中文本的對(duì)比度。谷歌的材料設(shè)計(jì)深色主題推薦使用深灰色（#121212）作為表面顏色。

還值得檢查其他 UI 元素之間的對(duì)比，例如不同顯示器和電子設(shè)備上的地圖、按鈕、欄位和圖標(biāo)。但是，如果 UI 元素之間存在難以察覺(jué)的分離，則設(shè)計(jì)會(huì)顯得過(guò)于原始。

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

3）負(fù)空間

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

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

極簡(jiǎn)主義設(shè)計(jì)不僅關(guān)乎有什么，也關(guān)乎沒(méi)有什么。明智地使用，負(fù)空間將使黑暗的界面更具可讀性，并使人們更容易吸收訊息。

在設(shè)計(jì)不佳的界面中，深色主題會(huì)使數(shù)字產(chǎn)品變得沉重和過(guò)飽和。為了平衡這一點(diǎn)，設(shè)計(jì)師可以通過(guò)在稀疏的最小設(shè)計(jì)中使用負(fù)空間來(lái)減輕黑暗主題。

4) 排版

排版就是關(guān)于樣式化的文字。

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

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

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

數(shù)以千計(jì)的數(shù)字字體可以輕松突出標(biāo)題和主要訊息。設(shè)計(jì)師可以通過(guò)增加對(duì)比度和調(diào)整字體大小、字符間距、行高等來(lái)減少可讀性問(wèn)題。

5) 海拔

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

為什么我們需要這種深度？深度有助于強(qiáng)調(diào)界面的視覺(jué)層次。大多數(shù)現(xiàn)代設(shè)計(jì)系統(tǒng)使用標(biāo)高來(lái)傳達(dá)深度。深度感對(duì)應(yīng)于自然世界。我們的眼睛感知深度，我們生活在一個(gè)三維世界中。

深色主題并不意味著平面界面。在燈光主題中，燈光和陰影營(yíng)造出深度感。深色主題更難達(dá)到深度，因?yàn)樗鼈冎饕瑤в邢∮蓄伾谝舻纳钌砻?。但是，設(shè)計(jì)人員可以使用具有適當(dāng)配色方案的文本的三個(gè)或四個(gè)高度級(jí)別來(lái)傳達(dá)這種深度。

6) 深色 UI 與淺色 UI

黑色的UI設(shè)計(jì)應(yīng)始終與淺色一起考慮。決定很大程度上取決于多種因素，不僅包括用戶的觀點(diǎn)，還包括業(yè)務(wù)目標(biāo)、市場(chǎng)狀況和界面設(shè)計(jì)的當(dāng)前趨勢(shì)。這就是為什么光明與黑暗也將是一個(gè)標(biāo)準(zhǔn)。