赞助商
立即赞助

千呼万唤!这就是你们要的谷歌深色主题设计规范

UI设计3年前 (2021)更新 流光
2.9K 0 0

编者按:今的 Google I/O 会,Android Q 的深色主题的推出后,官方的 Material Design 的设计规范随之进行了更。作为目前最流的设计格和题规范之一,Material Design 的深色题设计规范非值得参考习。这是一套自恰的设计规范,有着相当严密的逻辑,在 Material Design 的在隐喻逻辑的推,严格遵循国际通行的可性原则来确保深色题的可性和合性。

作一主流趋势,深色系配色主题必然会逐渐配到几乎全部的移动端产品,让用户低亮度环境下舒移动端界面行交互。可,它的色彩模式、兼性、系统性、易用性、可交互性以及内逻辑自恰怎么到的?也许不一严格遵循这套规范,但它会作标杆,告诉确保整套主题严密运行,创造体验无缝的 UI 界面。

急找素的同学可以直接下载官方提供的资源:度云, 提取码: mhsr

注意:这素材是和Sketch 搭配使用

用法

深色主题将会让 UI 的绝部分以深色呈。它作默认主题(浅色主题)的一补充模式存。

深色主题将会降低设备屏幕显示亮度,时仍保持最低程度色比度。它将会从体工程学度提升设计,有效地减少视觉疲劳,并根据前环境适应性地调亮度,并在黑暗环境提升屏幕使用效,时节省电量。使用 OLED 屏幕设备可以在任何时候确保黑色像素是不发。

原则

在有较大纵深环境,使用深灰色而黑色来呈现高程和空。

更深灰色

千呼万唤!这就是你们要的谷歌深色主题设计规范

深色模式下,不使用黑色,使用深灰色,用呈较环境中的高程范围的区域。

色彩与调性

千呼万唤!这就是你们要的谷歌深色主题设计规范

在深色题的UI当中,尽可使数量有限的色彩,确保绝大分的区域需要保持深色。

节约源

千呼万唤!这就是你们要的谷歌深色主题设计规范

在需要更高效能源用率的设备上(比使用 OLED 屏幕的设备上),通减少光像素来延长电池使用寿命。

增强访问

千呼万唤!这就是你们要的谷歌深色主题设计规范

通过使用可访问性较的色彩对比度,来迎需要深色主题的用户(比如视力不佳的用户)。

属性概述

在这一节当中,了解 Material Design 中关于深色主题的属性定义

关于数字产品中对比度的计,参考国际通行规则:
World Wide Web Consortium (W3C)Understanding Contrast 了解对比度

Material Design 中的深色主题,基于下面的几属性行义:

  • 对:深色区域和100%纯白色的正本的对至要达到15.8:1
  • 深度:当元素处于相对较高的置的时候,通过较浅的表层颜色呈这种纵深的差异。
  • 去饱和度:主色调需要降低饱和度,以便符合 web 内容可访问性指南(WCAG)AA标准,比如正文部分文本比度需要保证至少 4.5:1。
  • 限制色彩:在大面域都使用深色色调的候,尽量少地使用提亮色(浅色、低饱和度高度的色彩、或者是高饱和度的色彩)。

拆解

深色UI主题主呈出的景视觉深色的,同时其他的色彩也较稀少。屏幕所散发出的光线非常限,但同时又保持较高的可用性。

千呼万唤!这就是你们要的谷歌深色主题设计规范

  1. 背(0dp 高程叠加)
  2. 前景(1dp 程叠)
  3. 主色调
  4. 要色
  5. 在背景上的素
  6. 在前表面上的元素
  7. 在色调上的元素
  8. 次色的元素

行为

深主题应该以通外在显示的开关控件,来打开或者关闭的:

  • 突出的方式,是使用直可见的图标来开或者关闭主题
  • 不么突出的方式,是在菜单或者APP设置中放置开关

千呼万唤!这就是你们要的谷歌深色主题设计规范

在APP顶部菜单显示主题开关

千呼万唤!这就是你们要的谷歌深色主题设计规范

在弹出菜单菜单层显示开关

千呼万唤!这就是你们要的谷歌深色主题设计规范

在APP设列表显示开关

属性

深色主题使用是深灰色,而不是黑色来作为主要色。深灰色样可以表现出常广泛色,能够呈现出高度和深度,为相比于黑色,灰色表阴影其实更容易被感知到。

深灰色的前景色彩能够降低视觉疲劳,因为在深灰色表面的文字比在黑色表面的文字,有更低的对比度。(还不会出现炫光效果)

千呼万唤!这就是你们要的谷歌深色主题设计规范

