实操：页面跳转和交互怎么写

很多用户以前用原型软件时，会先画多个页面，再给按钮连线：点击这个按钮，跳到另一个页面。

在 Open Design 里，思路要稍微换一下：你不需要自己画连线，而是直接用文字告诉 Open Design「点哪里、去哪里、看到什么、怎么返回」。Open Design 会把这些交互写进生成结果的 HTML/JS 中，你再在右侧「预览」中实际点击检查，最终以预览里的真实点击结果为准。

下图是真实的项目预览界面。交互原型生成后，不要只看左侧对话文字，要在右侧「预览」里直接点击按钮、Tab、表单和返回入口，确认它们真的有反应。

在项目页右侧预览中检查生成页面交互

1. 以前画连线，现在怎么写

传统原型软件常见做法是：

画首页
画详情页
选中首页按钮
设置点击后跳到详情页

在 Open Design 中，可以直接这样写：

做一个多页面原型，包含首页、功能介绍页和价格页。

交互要求：
1. 首页点击「查看功能」按钮后，进入功能介绍页
2. 首页点击「查看价格」按钮后，进入价格页
3. 功能介绍页和价格页左上角都有「返回首页」按钮，点击后回到首页

生成完成后，在右侧「预览」里点击这些按钮，确认是否真的跳转。

检查时先确认顶部处于「预览」模式，而不是「代码」模式；再按交互路径逐个点击。页面内容可以和下图不同，但检查位置都是右侧预览区域。

2. 按钮跳转到新页面

如果你想表达「点击某个按钮后进入新页面」，这里的「新页面」通常指原型内的另一个页面状态，或者同一个项目内的另一个 HTML 页面，不是让浏览器打开新的标签页。可以按这个格式写：

请做一个 3 页的活动报名原型：
1. 活动介绍页
2. 报名表单页
3. 报名成功页

页面跳转：
- 活动介绍页点击「立即报名」按钮，跳转到报名表单页
- 报名表单页点击「提交报名」按钮，跳转到报名成功页
- 报名成功页点击「返回活动介绍」，回到活动介绍页

检查时看 3 件事：

按钮是否能点击
点击后是否到了正确的页面状态或 HTML 页面
新页面是否有返回入口

如果跳错了，不要重新开项目，直接发送：

请修正页面跳转：「立即报名」应该进入报名表单页，不要跳到报名成功页。报名成功页需要有「返回活动介绍」按钮。

3. 选择单文件还是多文件

Open Design 生成交互原型时，常见有两种方式：

方式	适合场景	怎么告诉 Open Design
单个 HTML 内切换页面状态	页面不多，只是演示流程	「请做成单个 HTML 文件，点击按钮时在同一个预览里切换不同页面状态。」
多个 HTML 页面互相跳转	更接近真实网站或交付给开发	「请生成多个 HTML 页面，并设置页面之间的跳转链接。」

这两种交付方式都可以明确要求。第一次练习建议选「单个 HTML 内切换页面状态」，在右侧预览里检查最直观；如果流程比较复杂，或者希望更接近真实网站结构，再要求生成多个 HTML 文件。

推荐写法：

请做成单个 HTML 文件，包含 3 个页面状态：首页、详情页、成功页。点击按钮时在同一个预览里切换状态，不需要真的连接后端。

页面状态可以理解成「同一个文件里显示不同画面」。比如一开始显示首页，点击按钮后隐藏首页、显示详情页。它看起来像跳到了新页面，但实际上仍在同一个预览里，适合快速演示流程。

4. 点击后打开弹窗

如果不是跳到新页面，而是点击后出现弹窗，可以这样写：

在页面右上角增加「申请试用」按钮。

交互要求：
- 点击「申请试用」后，页面中间弹出申请试用弹窗
- 弹窗里包含姓名、部门、使用场景三个输入项
- 弹窗右上角有关闭按钮
- 点击「取消」关闭弹窗
- 点击「提交申请」后，弹窗内容切换为「已提交，我们会尽快联系你」

检查时重点看：

点击按钮是否出现弹窗
弹窗是否能关闭
提交后是否出现成功提示

5. 表单提交后到成功页

表单流程要写清楚「填什么、点什么、提交后看到什么」。

做一个报名表单流程。

报名表单页包含：
1. 姓名
2. 部门
3. 参加场次
4. 备注

交互要求：
- 点击「提交报名」后，在页面里模拟提交成功，并进入报名成功页
- 成功页显示「报名已提交」
- 成功页显示用户刚才填写的姓名和参加场次
- 成功页提供「返回首页」和「再提交一份」两个按钮

