收益：
- 能够将屏幕目的和内容优先级转化为清晰的概要，并利用人工智能生成线框草稿和变体
- 能够快速评估从文本生成界面的工具的输出，并根据设计原则对其进行筛选
- 能够使人工智能线框成熟，着眼于真实内容、边缘情况和可访问性
线框是屏幕的框线级骨架，去除了颜色、视觉和品牌细节。其目的很简单：快速测试内容的优先级、布局和流程；解决“什么、在哪里、为什么在这里”的问题，而不涉及美学。低保真设计也描述了第一个粗略的草稿阶段。人工智能从根本上加快了这一步骤：从文本生成线框的工具根据一句话请求创建屏幕轮廓。但这种速度也引发了“第一个输出就是最终设计”的误解。本单元教授如何智能生成并使其成熟的人工智能线框图。
首先是简介，然后是制作
大多数糟糕的线框图都源于糟糕的概要。如果你告诉人工智能“制作一个登录屏幕”，你会得到一个通用模式。强大的线框图包括：
- 屏幕的目的：用户为什么来到这个屏幕，他能从中得到什么？
- 内容优先级：最重要的三个要素是什么？用户的目光首先应该落在哪里？
- 上下文：设备（移动/桌面）、用户当前心情、上一屏幕。
- 限制：必需的元素（免责声明、品牌元素）、空间限制。
- 变化请求：您想要看到多少种不同的布局。
当您提供此摘要时，模型会产生不同的选项来帮助您做出决定；如果概要很薄弱，那么它们都会相似且毫无用处。
提示：不要要求 AI 提供一个“完美”线框，而是要求 3 种截然不同的方法（例如“一个以列表为主，一个以图像为主，一个以单一动作为重点”）。多种选择会打开您的盲点。
从文本生成界面的工具的真实位置
近年来，承诺“编写它，界面就会出现”的工具已经变得普遍。这些会产生一个非常快的入门草案。但如果你不知道它的局限性，它就会误导你：
- 未使用真实内容进行测试：示例文本始终是理想长度；如果实际标题溢出，布局可能会被破坏。
- 没有边缘情况：空列表、长名称、错误情况通常不会绘制。
- 辅助功能不是默认设置：对比度、触摸区域、阅读顺序通常不受控制。
- 它与心智模型无关：模型产生“平均界面”，而不是用户的习惯。
正确的态度：将输出视为初稿，而不是最终设计。一个“好的”线框图是因为它已经过真实内容、边缘情况和可访问性的测试。
舞台
人工智能输出
你添加的成熟度
一阶
箱线骨架
基于内容优先级的修复
内容
理想长度样品
使用真实的、溢出的、空的内容进行测试
边缘情况
通常没有
空/错误/加载状态
可达性
未经检查的
对比度、顺序、触摸区域
串流链接
单屏
与上一个/下一个屏幕的一致性
三个迷你箱子
案例 1——三种变化，明确的决定。一位设计师要求 AI 提供 3 种不同的仪表板布局（摘要卡、表格、图表）。 15分钟内3稿到达；团队向利益相关者展示了这些内容，并在 20 分钟内做出了方向决定。如果是手工的话，3稿就要半天。
案例 2 — 实际内容扰乱了秩序。在 AI 线框图中，产品名称始终是 2 个单词。在实际的目录中，有些名字长达40个字符，超出了卡片的范围。设计师用真实数据测试后改变了布局。教训：样本内容谎言；用真实的内容进行测试。
情况 3 — 忘记空箱子。 “我的最爱”屏幕线框仅显示完整列表。新用户没有收藏夹；屏幕打开一片空白。设计师告诉人工智能“把空态也画出来”，并添加了一个引导性的空态。教训：空状态是主要设计的一部分，而不是边缘。
内容在前，框在后
线框图中最常见的误解是将设计误认为是“盒子放置”。然而，一个好的线框图是以内容为导向的：首先你决定屏幕上应该显示哪些信息以及优先级；这些盒子就是这个决定的结果。创建“内容优先级”是线框图的第一步：您按照从最重要到最不重要的顺序列出用户需要在此屏幕上看到的内容。人工智能是制定这份清单的好伙伴；当您给出屏幕的用途时，它会优先考虑可能的内容元素。然后，您将优先级转化为顺序：最重要的项目位于最显眼的位置。当这个顺序颠倒过来时——当你首先绘制一个漂亮的布局，然后尝试将内容放入其中时——用户实际需要的信息就会被推到后台。
注意：漂亮的线框可能会隐藏不正确的内容优先级。 “这个设定好看吗？”但是“最重要的信息是最先引起您注意的吗？”问。
可复制的提示
您的角色：高级产品设计师。屏幕目的：<<目的>>。设备：<<移动/桌面>>。前 3 项：<<列表>>。必需元素：<<list>>。任务：建议 3 种截然不同的线框方法（带文本，逐节）。对于每种方法：布局逻辑、优先顺序以及其工作原理。
在现实条件下测试此线框定义：<<线框文本>>。绘制或描述：空状态、长内容（溢出）、错误状态、加载状态。对于每一个，写下布局应该如何适应。
检查此线框的可访问性：阅读顺序是否有意义，触摸目标是否足够，是否只有基于颜色的信息，主要操作是否明显？一一列出问题和建议。线框：<<文本>>
为此线框生成真实的占位符内容：5 个不同长度的标题（从短到很长）、3 个空状态文本、2 个错误消息。目的：用真实内容测试设计，而不是理想内容。上下文：<<屏幕>>
弱提示/强提示
弱项：“制作主页线框。”
结果：内容优先级不明确、统一且没有边缘情况的通用框架。
Strong：“为目的 X 的移动主页建议 3 种不同的线框方法；最重要的 3 个元素是；解释每种方法的优先级逻辑；还显示空和错误状态。”
结果：可比较的、优先考虑的、现实的选择。
区别：强烈的提示给出了目的+优先级+变化+边缘情况。
常见错误
- 将第一个输出视为最终设计。 AI线框是开始；在不成熟的状态下继续进行是代价高昂的。
- 对示例内容感到满意。理想长度的虚拟文本使布局看起来错误地美丽。
- 绕过空状态和错误状态。用户看到的第一个屏幕通常是空白的。
- 把可访问性留到最后。对比度和阅读顺序是在线框阶段考虑的，以后不会修补。
- 继续进行单一变体。专注于第一个想法而不产生选择会放大盲点。
总之
线框图是测试内容优先级和流程的最便宜的方法，无需考虑美观性；人工智能极大地加速了这一阶段。关键是在制作之前给出一个强有力的简介（目的、优先级、背景、约束、变化），并将输出视为初稿。从文本生成界面的工具的输出在使用真实内容、边缘情况和可访问性进行测试之前并不成熟。像快速选项生成器一样使用该模型；你增加了成熟度和决策力。
应用任务
- 选择一个屏幕并编写一份摘要，其中包括目的、3 个最重要的元素和强制性元素。
- 使用第一个提示生成 3 种截然不同的线框方法。
- 根据第四个提示，生成真实的（短-长空）占位符内容并测试布局。
- 使用第二个提示添加空、错误和加载状态。
- 使用第三个提示执行可访问性检查并将结果发布到线框中。
清单
- [ ] 我在制作之前写了一份简报，其中包含目的和优先事项。
- [ ] 我制作了不止一种而是三种不同的变体。
- [ ] 我用真实的（长/短/空）内容测试了布局。
- [ ] 我设计了空、错误和加载状态。
- [ ] 我在线框阶段进行了可访问性检查。
- [ ] 我将输出视为初稿并使其成熟。