这篇教程把“HelloWorld”项目的线框图拆成清晰可执行的步骤：从目标与用户场景、草图与格栅、到中高保真原型与交互定义，全程覆盖布局、可访问性与交付要点。按着做，你能在一两个迭代内产出可测试的线框并交付给研发和测试团队。
为什么要先做线框图（别急着画界面）
嗯，有时候我们太想直接去做漂亮的 UI 了，但线框图是把想法变成可评估的“约定”。它解决三件事：明确信息结构、快速验证交互、节约沟通成本。换句话说，先用最便宜的方式把核心逻辑敲定，后面省下的大于你想象。
HelloWorld 线框图的目标与范围
先说清楚“HelloWorld”到底是哪个产品：这里我们以一个简单的单页应用（或网站首页）为例，核心功能只有展示欢迎语、一个交互按钮（点击显示弹窗/切换文本）、及基础导航和响应式布局。目标是快速验证首屏、按键反馈和多设备表现。
需要实现的核心功能（最小可行范畴）
- 页面标题与副标题（传达品牌/目的）
- 主要交互按钮（Hello → World / 显示弹窗 / 发送请求）
- 状态反馈（加载、成功、错误）
- 简单导航（Logo、菜单、版权信息）
- 响应式布局（手机/平板/桌面）
典型用户场景（用来驱动线框决策）
- 第一次访问：快速理解页面目的并完成一次点击交互
- 移动用户：单手可点的按钮与足够大的触控目标
- 低网速或无 JS：降级方案能给出基本内容
工具与材料（从纸笔到 Figma）
工具并不决定结果，习惯和步骤才是关键。以下是常用工具及何时选它们：
- 纸笔/白板：快速头脑风暴，手绘草图，优点是速度快、参与感强。
- Balsamiq：模拟低保真草图风格，适合远程讨论。
- Figma/Sketch/Adobe XD：从中保真到高保真，协作、原型与交付一体化。
- Axure：复杂交互或条件逻辑较多时更好。
线框图的精度分类（别把低保真当成偷懒）
- 低保真（Low-fidelity）：方框与占位文本；用于快速验证信息架构。
- 中保真（Mid-fidelity）：更明确的布局、占位图标、交互说明；适合可用性测试。
- 高保真（High-fidelity）：近似最终 UI，含真实文案与视觉样式；用于视觉评审与最终交付。
一步步画出 HelloWorld 线框图（实践指南）
下面给出一个从 0 到 1 的操作清单，按顺序来会更省力。
步骤 1：定义目标和成功指标
- 目标示例：让 80% 的新用户在 10 秒内理解页面并完成一次点击。
- 可测指标：点击率、错误率、首屏加载时间。
步骤 2：画用户流程（用一句话描述用户要做什么）
比如：“用户打开页面 → 看到欢迎语 → 点击主要按钮 → 出现反馈（弹窗或文本）”。把这条流程写在一张纸上，别把它藏在脑子里。
步骤 3：草图（纸上或白板）
- 画三种关键视图：桌面、窄屏（手机竖屏）、弹窗状态。
- 用简单方框表示标题、文本、按钮、图像占位符，旁边标注交互（例如：按钮点击后显示 modal）。
步骤 4：用格栅与间距标准化
设定栅格（如 8px 基线）和主要容器宽度（桌面 1200px、平板 768px、手机 375px）。这一步让不同页面保持一致感，别低估统一间距带来的清爽度。
步骤 5：中保真线框（Figma 或类似）
- 转成可交互的原型，添加按钮 hover / active / loading 三种状态。
- 标注键盘和辅助设备的可达性（例如：按键焦点、aria-label）。
步骤 6：可用性测试（快速迭代）
对 5-8 位真实用户做走查，记录他们是否理解页面目的、能否完成点击。倾听他们的第一印象，很多时候会发现文案或按钮位置的问题。
步骤 7：交付给研发（Specification）
- 提供：行为说明、响应式断点、触控尺寸、颜色（如果有）、字体大小和间距规范、以及交互示意。
- 把必要的注释放在页面或附带文档里，避免邮件来回问太多细节。
线框要包含的常用元素（表格便于参考）
| 元素 | 目的 | 注意点 |
| 标题与副标题 | 传达主要信息、吸引注意 | 文案要简练，避免行业术语 |
| 主操作按钮 | 引导用户完成核心行为 | 保证足够大（建议至少44×44px）、明确标签 |
| 状态提示（loading/success/error） | 反馈用户操作结果 | 提供可理解的文案与下一步引导 |
| 导航 | 帮助用户跳转或回溯 | 移动端常用汉堡菜单或底部导航 |
一些具体的设计与可访问性细节（别偷工）
- 可触控目标：手机上按钮至少 44px；与其他元素保持足够间距。
- 可读性：正文行长控制在 50–75 字符，层次分明。
- 键盘导航：所有交互元素应能被 Tab 访问，焦点样式要清晰。
- 颜色对比：文本与背景满足 AA（4.5:1）或更高，别光凭感觉。
- 降级方案：在无 JS 情况下，核心信息仍可见，交互可以是基本表单提交或直接文本替代。
示例：一步画出一个简单的 HelloWorld 页面（文字版草图）
这部分就像我一边画一边念出来的步骤，可能有点口语，但更真实：
- 先画一个顶部横栏：左侧 Logo，右侧汉堡菜单（手机）或简单链接（桌面）。
- 主区域居中：大标题“HelloWorld”，下面一行副标题说明用途（一句话），再下面是主按钮“Say Hello”。
- 按钮下方预留状态文本区域：默认隐藏，点击后显示“Hello, World!”或错误提示。
- 页脚放版权信息与辅助链接。
如果要把上面转成 Figma：创建三帧（Desktop/Tablet/Mobile），按 8px 网格布置元素，添加交互链接（按钮 → 弹窗 / 状态文本切换），再标注触控尺寸与 aria 文本。
常见错误与如何避免
- 过早追求视觉细节：先把结构和流程确认，再加视觉。
- 忽略异常状态：网络失败、空数据、长文案场景都要考虑。
- 不做响应式思考：只做桌面版本会导致移动体验崩塌。
- 文案不明确：按钮标签含糊会显著降低转化率（“提交” vs “发送问候”）。
从线框到交付：与团队的协作建议
- 把中保真原型当作沟通工具，组织一次 30 分钟的跨职能评审（产品、设计、工程、测试）。
- 记录所有决策与未决问题，分配责任人和截止时间。
- 交付时包含：原型链接、标注文档、必要的图标与资产清单、测试用例（基本流程与异常流程）。
如何衡量线框的成功（别用模糊感受）
- 可用性任务完成率（例如：成功点击主要按钮的比例）
- 首次理解时间（用户能在多少秒内说出页面目的）
- 迭代速度（从草图到可测原型所需天数）
关于资料和进阶阅读，推荐几本能帮你把线框功力往上提升的书：《Don’t Make Me Think》（Steve Krug）、《About Face》（Alan Cooper）和一些可用性测试的实战文献。我常常在做线框时翻它们（顺便提醒自己别只做漂亮图）。
最后，别把线框当成可有可无的文档。把它当成一次与团队、用户沟通的机会：越早把假设放到纸上（或屏幕上），越快发现问题。嗯，就像我现在边写边想——你可能会在第一个迭代里就修掉一两个看着小实则很闹心的问题，这样最终的 UI 才不会为了一次漂亮的按钮而背负太多技术债。