iOS 13 官方设计指南：深色模式篇中文版

官方的指南虽然篇幅较短，但侧重于细节层面，仍然可以帮真手新系统及深色设之，对相关设原则，特别颜色的配机制与方法行了解。同时也建议家观看本次 WWDC 相讲解视频，解会更全面。

从 iOS 13.0 开始，人们以将系统局的外观样式设置为深视风，即「深色模式」。在深色模式中，系统会为所有界面、视图、菜、控件等等调用一套更深的背景色方案，同通过更多的半透虚化效果使前景内容更有效地从深色背景当中突显而出。深色模式同支持所有的可访问性计标准。

人们以将深模式设置为系统的默认外观模式，也以让设备在光照条件弱的境中自动切换至深模式。

聚焦于容。深色模式可将焦点集中于界面当中的容区域，使容本身得突显，而周围的界面元素则会隐退于背景之中。

深色与浅色模式下分别测试的界面。某一种模式当中表良好的设方案，另一种模式当中很可能出问题。检视界面两种模式下的表，行必的调整，使其能够良好配于每一种模式。

确保深色模下内容在调过系统比度和透明度后依然晰可读。在深色模下，打开系统设「增强比度」和「降低透明度」这两个选项，（在分打开和时打开情况下）测试内容可读性，你或许会发现些暗色文内容在暗色背景上变不再晰。在打开「增强比度」后，暗色文与暗色背景体视觉比度也可能被降低。视力良好或许仍然可以阅读比度较低文，于视力有所缺陷来说，这样文将难以辨识。你可以参见「颜色与比度」部分了解更多指导原则。

颜色

深色模配色案含系列较深背景色以及较浅前景色。这些经过仔细甄选颜色可以在确保信息比度时，良好地适配于深、浅两观模，确保这两模下视觉感知致性。

使用能够适配于当前外观模式的颜色。使用 iOS 13 新引入的语义化颜色（Semantic Colors）的界面素可以动适配当前的外观模式，例如隔线。当需要定制化的颜色，你可以向 app 的素材目录（Asset Catalog）当中添加一套颜色组，为浅色深色模式各定义一组颜色变量，使其能够根据用户当前的外观模式进行动适配。避免通过硬编码的方式定义体的色值，否则颜色将不备适应性。

确颜在不同的外观模式下具备够的对比度。建议使用系统定义的颜来确前与背内容之间具备够的对比度。对定化的颜，要确其对比度达到 7:1，特别是对小号文字而言。你以参见「动态系统颜」部分更指导原则。

柔白色背景。如果你必须在深色模式使白色背景来承载容，可择稍暗一些的白色（浅灰色），防止在深色的界面环境中产生外发光效应。你可参见「颜色」分了解更多指导原则。

图片、图标与图形符号的颜色

iOS 13 使 SF Symbols 字体图形符号，可自与深色模式进行良好地适配；而系统自带的全彩色图片面向深、浅两种外观模式进行了优。

尽可能使用 SF Symbols 图形符作图标。无论通过系统义的动态颜色对其行色，还使用半透明虚化效果，这些图形都可以自动面向两种外观模式行配。

需要定制化图标时，深、浅两观模各自提供套素材。在浅色模下，空心图标相比于实色图标更易识；在深色模下，情况则反。

确保全彩色图片、图标的适配性。如果这些图形素材在深、浅种外观模式下均有着良好的表现，那仅提供一套素材即可。如果素材只能适用于其中一种外观模式，那，要对其进行修改以提升适配性，要另行创建一套素材用于另一种外观模式。使用素材目录将所有素材并成为一的图形。

字色

半透虚化效果有助于在深色背景当中保持文字的良好对比度。

为文标签（Label）使用系统提供的相应颜。一级、二级、三级、四级文标签均以自动适深、浅两种外观模式。你以参见「排版」部分更指导原则。

使系统供的视图控件来实现本输入框（Text Field）和本视图（Text View）。系统供的视图与控件可使字在任何背景之上都具有良好的表现，并根据半透明虚效果的有无而进行自调整。在可调系统供的视图与控件的情况要避免自行绘制。你可参见「UITextField」与「UITextView」分了解更多指导原则。

原文链接：《Human Interface Guidelines》

欢迎关注译者微信公众号：「Beforweb」