在 watchOS 10 平台上进行 App 设计和开发

♪ ♪

Jennifer：大家好 我叫 Jennifer Patton 是 Apple Design 团队的设计师 Matthew：我叫 Matthew Koonce 是 负责 watchOS 的 SwiftUI 团队的工程经理 Jennifer： 在 watchOS 的第十个主要版本中 我们对用户界面进行了重新设计 旨在提供及时的信息展示 一目了然地传达重点内容 通过全屏色彩和图像 来展示屏幕的形状和保真度 并确保导航一致性和可预测性 Matthew：同时 我们还对 API 进行了改进 SwiftUI 在 watchOS 10 中 起到了至关重要的作用 在本次讲座中 我们将带你详细了解 watchOS 10 重新设计的详情 我们将从一些关键设计原则开始 接下来 我们将探讨 构建你的 App 中的导航的新方法 然后 我们 将讨论布局系统的进化 以及一些更新的 API 它们有助于充分利用每个像素 最后 我们将看看颜色和材质 如何为 App 带来全新的维度 这个计划听起来不错吧？ Jennifer：是的！我们马上开始吧 我们先从一些设计原则开始 在设计 Apple Watch App 时 你需要考虑的第一件事是 “在此刻 我的 App 可以为用户提供的 最相关的信息或体验是什么？” 我们以天气 App 为例 由于 Apple Watch 是一个 适合快速和专注交互的计时设备 打开 App 时 你首先会看到当地今天的天气 通过简单旋转数码表冠 你可以查看 当地今天其他时间的天气 然后是一周其他时间的天气 如果我想查看其他地方 例如纽约的天气 我只需轻点一下任意详细视图 即可跳转到我的城市列表 天气 App 实现了 我所谓的“Apple Watch Moment” 当你设计你的 App 时 尽量筛选和突出显示最相关的信息 以确保在用户抬起手腕时 能够立即获取到所需的内容 手表的体验 应专注于简洁、快速的交互 如果你只能获得 某人十秒钟的注意力 你会呈现哪些信息？ 在 iPhone 上 新闻 是一个拥有 丰富内容的多标签页、多级别 App 而在 Apple Watch 上 新闻 的设计 着重于呈现五条最重要的新闻 内容在垂直方向上 堆叠在动态中 并在轻点时展开 短暂的交互 是我在设计 Apple Watch 时喜欢的一个方面 当你只能 获得人们几秒钟的注意力时 你需要简洁明了 就像新闻 只专注于展示今天的头条 心率 App 首先显示有限的数据 所以可以 将大部分视图用于全屏动画 健身记录 App 将大量的经历 简化为单个专注的视图 因此 在设计 App 时 请保持简洁 集中用户的注意力 当我们在 2014 年 宣布推出 Apple Watch 时 我们还介绍了数码表冠 作为一种独特而精确的输入设备 它可以在 不遮挡屏幕的情况下使用 在 watchOS 10 中 我们强调了数码表冠 作为访问和导航 App 的方式 用于滚动、分页和进行精确调整 虽然交互应该以数码表冠为中心 但也应始终支持触控作为备选方案 我们的设计目标是 将交互与数码表冠绑定 以此来塑造 App 的导航结构和体验 在设计适用于 watchOS 的 App 时 要考虑用户从他们 抬起手腕的那一刻开始的体验过程 watchOS 10 中的一个 很棒的新功能是智能叠放 通过旋转数码表冠 一系列可以一目了然的小组件 以智能排序的方式显示在屏幕上 当你设计 App 时 可以首先考虑 哪些信息适合做成智能叠放小组件 然后围绕那些相关且及时的 体验进行设计 来构建你的 App 强烈建议你参考我的同事 Ed 的视频： “为 Apple Watch 的智能叠放 设计小组件” 一旦你将手表 App 的焦点缩小到 与当前时刻相关的简洁信息 你的下一步就是 将这些时刻有机地结合在一起 形成一个易于导航的结构 Matthew 和他的团队一直在 努力开发一些 非常棒的新 API 供你使用 到你来介绍了 Matthew Matthew：谢谢你 Jenn 让我们来看看 Swift UI 对 App 内部的导航做了哪些更新 首先 让我们来看 NavigationSplitView 它可以提供一目了然的详细内容 然后 我们对 TabView 进行了一些更新 使你可以 将更多交互与数码表冠绑定 这两个功能以及 NavigationStack 是我们的核心导航范例 为你的 App 选择合适的结构 是开发中的基本决策 每种结构都有其优势 让我们从 NavigationSplitView 开始 watchOS 上的 NavigationSplitView 的概念 借鉴了 iPadOS 上的双列布局 例如 iPadOS 上的天气 App 的布局 在 watchOS 上 源列表和详细视图是分开的 然后再组合在一起 源列表位于详细视图正下方 现在 源列表只需轻点即可访问 Jennifer：如果你有一个源列表 比如天气 App 中的城市列表 或股票列表 并且还有与源列表中的 项目相关的详细视图 那么 Navigation Split View 是一个完美的选择 让人们在启动 App 时 直接进入详细视图 用位置、最近使用、频率 或其他用户意图的指示 来确定首先显示哪个详细信息 努力使你的详细视图一目了然到 甚至不需要标题 Matthew：Navigation Split View 的一个非常棒的功能 是我们已经在 SwiftUI 中 内置了详细视图和源列表之间 的过渡效果 当然 你可以轻点列表图标 用手指交互效果更好 Jennifer：源列表是展示 数据之间相互比较的优秀工具 库比蒂诺的当地时间是上午 10:09 布达佩斯的当地时间是晚上 7:09 无需给源列表 加标题 也无需关闭按钮 或导航控件 这使得源列表 可以使用较短的导航栏 在屏幕上一目了然地 上显示更多的比较数据 Matthew：NavigationSplitView 的 API 在 watchOS 上 与其他平台上的使用方式相同 你可以设置一个源列表 并在初始时 为该列表设置一个默认选择项 始终将选择项初始化为一个值 以便 SwiftUI 可以自动启动到详细视图 接下来 让我们来谈谈 TabView 它已经得到了一些非常棒的更新 成为我在 Apple Watch 上 导航 App 的新的最爱方式 TabView 可以在视图之间滚动 watchOS 还有新功能 可以让单独的选项卡 根据需要展开和调整大小 Jennifer： 除了允许内容内联展开外 这还可以支持 默认情况下适应单个屏幕的设计 以满足本地化文本和大字体的需求 Matthew：让我们更详细地看一下 如何在健身记录 App 中使用 TabView 健身记录为每个圆环的详情视图 都设置了一个选项卡 并且它正在使用 新的“垂直页面”样式 健身记录还引入了 每个选项卡之间的模糊过渡效果 通过将过渡效果 与容器背景修饰符结合使用 可以实现视图之间的 平滑过渡和无缝衔接 健身记录的最后一页是 最近完成的锻炼的滚动列表 添加该列表十分简单！ TabView 将自动 检测到任何可滚动的内容 并会扩展以适应它 这就是快速构建 类似健身记录的布局的方法 但 TabView 还有一个更棒的功能 Jenn：你是否注意到 当你滚动到移动选项卡时 发生的酷炫动画？ 观察健身记录圆环 如何移动到左上角 这实现了我们将交互 与数码表冠绑定的设计目标 同时保持健身记录圆环始终可见 Matthew：现在你可能在想 “我也能做到吗？” 答案是 你可以！ 让我们来看一下 在 watchOS 10 中 你现在可以根据 TabView 的选择值来驱动动画 一个非常巧妙的技巧是将其与 matched geometry effect 相结合 健身记录圆环 会出现在 TabView 和工具栏中 通过将 matched geometry effect 添加到这两个视图中 SwiftUI 会自动在 不同位置之间进行动画过渡 Jennifer：Navigation Split View 和 TabView 非常强大 但并不适用于每个 App 如果你的 App 无法通过在详细信息 和源列表之间切换 或在一些 垂直分页选项卡中完成所需功能 你可以考虑使用 NavigationStack Matthew：是的 完全正确 我们在许多 App 中都使用了 NavigationStack 如体能训练、日历和音乐 我们甚至更新了导航 push 动画！ 它现在会突出显示 并移动你所选择的视图 Jennifer： NavigationStack 仍然是引导用户 进入和退出 视图层级结构的最清晰方式 在第一个视图上使用大标题 但不要在任何 有返回按钮的子视图中使用 在设计你的 App 时 选择一种导航结构 以尽可能少的交互 来实现你的“Apple Watch Moment” Matthew：这就是 watchOS 10 上的导航 NavigationSplitView、TabView 和 NavigationStack 使体验在所有 App 中 保持一致性且可预测性 Jennifer：现在你已经为你的 App 选择了最佳的导航结构 让我们来讨论构建 每个视图时可以使用的资源 随着 Apple Watch 的屏幕和硬件的发展 屏幕越来越大且更加圆润 多年来 我们在设计越来越圆润的屏幕时 我们已经 开发了一个灵活的网格系统 用于定义控件、 标签和内容的大小和位置 为了适应不同类型的内容 我们设计了三种基础布局： 基于表盘的视图、 信息图表视图和 列表视图 所有这些布局都设计成可以自动适应 由 watchOS 10 支持的 不同 Apple Watch 尺寸 基于表盘的视图 非常适合在一瞥之间传递密集信息 使用全屏的 颜色和图像 如天气状况 可以帮助添加额外的内容 基于表盘的视图还允许 你添加最多四个不同的边角控件 且不会遮挡内容 信息图表视图 适合呈现趋势图、图表 和其它具有一组文本和数据的 数据可视化信息 列表视图使浏览内容 并找到所需内容变得轻松 这些布局网格是基于 活动显示区域的形状 我们以屏幕的曲率为起点 使用数学方法确定视图中 元素的大小和位置 这些布局网格 可在 Apple 设计资源中找到 希望你在 设计 App 时会发现它们有用 Matthew：Jenn 和 Design 团队创建的布局网格 构成了 watchOS 10 的基础 并为我们的 许多 API 提供了基础 例如 使用场景填充可以 获得构建表盘视图所需的嵌入物 或者使用新的 “top bar trailing”布局选项 在屏幕右上方的 工具栏中添加一个按钮 当你使用此布局选项时 时间会腾出位置并居中显示 “播放中”视图 充分利用了更新后的工具栏 除了使用“top bar leading” 和“trailing”的布局选项外 播放中 App 还将其控制按钮 添加到底部工具栏中 SwiftUI 使用了 Jenn 刚刚描述的 相同布局网格来对齐这些按钮 无需添加额外的填充 底部栏中还有一个暂停按钮 你可以使用 control size 修饰符 来使该按钮变大 和更加突出 构建“播放中”屏幕从未如此简单！ 这些工具栏位置的设置 为聚焦交互提供了新的机会 因为它们允许 同时在屏幕上显示更多的控件 Jennifer：我们开发了 布局网格来充分利用每一个像素 并使使用 Apple Watch 的体验 更加一致和可预测 我也希望它们能激发你的灵感 在未来很长一段时间内设计出出色的 App Matthew：接下来 让我们谈谈颜色和全套材质 如何使用户感受到自己在 App 的 视图层级中所处的位置 Jennifer：我们为 watchOS 10 设定的设计目标之一是 使用全屏颜色和图像 突出显示屏幕的形状和保真度 为此 我们添加了 四种充满活力的全屏背景材质 以不同的模糊程度影响背景内容： 超薄、薄、 常规和厚 Matthew：你可以在 watchOS 上 使用相同的 SwiftUI API 就像在你可能已经 在其他平台上使用的一样 Jennifer： 我们还添加了全屏背景渐变 你可以使用 自己的强调色来给它上色 在健身记录中 我们使用强调色来区分活动、 锻炼和站立三个相邻的标签页 这些标签页 一眼看去具有相似的布局 全屏颜色的 另一个很好的应用是设定基调 比如在睡眠 App 中 使用宁静的蓝色背景 你可以利用颜色来快速传达信息 比如在世界时钟中 我们使用太阳渐变来显示时间 你还可以 使用全屏颜色来表示状态变化 在计时器中 当计时器在倒计时 背景是黑色的 然后 明亮的橙色 表示我的鸡蛋计时器结束了 为了确保前景元素 在所有这些背景上都表现出色 我们为控件和 盘子单元格添加了鲜明的填充材质 以及在主、次、 三次和四次显著级别上 添加了鲜明的文本标签 以在排版中创建信息层次结构 我们还添加了 所有系统颜色的鲜明版本 以确保在全屏背景上的可读性 Matthew：在 watchOS 上 拥有所有这些新材质真是太酷了！ 那么在 App 中 如何将它们结合起来呢？ 我们以噪声 App 为例 我们从全屏背景渐变开始 这来自于 watchOS 10 中的新功能 “container background”修饰符 噪声 App 使用了代码中的绿色 并应用了渐变 图表的未填充柱形和 X 轴标签 使用了次要的前景样式 次要样式提供了一定的透明度 并允许背景色透过 填充的柱形和其他文本标签 使用了主要样式 这样 视图就完成了！ 当你为 watchOS 10 更新你的 App 时 你会注意到其他一些变化 系统中的展示 现在使用了全屏薄材质 这为佩戴者提供了 有关他们在 App 中所处位置的额外信息 你可以看到 这个视图下方有一层薄薄的绿色 实际上 SwiftUI 的 所有控件、标签和列表内容 都经过了更新 放置在材质背景上时看起来很棒 Jennifer：导航栏还有 一个漂亮的新变量模糊效果 这为内容在导航项下 滚动时提供了柔和的过渡 我们涉及的内容真的很多！ 我们介绍了我们的设计原则、 App 中全新的导航方式、 全新的布局 以及如何使用颜色和材质 watchOS 10 对于 Apple Watch App 的设计来说是一个重大的飞跃 Matthew：我们还有更多 关于所有这些变化的讨论！ Jennifer：请观看“认识 watchOS 10” 以获得所有新内容的概述 以及“为 Apple Watch 的智能叠放 设计小组件” 了解如何设计漂亮的小组件 Matthew：如果你已经 有了一个 watchOS App “更新你的 App 以适配 watchOS 10”就是为你准备的！ 我们将演示如何使用 我们在这里展示的所有 SwiftUI API 来更新一款现有的 App watchOS 10 之所以能够成功推出 是因为设计 和工程之间进行了深入的协作 这仅仅是一个开始！ Jennifer：真是太对了 watchOS 平台从未如此充满活力 现在是设计和构建 你的 Apple Watch App 的最佳时机 ♪ ♪