推深色主题下的前景深灰色彩为 #121212

高程

在深色主题当中,组件在高程上和之前在浅色主题下应该是一的,所以它应该也拥有相同别的阴。但是在深色主题下,本的光关系就发生变化了,不同高程下的素所对应的阴程度也不一。

元素越高,对应的背被照亮的程度就越轻微

前景元素越(它在隐喻层面上就越接光源),表面就越亮。在设计的时候可通过有透明的白色叠层来实现这种轻盈的效果。

千呼万唤!这就是你们要的谷歌深色主题设计规范

元素越,颜色相应的就越浅、越明亮。

千呼万唤!这就是你们要的谷歌深色主题设计规范

通过表面的白色半透明层,控制透明来表面发生亮变。

  1. 元素控件
  2. 覆盖叠层

叠加的另外一个优势在,它以让人更加便捷的分辨不同组件之间的高程,并且以更容易观察到阴影。叠加与元素控件的结合,不仅增加和底部阴影之间的对比度,还让边缘更加清晰锐和明显。

千呼万唤!这就是你们要的谷歌深色主题设计规范

默认主题仅仅使用阴影来控高程效果,而深主题之下,还需要借助整表面彩来控高程效果。

这些表面叠层旨在最大程地易读性,同时确保同程的元素彼此容易被分辨。程叠的透明范围,最低是0%,最是16%。

千呼万唤!这就是你们要的谷歌深色主题设计规范

这是程等级和白色叠层的透明对表。

叠加层阐明了组件之间的高程差异。

千呼万唤!这就是你们要的谷歌深色主题设计规范

  • A 高程为 1dp 的卡,叠加不透明度为5%
  • B 程为 6dp 的浮按钮,使没有叠层的次要色
  • C 底部单栏,高程 8dp,叠加层不透明度12%

值得注意的是,叠层应应于使色和次要色的UI元素控件表面。

深色主题之下,阴影同样应该保持深色,用以准确的描述投影关系,哪怕它那么显著。

千呼万唤!这就是你们要的谷歌深色主题设计规范
千呼万唤!这就是你们要的谷歌深色主题设计规范

错误

不要在使用主色和要色容组件表使用高程叠加层。

千呼万唤!这就是你们要的谷歌深色主题设计规范
千呼万唤!这就是你们要的谷歌深色主题设计规范

误

不要使用外发光来替代阴来表示高程差异,因为这种效果并不能准确地描述高程阴投递下来的效果。

可访问性与对比度

深色主题下,深色必须暗一定程度,才能让色的文本足够清晰地呈现。文本和背景之间的对比度别至少要达 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 屏幕上,打开和关闭像素发会导致屏幕滚动时出现延迟,导致像素模糊。

UI应用

主题配色

色彩文本的易读性中起到了重的作用。

所有深色主题配色案都应该让UI元素都足够有比度,足以过 WCAG  AA 规则,也是过 4.5:1 底线。

可访问性强不饱和色

深色主题应该尽量避免使用高饱和度色,为它们多数不能够到 WCAG 于文本比度要求(4.5:1)。高饱和度色能够在深色背景上生炫视觉效,生视觉疲劳。

相反,饱和度较低的色彩能够带来更清晰的视觉体验。

千呼万唤!这就是你们要的谷歌深色主题设计规范

配色方案中低饱和度的色彩能够提高易读性,减少炫光效果。

千呼万唤!这就是你们要的谷歌深色主题设计规范

错误

避免在深背上使用让人得饱和的彩。

主色

主应该是整个界面和组件中最常显示的彩。在整个 Material Design 的深主题中以使用为200的基准彩。(在不同高程的界面上,能够通 WCAG AA标准的 4.5:1对比度的文)

千呼万唤!这就是你们要的谷歌深色主题设计规范

深主题的主范例:

  1. 主色指示器
  2. 变

主色变体

使用浅色组件能够呈现基于主色延展出来变体色。

千呼万唤!这就是你们要的谷歌深色主题设计规范

在这个深色主题,使用了原色(紫色 200)和主色变体(紫色700)。

次要色

要色可以用来凸显你UI 界些特定元素和区域。在深色主题,要色需要降低饱和度去满足 4.5:1 比度要求。

千呼万唤!这就是你们要的谷歌深色主题设计规范

深色主题要色使用范例:

  1. 次色指示器
  2. 色调变体

千呼万唤!这就是你们要的谷歌深色主题设计规范

这个 UI 界面中色和次要色的变体。

强调色

在深色题当中,深色的背景和元素占据了 UI 的绝大分。而强调色通使的是浅色(柔和且饱和较低)或者明亮(饱和,艳)的色彩,确保被强调的元素够脱颖而。在键的元素上应当谨慎地使强调色,尤是本和按钮。

