WatchOS 中的新设计

（你好 WWDC 2020） 大家好 欢迎参加 WWDC （WATCHOS 中的新设计 Apple 设计团队 JENNIFER PATTON) 大家好 欢迎参加《WatchOS 中的新设计》讲座 我叫 Jennifer Patton 是 Apple 设计团队的一名 Watch 设计师 本次讲座中 我将谈谈 今年我们为 Watch 本地 app 添加新功能的一些方式 以及如何向你的 WatchOS app 中 将引入这些相同的功能 非常高兴能与大家分享 在这一过程中我们了解的一些东西 那么我们开始吧 我们将先从一些指导原则开始 设计你的 Watch app 时 要记住 Watch app 应轻巧 就像这个来自 Sleep Cycle app 示例一样 在功能方面 要限制长时间交互并应苛刻挑剔 理想情况下 你可以从 Watch app 中 获得所有信息 一目了然 （随时可操作） 当给 app 添加功能时 注意保持它的可操作性 Wikiloc 在其列表视图中 有一个过滤器选项 过滤是在你与 app 交互时 让用户交互对你有价值的一个好方法 最后 一旦你认定某个操作 对你的 Watch app 体验至关重要 就让这个操作可发现吧 这里有一个 来自 Watch app 的很好的例子 叫 Bear 它显示的 是一个清晰的可与之交互的可视按钮 今年 在 watchOS 上 我们做了一个全面审核 涉及所有基于手势的情境菜单 这些菜单存在于 整个操作系统和本地 app 中 在 watchOS 之前的版本中 操作被放在一个基于手势的情境菜单中

在 watchOS 7 中 我们把所有这些功能都迁移到了 app 中 努力让每个用户 都能更直观地体验这些操作

在此过程中 我们在 Watch 上 创建了一些前所未有的很棒的全新交互 非常期待能够看到大家将如何 在 Watch app 中开发这些新模式 设计过程中 我们要牢记三个目标 首先 交互应做到可发现和可预测 （新消息） 其次 相关的操作应该在 app 中始终可见

第三 取消基于手势的情境菜单 而不删除功能 当把这些感觉纳入我们的设计中时 我们发现很多我们想要展示的操作 实际上都属于辅助操作 我今天要讲的互动 并不是你使用 Watch app 的主要原因 相反 它们会添加或增加功能 提供一种辅助但仍然重要的操作 或提供一种方法来筛选、排序 或以其他方式 与视图中已经存在的主要操作交互 一旦你把你的 app 中的操作缩小 到一个愉快的 Watch 体验所必需的范围 这里有一些方法 来显示你的 app 中的辅助动作

我们将讨论一些常用的操作 比如排序和筛选菜单 它们可以帮助长列表更容易导航 我们将讨论滑动操作 它们可以使一些关键的辅助操作易于访问

我们将讨论在哪里放置更多选项 在滚动视图的底部添加操作的价值 以及在一个长列表中 建议基本操作的新工具栏按钮

我们还将讨论何时使用分级导航模型 来改变 app 中的目的地

我们先从排序和筛选开始 一个长长的滚动列表 可以变得更容易使用 也更个性化 如果你能对当前对你有价值的信息 进行排序和筛选的话 （排序方式） 在 watchOS 7 中 我们把这个按钮添加 到了运动 app 的运动共享列表的顶部 我与一长串的朋友和家人分享我的运动 也许我想看看今天谁的运动量最大 我只要轻点顶部的排序按钮 就会看到一个模态视图 上面有一个链接表视图 允许我通过单击来对列表进行排序 而选择锻炼 见鬼 Molly 还不到上午 11 点呢！

这里还有一个例子 我们把它称为视图切换器 与过滤内容略有不同 我们看到的只是一组不同的数据

在我的股票 app 中 我可以在列表视图中 速览我所关注的所有股票 但是如果这些信息 对我来说价值不大该怎么办呢？ 我们轻点列表顶部的按钮 然后选择点位 嗯 好多了 现在我看的是点位而不是列表中的百分比 正是我一直在找的信息

