当前位置:主页 > 聚焦头脑 >产品设计师不能不知道的iOS13(上)—Dark Mode >

产品设计师不能不知道的iOS13(上)—Dark Mode

评论824条
产品设计师不能不知道的iOS13(上)—Dark Mode

新版本的 iOS 对于产品设计师而言算是带来了几个有趣的挑战。透过这篇文章,希望能够带着各位产品设计师们认识即将正式发布的 iOS 13 ,并且提早开始进行规划!在、两篇文章中会分别和大家介绍底下几个主题:

Dark Mode 马上就要来了,在设计上需要注意些什幺?

iOS 13 Design System 中的 Materials 是什幺?难道是 Google 的设计规範吗?

全新的 SF Symbol

Modal 新类型「Sheet」,如果没注意到就麻烦啦!

Context Menu 的新互动

最后让我们来聊聊 iPad UI 吧

Dark Mode 马上就要来了,在设计上需要注意些什幺呢?

麻…先别急,在开始介绍 Dark Mode 之前,我们先来看看这支在 WWDC19 中潮到不行的影片,这样等等读完文章之后可能比较不会崩溃:

有在关注 Apple 的朋友大概都知道,iOS 13 会在系统内支援「Dark Mode」主题,而所有系统内建的 App 也都会同步支援在 Dark Mode 底下的操作介面,系统将会在萤幕、视图、清单和各种控制元件上套用 Apple 新定义的「darker color palette」。

这套 Color Palette 的主要目的,在于透过调整颜色的明度 & 透明度做出视觉阶层,提升颜色的对比性让所有元件能够清楚的在 Dark Mode 中进行操作;听起来很简单,但有经验的设计师们应该都知道…这一切肯定没有那幺简单。

基于 Dark Mode 进行的介面设计并不是一个颜色调整一下就可以快速解决的任务,由于暗色系的一些特性,原本用来建立视图阶层或者色彩对比的概念都需要被重新设计,设计师们需要抱着全新介面的思维去应对视觉上的每个细节;也因为 Dark Mode 这大幅度的改动,Apple 也耗费心力重新定义了自家 Design System 的数个项目,除了强调设计师们应该「更专注于内容」,更提出底下 5 个原则基于原有的设计进行调整:

产品设计师不能不知道的iOS13(上)—Dark Mode
两种模式下的介面差别

重点补充:在 iOS 13 当中,使用者将可以设置 Dark Mode 做为预设模式,或者可以设定当环境变暗时自动转换成 Dark Mode 的切换模式;这两种状态整合起来意味着…身为设计师的我们或多或少都该考虑些 Dark Mode 的使用场景。

iOS 的 Human Interface Guideline 中针对 Dark Mode 有不少的说明,有兴趣的伙伴可以花些时间阅读,在这边我们先来简单看看在 Dark Mode 的影响下,iOS 系统上做了哪些调整。

首先,iOS 13 中支援了所谓「Semantic Color」;还记得我们以前在进行介面设计时会使用所谓的「系统蓝」或者「系统红」吗?

产品设计师不能不知道的iOS13(上)—Dark Mode
系统蓝:返回按钮、选取等

为了应对 Light / Dark Mode 两种模式,现在 iOS 中内建了这些「系统颜色」提供开发者 / 设计师使用,这些颜色会根据 Light / Dark Mode 自动进行切换,让你不需要耗费心力重新设计,如下图:

产品设计师不能不知道的iOS13(上)—Dark Mode

不论有没有使用到这些系统色,在 iOS 13 正式改版之前,各位产品设计师们请记得 3件重要的事情:

如果自家工程师原本是使用像是 #123456 这种 Hex 色码设定系统颜色的,记得统一修改成使用 UIColor.systemBlue 这种 Semantic Color 的宣告型态。iOS 13 其实内建了非常多的 Semantic Color,也包含像是 systemBackground 背景色、各类型的文字、icon Tint Color,如下图:

产品设计师不能不知道的iOS13(上)—Dark Mode

如果原本产品中使用各式各样的自定义色彩,可以考虑开始使用 Semantic Color ,藉此同步支援 Light / Dark Mode,或者透过 Color Asset 自己来定义产品的 Dark Mode Color Palette。

