认识 watchOS 10

♪ ♪

Taylor：大家好，我是 Taylor， 是 Apple 设计团队的 一名设计师。 我们很高兴推出 watchOS 10， 这个自八年前 Apple Watch 面世以来最重大的改变。 在这个讲座中，您会了解 watchOS 10 的新功能， Apple 设计团队如何设计 我们自己的 App 和系统， 以及您可以如何应用这些设计模式 开发您自己的 Apple Watch App。 让我们开始吧。 2014 年，我们推出了 Apple Watch， 一款我们设计过的最个性化的产品。 您总是把它带在身边，就戴在手上。 基于这一点， 我们为 Apple Watch 设计了多种 个性化的表壳 、表带和表盘。

即使是在最极端的环境下， Apple Watch Ultra 也能正常工作，伴您左右。 穿戴设备有几个特殊限制， 屏幕较小，输入能力有限， 交互时间较短。 这都要求我们创造新的交互方式。 比如数码旋钮， 我们要把 App 设计得 精简、动态、灵敏。 自那时起， Apple Watch 不断发展， 屏幕更大，亮度更高， 无缝地贴合表壳的曲度， 蜂窝网络连接， 拥有可随时唤醒 屏幕的全新健康传感器 以及全功能 App 都让 Apple Watch 的性能更强大。 在 watchOS 10 中， 我们引入了全新的用户界面， 使 Apple Watch 能充分利用 这些现代的、高亮度的屏幕 和性能更强大的连接硬件。 只需转动数码旋钮， watchOS 10 就会智能化地 在表盘上呈现出您所需的小组件。 主屏幕更容易操作。 旋转数码旋钮 就能纵向浏览统一排列的 App。 您可以在在任何界面 点击侧边按钮打开控制中心， 点击两下可打开钱包。 我们重新设计了每一款 App， 专注于让 App 简单明了 控制和切换操作统一 我们遵循严谨有序的设计过程， 以清晰的设计原则为中心 设计 watchOS 10。 您也可以在 设计 App 时应用这些原则。 Apple Watch App 应该专注于 为用户提供实用性服务。 每块屏幕都应该优化， 做到一目了然，操作简单 控制和切换应该清晰稳定。 与初代 Apple Watch 相比， Apple Watch Series 8 和 Apple Watch Ultra 屏幕更大，更圆润。 为了让 App 切换更稳定 更一目了然， 我们建立了新的布局方式， 能呈现出每一个 App 的设计。 这个新系统基于屏幕的形状， 决定了控制、标签和内容的 大小和位置。 这使 App 布局更统一 控制更清晰、更符合人体工程学。 为了使不同的内容适应屏幕， 我们设计了三种基本布局： Dial、Infographic 和 List。 这三种布局都自动适应 watchOS 10 支持下 不同尺寸的 Apple Watch。 watchOS 10 中的 App 也合理利用大量背景内容， 提供额外的信息， 比如 World Clock 里的当地时间， Weather 中的当前天气状况 或者股票价格的上涨和下跌。 例如，在“健身记录”中， 每个活动、锻炼和站立健身记录圆环 都有对应的背景颜色， 使用背景颜色可以帮助用户导航 或辅助他们识别正在使用的 App。 在 watchOS 10 中， 背景内容应该起到支持作用， 提高实用性， 而不仅仅是为了视觉效果。 背景内容可以是简单的颜色、渐变， 也可以是一个传达额外信息的动画。 考虑使用颜色来帮助用户 获得更好的场所感，

