什么是线框设计工具？

几秒钟内勾勒页面布局和 UI 原型。将按钮、文本块、图片、输入框等常见 UI 元素拖放到画布上，然后导出为 PNG 或保存为 JSON 以便继续编辑。

画布基于 fabric.js,内置一整套元素:矩形、文本块、按钮、图片占位、输入框、导航栏、卡片、复选框、下拉框、单选组、进度条、滑块,以及用来做批注的便签。缩放和适应屏幕让复杂布局也看得清,还能把画布框成手机、平板或桌面宽度。撤销、重做、群组、解组、层级前后调整都支持键盘。可导出 PNG 或 SVG 分享,也可导出 JSON 保留完整状态,下次回来继续修改。

使用方法

1. 从工具栏中选择 UI 元素（如矩形、文本块、按钮、图片占位符或输入框），点击画布将其放置。
2. 拖动元素调整位置，拉动控制点调整大小，双击编辑文字。将多个元素组合以便整体移动。
3. 将线框图导出为 PNG 图片以便分享，或保存为 JSON 格式，便于之后重新加载和继续编辑。

何时使用

• 汇报前 15 分钟画三个屏幕变体,先把方向拍出来。
• 在 Slack 群里贴一张布局草图,比文字描述清楚太多。
• 教新设计师区分低保真稿和高保真稿。

结果

一位产品经理为移动端登录页面勾勒草图：放置 Logo 占位符、邮箱和密码输入框、登录按钮以及忘记密码链接，然后导出 PNG 分享到 Slack 频道。

常见问题

这个工具跟 Figma 有什么不一样?

Figma 适合做高保真:组件库、原型、团队协作都很完整。这边刻意只做低保真,一小套基础形状,不让你陷在样式细节里。几分钟就能搭出一个屏幕想法。产出是为了对齐思路,而不是给开发交付。

怎么按像素精细移动元素?

选中元素后用方向键,每按一次移动 1 像素。按住 Shift 加方向键变成 10 像素一档。要改尺寸就拖角上的把手,按住 Shift 拖动则保持比例。

能把一个原型里的元素复制到另一个原型吗?

两边都先导出 JSON,在文本编辑器里把想要的元素片段从第一个 JSON 复制到第二个,再重新导入就能看到新形状。大多数人不会这么折腾,直接在同一个原型里用 Ctrl+D 复制就够了。

为什么 JSON 文件有时候比 PNG 还大?

JSON 把每个形状的位置、填充、描边、字体、文字内容都用可读文本存下来。PNG 是单层光栅图。文字很多的复杂原型,JSON 可能比 PNG 还大,但只有 JSON 能让你之后继续编辑。

可以自定义新形状吗?

工具内没有直接添加自定义形状的入口,但你可以把已有形状群组(Ctrl+G)成一个复用单元,比如搜索栏或者标签条。导出 JSON,把那段群组复制出来再粘到新文件里,就是一个属于你自己的迷你组件库。

相关工具