制作低保真线框图
线框图的价值是用低成本探索结构,而不是展示最终视觉。默认提供 3 个方向;用户指定数量或只需要一个流程时尊重其要求。
1. 明确探索目标
确认对象、用户目标、设备、既有约束、不可缺少内容、方案数量和主要变化轴,例如布局、密度、步骤、导航或 CTA 位置。需求过于开放时先给出 2–3 个可选探索轴。
2. 统一低保真语言
- 只用黑、白和少量灰阶,不引入品牌色。
- 使用系统无衬线字体,不让用户过早讨论字体个性。
- 内容区用带标签的方框表示,图像使用条纹或明确尺寸占位符。
- 文案只保留结构所需长度,不假装已经完成最终内容。
- 可以使用矩形、线条和简单图标等低保真 SVG,但所有元素应保持同一抽象层级。
3. 制作有实质差异的方案
各方案应在布局、信息密度、流程结构、CTA、导航或交互模型上不同。先写明每版的核心假设,再绘制,避免三版收敛成近似布局。
单屏方案放在一个并排画布中;流程方案用每版 3–5 屏的 storyboard。通常从稳妥到大胆排序。
4. 就地标注取舍
每版旁边放 2–4 条短注释,说明优势、代价和需要验证的问题。注释与图同处一个文件,不另建难以对应的说明文档。
5. 捕获决定
用户选择后记录采用的方向或混合方案、喜欢与拒绝的具体原因,以及新出现的约束。将这些决定作为高保真或原型阶段的简报,不在线框图上继续做无意义视觉抛光。
示例
输入:“先给结账页画三个线框方向。”
**输出:**在一个灰阶画布中展示单栏线性、双栏固定订单摘要和折叠式分步流程三版,每版附带 2–4 条取舍说明,并建议选定方向后再制作交互原型。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布,详见 LICENSE.txt。