制作交互原型，先把要演示的界面放在同一页面中，再为按钮或导航设置“单击→跳转到→目标画板”，最后指定流程起点并播放。开关、按钮选中态这类局部变化，则用组件变体连接不同状态，不必为每次变化复制一张完整页面。
下面用旅游 App 的首页、推荐页和底部导航完成页面跳转，再做一个能反复开关的组件。这两种操作都可以在 Pixso 在线原型设计工具中完成：设计稿保留在原文件里，连接交互后即可演示和收集反馈。
用4步连通旅游App的页面导航
第一步：准备画板，区分页面名称
进入 Pixso 工作台，新建或打开设计文件。已有界面可以直接用于原型；尚未完成视觉稿时，也可以先用文字、矩形和占位图搭好页面结构，不必等所有细节定稿后才验证流程。
你可以使用矢量工具、自动布局等功能绘制 UI，也可以从 Pixso 资源社区选择适合的素材。这个旅游 App 案例使用已有页面素材，包含首页、推荐内容、订单、社区和个人页面。先把这些画板放在同一文档页面中；原型目标选择的是当前页面下的画板，不是左侧“页面”列表里的另一个文档页面。
案例中两个名为 Home 的画板分别展示首页和推荐内容。可以先将它们命名为“Home-首页”和“Home-推荐”，保留 Order、Community、Me 等其余画板名称。目标列表中的名称清楚，连接时就不容易选错。
第二步：选择热点，逐个设置跳转目标
选中首页中的 Recom 文字或包含它的可点击区域，切换右侧属性面板到“原型”，点击“交互事件”旁的“＋”。将触发设为“单击”，操作设为“跳转到”，目标选择推荐内容所在的画板，动画先选“即时”。也可以拖拽选中图层边缘的触发点，将它连接到目标画板。
这里先用“即时”验证能否跳到正确内容，再决定是否添加转场。底部导航可以使用相同的触发条件，但每个导航项的目标必须分别指定：
- 首页的 Recom：跳转到“Home-推荐”；推荐页的 Home：跳回“Home-首页”。
- 底部 Order：跳转到订单画板 Order。
- 底部 Community：跳转到社区画板 Community。
- 底部 Me：跳转到个人画板 Me。
- 其他页面底部的 Home：跳回“Home-首页”，不要继续沿用上一个导航项的目标。
如果一个导航项由图标和文字组成，尽量把交互加到覆盖完整点击区域的图层上。只给文字设置交互，会出现点文字能跳、点图标没有反应的情况。各目标画板还应显示正确的导航选中态，例如进入 Order 后，订单图标高亮，而不是仍让 Home 保持选中。
第三步：设定起点，补齐往返路线
第一次创建交互事件时，Pixso 会在初始画板上创建交互流程。也可以在原型模式下选中“Home-首页”画板，在右侧添加“交互流程”，将它作为这次演示的起点。给流程起一个容易辨认的名称，例如“旅游App导航”。
从首页能进入订单页，并不代表整条路线已经完成。还要在 Order、Community 和 Me 画板上设置回到首页及其他导航项的连接。底部 Home 表达的是固定回首页，用“跳转到”指定首页；详情页里的返回按钮才适合用“返回”回到上一个访问的画板。
第四步：从起点播放，按路线逐项点击
点击编辑界面右上方的播放按钮，或点击流程起点上的播放按钮，进入原型演示。先走一遍“首页→推荐→首页”，再走“首页→订单→社区→个人→首页”。观察每次跳转的内容、选中状态和回程是否对应。
找不到可点击的位置时，可以在演示中开启“高亮可交互区域”。若预览从错误的页面开始，回到编辑器检查当前播放的流程起点；不要只用预览里的左右箭头切换画板，那样看不到真实按钮是否已经连接。
下方演示依次切换推荐、订单、社区和个人页面。跟着点击路线检查各页内容与导航选中状态，再回到首页。
用组件变体制作能反复切换的开关
页面跳转改变的是整张画板，开关交互改变的是同一个控件的状态。把“关”和“开”做成同一组件集中的两个变体，再分别设置状态之间的连接，就能在多个界面中复用这个开关。
1. 绘制关闭状态
切换右侧属性面板为“设计”，选择矩形工具，绘制尺寸为169×88的矩形，填充色值设为 #C4C4C4，填充不透明度为100%，圆角设为100。这是本例的开关底板尺寸，复用到实际界面时可以按页面比例调整。
使用圆形工具绘制68×68的圆，填充 #FFFFFF，填充不透明度100%。将圆放在底板上方，垂直居中，距离底板左边13px，组成关闭状态。
2. 创建组件及开启变体
先同时选中圆形与圆角矩形，再在工具栏或右键菜单中选择“创建组件”。将这个组件作为“关”状态。选中主组件后，可以通过右键菜单中的“主组件→新增组件变体”创建另一个状态，也可以在右侧组件属性区域添加变体。
将新变体的底板填充改为 #40B0FF，填充不透明度保持100%；把圆形移动到右侧，距离右边13px，得到“开”状态。两个状态中的底板和圆形应保持相同尺寸，这样变化只来自颜色和圆形位置。分别给两个变体设置可区分的状态值，例如 off 和 on，对应“关”和“开”；后续选择目标时，要与这组状态值一致。
3. 分别连接“关→开”和“开→关”
切换至“原型”，选中“关”状态变体，在“交互事件”中点击“＋”，设置触发为“单击”、操作为“变体切换”，目标选择“开”状态。这里选择的是状态切换，不是跳转到另一个页面。
再选中“开”状态变体，添加另一个事件：单击后切换到“关”状态。两个方向都要设置；只设置关到开，预览时就会出现第一次能打开、再次点击却无法关闭的情况。
4. 将开关实例放进画板中预览
从左侧“组件”面板找到这个开关，将它拖入练习画板，创建组件实例，并把初始状态设为“关”。主组件负责定义外观和交互，实例才是放进具体页面中复用的开关，不必把整个组件集都放进演示画面。
从该画板播放，连续点击开关，确认能够“关→开→关”。需要用于设置页时，再把实例放进相应画板，检查它与页面中的其他元素是否冲突。
跳转或开关没反应时，检查这几处
- 点图标没有反应：回到编辑器，确认事件加在实际点击的图层上；检查图标上方是否有其他图层挡住热点，再用演示中的高亮区域定位。
- 跳转到错误内容：检查事件的目标名称，以及同名画板的具体画面。先区分首页与推荐页，再逐个修正连接，不能只改导航文字。
- 目标列表里找不到画板：确认它与起始画板位于同一文档页面中。把相关画板放到同一页面后再建立连接。
- 开关只能开、不能关：检查开启变体是否也有单击事件，目标是否指回关闭变体，而不是再次指向自己。
- 返回页面后状态又变了：检查进入该画板的交互设置；如果当前操作提供“重置组件状态”，确认是否已开启。它会让目标容器内的组件回到初始状态。需要每次展示默认状态与需要保留上次选择，是两种不同的演示要求。
页面连通后，可以在演示界面复制分享链接，让产品经理、设计师和开发沿同一条路线查看结果，再用文件内评论记录具体需要修改的页面或控件。不要只问“动效好不好看”，还要让体验者尝试找到推荐内容、进入订单、返回首页，并独立完成一次开关操作。
交互原型表达的是界面与状态之间的关系，不等于已经实现后台业务。Pixso 的设计元素样式和尺寸等信息可用于开发交付，开发人员可以查看和复制代码信息；真实的数据保存、业务逻辑与工程接入仍需开发完成。
