ios13的新规范

11黑暗模式。作为 iOS13 中最最最重量级的更新,黑暗模式在带给人全新的视觉体验之外,也带来了一套与浅色模式相对应的色彩规范。

一.基础色彩

iOS 的设计师对之前混乱的色彩规范做了更为详细的修改、分类和整理,并为每一种系统色都专门进行了针对 Dark Mode 的调整,确保这些色彩在浅色和深色模式中都能拥有比较好的可读性、协调性和美观性。iOS 的官方规范中已经放出了这一部分色彩的对应表。

系统色彩

苹果为官方组件中的彩色做了黑暗模式的适配,使得色彩与背景的对比度在深浅模式中能够保持一致。当然,苹果也强调了这些色彩并不是强制使用的,按需取用即可。

12

下图是应用新色彩后的效果图,下面两张是两种色彩分别在全浅和全深背景下的对比,能够看出来它们之间有着细微的差异:

13

中性色

iOS 应用中存在大量的中性色,包括背景色、文字色、分割线等等,这些色彩在 iOS13 中重新进行了分类和规范,且已经应全面用在系统组件之中。

背景色有三个层级,浅色模式下三个层级分别为白→浅灰→白,而深色模式则是依次变浅的黑色。

14

15

成组背景色主要应用于存在大量列表项的页面中,最典型的案例就是设置页,浅色模式下成组背景色稍有不同,三个层级依次为浅灰→白→浅灰,具体见下图:

16

17

文字色除了一级色彩使用的全黑和全白之外,其余三个层级均为同一色彩的不同透明度。

18

19

填充色和分割线

另外,苹果还提供了一组带透明度的「填充色」(Fill Color) ,这组填充色能够在 RGB 色值保持一致的情况下,仅仅通过微调不透明度就能在浅色和深色背景中达到相似的对比度,设计中如有需要,可以直接调用。

20

而分割线,苹果也给出了深浅模式下各一组带透明和不透明的色彩,正常情况下使用带透明度的即可,只有当出现交叉分割线时才需要用到第一列实色。

21

22

二.系统组件的适配

阴影→浮层

去掉阴影,把卡片颜色做淡。

23

24

Material 卡片

Material 卡片是在 iOS 中大量使用的带磨砂玻璃质感的卡片,没错打开自己的 iphone 就能看到一屏这种材质的通知卡片,其余地方包括负一屏、3D touch 呼出的快捷菜单、Action sheet、Activity Views、部分应用的 Tab Bar 等等地方都有 Material 卡片的应用。

之前的 iOS 版本中都没有确切地表述这种卡片该如何使用,但这次苹果给出了相当明确的规范。该材质拥有四种不同的「厚度」,也就是四种不同程度的背景模糊,在深色模式中同样有四种对应的样式,具体如下:

25

26

其他组件

27

三.自定义色彩如何配置DM

为了在 Dark Mode 中更加和谐统一,构建更加整体一致的 iOS 生态,官方建议使用在线的比色工具,确保自定义色彩与背景的对比度不小于 4.5

 

原文出处:https://www.zcool.com.cn/article/ZOTc1MzQ0.html

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/3157.html

发表评论

登录后才能评论