在离产品设计不太远的地方工作过的人，都听过这三个词出现在同一句话里：「先出个线框图」「视觉稿给我看下」「原型能测了吗」。人们把它们混着用，但它们是设计流程里三个不同的阶段——搞混了会导致团队在线框图评审会上争论按钮颜色，这跟墙还没砌好就吵该刷什么漆一样高效。
以下是每个词到底是什么意思，带例子。
线框图：建筑蓝图
线框图回答一个问题：什么东西该放在哪里？
它是低保真的结构草图。没有颜色（最多就是灰度）。没有真实图片（就用带叉的方框替代）。没有精细排版。线框图是界面的建筑平面图——它展示房间和门口在哪，不展示家具和墙面漆。
好的线框图关注：
- 布局和空间层级
- 导航结构
- 内容优先级——用户第一眼看到什么、第二、第三
- 用户流程——人怎么从一个页面走到另一个页面
它们故意省略视觉设计，让讨论保持在结构层面上。当有人说「这个按钮能不能做成蓝色的」，在线框图评审阶段的标准回复是「颜色到视觉稿阶段再说——现在我们得先确定这个按钮到底该不该在」。
团队经常在白板上画线框图，或者用简单的工具。CodePic 的线框图模板给了你一个画布起点，带了常见的 UI 组件，你可以拖拽、缩放，不用纠结像素——因为在现阶段，完美是速度的敌人。
视觉稿：视觉设计
视觉稿回答：它看起来是什么样子的？
这是线框图穿上衣服的阶段。颜色、真实字体、真实图片、间距、阴影、图标——一切让界面看起来做好了的东西。视觉稿是一张静态图片。它看起来像产品，但点击它什么都不会发生。
视觉稿在设计流程里承担两个目的：
- 在开发之前让干系人在视觉方向上签字
- 给开发者一张清晰的「要建成什么样」的图
关键词是静态。如果有人问「我能点一下试试吗」，那他们正在看的不是视觉稿——或者说，不该是。视觉稿是用来看的，不是用来交互的。
原型：可交互的模拟
原型回答：用起来感觉怎么样？
原型会响应点击、触摸、手势。它背后可能没有真实数据——按钮可能跳到一个写死内容的页面——但交互流程是真的。你可以把一个原型交给一个真实用户，看他在里面怎么操作。
原型分两个等级：
- 低保真原型： 线框图连起来。丑但快。适合在投入一周视觉设计之前测试用户是否理解流程。
- 高保真原型： 视觉稿加上交互。看起来和用起来都像真的。用于可用性测试、干系人演示、以及工程开动前的最终规格。
团队最常见的错误
错误一：线框图评审会变成设计批判大会。 如果有人在对你的线框图的灰度发表评价，你做的不是线框图评审——你是在一个半成品上做视觉评审。刻意让线框图看起来像草图，让讨论留在结构层面。
错误二：线框图还没定就上手做视觉稿。 这是设计里最贵的错误。你花三天打磨了一个高保真视觉稿，展示给团队，有人说：「等等——导航为什么在左边？」现在你是在高保真里重新设计，而不是在线框图里移动几个方块。永远先验证结构，再投入视觉。
错误三：把视觉稿叫做原型。 客户说「周五之前给我原型」，实际想要的是一个能拿给老板看的静态视觉稿。这是不同的交付物，有不同的目的。开动之前先对齐。
你到底需要哪个？
只要线框图：项目早期，需要在任何东西之前让团队在结构上对齐。白板上手绘的线框图能省掉接下来好几周的偏航设计。
线框图 + 视觉稿：干系人需要在开发之前对视觉方向签字。常见于客户项目、品牌敏感产品、以及任何「外观」和「功能」同等重要的项目。
线框图 + 原型：需要在对视觉投入之前验证用户流程。适合产品团队测试新功能——你在花时间把它做美之前就知道交互逻辑通不通。
三者都要：复杂改版、新产品、或者任何「把设计做错在代码里修会很贵」的项目。
总结
线框图——方块和线条。回答「什么放哪」。用来对齐结构。
视觉稿——颜色和像素。回答「长什么样」。用来做视觉签字。
原型——点击和跳转。回答「感觉怎么样」。用来和真实用户测试。
它们不是三选一——是同一个流程的三个阶段。从粗糙开始，在结构上拿到共识，再加细节。设计最贵的不是做视觉稿——是因为没人对齐线框图而重做视觉稿。
