14
社区成员
发帖
与我相关
我的任务
分享Axure疑难杂症：深度理解与认识“事件”“动作”（玩转交互）社区免费阅读
亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！
Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420
课程主题：深度理解与认识“事件”“动作”
主要内容：事件、动作定义、本质、辩证关系、执行顺序
应用场景：原型交互
目录
正文内容：
"事件"与"动作"是构建动态交互的基石，却也是最容易被忽视或误解的深层逻辑。许多初学者止步于简单的点击跳转，而资深用户则常陷入"功能能用但不明其理"的困境——为什么有的交互流畅精准，有的却总伴随意外的bug？为什么看似相同的设置，效果却大相径庭？
关键认知：交互不是功能的堆砌，而是事件与动作的精密舞蹈。
从事件触发的底层机制，到动作执行的优先级逻辑；从单一事件的精细控制，到多动作链式的复杂协作。
小贴士：以下内容建议收藏，当你做不出交互或者出现交互BUG再来细读！
1、解读“事件”核心定义与本质
核心定义：交互的触发器，交互设计的起点。
定义解读：axure中所有交互设计的第一步先要选事件，事件触发交互设计；
事件触发的主体：那么有的同学会问：好的，通过定义的学习我知道做交互要先选事件，那么我怎么知道这地方要做交互？这个问题归因：属于做原型设计，没有用户思维、产品思维。
上述问题涉及到对页面、元件的场景应用认识，也是事件触发的主体认识，产品经理要保持一个良好的习惯：在设计元件控件、元件组合、页面布局、数据赋值时，一定要思考：是谁用？
通常事件触发的主体包含：用户、系统、组件。
-
用户行为：如点击（Click）、鼠标悬停（Mouse Enter）、拖动（Drag）等；
-
系统行为：如页面加载（Page Load）、窗口尺寸变化（Window Resize）等；
-
组件状态变化：如动态面板状态切换（Panel State Change）、文本输入（Text Changed）等
事件的本质特性
-
被动性：事件本身不产生效果，需依赖“动作”（Action）响应；
-
可嵌套性：同一事件可触发多个动作（如点击时同时切换面板+显示提示）；
-
优先级：部分事件存在触发顺序（如“鼠标按下”优先于“鼠标释放”）
2、解读“动作”核心定义和本质
核心定义：由事件触发的一系列指令，用于实现页面或元件的动态变化，
定义解读：响应事件而执行的具体操作，它是交互设计的“执行单元”，决定了“要做什么”。如果说事件是交互的“触发器”，那么动作就是交互的“响应行为”。
-
导航类：打开链接、跳转页面、返回上一页等；
-
显示控制类：显示/隐藏元件、切换动态面板状态、设置文本等；
-
数据操作类：设置变量值、提交表单、调用函数等；
-
动画效果类：移动、旋转、淡入淡出等。
动作的本质特性：
-
依赖事件：没有事件，动作无法自主执行；
-
可组合性：一个事件可触发多个动作（按顺序执行）；
-
可配置性：每个动作可设置详细参数（如动画时长、目标元件等）。
3、“事件”与“动作”的辩证关系
-
事件是“因”：决定何时触发（When）；
-
动作是“果”：决定做什么（What）。
例如：
事件：按钮被点击（OnClick） → 动作：显示弹窗（Show Popup）。
-
事件是条件（When）：
当用户点击按钮时... -
动作是行为（What）：
...隐藏弹窗并跳转到下一页
4、“事件”与“动作”的执行顺序
从上向下依次执行（线性执行）、先隐藏再显示、
嵌套事件由内而外执行（冒泡机制）、页面事件优先于元件事件执行
Axure的交互执行顺序遵循“线性执行+冒泡规则”的混合逻辑。掌握这些细节，可以避免90%的交互Bug，并实现更复杂的动态效果。（如遇同一事件多个动作bug不能实现，可尝试使用“等待”强制执行，人为干预执行节奏，在一些特殊场景下适用）
附件一、通用事件解释
1. 移动时
触发条件：当元件通过交互动作（如拖动或设置移动动作）改变位置时触发
典型应用：实现拖拽效果、位置变化后的回调
2. 旋转时
触发条件：当元件通过交互动作改变旋转角度时触发
典型应用：仪表盘指针旋转、图形变换
3. 尺寸改变时
触发条件：当元件通过交互动作改变宽度或高度时触发
典型应用：可调整大小的面板、响应式布局
4. 显示时
触发条件：当元件从隐藏状态变为显示状态时触发
典型应用：显示弹窗时的初始化操作
5. 隐藏时
触发条件：当元件从显示状态变为隐藏状态时触发
典型应用：关闭弹窗时的清理操作
6. 获取焦点时
触发条件：当输入框等可聚焦元件被选中时触发
典型应用：显示输入提示、高亮当前输入项
7. 失去焦点时
触发条件：当输入框等可聚焦元件取消选中时触发
典型应用：输入验证、自动保存
8. 选中时
触发条件：当单选按钮或复选框被选中时触发
典型应用：选项切换、条件显示
9. 取消选中时
触发条件：当单选按钮或复选框取消选中时触发
典型应用：取消选择后的状态重置
10. 选中改变时
触发条件：当单选按钮或复选框的选中状态改变时触发（包含选中和取消选中）
典型应用：动态表单联动
11. 载入时
触发条件：当中继器项或页面加载完成时触发
典型应用：初始化列表数据、页面加载动画
12. 文本改变时
触发条件：当输入框或文本元件的文本内容改变时触发
典型应用：实时搜索、字数统计
13. 选项改变时
触发条件：当下拉列表框的选中选项改变时触发
典型应用：级联选择、动态筛选
附件二、通用动作解释
1. 显示/隐藏
动作解释：控制元件的显示或隐藏状态
典型应用：弹窗开关、下拉菜单、提示信息
参数设置：可设置显示/隐藏时的动画效果（淡入淡出、滑动等）
注意事项：隐藏的元件无法交互
2. 设置面板状态
动作解释：切换动态面板的不同状态
典型应用：轮播图切换、Tab页签切换、步骤流程
参数设置：可设置转场动画和时间
特殊技巧：配合"面板状态改变时"事件实现复杂交互
3. 设置文本
动作解释：改变文本元件的内容
典型应用：计数器、动态标题、表单反馈
高级用法：可插入变量值（如[[LVAR1]]）
4. 设置图片
动作解释：更换图片元件的图片来源
典型应用：图片切换器、头像上传预览
参数设置：支持外部图片链接或本地图片
5. 设置选中
动作解释：设置单选按钮或复选框的选中状态
典型应用：表单重置、选项预选
关联事件：会触发"选中改变时"事件
6. 设置列表选中项
动作解释：设置下拉列表的当前选中项
典型应用：表单默认值、动态选项切换
注意：需要先设置列表选项值
7. 启用/禁用
动作解释：控制元件是否可交互
典型应用：表单提交按钮状态、权限控制
视觉提示：被禁用的元件会自动变灰
8. 移动
动作解释：使元件移动到指定位置
典型应用：拖拽效果、滑动菜单、游戏元素
参数设置：可设置移动轨迹（直线/曲线）和时长
9. 旋转
动作解释：旋转元件到指定角度
典型应用：仪表盘指针、加载动画
参数设置：可设置旋转中心和缓动效果
10. 设置尺寸
动作解释：调整元件的宽度和高度
典型应用：可调整大小的面板、进度条
高级用法：配合"尺寸改变时"事件实现响应式效果
11. 置于顶层/底层
动作解释：调整元件的叠放顺序
典型应用：模态弹窗、多层级菜单
注意：只影响同一父容器内的元件层级
12. 设置不透明
动作解释：调整元件的透明度
典型应用：淡入淡出效果、禁用状态视觉提示
参数范围：0（完全透明）到100（完全不透明）
13. 获取焦点
动作解释：使输入框等可聚焦元件获得焦点
典型应用：表单自动聚焦、搜索框快捷定位
关联事件：会触发"获取焦点时"事件
14. 展开/收起树节点
动作解释：控制树形菜单节点的展开状态
典型应用：导航菜单、目录结构
前提条件：需使用树形菜单元件
15. 设置自适应视图
动作解释：切换到指定的自适应视图
典型应用：响应式设计、多设备适配
注意：需要预先设置好各视图的布局
16. 触发事件
动作解释：手动触发其他元件的事件
典型应用：跨元件交互、复杂流程控制
高级技巧：可配合"自定义事件"实现模块化设计
相关课程直通车：
Axure疑难杂症：统计分析页面引入Echarts示例动态效果-CSDN博客
Axure疑难杂症：完美解决中继器筛选问题（时间条件筛选、任性筛选）-CSDN博客
...全文
请发表友善的回复…
发表回复
