互联网产品开发（AIGC版）课件 6.2 原型交互设计进阶.pptxVIP

PRODUCT

互联网产品交互设计与开发

主讲人：

时间：2026-1-23

6-2原型交互设计进阶

01

交互核心构成

页面触发事件·元件触发事件·交互动作配置

02

交互逻辑与变量应用

逻辑条件设置·全局变量·局部变量实战

03

高级元件应用

动态面板状态管理·中继器数据交互与应用

01

交互核心构成

原型交互设计进阶

本章将深入解析Axure交互设计的核心层级架构，重点讲解页面触发事件的原理与基础操作，帮助学习者建立清晰的交互逻辑思维，为构建高保真原型奠定坚实基础。

交互层级

事件触发

页面触发事件

交互核心构成

鼠标类事件

单击时(OnClick)

双击时(OnDoubleClick)

右击时(OnContextMenu)

鼠标移动时(OnMouseMove)

键盘类事件

按键按下时

OnKeyDown

按键松开时

OnKeyUp

主要用于捕获用户键盘输入操作，常用于快捷键或表单输入验证。

页面类事件

窗口尺寸改变时

页面载入时

窗口滚动时

视图状态改变时

元件触发事件

交互核心构成

交互面板切换

在工作区选中任意元件，右侧交互窗格将自动聚焦，即时显示当前元件可用的所有触发事件列表，便于快速配置。

事件类型分类

系统内置事件主要划分为三大类：鼠标交互（如单击、悬停）、键盘输入（按键响应）及形状变化（尺寸或位置改变）。

高级元件专属

动态面板（状态改变时）、中继器（每项加载时）及文本框（文本改变时）等高级元件，拥有满足复杂逻辑的高频专属事件。

元件命名小贴士

交互核心构成

规范命名习惯

建议给元件命名为英文或拼音。避免使用默认名称（如“矩形1”），保持命名清晰可读。

提升检索效率

规范的命名便于在添加交互事件时，通过搜索框快速查找对应元件，极大提升原型开发效率。

动作

交互核心构成

交互响应

动作是对交互事件的响应。

只有添加了动作，

交互事件才有实际意义。

链接动作

用于页面跳转或窗口操作，如打开链接、关闭窗口、在框架中打开链接等。

元件动作

针对元件属性的控制，如显示/隐藏、设置文本、移动、旋转、设置尺寸等。

中继器动作

专门用于操作中继器数据，包含添加行、删除行、更新行、添加排序、移除筛选等。

其他动作

辅助交互逻辑的动作，如等待、设置变量值、触发事件、其他等高级控制功能。

交互动作与实操案例

交互核心构成

配置流程详解

实操案例：导航菜单联动

点击一级菜单切换二级菜单显示

1 添加交互事件

选中目标元件（如一级菜单），在交互窗格点击“新建交互”，选择如“鼠标单击时”等触发条件。

2 组织执行动作

在动作列表中选择需要响应的命令，例如“元件动作”下的“显示/隐藏”或“设置面板状态”。

3 设置目标参数

指定目标对象（如二级菜单动态面板），配置动画效果（如向下滑动）及持续时间，完成逻辑闭环。

localhost:8080/index.html

02

交互逻辑与变量应用

原型交互设计进阶

本章节将深入解析Axure交互逻辑条件的设置规则，重点探讨全局变量与局部变量的定义与区别。通过实战案例，掌握变量在数据传递与复杂逻辑判断中的核心应用技巧。

逻辑条件

全局变量

局部变量

交互逻辑条件设置

交互逻辑与变量应用

进入情形编辑器

在交互设置中，通过双击已添加的用例，或在交互编辑器顶部点击“启用情形”按钮，即可打开逻辑条件设置面板，为交互添加判断规则。

条件匹配逻辑

匹配所有(AND)：需满足列表中所有条件才触发动作；匹配任何(OR)：只要满足列表中任意一个条件即可触发。

条件设置三要素

完整的逻辑判断由三部分构成：比较主体（如元件文字）、运算符

（如等于、包含）以及比较对象（具体值或变量）。

CaseEditor

全局与局部变量应用

交互逻辑与变量应用

全局变量

作用于整个项目范围，主要用于在不同页面之间进行数据传递与状态存储。

局部变量

仅在单个交互动作内部有效，常用于函数引用或临时计算，不跨页面。

设置规则

变量名需由字母或数字组成，长度小于25字符，且名称中严禁包含空格。

03

高级元件应用

原型交互设计进阶

本章节重点讲解动态面板与中继器两种核心高级元件。深入解析多状态容器的交互逻辑与动态数据管理的实现方法，助力原型设计从静态展示向高保真动态交互进阶。

动态面板

中继器

动态面板的创建

高级元件应用

方式一：直接拖曳法

直接从左侧元件库面板中找到“动态面板”元件，将其拖曳至工作区域即可完成创建。

方式二：右键转换法

选中工作区中的普通元件，点击鼠标右键，在弹出的菜单中选择“转换为动态面板”。

动态面板的应用

高级元件应用

编辑模式启动

双击工作区中的动态面板元件，即可进入专属编辑区域。此时界面会显示蓝色虚线边框，用于区分当前处于面板内部状态，避免与正常页面