或者为应用程序或网站开发深色模式时要记住什么
2018 年，黑暗模式即将到来。 2019 年已经过去一半，我们可以自信地说：他们就在这里，而且无处不在。
首先，深色模式根本不是一个新概念。 它已经使用了相当长的时间了。 事实上，在很长一段时间里，这是他们唯一使用的东西：显示器是“黑底绿”的显示器，但这只是因为内部的发光涂层在暴露于辐射时会发出绿光。
但即使在推出彩色显示器之后，深色模式仍然存在。 为什么会这样呢？
有两个主要动机可以解释为什么今天每一个人都急于在他们的应用程序中添加黑暗主题。 首先：计算机无处不在。 我们目光所及之处都有某种屏幕。 我们从早上到深夜都使用移动设备。 当您在睡觉前“最后一次”滚动浏览社交动态时，深色模式的存在可以减轻眼睛疲劳。 网络。 （如果你像我一样，“最后一次”可能意味着 3 小时的滚动 。 深色模式？ 是的，请！ ）
另一个原因是新的显示器生产技术。 苹果、谷歌、三星、华为等大公司的旗舰机型都配备了 OLED 屏幕，与 LCD 显示屏不同，它不需要背光。 这对于您的电池来说确实是个好消息。 想象一下您正在手机上查看黑色方块的图像； 对于 LCD，背光会照亮整个屏幕，即使大部分屏幕是黑色的。 但当在 OLED 显示器上查看相同的图像时，构成黑色方块的像素就会被关闭。 这意味着它们根本不消耗能量。
这些类型的显示器使黑暗模式变得更加有趣。 通过使用深色界面，您可以显着延长设备的电池寿命。 。 黑暗模式当然与用户界面的变化密切相关，所以让我们温习一下我们的知识！
深色模式 101
首先：“暗”与“黑”不同。 不要尝试用黑色背景替换白色背景，因为这将导致无法使用阴影。 像这样的设计将是超级扁平的（以一种糟糕的方式）。
记住阴影/照明的基本原则很重要。 更高的物体在阴影中应该更亮，模拟现实生活中的照明和阴影。 这使得区分不同的组件及其层次结构变得更加容易。
两个相同的带有阴影的灰色方块，一个位于 100% 黑色背景上，另一个位于 #121212 上。 当物体上升时，它会变成浅灰色。
在深色主题中，只要对比度合适，您仍然可以使用常规基色。 让我们用一个例子来解释一下。
在此界面中，主要操作是底部栏中的蓝色大按钮。 明暗模式切换时对比度没有问题，按钮依然醒目，图标清晰，总体来说一切都很好。
当同一种颜色以不同的方式使用时，例如在文本中，就会出现问题。 尝试使用饱和度较低的主色，或者寻找其他方法将品牌颜色融入界面中。
左：黑底红字看起来很糟糕。 右：降低饱和度，一切看起来都很好。 — 大约。 翻译
这同样适用于您可能使用的任何其他强烈颜色，例如警告或错误颜色。 Google 在其默认错误颜色之上使用了 40% 的白色层覆盖 当切换到深色模式时。 这是一个非常好的起点，因为它将提高对比度级别以符合 AA 标准。 当然，您可以随时更改您认为合适的设置，但请务必检查对比度级别。 顺便说一句，用于此目的的一个有用工具是 Sketch 插件 - ，它准确地显示了两层之间的对比度。
文字呢？
这里一切都很简单：任何事物都不应该是 100% 黑色和 100% 白色，反之亦然。 白色反射所有波长的光波，黑色吸收。 如果将 100% 白色文本放置在 100% 黑色背景上，字母会反射光线、出现污迹，并且变得不太清晰，这会对可读性产生负面影响。
100% 白色背景也是如此，它会反射太多光线，无法完全聚焦在文字上。 尝试稍微软化白色，在背景上使用浅灰色，在黑色背景上使用文本。 这将减轻眼睛疲劳，防止
深色模式已经到来并且不会消失
我们花在屏幕前的时间不断增加，每一个新的一天，从我们醒来的那一刻到入睡，我们的生活中都会出现新的屏幕。 这是一个相当新的现象；我们的眼睛还不习惯深夜屏幕时间的增加。 这就是黑暗模式发挥作用的地方。 随着 macOS 和 Material Design（最有可能在 iOS）中引入此功能，我们相信迟早它将成为所有应用程序（移动和桌面）的默认功能。 最好为此做好准备！
不实施深色模式的唯一原因是当您绝对 100% 确定您的应用程序专门在明亮的日光下使用时。 然而，这种情况并不经常发生。
值得一提的是，除了前面总结的基本原则之外，在实施黑暗模式时还需要特别注意一些事情。
就可访问性而言，深色模式并不是最方便的，因为对比度通常较低，这根本无法提高可读性。
但想象一下，你正准备睡觉，你真的很想睡觉，但就在你入睡之前，你记得你需要向某人发送一条超级重要的消息，连一晚都等不及。 你拿起你的手机，打开它，然后啊啊啊……你的 iMessage 的浅色背景会让你再清醒 3 个小时。虽然深色背景上的浅色文本不被认为是最容易访问的，但此时使用深色模式会增加一百万的便利。 这完全取决于用户当前所处的情况。
这就是为什么我们认为 自动深色模式 这么酷的主意。 它在晚上打开，在早上关闭。 用户甚至不需要考虑，非常方便。 Twitter 在黑暗模式设置方面做得非常出色。 此外，所有这些 OLED 屏幕都只有深色模式和更暗模式，可以节省电池和与之相关的一切。 这里需要注意的是：让用户有机会随时手动切换：没有什么比自动更改界面而无法切换回来更糟糕的了。
Twitter 有一个自动黑暗模式，会在晚上打开并在早上关闭。
此外，在开发主题时，值得记住的是，有些东西根本不能变暗。
使用像 Pages 这样的文本编辑器。 您可以使界面变暗，但纸张本身始终是白色的，模拟真实的纸张。
启用深色模式的页面
这同样适用于所有类型的内容创建编辑器，例如 Sketch 或 Illustrator。 尽管界面可以变暗，但默认情况下您使用的画板将始终为白色。
在深色模式下绘制草图，仍然有明亮的白色画板。
因此，无论使用哪种应用程序，我们都相信您使用的操作系统将原生提供深色模式，这意味着最好为未来做好准备。 天会黑的。
如果您想了解有关开发深色 UI 的更多信息，请务必查看指南 ，这是我们本文的主要信息来源。
来源： habr.com