交互设计功能使用指南
交互设计功能让您能够轻松创建具有丰富交互效果的原型，并支持实时预览体验。
功能概览
交互设计功能简单来说就是为图层添加交互行为动作，使其能够响应用户操作事件，执行动作。比如为页面中的下一步按钮添加「点击」触发事件，设置「前往」动作，选择某个页面作为目标，即可在预览时点击按钮，页面跳转到下一页。
交互设计功能支持为设计元素添加多种事件触发器和动作响应，包括：
- 9 种事件类型：单击、双击、悬停、鼠标进入/离开、按下/释放鼠标、右键点击、延时触发
- 6 种动作类型：页面跳转、返回上级、显示/隐藏、滚动定位、打开链接
- 9 种动画类型：淡入淡出、滑动、移动、推入、位移、智能动画等
- 11 种动画效果：线性、缓动、弹性、自定义贝塞尔曲线和弹簧配置
基础操作
进入交互设计模式
在右侧属性面板中点击进入「原型」选项卡
添加交互
选中任意设计元素后，在交互模块点击「+」按钮，即可为该元素配置添加交互行为。 或者在画布上选择要添加的交互图层，图层选择框右侧会显示添加点，拖拽添加点到目标页面，会直接创建此图层到目标页面的跳转交互。（见下方实战案例演示视频）
配置触发事件
支持的事件类型包括：
- 单击：最常用的交互触发方式
- 双击：适用于特殊操作
- 悬停时：鼠标在元素上移动时触发
- 鼠标进入：鼠标进入元素区域时触发
- 鼠标离开：鼠标离开元素区域时触发
- 按下鼠标时：鼠标按下瞬间触发
- 鼠标右键：右键点击时触发
- 释放鼠标时：鼠标释放瞬间触发
- 延时：指定时间后自动触发
延时事件配置： 当选择延时事件时，需要设置延时时间（单位：毫秒）。例如设置 2000 表示 2 秒后自动触发。
动作配置
页面跳转
跳转到指定的页面或画板。
- 目标：选择要跳转的目标页面
- 支持跳转到同一项目内的其他画板
返回上一级
返回到上一个访问的页面，类似浏览器的后退功能。
显示/隐藏
控制目标元素的可见性。
显示状态选项：
- 切换状态：在显示和隐藏之间切换
- 隐藏元素：强制隐藏目标元素
- 显示元素：强制显示目标元素
使用场景：
- 切换菜单的显示隐藏
- 显示/隐藏弹窗对话框
- 实现选项卡切换效果
滚动到
将页面滚动到指定元素的位置。
- 目标元素：选择要滚动到的目标元素
- X 偏移：水平方向的偏移像素（可选）
- Y 偏移：垂直方向的偏移像素（可选）
应用场景：
- 锚点导航
- 一键回到顶部
- 表单验证后滚动到错误字段
打开链接
在新窗口或当前窗口打开指定的网址。
- 链接地址：输入完整的 URL 地址（如：https://www.calicat.cn）
设置动画
动画类型
- 即时：无动画，立即执行
- 溶解：淡入淡出效果
- 智能动画：自动识别匹配两个页面之间相同的元素（元素需克隆或复制自同页面），并自动生成过渡动画。
- 移入：移动进入效果
- 移出：移动离开效果
- 推入：推送进入效果
- 滑入：从指定方向滑入
- 滑出：向指定方向滑出
动画时长
设置动画执行的时间长度，单位为毫秒。
推荐时长：
- 微交互：150-300ms
- 页面切换：300-500ms
- 复杂动画：500-800ms
动画效果
- 匀速：恒定速度
- 缓动：慢-快-慢
- 缓入：慢速开始
- 缓出：慢速结束
- 缓入缓出：慢-快-慢，更平滑
- 自定义贝塞尔曲线：精确控制
- 柔和：轻柔的动画效果
- 快速：快速响应
- 弹性：弹跳效果
- 缓慢：缓慢执行
- 自定义弹性配置：弹簧物理效果
动画方向
适用于滑入、滑出、移入、移出、推入等动画类型。
- 左：从左侧或向左侧
- 右：从右侧或向右侧
- 上：从上方或向上方
- 下：从下方或向下方
自定义配置
贝塞尔曲线： 输入四个数值定义自定义缓动曲线，格式：[x1, y1, x2, y2]
弹性配置： 调整弹簧物理参数：
- 刚度 (stiffness)：弹簧的硬度，默认 100
- 阻尼 (damping)：阻尼系数，默认 10
- 质量 (mass)：物体质量，默认 1
预览
添加管理流程
默认情况下当设置了有至少两个页面间的交互跳转时，系统会自动添加一个流程起点，在画布上起点页面的左上角显示标记。在预览时，此页面将作为初始页面显示。 你也可以选择某个页面，在右侧属性面板手动添加或删除流程起点，并设置流程说明。 你也可以通过拖拽画布上的流程起点标记到新的页面上来变更流程起点。 当未选择任何页面或图层时，右侧属性面板将列出画布上所有的流程，你可以在此定位到流程起点页面，或复制此流程的预览链接。
预览设置
在交互设计模式下，未选中图册时，可对预览页面进行设置，包括预览模式的背景色、设备模型 此设置对点击播放预览跳转的预览页面生效。
预览交互
完成交互设计后，点击右上角的「►」按钮进入交互预览模式。
在预览模式下，您可以：
- 实时体验所有交互效果
- 测试不同设备尺寸下的表现
- 分享链接给团队成员查看
实战案例
一个简单的背单词 App 核心流程
- 从首页导航到背单词页面、单词测试页面
- 从单词测试页面导航到测试结果页面
- 测试结果页面添加滚动交互、点击标题滚动到顶部
- 设置各页面的返回按钮返回到上一页
- 设置背单词页面显示隐藏解释
常见问题
Q：如何删除已添加的交互？
A：选中元素后，在交互面板中点击交互项右侧的「-」删除按钮。
Q：一个元素可以添加多个交互吗？
A：可以，每个元素支持添加多个不同的交互行为。
Q：交互预览时动画不流畅怎么办？
A：检查动画时长设置，减少同时执行的动画数量，或降低动画复杂度。
Q：为什么页面在预览里无法滚动查看，怎么添加滚动
A：滚动的前提是：
- 页面（画框容器）有超出尺寸范围的子级图层，这种情况才「需要」滚动。
- 给页面在「原型」面板设置超出滚动行为（垂直或者其他）
如视频演示：