iOS 13的深色模式配色方法及层次设计

今年的WWDC 内容多且深且广，许多开发者都认为遭到密集的资讯轰炸；而设计方面，除了新的「深色模式」外，第一眼似乎没有什么巨大的改变，但其实iOS 13所著重的，本来就不是带来「全新的官方设计」，而是一系列更有组织、更有效率的「设计方法」。

简而言之，iOS 13 的目的并不是让使用者看到新的系统UI 外观，而是让设计师有更高的自由度、让开发者有更高的效率，两者结合，自然就会带给使用者更多变的体验。

这边统整出UX/UI 设计师最需要了解的iOS 13 设计重点，现在就让我们详细了解WWDC 2019 所带来的全新设计系统。

深色模式(Dark Mode) 与配色方法

developer.apple.com

深色模式能够让某些内容更加突出、对于OLED 的萤幕来说更加省电，有些人则是认为深色模式的阅读舒适度更高、更能保护眼睛，或者纯粹只是一种审美偏好。无论如何，有许多使用者相当期待这项功能，因此能够让你的产品适当地支援会是较好的选择。

而iOS 深色模式的设计方法显然移植自去年的macOS Mojave，如果你读过macOS 的设计规范，应该就不会感到陌生。深色模式的运作方式如下：

动态色彩(Dynamic Color)

深色模式并非只是把背景改成深色就算完成，某些颜色放在白色背景或许OK，但放在黑色上就显得对比度不足，因此你需要把全部配色都另外配一份深色版本。

developer.apple.com

或者更精确地说：

一个颜色除了要有深色版本，深浅色最好还分别提供高对比版本及广色域(Display-P3) 版本。理想状况下，一个颜色共计要提供八种变化来满足各种类型的使用者。

一个颜色，在各种状态下(例如使用者切换到深色模式、或是开启了高对比模式)，能够自动切换到适当的变化版本，称之为「动态色彩(Dynamic Color)」。设计师定义好色彩的各种变化后，开发者可直接将该组色彩在Xcode 的Asset Catalog 内制作成Color Set，系统即会视状况自行挑选适当版本，这个就是所谓「动态」的意义。

语意化色彩命名(Semantic Color)

麻烦的地方在于，设计师该如何有效地管理两套配色路线、并且在未来都能够方便调整呢？

举个例子来说，你为你的设计制定了色彩规范，并且为之命名：

blue: R0 G0 B255

blueDark: R28 G64 B255

white: R255 G255 B255

black: R0 G0 B0

开发者写程式时也照着你的方式替色彩变数命名，这时候麻烦就来了：如果原本UI 为白底，使用者切换到深色模式需要换成黑底，那么用来控制背景色的变数就要改变，前景的蓝色也要改成深色版本；色彩一多，必定产生编写程式和设计管理的不便。

解决的方法是这样的，如果我们将深浅版本的蓝色统称为「Primary」，不提及色彩本身，只单纯以用途来命名，开发者将「两种蓝」打包为一个Color Set 后，订为「UIColor.primary」，系统就会依照深浅色模式自动挑选(即前述的动态色彩)，因此开发者不需跟着设计师细究到底什么时候该用哪个颜色版本。将深浅版本的蓝色统称为「Primary」，不提及色彩本身，只单纯以用途来命名，开发者将「两种蓝」打包为一个Color Set 后，订为「UIColor.primary」，系统就会依照深浅色模式自动挑选(即前述的动态色彩)，因此开发者不需跟着设计师细究到底什么时候该用哪个颜色版本。

同理，虽然黑白两色差距甚大，但可统称为「UIColor.myBackground」，系统也会自动选择黑或白来作为底色，这个设计方法就称为「语意化色彩命名(Semantic Color)」。

如果过去没有这种替色彩命名的习惯，可能一下子会觉得无法消化，好消息是，如果不需要太多自订配色，苹果在系统层级也提供了现成的语意化色彩，供设计师选用：

