黑暗时代即将来临

或在为应用程序或站点开发暗模式时要记住的是什么


2018年显示:黑暗模式即将到来。 现在我们已经过了2019年的一半,我们可以充满信心地说:他们在这里,到处都是。


一个旧的绿色黑色监视器的示例

首先,黑暗模式根本不是一个新概念。 它已经使用了一段时间。 实际上,它曾经使用了很长时间:监视器是“绿黑”的,但这仅仅是因为内部的发光层在暴露于辐射时发出了绿色的辉光。


但是即使在引入彩色监视器之后,暗模式仍继续存在。 为什么这样


有两个主要动机可以解释为什么现在每个人都急于在其应用程序中添加一个深色主题。 首先:计算机无处不在。 我们到处看,都有某种屏幕。 从早上到深夜,我们都会使用移动设备。 深色模式的存在减轻了您上床睡觉前的眼睛负担,而上一次“上一次”翻身则是在沙发上。 网络。 (如果您看起来像我,那么“上次”可能意味着3小时滚动R / EngineeringPorn 。黑暗模式?是的,请!)

另一个原因是新的显示技术。 大型公司(苹果,谷歌,三星,华为)的旗舰机型都配备了OLED屏幕,与LCD显示屏不同,OLED屏幕不需要背光。 这对您的电池确实是个好消息。 假设您正在手机上查看黑色正方形图像; 在LCD显示屏上,背光虽然大部分是黑色的,但却会照亮整个屏幕。 但是,在OLED显示器上查看同一图像时,黑色正方形组成的像素只是关闭。 这意味着他们根本不消耗能量。


这些类型的显示使黑暗模式变得有趣得多。 使用深色界面,可以大大延长设备的电池寿命。 查看去年11月Android开发者峰会的事实和数据,亲自看看 。 当然,黑暗模式与UI更改息息相关,因此让我们重新了解一下吧!


黑暗模式101


首先:“暗”不等于“黑”。 请勿尝试将白色背景替换为黑色,因为这将导致无法使用阴影。 类似的设计将是超级扁平的(不好的方式)。


记住阴影/照明的基本原理很重要。 更高的物体应在阴影中更亮,以模拟真实的照明和阴影。 因此,更容易区分不同的组件及其层次。



两个同样带有阴影的灰色正方形,一个在100%黑色背景上,另一个在#121212上。 提起时,对象会获得较浅的灰色阴影。


在深色主题中,如果对比度很好,您仍然可以使用通常的原色。 让我们举例说明。



在此界面中,主要动作是底部面板中的蓝色大按钮。 在明亮或黑暗模式之间切换时,在对比度方面没有问题,按钮仍然吸引眼球,图标清晰,一般来说一切都很好。



当相同的颜色以不同的方式使用时,例如在文本中,将出现问题。 尝试使用(较)不太饱和的基础色调,或寻找其他方法将品牌色合并到界面中。



左:黑底红字看起来很糟。 正确:降低饱和度-一切都会好起来。 -大约 佩雷夫


对于您可以使用的所有其他饱和色(例如警告色或错误)也是如此。 Google在其“ 材料设计指南 ”中将默认错误的颜色覆盖了40%的白色, 切换为暗模式。 这是一个很好的起点,因为它将提高对比度水平以满足AA标准。 当然,您始终可以随时更改设置,但不要忘记检查对比度。 顺便说一句,用于此目的的有用工具是Sketch- Stark插件,该插件可以准确显示两层之间的对比度。


那文本呢?


这里的一切都很简单:任何东西都不应该是100%黑色,100%白色,反之亦然。 白色反射所有长度的光波,黑色反射-吸收光。 如果将100%白色的文本放在100%黑色的背景上,这些字母将反射光线,拖尾并变得较不可读,这会对可读性产生负面影响。


100%的白色背景反射太多的光线以至于无法完全专注于文字,情况也是如此。 尝试稍微柔化白色,对背景和黑色背景上的文本使用浅灰色。 这样可以减轻眼睛的压力,防止眼睛过紧。



这里的黑暗模式不会消失


从屏幕唤醒到入睡,我们在屏幕上花费的时间在不断增长,每一天,新的屏幕都会在我们的生活中出现。 这是一个相当新的现象,我们的眼睛还不习惯深夜在屏幕上显示时间的增加。 这是黑暗模式起作用的地方。 在macOS和Material Design(最有可能在iOS中)引入此功能之后,我们相信该功能迟早将成为所有移动和桌面应用程序的默认设置。 最好为此做好准备!


不引入暗模式的唯一原因是,当您完全100%确定应用程序仅在明亮的日光下使用时。 但是,这种情况很少发生。


值得一提的是,除先前概述的基本原理外,在实施黑暗政权时还需要特别注意的几件事。


从可访问性的角度来看,黑暗模式并不是最方便的,因为对比度通常较低,这反过来根本不会提高可读性。



来源


但是,想象一下您正在准备睡觉,真的想睡觉,但是就在您入睡之前,您想起了需要向某人发送一条非常重要的信息,甚至一个晚上都无法等待。 拿起手机,然后打开手机,然后打开AAAAAA ... iMessage的浅色背景不会让您再睡3个小时。虽然认为深色背景上的浅色文本无法被访问,但此刻使用深色模式将为您带来一百万的便利。 这完全取决于用户当前所在的情况。


这就是为什么我们认为自动暗模式是一个好主意。 它在晚上打开,在早晨关闭。 用户甚至不需要考虑它,这非常方便。 Twitter在黑暗模式设置方面做得很好。 此外,对于所有这些OLED屏幕,它们都只有暗模式和更暗模式,从而节省了电池以及与之相关的所有内容。 在此需要注意的重要事项:让用户在需要时手动切换:没有比没有切换功能自动切换界面更糟糕的了。



Twitter具有自动暗模式,该模式在晚上打开,在早晨关闭。


同样,在制定主题时,应牢记,有些东西根本不能变暗。


使用文本编辑器,例如Pages。 您可以使界面变暗,但工作表本身将始终是白色的,从而模拟了真实的纸张。


启用暗模式的页面

所有内容编辑器(例如Sketch或Illustrator)也是如此。 尽管可以将界面设置为深色,但默认情况下,您使用的安装板始终为白色。


草图处于黑暗模式,但仍具有明亮的白色画板。


因此,无论使用哪种应用程序,我们都认为暗模式将成为您正在使用的操作系统的本机,这意味着最好为将来做准备, 因为它会是暗的。


如果您想了解有关开发暗界面的更多信息,请务必查看《 材料设计指南》,这是本文的主要信息来源。

Source: https://habr.com/ru/post/zh-CN455898/


All Articles