使用 SwiftUI 进行设计

♪ ♪

Will：大家好 欢迎来到 “使用 SwiftUI 进行设计” 我叫 Will 是 Apple 地图团队的一名设计师 稍后 我将与 我的同事 Philip 一起讨论 使用 SwiftUI 带来的 一些独特优势和应用方式 我们将从设计师的角度出发 分享关于 SwiftUI 是如何 助力我们设计过程的个人见解 我们也将提供 watchOS 10 上 重新设计的 Apple 地图 App 应用在工作中的实际示例 在 Apple 地图设计团队 我们是 SwiftUI 的忠实粉丝 它帮助我们验证设计概念 提供了其他工具所没有的独特功能 并让我们更好地理解 界面是如何构建和实现的 对于今年的 watchOS App 我们在设备上直接使用 SwiftUI 开发所有的设计 这使我们可以对间距、字体样式、 动画和交互等每一个细节进行把控 在今天的讲座中 我们想要分享 SwiftUI 如何助力设计工作 在此过程中 我们 将介绍 SwiftUI 为何是 设计师们强大而易用的工具 以及它如何 帮助设计师思索概念的细节、 设计丰富的交互、 明晰测试想法 并有效地向他人展示自己的工作 让我们从了解 SwiftUI 作为设计工具的功能开始 SwiftUI 不仅是一个 用于构建应用程序的强大框架 它还是设计师的独特且强大的工具 它使设计师能够以 更高层次的速度和精度创建界面 许多像我这样 没有编程背景的人会发现 自己能在短时间内学会 SwiftUI 并进行有成效的设计 那是因为 SwiftUI 建立在这样一个理念之上 即常见的事情简单化 而复杂的事情尽可能简化 实际上 这意味着你不需要花费时间 重新创建常见的 UI 元素 同时 在创建全新内容时 你也不会感到受限 我们可以 用另一种方式来理解这个概念 有些工具非常擅长使事情变得简单 它们降低了使用门槛 微波炉就是一个很好的例子 几乎每个人都可以使用它 它可以方便地做出许多简单的餐食 但如果我要做一顿丰盛精致的晚餐 微波炉就不是合适的工具了 其他工具则注重强大性能 它们提高了上限 使你能够做出复杂而丰富的东西 专业意式咖啡机就是个很好的例子 虽然这些机器能制作出很棒的饮品 但它们难以上手 学起来也很困难 而且像是制作一杯普通咖啡 这样基本的诉求都可能很难实现 SwiftUI 在这两种类型的 工具之间取得了平衡 它降低了简单任务的使用门槛 并提高了 创建新事物和新概念的上限 编写 SwiftUI 时 你将使 用一个名为 Xcode 的工具 近年来 由于添加了可视画布 Xcode 对设计师来说 变得更加有用 你可以实时查看和交互设计 我正在更改一行 简单的文本 调整字体大小、 字重、字符串和颜色 每次进行这些更改时 画布上的文本会立即更新

对于设计师来说 SwiftUI 的声明式编写方式 同样非常有帮助 这种语言模型基于 我们对界面构建方式的直觉 在编写 SwiftUI 时 你只需声明你想要创建的内容 对于常见元素 例如按钮 我们只需编写 Button 对于图像 我们只需编写 Image 在为这些元素设计样式时 同样简单明了 SwiftUI 提供了修饰符 就像在其他任何设计工具中一样 用于更改事物的外观 这可以是 添加例如阴影或边框这样的效果 通过独特字体更改文本格式 或通过改变属性来操控元素的布局 如改变长宽比或间距 SwiftUI 还提供了 易于访问的系统控件 如颜色选择器 以及行为 如 push 过渡

