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

产品设计师不能不知道的iOS13(下)

评论488条
产品设计师不能不知道的iOS13(下)

在篇中和各位伙伴介绍了 Dark Mode 以及衍生的 Material 设计;在篇中会再和大家聊聊更多 iOS 13 在设计上带来的改变,如果还没有读过篇的文章可以透过前往阅读。

全新的 SF Symbol
产品设计师不能不知道的iOS13(下)

iOS 13 支援了 SF Symbol,提供超过 1500 个高识别、一致性、同时与系统字体 San Francisco 无缝整合的 Icon。

产品设计师不能不知道的iOS13(下)

更棒的是它还同步支援各种尺寸、重量型态,也让工程师、设计师们再也不需要垂直置中的问题,不需要担心模糊的问题;对于不懂设计的工程师或者需要快速开发产品的团队而言,根本就是佛心来的啦!

产品设计师不能不知道的iOS13(下)
产品设计师不能不知道的iOS13(下)
随着文字大小变更保持对齐状态

如果你想要建立客製化的 Symbol,随着 MacOS 更新提供的 Mac App — SF Symbols 让你可以用 Sketch 或者 illustrator 自己客製化需要的 icon,并汇入 SF Symbols App 后进行使用。想了解更多伙伴可以参考 。

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

Yap!iOS 13 中「系统预设」的 Modal 跳出页面将会转变为下图的型态,称为「Sheet」,操作的视图会被缩小同时淡化至于新跳出视图的下方,而不像 iOS 13 之前会是完整覆盖的画面 →

产品设计师不能不知道的iOS13(下)

让我们放大些来看:

产品设计师不能不知道的iOS13(下)

新版本的 Sheet 採用卡片式的设计风格,透过淡化却仍然存在的概念,帮助使用者记得上一个视图的样貌与行为,同时,新版本的 Sheet 也提供使用者一些系统预设的行为或者「自定义的行为」跳出这张卡片:

  1. 从卡片上方往下滑动
  2. 当卡片滑至内容最上方时,从卡片的任何一个方向往下滑动
  3. 点击按钮

根据 Human Interface Guideline 中的坚毅,如果跳出来的 Sheet 中有「修改未储存的资料」这类型的行为,应该要提醒使用者有「未储存的资讯」,结合 Alert 视窗与使用者进行互动,同时透过程式关闭掉「从卡片上方往下滑动」这类型的离开行为,毕竟…如果使用者没有储存不小心关闭画面就尴尬了。Apple 表示 Sheet 的使用情境在于「非沈浸式」的操作介面,请确保 Sheet 上「至少有」关闭的按钮提供使用者使用,弹出的任务不应该过于複杂,使用者也不应该被轻易绑在画面当中。以 Calendar 为例,编辑和新增事件这种事件任务就非常适合使用 Sheet:

产品设计师不能不知道的iOS13(下)

但像拍照、录影、照片编修、文件编辑这种需要沈浸式、较複杂的使用场景就适合维持 Fullscreen 的呈现型态:

产品设计师不能不知道的iOS13(下)

当然,即使 Apple 强烈推荐我们採用新的 Modal Presentation Mode,但原本覆盖的视图呈现型态仍然可以透过程式码去修改,但务必记得「预设的已经改成上图的样式」、「预设的已经改成上图的样式」、「预设的已经改成上图的样式」很重要所以说三次!如果各位的 App 不希望透过上图的样式跳出页面,请务必提醒自己工程师在 iOS 13 上线前进行修改。

Context Menu 的新互动

不知道各位伙伴有没有注意到配合「 Force Touch + 上滑」在 iOS 的相簿中可以产生底下的互动:

产品设计师不能不知道的iOS13(下)

在 iOS 13 新增了一个非常类似的互动行为 — Context Menu

产品设计师不能不知道的iOS13(下)
产品设计师不能不知道的iOS13(下)

Context Menu 最主要的价值除了提供更多的互动型态之外,Apple 在 Human Interface Guideline 中也特别提出几个重点:

产品设计师不能不知道的iOS13(下)

其实…Context Menu 某种程度就是在模仿 MacOS 上「右键」的操作行为,使用者可以透过这个快速弹出的 Menu 在画面中进行更多的操作,Apple 建议 Me毕竟…接下来 iPadOS 的 App 快要可以无痛转移到 MacOS 的 App 啦。

产品设计师不能不知道的iOS13(下)
最后让我们来聊聊 iPad UI 吧

iPhone 的部分大致上告一个段落,我们最后来聊聊 iPad 的部分吧,竟然还有?!好啦我们简单整理一下就好!首先,Apple 在今年的 WWDC 中将 iPad 独立出一个「iPadOS」:

产品设计师不能不知道的iOS13(下)

除了主页面的 UI 调整之外,也支援首页钉选 App 的功能。但 iPadOS 最主要的特色在于所谓「滑动置前与分割显示」 →

产品设计师不能不知道的iOS13(下)

针对 iPadOS,Apple 耗费了大量的心力在多视窗的互动上面,就如同在 MacOS 上可以有多个视窗的操作一样。更多的细节可以直接上 上面看,但这边我想和大家多聊聊的是由于 Split Screen 分屏所产生的特性,Apple 特别建议「你需要让你的 App 变得 Resizable」。

产品设计师不能不知道的iOS13(下)

在 iOS 13 之前,iPad 的 App 可以关闭掉 Split Screen 的特性,让你的 App 不能同时和其他 App 一起使用,但这一切都将在 2020 年 4 月停止!你的 App 「一定要支援 Split Screen」,这就是 Apple 啊。

这大概是唯一一个让我想特别拿出来提的调整,让我们一起…携手努力吧哈哈哈哈哈哈啊。

感谢大家愿意花时间阅读小弟的文章,我想…iOS 13 在设计上面改动的重点几乎都整理在这两篇里面啰!更详细的内容请参考:

希望能够帮助各位在 iOS 13 来临之前提前做好準备,避免被这些设计上面的改动给影响。

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