认识 Apple Watch Series 7

Deena Khattab： 大家好 我叫 Deena Khattab 是 Apple 设计团队的 一名设计师 稍后我的同事 Jennifer 和 Matthew 会一起加入我们 我们很高兴能够讨论 Apple Watch Series 7 的设计过程 但在开始之前 我们先来快速了解一下新功能 Apple Watch Series 7 提供了两种新的尺寸： 41 毫米和 45 毫米 两款手表都配备了比以往更大的 有效内容区域 41 毫米是 176 × 215 点 45 毫米是 198 × 242 点 Apple Watch Series 7 的显示屏边缘采用了曲面 形成了一种微妙的包裹效果 屏幕周围的边框 比以往版本都更薄 更加不明显 另外 屏幕的角半径 比以前的设备更大 了解了这些关键的硬件差异 我们就确定了用于塑造 UI 的 三项有用的设计原则 Series 7 的内容区域在 我们的手表当中是最大的 我们扩大了 UI 组件以充分利用 增加的空间来增强实用性 我们仔细研究了版面和颜色 以便在 watch app 中 创建更清晰的层次结构 Apple Watch 一直旨在提供轻量级 一目了然的体验 我们检查了导航和寻路 现在通过迅速扫一眼 可以获得更好的位置感 总之 Apple Watch Series 7 的 app应该更大 更清晰 更加一目了然 在下一部分中 Jenn 将会介绍如何 使用更新后的 UI 元素 在您自己的 app 中 体现这些原则 Jennifer Patton：谢谢 Deena 我们从布局边距开始说吧 因为边角的弯曲度比较大 所以内容需要来回滚动 才能很好地适应边角 状态栏变得更高 与屏幕底部更高的 滚动间隙边距相匹配 由于活动显示区域和 硬件外壳之间的边框缩小 我们可以辨识出 靠近屏幕边缘的内容 Series 7 的 布局边距很宽敞 这样就为内容提供了充足的显示空间

Matthew Koonce： 谢谢 Jennifer 大家好 我是 Matthew 我们来用“股市”作为示例 看看在 watchOS 上 怎样有效利用边距 首先我们来去除已经应用的边距 大家可以看到 这种布局有几个问题 我们离近点看一下 第一个问题是当前股价的文本 它离显示屏的边缘太近了 这在 Apple Watch Series 7 的包裹式显示屏上 可能会是个问题 第二个问题是文本“Nasdaq” 它被显示屏的边角截断了 另外 导航栏前缘的 文本对齐也没有了 我们来看看如何使用 一些 SwiftUI 代码 来解决这些问题 这里我有一个“股市” 布局中的代码片段 它是一个简单的 VStack 首先我们可以通过使用 .scenePadding 修饰符 来调整当前价格视图的布局 该修饰符会为布局边距 应用系统定义的 padding 大家可以看到 这样就解决了当前价格视图的布局 我们在下面的 “Nasdaq”文本上 使用相同的 .scenePadding 修饰符

这又一次解决了我们的布局问题 并且恢复了我们需要的对齐方式 请注意我们没有将 修饰符应用于日图表 有些内容 比如这张图表 非常适合显示到显示屏的边缘 .scenePadding 修饰符仅限用于 文本内容会发生变形 或被显示屏边缘截断的情况 Jennifer：今年我们在 watchOS 中引入了大标题 以使 app 更醒目 提供更好的位置感 并在 app 中建立 更清晰的层次结构 滚动表格视图时 将会出现这个大标题 类似于 iOS 上的大标题 标题会在滚动时过渡到状态栏 根级别和子视图将会获得大标题 “设置”很适合作为例子 来说明如何在 app 中 使用大标题来定义清晰的位置感 在不会滚动的固定视图中 像“计时器”这样的 我们需要寻找机会 将视图的标题带入内容区域 并带出状态栏 或者在不需要的地方 将它完全移除 将视图的标题 与“返回”按钮导航分开 对于另外一些固定视图 状态栏仍然是 显示标题信息的最佳位置 例如这个世界时钟详细信息示例 大标题尤其是受到了 Series 7 上提供的 更大有效内容区域的启发 但它们在以前的 40 和 44 毫米设备上表现也很好 Matthew： 利用 SwiftUI 为您的 app 配置大标题很简单 在 watchOS 8 上 所有导航标题默认为大标题 并且通过 app 的强调色来着色 如果您不想在某个 特定视图上使用大标题 则可以使用 .navigationBarTitleDisplayMode 修饰符 在应用此修饰符后 您的层次结构中的任何后续视图 都将会继承上面视图的显示模式

Jennifer： 颜色旨在辅助寻路 信息层次结构 并表明您 app 的个性特征 在这个“正念”示例中 青绿色强化了 app 的 标识和体验 我们使用系统青绿色 作为 app 的关键颜色 并且恢复了系统灰色拼盘背景颜色 以打造更加柔和的效果 列表视图 app 在手表上很常见 在这个“邮件”示例中 蓝色背景的使用 强调了您是在“邮件”app 中 而不是在另一个使用类似 导航模式的 app 中 在这个示例中 亮黄色拼盘在视觉上将“提示” 与“体能训练”等其他轮播 导航 app 区分开来 它还加强了“提示”在我们 所有平台上提供的连续体验 Matthew： 您可以在素材资源目录中 配置 app 的强调色 在这里设置了颜色后 所有的导航栏都会 自动使用这个颜色 在开发者文稿中可以找到有关 配置强调色的更多信息 此外您自己可以 在 SwiftUI 中 使用 .accentColor 修饰符轻松使用颜色 在“邮件”中 我们将 listItemTint 设置为 app 的强调色 不透明度设为 30%