这些功能直接内置于框架中 使你能够立即使用原生功能 如果你正在使用 SwiftUI 这也意味着你现在可以访问 Apple 硬件的独特功能 稍加设置 你就可以利用 诸如触觉反馈、 音频反馈、摄像头、手势和 加速计之类的传感器等功能 你还可以利用 Apple 框架中 进行的所有工作 这意味着你可以使用 MapKit 设计动态地图 从 WeatherKit 获取实时天气信息 或使用 RealityKit 渲染增强现实中的对象 所有这些都可以在 Apple 平台上实现 因为 SwiftUI 适用于 iPhone、 iPad、Apple Watch 和 Mac 在大多数情况下 你甚至可以共享代码 并充分利用 系统元素自动适应的优势 现在我们已经从 设计工具的角度讨论了 SwiftUI 让我们来具体了解 它如何帮助你更好地进行设计 首先是关注设计的细节 现代界面是动态的 我们构建的产品包含 复杂的流程和高度交互性的元素 因此我们需要做出许多重要的决定 SwiftUI 通过快速呈现 所有需要你注意的重要细节 来提供帮助 例如 图像在加载时该是什么样子 或者按钮在按下时是什么样子 这些都是 使产品感知更加完整的要素 它们在静态设计工具中 很容易被隐藏起来 但在使用 SwiftUI 这样的动态工具时 会迅速呈现出来 这是因为 SwiftUI 使你 能够轻松地在设备上构建你的设计 在这样做的过程中 你会对你正在 制作的东西有一个更全面的了解 各个部分相交互 你可以开始评估整体的用户体验 这个过程能快速揭示 你设计中的可行之处 以及仍需要关注或优化的地方 在 Apple 地图中 我们发现这非常有帮助 当我们开始设计今年的 watchOS App 时 我们认为为用户的手腕配饰创造一个 更注重地图的使用体验将会很棒 为了测试用户的使用感觉 我们在 手表上放置了一个简单的地图视图 因为我们是在设备上进行测试 所以我们很快发现了一个问题： 数码表冠缩放地图的速度太快了

为了改善这种体验 我们在 SwiftUI 原型中 测试了多个值 调整数码表冠的灵敏度 直到找到一个感觉自然的缩放速度 改善了缩放速度后 我们开始向地图添加内容 先是兴趣点 然后是 UI 控件 最后 为了更好的呈现地图效果 我们在当前位置周围添加步行范围 帮助显示周围的事物 和大致步行所需时间 我们将这项工作带回设备 添加到我们的 SwiftUI 原型中 这显现出了需要我们关注的新问题 例如步行范围的交互 具体而言 我们觉得随着数码表冠的滚动 步行时间可能需要更多的细节 为了探索可能的效果 我们设计了几种不同的选项 我们最喜欢的是这个滚动动画 我们将其作为一个独立的 SwiftUI 原型进行开发

我们将这些独立的原型整合在一起 这引发了更多的问题 并让我们惊讶地发现 在一个看似简单的设计中 隐藏了如此复杂的细节 当我们开始设计时 起初所有这些细节都是模糊的 但是一旦我们开始制作原型 它们就变得明显起来

SwiftUI 专为现代界面而设计 它帮助我们解决特定的设计细节 并体验整体的协同工作方式 接下来 Philip 将讨论 我们最爱的话题之一：交互 Philip：SwiftUI 是一个强大的交互设计工具 有对手势、过渡和动画的一流支持 一切都让人感觉原生 因为你是在 一个真正的原生环境中工作 哪个设计师不喜欢漂亮的动画呢？ SwiftUI 中的动画性能高 易于使用 而且完全可中断 这是有帮助的 因为交互让你能够感受到 你的设计在实际使用中的感觉 而不仅仅是外观 通常 交互涉及手势 如拖动、滚动或点击 但还有其他输入源 比如硬件传感器 可以用于交互 在新的 Apple 地图主屏幕上 当你点击位置按钮时 它会激活一个指南针 当你移动时 指南针显示你当前面对的基准方向

为了解这种交互的实际效果和感受 我们创建了一个使用表内传感器进行 过渡测试的 SwiftUI 原型 其中包含一个放大的指南针

只用了几个小时 就让这个原型运行起来了 SwiftUI 使得使用 表内真实传感器变得容易 这使得指南针准确 并帮助我们完善了这个小的交互 我们想创建的 另一个交互与搜索体验相关 如果你正在 搜索一个地点 比如一家餐厅 这个新的分屏界面 会显示地图和结果列表 这个设计需要一种独特的滚动交互 在其他工具中很难实现

这是我们制作的用于体验 这种交互的 SwiftUI 原型 我们的目标是使其立即响应 同时又不过于敏感 表冠缓慢移动时 面板会做出响应 一旦达到阈值 一个新的面板会快速过渡到位 并伴随着触觉反馈

另一方面 快速移动会使用更紧凑的弹簧动画 这有助于使交互感觉灵敏 这些调整在慢速和快速滚动时 创建了一种触感恰到好处的体验 SwiftUI 在许多交互方面 提供了出色的开箱即用体验 而当你需要自定义一些内容时 它是一个功能强大的工具 可以让你进行微调 直到达到你想要的效果 然而 设计不仅仅关乎外观和感觉 还涉及到功能和实际应用 设计过程中一个容易忽视的方面是 在实际场景中测试你的设计想法 我自己也会在设计中 过于追求理想情景 使用漂亮的照片和简短的标签 总的来说 确保设计看起来尽可能完美 然而 随着设计工作的进展 了解我的设计在真实世界中的表现 并发现它们的问题非常重要 通过在真实环境中进行测试 看它们能否经受住考验 SwiftUI 使得在真实场景中 设计和评估你的工作变得简单 在 Apple 地图中 我们非常关注这一点 因为用户在各种户外条件下 使用我们的产品 SwiftUI 使我们能够将设计 带到户外并进行实时测试

