黑暗主题

黑暗主题是一种低光UI,主要显示黑色表面。

用法

黑暗主题在UI的大部分区域显示黑色表面。它被设计为默认(或轻量)主题的补充模式。

暗主题降低了设备屏幕发出的亮度,同时仍然满足最低色彩对比度。它们有助于改善视觉人体工程学,减少眼睛疲劳,根据当前照明条件调节亮度,并在黑暗环境中促进屏幕使用 - 同时节省电池电量。具有OLED屏幕的设备可以在一天中的任何时间关闭黑色像素。

原则

使用深灰色 - 而不是黑色 - 来表示具有更宽深度范围的环境中的高程和空间。应用有限的颜色

灰暗变暗

使用深灰色 - 而不是黑色 - 来表示具有更宽深度范围的环境中的高程和空间。

颜色与口音

在黑暗主题UI中应用有限的颜色重音,因此大部分空间专用于深色表面。

节约能源

在需要高效率的产品(例如带有OLED屏幕的设备)中,通过减少光像素的使用来延长电池寿命。

增强可访问性

通过满足可访问性颜色对比标准,适应常规的黑暗主题用户(例如视力不佳的用户)。


属性

万维网联盟(W3C)

Material Design黑暗主题由以下属性定义:

对比度:深色表面和100%白色正文文本的对比度至少为15.8:1

深度:在较高的高度水平下,组件通过显示较浅的表面颜色来表达深度

去饱和:原色去饱和,因此它们在所有高度级别都通过了至少4.5:1(与正文一起使用时)的Web内容可访问性指南(WCAG)AA标准

颜色有限:大表面使用深色表面颜色,颜色有限(光线,去饱和和明亮,饱和的颜色)


解剖学

黑暗主题UI主要使用深色表面,颜色稀疏。它们发出的光线很少,同时保持高标准的可用性。


1.背景(0dp高程表面叠加)

2.表面(具有1dp高程表面覆盖)

3.主

4.次要

5.在背景上

6.在表面上

7.主要

8.次要


行为

可以使用显示的控件打开(或关闭)黑暗主题:

·突出地,使用图标切换来打开或关闭主题

·突出显示减少,在菜单或应用程序设置中放置切换



顶部应用栏中的黑暗主题切换
一个黑暗的主题在溢出菜单中切换


一个黑暗的主题在应用程序的设置内切换


属性

黑色主题使用深灰色而不是黑色作为组件的主要表面颜色。深灰色表面可以表现出更广泛的颜色,高度和深度,因为它更容易看到灰色(而不是黑色)上的阴影。

深灰色表面还可以减少眼睛疲劳,因为深灰色表面上的浅色文字比黑色表面上的浅色文字具有更低的对比度。


推荐的深色主题表面颜色为#121212

海拔(阴影高度)

在黑暗主题中,组件保留与较亮主题中的组件相同的默认高程级别和阴影。然而,在黑暗主题中,不同高度水平的表面被不同地照亮

海拔较高,表面较轻

表面高度越高(越接近隐含光源),表面越轻。通过应用半透明白色 覆盖层来表达这种轻盈。


随着表面升高,颜色变浅。

通过在组件表面上放置半透明覆盖物来构造暗主题表面。

通过应用半透明白色覆盖层,表面变得更亮。

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%白色

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,348评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,122评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,936评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,427评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,467评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,785评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,931评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,696评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,141评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,483评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,625评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,291评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,892评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,492评论 2 348