此前，蘋(píng)果表示：“如果微信(Apple)不開(kāi)發(fā)夜間模式，或面臨下一代，它將傳播互聯(lián)網(wǎng)?！庇捎趯?duì)黑暗模式的討論和探索不斷，本文以此為主題，還談?wù)摿艘话愕腁PP黑暗模式設(shè)計(jì)。(莎士比亞)(莎士比亞)。

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

隨著蘋(píng)果對(duì)App Store商店的審核指南所做的更新，對(duì)黑暗模式的重視，可以看出黑暗模式原本類(lèi)似于皮膚級(jí)的功能變成了系統(tǒng)級(jí)支持，為什么它會(huì)火起來(lái)呢？

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

以下是文章主要框架：

01 黑暗模式真的護(hù)眼嗎？

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

今年4月5日，微信團(tuán)隊(duì)曾發(fā)微博：

但是，在當(dāng)?shù)貢r(shí)間6月3日，蘋(píng)果WWDC 2019宣布iOS13確定引入全局深色模式之后……

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

回歸正題，目前已經(jīng)有大量的研究證明，黑暗模式與護(hù)眼與否并沒(méi)有直接的關(guān)系，根據(jù)美國(guó)驗(yàn)光協(xié)會(huì)的數(shù)據(jù)，散光是一種非常普遍的現(xiàn)象。而散光患者閱讀”白板黑字“比閱讀”黑板白字“更難。

還記得嗎，從小為了避免近視都會(huì)被教導(dǎo)，最適合于學(xué)習(xí)的光線是在白天，那是因?yàn)橄艉?，周?chē)墓饩€黑暗，我們的視線被鎖在了幾寸的屏幕中。緊盯著屏幕，容易導(dǎo)致視網(wǎng)膜過(guò)度勞累。從而引起近視、散光、視力偏差等眼部問(wèn)題。

另外，人正常情況下，每分鐘大約要眨動(dòng)15次眼睛。專(zhuān)注于玩手機(jī)時(shí)，我們常常會(huì)無(wú)意識(shí)的忘記眨眼，淚液分泌也會(huì)相對(duì)減少。眼睛長(zhǎng)期保持干澀、疼痛，很容易發(fā)生干眼癥，引起重影、視力模糊等癥狀。這不代表晚上不能玩手機(jī)，而是不要關(guān)燈玩手機(jī)！

發(fā)現(xiàn)了嗎，其實(shí)黑暗模式，就是把燈關(guān)上了，哪里來(lái)的護(hù)眼一說(shuō)。（想護(hù)眼咱就老老實(shí)實(shí)早睡早起放下手機(jī)，不行就開(kāi)燈玩）

02 不護(hù)眼，為什么DARK MODE 還會(huì)流行

1. 歷史原因

計(jì)算機(jī)誕生之初就是只有「黑暗模式」，在在 20 世紀(jì) 60-80 年代，當(dāng)時(shí)計(jì)算顯示設(shè)備是陰極射線管（CRT），是單色顯示器。除了黑底白字外，黑底綠字是當(dāng)時(shí)單色顯示器的常態(tài)。

2. 從用戶(hù)需求的角度考慮

許多人在睡前都會(huì)有在床上看手機(jī)的習(xí)慣。然而，在夜間使用手機(jī)，非常痛苦的一件事情就是刺眼的界面。雖然有許多 app 已經(jīng)支持了夜間模式，但還遠(yuǎn)遠(yuǎn)不夠。在昏暗的情況下注視屏幕，如果屏幕過(guò)量和周?chē)幕璋淡h(huán)境對(duì)比較大，人眼會(huì)隨著App之間的切換收到不同程度的刺激，大概就是這種感覺(jué)：

3. 從用戶(hù)體驗(yàn)的角度考慮

黑暗模式更有利于進(jìn)入沉浸式體驗(yàn)沉浸式設(shè)計(jì)中，即要有吸引用戶(hù)的無(wú)縫鏈接的完整故事鏈條，還需要營(yíng)造主題場(chǎng)景空間，通過(guò)場(chǎng)景延伸融合故事情節(jié)，適時(shí)制造有趣的互動(dòng)體驗(yàn)節(jié)點(diǎn)等等。從而使用戶(hù)沉浸其中，忘卻真實(shí)世界。

沉浸式設(shè)計(jì)的關(guān)鍵是吸引，用戶(hù)的視線首先被吸引過(guò)來(lái)，深色首先讓用戶(hù)感知到的是注意力迅速集中起來(lái)，不然總覺(jué)得看不清或者會(huì)錯(cuò)過(guò)什么？所以說(shuō)深色更容易讓人進(jìn)入沉浸式體驗(yàn)?zāi)Ｊ剑?在設(shè)計(jì)上被引用的很多

4. 從硬件角度考慮

黑暗模式 與OLED屏幕本身黑色不發(fā)光的特性相契合。目前越來(lái)越多的手機(jī)拋棄LCD屏幕用上了OLED屏幕，OLED顯示黑色的時(shí)候可以直接關(guān)閉黑色區(qū)域的像素點(diǎn)，來(lái)達(dá)到幾乎純黑的效果。

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

03 從常見(jiàn)APP的夜間模式梳理常見(jiàn)的設(shè)計(jì)方法

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

這種方法實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，但是在體驗(yàn)方面談不上優(yōu)秀，黑色蒙版黑色的字體，這個(gè)頁(yè)面的層級(jí)一定程度上變得模糊許多，也有可能是今日頭條出于內(nèi)容信息量過(guò)大的原因。很多人會(huì)想到那我把它變成黑底白字就完了唄。