排序和筛选菜单 是一种轻巧和可操作的方法 可以缩短任何长列表的 让列表更易浏览 对你更有现实价值 要创建用于排序、筛选或视图切换的菜单 只需在 SwiftUI 的列表中 嵌套一个选择器 你可以在列表中使用的 另一个 API 是滑动操作 在 iOS 中 我们一直在使用这些操作 我们开始 越来越多地在 watchOS 上使用它们 用于在列表视图中显示操作 世界时钟中 有一个列表视图中辅助操作的完美示例 在我的城市列表中 我可以从右向左滑动一个表格行 显示一个清晰可辨的提示 把这个城市从名单中立刻删除 使用列表底部的“添加城市”按钮 我随时可以轻松地重新添加这个城市

滑动操作 API 被称为 onDelete 修饰符 目前在 SwiftUI 平台可用

我们已经讨论了给列表添加功能 但如果你的 Watch app 有更多的选项 需要在一个可查看的、不滚动的视图中 显示怎么办呢？ 在这个地图示例中 整个屏幕都是一个显示区域 我可以用手指移动地图实现平移 或者轻点当前位置按钮 来快速返回我当前的位置

但是我们还有一些其他操作 需要在这个非滚动可查看视图中显示 这样 我们就在右下角添加了另一个按钮 即 app 键控颜色中的省略号 这个按钮可以呈现这些操作 这被称为 More 按钮

点击这个 More 按钮 我现在可以搜索地图的这个区域 或者在交通地图和标准视图间切换 这个情境菜单中的选项 为地图的可查看区域添加了功能 事关我此刻正在做的事情 并且可发现 也很可靠

在这个模态中 你可以显示一系列 像这个操作一样的简单操作 或者一个更复杂的操作列表 比如相机 app 里的那种操作 如果我打开我的 Watch 上的相机 app 我就可以把我的 Watch 作为遥控器 用我的 iPhone 相机拍照

顺便说一句 我们把默认快门设置成了三秒 这样我就不会被看到 低头看我的 Watch 的画面了 我认为这是一个很大的进步

现在 假设我的 iPhone 已经设置好了 准备拍摄另一段漂亮的超长自拍 我决定改变我的闪光灯设置 开启或关闭实时照片 或者直接在我的 Watch 上 进行一些其他常见的操作 轻点屏幕右下角的 More 按钮 我就可以看到一个模态表视图 里面有很多相机设置选项

这是一个表单 API 示例 它有一个功能强大的选项列表

让我们先来关注一下 More 按钮的设计

使用一个简单的圆形容器元素 你可以创建自己的 More 按钮 让 SF Symbol“省略号”在圆形中居中

请参考 Apple 的《界面交互设计规范》 了解每个 Watch 屏幕尺寸的 推荐点击区域 如果需要的话 在按钮周围添加透明填充 以确保按钮能够舒适地使用

现在 相机 app 在 More 按钮下方有好多选项 但如果你需要提供一个单一的辅助操作 比如 Photos app 中的这个例子 该怎么办呢？

在 watchOS 7 中 我们在左下角添加了一个按钮 这样 我就可以直接从我的 Watch 上的 Photos app 中创建一个表盘

因为这里实际上只有一个操作 而不是省略号 所以我们设计了 一个 Apple Watch 表盘符号 你可以为自己的 app 设计与字形语言相结合的字形 或者利用 SF Symbols 中为你提供的字形

这个 More 按钮需要在非常暗 和非常亮的背景上才会产生效果 为使本按钮在任何背景上都清晰可见 我们使用了 不透明度为 85% 的白色圆形容器 和不透明度为 50% 的 一个 1 点黑色外发光

More 按钮 是获得辅助操作菜单的完美方式 这些操作都与你当前正在查看的内容有关 考虑使用 More 按钮时 将主要操作 与辅助操作分离特别重要 绝对不要把主要操作放在 More 菜单中 也一定要对你提供哪些辅助操作苛刻挑剔 要在可查看的全屏视图中使用 More 按钮 或在轮播列表中 如本例中的锻炼 app… （户外徒步） …当你需要提供情境选项时 但又没有太多的空间

