读完这篇 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切换开闭
- 弱化表露:在菜单大概者树立中树立切换开闭
上图是树立在运用树立中的深色形式开闭
三、安排运用细则
深色形式应运用深灰色动作重要脸色,而非纯玄色。深灰色不妨包含更款待的脸色、高度和深度,因为它更容易瞅到灰色暗影。
深灰色界面还不妨缩小眼部疲惫,因为浅色的笔墨在深灰色的界面上比在纯玄色的界面对于比度更低。
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。这个脸色是经过将浅色形式中的缺点神#B00020弥漫上不通明度为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/
本文由@Jalyn 本创发布于大众都是产品经理,未经答应,遏止转载。
题图来自Unspalsh, 基于CC0协议。