产品设计师们不得不知的iOS13——暗黑模式

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

2019年WWDC全球开发者大会上,苹果正式公布了iOS 13。虽然截止到目前 iOS13 才出了第三个测试版,但有心的产品设计师们已经开始提前做准备喽!

墨墨姐这次很开心联系到来自台湾的 Samuel,获得授权转载他的这篇关于「为 iOS13 设计」的文章。

注:为了适应大陆读者的语言习惯,墨墨姐修改了原文中的几处用词。

👇👇

产品设计师们不得不知的iOS13——暗黑模式

Hello,我是 Samuel,目前在「Hahow 好学校」担任 Product Owner & Software Developer。新版本的 iOS 对于产品设计师而言算是带来了几个有趣的挑战。透过这篇文章,希望能够带各位产品设计师们认识即将正式发布的 iOS 13 ,并且提早开始进行规划!

在这篇文章会和大家介绍两个主题:

  1. Dark Mode(暗黑模式) 马上就要来了,在设计上需要注意些什么?
  2. iOS 13 Design System 中的 Materials 是什么?难道是 Google 的设计规范吗?

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

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

苹果官方介绍 iOS 13 暗黑模式!

有在关注 Apple 的朋友大概都知道,iOS 13 会在系统内支持「 Dark Mode 」主题,而所有系统内建的 App (备忘录、提醒事项、通讯录等)也都会同步支持在 Dark Mode 底下的操作介面,系统将会在屏幕(Screen)、视图(View)、菜单(Menu)和各种控制元件(Controls)上套用 Apple 新定义的「darker color palette」。

这套 Color Palette 的主要目的, 在于透过调整颜色的明度 & 透明度做出视觉层级,提升颜色的对比性,让所有元件能够清楚的在 Dark Mode 中进行操作。

听起来很简单,但有经验的设计师们应该都知道……这一切肯定没有那么简单(泪)……

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

  • 维持操作上的熟悉性
  • 维持平台上的一致性
  • 清楚的信息层级
  • 无障碍操作
  • 保持简单 — Keep it simple
产品设计师们不得不知的iOS13——暗黑模式
两种模式下的介面区别

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

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

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

产品设计师们不得不知的iOS13——暗黑模式

系统蓝:返回,选中等

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

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

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

产品设计师们不得不知的iOS13——暗黑模式

如果原本产品中使用各式各样的自定义色彩,可以考虑开始使用 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——暗黑模式

产品设计师们不得不知的iOS13——暗黑模式
系统元件自动转化

那么,在规划 Dark Mode Color Palette 时有什么特别需要注意的吗?

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

产品设计师们不得不知的iOS13——暗黑模式

iOS 13 所说的 Material 是什么?是 Google 的设计规范吗?

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

产品设计师们不得不知的iOS13——暗黑模式

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

产品设计师们不得不知的iOS13——暗黑模式

来到正题!iOS 13 提供了「Materials(材料)」的设计,某种程度其实非常类似 iOS 7 导入的毛玻璃(模糊)效果,但早期并没有那么多层(笑)。

iOS 13 透过 Materials,不同程度的模糊、透明效果来建立画面上 视觉的阶层深度 (Depth),Material 借由让背景模糊来让画面上的「背景」和「前景」拆分开来,背景的颜色由于透明的关系能够穿透到前景,但又因为模糊的设计并不容易影响前景的辨识性(当然也要搭配文字的对比啦🤣)。

iOS 13 支持四种深度(Thick、Regular、Thin、Ultrathin)的 Material 效果,透过下图应该可以清楚地看到 Thick 的 Material 效果可以提供视图更多的文字、图片对比性,而这些效果现在都可以请开发者轻松的通过程式直接设置:

产品设计师们不得不知的iOS13——暗黑模式

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

产品设计师们不得不知的iOS13——暗黑模式

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

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

本文转自墨刀公众号,已允许转载。

随意打赏

产品设计师招聘产品设计的原则
提交建议
微信扫一扫,分享给好友吧。