起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識APP深色主題設計指南
因為最近接觸了車載UI（深色底）和車控APP設計，所以對深色界面的設計做了一些研究總結。本文主要講手機APP深色主題的設計心得。
文章思路：
- 為什么深色界面的產品占少數
- 深色界面的適用條件和產品歸類
- 深色界面的視覺風格
- 深色界面的設計要點
深色界面很酷，為什么實際應用的產品不多？
追波上看到很多深色背景的界面設計，視效酷炫抓人眼球，但實際上我們會發現真正應用深色背景的APP還是少數。
最關鍵的原因也許是出于文本易讀性方面的考慮。因為從人的生理感知來說（這里略去幾百字的科學說明…），我們在長時間閱讀黑底白字的信息后，會產生視覺殘影，導致眼睛疲勞。而閱讀白底黑字的信息時，因為沒有光刺激，基本不會產生殘影。
但是我們也不能一概而論，什么情況下適合用深色界面設計呢？
深色界面的適用條件
判斷是否適用深色背景，主要從易讀性、色彩的情感以及使用的場景環境這幾方面考慮：
（1）文本易讀性
開頭講過，承載大量文字的閱讀類產品一般不推薦用深色背景（但是也有例外及優化體驗的方法，后面會講）。
（2）色彩的情感
黑色給人高端、氣質和酷酷的印象，但黑色也有負面的感知，尤其大面積的純黑會讓人感覺沉悶和壓抑；白色則大多是干凈清爽的感覺，大面積的白色會讓人放松，也是我們最為熟悉的背景色（書報雜志等）。
簡言之，需要考慮深色界面是否符合產品定位想傳遞的氣質。
（3）使用的場景環境
這里主要指光線環境。在光線充足的環境中，閱讀黑底白色時，眼睛疲勞的速度會更快。但在夜間，由于人眼已經適應了暗環境，疲勞感不會增加。所以我們也可以根據用戶的使用環境，定義界面背景色的深淺，比如一些手機OS和瀏覽器APP都設計有夜間模式。
綜合以上幾點，總結出以下適合深色底的產品類型：
1. 運動類
運動讓人聯想到速度和力量，黑色蘊含這種屬性。比如NikeRunClub，在記錄跑步的界面使用了很酷的黑黃配色，結合粗大和傾斜字體，讓人感受到奔跑的速度感和激情。
2. 高端品類
高價值的品類或是高端品牌運用深色會讓人感覺穩重可靠，帶出產品的高級和品質感。
3. 藝術／視頻／音樂類
藝術類產品運用深色界面能夠更好地突出內容，傳遞設計感和藝術氣質。這一點和高端品類相似，深色都是起到提高產品調性的作用。
而音樂、視頻類運用深色界面則是能夠營造更強的氛圍感和沉浸體驗。
4. 工具類
因為這類產品的內容少，所以黑底并不會影響用戶體驗，反而通過黑底讓用戶更聚焦于產品的功能使用。因為黑底白字的情況下，人的生理感知會讓白色內容更加突出，視覺刺激強烈，因此白色能夠更快地引起用戶注意。這可以說是深色界面的一個優勢。
5. 車載系統
跑題一下。車載UI的設計多以深色背景為主，原因和前面所說的都不太一樣。深色車載UI更多是出于安全性的考慮，為了避免讓駕駛員分散注意力、減少眩目（后者更為重要，道路千萬條，安全第一條）。黑底白字的設計在各種光照情況下包括明亮、陰暗甚至黑暗的環境下都有很好的效果。
深色界面的視覺風格
在動手設計前先感受下深色界面的風格。同樣的深色底，結合其它的視覺語言會呈現稍微不一樣的風格，這里大致歸為兩類。
TypeA：極度扁平、簡潔
運用純色色塊或線條為主，不做過多的修飾和質感處理，整體視覺干凈利落。由于沒有太多的細節設計，這種情況下需要注意對比，比如線條和字體大小、粗細和明暗的對比，以避免畫面太沉悶單調。
TypeB：輕質感、炫彩
主要在色彩上做文章，運用漸變色豐富視覺，通常會結合輕量投影或光感的設計。這種形式能很好地刺激用戶視覺感官，適合需要呈現熱烈氣氛的場景、或是表現親和力的產品需求。最典型的應該是直播間的設計了。
深色界面設計的注意事項
1. 背景顏色
最好避免用純黑色（#000000）背景，因為純黑的背景會讓人感覺很“悶”。更不要搭配純白文字，純黑純白對比太強，特別辣眼睛?？梢杂脦в形u變的背景色，或是有一定色彩傾向的深色系，都會讓人感覺更透氣。
2. 文字顏色
前面說過，深色底白字容易使人產生視覺殘影，且高對比度的文本容易讓閱讀障礙人群更難閱讀。因此在深色背景的情況下，文本的最佳選擇是白色或者淺灰色等淺色系，以避免深黑色和白色像素之間的對比度過高。
如下圖，同樣的深色背景，左圖帶些灰度的文本由于對比弱些，閱讀的舒適性就比右圖高。
3. 文字粗細
在黑底上，過細的字體會讓人更難閱讀，這就不啰嗦了。
4. 色彩
色彩表現：主要指純色還是漸變色的形式，可以參考前面風格部分，會呈現不一樣的視覺風格。
另外還要注意的是，在深色背景的襯托下有彩色會更加突出，因此不能隨意用色。去審視色彩是否是你想要吸引用戶注意的地方，用色太多會讓用戶丟失焦點。
如下圖這種圖片內容型產品，需要的是一個干凈、不干擾用戶吸收內容的閱讀環境，所以用扁平色塊比多彩漸變合適，并且只在按鈕和選中狀態上用高亮色。
最后，顏色的選取不能純度太高，不然辣眼睛。
5. 形狀
深色本身就帶著些“酷”和“冷“的氣質，如果再搭配尖銳、硬朗的直角型設計，會更加強化這種印象。如左圖的按鈕和圖標都用了尖角。而如果配合圓角造型，就會中和掉一些黑色帶來的“冷”感，增加產品的親和力和友好度。
6. 圖標設計
線面與可讀性：在深色底時面性圖標比線性圖標更好識別。但也不是不能用線形圖標，要注意得是線條不能太細，道理和文字的是一樣的。我們可以在非選中狀態上應用線性設計，而選中態用面性，讓兩種不同狀態區分更明顯。
明暗與區分度：除了線面，還可以通過色彩做區分。直接調整明暗，或者用有彩色和無彩色進行區分，都能起到區分的效果。
7. 層級關系
在淺色界面，投影是我們常用的表示界面各元素間層級關系的手法。
但是如果背景顏色很深，投影效果不明顯。這也是為什么很多深色界面都是非常扁平化的風格。
那么層次關系還可以用什么方式體現？
下圖兩個設計都是控制家電的，都用了卡片形式實現了信息的聚合和層級劃分，但是在用色上采取了不同方案。左圖卡片顏色比背景色淺，讓人感覺更靠前（卡片在背景之上），可點擊的感覺更強。
右圖卡片顏色比背景深，推測其代表的可能是關閉狀態，但是banner圖也用了同樣的深色，這時候“深色－關閉態”的這種唯一對應關系就被打破了，同時banner和卡片之間層級關系也不是那么明確了。
總結
- 閱讀體驗：深色界面設計容易出彩，但是考慮到黑底白字的閱讀體驗要分場景謹慎應用；
- 視覺風格：考慮產品定位與深色界面風格是否匹配；
- 設計要點：設計時需要從色彩、形狀、大小等維度考慮各元素的易讀性、區分度，保證良好的用戶體驗。
道理好懂，但是實操的時候會發現很多難把握的地方，比如明暗對比、色彩的灰度控制，都和淺色界面的設計不一樣，大家有時間都去嘗試設計會有更深的體會。
參考資料：《形而下》
本文由 @REMY 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
nice