线框图
Wireframe
中级通用线框图（Wireframe）是用简化的框、文字和连线表示页面内容、布局与操作入口的草图。它帮你在做视觉设计或写代码前，先讨论页面该放什么、用户怎么完成任务；比如先画出后台列表页的筛选区和操作区。
你可能会说：「先别写页面代码，帮我画个简单草图，让我看看内容放哪、用户怎么操作。」
读之前建议先了解
动手看看订单列表页的线框图
切换「查看阶段」对照两版，再悬停操作入口。注意搜索、筛选、新建和查看详情的位置：这些任务路径在线框图阶段就已经定下来了。
虚线框先交代内容分组和操作入口，不急着决定品牌色、阴影或精细间距。现在适合讨论的是：用户找订单、筛状态、打开详情顺不顺手。
要点线框图帮我们先确定什么？
- 1
先看内容与操作的位置
做后台订单页时，我们可以先用方框标出搜索、筛选、订单列表和批量操作。这样一眼就能发现：用户想找订单时，入口是否容易找到；想处理订单时，操作是否挨着相关内容。
- 2
用简化画法保留讨论空间
线框图通常不靠配色、字体或精细图标表达效果，因为这些细节容易把讨论带向外观。先写清区域名称、示例内容和按钮作用，我们才能集中判断信息是否够用、顺序是否合理。
- 3
把关键状态一起画出来
只画数据齐全时的页面，AI Agent 可能会漏掉第一次使用或搜索无结果的情况。比如画文件列表时，再补一张空列表线框图，我们就能讨论上传入口和引导文字该放在哪里。
容易混淆的地方
线框图关注页面有什么、放在哪里，不负责定稿颜色、字号等视觉细节；这些属于视觉设计。它也不同于可点击原型：线框图可以用箭头注明点击后去哪，但如果你要让人实际点击，检查多步流程是否顺畅，就需要可点击原型。
什么时候用
适合用
- 准备让 AI Agent 开发一个新页面，先用线框图对齐内容区、操作入口和页面状态，再开始写代码。
- 团队对一个 App 功能该放哪些信息有分歧，用几版线框图比较布局，避免过早讨论配色。
- 改造后台复杂表单时，先画出字段分组与提交位置，检查用户能否按任务顺序填写。
不适合用
- 只想确定产品要解决谁的什么问题时，页面还没必要画出来；先做产品发现或整理用户故事。
- 已经确定布局，只需要挑选品牌色和图片风格时，用情绪板或视觉设计稿更合适。
- 需要验证用户能否完成跨页面的实际点击操作时，改用可点击原型。
练一练选一个答案，看看解释
你要让 AI Agent 做一个团队文件管理页。需求已经确定，但大家还没决定搜索、文件列表和上传入口怎么摆，也担心空文件夹时页面无从下手。下一步选什么？
让 AI 帮你做复制给 AI Agent 直接用
请先为团队文件管理页制作低保真线框图，不写前端代码。分别展示有文件和空文件夹两种状态，标出搜索、上传、文件列表和主要操作的位置，并简述每个区域为什么这样安排；暂时不讨论配色与字体。