这个模板适合做什么
这个线框图模板帮你在写代码或制作高保真设计之前，快速把任何页面的布局结构画出来。用它规划内容区块、导航模式、表单字段和按钮位置，用低保真的方式让团队对页面结构给出反馈，而不是一上来就纠结配色和字体。线框图是验证布局是否合理最快的方式，也是发现问题成本最低的阶段。
适用场景
- 在交给视觉设计师之前，先画出落地页布局，确定内容层级。
- 为客户演示绘制移动端核心页面和导航流程。
- 在数据开发开始前，先画出仪表盘布局，确定各数据组件的位置。
- 设计多步骤结账流程，在开发前找出体验摩擦点。
- 规划带侧边导航的管理后台，提交干系人审核。
- 制作低保真原型用于用户测试，不需要开发任何实际功能。
使用步骤
- 1从主页面开始，划分主要内容区域：页头、主体、侧边栏、页脚。
- 2用占位文字和图片框表示内容密度，不需要填写真实文案。
- 3根据平台类型画出导航元素：顶部导航、侧边栏、标签页或底部导航栏。
- 4标出主要操作按钮，并注明点击后会发生什么。
- 5用箭头连接相关页面，表示用户从一个状态跳转到下一个状态的路径。
简单示例
落地页线框图
和相似工具的对比
线框图 vs 视觉稿（mockup）
线框图是低保真的——灰色方块和占位文字——专注于布局和结构。视觉稿是高保真的——真实的颜色、字体、图片——专注于视觉设计。先用线框图和团队验证结构，结构锁定后再做视觉稿。跳过线框图直接画视觉稿会让结构决策在没有压力测试的情况下定型。
线框图 vs 原型
线框图是静态的。原型是可点击的——可以在屏幕之间跳转感受流程。线框图回答「每个屏幕上有什么」。原型回答「屏幕之间的流程合不合理」。早期用线框图评审布局；用户测试之前做原型。
低保真 vs 高保真线框图
低保真线框图用粗略形状和占位文字——做得快、丢得快、邀请团队批评结构。高保真线框图用真实内容、精确比例、规范 UI 组件——做得慢但适合需要利益相关方签字确认的场景。前期想点子用低保真，交付前用高保真。
常见误区
过早陷入细节
花一小时选线框图灰色的具体色值是打错了仗。线框图关注的是结构和层级，不是视觉精修。用灰块、基础字体、占位内容。如果线框图开始看起来像成品设计，你已经越过线框图阶段了。
漏掉边界状态
只画 happy path 的线框图，团队对空状态、加载状态、错误状态、内容溢出（超长姓名、无搜索结果、网络错误）毫无准备。每个屏幕都要画空状态、加载状态、至少一个错误状态——大部分 UX bug 藏在这三种状态里。
画像素而不是用户目标
线框图应该回答「用户能不能完成他的任务」。如果你说不清楚用户在这个屏幕上想做什么，最终产出的 UI 技术上正确但实际没用。每个屏幕顶部标注一句话用户目标。
组件不一致
每个屏幕的按钮形状大小都不一样，说明线框图是逐屏在画，而不是当作一个系统。定义一个小组件库（主按钮、次按钮、卡片、列表项）跨屏幕复用。这个纪律强制结构一致性。
常见问题
什么是线框图？+
线框图是用户界面的低保真草图，展示每个屏幕上元素的布局——按钮、输入框、文本块、图片——不包含颜色、字体或最终内容。它是设计的结构骨架，用于在投入视觉设计之前验证布局和流程。
线框图、视觉稿、原型有什么区别？+
线框图是低保真静态布局；视觉稿是高保真静态视觉设计；原型是交互式的，可以点击跳转。多数项目按这个顺序走：线框图锁定结构、视觉稿锁定外观、原型验证流程。
线框图应该包含什么？+
元素布局、内容层级、导航、关键 UI 组件（按钮、输入框、列表）、每个屏幕做什么的注释。跳过颜色、字体选择、最终文案——它们会让你从结构评审分心。
一个 App 需要画多少线框图？+
主用户旅程里每个独立屏幕一张，最关键的几个屏幕再各加一张重要的边界状态（空、错误、加载）。简单流程通常 5-15 张；复杂 App 30-50 张。如果发现自己画到 100+ 张，说明设计需要拆成模块，每个模块有自己的线框图集。
可以免费在线画线框图吗？+
可以。打开 CodePic 线框图模板，把图形原语拖到画布上排布屏幕。手绘风格特别适合早期线框图，因为它在视觉上传达「这只是草图」，邀请团队评审结构而不是挑视觉细节。可导出 PNG、SVG 或分享实时链接。
在线开始编辑
在 CodePic 中打开模板后，替换示例节点，就能很快整理成自己的学习导图。
