专业的短链接生成工具
链接域名
短网址有效期
Google 是如何设计深色模式的？
更新时间：2025-5-4 07:40:56 作者：爱短链
读完这篇 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/ 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营合作伙伴提供便利。
网站收集的公共内容来自互联网或用户提交，这并不意味着网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
如果你读完后仍然怀疑最后一句话，晚上关灯后躺在床上，使用以上两种模式。
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/ 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营合作伙伴提供便利。
网站收集的公共内容来自互联网或用户提交，这并不意味着网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
