設(shè)計(jì)師的主要職責(zé)之一，就是為產(chǎn)品定制合理的視覺，基于目標(biāo)用戶的特征和產(chǎn)品的設(shè)計(jì)目標(biāo)，給用戶特定的感覺。UI和UX設(shè)計(jì)師需要在這個過程中通力協(xié)作，而 UI設(shè)計(jì)師更是要確保產(chǎn)品的 UI 和視覺最終落地。

在設(shè)計(jì)過程中，有諸多因素會影響 UI 給用戶的感受。其中，色彩是最重要也是最明顯的一個部分。

許多設(shè)計(jì)師會在選擇配色方案的時候，會使用淺色的、明亮的背景色彩。其實(shí)，大眾和設(shè)計(jì)師的這個傾向是有科學(xué)依據(jù)的。在白色的背景上使用黑色的文本，可讀性是最佳的。在不同的測試和研究當(dāng)中，淺色背景上的深色文本，比起深色背景上的淺色文本，閱讀性更強(qiáng)。在一項(xiàng)著名的研究當(dāng)中，受試者面對深色背景閱讀淺色文本的時候，視覺疲勞的現(xiàn)象表現(xiàn)得更加明顯。（Bauer, D., Bonacker, M., and Cavonius, C. R. 1983）

而另外一方面，人們習(xí)慣了在白色背景上查看圖片，閱讀深色的文本。這種狀況已經(jīng)延續(xù)了上百年。而在中國，這種狀況更是延續(xù)了幾千年。向上追溯到35萬年前的舊石器時代，當(dāng)時的原始人類同樣是使用木炭在淺色的墻壁上書寫。

而如今，許多 UI界面的設(shè)計(jì)并沒有一直遵循這種規(guī)律。一方面，采用深色系的設(shè)計(jì)風(fēng)格，只要確保對比度，本身的可用性和易用性并沒有太大的問題，另一方面，這樣的設(shè)計(jì)在美學(xué)上也有著獨(dú)有的優(yōu)勢，讓界面呈現(xiàn)出一種獨(dú)特的戲劇性，同時還能讓一些品牌擁有更加有趣和引人入勝的視覺。

Apple TV 就采用了深色系UI。比如最新的 macOS Mojave 中加入的深色系主題，就是用戶呼吁了很多年之后的結(jié)果。

不過，真的要深入到 UI 設(shè)計(jì)的「黑暗面」，設(shè)計(jì)師還需要跨越很多挑戰(zhàn)。和平時設(shè)計(jì)的淺色為主的主題不同，深色系的UI 需要處理不一樣的可用性問題——主要是可讀性和對比度上的問題。此外，還需要關(guān)注用戶所使用的環(huán)境，以及設(shè)備本身的一些屬性。

Breitling 為他們的手表加入黑色背景，和競爭對手做差異化區(qū)分。

其實(shí)，選擇深色系的 UI設(shè)計(jì)，本身是為了幫助現(xiàn)代人緩解數(shù)字產(chǎn)品所帶來的視覺疲勞（之前的實(shí)驗(yàn)是做的深淺兩種色彩下的單純定量對比）。隨著現(xiàn)代人對于數(shù)字內(nèi)容的日漸沉迷，每天都會花費(fèi)大量的時間看屏幕，而屏幕和數(shù)字內(nèi)容所帶來的視覺疲勞，不可避免地大幅增加。數(shù)字視覺疲勞如今已經(jīng)被定性為一種常見病了，每天都會有大量的普通人受到這種病癥的困擾，因?yàn)橐曈X疲勞所帶來的并不只是眼部的不適，還伴隨著頭疼和頸部疼痛，眼部的癥狀則呈現(xiàn)為視力下降，視野模糊和灼傷感、刺痛感。

事實(shí)上，類似的病癥和定義還有不少，比如計(jì)算機(jī)視覺綜合征（CVS）。一項(xiàng)研究表明，83%的美國人每天使用數(shù)字設(shè)備的時間超過2小時，60.5%的人表示他們出現(xiàn)了和CVS 類似的癥狀。