细节视图底部的操作按钮 可能是你的 app 中 显示操作的最容易发现和最直观的方式 下面是日历 app 中的一个例子 在这个我被邀请的日历事件中 我们在事件细节的底部添加了一个按钮 这将允许我 通过电子邮件向发件人发送邀请 细节视图底部的操作 应该始终适合它上面的视图中的内容 下面是另一个日历事件 这是我创建的一个日历事件 在任何自己创建的 日历事件的详细信息的底部 我们都添加了一个按钮 这样我就可以从我的日历中 轻松删除这个事件

为避免混淆 事件细节中不可行的信息 恰好位于黑色背景上

只有底部的操作按钮位于容器中 看起来是可以点击操作的 要使用按钮上的红色文本标签 来指示破坏性操作 如果被删除的信息不易恢复 则应添加一个确认警告 接下来 我想介绍一个 名为工具条按钮的全新 API 我们设计这个按钮是为了解决 在 Watch 上的一种特定交互请求 即信息和邮件中的撰写按钮

等等 这个 API 在哪里？ 它藏在导航条的下面 供我需要时使用 我可能没有打开我的 Watch 上的信息 来撰写新信息 相反 我在这里导航的主要原因 可能是为了阅读刚收到的新消息 但如果我确实打开了 我的 app 来启动一个新的消息线程 撰写按钮就在那里等着我 而且不用的时候我还可以把它再隐藏起来 你可以在 SwiftUI 中 找到这个工具条按钮 API 它只能在滚动视图中使用 滚动才可以发现这个按钮 使用这个按钮要谨慎 只可用于 对你的 app 的功能至关重要的操作 但可能还不是视图的主要操作 到目前为止 我们一直在讨论一些简单方法 利用这些方法 通过各种按钮为 Watch app 添加功能 在 watchOS 7 中 我们还需要解决另一个问题 一个按钮无计可施的任务 它需要一种不同的导航模式 分级导航 在某些情况下 当你打开一个 Watch app 时就进入到一个页面属于情理之中 在我们的邮件中就是这样一个例子 当我打开我的邮件 app 时 我已经进入了我的所有收件箱视图 准备阅读我最近的电子邮件 但如果我轻点导航栏的后退按钮 我就会回到 app 的顶层 我可以改变我的目的地 来访问我的 Apple 电子邮件收件箱 或我的个人电子邮件收件箱 我们现在来看看我的 Apple 电子邮件 导航栏中的标题 让我知道了我目前正在阅读哪个收件箱 后退按钮还在这里 所以我可以随时跳回去切换 在分级导航模型中 当我下次打开 app 时 它应该记住我曾选择的目的地 如果你的交互不需要这种级别的持久性 那么这可能不是要用的正确模型 我们今年添加到 watchOS 的另一个例子 在家用 app 中 现在 当我打开我的 Watch 上的家用 app 时 我进入了我家房子中的设备列表里 但是轻点左上角的返回键 我就会被带到一个上一级的目的地列表 （CHEZ PATTÓN 简的迷人角落） 从这里 我可以轻松切换到我的设计工作室 现在我可以看到 我在这里的设备并与之互动 （237号房间 APPLE TV） 导航栏中的标题已经更改 指示我当前所在的目的地 轻点返回键总会非常可靠地把我带回 到那个相同的目的地列表 我真心希望 这次《WatchOS 中的新设计》讲座 有助于你 为你的 Watch apps 带来有用的功能 当为 watchOS 7 设计或更新你的 Watch app 时 请记住 尽管你的 app 中有这么多不同的方法 来改进导航功能 你还是要特别注意 你在情境菜单中放入的内容 请选择 对愉快的 Watch 体验至关重要的操作 而且 一旦你决定了要提供什么操作 请避免使用基于手势的菜单 相反 提供一个 清晰可见的按钮或可预测的交互模式

记住这些简单的设计目标 你就能让你的 app 具有价值 且易于为每个想要使用它的人导航 （SF SYMBOLS - 在 WATCHOS 上 创建 WATCHOS APP SWIFT UI） 要了解更多信息 请参阅 本视频下方 Apple Developer app 中列出的参考资料 谢谢大家

（你好 WWDC 2020）