Google 是如何设计深色模式的？

读完这篇 Google Dark Mode 你会知道为什么设计规范说了很多 APP 的 Dark Mode 都有很大的问题，包括 beta 微信和网易云音乐的版本。如果你读完后仍然怀疑最后一句话，晚上关灯后躺在床上，使用以上两种模式。 APP 的 Dark Mode 试试看。 大多数深色模式UI深色界面通常作为默认（浅色）颜色模式的补充。 一、深色模式的特点 Material Design 深色模式包括以下属性： 对比度：深色界面与100%白色文本的对比度应至少为15.8:1。 海拔:海拔较高的部件通过显示更亮的表面颜色来表达其高度。 去饱和度：深色模式中的首选颜色需要去饱和度，因此首选颜色与主文本的对比度至少为4.5:1，才能满足WCAG的AA标准。 颜色有限：深色表面颜色大面积使用，色彩强调有限。 二、主要组成部分 深色模式UI深色表面和少量颜色将大面积使用，可以在保证高标准可用性的同时散发出弱光。 背景色 Background（0dp遮罩） 表层色 Surface（1dp遮罩） 首选色 Primary 次级色 Secondary 背景层文字 表层文字 首选层文字 次级层文字 深色模式开关 深色模式可以随系统主题自动切换（Android10），也可在APP内部设置开关。 在主界面设置图标icon切换开关 弱化显示：在菜单或设置中设置切换开关 上图显示了顶部的设置bar上切换开关 上图是设置在溢出菜单中的浅色模式和深色模式选项 上图是设置在应用设置中的深色模式开关 三、设计应用细则 深灰色应该是主色，而不是纯黑色。深灰色可以容纳更广泛的颜色、高度和深度，因为它更容易看到灰色阴影。 深灰色界面字在深灰色界面上的对比度低于纯黑色界面，深灰色界面也能减轻眼部疲劳。 Google 推荐的深色模式界面颜色是 #121212。 Google 推荐的深色模式界面颜色是 #121212 1. 海拔的表示 与浅色模式一样，深色模式中的每个组件也需要呈现不同的海拔和阴影。然而，深色模式中的不同海拔表现为不同的表面亮度。 海拔越高，颜色越亮。 组件表面的海拔越高（假设上面有一个隐形光源，将组件上升到更接近光源的位置），组件就越亮。我们可以通过增加半透明的白色屏蔽来表达亮度。 增加颜色覆盖也可以使我们更容易地分割组件和阴影，提高组件和阴影之间的对比度，使组件的边缘更加明显。 半透明白色遮罩不适用于使用首选颜色和次级颜色的组件； 在深色模式下，阴影仍然需要黑色，因为阴影在现实生活中不可能有其他颜色。 2. 易用性和对比度 深色模式中的背景颜色必须足够深，以显示白色文本。背景颜色和文本之间的对比度至少是 15.8:1。 要打造符合品牌设定的深色界面，可以用较低的不透明度将品牌色覆盖在#121212上。 ＃121212是 Google 建议使用深色模式界面颜色。 3. 使用颜色的原则 应避免在深色模式下使用文本WCAG饱和色(背景与文字的对比度应高于4.5:1)。深色背景上的饱和色会导致眼睛疲劳。 4. 如何选择首选颜色？ 首选色是在APP界面和各种组件中最常见的颜色。Material Design baseline色调200是深色模式的首选。 5. 延伸首选颜色 在深色模式下，组件有时会使用浅色，可以使用由首选颜色延伸的颜色。 6. 次级色 可用于强调次级色UI中间的一些部分。深色模式中的次级色也需要去饱和度以满足高于4的要求.5:1对比度标准。 7. 强调色 深色占据了深色模式UI大多数界面。通常强调颜色会使用明亮的颜色（如更饱和或更明亮的颜色），以达到突出元素的目的。强调颜色应谨慎使用，仅用于强调文本、按钮等关键元素。 8. 如何确定强调色？ Material色板生成器可用于创建配色方案或生成色调板，然后选择可用于深色模式的颜色。 为了更好地适应深色模式，建议使用200-50种颜色，避免900-500种饱和色。这可能不同于你在浅色模式中选择颜色的原则。 9. 品牌色 高饱和度的品牌颜色也可用于深色模式，以保持品牌知名度。APP品牌元素应限制在1-2种，如logo或者用品牌色按钮。 谨慎使用品牌色彩可以保持品牌元素的高优先级，突出其重要地位。 10. 错误色 用错误的颜色来指示错误的状态。 Material Design baseline使用的错误颜色是#CF6679。这种颜色是浅色模式中的错误颜色#B0020覆盖40%不透明的白色遮盖。 11. 排版和图标 “上层”色 上层颜色主要用于关键界面上的文本、图标等相对微妙的元素。这些关键界面使用首选颜色、次要颜色、表面颜色、背景颜色、错误颜色等。 白色或黑色通常用于深色模式，如下图所示。 深色背景上的浅色文字 当需要在深色背景上显示浅色文字时，建议使用以下不饱和度： 高优先级文字：87%的不透明度 中等优先级或提示文本不透明度为60% 表示不可用状态的文字：不透明度为38% 四、自定义应用 使用特定的深色模式组件 Material Design 有些用例也很有用。使用特定的深色模式组件 Material Design 有些用例也很有用。 1. 大面积控件 屏幕上占用较大面积的组件，如 app bar 或者背景，可以用深色。 若为亮色，可用于较小的组件，不能用于较大的组件。 避免使用深色模式中的首选颜色作为背景颜色，因为背景面积通常很大，会使整个界面看起来太亮。 2. 浅色与深色的结合 浅色组件在深色模式模式，浅色可用于突出组件的优先级。 例如，在深色模式下 snackbar(消息通知组件)设置为浅色，可使其变浅 snackbar 界面更加突出。 附录 WCAG：全称Web Content Accessibility Guidelines（Web内容无障碍指南)。 颜色对比度计算网站：https://contrast-ratio.com/ 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营合作伙伴提供便利。网站收集的公共内容来自互联网或用户提交，这并不意味着网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。