如果只是做原型，不需要真实提交到系统，可以明确写：

这是演示原型，不需要连接真实后台，也不需要真实保存数据。点击提交后，只需要在页面里模拟提交成功，并切换到报名成功页或成功状态。

6. 点击卡片进入详情

列表和详情是很常见的产品原型。可以这样写：

做一个培训课程列表页和课程详情页。

列表页包含 4 张课程卡片，每张卡片有课程名称、适合人群、预计时长和「查看详情」按钮。

交互要求：
- 点击任意课程卡片或「查看详情」，进入对应课程详情页
- 详情页展示课程介绍、学习目标、适合人群和报名按钮
- 详情页左上角有「返回课程列表」按钮

如果你希望不同卡片点进去看到不同内容，要写清楚：

每张课程卡片点击后进入不同详情内容，不要所有卡片都跳到同一个详情页。

7. 顶部菜单切换页面

如果你要做官网、产品介绍页、后台工具首页，经常会有顶部菜单。

做一个产品介绍网站原型，包含顶部导航。

导航菜单包括：首页、功能、案例、常见问题、联系我们。

交互要求：
- 点击「首页」回到页面顶部
- 点击「功能」滚动到功能模块
- 点击「案例」滚动到案例模块
- 点击「常见问题」滚动到常见问题模块
- 点击「联系我们」滚动到底部联系方式模块

如果你要的是跳到独立页面，而不是在同一页滚动，要明确写：

导航菜单点击后进入独立页面，不要只是在同一个页面内滚动。

8. Tab 切换内容

Tab 适合在同一个区域里切换不同内容，例如按角色、按场景、按套餐查看。

在页面中增加「适合哪些用户使用」模块，使用 Tab 切换。

Tab 包含：
1. 产品经理
2. 运营人员
3. 设计师
4. 销售或售前

交互要求：
- 默认选中「产品经理」
- 点击不同 Tab 后，下方内容切换为对应角色的使用场景
- 被选中的 Tab 要有明显高亮

检查时要实际点击每个 Tab，确认内容是否真的变化。

9. 分步骤流程

如果你要表达「第一步、第二步、第三步」，可以让 Open Design 做成步骤流程。

做一个 3 步创建流程：
1. 选择内容类型
2. 填写需求
3. 预览并确认

交互要求：
- 页面顶部显示当前是第几步
- 点击「下一步」进入下一步
- 点击「上一步」回到上一步
- 第三步点击「确认生成」后显示完成状态

这种写法适合演示注册流程、申请流程、审核流程、配置流程。

10. 常见问题怎么处理

问题一：按钮点了没反应

继续发送：

当前预览里点击「立即报名」没有反应。请让这个按钮可以点击，并跳转到报名表单页。

问题二：跳到了错误页面

继续发送：

请修正跳转关系：「查看详情」应该进入课程详情页，「提交报名」才进入报名成功页。

问题三：没有返回入口

继续发送：

请给每个子页面增加「返回首页」或「返回上一页」按钮，并确保点击后能回到正确页面。

问题四：Open Design 做成了很多独立页面，预览检查不方便

继续发送：

请把这个原型改成单个 HTML 文件，通过点击按钮切换页面状态，方便我在一个预览里完整演示流程。

问题五：我想要更接近真实网站

继续发送：

请把这个原型改成多个 HTML 页面：首页、详情页、表单页、成功页，并设置页面之间的跳转链接。

问题六：页面里需要真实保存数据吗

做原型时通常不需要。可以写：

这是原型演示，不需要真实保存数据，也不需要真实提交到后端。请在页面里模拟输入、提交成功和成功提示。

11. 写交互需求的固定格式

以后遇到交互需求，可以套用这个格式：

我要做一个【页面类型】原型。

包含这些页面或状态：
1. 【页面 A】
2. 【页面 B】
3. 【页面 C】

交互要求：
- 在【页面 A】点击【按钮名称】，进入【页面 B】
- 在【页面 B】点击【按钮名称】，进入【页面 C】
- 在【页面 C】点击【按钮名称】，回到【页面 A】

检查标准：
- 每个按钮都能点击
- 每次点击后都到正确页面或状态
- 每个子页面都有返回入口
- 这是原型演示，不需要连接真实后台

12. 完成标准

学完这一页后，记住 4 件事：

不用手动画连线，直接写清楚「点哪里、去哪里、看到什么」
简单演示优先让 Open Design 做成「单个 HTML 内切换页面状态」
更接近真实网站时，再要求生成多个 HTML 页面并互相跳转
生成后一定在右侧「预览」里实际点击按钮检查，不对就继续发送修正要求