寻强调色

你可使官方的配色方案生成器来创建(或者查看)题配色方案。它可生成色调方案,就是色和次要色的一系列深浅颜色的变。你可为你的深色模式色彩题择更合的色彩,来构建配色。

千呼万唤!这就是你们要的谷歌深色主题设计规范

为了确保深色题中色彩具有足够的灵性和可性,建议在深色题中取较浅的色调(色彩饱和范围在200-50之间),而是默认情况的色彩题(色彩饱和范围从900-500之间)。

  1. 默认的主
  2. 深色题的色

千呼万唤!这就是你们要的谷歌深色主题设计规范
千呼万唤!这就是你们要的谷歌深色主题设计规范

正确

浅的(200-50范围内的颜)在深主题中(在所有不同的高程之下)具有更的读。

千呼万唤!这就是你们要的谷歌深色主题设计规范
千呼万唤!这就是你们要的谷歌深色主题设计规范

错误

避免在深色题中使饱和的色彩,因为它们可在深色的背景上形成炫光效果。

千呼万唤!这就是你们要的谷歌深色主题设计规范

默认题,在顶菜单中使配色方案中的色。

千呼万唤!这就是你们要的谷歌深色主题设计规范

避免在深色题的顶菜单栏中使色,因为它们在深色题会导致炫光。

品牌色

范例:Owl

Owl 是一个教育类APP,为想要探索和学习新技能的人提供课程。相关的例戳里(需要梯子)。

为了保持牌本身的可识别性,牌色应该可在深色题之充分地使,但是这种跨题配色的元素应该控制在一两个元素的范围,如只有牌LOGO 和牌按钮是这样的。通过谨慎地使色,这些元素在牌结构中保持突。

不饱的色彩,应该深色的 UI 主题的其他方多使用。

千呼万唤!这就是你们要的谷歌深色主题设计规范

高饱度的品牌色应该使用浮动按钮(2),饱度较低的主色则应该应用到文本元素(1)之中。

  1. 深色题的色
  2. 品牌色

深色主题基准配色方案

Material Design 的住主题中包含给深主题的部彩和。

深色题的色彩应该足覆盖整个深色题的UI界面,包括:

  • 彩(主、次要以及彩变)
  • 界面体(背景和控件)
  • 状态呈(比如报错状态)
  • 内容呈现(体排版和图像)

千呼万唤!这就是你们要的谷歌深色主题设计规范

使 Material 色彩题的基准配色

千呼万唤!这就是你们要的谷歌深色主题设计规范

  1. Material Design 默认主题的基准色
  2. Material Design 深主题的基准

报错颜色

报颜色主要用来指示出状况和状态。Material Design 深色主题下报基准色为 #CF6679。

千呼万唤!这就是你们要的谷歌深色主题设计规范

