隨著九月份的臨近，蘋果iOS 13正式版也即將推出，隨之而來的還有大家期盼已久的“深色模式”。前幾天，蘋果推送了iOS 13的beta 5版本。其中，“深色模式”還加入了過渡動畫，效果看起來更加流暢自然。

近幾年來，越來越多的產(chǎn)品都推出了“深色模式”。無論是蘋果，還是谷歌，“深色模式”都已經(jīng)成為其產(chǎn)品界面中不可缺少的一部分。

相比于“淺色模式”，“深色模式”的屏幕亮度更低，可以讓用戶在暗黑的環(huán)境下更友好地體驗產(chǎn)品，同時，也可以最大程度地減緩眼睛疲勞。

那么，“深色模式”到底應(yīng)該怎么設(shè)計才好呢？以下，我總結(jié)了8條產(chǎn)品設(shè)計建議，希望對你有所幫助。

1. 避免全黑設(shè)計

“深色模式”并不一定要求背景全黑或者字體全白。實際上，這種高反差也會讓人看起來很難受。

安全起見的話，建議在頁面上主要采用深灰色，而不要采用全黑色（色號#000000）。

相比于全黑色，深灰色背景下的淺色文字反差感稍弱，可以緩解用戶的眼睛疲勞。此外，因為在灰色背景下（而非全黑背景）更容易看見陰影，所以采用深灰色，還可以更好地體現(xiàn)更多色彩、陰影以及立體感等內(nèi)容。

根據(jù)谷歌等材料設(shè)計（Material design）原則，頁面“深色模式”的主色最好選用#121212深灰色號。

2. 避免在“深色模式”中采用過度飽和色彩

在淺色背景下，飽和色彩看起來會非常生動形象。然而，如果在“深色模式”下采用飽和色彩，則會讓人難以識別有關(guān)元素或內(nèi)容。

因此，在“深色模式”中，主色調(diào)一定不要采用飽和色彩。建議使用淺色調(diào)（色調(diào)控制在50至200范圍內(nèi)），從而讓頁面內(nèi)容在“深色模式”下體現(xiàn)更佳的可讀性。

淺色調(diào)不僅不會影響用戶體驗，它還會在不造成眼睛疲勞的前提下保持恰當(dāng)?shù)姆床睢?/p>

避免在“深色模式”中采用飽和色彩，否則會降低用戶的可讀性（如左圖）；建議采用淺色調(diào)，保證基本的可讀性（如右圖）。

3. 符合色彩對比標(biāo)準(zhǔn)

此外，還要確保在“深色模式”下，頁面內(nèi)容也要保持舒適和清晰度。背景顏色必須要足夠深，從而反襯出頁面淺色文字。

根據(jù)谷歌的材料設(shè)計原則，建議文字和背景的對比比例至少保持在15.8:1。

你也可以通過色彩對比工具來測試有關(guān)對比比例。

4. 文本用色一定要“亮”

所謂“亮”，即是說要讓用戶能立即識別頁面文本內(nèi)容。通常情況下，頁面文本也必須要采用“亮”色。

對于“深色模式”，一般采用的“亮”色是純白色（色號#FFFFFF）。不過，純白色會給人非常明亮的感覺，在一定程度上與深色背景結(jié)合在一起，會給人一種眩暈的感覺。

所以，根據(jù)谷歌的材料設(shè)計原則，建議在頁面文本選色方面采用稍微深一點的白色 :

• 對于重點強調(diào)的文本，可以將透明度設(shè)置為87%。
• 而最不重要的文本則可以將透明度設(shè)置為38%。
• 一般重要的則可以將透明度設(shè)置為60%。

小提示：相比于淺色背景下的深色文本，深色背景下的淺色文本會顯得更加厚實。因此，你可能會喜歡在“深色模式”中采用相對較細(xì)的文字。

采用稍微深一點的白色，可以防止文本和背景顏色之間的明顯對比產(chǎn)生的眩暈感。

5. 不要忽略考慮設(shè)計中的情感因素

當(dāng)你計劃在現(xiàn)有產(chǎn)品中新增“深色模式”時，你肯定希望能通過這種模式傳達(dá)出原有的產(chǎn)品情感，對吧？但我建議最好不要有這種想法。

至于這背后的原因，我認(rèn)為在不同背景顏色背景下，色彩本來就是獨立存在的，同時也代表著特殊的意義。

這即是說，“深色模式”不應(yīng)該傳達(dá)出和“淺色模式”相同的情感訴求。它們應(yīng)該喚起用戶不同的情感。

所以，與其去解決這個問題，倒不妨順著這個事實，讓自己的產(chǎn)品體現(xiàn)不同尋常的個性。

Shift的數(shù)據(jù)面板，圖片來源：Sergey Zolotnikov

6. 體現(xiàn)層次

和“淺色模式”的設(shè)計一樣，在設(shè)計“深色模式”的界面時，也必須要體現(xiàn)出層次感，同時突出頁面布局中的重要元素。

要體現(xiàn)界面的層次感，可以利用海拔高度（elevation）這個工具。

譯者注：海拔高度是指相對深度或距離，是兩個表面在Z軸上的距離。其測量單位和X軸及Y軸一樣，通常是與密度無關(guān)的像素（dp）。在“淺色模式”下，一般會采用陰影（shadow）來表達(dá)層次。頁面元素顯得更高，其陰影范圍就會更廣。

然而，這種方式卻不適用于“深色模式”。畢竟，很難想象在深色背景下加入陰影是什么效果。因此，最好就通過提升各層次的亮度來實現(xiàn)這個目的。

在采用材料設(shè)計的“深色模式”下，海拔提升的頁面及元素的顏色都是通過疊加不同透明度的白色來體現(xiàn)的。頁面的海拔越高，相應(yīng)的內(nèi)容或元素就會更亮（暗示接近光源）。

海拔越高，頁面越亮。

Music Player的界面。圖片來源：Martin Mro?

7. 讓用戶自由切換不同背景模式

如果可以讓系統(tǒng)自動切換“深色模式”和“淺色模式”，聽起來這樣的設(shè)計可能會覺得非常友好。然而，這種設(shè)計卻可能會導(dǎo)致意想不到的糟糕體驗。

如果系統(tǒng)會自動切換不同背景模式，相當(dāng)于讓用戶失去了“控制”，而被迫接受系統(tǒng)為其選擇的背景模式。

因此，最好不要自動開啟產(chǎn)品的“深色模式”。你可以通過界面功能設(shè)置，讓用戶自由地打開或關(guān)閉這項功能。用戶也可以根據(jù)其體驗產(chǎn)品時的需求和想法，自主選用這項功能。

設(shè)置中的“深色模式”開關(guān)

8. 在“深色模式”和“淺色模式”下進(jìn)行測試

在最終推出產(chǎn)品之前，一定要在兩種不同模式下進(jìn)行測試，查看各個界面的顯示情況，在必要的情況下進(jìn)行相應(yīng)調(diào)整。

你可以考慮在晚上的時候進(jìn)行測試，最好在白熾燈照射下測試。

原標(biāo)題是：8 Tips for Dark Theme Design

作者：Nick Babich，著名軟件工程師

譯者：井島俊一，神譯局是36氪旗下編譯團隊，關(guān)注科技、商業(yè)、職場、生活等領(lǐng)域，重點介紹國外的新技術(shù)、新觀點、新風(fēng)向。

來源：https://36kr.com/p/5231320

本文由 @36氪 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載