线框基础
概述
保真度应与确定性相对应：永远不要渲染出比你所拥有的已验证决策更多的精细度。线框的输出是共享理解，而非工件本身——它是一种草图/原型混合体，设计得易于制作、易于更改、易于丢弃，以便在任何人编写代码之前暴露结构性缺陷。
何时使用
- 开始任何新的屏幕、功能或产品时——在视觉设计之前，在编码之前
- 选择下一个设计产物的保真度，或决定是提高还是降低一个层级
- 挑选线框方法或工具（纸张、白板、专用软件）
- 当团队因直接跳到抛光模型而陷入像素争论时，帮助团队解围
- 在构建开始之前，让开发人员和利益相关者就结构和流程达成一致
- 不适用于： 视觉打磨——排版、颜色、品牌、动效。那是精稿/模型的地盘（共同触发 hallmark）
- 不适用于： 与用户验证精细交互细节——那需要原型，而非线框
为什么低保真胜出
- 打磨制造虚假信心。 一个逼真的设计在每个评审者看来都“接近完成”：反馈从结构转向品牌，签审发生在错误的维度上。那些从规格直接跳到抛光原型的团队，通常会浪费数月的工作，而这三轮可丢弃的线框本就能发现这些问题。线框工具故意采用手绘外观，正是为了防止这种误读。
- 省略即特性。 故意遗漏细节，让注意力落在结构、内容和流程上。一个不会被误认为是最终产品的线框会邀请结构性的批评；而一个看起来像最终产品的线框则会引来字体意见。
- 易于更改胜于易于制作。 纸面草图制作快但修改慢；原型则两者都慢。数字线框是唯一两者都快的工件——这使其在发散和收敛阶段都同样有用。
- 你脑海中的图像比你想象的要模糊。 将想法外化会暴露差距——被遗忘的状态、缺失的步骤、未处理的情况——这些在想法仅存于脑海中时是看不见的。如果第一个线框没有揭示任何缺失，那你是在复制而非思考。
- 数量是方法，而非浪费。 在皮克斯，一个90分钟的短片大约需要一万两千张故事板草图，而每部电影会制作多达十个短片——在动画开始前就有多达十二万张草图（Ed Catmull 称失败是“学习和探索的体现”）。Noma 的 René Redzepi 直言比例：每产生一个绝妙想法，需要十个想法进入。如果你期望你的第一个概念就能交付，将其视为一个危险信号，而非效率。
保真度阶梯
| 级别 | 外观 | 其所编码的确定性 | 适用场景 |
|---|---|---|---|
| 无保真 | 方框、箭头、流程图、内容列表——没有 UI 元素 | 问题和流程仍未知 | 发现：映射选项、屏幕、内容模型 |
| 低保真 | 粗糙的单色框架、不精确的线条、占位文本 | 候选结构正在形成 | 快速发散：几分钟内产生多个布局概念 |
| 中保真 | 真实的 UI 组件、真实的标题/标签/CTA、有限的调色板、Lorem 正文 | 结构已达成一致；交互正在细化 | 合并与细化、布局/组件变体、早期反馈 |
| 晚期 | 中保真 + 注释、屏幕间箭头、完整流程、示例内容 | 结构和流程已确定 | 利益相关者评审、开发者交接——必须独立存在 |
| 高保真 | 与产品无法区分，可交互 | 视觉 + 交互决策已锁定 | 现在是原型/精稿，而非线框——不同的工件，不同的规则 |
仅当当前层级旨在回答的问题已被回答时，才向上移动一级：流程在布局细节之前得到验证，布局在组件选择之前达成一致，结构在任何逼真度之前获得签审。
当以下任一情况发生时，降低一个层级：
- 评审者对颜色、字体或间距发表评论，而非结构——对于当前决策而言，工件渲染过度了
- 争论是关于缺失的功能或流程顺序，而非你面前的屏幕
- 一个概念走入死胡同，或新的需求出现——廉价地重新开始，不要昂贵地翻新
- 你发现自己在流程尚未确定之前就开始调整像素
如果利益相关者要求“高保真线框”： 那是在要求精稿或原型。将其作为单独的工件构建——不要膨胀线框，否则你会失去其易于更改的特性。
线框在流程中的作用
数量在发散阶段扩大，在收敛阶段收缩——而保真度仅在决策锁定时才提高。收敛并非一个平滑的漏斗：应交替进行小型收敛/发散步骤（Pugh 的受控收敛），让新变体从评估幸存者中涌现出来。
| 阶段 | 保真度 | 线框数量 | 退出标准 |
|---|---|---|---|
| 发现 | 无保真 | 许多片段 | 屏幕、流程和内容已列举；选项已映射 |
| 定义 | 低保真 | ≥3 个不同概念 | 团队可以争论结构而无需争论视觉 |
| 设计 | 中保真 | 1–2 个合并的幸存者 + 变体 | 一个结构已达成一致；交互和导航已解决 |
| 构建/交接 | 晚期 | 完整的注释流程 | 开发者可以在作者缺席的情况下据此进行构建 |
- 发现阶段——无保真。 目标：将想法从脑海中拿出来，并利用涌现出的东西产生更多想法。流程图、屏幕连接图、内容占位符。使用最快的工具快速行动；更多的起始想法绝对更好。如果你在这里添加 UI 细节，那你是在一个想法上花费了太多时间——退后一步。
- 定义阶段——低保真。 在收敛到任何一个概念之前，为每个问题生成 ≥3 个结构上不同的概念。通过概念引发的对话来评判它，而非其工艺。打破设计工件必须看起来完成的无意识规则。
- 设计阶段——中保真，“合并与细化”。 不要仅仅提升上一轮的最爱——合并几个概念的优点，并在不确定性中多停留一轮时间，比感觉舒适的时间更长。引入真实的文本和真实的组件；保持有限的调色板，使细节保持可控。开始处理屏幕到屏幕的导航和每个屏幕的交互，在组件级别包含变体。
- 构建/交接阶段——晚期。 为新的受众进行优化：同事和利益相关者，而非你自己。添加注释，用箭头连接屏幕，包含工作流中的每个屏幕，并且仅在关键或新颖的交互处添加细节。线框必须在没有作者在场的情况下也能被理解。此阶段的危险：依恋——领域专家和开发者必须仍然能够自由地评判、裁剪和否决它。
什么造就了一个好的线框
通过线框所引发的东西来评判它，绝不要通过它有多像最终产品来评判。
- 它在存在之前就回答了三个问题。 在文件的第一页写下：谁使用它（人物或具体角色——“管理员”、“捐赠者”）？他们的目标是什么（以用户需求来表述——没人想要注册；他们想保存进度）？它解决什么问题（当前痛点、竞争对手的差距）？一个针对定义不明确的问题的出色解决方案，不如一个针对定义明确的问题的体面解决方案。跳过这条笔记是整个过程中影响最大的错误。
- 它经过了迭代。 好的线框是许多轮迭代的幸存者，而非打磨过的初稿。将每个版本视为可丢弃的；愿意删除是质量的引擎。
- 它暴露了差距。 一个向你展示了缺失状态、步骤或用例的线框，已经为自身付了费。开放性是一个特性：它促使进行构思以填补这些差距。
- 它邀请行动。 添加注释，故意让某些区域看起来未完成，突出与当前产品的差异和最不确定的区域。细节预算：当传达所需的工作量超过受众需要知道的信息时，就停止。失败的反馈是“好吧——现在怎么办？”；成功的测试是，下一个人可以拿起它并在没有你的情况下继续推进。
选择工具
- 唯一强制功能：不得中断流程。 正确的工具应以想法产生的速度将其可视化。早期阶段：笔/纸或白板与软件完全有竞争力。
- 如果使用软件，需要： 一个标准 UI 组件库（以便中/晚期阶段的线框映射到开发者可以构建的东西）——且需要避免微调：没有像素尺寸，没有 CSS 属性，没有交互行为。这些选项是构思过程中的打磨诱饵。
- 功能更强 ≠ 更好。 约束驱动速度和创造力；一个能渲染真实产品的工具会诱惑你这样做。
- 工具应与阶段匹配，而非偏好： 单独发散 → 对你来说最快的任何东西，包括纸张；小组构思 → 白板（物理或数字），以便每个人都能绘制；任何需要修订、共享或注释的内容 → 数字线框工具；任何交互性的东西 → 你已经离开了线框领域，请使用原型工具并明确说明。
- 团队参与测试： 如果只有设计师能操作该工具，那么对于早期阶段来说，它就是错误的工具——线框之所以有效，是因为每个人（PM、开发者、利益相关者）都能创建和编辑它们。
必填上下文
- 待定的决策是什么——保真度是针对决策选择的，而非抽象选择。
- 什么是已经验证的，什么仍是开放的。保真度不得超过确定性。
- 谁将下一个评审它，以及他们会将精细度解读为什么含义。
- 它需要存续多久——一次性探索还是持久的参考。
- 谁需要编辑它——如果非设计师必须贡献，工具选择范围会缩小。
评估流程
- 写下谁/目标/问题笔记。如果你做不到，停止——那本身就是发现。
- 命名待定的决策，以及能够回答它的最低保真度。
- 对照阶梯检查确定性：是否有任何内容渲染得比它所决定的更完成？
- 统计概念数量。在定义阶段如果少于三个，你还没有进行发散。
- 阅读你收到的反馈：对字体或颜色的评论意味着工件渲染过度了——降低一个层级。
- 确认工具在构思过程中没有提供像素或 CSS 微调功能。
- 在分享之前，检查它是否能在没有你的情况下独立存在。
输出格式
待定决策：<此工件必须回答的内容>
谁 / 目标 / 问题：<三个答案>
保真度：<级别>——因为确定性是 <已验证的内容>
探索的概念数：<n> (在定义阶段 ≥3)
工具：<选择>——因为 <速度 / 可编辑性 / 谁必须贡献>
下一个级别何时：<解锁向上移动的条件>
快速参考
| 场景 | 规则 |
|---|---|
| 新功能或产品 | 从无保真/低保真开始；收敛前 ≥3 个不同的概念 |
| 不确定使用何种保真度 | 使保真度匹配确定性；有疑问时，使用更低级别 |
| 反馈是关于字体/颜色的 | 工件渲染过度——降低一个保真度级别 |
| 结构已同意，细化交互 | 提升到中保真：真实组件、真实标签、有限调色板 |
| “让它看起来真实”的请求 | 分离精稿/原型；绝不膨胀线框 |
| 交接给开发者 | 晚期：注释、箭头、完整流程、独立存在 |
| 第一个想法感觉是赢家 | 危险信号——生成另外九个 |
| 第一轮完成，一个最爱 | 跨概念合并和细化；在锁定之前再次发散 |
| 后期添加多少细节 | 仅关键/新颖的交互；在收益递减处停止 |
| 在绘制任何东西之前 | 在第一页写下谁 / 目标 / 问题 |
| 挑选工具 | 不中断流程的最快工具；组件库，无微调选项 |
| 非设计师想贡献 | 把工具交给他们——低保真度是为每个人提供绘制的许可 |
| 评审者问“这是最终设计吗？” | 保真度校准有误——使工件更粗糙或重新定义评审 |
| 早期向最终用户展示概念 | 低保真/中保真适用于结构和流程问题；原型仅用于交互细节 |
| 项目在编码开始后摇摇欲坠 | 线框在此时已不便宜——在编码之前先为下一个变更绘制线框 |
反模式
| 错误 | 修复 |
|---|---|
| 规格 → 抛光模型 → 代码，没有构思 | 探索 ≥3 个低保真概念；在投入逼真度之前测试结构 |
| 在探索期间打磨（字体、颜色、像素） | 一种颜色，粗线条，在结构签审之前无样式 |
| 一轮之后提升最爱 | 合并几个概念的优点；交替收敛/发散 |
| “高保真线框” | 那是原型/精稿——作为单独的工件构建 |
| 线框需要其作者来解释 | 注释、屏幕连接箭头、流程的每个步骤都包含在内 |
| 为多屏流程只线框一个屏幕 | 线框从入口到出口；间隙存在于屏幕之间 |
| 跳过谁/目标/问题笔记 | 在第一个方框之前在第一页写下三个答案 |
| 对后期阶段线框产生依恋 | 它是想法的期末考试，而非奖杯——让专家裁剪它 |
| 利益相关者签审品牌 | 首先在低保真度下评审结构；无论你有意与否，保真度都表示完成度 |
| 在构思阶段使用带有像素/CSS 微调功能的工具 | 切换到纸张或仅限组件的线框工具 |
| 在中保真阶段到处使用 Lorem Ipsum | 真实的标题、标签和 CTA；正文才使用 Lorem |
| 一个概念的三个外观变体 | 改变结构（布局、流程、层次），而非装饰——否则它只是一个概念 |
| 仅收敛漏斗，没有重新发散 | 每次裁剪后，允许对幸存者进行一次小的发散（受控收敛） |
| “为了让他们理解”而添加交互性 | 交互性使其成为原型——改为注释行为 |
| 将线框视为可交付物 | 理解是输出；文件是载体 |
配套技能
| 场景 | 共同触发 |
|---|---|
| 定义问题 |
…
[为翻译截断]