如果讓你選擇，會(huì)覺(jué)得哪個(gè)更易用呢？

你是不是可能會(huì)選擇右邊？然而在用戶(hù)實(shí)際使用中，倘若夜間長(zhǎng)時(shí)間觀看，左圖的組合會(huì)比右邊更舒服，夜間的對(duì)比度不需要太過(guò)明顯，需要柔和一些。因此可以看出夜間模式的設(shè)計(jì)需要均衡各方面來(lái)進(jìn)行考慮而不是簡(jiǎn)單的黑底白字就可以。

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

微信讀書(shū)

常見(jiàn)的還有：夸克瀏覽器、網(wǎng)易新聞、網(wǎng)易云音樂(lè)、糗事百科、QQ等等。

這種方式一般是把頁(yè)面中最大的光源調(diào)整成為和環(huán)境接近的顏色，通過(guò)降低亮度差值的方式降低刺眼度。

這種設(shè)計(jì)方式成本更大，需要對(duì)顏色、字體、icon都進(jìn)行調(diào)整，單獨(dú)定義夜間模式的UI界面。開(kāi)發(fā)和適配的難度更大，實(shí)現(xiàn)成本高，并且后期迭代時(shí)都需要研發(fā)維護(hù)，對(duì)于小型的研發(fā)團(tuán)隊(duì)來(lái)說(shuō)負(fù)擔(dān)很重

這其中做的最為細(xì)致的就是騰訊QQ除了背景色、文字顏色、圖片之外對(duì)底部的標(biāo)簽欄也有夜間化設(shè)計(jì)，做了更加細(xì)節(jié)的場(chǎng)景化設(shè)計(jì)。

注意：簡(jiǎn)潔模式下暫無(wú)黑暗模式場(chǎng)景化設(shè)計(jì)的改變

04 需要注意的設(shè)計(jì)細(xì)節(jié)

1. 文字顏色

在深色界面下，文字顏色盡量不要使用純白。對(duì)于黑底白字的形式，白色文字更加容易吸睛，視覺(jué)刺激更加強(qiáng)烈，但強(qiáng)烈的同時(shí)會(huì)帶來(lái)視覺(jué)疲勞，造成不適的閱讀體驗(yàn)，甚至極端情況下的對(duì)比會(huì)使白色產(chǎn)生眩光，不利于文字的識(shí)別。

2. 段落間距行高

大多數(shù)研究表明，在可讀性方面深色界面相比淺色界面略差，所以適當(dāng)?shù)脑黾游淖值亩温溟g距，行高等，是在深色界面下增強(qiáng)文字可讀性的重要途徑。

3. 文字字體

在深色界面下，無(wú)襯線字體相比襯線字體可讀性更強(qiáng)，但是襯線字體相比無(wú)襯線字體在深色界面下更顯優(yōu)雅，前提是字體需要放大，留足空白。

4. icon變化

仔細(xì)地觀察圖標(biāo)，做出藝術(shù)性的反轉(zhuǎn)，例如QQ這方面就做的不錯(cuò)，而不是只改變顏色，在深色背景下，同樣的icon的形狀感與體積感可能會(huì)發(fā)生變化。推薦的處理方式如下：

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

色彩傾向：在深色背景中加入有彩色點(diǎn)綴，可以是品牌色或者其他顏色，這會(huì)使設(shè)計(jì)顯得更加優(yōu)雅、高級(jí)。

色彩感知：從色彩心理學(xué)上來(lái)說(shuō)黑色會(huì)傳遞出高端、正式、名望、權(quán)力的感覺(jué)，這也是為什么許多大品牌會(huì)圍繞黑色來(lái)做視覺(jué)設(shè)計(jì)，并且使用黑白來(lái)做主要的配色方案。

6. 黑色-沒(méi)那么簡(jiǎn)單

• 不要使用 100% 黑色
• 使用不同層級(jí)的黑色和陰影來(lái)體現(xiàn)層次感
• 在黑暗模式下更換原先的顏色
• 創(chuàng)建一個(gè)新的，黑暗模式下的調(diào)色板
• 少量使用顏色避免花里胡哨
• 確保有足夠的對(duì)比度

自然界中沒(méi)有百分百的黑色，我們?nèi)粘Ｉ钪锌吹胶谏鋵?shí)是深灰色，如果設(shè)計(jì)中使用了純黑色，會(huì)顯得不自然。因?yàn)榧兒谏梢詨旱挂磺校w過(guò)一切其他元素。

7. 視覺(jué)層次

在深色界面下面更應(yīng)該注重視覺(jué)層次，每個(gè)版塊之間的對(duì)比要清晰明了，層次分明，否則用戶(hù)會(huì)很容易在布局間迷失，造成不好的體驗(yàn)。

05 總結(jié)

設(shè)計(jì)黑暗模式下的界面時(shí)要注意把握好度，彌補(bǔ)深色界面的缺點(diǎn)，揚(yáng)長(zhǎng)避短，當(dāng)然，在具體設(shè)計(jì)的時(shí)候同樣需要考慮你的產(chǎn)品是否需要夜間模式，需要到什么程度？使用場(chǎng)景是否值得去添加夜間模式？添加后能為產(chǎn)品的什么指標(biāo)帶來(lái)增長(zhǎng)？

寫(xiě)在最后

我們來(lái)回顧一下整片文章框架吧：

本文參考

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

作者：米六，微信號(hào)：Evymmmm

本文由 @米六 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議