线框图设计可以按7步完成：明确任务、搭建页面框架、连接交互、组织评审、复用组件、检查不同屏幕、根据测试修改。先确定用户要完成的事，再决定页面放什么；灰色框画得整齐，并不代表流程已经想清楚。
需要把这些页面连成可点击方案时，可以用墨刀原型搭建页面与交互。下面延续电商商品选择的例子，逐步形成页面清单、状态说明和可以分享的演示，而不是直接进入配色与视觉精修。
为什么线框图绘制成为设计流程核心
线框图把需求中的对象、信息和操作安排到屏幕上。它的作用是提前暴露问题：用户是否看得到价格、能不能选择规格、库存不足后该去哪里。此时调整一个区域或一条路径的成本，通常比研发完成后再改变业务流程小。
线框图也有边界。它不能证明用户一定会购买，不能代替接口约定，更不能凭一张漂亮布局说明所有异常都已处理。评审时应先讨论信息是否足够、动作是否连贯，再讨论间距、字体与视觉风格。关于低保真表达本身，可参考线框图的用途与制作方法。
如果项目需要用AI摆脱空白画布，可以先按AI生成线框图的提示词与评审方法形成候选结构，再回到下面的需求梳理、布局、状态和评审流程逐项校正。手动画框和AI起稿都能复用组件；二者都需要明确业务规则。
线框图绘制操作流程
第1步：需求梳理与目标设定
把“做一个电商APP”缩成可以验证的任务：“已登录用户找到一款有货商品，选择规格加入购物车，核对数量后进入结算。”这一步先不画页面，写下角色、起点、结束条件和暂不涉及的功能。优惠券、拼团与售后若不影响本轮验证，可先留在范围之外。
需求图适合整理模块与规则，不能直接当页面目录。一个业务模块可能需要多个页面，一张页面也可能同时包含多个状态。先把“用户要知道什么”列出来，随后才分配到屏幕。
| 任务 | 必须看见的信息 | 需要决定的规则 |
|---|---|---|
| 判断是否购买 | 商品名称、价格、规格、库存、配送说明 | 未选规格能否加购；价格是否随规格变化 |
| 修改购买数量 | 已选规格、数量、单价、小计 | 数量上下限；超过库存如何反馈 |
| 继续结算 | 选中商品、合计、失效商品说明 | 无商品、缺货或价格变化时如何处理 |
完成标志不是写满需求文档，而是团队能用一句话说清这次演示的成功终点。如果“加入购物车”和“直接下单”都存在，先说明两者的区别，避免到连线时才发现流程分叉。
第2步：基础框架搭建
为商品列表、详情、规格选择、购物车建立页面或明确的弹层状态。优先画导航、内容区、操作区三个层次。列表回答“有哪些”，详情回答“适不适合我”，规格区域回答“买哪一种”，购物车回答“最终买什么”。
把同一条任务的页面放在相邻区域，按用户操作顺序排列，并给分组写上任务名称。这样既能单独检查页面，也能快速追踪页面之间的连接。实际制作时，可从墨刀模板库选择相近结构，删除无关区域，再替换成当前商品内容。
占位文案也要接近真实长度。“商品标题”四个字无法暴露两行长标题的拥挤；把价格写为“¥399.00”、规格写为“深灰色／256GB”，更容易发现行高、对齐和按钮宽度问题。先用灰度表达层级，仅对选中、禁用或错误状态保留必要区分。
第3步：交互逻辑设计
每条连线写清“谁触发、什么条件、到哪里、返回后保留什么”。例如点击详情页的加入购物车：未选规格时打开规格层；选好且有库存时给出成功反馈；库存不足时保留选择并说明可购买数量。不要让三种情况都连到同一个成功页。
能通过当前工具的事件、组件状态或页面连接表现的行为，可以在原型里演示；还未实现的接口判断，则在对应位置写出规则，不能把模拟数据当真实库存。重点走一次返回路径：关闭规格层是否丢失选择、从购物车返回是否仍停在刚才的商品。
为此可给页面与状态命名，例如“详情／默认”“规格／未选择”“规格／缺货”“购物车／有商品”。名字应让评审人员能定位问题，避免“页面1复制2最终版”这样的标识。需要进一步设计触发和反馈，可看交互原型中的状态与返回路径。
第4步：输出与协作
发出评审链接时，同时给一段任务说明：“请从列表选择深灰色商品，加入两件，再返回修改规格。”这样同事在验证同一条流程，不会各看一个页面后只留下“感觉还行”。标明本轮确认的是信息与操作规则，哪些视觉细节尚未定稿。
涉及跨角色操作时，用泳道或责任表补充前后关系，例如用户提交、系统检查、客服处理。上图的跨部门流程能帮助讨论职责，但不能代替每个用户页面的交互说明。
评论应记录页面／状态、问题、建议和负责人。例如“规格缺货时仍可点击加购，建议在按钮旁解释缺货并保留更换规格入口”。对于有争议的规则，记录决定和依据；不要仅发一张聊天截图，让设计与研发各自猜测最终结论。交付时确认对方需要在线演示、静态图片还是其他文件，再检查对应权限与导出选项。
第5步：智能组件复用
先确认两个区域行为相同，再决定复用。商品卡片可共享图片比例、标题、价格与角标结构；但缺货卡片还需要说明和禁用规则，不能只换成浅灰色。导航、按钮、表单和弹层宜用稳定的命名，保留默认、选中、禁用、加载等必要状态。
墨刀原型支持组件与母版复用。使用关联实例时，先在一个页面改动，再检查其它引用处是否受影响。若只是当前页面的文案与数据不同，应修改实例内容；若修改共同结构，则确认哪些页面需要同步。过早把所有相似模块做成同一个母版，也可能让后续业务变化互相牵制。
第6步：跨平台适配设计
手机、平板和桌面上的任务可以相同，但信息布局不应只做等比缩小。对同一商品任务，手机先保证价格、规格与主要操作可找到；桌面可以并排展示图片和信息；窄屏下次要推荐内容可以下移，但配送限制不能被隐藏。
先用多页结构图确认不同尺寸下仍能完成同一任务，再拿一个窄屏和一个宽屏方案检查：长标题是否遮挡价格，弹层能否完整操作，错误提示是否紧邻字段，底部操作是否盖住正文。不同尺寸共享规则，不代表所有区域共享固定坐标。
如果工具提供自动布局或尺寸约束，应根据组件的伸缩行为设置，再实际预览；没有设置约束的原型，不会因为选择了设备外壳就变成响应式界面。把需要研发实现的断点和折行规则写在交付说明中。
第7步：原型测试优化
请目标用户或不熟悉方案的同事按任务操作，先不要指路。观察他们在哪里停顿、误点、返回或询问规则。测试记录应写下行为和影响，例如“进入详情后寻找运费说明，向下滚动两次仍未找到”，比“用户体验不好”更容易改。
把多页连接整理成待测试路径后，可以由观察者记录完成情况、错误位置和用户原话。测试记录注明任务、参与者背景和观察条件；局部原型测试用于发现障碍，真实业务转化还需上线后结合完整数据判断。
按影响处理问题：阻止任务完成的缺失路径先改，造成错误理解的文案其次，纯视觉偏好后置。修复后重新走相同任务，并补一条异常路径，例如购物车中的商品失效。保留“问题—修改—复查结果”的记录，防止评审结论在后续精修时丢失。
如何选择适合团队的线框图工具
用同一项小任务比较工具，比单看组件数量更有判断力。让产品搭建商品详情、设计修改规格状态、研发查看行为说明，再看三者能否围绕同一版本完成沟通。
- 基础表达：能否组织页面、复用组件、连通主要路径，展示当前任务所需的状态，而不只生成静态图片。
- 协作与交付：成员能否按权限查看、评论和修改；演示、标注和导出是否符合团队实际用途。
- 扩展与维护：模板是否便于改成自己的业务；字体、文件、版本和已有资产能否继续维护。需要集成外部系统时，查看明确的支持方式，不仅看宣传中的工具Logo。
完成这7步后，一份可用的线框方案至少包括明确任务、必要页面和状态、可走通的演示，以及仍待确认的业务问题。你可以在现有项目中选择一个商品流程开始，把结构讨论清楚后再进入视觉设计；无需一次画完全部功能才邀请团队评审。
