开学特惠 会员低至4.4折 限时加赠 10000 AI积分 立即前往 arrow
跳至正文
查找其他问题

原型 · 交互效果

交互事件触发及行为

交互设计只需三步:
选择需要添加交互的组件或元素→ 选择触发方式 → 添加行为动作


🔹 一、交互触发方式

🔹 一、交互触发方式操作界面

用户可设置以下触发交互:

触发方式 说明 适用场景
单击 鼠标/手指单次点击 按钮操作、图标点击
双击 快速连续点击两次 图片放大/缩小
长按 按住超过0.5秒 显示详情菜单/删除功能
按下 按下鼠标或手指时 游戏角色跳跃/持续动作
抬起 松开鼠标或手指时 结束持续动作
鼠标移入 光标进入组件区域 显示提示信息
鼠标移出 光标离开组件区域 隐藏提示信息
右键 鼠标右键点击(仅PC) 调出上下文菜单
键盘按键 按下指定键盘按键 表单提交(Enter)/关闭(ESC)
左滑/右滑 横向滑动屏幕 轮播切换/页面导航
上滑/下滑 纵向滑动屏幕 刷新内容/滚动页面
监听 实时监测属性变化,可以监测到变量、组件长、宽,文本内容,不透明度等变化情况 搜索框即时反馈
摇一摇 晃动移动设备 随机功能/刷新内容
载入时 页面/组件加载完成 自动播放动画/初始化数据

💡 提示:

  • 移动端优先使用滑动手势,PC端注意鼠标悬停效果
  • 长按和监听适合需要持续响应的场景
  • 监听是指目标变量或属性值,产生任何变化时,就执行后续的行为

🔹 二、事件行为

🔹 二、事件行为操作界面

触发后可以执行这些操作:

行为 说明 典型用例
跳转页面 切换到指定页面 导航菜单跳转
返回来源页面 回到上一个访问页面 “返回”按钮
跳转超链接 打开外部网页/邮件链接 “联系我们”跳转邮箱
切换组件状态 改变组件样式/状态 按钮激活态/选项卡切换
滚动到 自动滚动到页面指定位置 “回到顶部”功能
显示/隐藏 控制组件可见性 展开更多选项/隐藏提示
变换 控制目标元素的大小、位置、翻转 卡片翻转
打开浮层 显示弹窗/下拉菜单 登录框、筛选菜单
关闭浮层 关闭当前打开的浮层 弹窗的“X”关闭按钮
切换到浮层 在多个浮层间切换 教程步骤引导
设置变量值 存储用户操作数据 记录筛选条件/保存选择状态
条件判断 根据条件执行不同操作 表单验证/权限检查

⚡ 进阶技巧:

  1. 行为链:单个触发可执行多个动作(例:提交表单 → 跳转页面 → 显示成功通知)
  2. 智能条件:用条件判断创建动态交互(例:IF 库存>0 : 显示购买按钮 ELSE 显示缺货标签)
  3. 多种触发方式并存:允许多种触发方式并存,若延迟时间一致时,按自上而下的顺序进行执行。否则按照延迟时间执行。

返回帮助中心,继续查找教程 →