收益：
- 能够按照用途、组件、四种状态（加载/空/错误/满）、设计系统和可访问性的顺序为 Jetpack Compose 和 SwiftUI 生成健壮的接口代码
- 通过从一开始就定义可访问性、正确的标签、足够的对比度和适当的触感，能够生成对所有用户开放的界面。
- 能够通过读取中心主题的颜色和空间来创建一致的多语言和浅色/深色主题就绪界面
移动应用程序的成功很大程度上取决于其用户界面（UI - 用户看到和触摸的屏幕）和用户体验（UX - 使用起来有多流畅和愉快）。用户看不到糟糕的代码，但在第一秒就感觉到糟糕的界面。人工智能在界面开发中发挥着两个强大的作用：一方面，它生成设计思想、流程和文本（UX写作）；另一方面，它生成设计思想、流程和文本（UX写作）。另一方面，它直接将此设计转换为工作界面代码。在本单元中，我们将学习如何使用 AI 生成快速、可访问且一致的界面，重点关注现代声明式界面工具 Jetpack Compose (Android) 和 SwiftUI (iOS)。 “声明式”意味着您不是逐步解释如何绘制屏幕，而是描述“这就是屏幕在这种情况下的外观”；该工具会完成剩下的工作。
从设计到代码：正确的顺序
让人工智能“做出漂亮的屏幕”是模糊的，因为“漂亮”是无法衡量的。良好的界面生成遵循以下顺序：
- 目的和内容。屏幕有什么作用，显示什么信息，用户会做什么？
- 组件列表。标题、列表、按钮、表单字段等部分。
- 情况。正在加载、空（无数据）、错误、已满——四种基本屏幕状态。
- 设计系统。颜色、排版、间距规则；一般符合 Material 3 (Android) 或 iOS 的人机界面指南。
- 可访问性。屏幕阅读器标签、足够的对比度、触摸目标尺寸。
- 代码。说了这么多，Composable 或 SwiftUI View 的生成。
最常被跳过的步骤是第三步。开发者只考虑“完整”状态；而在实际应用中，用户大多会遇到“正在加载”和“错误”的情况。将所有四种状态打印到人工智能是强大界面的秘密。
提示：在提示末尾添加“分别生成加载、空、错误、满”。这一句话使您的界面为现实世界做好准备，并显着减少 QA（质量测试）阶段的错误数量。
可访问性是不容协商的
可访问性——有视觉、听觉或运动障碍的用户使用应用程序的能力——既是一种道德责任，也是一种商店和法律期望。如果需要，人工智能可以生成可访问的代码；如果不需要，则返回无标签、低对比度的界面。三个经验法则：为每个交互元素提供一个对屏幕阅读器有意义的标签（contentDescription /accessibilityLabel）、文本和背景之间足够的颜色对比度（至少 4.5:1 比例）以及至少 48x48 dp/44x44 pt 的触摸目标。明确地询问 AI 这些事情。
注意：AI 还可以在装饰图标上添加长辅助标签；这会让屏幕阅读器用户因不必要的喋喋不休而不知所措。纯粹的装饰元素应该“隐藏以防止访问”（允许屏幕阅读器跳过）。回顾制作的标签：让有意义的说话，让装饰保持沉默。
一致性：设计体系和主题
专业应用不使用随机的颜色和间距；遵循设计系统（标准的颜色、字体、间距和组件集）。如果你给人工智能你的主题值（主色、次要颜色、圆角半径、版式比例），所有屏幕都会保持一致。如果不这样做，每个屏幕都会使用不同的蓝色阴影，并且应用程序会看起来很混乱。最有效的方法是首先要求 AI 生成主题/设计令牌文件，然后将所有屏幕绑定到该主题。
主题
糟糕的方法
强硬的做法
颜色
手动对每个屏幕进行颜色编码
中心主题，屏幕读取主题
情况
只有“全屏”
加载/空/错误/已满四种状态
可达性
稍后添加
它从一开始就在权利要求中定义
文本
嵌入代码中
独立源，多语言就绪
三个迷你箱子
案例 1 — 已保存空案例。新闻应用程序团队让人工智能打印各个屏幕状态。由于“空闲状态”屏幕（“尚未保存新闻”），70% 的用户测试参与者并未将应用程序留在空白屏幕上；在之前的版本中，黑屏仍然是白色的，用户认为它“坏了”并离开了。小副本可以提高保留率。
案例 2 — 对比拒绝。一个团队向 App Store 提交申请，屏幕上的文字为浅灰色（品牌颜色）。由于对比度低，苹果公司以可访问性为由发出了警告。当 AI 被告知“将文本与背景的对比度提高到 4.5:1 以上”时，颜色变暗，问题就解决了。如果一开始就提出要求的话，就不会耽搁了。
案例 3 — 装饰标签噪音。一位视障测试人员报告称，每个装饰图标（“线”、“点”、“阴影”）都会在人工智能生成的屏幕上大声朗读，导致屏幕无法使用。当装饰元素被隐藏起来，无法访问时，屏幕阅读器体验变得流畅。教训：可访问性意味着“正确的标签”，而不是“太多的标签”。
弱提示/强提示
弱提示：“设计个人资料屏幕。”
强大的提示：“为 iOS/SwiftUI 生成用户配置文件屏幕。内容：头像、姓名、电子邮件、‘编辑配置文件’按钮、设置列表。状态：加载（骨架）、错误（重试按钮）、完整。设计：非材质，符合 iOS HIG；系统颜色，动态类型。辅助功能：每个元素的可访问性标签，隐藏装饰图标，触摸目标最小 44pt。从单独的文件读取主题值，不要在屏幕上嵌入颜色代码。首先绘制组件树，然后导出代码。”
可复制模板
屏幕生成模板：“为[平台/工具]生成[屏幕名称]。内容：[元素]。用户操作：[操作]。分别生成四种状态：加载、空、错误、满。设计系统：[Material 3 / iOS HIG]，从主题令牌读取。辅助功能：标签、对比度 >=4.5:1、触摸目标标准。”
主题/设计系统模板：“为我的应用程序生成中心主题定义（[Compose Theme / SwiftUI 中的设计标记结构]）：- 主颜色 [十六进制]、次要颜色 [十六进制]、错误颜色、表面颜色 - 版式比例（标题、正文、描述） - 间距比例 (4,8,16,24) - 圆角半径标准添加浅色和深色主题支持。”
辅助功能审核模板：“检查此屏幕代码的辅助功能：1) 是否有任何未标记的交互元素？2) 对比度是否足够？3) 触摸目标是否足够大？4) 装饰元素是否对屏幕阅读器隐藏？针对每个问题提出修复建议。[代码]”
设计到代码模板：“我描述了以下设计：[屏幕描述或屏幕截图]。将其转换为 [Compose/SwiftUI] 代码。保持间距和对齐符合设计，但添加所有四种状态。”
常见错误
- 只是考虑整个情况。大多数时候，真实用户会看到加载/错误屏幕。
- 在代码中嵌入颜色和空间。如果主题不是中心，就会失去一致性并且维护变得困难。
- 把可访问性留到最后。稍后添加的成本很高；如果从一开始就提出要求，这是免费的。
- 过度标签。阅读装饰元素也会破坏屏幕阅读器的体验。
- 在代码中嵌入文本。当需要多语言支持时，需要手动更改每个屏幕；将文本分开。
- 期待屏幕截图的精确副本。人工智能设计产生约。像素精度手动设置。
综上所述
AI在界面制作方面很强大，但需要指导。正确的顺序：目的、组件、四种状态（加载/空/错误/满）、设计系统、可访问性，然后是代码。可访问性是不容协商的，意味着“正确的标签”，而不是“太多的标签”。为了保持一致性，请从中心主题中读取颜色和间距，不要将其嵌入代码中。坚强的意志从一开始就定义了这一切；因此，该界面已为现实世界、商店审批和所有用户做好了准备。
应用任务
使用设置屏幕的“屏幕生成模板”，向 AI 请求 Compose 或 SwiftUI 代码并请求所有四种状态。然后使用“辅助功能检查模板”检查相同的代码。查找并修复至少一项可访问性改进（缺少标签、低对比度或小触摸目标），并记下您认为在实际使用中最常出现的状态（正在加载/空/错误）。
清单
- [ ] 我在提示中明确了显示的目的和组成部分
- [ ] 我分别生成了四种状态（正在加载/空/错误/满）
- [ ] 我从中心主题中读取了颜色和空间，我没有将其嵌入代码中。
- [ ] 我从一开始就想要辅助功能标签和对比度
- [ ] 我确认装饰元素对屏幕阅读器隐藏
- [ ] 我将文本分开，准备多种语言