2020-10-14 ui設計分享達人
蘋果在2019年6月發(fā)布的iOS13中增加了“黑暗模式”，用戶打開“黑暗模式”后，應用界面將會變?yōu)樯钌S后Google Android 10的發(fā)布同樣搭載“黑暗模式”。為了適配系統(tǒng)，不少APP紛紛推出了深色模式。
使用OLED屏幕的設備，在純黑色下可以有效降低耗能，進一步延長續(xù)航時間。除此之外，深色模式還可以有效解決OLED屏燒屏、費眼的問題。小摹對幾款常用APP的深色模式進行了體驗，并為大家分享我的體驗感受。從這些案例中，或許我們可以找到深色模式流行的原因。
微 信
深色模式是一種可以降低視覺疲勞且有助于用戶專注的全新外觀。與傳統(tǒng)夜間模式最大的區(qū)別是，深色模式不僅保證了弱光環(huán)境下的體驗，在強光下仍具有可讀性。
雖然深色模式也被叫做暗黑模式，但并不代表要將底色變?yōu)榧兒凇Ｈ绻褂?00%的純黑底色，長時間閱讀時，反而會造成眼睛疲勞。微信的深色模式里，聊天背景及主頁面底色采用的就不是純黑，而是深灰色。
此外，純黑和純白的高對比度也會造成視覺疲勞，因此微信的深色模式中，使用了淺灰色作為字體顏色，既能保持清晰顯示，又降低了對比度，減輕了用戶的閱讀負擔。如果設置了聊天背景，聊天背景圖片也會自動調(diào)暗，便于閱讀。
雖然整體色彩加深，但微信在設計時仍保持著清晰的層次。比如置頂聊天窗口的灰色會比其他窗口稍淺，聊天消息的標題和摘要也采用了明度不同的淺灰色來區(qū)分層級。除此之外，微信的彩色線型圖標在黑色背景上也變得更具科技感，顏值提升了不少。
微信的深色模式除了可以幫助用戶緩解夜間視力疲勞外，在白天使用也幾乎沒有障礙，總體來說，體驗感覺較好。
Q Q
如果說微信的深色模式更加注重顏值，那么騰訊旗下的另一款社交工具QQ則更加注重用戶的深夜閱讀體驗。
首先，微信在切換深色模式時，需要重啟軟件后才能生效。QQ在切換夜間模式時，則采用了一個平滑的漸變過渡，讓用戶可以快速適應場景切換。其次，為了減少夜間光線對人眼的刺激，QQ降低了信息與背景的對比度，對用戶頭像等圖片增加了遮罩，使其在弱光環(huán)境中看起來更加柔和。
當用戶開啟夜間模式時，還會有一個設計彩蛋：部分圖標會根據(jù)模式切換而改變。如消息圖標會從笑臉切換為休息的狀態(tài)，這種具有趣味性的設計，也會拉近用戶與產(chǎn)品之間的距離。
豆 瓣
普通模式下的豆瓣APP背景色為純白色，白天看偶爾都覺得有些刺眼，更不用說睡前必刷豆瓣的用戶有多煎熬。在被用戶罵了一輪又一輪之后，豆瓣APP終于也推出了夜間模式。
豆瓣的夜間模式和微信一樣，同樣保留了五顏六色的圖標。同時，豆瓣在設計時始終保證內(nèi)容有良好的對比度和清晰的視覺層級，保證了信息結(jié)構(gòu)的準確傳達。
在配色方面，為了避免“死黑”讓整個界面太過死板，豆瓣在黑色中還混入了藍紫色，讓背景色看上去更加通透。底部導航等主要按鈕則使用了豆瓣的主色調(diào)綠色，在夜間模式下既能清晰展示，又不會顯得過于刺眼，同時也保證了在強光模式下可以正常瀏覽。
知 乎
另一款社區(qū)APP知乎和豆瓣存在同樣的問題。知乎在設計夜間模式時，知乎采用了主色調(diào)藍色+深灰色的搭配，深藍和灰色作為背景，展示出的效果既有強烈的對比，又擺脫了深色的壓抑感。
與豆瓣不同，知乎的文本顏色選擇了對比度更低的灰色，通過字重進行區(qū)分。雖然這樣會讓整體頁面看起來比較和諧，但內(nèi)容變得不夠突出，無法在最短時間看清標題，對于一個以內(nèi)容為主的社區(qū)來說，無疑會給用戶帶來不太好的體驗。
知乎在設計夜間模式時目標應該很明確，即只考慮用戶在夜間的使用，因此整體色調(diào)都很暗，在強光環(huán)境下無法正常瀏覽。
bilibili動畫
B站剛推出深色模式時收到了許多批評，字體和背景色對比不強，視頻封面仿佛蒙了一層霧，一刀切的暗化處理，導致用戶瀏覽體驗極差。
在最近一次更新中，B站終于對深色模式進行了優(yōu)化，適度提亮了視頻封面和圖標的亮度，將多彩型圖標調(diào)整為了單線型圖標，既統(tǒng)一了畫面風格，又提升了界面閱讀體驗。
設計深色模式時，必須注意各頁面的配色及對比度都要盡可能地統(tǒng)一。在深色模式下點開B站創(chuàng)作中心或推薦服務中的版塊時，加載畫面仍然是白色，突然出現(xiàn)的強光無疑會對眼睛造成刺激，對于用戶來說體驗感也極差。
百度網(wǎng)盤
高飽和度的色彩會在深色背景上產(chǎn)生炫光的視覺效果，引發(fā)視覺疲勞。百度網(wǎng)盤的深色模式下，背景接近全黑，圖標卻沒有太大的調(diào)整，給用戶帶來的閱讀體驗并不好。
同樣，由于背景顏色太深，導致百度網(wǎng)盤的文本和背景對比度太大，也存在難以閱讀的情況，對于誦讀困難癥患者來說，在閱讀時會感覺文字在旋轉(zhuǎn)、模糊。
在設計深色模式時，除了背景顏色盡量使用深灰色以外，還需要確保絕大部分區(qū)域保持深色，盡可能使用數(shù)量有限的色彩。把握好對比度和飽和度，才能設計出舒適的深色模式。
綜上所述，合理使用深色模式，可以降低屏幕亮度，不僅可以減少耗電量，還能減小對自己或他人眼睛的刺激。除此之外，深色模式對背景色、文字以及系統(tǒng)圖標的顏色都進行了優(yōu)化處理，可以提升閱讀舒適度。對于喜歡深色或黑色系的朋友來說，深色模式更是一種不同于普通模式的全新體驗。
除了APP，不少生產(chǎn)力工具也都采用了深色界面，比如PS、摹客等。以摹客為例，用戶在進行設計時，深色界面不僅僅能降低眼睛疲勞度，還能突出你的設計內(nèi)容，打造沉浸式的設計體驗。
隨著蘋果“黑色模式”的推出，深色模式逐漸成為APP設計的流行趨勢。作為設計師，也一定要掌握APP深色模式的設計技巧。從上述APP設計案例中，我為大家總結(jié)了以下幾點建議以作參考：
1.避免使用純黑色；
2.避免使用高飽和度的顏色；
3.文本顏色選用高亮色，但不宜使用純白；
4.做好情感化設計；
5.注意結(jié)構(gòu)和層次感；
6.允許用戶自由切換深色模式和普通模式。
文章來源：UI中國 作者：摹客產(chǎn)品協(xié)作設計
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務