创建原型连接

在原型模式下，通过拖拽连接线建立页面和图层之间的交互关系。

建立连接

方式一（拖拽连接）：选中触发图层 → 按住右侧的「+」拖动至目标容器 → 出现连接线和交互设置弹窗。

方式二（面板添加）：选中触发图层 → 右侧面板「交互」栏点击「+」→ 在弹窗中配置触发、动作和动画。

动作类型

动作是指触发后系统执行的具体行为。

动作	说明
前往	跳转到除自身所在一级容器之外的其他一级容器
返回上一级	返回上一级页面
显示/隐藏	改变目标图层的显示/隐藏状态（触发图层和目标图层需位于同一一级容器内）
容器内滚动	在同一容器内从触发图层滚动到目标图层位置
打开链接	在右侧输入要打开的网址
切换组件状态	在既有的组件状态之间切换
切换动态面板状态	调整同一一级容器内动态面板的可见性
打开浮层	打开 Dialog、Alert、Toast 等悬浮通知或临时页态
关闭浮层	关闭已设置为浮层的容器
替换浮层	在原有浮层上替换新的浮层

各动作详解

前往

跳转到除自身所在一级容器之外的其他一级容器。这是最常用的页面跳转动作。

返回上一级

返回上一个页面。

显示/隐藏

改变目标图层的显示/隐藏状态。触发图层和目标图层需位于同一一级容器内。

容器内滚动

当容器区域超出演示区域时，在同一容器内从触发图层滚动到目标图层位置。

操作步骤：

1. 为容器选择一个演示设备，确保容器长度大于演示页面
2. 选中触发图层，设置动作为「容器内滚动」，选择目标图层
3. 设置缩进数值，调整滚动到目标图层的位置
4. 设置动画为「即时」或「位移」

缩进说明：

• Y 轴缩进：调整目标图层与演示区域上下两边的距离
• X 轴缩进：调整目标图层与演示区域左右两边的距离

打开链接

选择「打开链接」后，在右侧输入要打开的网址。

切换组件状态

在既有的组件状态之间设置跳转关系。仅能在组件状态内设置，普通容器之间无法使用此动作。

切换动态面板状态

当触发图层和目标动态面板位于同一一级容器内时，可以切换动态面板状态。上一个状态/下一个状态为循环轮播效果。

打开浮层

浮层通常用于 Dialog、Alert、Toast 或抽屉等悬浮在已有页面上的通知或临时页态。

• 任意容器或图层均可设置「打开浮层」，但浮层对象只能是容器
• 浮层位置：正中心、左上角、底中心或自定义（拖拽浮层到目标位置）
• 点击浮层外关闭浮层：开启后，演示时点击浮层外部即可关闭
• 在浮层后添加遮罩：在底层与浮层之间增添蒙版，可设置颜色和透明度

关闭浮层

只对已设置为浮层的容器生效。选中浮层后，除了面板添加外，还可以拖动右侧「+」号快速选择「返回上一级」或「关闭浮层」。

替换浮层

在原有浮层上替换新的浮层。如果在非浮层容器上设置此动作，效果等同于「前往」。

常见问题

问题	解决方法
连接线拖不出来	确认已切换到原型模式
预览时点击没反应	检查触发条件和目标是否正确配置
目标下拉找不到页面	仅可选择当前页面下的容器，不支持跨页面跳转