除了背景内容， watchOS 10 整个系统 还引入了新材质。 独特而实用的层次结构 利用半透明效果来建立层次关系， 帮助用户了解他们在系统 或 App 中的位置。 这些新材质最大化了内容的空间， 同时让系统元素如 Status Bar 在内容滚动到其下方时 仍然可见。 此外，使用语义系统颜色的元素 在明亮的背景材质上显示时， 会自动调整其对比度。 watchOS 10 也引入了 全新导航模式： 垂直分页、源列表 以及优化后的分级导航， 让 App 导航操作 更简单、更一致。 数码旋钮是我们设计的 一个独特的输入机制， 满足了这样小的产品的需要。 导航的时候手指不会遮挡屏幕。 在 watchOS 10 中， 数码旋钮用于导航到 App 以及在 App 内部导航。 在基于列表的视图 例如“邮件”中，您可以旋转数码旋钮 纵向滚动浏览收件箱或邮件消息。 对那些有许多界面的 App， watchOS 10 引入了 一个新导航模式、垂直分页。 在“健身记录”中使用数码旋钮 在健身记录圆环总览 和活动、锻炼和站立环的 各个视图之间导航， 垂直分页能很好地 将您 App 中的多个信息视图分割成 针对特定用途的不同页面。 页面指示符在数码旋钮旁边显示， 以适应所有屏幕背景并保持可见。 有时，一个元素会在 App 的 许多页面出现。 比如在“健身记录”里的健身记录圆环 或 Dials 里的秒表。 通过调整页面间元素的 比例、 位置和信息密度 来实现流畅的动画效果， 而不是在每个页面上 引入额外的元素实例。 这种物体恒存有助于 为用户在浏览全屏内容页面时， 提供视觉锚点。 一般来说， 我们建议将单个页面的内容 限制到屏幕高度， 这样能让每个页面都 清晰、不同且一目了然。 但是也会出现特定情况， 比如内容需要超过屏幕高度。 一个例子是 Messages， 它包含两个页面， 一页是置顶对话， 另一页包含与其他人或群组的对话。 第一页是固定高度， 最多可以容纳 9 个置顶对话。 第二个页面是一个垂直滚动的视图， 在变成活动页面后会垂直滚动。 在“通讯录”中， 联系人卡片的第一页 会有一张清晰的照片和常用操作。 第二页是一个滚动视图， 包含不太常用的联系人详细信息。 我们建议在您的 App 设计中， 谨慎使用页面内的滚动视图。 如果可能的话，请把它们 只放置在固定高度页面之后。 在 Apple Watch 中， 请使用垂直分页而不是水平分页， 因为垂直分页更容易导航。 在列表或页面之间 不需要数字表冠导航的情况下， 数字表冠可以很好地 帮助您检查 App 内的数据。 在 World Clock 中旋转数字表冠 可以调整所选位置的时间， 让用户可以将 不同时间与当前时间对比。 World Clock 还在 watchOS 10 中 使用了分屏浏览， 以引入新的导航模式和源列表。 在基于源列表的应用中， 用户在包含相同类型信息的多个实体的 详细视图之间导航。 这些 App 打开到详细视图， 用户可以点击左上角的源列表按钮 来切换实体。 例如 World Clock 中的不同位置， 传统的分级导航仍然支持。 但您应该谨慎使用。 只有在您的 App 无法以两级源列表或独立的垂直页面 简洁地显示内容时才使用。 “设置”和“邮件” 能很好地适用深层分级导航。 watchOS 10 引入了新的层级导航动画， 使用户在浏览 App 的层次结构时， 清楚知道他们正在导航到哪个视图。 优秀的 watchOS 10 App 功能专一， 简洁地传递信息， 一目了然，操作简单。 要设计一款出色的 watchOS 10 App： 专注于 App 的作用 功能要高度专一， 导航简单，使用标准的导航模式， 尽量使用较少的页面传达信息， 使用标准的布局、控件、 标签尺寸、语义化色彩命名 以及材质。 如果您想进一步了解如何设计 watchOS 10 App， 请查看 “在 watchOS 10 中 设计和搭建您的 App” 和 “在 watchOS 10 中 更新您的 App”， 我们也有专门讲 小组件和智能叠放的讲座。 watchOS 10 是一项庞大的工作， 需要设计和工程团队中 许多人和专业领域的合作。 但这只是个开始， 我们等不及要看您的 App 为 Apple Watch 带来的创新了。 ♪ ♪