心若磐石|即刻7.0：如何设计深色模式？( 四 ) 编辑导读：自从19年苹果发布会推出了深

由于很多空状态的插图是没有考虑到深色背景的情况，在颜色上没办法很好融合，所以可能要重新绘制两套图来适配两个模式。
启动页：
当系统界面和APP界面都是深色时，一个白色启动页的出现就像被灯泡晃到眼睛一样难受，所以深色模式时启动页也需要做一下适配来避免这种情况发生。
2. 易于开发者实现深色模式的适配是一个长期持续的工作，尤其是对体量庞大的APP需要投入更多精力，所以对设计和开发来说，一个易实现的迭代和交付方案对效率提升有着重要作用。
颜色
因为有了深色模式，所以界面中同一位置的颜色变成两种，在iOS13官方文档中将颜色的变化称之为动态颜色，并且通过语义命名的方式来代表深浅两种颜色，即使用语义（systemBlue）表示系统浅色模式蓝（#007AFF），系统深色模式蓝（#0A84FF）两种颜色，这样的命名方式更便于管理和记忆，也更符合开发者思维。
使用同样的方法，将颜色使用语义命名，这里我参考了钉钉设计团队的颜色命名系统避免一些坑，例如：即刻的品牌黄色：浅色（#FFE40F）深色（#FFEE6F）就可以用语义命名：（common_颜色_color），就可以使用。需要注意的是，在实际项目中的命名过程需要和开发共同进行，定义出一套彼此都容易理解的命名方案。
将即刻中的颜色分为基础元素色、通用组件色、彩色三种。

基础元素色：文字色、背景色、分割线色，这里根据规范定义了3种文字色、4种背景色和1种分割线色。
特殊通用组件色：将可点击功能图标色、文字链接色定义为特殊通用组件色。
彩色：将界面中运用在各处的品牌色、辅助色、黑白灰等每个动态色用颜色命名，方便灵活运用。

需要注意的是有些颜色不需要变化的组件，如在标签中的文字、按钮中的文字是不随模式变化的，这时就不能选择基础元素的文字色了，而是要选择彩色中对应的颜色。

图片
深色模式的图片比浅色模式更暗一些，开发者可以选择叠加滤镜的方式，也可以选择降低透明度的方式，我在本次适配中选择了叠加深色滤镜，感觉在复杂界面下会比降低透明度更保险一些。
图标
深色模式的图标相比都改变了颜色，所以得选择重新绘制一套深色图标替换，不过单色的SVG格式功能图标可以直接修改来适配不需要单独绘制，但PNG图片就不可以了。
五、总结1. 本次深色模式适配思路