原型与交互
在原型模式中把画板和元素连起来，添加跳转、返回、叠层、过渡动画与智能动画，在浏览器里直接体验接近真实产品的可点击原型。
原型模式
在右侧栏切换到原型模式，选中任意图层或画板后会出现连接手柄，拖动手柄到目标画板即可建立一条交互连线。连线可以指定触发方式、目标画板与过渡动画。完成后点击右上角的播放按钮进入查看模式，就能像真实产品一样点击体验。
触发方式
- 点击（Click）：最常用的跳转触发
- 鼠标按下 / 悬停：模拟按钮按压与悬浮态
- 鼠标进入 / 离开：用于提示、菜单的展开收起
- 延迟（After delay）：无需操作自动播放，适合引导页
- 拖拽开始 / 结束：模拟滑动卡片、抽屉等手势
动作类型
- 导航到画板：切换整屏内容
- 返回上一画板：自动回到来源屏
- 打开叠层（Overlay）：在当前屏之上叠加弹窗、菜单、工具提示
- 关闭叠层：收起浮层
- 切换组件变体：在同一画板内改变组件状态
- 打开外部链接：跳转到指定 URL
过渡动画
- 瞬切：无动画直接切换
- 淡入淡出：平滑的溶解效果
- 滑入：从左、右、上、下方向推入
- 推动：两屏联动的前后推移
- 移动进入 / 移动退出：目标屏沿指定方向出现或离开
- 智能动画：对同名图层的位置、尺寸、样式差异自动补间
叠层与滚动容器
模态框、Toast、下拉菜单这类不需要另开一屏的元素，适合用「打开叠层」实现，并可设置背景遮罩、点击外部关闭与定位方式。选中画板或图层后开启「滚动容器」，长内容超出时会在原型中真实滚动；导航栏等元素还可以固定在视口顶部或底部。
做一个登录流程
- 准备登录页、首页、忘记密码三个画板
- 把「登录」按钮连到首页，选择点击 + 淡入淡出
- 把「忘记密码」文字连到对应画板
- 在首页给底部弹窗元素建立叠层交互
- 进入查看模式，用手机尺寸预览并把链接分享给同事
实用提示
- 先保证流程跑通，再打磨动画细节，避免在会被删除的连线上浪费时间。
- 两个画板中保持同名的图层，智能动画才能正确识别并补间。