这报基准色,是基于默认主题(浅色主题)下报颜色 (#B00020),在叠加了 40% 不透明度纯白图层后所构成,它符合 AA 比度标准。

文本和图标色彩

文本、图标等元素,被于背景或者某个控件上时候,为了进区分时候,所应该使用色。

在默认情况下,深色主题下的被置于色块上的文本和图标素,色彩是以黑色为主。

千呼万唤!这就是你们要的谷歌深色主题设计规范

深色 UI 下使用文本和图标的基准色。

在深色背景上的浅色文本

当浅色文本出现在深色背景上的候(这是色文本置于黑色背景之上),它应该遵循下面的不透度置规则:

  • 最要内容,白色文本不透明度设为87%
  • 中等重要的内容,色文本的不透度为60%
  • 被禁用的文内容,白文的不透明度为38%

千呼万唤!这就是你们要的谷歌深色主题设计规范

要、等要和被禁用文本区

定制应用

Material Design 些用例可以帮你更好设计深色主题。

大积控件区域

参考资料(需梯子):
Bottom app bar
Backdrop

于些使用了较大区域控件或是弹出菜单,应该使用深色主题基准色来作为色。

千呼万唤!这就是你们要的谷歌深色主题设计规范

千呼万唤!这就是你们要的谷歌深色主题设计规范

确

较小控件和区域使用鲜艳醒目色。

千呼万唤!这就是你们要的谷歌深色主题设计规范

千呼万唤!这就是你们要的谷歌深色主题设计规范

错误

较大区域使用明亮色,过于明亮影响体视觉。

千呼万唤!这就是你们要的谷歌深色主题设计规范

千呼万唤!这就是你们要的谷歌深色主题设计规范

注意

深色部分如使用标准色(基准为#121212),那么请确保它比度至少不低于 15.8:1 。

千呼万唤!这就是你们要的谷歌深色主题设计规范

千呼万唤!这就是你们要的谷歌深色主题设计规范

错误

应该避免将配色主色引用到弹出菜单背景上,这回导致明亮色盖住多半屏幕。

深浅色主题结合

参考资料(需梯子):
Snackbar

当需要在深主题中使用浅的控件的时,浅的控件以确次结构的清晰。

例如,在深色题,使 Snackbar 来示信息的时候,使浅色来确保它够脱颖而。为了够达到这个意图,可使浅色题的配色来确保它足够醒目。

千呼万唤!这就是你们要的谷歌深色主题设计规范
Snackbar 使用浅色底色,让它可以脱颖而出。

  1. 背景
  2. 元素底色
  3. (默认主题)主色

状态

组件交互元素的状态,通常会借叠加层的形式可视化呈。深色主题当中,呈状态的叠加层应该使用与默认主题(或者浅色主题)相同的参数,并且可以通过调整确保它通过 AA 对比度级标准。

表叠加色,主要取决于底部容所采用色,这主要分两情况:在底部容易是基准色和主色时候。

使用基准色容

叠加层使用和图标或者文本色相匹配颜色(如不存在图标话)。不状态下,叠加层不透明度状态各不相,正常状态下是未叠加,其他状态下叠加透明度则从4%到12%不等。

千呼万唤!这就是你们要的谷歌深色主题设计规范

容底色使用基准色而文本使用白色时候,被启用、悬、长按、按下和拖动时不状态。

千呼万唤!这就是你们要的谷歌深色主题设计规范

容底色使用基准色而文本使用主色时候,被启用、悬、长按、按下和拖动时不状态。

使用主色容

控件容底色使用主色时候,用来指示状态叠加层应该使用白色。不状态下,叠加层不透明度状态各不相,正常状态下是未叠加,其他状态下叠加透明度则从4%到12%不等。

千呼万唤!这就是你们要的谷歌深色主题设计规范

底部容使用半透明主色时候,被启用、悬、长按、按下和拖动时不状态。

千呼万唤!这就是你们要的谷歌深色主题设计规范

底部容使用主色时候,被启用、悬、长按、按下和拖动时不状态。

禁用状态

所有被禁用组件,都使用不透明度为 12% 白色用来呈现轮廓和填充色,并使用不透明度为 38% 白色来显示文本和表层内容。

千呼万唤!这就是你们要的谷歌深色主题设计规范

  1. 轮廓容器:透明为12%的白色
  2. 标签/图标:不透明度38%的白色
  3. 色填充容:不透明度为12%白色

相关资源

Sticker sheet

Sticker sheet 是和 Sketch for Android 套组件一使用的。它包含套深主题的局元素,包括状态栏、应用栏目、底部工具栏、卡、下拉菜单、搜索字段、分隔符、导航、对框等一系列的组件,非常用。(值得注意的是,Google 官方的设计师大习惯使用 Sketch 来设计界面)

已转存百,戳这里载, 取码: mhsr

设计程(需要梯子)

这是一个可到 Figma 当中的 designlab,你可基于我们已经已有的 Material 题,并且使 Material 案例中的素材。

优设编译:@陈子木

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:UI中动效设计本没有那么玄乎,作为 Google 旗下 Material Design 团队中动效设计的负责人之一,Jonas Naimark 对于动...
AE动效
为您准备了最新的 Material Design设计规范,请伴随笔记一口吃掉。 一、安卓是什么? 想象一下,过年同学聚会上,大家把手机...
Material Design
@龙爪槐守望者 :熟练掌握 iOS、Android 设计规范是一个设计师必备的工作技能,几乎每家公司都要求做自己的设计规范。当我们...
Android设计规范
编者按:Google I/O 大会之后,Material Design 也好不意外地随之进行了更新,作为目前最主流也是对当前设计影响最大的一种设...
Google
@龙爪槐守望者 :苹果在6月4日凌晨 WWDC(Worldwide Developers Conference 苹果全球开发者大会)公布 iOS 13 之后,随即提供...
iOS 13
王M争:Material Design(以下简称MD)是谷歌设计的一套视觉语言设计规范,主要应用于安卓类应用。 iOS Human Interface Gui...
iOS系统
编者按:在今年的 Google I/O 大会上,Android Q 的深色主题的推出后,官方的 Material Design 的设计规范也随之进行了更新。...
Android设计规范
我在上一篇文章《动效设计没那么难!让谷歌动效设计师带你入门》当中,已经通过实际的案例,分享了动效设计并不难的原因。我...
AE