交互事件触发及行为
交互设计只需三步:选择需要添加交互的组件或元素→ 选择触发方式 → 添加行为动作
🔹 一、交互触发方式
用户可设置以下触发交互:
| 触发方式 | 说明 | 适用场景 |
|---|---|---|
| 单击 | 鼠标/手指单次点击 | 按钮操作、图标点击 |
| 双击 | 快速连续点击两次 | 图片放大/缩小 |
| 长按 | 按住超过0.5秒 | 显示详情菜单/删除功能 |
| 按下 | 按下鼠标或手指时 | 游戏角色跳跃/持续动作 |
| 抬起 | 松开鼠标或手指时 | 结束持续动作 |
| 鼠标移入 | 光标进入组件区域 | 显示提示信息 |
| 鼠标移出 | 光标离开组件区域 | 隐藏提示信息 |
| 右键 | 鼠标右键点击(仅PC) | 调出上下文菜单 |
| 键盘按键 | 按下指定键盘按键 | 表单提交(Enter)/关闭(ESC) |
| 左滑/右滑 | 横向滑动屏幕 | 轮播切换/页面导航 |
| 上滑/下滑 | 纵向滑动屏幕 | 刷新内容/滚动页面 |
| 监听 | 实时监测属性变化,可以监测到变量、组件长、宽,文本内容,不透明度等变化情况 | 搜索框即时反馈 |
| 摇一摇 | 晃动移动设备 | 随机功能/刷新内容 |
| 载入时 | 页面/组件加载完成 | 自动播放动画/初始化数据 |
💡 提示:
- 移动端优先使用
滑动手势,PC端注意鼠标悬停效果长按和监听适合需要持续响应的场景监听是指目标变量或属性值,产生任何变化时,就执行后续的行为
🔹 二、事件行为
触发后可以执行这些操作:
| 行为 | 说明 | 典型用例 |
|---|---|---|
| 跳转页面 | 切换到指定页面 | 导航菜单跳转 |
| 返回来源页面 | 回到上一个访问页面 | “返回”按钮 |
| 跳转超链接 | 打开外部网页/邮件链接 | “联系我们”跳转邮箱 |
| 切换组件状态 | 改变组件样式/状态 | 按钮激活态/选项卡切换 |
| 滚动到 | 自动滚动到页面指定位置 | “回到顶部”功能 |
| 显示/隐藏 | 控制组件可见性 | 展开更多选项/隐藏提示 |
| 变换 | 控制目标元素的大小、位置、翻转 | 卡片翻转 |
| 打开浮层 | 显示弹窗/下拉菜单 | 登录框、筛选菜单 |
| 关闭浮层 | 关闭当前打开的浮层 | 弹窗的“X”关闭按钮 |
| 切换到浮层 | 在多个浮层间切换 | 教程步骤引导 |
| 设置变量值 | 存储用户操作数据 | 记录筛选条件/保存选择状态 |
| 条件判断 | 根据条件执行不同操作 | 表单验证/权限检查 |
⚡ 进阶技巧:
- 行为链:单个触发可执行多个动作(例:
提交表单 → 跳转页面 → 显示成功通知)- 智能条件:用
条件判断创建动态交互(例:IF 库存>0 : 显示购买按钮 ELSE 显示缺货标签)- 多种触发方式并存:允许多种触发方式并存,若延迟时间一致时,按自上而下的顺序进行执行。否则按照延迟时间执行。