黑暗主题是一种低光UI,主要显示黑色表面。
用法
黑暗主题在UI的大部分区域显示黑色表面。它被设计为默认(或轻量)主题的补充模式。
暗主题降低了设备屏幕发出的亮度,同时仍然满足最低色彩对比度。它们有助于改善视觉人体工程学,减少眼睛疲劳,根据当前照明条件调节亮度,并在黑暗环境中促进屏幕使用 - 同时节省电池电量。具有OLED屏幕的设备可以在一天中的任何时间关闭黑色像素。
原则
使用深灰色 - 而不是黑色 - 来表示具有更宽深度范围的环境中的高程和空间。应用有限的颜色
灰暗变暗
使用深灰色 - 而不是黑色 - 来表示具有更宽深度范围的环境中的高程和空间。
颜色与口音
在黑暗主题UI中应用有限的颜色重音,因此大部分空间专用于深色表面。
节约能源
在需要高效率的产品(例如带有OLED屏幕的设备)中,通过减少光像素的使用来延长电池寿命。
增强可访问性
通过满足可访问性颜色对比标准,适应常规的黑暗主题用户(例如视力不佳的用户)。
属性
Material Design黑暗主题由以下属性定义:
对比度:深色表面和100%白色正文文本的对比度至少为15.8:1
深度:在较高的高度水平下,组件通过显示较浅的表面颜色来表达深度
去饱和:原色去饱和,因此它们在所有高度级别都通过了至少4.5:1(与正文一起使用时)的Web内容可访问性指南(WCAG)AA标准
颜色有限:大表面使用深色表面颜色,颜色有限(光线,去饱和和明亮,饱和的颜色)
解剖学
黑暗主题UI主要使用深色表面,颜色稀疏。它们发出的光线很少,同时保持高标准的可用性。
1.背景(0dp高程表面叠加)
2.表面(具有1dp高程表面覆盖)
3.主
4.次要
5.在背景上
6.在表面上
7.主要
8.次要
行为
可以使用显示的控件打开(或关闭)黑暗主题:
·突出地,使用图标切换来打开或关闭主题
·突出显示减少,在菜单或应用程序设置中放置切换
属性
黑色主题使用深灰色而不是黑色作为组件的主要表面颜色。深灰色表面可以表现出更广泛的颜色,高度和深度,因为它更容易看到灰色(而不是黑色)上的阴影。
深灰色表面还可以减少眼睛疲劳,因为深灰色表面上的浅色文字比黑色表面上的浅色文字具有更低的对比度。
海拔(阴影高度)
在黑暗主题中,组件保留与较亮主题中的组件相同的默认高程级别和阴影。然而,在黑暗主题中,不同高度水平的表面被不同地照亮
海拔较高,表面较轻
表面高度越高(越接近隐含光源),表面越轻。通过应用半透明白色 覆盖层来表达这种轻盈。
通过在组件表面上放置半透明覆盖物来构造暗主题表面。
通过应用半透明白色覆盖层,表面变得更亮。
1.表面
2.高程覆盖
表面上的叠加还可以更轻松地区分组件之间的高程并查看阴影。叠加增加了曲面与阴影之间的对比度,使每个曲面的边缘更加明显。
默认主题使用阴影来表示高程,而深色主题也通过调整表面颜色来表示高程
这些表面覆盖值旨在最大限度地提高易读性,同时确保不同的高度水平彼此可辨别。
高程叠加透明度范围从最低级别的0%到最高级别的16%
叠加层阐明了组件之间的高程差异。
A. 1dp高度,5%覆盖的卡片
B. 6dp的浮动动作按钮,使用不带覆盖层的辅助颜色
C.高度为8dp的底部应用程序栏,覆盖率为12%
高程覆盖不应用于使用主要颜色或次要颜色的组件表面。
在黑暗的主题中,阴影保持黑暗以准确地表示投射阴影。
别。
避免对使用表面容器的主要颜色或辅助颜色的组件进行高程覆盖。
可访问性和对比度
黑暗主题表面必须足够暗以显示白色文本。它们应该在文本和背景之间使用至少15.8:1的对比度级别。这确保了当应用于最高(和最轻)高度的表面时,正文文本通过WCAG的AA标准至少4.5:1。
要创建带有品牌的深色表面,请在推荐的深色主题表面颜色(#121212)上以低不透明度覆盖主要品牌颜色。颜色#1F1B24是组合暗主题表面颜色#121212和8%原色的结果。
如果背景颜色不够深,无法在白色文本和表面之间达到至少15.8:1的对比度,则最高(和最轻)高架表面的文本将无法通过4.5:1标准。
确保背景颜色足够深,以使正文在最高的表面(24dp)上达到至少4.5:1(AA)的对比度。
需要高效电池使用的UI可以使用真正的黑色。在这些情况下,某些设备(例如带有OLED屏幕的可穿戴设备)可以关闭任何显示黑色的像素以节省电池电量。
警告。
在OLED屏幕上,打开和关闭像素会导致屏幕滚动时出现延迟,从而使像素模糊。
在黑暗的背景的轻的文本当浅色文本出现在深色背景上(此处显示为黑色时为白色)时,应使用以下不透明度级别:高强度文本的不透明度为87%中等重点文字和提示文字的混浊度为60%禁用文字的不透明度为38%
禁用状态
对于容器轮廓和填充,使用12%白色显示所有禁用的组件,对于标签或图标等内容使用38%白色显示。
禁用状态
对于容器轮廓和填充,使用12%白色显示所有禁用的组件,对于标签或图标等内容使用38%白色显示
1.概述容器:12%白色
2.标签/图标:38%白色
3.填充容器:12%白色