例如 我们关注光线反射和阳光 对地图和界面可读性的影响 这常常导致我们在 整个 App 中调整对比度水平 以提供更清晰易读的体验

另一个我们发现很有帮助的方法是 在设计中使用真实数据 在 Apple 地图中 我们考虑到用户使用我们产品时 会遇到不同类型的地形和路线 如果你在骑自行车 或步行时使用 Watch App 新的海拔图会实时显示 你的路线海拔范围和你的进程 当我们在 SwiftUI 中构建这个图表时 我们能够导入 不同类型路线的真实数据 对于像旧金山这样 有山地路线的地区 图表的工作效果和预期一样 然而 当我们使用平坦路线的数据 像在 New York City 可能会遇到的路线 我们发现图表显示的 海拔变化看起来比实际情况更夸张 就好像你正在徒步登山一样 我们意识到需要重新审视图表 使其准确反映各种路线和海拔配置 在这种情况下 我们需要调整 Y 轴的比例 使平坦路线看起来更符合预期

另一个我们还常使用的做法是 使用 SwiftUI 创建一次性设计工具

对于之前 Will 分享的展示周围步行范围的功能 我们需要一个 在地图上恰当呈现的设计 而地图是在动态变化的 我们创建了这个小型设计工具 以更好地了解步行范围 在不同地图环境下的展示效果 在这里 我通过更改线宽、 透明度值和混合模式等因素 来探索不同的样式

像这样的小型参数化工具 使我们能够比在静态设计工具中 更高效地尝试更多的变化 它们在 SwiftUI 中可以 轻易构建并可以帮助回答特定问题 或解决复杂的难题

SwiftUI 帮助你 在真实世界的场景中进行设计 它具备多样的数据集 和对不同环境的整体理解 通过测试你的设计 你能设身处地的考量 它们在用户日常生活中的表现 还有一种 测试设计想法的方式是与他人分享 SwiftUI 是一个 可以用来展示你的工作的出色工具 它有许多很棒的方式可以分享设计 在设备上进行演示是将设计 想法具体化的一种独特有效的方法

当人们可以亲自 在手中操作和体验你的设计演示时 设计本身就能够自我解释 这有助于达成共识 减少进一步开会讨论的麻烦 在今年的工作中 我们优先考虑了 建立演示 并尽可能频繁地 将它们带到设计审查中 在这些审查中 我们将多个演示 整合到一个 SwiftUI App 中 其中包括我们之前分享过的演示 如步行范围和搜索结果 以及其他许多演示 如显示商家信息的卡片 每个人都积极参与演示互动 并提供有关体验的反馈 我们不再花时间解释设计 而是能够更多地花时间评估它们

无论是对你自己还是对团队而言 使用 SwiftUI 构建的演示 可以降低项目风险 防止混淆 归根结底 世界上没有任何一张幻灯片 能与一次精彩的演示相媲美 这是我们使用 SwiftUI 时 发现的一些优势 我们推荐你将 SwiftUI 视为一种设计工具 它可以帮助你 更好地决策和呈现设计方案 使设计更具触感和真实性 并通过设备上的 演示与他人分享设计 正是这些优势帮助我们成功设计了 watchOS 10 中全新 Apple 地图 App

我们选择用于创意工作的工具 会对最终用户的体验产生重大影响 通过在你的设计过程中使用 SwiftUI 我们相信你会发现它会带来一个 更加深思熟虑、 完整和精心打造的最终产品 而且 我们之前还没提到 使用 SwiftUI 还有一个令人惊喜的优势 当你使用 SwiftUI 时 你不仅仅是创建一个原型 你是在制作一个 App 这意味着 你可以发布你所设计的 App 你所创建的 App 不仅仅是一个设计工件 因为你使用的 是与工程师相同的材料 你可以构建并提交 App 到 App Store 与他人分享 我们期待你愿意了解 在 Apple 地图团队中我们作为设计师 如何使用 SwiftUI 的经验 如果你对进一步了解 SwiftUI 的内容感兴趣 还有很多资源等待你去探索 如果你刚刚开始接触 我们推荐你观看 讲座“SwiftUI 介绍”

感谢你的参与 ♪ ♪