大量的 B2B的程序， SaaS類產(chǎn)品，以及媒體類數(shù)字產(chǎn)品，如今大都配備了深色系主題，讓用戶在合適的時候從淺色主題下切換過來，用來調(diào)整和修正視覺模式，降低視覺疲勞。不過，這些深色系的UI，需要通過合理的設(shè)計(jì)和調(diào)整之后，才能夠合乎需求。

目前，長時間使用電腦的人群當(dāng)中，開發(fā)者占據(jù)了不小的比例，而他們也是深色系主題的最大粉絲之一。因?yàn)樾枰L時間面對代碼編輯器，視覺疲勞是不可避免的。正如同 Toptal 的開發(fā)人員 Kevin Bloch 所說：「黑色背景下查看代碼，亮度相對更低，高對比度下面對不同色彩的代碼更容易閱讀，也更容易理解其中的信息?！?

而 Toptal 的另外一名開發(fā)者 Amin Shah Gilani 則補(bǔ)充道：「我會長時間使用深色系主題，也更加喜歡它，因?yàn)檠劬ζ鋵?shí)會更容易適應(yīng)，尤其是在燈光黯淡的情況下，或者晚上工作的時候?！?

△ Toptal 開發(fā)者Amin Shah Gilani 使用 Atom 編輯代碼

游戲 APP 中的 UI設(shè)計(jì)也大多是深色系的，游戲玩家大都更加傾向于黑色系配色所帶來的沉浸式環(huán)境，黑色的背景讓視覺效果更加醒目，明暗更強(qiáng)，對比度更明顯，視覺層次感也更加豐富。

適合使用深色系 UI 的地方

絕大多數(shù)涉及到娛樂的 UI界面，大都會有一定的傾向使用深色系主題，無論是智能電視、游戲機(jī)還是電影類應(yīng)用，這其實(shí)不僅僅和對比度有關(guān)系，它和用戶的日常使用環(huán)境和時間也有著極深的關(guān)聯(lián)：絕大多數(shù)的娛樂活動都發(fā)生在晚上，并且大家會愉悅地享受相對昏暗的房間環(huán)境。豐富多彩的視覺內(nèi)容，也同樣會在深色系的UI 上顯得更加炫目。

昏暗的環(huán)境讓人放松和沉浸，太亮的背景則會讓人緊張，這也是深色系UI的設(shè)計(jì)來源和基礎(chǔ)：設(shè)備、內(nèi)容、活動和場景。

確定了深色系UI 的使用時間、場景、用戶特征以及所用設(shè)備之后，接下來要明確 UI設(shè)計(jì)的目標(biāo)：

• 要讓視覺效果明顯且具有戲劇性；
• 營造出時尚、優(yōu)雅、奢華和價值感；
• 制造神秘感和陰謀感；
• 以最小的干擾來幫助用戶集中注意力；
• 支持可視化的層次結(jié)構(gòu)和清晰的信息架構(gòu)。

△ Ramotion 的汽車遙控概念設(shè)計(jì)

深色系的UI 是有明確適用范圍和設(shè)計(jì)方向的。大段的文本在深色系UI 下閱讀體驗(yàn)比淺色系背景下要差一些（之前的實(shí)驗(yàn)已經(jīng)驗(yàn)證過了），在深色系UI 中，文本適合以小塊的形式呈現(xiàn)，并且對比度和亮度應(yīng)該控制在一個相對較高的水平，通常使用的深灰色在這里肯定不適用。

△ CINEMATEK 使用深色系的UI來創(chuàng)造戲劇感

不適合使用深色系 UI 的地方

大量的文本內(nèi)容不適合在深色系UI 中展示，而只有最簡單的文本內(nèi)容，強(qiáng)交互性的信息，視覺化的元素，才是它的最佳搭配。為了確保整體的用戶體驗(yàn)，必須確保對比度和可讀性，因此如果數(shù)據(jù)量和內(nèi)容類別太多的 UI，也很難使用深色系UI。設(shè)計(jì)師真正要做的工作并不是單純的更換配色，否則大量文本和多屬性強(qiáng)內(nèi)容的界面，會被深色系UI主題給毀掉。

換句話來說，深色系的UI 中，可用的色彩變少了，空間利用率也相對不會那么高。

在這個案例當(dāng)中， UI 元素的對比度不足，對于體驗(yàn)的損耗很明顯。

