UI设计师要关注的iOS 13 四个重要更新

WWDC 已经落幕,这是近 10 年来最激动人心的一次开发者大会。我们先不讨论这次上的硬件,以及 iPad OS 等内容,毕竟其它媒体该写也写差不多了。就讲讲和 UI 设计师密切相关的 iOS 13 更新的规范内容,很快我们设计界面的时候就有新的东西需要遵守了。

 

一.Dark Mode

首先不得不提的,就是大家望眼欲穿的黑暗模式终于来了!作为 iOS13 中最最最重量级的更新,黑暗模式在带给人全新的视觉体验之外,也带来了一套与浅色模式相对应的色彩规范系统,本文会花一半左右的篇幅来解释作为 UI 设计师,我们对这个系统级的 Dark Mode 需要有哪些了解。

 

1. 基础色彩

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

- 系统彩色

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

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

- 中性色

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

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

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

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

- 填充色和分割线

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

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

 

2. 系统级组件的适配

- 阴影→浮层

需要注意的是在白色背景下能够轻而易举突出页面/卡片纵向层级关系的「阴影」,在 Dark Mode 的纯黑色背景下已经不适用了,所以 iOS 建议利用「浮层」(Elevated) 来表达页面的纵向关系。Elevated 层只在黑暗模式中起作用,所以对应的色彩规范也全是以深色模式为准。

说人话就是在 Dark mode 中去掉阴影,把卡片颜色做淡。

- Material 卡片

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

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

- 其他组件

当然为了适应 Dark Mode 的视觉需要,其他一些组件也有一定程度的微调,我们将它们都列在这里,并以 iOS12 中的组件作为对比。这些组件在 iOS13 官方组件库以及 sketch Library 中都已经更新,详细参数就不列了,我们会提供这一部分资源的下载链接。

 

3. 自定义色彩如何适配 Dark Mode

当然,除了系统已经给你备好的这么点颜色,大量的第三方 APP 都拥有自己的色彩规范,这时候就需要发挥设计师的主观能动性了。但是自定义色彩也不能乱设,为了在 Dark Mode 中更加和谐统一,构建更加整体一致的 iOS 生态,官方建议自定义色彩与背景的对比度不小于 4.5。

 

 

二.情景菜单

苹果在 iOS13 中新增了一种控件 —— 情景菜单 (Context Menu),该菜单可以由长按项目或者 3D touch 呼出,此控件兼顾了无 3D touch 的设备如 iPhone XR ,保持 iOS 设备操作的统一性。

情景菜单与原 3D touch 控件 Peek & Pop 有以下两点区别:

- 所有运行 iOS13 的设备都可使用情景菜单;而 Peek & Pop 仅适用于支持 3D Touch 的设备。

- 情景菜单立即显示项目相关的操作命令;Peek & Pop 需要向上滑动才能查看命令。

针对该控件,官方规范文档中还有更加具体的建议,这里不细说,有时间会把 iOS13 新增的内容翻译出来。

 

 

三.SF Symbols

iOS13 重绘了大量的系统级图标,原先粗粗细细大大小小割裂感严重的图标们在这次更新中终于改头换面变得和谐了起来,对比一下 iOS12 与iOS13 的 Toolbar 就可以很直观地体会到这一点:

除了重绘图标之外,苹果这次还将这些图标整合进了 San Francisco 字体中,有大、中、小三种尺寸,并同步拥有与 SF 字体一样的七种字重,与字体搭配可以得到更加和谐的效果。

这里要增加实际图文粗细的案例,文字要配对演

这些图标可以在 SF symbols beta 这个应用中查看名称, 以及直接拖入 sketch 修改,但目前仅提供了 Mac 版,步骤如下:

步骤1. 关注我们的公众号并回复“iOS13”获得资源大礼包;

步骤2. 下载并安装「SF symbols.dmg」应用;

步骤3. 打开应用寻找需要使用的图标,比如分享;

步骤4. 将分享拖入 sketch 中;

步骤5. 快乐地在后面添加文字;

 

 

四.其他更新

- 卡片式的模态页面

之前对模态的应用还仅仅停留在弹出的警告、通知那样的小件儿模态框上,而这次 iOS13 增加了一种全新的模态样式——卡片式的模态页面。

实际上 iOS12 中已经存在这种模态页的雏形,Music 应用中的歌曲播放页与这次的模态页有着类似的形式。

但是 iOS13 将卡片式模态页纳入了交互指南之中,并做出了更为详细的规范,比如规范了页面中头部的布局,规范了退出该页面的交互形式等等。

在之后设计界面时,对于一些使用弹窗觉得太小,跳转又没必要的页面,或许可以考虑一下使用卡片式的模态页了。

- New York 字体

继旧金山 (San Francisco) 字体之后,苹果又推出了自家的衬线字体——纽约 (New York),还给出了该字体在 APP 界面中的使用规范。这意味着 iOS 的界面可以融入更加古典的衬线字体,让一些具备古典风格的 APP 能够更轻松贴切地表达自己的气质。

现阶段 New York 字体仅包含英文,无中文,对中文应用设计的影响不大。

 

 

作者:酸梅干超人

公众号:超人的电话亭

低至0.26元/天,
免费下载设计素材!