使用深色系UI，有哪些點你需要注意？

選擇深色系的 UI設計，本身是為了幫助現代人緩解數字產品所帶來的視覺疲勞，那么，在使用深色系UI，有哪些點你需要注意？

設計師的主要職責之一，就是為產品定制合理的視覺，基于目標用戶的特征和產品的設計目標，給用戶特定的感覺。UI和UX設計師需要在這個過程中通力協作，而 UI設計師更是要確保產品的 UI 和視覺最終落地。

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

許多設計師會在選擇配色方案的時候，會使用淺色的、明亮的背景色彩。其實，大眾和設計師的這個傾向是有科學依據的。在白色的背景上使用黑色的文本，可讀性是最佳的。在不同的測試和研究當中，淺色背景上的深色文本，比起深色背景上的淺色文本，閱讀性更強。

在一項著名的研究當中，受試者面對深色背景閱讀淺色文本的時候，視覺疲勞的現象表現得更加明顯。（Bauer, D., Bonacker, M., and Cavonius, C. R. 1983）

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

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

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

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

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

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

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

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

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

而 Toptal 的另外一名開發者 Amin Shah Gilani 則補充道：「我會長時間使用深色系主題，也更加喜歡它，因為眼睛其實會更容易適應，尤其是在燈光黯淡的情況下，或者晚上工作的時候。」

△ Toptal 開發者Amin Shah Gilani 使用 Atom 編輯代碼

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

適合使用深色系 UI 的地方

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

昏暗的環境讓人放松和沉浸，太亮的背景則會讓人緊張，這也是深色系UI的設計來源和基礎：設備、內容、活動和場景。

確定了深色系UI 的使用時間、場景、用戶特征以及所用設備之后，接下來要明確 UI設計的目標：

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

△ Ramotion 的汽車遙控概念設計

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

△ CINEMATEK 使用深色系的UI來創造戲劇感

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

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

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

在這個案例當中， UI 元素的對比度不足，對于體驗的損耗很明顯。

說一個真實的案例吧。我曾經參加過一個 B2B Saas的項目，公司的 CEO 堅持認為，如果想在視覺上就做到與眾不同，就必須使用深色系的 UI主題設計，這樣才能夠和公司的品牌相匹配。對于 CEO 的這提案，設計團隊和產品經理對此沒少開會，直到多次的磋商和調整之后，大家才算是勉強走出這個災難性的提案。

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

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

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

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

深色系 UI 的設計注意事項

最后，需要強調的是，深色系UI 在具體處理的時候，要非常的小心。設計師不應該單純的為了做的不一樣，或者為了復制某些配色而使用深色系的配色。深色系的UI 應該是正確的決策流程之下（考慮用戶需求、使用場景、內容和設備等）作出的決策，有充分的理由而非憑感覺或者主觀傾向。

這是一個很微妙的設計決策，因為它有很多優勢，但是陷阱和它的優勢一樣多。

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

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

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

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

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

 

作者：Miklos Philips

譯者：陳子木

來源：https://www.uisdc.com/dark-uis-good-and-bad

本文由 @陳子木 授權發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議