起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識深色模式設計的8個小技巧
隨著九月份的臨近，蘋果iOS 13正式版也即將推出，隨之而來的還有大家期盼已久的“深色模式”。前幾天，蘋果推送了iOS 13的beta 5版本。其中，“深色模式”還加入了過渡動畫，效果看起來更加流暢自然。
近幾年來，越來越多的產品都推出了“深色模式”。無論是蘋果，還是谷歌，“深色模式”都已經成為其產品界面中不可缺少的一部分。
相比于“淺色模式”，“深色模式”的屏幕亮度更低，可以讓用戶在暗黑的環境下更友好地體驗產品，同時，也可以最大程度地減緩眼睛疲勞。
那么，“深色模式”到底應該怎么設計才好呢？以下，我總結了8條產品設計建議，希望對你有所幫助。
1. 避免全黑設計
“深色模式”并不一定要求背景全黑或者字體全白。實際上，這種高反差也會讓人看起來很難受。
安全起見的話，建議在頁面上主要采用深灰色，而不要采用全黑色（色號#000000）。
相比于全黑色，深灰色背景下的淺色文字反差感稍弱，可以緩解用戶的眼睛疲勞。此外，因為在灰色背景下（而非全黑背景）更容易看見陰影，所以采用深灰色，還可以更好地體現更多色彩、陰影以及立體感等內容。
根據谷歌等材料設計（Material design）原則，頁面“深色模式”的主色最好選用#121212深灰色號。
2. 避免在“深色模式”中采用過度飽和色彩
在淺色背景下，飽和色彩看起來會非常生動形象。然而，如果在“深色模式”下采用飽和色彩，則會讓人難以識別有關元素或內容。
因此，在“深色模式”中，主色調一定不要采用飽和色彩。建議使用淺色調（色調控制在50至200范圍內），從而讓頁面內容在“深色模式”下體現更佳的可讀性。
淺色調不僅不會影響用戶體驗，它還會在不造成眼睛疲勞的前提下保持恰當的反差。
避免在“深色模式”中采用飽和色彩，否則會降低用戶的可讀性（如左圖）；建議采用淺色調，保證基本的可讀性（如右圖）。
3. 符合色彩對比標準
此外，還要確保在“深色模式”下，頁面內容也要保持舒適和清晰度。背景顏色必須要足夠深，從而反襯出頁面淺色文字。
根據谷歌的材料設計原則，建議文字和背景的對比比例至少保持在15.8:1。
你也可以通過色彩對比工具來測試有關對比比例。
4. 文本用色一定要“亮”
所謂“亮”，即是說要讓用戶能立即識別頁面文本內容。通常情況下，頁面文本也必須要采用“亮”色。
對于“深色模式”，一般采用的“亮”色是純白色（色號#FFFFFF）。不過，純白色會給人非常明亮的感覺，在一定程度上與深色背景結合在一起，會給人一種眩暈的感覺。
所以，根據谷歌的材料設計原則，建議在頁面文本選色方面采用稍微深一點的白色 :
- 對于重點強調的文本，可以將透明度設置為87%。
- 而最不重要的文本則可以將透明度設置為38%。
- 一般重要的則可以將透明度設置為60%。
小提示：相比于淺色背景下的深色文本，深色背景下的淺色文本會顯得更加厚實。因此，你可能會喜歡在“深色模式”中采用相對較細的文字。
采用稍微深一點的白色，可以防止文本和背景顏色之間的明顯對比產生的眩暈感。
5. 不要忽略考慮設計中的情感因素
當你計劃在現有產品中新增“深色模式”時，你肯定希望能通過這種模式傳達出原有的產品情感，對吧？但我建議最好不要有這種想法。
至于這背后的原因，我認為在不同背景顏色背景下，色彩本來就是獨立存在的，同時也代表著特殊的意義。
這即是說，“深色模式”不應該傳達出和“淺色模式”相同的情感訴求。它們應該喚起用戶不同的情感。
所以，與其去解決這個問題，倒不妨順著這個事實，讓自己的產品體現不同尋常的個性。
Shift的數據面板，圖片來源：Sergey Zolotnikov
6. 體現層次
和“淺色模式”的設計一樣，在設計“深色模式”的界面時，也必須要體現出層次感，同時突出頁面布局中的重要元素。
要體現界面的層次感，可以利用海拔高度（elevation）這個工具。
譯者注：海拔高度是指相對深度或距離，是兩個表面在Z軸上的距離。其測量單位和X軸及Y軸一樣，通常是與密度無關的像素（dp）。在“淺色模式”下，一般會采用陰影（shadow）來表達層次。頁面元素顯得更高，其陰影范圍就會更廣。
然而，這種方式卻不適用于“深色模式”。畢竟，很難想象在深色背景下加入陰影是什么效果。因此，最好就通過提升各層次的亮度來實現這個目的。
在采用材料設計的“深色模式”下，海拔提升的頁面及元素的顏色都是通過疊加不同透明度的白色來體現的。頁面的海拔越高，相應的內容或元素就會更亮（暗示接近光源）。
海拔越高，頁面越亮。
Music Player的界面。圖片來源：Martin Mro?
7. 讓用戶自由切換不同背景模式
如果可以讓系統自動切換“深色模式”和“淺色模式”，聽起來這樣的設計可能會覺得非常友好。然而，這種設計卻可能會導致意想不到的糟糕體驗。
如果系統會自動切換不同背景模式，相當于讓用戶失去了“控制”，而被迫接受系統為其選擇的背景模式。
因此，最好不要自動開啟產品的“深色模式”。你可以通過界面功能設置，讓用戶自由地打開或關閉這項功能。用戶也可以根據其體驗產品時的需求和想法，自主選用這項功能。
設置中的“深色模式”開關
8. 在“深色模式”和“淺色模式”下進行測試
在最終推出產品之前，一定要在兩種不同模式下進行測試，查看各個界面的顯示情況，在必要的情況下進行相應調整。
你可以考慮在晚上的時候進行測試，最好在白熾燈照射下測試。
原標題是：8 Tips for Dark Theme Design
作者：Nick Babich，著名軟件工程師
譯者：井島俊一，神譯局是36氪旗下編譯團隊，關注科技、商業、職場、生活等領域，重點介紹國外的新技術、新觀點、新風向。
來源：https://36kr.com/p/5231320
本文由 @36氪 授權發布于人人都是產品經理，未經作者許可，禁止轉載
原文標題：Shopee與Lazada，東南亞兩大電商平臺纏斗不休
作者：七月；公眾號：首席商業評論（ID：CHReview）
原文鏈接：https://mp.weixin.qq.com/s/NWhbaeoWqr_aPyykV7eZvA
本文由 @首席商業評論 授權發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論，等你發揮！
