默认低保真
使用简单区块、标签和占位内容，让反馈聚焦在布局和流程，而不是视觉细节。
适合网页和 App 布局
绘制落地页、移动端页面、仪表盘、表单、结账流程和管理后台。
快速迭代
在视觉细节拖慢进度前，先移动区块、复制模块并测试不同布局。
方便分享早期草稿
把线框图用于产品评审、客户沟通、工程规划和干系人讨论。
如何制作线框图
线框图优先回答结构问题：有哪些内容、放在哪里，以及用户下一步会做什么。
1
选择页面类型
根据任务从落地页、App 页面、仪表盘、表单或结账流程开始。
2
划分布局区块
用简单图形放置页头、导航、主体内容、侧边栏、页脚和关键操作区。
3
标注内容区域
用 Hero、价格卡片、筛选面板、表格、资料表单等清晰标签代替装饰性文案。
4
连接用户流程
为导航、弹窗触发、表单提交和下一页面行为添加箭头或说明。
常见线框图使用场景
落地页
规划 Hero、功能区、社会证明、价格、FAQ 和 CTA 的位置。
移动 App 页面
梳理新手引导、权限申请、资料设置、空状态和核心导航。
仪表盘
在构建数据视图前，排列指标、图表、表格、筛选器和导出操作。
表单和结账流程
提前评审字段、步骤、校验和订单摘要位置，减少体验阻力。
线框图相关资源
线框图工具常见问题
CodePic 可以免费画线框图吗？
可以。你可以免费打开线框图工具并开始编辑。只有在需要云端保存和账户功能时才需要登录。
可以使用线框图模板吗？
可以。页面主按钮会打开一个可编辑线框图模板，里面包含常见布局区块。
这个工具适合高保真 UI 设计吗？
不适合。CodePic 更适合低保真线框图，用来在详细视觉设计前对齐结构。
可以展示多个页面吗？
可以。你可以在同一画布上放多个页面，并用箭头连接来展示用户流程。
准备好草绘你的页面布局了吗？
打开免费线框图工具，编辑示例布局，在设计或开发前先厘清页面结构。
开始绘制线框图