說一個真實(shí)的案例吧。我曾經(jīng)參加過一個 B2B Saas的項(xiàng)目，公司的 CEO 堅(jiān)持認(rèn)為，如果想在視覺上就做到與眾不同，就必須使用深色系的 UI主題設(shè)計(jì)，這樣才能夠和公司的品牌相匹配。對于 CEO 的這提案，設(shè)計(jì)團(tuán)隊(duì)和產(chǎn)品經(jīng)理對此沒少開會，直到多次的磋商和調(diào)整之后，大家才算是勉強(qiáng)走出這個災(zāi)難性的提案。

由于平臺使用了一組標(biāo)準(zhǔn)的 SaaS 應(yīng)用程序 UI 組件，因此數(shù)據(jù)呈現(xiàn)會借助大量的不同類型的表單、小組件、下拉列表、信息圖表以及各種圖標(biāo)，此外還有相當(dāng)多的文本和數(shù)字內(nèi)容。想要協(xié)調(diào)如此之多類型的內(nèi)容，單是調(diào)整對比度和統(tǒng)一配色就已經(jīng)很難了，此外還需要考慮導(dǎo)航、布局和實(shí)際功能。在這樣的 B2B 平臺中，完全借用深色系UI 設(shè)計(jì)，幾乎是不可能完成的任務(wù)。

為了確保產(chǎn)品的基本可用性，最好的選擇其實(shí)是將深色和淺色系的 UI元素混合搭配起來使用。比如較為復(fù)雜多變的小組件、表單、數(shù)據(jù)表格、大段文本和數(shù)字都在淺色背景上來進(jìn)行設(shè)計(jì)，而展示性的信息圖、分析報(bào)告和結(jié)果呈現(xiàn)等比較聚焦的信息，則在深色系的背景下呈現(xiàn)。

為什么蘋果直到今年才在自家的 Mac系統(tǒng)中加入深色系主題，我們可以想見這當(dāng)中的難度。至少，在 Mac系統(tǒng)中，即使是在深色主題之下，也沒有全局采用深色系背景。

深色系儀表盤 UI 中， 分析和信息圖在深色背景下良好地呈現(xiàn)，但是仍需要仔細(xì)處理才能確保足夠的對比度。

深色系 UI 的設(shè)計(jì)注意事項(xiàng)

最后，需要強(qiáng)調(diào)的是，深色系UI 在具體處理的時候，要非常的小心。設(shè)計(jì)師不應(yīng)該單純的為了做的不一樣或者為了復(fù)制某些配色而使用深色系的配色。深色系的UI 應(yīng)該是正確的決策流程之下（考慮用戶需求、使用場景、內(nèi)容和設(shè)備等）作出的決策，有充分的理由而非憑感覺或者主觀傾向。這是一個很微妙的設(shè)計(jì)決策，因?yàn)樗泻芏鄡?yōu)勢，但是陷阱和它的優(yōu)勢一樣多。

在以下情形下可以使用深色系 UI：

• 單品牌配色和深色系UI 一致的時候；
• 當(dāng)布局內(nèi)容稀疏、極簡且元素類型較少的情況下；
• 當(dāng) UI 的使用環(huán)境和需求合適的情況下，比如夜間使用，或者明顯的娛樂向；
• 當(dāng)使用深色主題是為了減少視覺疲勞的時候；
• 為了創(chuàng)造引人矚目的戲劇性視覺效果的時候；
• 為了營造奢華感和高級感的時候；
• 當(dāng)產(chǎn)品的信息架構(gòu)和視覺層次支持的時候。

在以下情況下要盡量避免使用深色系 UI：

• 當(dāng)有很多文本內(nèi)容的時候；
• 當(dāng)屏幕上有很多種不同的 UI控件的時候；
• 當(dāng)界面中包含大量的表單的時候；
• 當(dāng)界面中涉及到大量不同的色彩的時候。

總之，設(shè)計(jì)師需要對待這種 UI界面的「黑暗面」，面對充滿陷阱和不成熟的決策，要謹(jǐn)慎選擇使用深色系UI。

原文：https://uxdesign.cc/dark-uis-the-good-and-the-bad-dos-and-donts-edefe7a0084e