UI线框与原型向导

先想清楚再动手：避免“上来就画高保真”

很多团队在规划新页面或功能时，容易跳过信息架构阶段，直接在 Figma 里摆视觉稿。结果是：页面目标没对齐、交互路径不明确、信息层级混乱，后期改动成本高。UI 线框与原型向导要解决的问题很具体——在进入高保真前，用低成本的线框框架把“页面里放什么、用户怎么操作、状态如何变化”说清楚。

它如何工作：核心能力与关键步骤

这个技能的思路不是替你画完，而是用一套常规指南引导你完成线框规划。核心能力包括：

• 用占位块表达信息区与功能区：比如标题、列表、表单、按钮，先不纠结样式，只看结构是否合理。
• 标注导航与关键交互：用文字说明点击哪里会跳转到哪里，或某个操作会触发什么状态变化。
• 区分内容区、操作区、状态区：让每个区域的用途一目了然，避免功能堆叠。
• 给出响应式断点建议：提前考虑不同屏幕宽度下布局如何变化。

工作流程也分为四步：

1. 梳理页面目标与核心操作
2. 画线框布局
3. 标注交互与状态
4. 在 Figma 中转高保真

适用边界与注意点

这个技能的输出是线框框架，不是视觉成品。它适合规划布局、对齐信息架构、标注交互跳转，但不适用于需要高保真视觉与动效的场景，也不提供可点击的真实原型。高保真的可用性测试仍需要在 Figma 或专业工具中完成。

如果你需要在早期阶段快速对齐思路，它比直接做高保真更稳；如果你要做的是交互原型或视觉设计，它只能作为前置参考。