线框图（wireframe）是对某个界面或页面的简要规划，在加入颜色、字体和图片之前，先说明每样内容放在哪里。它展示页面结构：有哪些内容、按什么顺序排列、界面上有哪些按钮和表单字段，以及用户如何进入下一步。因为不涉及视觉风格，讨论可以聚焦在页面是否好用上。
线框图包含什么，不包含什么
- 布局和层级：页面的主要区域，比如页头、导航、主体内容和页脚，以及哪些信息最突出。
- 内容模块：标题、正文、图片、列表和表格，通常用灰色方框或简单标注表示。
- 操作：按钮、链接、菜单和表单字段，以及各自的作用。
- 说明：解释规则的简短备注，比如“仅对已登录会员显示”或“必填”。
最终的配色、字体、照片和文案，在结构确定后的视觉设计阶段再处理。
线框图、视觉稿和原型
三者经常混用，但一般各有所指：
- 线框图：细节较少的结构和内容规划，可以是铅笔草图，也可以是简单的电子版布局。
- 视觉稿（mockup）：静态的视觉设计，呈现界面最终的样子，包括品牌色、字体和图片。
- 原型（prototype）：可以点击或交互的版本，让人试走一段流程，比如从商品页进入结算。原型既可以基于线框图，也可以基于完成的视觉稿。
评审用的原型并不是能实际运行的产品。如果想验证某个产品想法值不值得开发，可以参考 MVP 是什么。
委托开发网站或应用时，线框图有什么用
- 尽早统一认识：企业负责人、员工和开发方可以对着同一个界面讨论，不必各自解读文字需求。
- 修改成本低：在线框图上挪动方框只要几分钟；等到设计和开发之后再改，可能牵涉多个界面、代码和测试。
- 范围更明确：列出需要的界面和状态，有助在报价或开发前看清范围、发现漏掉的页面。
如何评审线框图
评审时，要把自己当成想完成某件事的用户，而不是去评判好不好看：
- 按真实任务走一遍：比如“客户预约下周二的服务”或“员工更新订单状态”，确认每一步都有对应界面和明确的下一步操作。
- 尽量使用真实内容：占位文字容易掩盖问题，比如较长的商品名称或中英文混排，未必放得进预留位置。
- 手机端和电脑端都要看：很多客户用手机访问，应查看主要页面在小屏幕上的布局。
- 关注不顺利的情况：表单填错、搜索没有结果、时段已满或支付失败时，界面会怎样显示？
以下示例仅用于说明：一家小型培训机构想开通线上报名。线框图包括课程列表、课程详情页、报名表单和确认页。评审时，机构发现缺少“课程已满”的界面，家长也无法一次为多个孩子报名。这两点都在视觉设计前补上，不用等到测试才发现。
常见误区
- 过早评价外观：线框图本来就应该简单，对颜色的意见留到视觉设计阶段再提。
- 只确认首页：表单、预约、结算和账户等承载业务流程的页面，往往最需要细看。
- 缺少说明：只有布局、没有规则和交互说明，开发人员之后可能会有不同理解。
- 以为确认后就不能再改：新情况仍可能带来调整，应和开发方事先约定后续修改怎么处理。
需要和设计或开发团队确认什么
- 哪些界面和用户流程会做线框图？细化到什么程度？
- 主要界面是否同时提供手机端和电脑端版本？
- 线框图是否包括报错、空白和权限等状态？
- 开发前是否提供可点击的原型试用？
- 包含几轮评审？确认之后的修改如何处理？
到了项目后期，同样的流程可以在预发布环境中检查，并通过用户验收测试确认。想了解 technine.io 如何梳理用户路径、页面结构和可点击原型，可以查看我们的 UI/UX 与产品设计服务。
常见问题
小网站需要线框图吗？
要看网站的情况。简单的展示型网站可能只需要主要页面的草图；如果网站有表单、预约、支付、会员区或需要和其他系统对接，线框图就更有价值，因为这些界面的规则和步骤容易被误解。
我可以自己画线框图吗？
可以。纸上草图或演示软件里的方框都能帮你说明需求，开发方可以再整理成规范的线框图并提出建议。
线框图就是最终设计吗？
不是。线框图确定的是结构和内容。之后的视觉设计会加入品牌元素、字体和图片，开发人员再根据确认的设计稿和说明进行开发。