响应式网页原型不是把桌面画板按比例缩小，而是提前规定内容在不同宽度下如何重排。先按内容优先级选择断点，再决定导航、卡片、表格和按钮的变化，最后用真实设备宽度走一遍关键任务。这样能在开发前发现“看得见但点不到”或信息顺序错误。
用墨刀原型建立同一活动页的三种画布，把“查看活动详情并报名”作为贯穿任务。保持文案和数据一致，只改变布局规则，评审时更容易定位真正的响应式问题。
先把报名任务放进窄屏
这次活动页需要承载活动名称、日期、地点、票价、议程、嘉宾和报名表单。先在手机画布上安排“是什么活动—我能否参加—怎样报名”：时间、地点和价格不能被长宣传语挤到几屏之后；嘉宾介绍可以放在后面，但不能连同报名条件一起隐藏。宽屏增加的是并排展示空间，核心信息不应凭空多一套。
准备同一份内容样本：“产品设计开放日：从需求讨论到原型评审”、一天的议程、线下地址、两种票型，以及姓名、邮箱、人数三个报名字段。再准备超长活动名、免费票和已售罄三种变化。先画一张能完成任务的窄屏页面，再扩展宽屏，比从精美桌面稿逐项删内容更容易守住报名路径。
先为内容排序，再决定断点
把活动页内容分成必须完成的任务、支持判断的内容和可延后内容。桌面导航可展示完整菜单，手机端折叠为菜单按钮；报名主按钮在窄屏仍要保持可见。断点不必照搬某个设备型号，应由内容出现拥挤、标题换行或操作区失效时确定。
| 模块 | 桌面 | 平板 | 手机 |
|---|---|---|---|
| 导航 | 完整菜单+主按钮 | 保留核心入口 | 折叠菜单，主按钮固定 |
| 活动卡片 | 三列 | 两列 | 单列，信息顺序不变 |
| 报名表单 | 双列字段 | 单列 | 分步或纵向，错误贴近字段 |
| 数据表 | 完整列 | 减少次要列 | 横向滚动或改为卡片 |
上表是一组布局方案，分步表单、固定按钮和减少表格列都不是所有网页的默认答案。字段少时，一页填完通常更直接；如果活动票型需要对照比较，手机端仍应保留关键差异，不能为了排版整齐只显示票名。
用内容算出候选断点
例如活动卡片至少需要 280px 才能完整放下标题和时间，卡片间距 24px，页面左右各留 24px：三列至少需要 936px，两列至少需要 632px。这只是本例的候选宽度。将画布逐渐收窄，发现导航先挤压，就先处理导航；卡片区仍可保留三列。模块可以在不同宽度变化，不必让整页在同一个断点突然换形态。
记录断点时同时写原因，如“低于 936px 时卡片不足最小可读宽度”，不要只写“平板端”。再为断点两侧各准备一张画布，例如 935px 和 937px，查出本该重排却仍挤在一起的组件。正式网页的断点实现可参考 MDN 媒体查询指南；这里的数值是活动页设计样本，并非设备标准。
原型中要标出重排而非只画结果
在页面说明中记录“隐藏”“移动”“折叠”“横向滚动”等规则，特别是导航和表格。图片、标题和价格等内容使用接近真实长度的样本，避免短占位词掩盖换行问题。固定底部按钮要同时检查键盘、错误提示和系统安全区。
给报名卡写一条完整变化规则
桌面把报名卡放在详情右侧，窄屏把票价、余票和报名入口移到活动时间之后，详细报名字段仍在独立页面。这样用户先获得参加条件，再决定是否填写。不要把整块报名卡简单移到整篇议程之后，否则页面虽然没有溢出，最重要的动作却要滚动很久才能找到。
| 对象 | 宽屏规则 | 窄屏规则 | 必须保持 |
|---|---|---|---|
| 详情与报名区 | 详情占主栏，报名卡在右侧 | 票价和入口提前；详情纵向排列 | 活动、票型和人数选择一致 |
| 主视觉图片 | 完整展示主要人物与活动信息 | 调整裁切焦点或换窄屏构图 | 活动信息不能只存在于图片中 |
| 底部报名按钮 | 正文内按钮或侧栏入口 | 可固定在底部，并给正文留占位 | 不能覆盖最后一行内容及错误提示 |
| 议程表 | 时间、主题、讲者并列 | 按时间组合为卡片；或表格内部横滚 | 页面主体不出现水平滚动 |
在原型备注中写“移到什么内容之后”“哪些列始终可见”“谁负责滚动”，研发才有实现依据。固定按钮还要写明键盘弹出时的策略，例如随输入流程收起，或移到可见区域；不能只画一张键盘尚未出现的正常状态。
在墨刀中连起详情、报名与返回
- 为窄屏、过渡宽度、宽屏建立同名页面组，页面名称加视口宽度，避免评审者把不同内容误认成不同版本。
- 复用同一份活动文案、票型和价格，按规则调整导航、报名卡与议程。需要尺寸切换时，通过不同画布展示目标布局；静态画布不会替代浏览器中的真实重排。
- 把“报名”连到对应宽度的表单页，再补字段错误、提交中、报名成功和售罄页面。提交中避免出现第二个可重复提交入口。
- 把返回行为连起来：从表单返回详情应保留已选票型；再次报名时是否保留未提交资料，也要写明。不能把每个链接都回到初始首页。
- 分享原型时附上任务：“选择下午场，报名两人，故意填错邮箱后修正”。收集停顿点和无法继续的位置，比只问页面好不好看更具体。
用任务而不是截图验证
分别在桌面完成浏览详情、平板修改报名人数、手机提交并修正错误。每个视口记录入口位置、信息顺序、点击区域、滚动方向和返回路径。若某元素只在一个宽度可见，要说明这是业务选择还是遗漏。不要把浏览器缩放模拟当成真实触控验证。
三种常见失败要分开修
- 文字挤出容器：先查固定宽度、不可断开的长字符串和图片最小尺寸。允许正常换行或重新安排信息，不把所有字号缩小来凑一行。
- 只有手机横向滑出白屏：查表格、定位装饰和固定按钮是否超出页面。宽表可在表格容器内滚动，页面本身不应跟着变宽；不要仅裁掉溢出区域，把操作入口一起藏起来。
- 按钮可见却难以操作：用实际手机展开键盘、旋转屏幕并放大文字，检查底部按钮、关闭入口和错误提示。鼠标能点中不代表手指触控同样顺畅。
验收记录可写成“390px—邮箱错误—提示位于字段下方且保持可见—修正后仍保留人数”。在 320px、390px、768px、1280px 等样本宽度之外，还应覆盖本例断点的前后位置。样本宽度服务于找问题，并非满足这些尺寸就能证明所有设备正常。
交付物包括断点表、模块重排规则、关键状态截图和验收任务。准备好真实文案后，进入工作区制作多画布原型并邀请研发共同评审。
