前段時候，一則“蘋果稱：微信若堅持不開發夜間模式，或面臨下架”的消息傳播互聯網，由于展開對黑暗模式的討論與探究不絕于耳，本文也以此為話題聊聊常見的APP黑暗模式設計。

“黑夜給了我黑色眼睛，我卻用它玩手機”

隨著蘋果對App Store商店的審核指南所做的更新，對黑暗模式的重視，可以看出黑暗模式原本類似于皮膚級的功能變成了系統級支持，為什么它會火起來呢？

一些用戶認為，暗黑模式可以更好的保護視力減少用戶疲勞，同時也避免了不打擾到別人。

以下是文章主要框架：

01?黑暗模式真的護眼嗎？

實際上在我們的DNA中，人眼更習慣于在明亮的背景下對較暗的物體操作，并在白天亮光的情況下活躍，黑夜中安然入睡。

今年4月5日，微信團隊曾發微博：

但是，在當地時間6月3日，蘋果WWDC 2019宣布iOS13確定引入全局深色模式之后……

微信就把上面那條微博刪除了……

回歸正題，目前已經有大量的研究證明，黑暗模式與護眼與否并沒有直接的關系，根據美國驗光協會的數據，散光是一種非常普遍的現象。而散光患者閱讀”白板黑字“比閱讀”黑板白字“更難。

還記得嗎，從小為了避免近視都會被教導，最適合于學習的光線是在白天，那是因為熄燈后，周圍的光線黑暗，我們的視線被鎖在了幾寸的屏幕中。緊盯著屏幕，容易導致視網膜過度勞累。從而引起近視、散光、視力偏差等眼部問題。

另外，人正常情況下，每分鐘大約要眨動15次眼睛。專注于玩手機時，我們常常會無意識的忘記眨眼，淚液分泌也會相對減少。眼睛長期保持干澀、疼痛，很容易發生干眼癥，引起重影、視力模糊等癥狀。這不代表晚上不能玩手機，而是不要關燈玩手機！

發現了嗎，其實黑暗模式，就是把燈關上了，哪里來的護眼一說。（想護眼咱就老老實實早睡早起放下手機，不行就開燈玩）

02?不護眼，為什么DARK MODE 還會流行

1. 歷史原因

計算機誕生之初就是只有「黑暗模式」，在在 20 世紀 60-80 年代，當時計算顯示設備是陰極射線管（CRT），是單色顯示器。除了黑底白字外，黑底綠字是當時單色顯示器的常態。

2. 從用戶需求的角度考慮

許多人在睡前都會有在床上看手機的習慣。然而，在夜間使用手機，非常痛苦的一件事情就是刺眼的界面。雖然有許多 app 已經支持了夜間模式，但還遠遠不夠。在昏暗的情況下注視屏幕，如果屏幕過量和周圍的昏暗環境對比較大，人眼會隨著App之間的切換收到不同程度的刺激，大概就是這種感覺：

3. 從用戶體驗的角度考慮

黑暗模式更有利于進入沉浸式體驗沉浸式設計中，即要有吸引用戶的無縫鏈接的完整故事鏈條，還需要營造主題場景空間，通過場景延伸融合故事情節，適時制造有趣的互動體驗節點等等。從而使用戶沉浸其中，忘卻真實世界。

沉浸式設計的關鍵是吸引，用戶的視線首先被吸引過來，深色首先讓用戶感知到的是注意力迅速集中起來，不然總覺得看不清或者會錯過什么？所以說深色更容易讓人進入沉浸式體驗模式， 在設計上被引用的很多

4. 從硬件角度考慮

黑暗模式 與OLED屏幕本身黑色不發光的特性相契合。目前越來越多的手機拋棄LCD屏幕用上了OLED屏幕，OLED顯示黑色的時候可以直接關閉黑色區域的像素點，來達到幾乎純黑的效果。

并且根據谷歌的研究，暗色主題能夠使 OLED 設備在同等亮度下的電量消耗減少 63%，這主要是由于LCD無論顯示什么顏色都是背光全開，所以LCD注定耗電；OLED由于像素點獨立工作，該亮的亮，該暗的暗，該滅的滅，因此黑暗模式下，手機可以做到更加省電。

03?從常見APP的夜間模式梳理常見的設計方法

1. 頁面處于底層，頂部加一層黑色透明的蒙版，達到讓整個頁面變暗的效果

