线框图示例

下面这些案例展示了设计师和产品团队最常画的几类界面线框图：落地页、应用页面、仪表盘和多步骤流程。每个案例都用占位块和标签说明结构，不会让人把草稿误认为最终设计。

使用这个模板返回模板页

真实案例

SaaS 落地页

使用场景: 产品市场人员或设计师，规划新功能页面布局

[页头] Logo + 导航 + 注册按钮

[Hero] 标题 + 2 行副文案 + 演示按钮

[口碑] 5 个客户品牌 Logo

[特性] 3 列：图标 + 标题 + 2 行描述

[使用步骤] 3 步数字流程

[定价] 3 个套餐卡 + FAQ 手风琴

[页脚] 链接 + 邮件订阅

这样组织的原因: 先画落地页结构，能避免一个常见问题：各区块单独设计都好看，但整体页面没有清晰的视觉层级。

移动端新手引导流程

使用场景: UX 设计师，规划移动应用的首次使用体验

页面 1：欢迎 + 开始体验 CTA

页面 2：权限申请（推送通知）

页面 3：个人信息填写

页面 4：兴趣选择（标签芯片）

页面 5：首页（空状态）

这样组织的原因: 把引导流程画成逐页线框图，能清楚地数出新用户需要完成几个步骤，也更容易发现哪些步骤可以删掉或推迟到后面。

数据分析仪表盘

使用场景: 产品经理或开发者，设计内部数据工具

[顶部栏] 日期选择器 + 导出按钮

[KPI 行] 4 个指标卡：收入、用户、流失、NPS

[图表行] 折线图（左 60%）+ 饼图（右 40%）

[数据表] 可排序表格 + 分页

[侧边栏] 筛选面板 + 复选框

这样组织的原因: 先把仪表盘网格结构画出来，能防止工程师把图表做得很漂亮，却因为布局问题被埋在页面底部没人看到。

电商结账流程

使用场景: UX 设计师或开发者，降低购物车放弃率

第 1 步：购物车确认 + 优惠码输入

第 2 步：收货地址表单

第 3 步：配送方式选择

第 4 步：支付信息

第 5 步：订单汇总 + 下单 CTA

确认页：订单编号 + 后续步骤说明

这样组织的原因: 逐步画出结账流程，能一眼看出步骤是否过多——用户在付款前需要做超过四个决策时，转化率通常会明显下降。

带侧边导航的管理后台

使用场景: 开发者或设计师，搭建内部工具

[侧边栏] Logo + 导航菜单 + 用户头像

[主内容区] 页面标题 + 操作按钮

[数据表格] 列头 + 筛选器 + 批量操作

[弹窗] 点击表格行触发的编辑表单

这样组织的原因: 在线框阶段就把侧边导航和主内容区分开，能提前明确哪些导航项是全局的、哪些是特定页面的，避免后期侧边栏越堆越乱。

文章/博客页面布局

使用场景: 内容策略师或开发者，搭建 CMS 模板

[页头] 站点名称 + 导航

[封面图] 全宽

[标题 + 作者 + 发布日期]

[正文] 文字 + 内嵌图片

[侧边栏] 相关文章 + 广告位

[页脚] 标签 + 评论区

这样组织的原因: 在搭建 CMS 模板前先画阅读体验线框图，能让内容团队和开发者提前对齐作者需要多大的排版灵活度。

使用技巧

全程只用灰度色——一旦出现颜色，反馈就会从布局转向视觉风格，你会失去对结构的批评意见。
每个区块用内容类型标注，比如"[Hero 图]"比"Lorem ipsum"更能说明这里要放什么。
需要特定交互行为的元素旁边加一条简短备注，比如下拉框或弹窗触发方式。
演示前给页面编号并用箭头连好跳转关系——干系人看到每个操作指向哪里，才能真正跟上流程。

在线开始编辑

回到模板页，直接替换成你的课程主题、章节和复习重点，就可以继续使用这套结构。

使用这个模板： /editor/new?template=wireframe

使用这个模板