如果你的产品有使用「系统的原生元件」,例如 Switch、Tab bar、Navigation Bar 之类的,假如使用者切换到 Dark Mode 的话,这些元件将会自动「将颜色套用 Dark Mode Color Palette」,也就是说…如果完全不调整的情况下,你的 App 画面可能会变得黑黑白白一团糟啦哈哈哈哈哈哈,就类似图一中的介面, Tabbar 已经被转成 Dark Mode 的样式,但画面上方的元件、文字因为都是自定义颜色、样式的关係,并没有随着模式切换而自动调整,这也让整个画面看起来上下似乎不太协调。但不用担心!如果真的很痛苦,就是不想要支援 Dark Mode ,可以请工程师帮你在 App 的 Info.plist 里面加上一个参数说明「只支援 Light or Dark Mode」,就可以摆脱 Dark Mode 的梦魇了。

产品设计师不能不知道的iOS13(上)—Dark Mode
产品设计师不能不知道的iOS13(上)—Dark Mode
系统元件自动转换

那…在规划 Dark Mode Color Palette 时有什幺特别需要注意的吗?有的!我们需要特别注意在不同模式底下的 Color Contrast Ratio,简单来说就是在不同背景下,由于文字 / Symbol 的颜色对比值会严重影响它的易读 / 可辨识性,设计师应该针对不同模式进行调整,而非直接套用一个「乍看之下」可以兼容的色彩,以下图的橘色为例:

产品设计师不能不知道的iOS13(上)—Dark Mode
辨识性差异

小补充:可以使用像是 Contract 这样的工具测试你的颜色是否符合标準喔!

产品设计师不能不知道的iOS13(上)—Dark Mode
iOS 13 所说的 Material 是什幺?是 Google 的设计规範吗?

在开始介绍 Material 之前,我们先来聊聊 Apple 在 Session 中介绍的「Base and Elevated」概念,Apple 之所以提出这样的概念,主要是由于「阴影」的效果在 Dark Mode 底下相对不明显,因此 Apple 透过灰阶的调整建立出视图的阶层:

产品设计师不能不知道的iOS13(上)—Dark Mode

Apple 也建议设计师们也都应该透过明暗程度来建立视图的阶层,如果完全没有概念的伙伴,iOS 13 中内建的 System Gray会是设计师们可以先尝试看看的颜色:

产品设计师不能不知道的iOS13(上)—Dark Mode

来到正题!iOS 13 提供了「Materials」的设计,某种程度其实非常类似 iOS 7 导入的毛玻璃效果,但早期并没有那幺多层。iOS 13 透过 Materials,不同程度的模糊、透明效果来建立画面上视觉的阶层深度,Material 藉由让背景模糊来让画面上的「背景」和「前景」拆分开来,背景的颜色由于透明的关係能够穿透到前景,但又因为模糊的设计并不容易影响前景的辨识性。iOS 13 支援四种深度的 Material 效果,透过下图应该可以清楚地看到 Thick 的 Material 效果可以提供视图更多的文字、图片对比性,而这些效果现在都可以请工程师轻鬆的透过程式直接设置:

产品设计师不能不知道的iOS13(上)—Dark Mode

如果允许的话,Apple 建议设计师们在「自定义的视图」上也能够套用类似的规範;除此之外,基于这些 Material 效果上的文字色彩也被重新定义,透过调整效果的 Vibrant 类型,在 iOS 13 中会自动产生如下图的文字色彩:

产品设计师不能不知道的iOS13(上)—Dark Mode

当然,在 iOS 13 中除了颜色可以进行调整之外,所有的图片也都可以根据 Light / Dark Mode 进行变更喔 !

喝口水,光 Dark Mode 就有这幺多要注意的重点了!的部分我们就先讲到这里吧,如果各位伙伴有兴趣了解在设计上 iOS 13 到底还改了些什幺,除了这篇文章之外也可以参考 2019 WWDC Session ,文章中的截图也都是来自 WWDC Session 提供的 Keynote 简报。

  • 相关推荐:
  • 您可能喜欢得内容: