使用 Xcode 中的智能体创建 UI 原型

你好 我是Sam 我是Apple 设计团队的原型设计师 人们在整个生态系统中 喜爱的许多交互体验 都是不断迭代 反复试错 和精心调整的成果 由于制作一款App 从未如此简单 有意识地设计 对于脱颖而出至关重要 这就是原型设计的用武之地 原型设计是一种流程 让你能够快速尝试 各种不同的设计想法 它比以往任何时候都更重要

今天 我将介绍如何使用 Xcode 中一些出色的新工具 来应对你在App 开发早期可能遇到的设计挑战 让你能够从这样 一个粗糙的初稿界面 变成一个有目的性 量身定制且独特的设计

我将展示如何在 Xcode 中 使用 Agent 在开发过程中 寻找有创意的起点 然后 如何引入真实内容 让你的App充满生活气息 最后 我将介绍一些技巧 来调整App中的 关键时刻和交互体验 在开始之前 重要的是 你需要先熟悉 Xcode 中两个强大的功能 我们来一起了解一下 第一个是编程 Agent 编程 Agent 让你只需描述 想要构建的内容 就能将想法变为现实 首先 点击新建对话按钮 然后简单表达你想要 实现的代码更改或功能

剩下的由 Agent 来完成

第二个是 Xcode 预览 Xcode 预览让你无需每次 更改后都重新构建并运行 即可可视化并与界面交互 要使用预览 你首先需要确保 你的 Swift 文件中 已指定预览视图 如果你不知道那是什么 别担心

点击显示画布按钮 即可进入 Swift 预览 你应该立刻看到预览 编程 Agent 与 Xcode 预览相结合 让你能够超速推进 关键页面和关键时刻的原型设计 使你的App充满用心和惊喜 更棒的是 由于 Agent 生成的 是真正的原生代码 你可以在继续开发App时 直接沿用这些代码 不要将关键决策交给这些工具 归根结底 你的任务是运用 自己的判断力 为使用你App的用户 打造你认为最佳的体验 将编程 Agent 视为 原型设计过程中的协作者 帮助你探索最佳体验 记住 最终决定权在你 现在 让我们从探索 界面可能性开始 假设我想开发一款App 来管理一个读书俱乐部 如果你和我一样 就只想快点开始 使用 Xcode 中的 Agent 你可能会忍不住说 "创建一个管理 定期聚会读书俱乐部的界面" 这可能会快速生成 一个有趣的结果 但提示语太模糊 会带来一些问题

Agent 生成了一个任意的布局 虽然它可能仍然有效 但这只是组织 此类App的众多方式之一

它还对App功能做出了猜测 因为提示语中没有明确定义 假设我们对投票功能 或照片库不感兴趣 这就很容易陷入 或锚定在一个有缺陷的起点上 例如 我们现在被困在 这个任意的导航元素上 它或许更适合另一种功能集

当我们调整界面以显示 所需功能时 可能会出现功能蔓延 看起来笨重且缺乏美感 为了避免这种情况 你的提示语需要更加具体 花点时间思考清楚 你希望App从一开始就具备 哪些功能和关键要点 关于你的App以及 你希望它解决什么问题 你可能比 Agent 更清楚该从哪里开始 提供风格线索 如果你对App想要营造 的氛围或感觉有直觉 就在提示语中表达出来 例如 对于读书俱乐部 你想要营造咖啡馆的 温馨氛围和色调吗 还是你想突出 纸张质感和优美排版的感觉 最后 也是最重要的 请求多个选项 早期阶段是你评估和探索 多种不同方向的最佳时机 以下是一个更好的提示语示例 如果你想仔细阅读 可以暂停一下

我首先要求多种变体

我明确了所需功能 并确保每个变体 都有自己命名的 Swift 预览 瞧！ Xcode 中的编程 Agent 根据提示生成了10种不同的方案 我可以像这样在它们之间切换 依此类推

编程 Agent 生成了这个 名为 Club Hub 的标签页结构版本 这个名为 Cozy 的变体 使用了系统 New York 字体 并为当前书名和会面地点 设有清晰的专属区域 它还创建了一个有趣的版本 用赛道比喻来追踪进度 这个名为 Editorial 的版本 排版也非常出色 布局非常简洁 Blueprint Atelier 从网格视图 导航到详情页面

而这个嘛……算是试一试 你可能会发现自己喜欢 不同生成方案中的不同元素 在这种情况下 后续的提示语 要说明你觉得哪些变体有潜力 以及你想将哪些具体元素 与其他变体混搭 这将帮助你找到 自己满意的方向 对于读书俱乐部App 我将在提示语中首先列出 我最喜欢的各个生成变体的功能 同样 我要求每次迭代 都有自己的 Swift 预览和独特名称 Agent 仅使用我感兴趣的元素 创建了一些新的混合方案 包括排行榜 和当前书目封面图的创意

享受这个过程吧 简而言之 广撒网 混搭 反复迭代

大量创建变体 看看哪些组件或想法 能给你带来灵感 Xcode 中编程 Agent 最强大的 能力之一就是 能够不知疲倦地 产生新颖有趣的概念 对于我的读书俱乐部App 我走上了一条精炼之路 从这个受 Cozy Club 变体启发的设计 到融入赛道视觉元素的版本

再到这个采用中性外观的版本 再到这个简化并减少 冗余的版本 我认为这是一个 值得迭代的好方向 现在我对App的结构有了 更清晰的想法 可以开始关注 交互性和进一步的优化了 接下来 我将介绍如何 通过引入真实内容 让你的App充满生活气息 在App开发早期 让不同的人试用并给予反馈 是引导你精炼过程的好方法 但对于某些类型的App和界面 你可能还需要一段时间 才能让它达到可以让用户 用自己内容试用的状态 幸运的是 Agent 可以帮助扮演 使用你App的用户角色 让你感受到App 在真实使用时的感觉 结合你引入的图片 Agent 能够帮你从这种 只有松散内容填充的空白模板 变成丰富、有生活气息 且更接近真实使用的状态 以下是让App 充满生活气息时的一些提示技巧 首先 这是一个反复出现的主题 不要只要求一个预览 而是要求多个预览 其次 停下来自己思考边缘情况 例如 在我的App中 如果还没有安排任何会面 详情区域应该如何显示 尽量具体说明界面的 哪些状态需要迭代 以降低 Agent 遗漏某些内容的风险 确保有足够的上下文 使示例内容对你App的 目标用户来说是合理的 在这种情况下 这意味着我需要确保 示例App内容 例如讨论话题 都围绕书籍展开 注意那些可能无限增长的界面元素 俱乐部成员数量 消息对话的长度 之前读过的书目数量等等 还可能包括长文本输入等情况 文本截断是否合适 还是应该换行显示 如果适用 请要求编程 Agent 确保它编写的示例内容 可在独立文件中复用和读取 这样你需要时可以进行修改 以下是我可能使用的示例提示语 我确保具体说明 我能想到的边缘情况

确保这些示例模型易于修改 并且可以在未来的原型中复用 最后 每个变体都有自己的 Swift 预览并有描述性名称 方便我在修改时参考 以下是 Xcode 呈现的结果 每个变体都有自己的标签页 我可以快速在它们之间切换

在这个示例中 我发现没有 真正的空白状态界面 没有指定新书目 甚至无法管理账户的方式 我通过添加账户管理 和行动召唤控件来解决这个问题 在这个变体中 我注意到 非常长的下次会面描述 可能会遮挡书籍封面 我通过允许截断来解决这个问题 事实上 我意识到书名 与封面重复了 所以我将其简化

在这里我注意到 当参与者太多时 排行榜会变得太长 需要滚动很长时间才能 看到讨论内容 于是 我可以确保用户 始终能看到自己的相对排名 并通过展开控件查看完整列表

看到界面响应这些精美书籍封面后 我受到启发 尝试让 详情页的视图适配这些封面的色彩 这些只是将真实内容 引入界面的一些示例 可以帮助你更好地理解 用户可能如何体验你的App 记住 没有什么比真实世界的使用 和来自实际用户的反馈更有价值 但这是在原型设计流程 反馈阶段抢先一步的好方法 现在我将专注于调整 动画和交互的关键时刻 到目前为止 我已经介绍了 Xcode 中的 Agent 如何帮助你 迭代界面的静态元素 例如导航和控件 字体和颜色 然而 SwiftUI 赋予你超越静态的能力 进入交互、动画和转场的世界 这些可能有点难以做到完美 所以我将展示几种常见的 动画风格和技巧 帮助你完美调整App中的关键时刻 第一种动画风格是缓动 在这种动画风格中 对象会轻柔地加速、减速 或两者兼有 你可以选择动画持续的时长 弹簧动画 顾名思义 模拟了受弹簧力吸引的 对象的特征运动 它有三个可调整的参数 刚度、阻尼和质量 除了动画之外 你的界面中 还可能遇到其他动态元素 当用户拖动并与某个元素交互时 它应该有多少感知重量 这就是摩擦力和惯性 我们来看看

在这个 Music App 示例中 当我关闭这个表单时 我感受到了一种重量感

设备运动 你的App如何响应来自 加速度计和陀螺仪等传感器的 设备运动 例如在 Wallet 中 我的 Apple Cash 卡 展现了这种彩虹色视差效果

还有触感反馈 你的App如何使用触感反馈 来传达关键时刻或特殊模式 例如 Find My 中的触感反馈使用

提示我正在靠近 我试图定位的物体 在这个App中 关键时刻 与动画有关 所以我专注于此 当我调整动画时 每个值都会带来略微不同的感觉 我怎样才能快速确定 适合这个界面的值呢 一种方法是使用 Xcode 预览 修改代码中的相关常量 这种方法效果不错 但有时我感兴趣的常量 分散在代码的不同部分 频繁切换上下文会感觉很笨重 你可能会发现创建一个 专门用于调整界面 特定参数的自定义界面更为方便 以下是一个简单的界面 来演示这个原则

这里我只是将一个界面元素 投向一个目标 以理解这种交互中 弹簧属性的不同表现 菜单按钮会弹出一个调整面板 让我尝试不同的参数

Xcode 在这里能给你极大的帮助 不要直接构建界面 而是让 Agent 帮你构建一个 用于显示可调参数的界面 当你向 Xcode 中的 Agent 请求帮助构建界面调整面板时 以下是一些最佳实践 尽可能详细地说明 你想要迭代的内容 你是在探索不同的动画风格 还是弹簧曲线的具体参数 你的动画是否涉及多个元素 或者是包含元素进入和离开 视图层级的转场 为了让调整面板易于理解 请要求将动画分解为多个阶段 这也为你和 Agent 提供了 关于动画特定部分的共同词汇 例如 这个动画分为两个阶段 第一阶段 视图转场到详情页面 第二阶段 每一行后续内容 以错开的时序依次动画呈现

认识到调整面板有多种用途 不仅用于调整动画参数 还可用于切换App状态 颜色、字体样式或视觉偏移 最后 尝试指定一个调整面板布局 在较宽的窗口尺寸中 将界面并排显示 这样你可以切换界面设置 并查看效果 无需切换上下文 例如 这个创建了遮挡内容 调整面板的布局 在较大窗口中显示时是这样的

现在我发现这个转场有些问题 我怀疑这与延迟 和错开入场时序有关 让我们把它调整到完美 以下是一个可以使用的示例提示语 在概述中 我指定想要 一个调整面板来管理动画 我指定了动画的各个阶段 我指定了感兴趣的参数和选项 并确保预览可以 与界面并排显示 而不是以笨重的模态框形式出现

Agent 给了我一个可以切换的视图 如弹簧示例一样 但那样很笨重 而且我的视图会被遮挡 不过 通过点击这个调整大小控件 我可以在更大的画布上 调整我的转场效果

现在我可以轻松地调整动画 而无需在调整面板 和界面之间来回切换 我创建了单独的控件 让我可以单独检查动画的每个阶段 我可以快速了解这些不同参数 如何影响我的动画

我认为需要减小 与延迟和错开入场相关的值

我们也来试试弹性预设动画风格

好的 感觉真的很棒 书籍封面转场后触发的 动画序列感觉流畅而令人愉悦 让我们再看一遍

这是在 Xcode 中 使用编程 Agent 进行原型设计 最强大的工作流之一 每当你需要管理视图的 多种配置或在不同动画 或交互参数之间做选择时 创建一个调整面板 缩短反馈循环 找到对你的App而言最理想的效果

今天我介绍了很多内容 核心主题是不要将 Agent 视为设计师 而是将其视为协作者 帮助你为App打造 最佳可能的体验

我相信你会想到 更多将编程 Agent 引入 你工作流程的创意方式 要了解更多 请观看视频 "Xcode、Agent 与你" 记住 这些工具归根结底 是为了帮助你为使用 你App的用户找到最佳体验 关键所在是你的判断力 谢谢