developer.apple.com

鉴于语意化配色是设计师本应具备的良好习惯，我们的UI 设计课程所提供的进阶设计套件，则是在前年就已经率先引入语意化色彩：

设计策略

设计系统的管理本身就非易事，现在有了上述的Dynamic Color 与Semantic Color，该如何将这些原则引入设计师的工作流程呢？可参考我们的设计课程所使用的方法，概述如下：

1.选定基本标准色

2.应用至UI (边制作UI、边做变化，并加入常用辅助色)

3.累积一定的画面数量后，将颜色统整，并进行语意化命名

4.变化出暗色模式，以及高对比模式，甚至是广色域模式

了解了深色模式与系统化的配色方法，让我们接着看如何利用iOS 13 的新特性来优化你的产品视觉层次。

层次(Hierarchy)

操作态(Modality)

在UI 中的「Modal」意指暂时性的操作画面，中断使用者当下的操作，先处理另一件(无论是与当下操作相关的或无关的) 事情，即操作态的转换。

在网页设计中，其样式就是你我熟悉的「浮动面板/对话框」；而在iOS 里，则是一个由下往上升起、完整覆盖萤幕的画面。

到了iOS 13，预设的Modal 样式将改为卡片式，就如同iOS 12 里的音乐App 播放画面、或是Email 的编写画面，让使用者能够更清楚的意识到，目前的画面是脱离原先操作的。

developer.apple.com

以前想要这种设计，开发者可能要花点力气，现在可轻易做到这个效果。当然，对于一些比较适合全萤幕的操作(例如图片编辑或影片播放) 你也可以选择使用旧有的全画面(Full-screen) Modal。

Material 与Vibrancy

这两个名词在中文里没有适当的翻译，姑且就先使用原文说明。

iOS 中的「Material」意指会将后方物件虚化的毛玻璃背景(注意，此处的Material 与Material Design 的意义不同)；而「Vibrancy」则是一种能够在毛玻璃背景上，让文字或形状看起来更加突出的视觉效果：

这种设计语言从iOS 7 开始出现，到了iOS 8 开放API 供设计师与开发者使用，但只有少数选项；直到今年的iOS 13，设计师终于有更多的模糊效果可供选择。

Navigation Bar 的底部分隔线

iOS 11 引入了带有大型标题(Large Title) 的Navigation Bar，但标题的大小本身就已经使其与下方内容有显著的层次区隔，底下的分隔线因而显得多余，Apple 自iOS 11 开始就在各个官方App 内不断地在拔除这条线。

在iOS 13，设计师现在可以选择不带分隔线的Navigation Bar，背景也会无缝地连在一起，让画面更有一体性，如下图。

developer.apple.com

Context Menu

在macOS 中，你可以对某物件点滑鼠右键，叫出与该物件相关的操作选单。

developer.apple.com

过去在iOS 中，若要满足此类需求，通常是以长按搭配Action Sheet View，在配备3D Touch 的行动装置则可使用Peek & Pop，而iOS 13 则提供了更好的选择：Context Menu。

developer.apple.com

长按物件，不只会弹出选单，连带还附有一个预览窗口，内容可自由设计，能够让使用者更清楚当下操作的对象。

此互动在没有3D Touch 的装置上由长按触发，具备3D Touch 的装置则可用力按下立刻叫出，但Apple 这样做无异于弱化了3D Touch 在触控萤幕上的存在必要性，推测有可能在未来机种会全数拔除。

值得一提的是，Context Menu 可支援一阶巢状选单，就像电脑的右键选单可进入下一层一样，相当方便。

小结

当然iOS 13 带来的改变远不只如此，若有兴趣抢先了解，可注册成为Apple 的付费开发者，担心影响稳定性的也可等到Public Beta 释出再尝鲜。

作者：Taylor Hu 

原文连接：https://medium.com/uxabc/ios-13-8227dc9bcbb8