响应式网页原型要说明同一项任务在不同宽度下如何完成：导航怎样收起，图文怎样重排，主按钮放在哪里，以及返回后是否保留浏览位置。下面以家居空间展示网站为例，从首页浏览案例到进入预约咨询，把桌面与手机的布局变化、页面状态和评审步骤连起来。重点是表达适配规则，而不是把桌面截图等比例缩小。
可在墨刀原型中建立对应宽度的页面，复用内容与组件，连接“浏览空间—查看详情—预约咨询”的路径。不同宽度的原型页面用于表达规则；仅建立多套画布，并不等于已经生成会随浏览器宽度自动变化的网页代码。
一、先定任务，再决定每种宽度的内容顺序
本例的访客想判断空间风格是否适合自己，随后查看案例并咨询。桌面能同时看到较多图文，手机则需要更明确的阅读顺序，但核心信息不能因为屏幕变小而消失。先列出导航、标题、空间照片、案例卡片、咨询入口和表单，再为每项内容决定优先级。
| 区域 | 较宽布局 | 较窄布局 | 必须保持 |
|---|---|---|---|
| 导航 | 横向展示栏目 | 通过菜单展开栏目 | 栏目名称、当前所在位置与关闭菜单路径 |
| 首屏图文 | 文字与照片并排 | 标题、照片、主操作按阅读顺序排列 | 核心信息与咨询入口，照片主体不被裁掉 |
| 精选空间 | 多列案例卡片 | 减少列数，逐张查看 | 案例名称、图片与详情入口 |
| 预约咨询 | 可按合理分组排布字段 | 单列填写，键盘弹出后仍可继续操作 | 必要字段、隐私说明、校验与提交结果 |
不要为了“移动端简洁”直接删除联系方式或预约入口。可以收起次要说明，但需要明显的展开方式；不适合触屏的悬停操作应改为可点击操作。哪些信息移动端暂不展示，应说明用户还能从哪里找到。
二、用内容触发断点，记录具体变化
断点是布局需要改变的位置。导航文字挤在一起、标题过度换行、照片被裁得无法辨认、卡片说明难以阅读时，都值得切换布局。375、768和1440等宽度可以用于评审取样，却不能代替内容判断。
- 先确定内容充足的版本：使用真实长度的栏目名、标题和案例介绍，不用短占位词掩盖拥挤问题。
- 检查中间宽度：逐步缩窄容器，记录最先失去可读性的区域；不要只检查最宽和最窄两个终点。
- 写清变化规则：例如“导航项无法保持一行时改为菜单；首屏图文并排影响标题阅读时改为上下排列”。规则对应实际内容，再由设计与研发共同确定实现断点。
- 检查收起与恢复：菜单关闭后焦点回到触发按钮，详情返回后回到原来的案例位置，避免每次从首页顶部重新找。
三、复用组件，同时补齐窄屏和异常状态
同一个案例卡片可共享标题、图片和操作语义，再根据容器调整排列。手机上的图片不能只缩小到难以辨认；裁切时保留空间主体，必要时更换同一案例的合适构图。按钮文字保持清晰完整，正文不要通过不断缩小字号来塞进页面。
以预约表单为例，原型中除了默认页面，还应表达必填项缺失、手机号格式错误、提交中、提交失败和成功反馈。失败后保留已填内容，并让用户知道下一步可以重试或选择其他联系方法；不要仅显示一个消失很快的提示。
- 内容：测试长案例名、两行以上的按钮附近说明、图片加载失败以及暂时没有案例的情况。
- 操作：菜单、卡片和表单使用触屏可发现的入口；避免只有鼠标悬停才能看到的关键操作。
- 连续性：返回后保留所选案例和已填内容；旋转屏幕后不应丢失正在完成的任务。
- 交付：用组件状态或页面说明表达设计意图，并由开发阶段验证实际浏览器的布局、键盘和数据行为。
四、按一次完整咨询任务评审
- 在桌面首页选择一个精选空间，打开详情，核对照片、案例名和咨询入口是否对应。
- 换到中间宽度，检查导航、长标题和卡片说明是否拥挤；记录需要切换布局的具体原因。
- 用手机版本展开菜单并关闭，再查看同一案例，确认返回后能继续原来的浏览位置。
- 进入预约，先漏填一个必填项，检查错误信息的位置与修正路径，再模拟提交失败并重试。
- 检查长文案、空内容和屏幕旋转；原型未实现的行为写入交付说明，不能把静态演示当成真实响应式功能已验证。
问题记录可以这样写：“手机案例详情页，返回列表后滚动位置回到顶部，访客需要重新寻找原案例；期望返回时保留位置。”这比只写“移动端体验不好”更方便定位、修改和复核。
五、交付布局规则，而不只是几张画面
将任务路径、内容优先级、断点触发原因、组件变化和异常处理放进交付材料。例如首屏照片采用何种裁切、菜单何时替代横向导航、预约失败是否保留字段，都应能从原型或说明中找到。开发需要进一步验证CSS布局、接口、存储与实际设备行为。
准备好案例内容与预约字段后，在墨刀中连接桌面和手机的对应页面，邀请产品、设计与研发按同一条咨询任务评审。先解决内容顺序、关键操作与回退路径，再细调视觉细节。
