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

深色UI設(shè)計(jì)的6條原則

盡管物理學(xué)家說(shuō)黑色不是一種顏色，而是沒(méi)有光，但大多數(shù)用戶都會(huì)將深色主題稱(chēng)為黑色。然而，在談到基本的黑色UI設(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ì)比。然而您不應(yīng)該使用純黑色(#000000)作為背景或表面顏色。它適用于邊框或其他較小的UI元素。這里面有很多道理。

2）對(duì)比

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

還值得檢查其他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ù)空間（通常稱(chēng)為空白）是布局中留空的區(qū)域。它可能不僅在您放置的物體周?chē)?

極簡(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)。

5個(gè)深色UI設(shè)計(jì)最佳實(shí)踐

在領(lǐng)先的設(shè)計(jì)中，工作室在那里工作，您可能會(huì)發(fā)現(xiàn)最佳儀表板實(shí)踐在產(chǎn)品設(shè)計(jì)調(diào)色板中應(yīng)用深色主題。以下是精心挑選的最偉大的，以證明其使用的最佳實(shí)踐：

1、應(yīng)用設(shè)置

2、元界

3、音樂(lè)網(wǎng)絡(luò)應(yīng)用程序

4、金融科技儀表盤(pán)

5、銀行應(yīng)用

深色UI的優(yōu)缺點(diǎn)

從移動(dòng)屏幕到大型電視，一切都可以看到深色的用戶界面設(shè)計(jì)。黑暗的主題可以表達(dá)力量、奢華、精致和優(yōu)雅。或者完全。然而，創(chuàng)建一個(gè)黑暗的用戶界面往往伴隨著許多風(fēng)險(xiǎn)和陷阱，如果實(shí)施不當(dāng)，將無(wú)法達(dá)到預(yù)期。在潛入“黑暗面”之前，設(shè)計(jì)師需要三思而后行。以下是利弊：

何時(shí)使用深色界面將是一個(gè)真正的專(zhuān)業(yè)人士：

如果它是由品牌的配色方案證明的。

設(shè)計(jì)簡(jiǎn)約而簡(jiǎn)約，僅包含幾種類(lèi)型的內(nèi)容。

適合上下文和使用，例如夜間娛樂(lè)應(yīng)用等。

有必要減少眼睛的壓力，例如長(zhǎng)時(shí)間使用的分析頁(yè)面、儀表板等。

打造明亮、有效的外觀。

為了喚起爭(zhēng)議，強(qiáng)烈的情緒，添加一個(gè)陰謀和神秘的光環(huán)。

營(yíng)造奢華和尊貴的感覺(jué)。

保持視覺(jué)層次。

何時(shí)遠(yuǎn)離黑暗界面是一個(gè)更好的主意：

網(wǎng)站上有很多文字（在深色背景下難以閱讀）。

屏幕上有很多混合內(nèi)容。

適用于具有大量表單、組件和小部件的B2B應(yīng)用程序。

如果設(shè)計(jì)需要多種顏色，深色模式UI設(shè)計(jì)也將是一個(gè)缺點(diǎn)。

在這種情況下，您有更多正確和錯(cuò)誤的黑暗主題使用證明。

您想創(chuàng)建自己的網(wǎng)站嗎？-歡迎與設(shè)計(jì)聯(lián)系！

為您的下一個(gè)界面應(yīng)用深色主題UI設(shè)計(jì)而不是傳統(tǒng)界面的決定必須以極端現(xiàn)實(shí)主義的方式進(jìn)行。不應(yīng)該出于錯(cuò)誤的原因選擇它，無(wú)論是企業(yè)還是用戶——看起來(lái)時(shí)尚、時(shí)尚、與眾不同或模仿別人的設(shè)計(jì)等。

設(shè)計(jì)人員需要為他們的選擇提供令人信服的理由，并考慮內(nèi)容、使用環(huán)境以及展示設(shè)計(jì)的設(shè)備。并證明產(chǎn)品的業(yè)務(wù)目標(biāo)是合理的。聘請(qǐng)專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)公司提供幫助，例如設(shè)計(jì)。

結(jié)論

因此，令人敬畏的黑暗主題可能適用于一些獨(dú)特的數(shù)字產(chǎn)品，但在沒(méi)有真正必要的情況下難以實(shí)現(xiàn)常規(guī)產(chǎn)品。簡(jiǎn)單是成功的關(guān)鍵。它們將是呈現(xiàn)簡(jiǎn)約內(nèi)容、數(shù)據(jù)可視化、媒體網(wǎng)站和娛樂(lè)平臺(tái)的良好解決方案。并且更可能無(wú)法很好地適應(yīng)一些具有各種數(shù)據(jù)、許多文本塊或具有不同內(nèi)容的頁(yè)面的復(fù)雜B2B平臺(tái)。因此，請(qǐng)花點(diǎn)時(shí)間仔細(xì)考慮并做出正確的決定。