這種方法實現起來比較簡單，但是在體驗方面談不上優秀，黑色蒙版黑色的字體，這個頁面的層級一定程度上變得模糊許多，也有可能是今日頭條出于內容信息量過大的原因。很多人會想到那我把它變成黑底白字就完了唄。

如果讓你選擇，會覺得哪個更易用呢？

你是不是可能會選擇右邊？然而在用戶實際使用中，倘若夜間長時間觀看，左圖的組合會比右邊更舒服，夜間的對比度不需要太過明顯，需要柔和一些。因此可以看出夜間模式的設計需要均衡各方面來進行考慮而不是簡單的黑底白字就可以。

2. 改變背景色色值和文字色值

微信讀書

常見的還有：夸克瀏覽器、網易新聞、網易云音樂、糗事百科、QQ等等。

這種方式一般是把頁面中最大的光源調整成為和環境接近的顏色，通過降低亮度差值的方式降低刺眼度。

這種設計方式成本更大，需要對顏色、字體、icon都進行調整，單獨定義夜間模式的UI界面。開發和適配的難度更大，實現成本高，并且后期迭代時都需要研發維護，對于小型的研發團隊來說負擔很重

這其中做的最為細致的就是騰訊QQ除了背景色、文字顏色、圖片之外對底部的標簽欄也有夜間化設計，做了更加細節的場景化設計。

注意：簡潔模式下暫無黑暗模式場景化設計的改變

04?需要注意的設計細節

1. 文字顏色

在深色界面下，文字顏色盡量不要使用純白。對于黑底白字的形式，白色文字更加容易吸睛，視覺刺激更加強烈，但強烈的同時會帶來視覺疲勞，造成不適的閱讀體驗，甚至極端情況下的對比會使白色產生眩光，不利于文字的識別。

2. 段落間距行高

大多數研究表明，在可讀性方面深色界面相比淺色界面略差，所以適當的增加文字的段落間距，行高等，是在深色界面下增強文字可讀性的重要途徑。

3. 文字字體

在深色界面下，無襯線字體相比襯線字體可讀性更強，但是襯線字體相比無襯線字體在深色界面下更顯優雅，前提是字體需要放大，留足空白。

4. icon變化

仔細地觀察圖標，做出藝術性的反轉，例如QQ這方面就做的不錯，而不是只改變顏色，在深色背景下，同樣的icon的形狀感與體積感可能會發生變化。推薦的處理方式如下：

5. 色彩-色彩傾向與色彩感知

色彩傾向：在深色背景中加入有彩色點綴，可以是品牌色或者其他顏色，這會使設計顯得更加優雅、高級。

色彩感知：從色彩心理學上來說黑色會傳遞出高端、正式、名望、權力的感覺，這也是為什么許多大品牌會圍繞黑色來做視覺設計，并且使用黑白來做主要的配色方案。

6. 黑色-沒那么簡單

• 不要使用 100% 黑色
• 使用不同層級的黑色和陰影來體現層次感
• 在黑暗模式下更換原先的顏色
• 創建一個新的，黑暗模式下的調色板
• 少量使用顏色避免花里胡哨
• 確保有足夠的對比度

自然界中沒有百分百的黑色，我們日常生活中看到黑色其實是深灰色，如果設計中使用了純黑色，會顯得不自然。因為純黑色可以壓倒一切，蓋過一切其他元素。

7. 視覺層次

在深色界面下面更應該注重視覺層次，每個版塊之間的對比要清晰明了，層次分明，否則用戶會很容易在布局間迷失，造成不好的體驗。

05 總結

設計黑暗模式下的界面時要注意把握好度，彌補深色界面的缺點，揚長避短，當然，在具體設計的時候同樣需要考慮你的產品是否需要夜間模式，需要到什么程度？使用場景是否值得去添加夜間模式？添加后能為產品的什么指標帶來增長？

寫在最后

我們來回顧一下整片文章框架吧：

本文參考

• 蘋果新增審核條例，微信「黑暗模式」就快來了
• 2019：深色模式盛行的一年
• 黑暗模式背后，有這些你不知道的“黑歷史”
• 暗色模式的 iOS 版微信終于要來了，但暗色模式不是「換個黑色界面」這么簡單
• QQ極簡與夜間模式設計

作者：米六，微信號：Evymmmm

本文由 @米六 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議