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

读完这篇 Google Dark Mode 的安排典型,你会领会为什么说许多 APP 的 Dark Mode 都是存留很大问题的,包括 beta 版微信和网易云音乐。假如读完之后你还闭于上句话存留疑惑,那便在黄昏闭灯后躺在被窝运用上述二款 APP 的 Dark Mode 试试瞅。

mrw图片

深色形式在大普遍的UI安排上展现为深脸色的界面,常常动作闭于默认(浅色)脸色形式的补充。

一、深色形式的个性

Material Design 的深色形式包括以部下性:

  • 闭于比度:深色界面和100%的白色笔墨之间的闭于比度应起码为15.8:1。
  • 海拔:海拔更高的组件经过表露更亮的上层脸色来表白其高度。
  • 去饱和度:深色形式中的首选脸色须要去饱和度,如许首选脸色与主体笔墨不管在哪个海拔一齐运用时,二者的闭于比度都起码为4.5:1,本领符合WCAG的AA尺度。
  • 有限的脸色:大面积运用深色上层脸色,外加有限的夸大色。

二、重要构成局部

深色形式UI会大面积运用深色上层及少许的脸色,不妨在保护高尺度可用性的共时间散出较弱的光。

mrw图片

  1. 背景物 Background(0dp遮罩)
  2. 上层色 Surface(1dp遮罩)
  3. 首选色 Primary
  4. 次级色 Secondary
  5. 背景层笔墨
  6. 上层笔墨
  7. 首选层笔墨
  8. 次级层笔墨

深色形式的开闭

深色形式不妨随体系中心自动切换(Android10),也可在APP内树立开闭。

  • 超过表露:在主界面中树立图标icon切换开闭
  • 弱化表露:在菜单大概者树立中树立切换开闭

mrw图片

上图所示是树立在顶部bar上的切换开闭

mrw图片

上图是树立在溢出菜单中的浅色形式、深色形式选项

mrw图片

上图是树立在运用树立中的深色形式开闭

三、安排运用细则

深色形式应运用深灰色动作重要脸色,而非纯玄色。深灰色不妨包含更款待的脸色、高度和深度,因为它更容易瞅到灰色暗影。

深灰色界面还不妨缩小眼部疲惫,因为浅色的笔墨在深灰色的界面上比在纯玄色的界面对于比度更低。

Google 举荐的深色形式界面脸色是 #121212。

mrw图片

Google 举荐的深色形式界面脸色是 #121212

1. 海拔的展现

深色形式中的各个组件与浅色形式普遍,也须要出现出不共的海拔、暗影等。然而是,深色形式中不共的海拔是经过不共的表面亮度来展现的。

海拔越高脸色越亮。

组件表面的海拔越高(假如上方有个隐形光源,将组件升高到更亲近光源的地位),则该组件便越亮。咱们不妨经过给组件表面脸色减少半透精确色遮罩来表白亮度。

给脸色减少遮罩还不妨使咱们更加轻快地分区组件与其暗影,普及组件与暗影之间的闭于比度,使组件的边际更加明显。

mrw图片

  • 半透精确色遮罩并虚假用于运用了首选脸色和次级脸色的组件;
  • 在深色形式中,暗影保持要运用玄色,因为在本质生存中暗影不大概展示其他脸色。

2. 易用性和闭于比度

深色形式中的背景脸色必定脚够深以展示白色笔墨。背景脸色与笔墨之间的闭于比度起码为 15.8:1。

假如要创造符合品牌设定的深色界面,不妨用较低的不通明度将品牌色弥漫在#121212上。

#121212是 Google 倡导运用的深色形式界面脸色。

mrw图片

3. 脸色的运用规则

应制止在深色形式中给笔墨运用不行经过WCAG脸色易用性尝试的饱和色(背景与笔墨的闭于比度应高于4.5:1)。深色背景上头的饱和色会引导眼睛疲惫。

4. 何如样采用首选色

首选色是在APP界面和百般组件中最常展示的脸色。Material Design baseline的深色形式中运用色彩200动作首选色。

mrw图片

5. 首选色的蔓延

深色形式中组件偶尔也会用到浅色,不妨在这类组件上运用由首选色蔓延出的脸色。

6. 次级色

次级色不妨用于夸大UI中的某些局部。深色形式中的次级色共样须要去饱和度以符合高于4.5:1的闭于比度尺度。

7. 夸大色

在深色形式中,深色吞噬了UI中时势部的界面。常常情景下夸大色会采用亮色(比方更饱和大概更明显的脸色),从而达到超过元素的手段。夸大色该当谨严运用,仅用于夸大一些闭头元素,比方笔墨、按钮。

8. 何如样决定夸大色?

Material色板天生器不妨用来创造配色筹备,也不妨用来天生色彩板,而后从当采用可用于深色形式的脸色。

为了能更好的符合深色形式,倡导运用色彩在200-50的脸色,制止运用色彩在900-500之间的饱和色。这大概跟你在浅色形式采用脸色的规则有所辨别。

9. 品牌色

为了保持品牌辨识度,高饱和度的品牌色也不妨在深色形式中运用。然而APP中的品牌元素应节制在1-2种,比方logo大概者用于一个戴有品牌色的按钮。

谨严的运用品牌色不妨使品牌元素保护高优先级,超过其沉本地位。

10. 缺点神

缺点神用于公布缺点状况。

Material Design baseline中运用的缺点神是#CF6679。这个脸色是经过将浅色形式中的缺点神#B00020弥漫上不通明度为40%的白色遮罩得来的。

11. 排版和图标

“上层”色

“上层”色重要用在那些位于闭头界面上的笔墨、图标等相闭于渺小的元素,这些闭头界面运用了首选色、次级色、上层色、背景物、缺点神等。

在深色形式中,“上层”色常常运用白色大概者玄色,如下图所示。

mrw图片

深色背景上的浅色笔墨

当浅色笔墨须要显姑且深色背景上头时,倡导采用以下几个不饱和度:

  • 高优先级笔墨:不通明度为87%
  • 中优先级大概指示笔墨:不通明度为60%
  • 展现不可用状况的笔墨:不通明度为38%

四、自定义运用

运用一些特定的深色形式组件闭于 Material Design 一些用例来道也很受用。运用一些特定的深色形式组件闭于 Material Design 一些用例来道也很受用。

1. 面积较大的控件

屏幕中那些占用较大面积的组件,比方 app bar 大概背景,不妨运用深色。

  • 假如是亮色,可用于较小的组件,不要用在面积较大的组件上。
  • 制止运用深色形式中的首选色动作背景物,因为背景面积常常很大,会使界面完全瞅起来太亮。

2. 浅色与深色的共同

假如深色形式中要用到浅色的组件,则浅色不妨用于超过这个组件的优先级。

比方,将深色形式中的 snackbar(新闻报告组件)设定为浅色,可使 snackbar 在界面中更加超过。

mrw图片

附录

  1. WCAG:全称Web Content Accessibility Guidelines(Web实质不妨害指南)。
  2. 脸色闭于比度估计网站:https://contrast-ratio.com/

 

本文由@Jalyn 本创发布于大众都是产品经理,未经答应,遏止转载。

题图来自Unspalsh, 基于CC0协议。