Material Design & iOS 13黑暗模式总结探索

5.文本色

黑暗模式下不同层级文本是通过调整白色透明度实现层级的改变

注意指导中一级文本没有在深色背景上使用100%的白色，过高的白色亮度会产生视觉疲劳。

最高级文本 87%透明度白色

中等级文本 60%透明度白色

不可点击文本 38%透明度白色

界面不同位置的文本色

6.状态

在黑暗模式下，状态是通过叠加不同透明度文本色在其默认颜色上，以区别不同状态，应满足AA级标准。但是这种方式有限制，只能使用在主色、辅助色及表面颜色的容器。

以下展示哪些属于表面容器哪些属于主要颜色容器。

按钮状态样式

根据指导文件，总结可以直接使用按钮状态示意

一共有四种样式，每种样式都包含正常态，点击态以及不可点击态。

按钮的文本色是用该容器上的文本色，点击态是在容器表面覆盖一层与文本色相同颜色但将透明度调整为10% 。按钮不可点击态文字是38%的白色，按钮颜色是12%的白色。

其他样式按钮大同小异，不可点击态参数相同。

刚梳理的主要是Android中需要注意的点，但还是要去官网详细的看下。

http://material.io/design/color/dark-theme.html#

iOS平台

由于iOS13 还是beta版本，有许多内容算是一个测试阶段，但指导方向基本不变

它的设计原则以这五点为主

1.层级

在iOS13中黑暗模式对基础背景层的定义与Android中的定义有非常大的不同，Android中基础背景层非纯黑色，而是较深的灰色，iOS13中直接选择纯黑#000000为基础背景主色。可能是为了更省电和完美的隐藏掉刘海吧。

基础层与架高层（动态颜色）

为了使纯黑的底色下有更好的层级体现。在iOS13中黑暗模式下加入了基础层与架高层的动态层级颜色概念。【类似Material Design 在黑暗模式下，通过不同灰色表示不同高度层级】

iOS会根据界面所在的层级自动适配基础背景层或架高层的颜色，这使得同样的App、同样的界面，当它处于基础背景层或架高层的不同状态时会有不同的视觉表现。