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

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