17

好看又实用的暗色模式,不是「换个黑色界面」这么简单

 4 years ago
source link: https://sspai.com/post/59407
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

昨晚,微信官方在微博表示即将在 iOS 版支持暗色模式,一时引起了广泛的关注和热议。

Zf6fIr7.png!web

作为近两年的「新时尚」,暗色/深色模式已经几乎成为了各家系统的标配功能。究竟它为什么会流行?如何设计一个好用的暗色模式?作为用户又应该如何使用它呢?

一切为了夜的黑

睡前看手机已然成为了不少人的日常习惯。在昏暗的灯光下注视屏幕,长时间容易引起视疲劳。为了缓解这个问题,厂商纷纷在近几年引入自动调节屏幕亮度的功能,不少厂商还加入了「夜间模式」,通过减少蓝光的方式来提升夜间使用体验。

iqQjYjy.jpg!web

「暗色/深色模式」的出现,可以进一步降低屏幕的亮度,缩小屏幕显示内容与环境光强度的差距,让你在夜间看屏幕时不那么刺眼。采用暗色的界面设计并不是什么新鲜事,许多专业级的生产力工具,比如 Adobe 旗下的产品、还有苹果的 Final Cut Pro X 和 Logic Pro X,采用的都是暗色的界面,这种设计能够提供出色的沉浸感,突出显示的内容。虽然暗色和专业本身没有直接的关系,但随着暗色设计在专业产品中的普及,许多用户也接受了这种审美上的偏好。

BNnmMzY.png!web Logic Pro X

更重要的是,暗色还与 OLED 屏幕本身黑色不发光的特性相契合。目前大多旗舰机的手机屏幕都选择使用 OLED 材质的屏幕,这给暗色模式的普及提供了助力。不仅如此,在 OLED 屏幕上使用暗色主题还能起到节电的效果。根据谷歌的研究,暗色主题能够使 OLED 设备在同等亮度下的电量消耗减少 63%。亮度小、沉浸感好还能节电,暗色模式成为厂商和用户的「新宠儿」也就成了顺理成章的事。

fq6f6jn.png!web Google 自家应用在正常/暗色模式下的耗电对比

> 付费栏目推荐: 深色模式对视疲劳和效率的影响

暗色不只是纯黑

既然用户想要暗色模式,厂商也没有理由拒绝,那么为什么不做呢?其实,做一个体验出色的暗色模式并不容易,远远不只是「换个黑色界面」这么简单。

以背景颜色为例。如果你仔细观察 iOS 和 Android 系统的暗色模式,你会发现它们都没有使用纯黑色(#000000)。虽然研究表明理想状态下在 OLED 设备上使用纯黑主题是最省电的,但实际设计中还要考虑其他因素。

YB7nuaE.jpg!web iOS 的暗色模式

例如,出于无障碍设计的考虑,谷歌推荐采用深灰(比如 #121212)而不是纯黑作为暗色主题的主色调。和纯粹的黑底白字相比,灰底能够在保证足够文本可读性的前提下营造出更为舒适的对比度体验,真正做到减轻用户视觉疲劳的效果。

NrAvIjZ.png!web 谷歌推荐的暗色背景颜色

此外,Material Design 的设计风格也是谷歌不采用纯黑作为暗色模式背景色的原因。具体的分析,可以阅读一下少数派此前的这篇文章:

> 拓展阅读: 为什么「暗色模式」不应采用纯黑背景?这是谷歌的理由

iOS 的深色模式也有不少讲究。苹果在去年的 WWDC 上专门做了一个专题来介绍如何升级适配深色模式:苹果引入了语义色彩(Semantic Color)来帮助开发者快速规划和复用配色方案;将背景色分为基底色(Base)与提亮色(Elevated)来区分视觉;为毛玻璃效果设计了深浅两套配色方案;引入字体化图标来解决深色模式下的显示效果……这些都体现了设计一个暗色模式的复杂之处。

MVvqQrJ.png!web 深浅颜色不同的毛玻璃效果

> 付费限时免费读: Dark Mode 的设计难点与 iOS 的设计方法

系统的暗色模式设计不好做,App 的暗色适配同样如此。微信的暗色模式其实去年年底就在 Android 上进行了一次灰度测试,尽管当时大部分界面已经完成了适配,但公众号文章和小程序这些常用功能的界面依旧还是会「照亮你的眼」。作为一个国民级应用,微信的暗色模式适配需要大量的调试工作,这次官方声明或许意味着我们离 Android 和 iOS 上的微信暗色主题真的不远了。

2iA7niY.png!web 左:使用 Android 10 强制暗色模式/ 右:微信内测版暗色模式

用好暗色模式,送你几个小技巧

有了暗色模式当然好,但想要用好它也需要技巧。我们为你整理了各个系统暗色模式的一些实用小贴士:

如何在 Windows 上自动切换深/浅色主题

Windows 10 目前虽然提供了暗色模式,但无法实现根据时间自动切换。如果你希望实现这个功能,可以尝试下载使用「自动暗黑模式 ( Windows-Auto-Night-Mode )」这款小工具。它不仅支持对系统和应用进行独立的深/浅模式设定,还为 Edge 浏览器提供了配套选项,同时支持根据不同的主题模式切换不同的桌面背景。

eEzQbuU.png!web

另外,如果你不希望安装软件,也可以使用 Windows 的计划任务来实现自动切换暗色模式的功能。具体方法请参考: 让 Windows 10 也能自动切换深/浅色主题

让 macOS 的暗色模式更实用

macOS 从 Mojave 开始加入了暗色模式,但是只能在深浅两种模式之间进行简单的全局性切换。如果你需要更加细致的设置,比如只让菜单栏和 Dock 栏变成黑色,在浅色模式下也能用上黑色的地图等等,那么可以参考一下少数派之前介绍的这个方法,通过几行小命令轻松自定义暗色模式。

UNrEjeV.png!web

利用 macOS 的动态桌面,你还可以挑选好看的动态壁纸来配合暗色模式。除了系统自带的壁纸,你可以试试 24 Hour Wallpaper ,它是由两位摄影师的摄影作品开发的壁纸软件,里面总共有 58 款包括自然风光、城市摄影在内的动态壁纸,足够你用上一阵子了。

fyYvme3.jpg!web

在 Android 上拥有不输 iOS 的暗色模式体验

Android 10 加入了系统级暗色模式,并支持一键切换。但如果你需要更加高级的功能,比如根据日落/日出时间自动开/关暗色主题,将夜间/护眼模式与暗色主题关联,或是根据环境光亮度自动切换暗色主题,那么你可以利用 Tasker 中对暗色主题相关动作来实现。跟着这份「保姆级」教程,不需要 root 权限,一步一步动手打造你的专属暗色模式。

nmuEVvu.png!web

让网页也拥有暗色模式

Chrome 7x 版本后自带了暗色模式,在完成适配的网站上(比如少数派)可以根据系统情况自动开启。但假如你恰好碰到一个没有适配的网站,那么不妨用一下Dark Reader 这款浏览器拓展。它覆盖了 Chrome(Edge)、FireFox 和 Safari 等多个浏览器,可以一键得到舒适的深色模式体验,并且还可以根据需要自己对亮度、对比度和灰度等进行调节。

yAfQRjM.png!web

如果你希望了解更多关于暗色模式实用技巧,欢迎前往少数派专题 「用好暗色模式」继续阅读。

> 下载少数派客户端、关注 少数派公众号, 让你的手机更好用 ⚙️

> 特惠、好用的硬件产品,尽在 少数派 sspai 官方店铺  


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK