北京时间 2019 年 6 月 4 日凌晨，WWDC 2019 发布了 iOS 的升级，相信很多设计师也都聚焦在 Dark Mode 深色模式，但除此之外 Apple 在系统组件以及设备适配也都做了调整，通过本文中我们一起来了解吧。

如何体验 iOS 13 Beta

下载体验 iOS 13 Beta 需要在 Apple Beta 版软件计划网站中注册你的 Apple ID 以及设备。

Apple Beta 版软件计划
https://beta.apple.com/sp/zh-CN/betaprogram/

A whole new look.
On a whole new level.

新出风格，新出境界。

Dark Mode 深色模式

首先我们需要真正了解深色模式的意义，如果单从发光强度降低对视觉的压力，移动设备已经有传感器去调节屏幕亮度了；但随着越来越多的设备采用 OLED 屏幕，这才使得深色模式有了更现实的价值和意义：省电，由于 OLED 屏幕的每个像素都是自主发光而 LCD 是由整块背光面板去发光，所以在全黑的模式下 OLED 可以完全关闭达到省电目的，当然深色的元素也会降低界面发光的耗电量，这些对于全面屏时代是最至关重要的。

也不难发现 iOS 13 的界面中很多底色甚至是纯黑 #000000 的背景，并非 Material Design 建议的不要使用全黑底色，当然从设计的原则角度都有可取之处。

但深色模式并不是夜间模式，深色模式仍然需要保证界面的可用性和易读性，需要针对不同模式去设计，Apple 的设计团队也为 Dark Mode 提出了 5 个设计原则：

维持视觉的熟悉感：这是 iOS 的应用
平台的一致性：客户端内的组件要一致
清晰的信息结构：色彩、层级的规范使用
无障碍操作：粗体文本和增强的对比度
保持简单：易于开发实现

界面中的背景、文字和图标，以及分割线都需要对深色模式单独设定颜色。

相信不难发现，如果支持深色模式设计团队需要更加严谨的梳理 Design Language 设计语言，包括色彩、形状以及多媒体和页面层级。

开屏启动页

在 iOS 13 发布后 Apple 已经不再推荐使用静态启动图片，并会在明年的 4 月份以后的 App Store 审核中全面禁止这种方式，取而代之的是类似于安卓设备的弹性适配方式，需要根据 iOS 设备视图大小 ¹ 使用 LaunchStoryboard 将开屏作为界面中的一部分去适配:

正常宽度，正常高度
紧凑宽度，紧凑高度
正常宽度，紧凑高度
紧凑宽度，正常高度
1 系统定义了两类视图大小：正常（Regular）和紧凑（Compact），根据设备屏幕不同去适配开屏内容。

如图中所示，横竖屏共 4 种组合

更详细的设计细节可以关注 iOS 的 Human Interface Guidelines 中针对 Dark Mode 的详细说明
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

使用 Apple ID 登陆及注册

为了方便用户使用，Apple 提供 Face ID 或 Touch ID 登陆，并保证安全和隐私。

划重点：如果你的 App 提供了第三方登录，那么你必须要提供 Apple ID 登陆的选项。

Sign In with Apple
https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/

UISegmentedControl & UIStepper & UISwitch 组件

分段控制组件和开关都经过了更新，同时支持不同的模式，如果你的 App 中使用了系统组件，一定要确认风格差异以及适配。

总结

iOS 13 除了以上列举的要点，还有很多新颖的交互形式，例如：模态的交互和新颖的菜单等等；官方也更加建议使用系统默认的颜色，这样你不需要再去维护两套颜色体系。

总之这些并不会被在意的细节更让我们觉得一套完整的设计系统并不只是看到的那么简单，还需要更多科学和严谨的思考和方法。

谢谢 🙂

如何体验 iOS 13 Beta

A whole new look.On a whole new level.

新出风格，新出境界。

Dark Mode 深色模式

开屏启动页

使用 Apple ID 登陆及注册

UISegmentedControl & UIStepper & UISwitch 组件

总结

更多交互细节及扩展阅读

发表评论 取消回复

相关推荐

A whole new look.
On a whole new level.

发表评论取消回复