黑暗模式大勢所趨,盤點(diǎn)常見APP黑暗模式設(shè)計(jì)

5 評論 8431 瀏覽 28 收藏 13 分鐘

前段時(shí)候,一則“蘋果稱:微信若堅(jiān)持不開發(fā)夜間模式,或面臨下架”的消息傳播互聯(lián)網(wǎng),由于展開對黑暗模式的討論與探究不絕于耳,本文也以此為話題聊聊常見的APP黑暗模式設(shè)計(jì)。

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

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

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

以下是文章主要框架:

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

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

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

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

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

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

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

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

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

02?不護(hù)眼,為什么DARK MODE 還會流行

1. 歷史原因

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

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

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

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

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

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

4. 從硬件角度考慮

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

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

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

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

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

如果讓你選擇,會覺得哪個更易用呢?

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

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

微信讀書

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

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

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

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

注意:簡潔模式下暫無黑暗模式場景化設(shè)計(jì)的改變

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

1. 文字顏色

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

2. 段落間距行高

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

3. 文字字體

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

4. icon變化

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

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

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

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

6. 黑色-沒那么簡單

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

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

7. 視覺層次

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

05 總結(jié)

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

寫在最后

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

本文參考

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

 

作者:米六,微信號:Evymmmm

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 設(shè)計(jì)是門大學(xué)問

    來自廣東 回復(fù)
  2. 一起開辟新天地呀!

    來自浙江 回復(fù)
  3. 黑夜給了我黑色的眼睛,我卻用來睡覺??

    回復(fù)
  4. 米六666

    來自韓國 回復(fù)
  5. 如果有問題或者感興趣想要一起交流,可以添加
    公眾號:米六研讀間,后臺發(fā)送消息即可~

    來自山東 回復(fù)