专为 Apple Watch Series 4 设计

Apple Watch Series 4 涵盖了 对设计者和开发者而言 都十分卓越的增强 Apple Watch Series 4 拥有 更大尺寸的全新显示屏 以及新的 API 和性能改进 使得你的 App 可以为用户提供 更加丰富的信息和操作 你需要在创建或更新 App 时 考虑这些新的尺寸 Apple Watch Series 4 比之前的 Apple Watch 系列尺寸更大 它们有两种表壳尺寸 分别是 40 毫米和 44 毫米 而之前的 Apple Watch 系列 表壳尺寸分别是 38 毫米和 42 毫米 38毫米 Apple Watch 的显示尺寸是 272×340 像素 42毫米 Apple Watch 则是 312×390 像素 Apple Watch Series 4 的显示尺寸大幅地提升 40 毫米款式的显示尺寸为 324×394 像素 44 毫米款式的则为 368×448 像素 不仅显示面积更大 四周的边框也更薄 使得交互元素更易观察 让信息变得更加丰富 更身临其境 你需要考虑所有的显示尺寸 无论显示屏尺寸如何 你的 App 都应该向用户传递相同的信息和操作 在考虑你的布局时 请注意 40 毫米尺寸的 Apple Watch Series 4 的实际显示尺寸 与之前系列的 42 毫米 Apple Watch 非常相似 相比而言 新款 40 毫米 Apple Watch 的 显示尺寸宽了 12 像素 高了 4 像素 从表壳尺寸来看 40 和 42 毫米的 Apple Watch 处于所有型号的中心 如果你将屏幕布局的目标定在这里 那么你应该确保你的布局规模 可以缩小到 38 毫米尺寸 且扩展到 44 毫米尺寸 developer.apple.com 上的“设计资源” 包含资源和模板 可以帮助你为所有 4 种尺寸的 Apple Watch 进行设计 请注意 有些 watchOS 的界面元素 需与的 Apple Watch 的尺寸成比例 模板包含这些元素的大量集合 按照 Apple Watch 的尺寸进行整理 以确保你的模型尽可能精确到像素级别 现在我们来谈谈 这些全新的显示屏将如何影响你的屏幕布局 新显示屏最显著的不同就是它的形状 就像 iPhone X 一样 Apple Watch Series 4 采用了圆角设计 在外壳的弯角处 形成了对称的外观 WatchKit 将帮助你 处理文本和控件 以便你的 UI 可以出现在 视图中的最佳位置 WatchKit 元素将适应新的显示屏 在顶部 你的 App 的状态栏 将适配圆角设计 和以前版本的 watchOS 一样 时钟会出现在每个屏幕上 你的 App 可以使用标题区域 提供一个有用的标题 describing the purpose 来描述屏幕的用途 这两个元素都将缩进 并且这个缩进将创建左边和右边的边距 从而垂直扩展 App 中的显示内容 这些都是“系统最小布局边界” 图形元素和按钮背景 应该扩展到这些边界之外 向着两边的边缘延伸 直到所谓的单像素边距 也就是默认情况下延伸到屏幕的两边 文本应该对齐到左侧边界 从状态栏中的文本的左侧边界展开 考虑到滚动视图中的角落 内容区域的 顶部和底部设有空白区域 这些区域被称为滚动空白区域 当用户完成滚动操作时 它们可以确保文本和按钮 被完全移动到视图中 例如 滚动视图底部的一个按钮 将停留在空白区域上方的安全区域 如果你使用的是全屏 SpriteKit 或 SceneKit 场景 那么你需要使用边距和内嵌 将内容推动到视图中 最佳的观看体验是简单且可浏览的 所以在你的 App 中 应该有一些视图是有意的单屏幕设计 而不是滚动视图 举个例子 如果你想确保 一个按钮被放在空白区域 而不被系统推动 你可以通过在 Xcode 中 设置一个属性来实现 在视图的属性检查程序中 你可以选择“固定在屏幕边缘” 从而确保该视图中的内容不会滚动 从而确保该视图中的内容不会滚动 下面让我们谈谈为 Apple Watch Series 4 更新你的 App 你的 App 将运行在 Apple Watch Series 4 上 甚至你还没来得及为 watchOS 5 重新编译它 40 毫米尺寸的 Apple Watch上的 显示面积是 38 毫米尺寸 44 毫米尺寸的 Apple Watch上的 显示面积是 42 毫米尺寸 你的 App 需要显示在显示屏的中心 从用户的角度来看 你的 App 需以合理的方式展现 为 watchOS 5 重新编译你的 App 将允许它占据 全部的新显示屏 只要你在执行 WatchKit 元素时 指定的是它们的容器 而不是固定的宽度 那么你的 App 就会扩展并填充 Apple Watch Series 4 上的额外屏幕空间 这会让你的用户在使用时 更有沉浸感和参与感 如果你的 App 包含一个 全屏 SpriteKit 或 SceneKit 场景 那么你需要确保场景中的文本和控件 在 Apple Watch Series 4 上被正确渲染 你应该访问“系统最小布局边界” 以确保你的内容从屏幕的左边缘到右边缘 被正确的嵌入 也应该访问“内容安全区域嵌入信息” 以确保当用户滚动屏幕时 文本和行动在 Apple Watch 的 内容区域中被正确设置 Apple Watch Series 4 引入了新的触觉反馈 与 Digital Crown 的旋转相呼应 为 Apple Watch 带来了更具触感的体验 默认情况下 当 Digital Crown 旋转时 触觉感受或轻震便会产生 因此 常见的用户交互 比如滚动或在选择程序中选择一个项目 将会传递给用户触觉反馈 你应该通过 Apple Watch Series 4 上的 这个全新的触觉反馈 评估 App 的用户体验 用户习惯于统一的触觉体验 所以如果在你的 App 中 UI 中的事件与 Digital Crown 的旋转相协调 那么你就需要确保这些 UI 事件 符合这些新的触觉效果 接下来 让我们讨论 watchOS 5 中 引入的新文本样式 以及 Apple Watch Series 4 上 Dynamic Type 的实现 在 watchOS 5 中 Dynamic Type 库已经扩展到 涵盖四个新的更大的尺寸 大标题和标题 1 2 和 3 提供了更多的方式 以确保内容和操作在屏幕上可见 在你实现和测试这些样式时 请记住 不同的默认内容类别 对应于不同的表壳尺寸 Small 是 38 毫米尺寸的默认类别 Large 对应 40 毫米和 42 毫米尺寸 XLarge 则对应 44 毫米尺寸 虽然 Apple Watch 可能含有 不同的默认设置起始值 但每一个尺寸的 Apple Watch 都提供了相同的设置范围 以适应广泛的用户设置 遵循这些样式 将确保你的 App 可以 符合预期地交付给所有用户 最后 让我们讨论 Apple Watch 项目中 与可视化资源相关的一些增强 现在 你可以通过使用 PDF 来简化图像的生成 从而实现跨设备尺寸的高分辨率缩放 如果你准备的图像缩放系数为 2 并将它们保存为 PDF 格式 那么你就可以创建一个 用于所有 4 种尺寸 Apple Watch 的文件 当你将这个 PDF 资源放入 Xcode 时 将其放入 Watch 项目的资源目录中 并将资源放入 Universal 2x 的方框中 然后在属性检查程序中 将自动缩放属性调整为 “自动” 当显示在 38 毫米尺寸的 Apple Watch 上时 你的图像将缩小 9% 而在 44 毫米尺寸的 Apple Watch 上显示时 它将增加 10% 最后要注意的是 对于 44 毫米尺寸的 Apple Watch 的 UI 需要准备两个新的 App 图标尺寸 这些新图标将用于 Short Look 通知和主屏幕图标 这些图标的指南和尺寸 可以在“设计资源”中 为 Apple Watch Series 4 更新的模板中找到 在来自 WWDC 的视频 “watchOS 5 的新特性”中 还有对 watchOS 5 特性的全面介绍 这个视频“设计资源” 以及“人机界面指南” 均可以在 developer.apple.com 上查阅