在iOS13之后的系统中,人们可以选择黑色的界面,这就是“深色模式(Dark Mode)”。在黑色模式中,系统可以为整个屏幕、视图、菜单、控制器等选择一个深色色板,也会选择更鲜艳的颜色来将其从深色背景中突出出来。深色模式支持所有辅助功能。

E61E8E8A-9AA7-4A31-8C39-C4D1445393D4.png

人们可以在设置中将深色模式设置为默认的界面或者按照时刻表自动切换深色浅色模式。深色、浅色模式是系统层级的切换,因为人们会希望所有的app都可以根据不同的界面模式来进行自动切换。

服从用户在系统设置中选择的模式

如果你单独为app设置了一个界面选择的开关,用户需要切换不同的app来进行模式切换,从而浪费了时间。更糟糕的是,用户会觉得你的app出bug了,因为它不受系统层级设置的控制。

在浅色和深色两种模式下测试你的设计

查看你的界面在两种模式下看起来怎样,判断是否需要调整设计来相互适应两种模式。在一种模式下工作很好的界面在另一种模式下可能就有问题。

通过调整对比度和透明度,确保深色模式下你的内容清晰舒适。

在深色模式中,当对比度增强或者减少透明度或者两者一起调整时测试你的内容显示情况。你会发现深色的文字在深色背景上不容易识别,你也会发现在深色模式下增强对比度会导致减少深色文字与深色背景之间的视觉对比度。尽管有视力很好的用户可以阅读低对比度文本,但对于视力障碍的用户是很难识别的。更多的可以查看指导手册Color and Contrast

深色模式的色彩

需要小心的挑选深色模式中的深色背景和浅色前景色板来确保对比度,从而维持整个app的统一感。

在深色模式,有两种背景色,称为“底部背景色”和“抬高背景色” ——来表现一个深色界面在另一个之上深度提高的感觉。“底部背景色”颜色更深,使得背景看起来后退的感觉,而“抬高背景色”颜色更浅一点,使得前景感觉前进的感觉。

首选系统背景色

暗模式是动态的,这意味着当界面位于前景(例如,弹出框或模式表)中时,背景颜色会自动从“底部背景色”变为“抬高背景色”。系统背景颜色还使用增强的背景色在多任务环境中的应用程序之间以及多窗口上下文中的窗口之间提供视觉隔离。使用自定义的背景颜色会使人们更难以感知系统背景色提供的视觉区别。

使用适合当前外观的动态颜色。

分割线会自动适应当前外观(指导手册查看Dynamic System Colors)。当你需要自定义颜色时,请将颜色集资产添加到应用程序的资产目录(asset catalog)中,并指定该颜色的浅色和深色变体,以使其能够适应当前的外观模式。避免使用硬编码的颜色值或不适应的颜色。
iOS Dark Mode - 图2

确保所有界面里足够的色彩对比度

使用系统定义的颜色确保前景色内容和背景色之间的对比比例处于一个正确的数值。常用的颜色,对比比例应为7:1,尤其是对于较小字体。查看手册Dynamic System Colors

软化白色背景颜色

如果你一定在深色模式中使用白色背景,选择一个略微深色的白色背景防止发光破坏深色内容。指导手册查看Color

图片、图标和样式颜色

系统使用 SF SymbolSF Symbols,它可以自动调整使得在深色模式中看起来很棒,全彩图片也会在深色和浅色两种界面中自动优化。

尽可能使用SF Symbols

当使用动态颜色(dnamic colors)进行着色或增加鲜艳度时,Symols在两种外观模式下都看起来很棒。

必要时在深浅两种界面上设计不同的图标

浅色模式中,线性图标看起来更好;深色模式中,面性图标看起来更好。

确保全彩图片和图标看起来很好

确认同一个元素在两种模式中是否看起来都很好。如果只是在一种模式中看起来很好,那就需要修改元素或者分别设计两种来搭配两种模式。

材料

鲜艳的颜色可以使得文字和背景色有一个很好的对比度。

使用系统提供的标签色设计标签

一级、二级、三级、四级标签颜色会自动在深浅模式中适应。查看手册Typography

使用系统视图绘制文本字段和文本视图。

系统视图和控制器可以使得你app的文字看起来很好在所有的背景中,会自动调整颜色鲜艳程度。如果可能,尽量使用系统提供的视图来展示文字而不是你自己设计。开发手册查看,UITextFieldUITextView