Jennifer：在为 Series 7 手表进行设计时 我们还仔细研究了 按钮和按钮形状 当前的按钮系统看起来是这样的 我们有圆角矩形按钮 会在滚动视图中出现 我们还有一组固定的按钮 它们只出现在不会滚动的 固定视图中 它们固定在屏幕的底部 旨在完善屏幕的形状 对于 Series 7 我们在 包含滚动按钮和非滚动按钮的 同一基本系统上进行了扩展 我们简化为常见的 辅助按钮配色方案 并排按钮已从分割菱形的形状 转换为并排胶囊的形状 这里的几个示例显示了 更新后 app 中的按钮 左边是“闹钟”列表中的 主要滚动按钮 右边是 UIPickerView 中的并排按钮 我们来仔细看看这些 固定按钮的形状 我们精心设计了 Series 7 的 按钮形状 这个示例显示了 使用简单胶囊形状的视觉效果 看看底部按钮的平面 如何随着显示屏的 曲度产生张力 这是精心设计的按钮形状 我会再尝试一次 变化是微妙的 但是从显示屏本身的形状 衍生出按钮的形状 会使得这些按钮固定在 屏幕底部 并且将无法与手表的 硬件协调一致 更新后的按钮也将会再回到 Series 7 之前的设备上 按钮的高度将会保持不变 因此无需更新布局也可以应用 将这些新按钮用于现有的 UI Matthew：我们已经将 SwiftUI 中所有的按钮 更新为新的 Apple Watch Series 7 外观 在大多数情况下 这种更新都会自动进行 在您的 app 中不需要进行更改 虽说如此 有几件事需要牢记 在定义按钮时 例如这里看到的“取消”按钮 SwiftUI 会为您 应用一些默认的修饰符 默认情况下 watchOS 上的按钮 使用带边框的按钮样式 和自动边框形状 自动边框形状的意思是说 边框形状会根据不同情况发生变化 在滚动视图之外 该形状是一个胶囊 例如这些“取消”和“开始”按钮 在滚动视图中 按钮的形状为圆角矩形 例如“添加闹钟”按钮 另外还有一种 被称为“边框式突出”的 替代按钮样式 这种样式会将 app 的强调色 应用于按钮 正如我们在“闹钟”中的做法 这样赋予按钮更显眼的外观 从而立即吸引您的注意

Deena：在下一部分中 我们会讨论版面更新 Series 7 使用的默认字体 大小与 Series 6 相同： 大号字用于 40 毫米和 41 毫米 特大号字用于 44 毫米和 45 毫米 因此与以前的设备相比 我们可以显示更多的字符

我们还使用字体改进了辅助功能 添加了三个更大的字体大小 这是采用默认字体大小的 “邮件”app：特大 这里采用的是新的 AX1、AX2 和 AX3 为了帮助那些想在他们的 手表上使用更大字体的用户 我们增加了“智能字体建议” 在设置流程中 您的手机现在会识别 您是否应用了大字体设置 并且会为您的新手表 建议类似的字体大小 这个功能更便于 从一开始就使用您首选的字体大小 在专注于版面的同时 我们还建议为文本标签 补充 SF Symbols 如果 app 使用基于 列表视图的导航 我们建议在您 app 的强调色中 使用外框符号 例如“邮件”和“电话” 这有助于改进跨平台的 一致性和辅助功能 请尽可能在不同平台中 都应用一致的 符号样式和颜色 有关 SF Symbols 的 更多信息 请观看 WWDC21 的 这些研讨会 接下来我们将重点介绍 Apple Watch Series 7 上的 新键盘和文本输入功能 由于有效屏幕区域变大了 我们添加了全键盘 对于这个专为 Apple Watch 设计的键盘 我们不在按键周围绘制边框 这有利于滑动打字 同时避免了可能错过 点击目标的感觉 为了让可用的打字空间最大化 我们将删除键从键盘上 移到了文本字段中 另外 利用键盘 您可以为某些用例 自定自动填充字体 例如密码和双重认证 除了键盘支持外 我们还改进了 文本输入方面的功能 左右配件可以 使用 SF Symbols 来进行自定 我们建议对这两个符号 都使用 app 的强调色 以强调可点击性 对于输入字段占位符文本 和建议的列表标题 则使用描述性词语 有关键盘和文本输入的更多信息 以及如何在您的 app 中 充分利用好它们 请观看这些 WWDC21 研讨会 我们为您介绍了如何 通过场景 padding 自动化按钮形状 和分层导航 来充分利用新显示屏的潜力 有关为 Series 7 进行设计的更多资源 请观看 WWDC21 的 “watchOS 8 中的新功能” 和“SwiftUI 中的 新增功能”