第六章 元件的交互与动态面板

第六章

元件的交互与动态面板CONTENTS目录01

6.1元件的交互02

6.2设置面板状态03

6.3交互样式设置04

6.4动态面板6.1元件的交互01交互事件的类型

交互事件类型元件事件由用户操作触发，如点击、悬停；页面事件涉及整体状态，如加载、滚动、尺寸改变。具体交互事件示例

Axure交互事件示例点击事件：点击元素触发，用于按钮点击、链接跳转；鼠标悬停事件：悬停元素触发，用于显示信息、下拉菜单；输入事件：输入内容触发，用于用户输入、表单验证。

页面与窗口相关事件页面加载事件：页面加载完成后触发，用于初始状态、数据加载。滚动事件：页面滚动时触发，用于滚动动画、悬浮效果。窗口尺寸改变事件：窗口大小改变时触发，用于响应式设计，调整布局和元素大小。交互事件的设置与管理

交互事件设置通过Axure“交互”面板，选元素，定义动作，预设交互，用户操作触发。

设计流程选择目标元素，进入“动作”选项卡，设定交互事件，实现动态响应。交互事件的作用与意义交互事件作用提升原型真实感，模拟用户交互，增强可用性，助团队理解评估设计。设计丰富性创造生动直观交互，展示理念功能，提升演示效果。交互事件的作用与意义：6.1.1交互事件—页面交互

查看与新建交互事件在“交互”面板可查看默认交互事件，单击“新建交互”按钮，下拉菜单可看到更多交互事件。交互事件的作用与意义：6.1.1交互事件—页面交互交互事件设置步骤

交互事件作用通过选中元件，设置“载入时”事件，执行预设动作，实现页面动态交互，如图6-2展示流程。交互编辑功能“交互编辑”对话框含“添加事件”、“添加动作”、“配置动作”和“组织动作”四模块，全面控制交互细节，确保效果精准。交互事件的作用与意义：6.1.1交互事件—页面交互

完成动画交互效果选择动画效果，在“时间”文本框设置动画持续长度，单击“确定”按钮，完成滚动到元件的交互效果。交互事件的作用与意义

元件交互事件选中元件，在“交互”面板单击“新建交互”按钮并点选动作；在弹出的“事件”下拉菜单添加交互事件；单击“打开连接”选项，在对话框输入或选择链接的页面、URL或文件路径。6.2设置面板状态026.2设置面板状态

设置面板状态通过"交互"面板的"单击时"选项，选择"动态面板"，实现面板状态切换，参见图6-4。

元件使用主要运用"动态面板"元件，从"元件库"拖至页面，双击设定交互，确保状态转换流畅。设置文本

设置文本拖入"矩形1"元件，鼠标移入时，设置文本为"此处显示正文内容"。设置图片

设置图片通过元件交互，鼠标移入时更换图片，多状态分别指定不同图片，实现动态展示效果。

图片调整拖入图片元件，调整大小位置，利用交互面板预设动作，增强用户视觉体验。设置选中

设置选中状态三种状态:选中、取消、切换，配合事件使用，设置元件状态。

设置列表选中项单击列表元件，指定选项选中，实现交互功能。启用/禁用启用/禁用用户可手动设置元件启用或禁用，亦可条件触发，配合动作使用，灵活控制元件状态。移动

移动动作应用使用"移动"动作,元件可按设定路径移动;选择目标,设参数,动画效果提升交互感,边界限制确保稳定。

创建页面效果结合"矩形2"与"主要按钮",双击"属性"下"鼠标单击时",添加移动动作,经设置达预期视觉。旋转旋转效果配置动作设置角度、方向、锚点，调整偏移，实现元件旋转，可动画化事件。设置尺寸

设置尺寸指定新尺寸，编辑宽高，选择锚点影响动画效果，选动画形式，设时间持续。

动画配置通过动画下拉列表选择形式，时间文本框设定持续时长，锚点决定中心点和效果。置于顶层/底层置于顶层/底层满足条件时，通过下拉菜单或交互编辑器，可将对象置顶或置底，实现元素层级调整。设置不透明度设置不透明度满足条件时，为元件设定不同不透明度效果，通过双击事件，于交互编辑器中选择设置，调整不透明度、动画与时长。获取焦点获取焦点在"交互"面板下,为"文本框"元件添加"获取焦点时"触发的"获取焦点"动作,勾选"文本框"和"选择文本"以自动选中文本。6.3交互样式设置036.3交互样式设置

交互样式设置用户拖放元件，选中后在“交互”面板点击“鼠标悬停”，弹出“设置交互样式”对话框进行配置。交互样式—填充

填充颜色选择用户通过“填充颜色”下拉列表选色，可更改元件色彩，支持单色、线性、径向填充。

渐变颜色调整滑块调节渐变色范围，单击添加新色，拖动调整角度，实现多角度填充，滑动“不透明度”改变透明效果。交互样式—阴影

阴影样式设置AxureRP9提供外部和内部两种阴影样式，点击“内部阴影”按钮弹出对话框，勾选“阴影”复选框可给元件增加投影效果。交互样式—阴影：边框选项设置

边框选项展开与基础设置单击“边框”三角形展开选项，可设置元件线宽、颜色、类型、位置和箭头样式，线宽用数值设置，有9种线段类型。交互样式—阴影：边框选项设置线段位置与箭头样式设置

边框选项设置通过"线段位置"可选择性显示元件四边边框，调整后元件外观变化显著。箭头样式添加创建线性元件或用"钢笔""链接"工具绘图，可通过"箭头样式"下拉列表为两端添加箭头。交互元件样式—圆角半径交互元件样式—圆角半径选择矩形、图片或按钮元件，设置圆角半径值，实现圆角效果，自定义边角类型，观察不同设置下的元件效果变化。交互元件样式—不透明度用户可以通过修改“不透明”的数值，获得不同透明度的元件效果交互元件字体样式

交互元件字体样式Axure支持自定义字体、字号、字型，可加粗、斜体、下画线，调整文本颜色及阴影效果，操作直观便捷。字体样式—行间距当使用文本段落时，可以通过设置行间距控制字体显示的效果，如图6-15所示字体样式—项目符号单击该选项后面的“项目符号”按钮，会为段落文本添加项目符号标志字体样式—对齐01字体样式可设置左、居中、右对齐，及顶、中、底垂直对齐。02文本段落调整对齐方式，增强版面布局灵活性，优化阅读体验。字体样式—边距

字体样式默认字体样式清晰易读，支持自定义选择，增强文档美观与专业度。

边距设置元件默认2px边距，可独立调整上下左右边距，优化布局灵活性。6.4动态面板04动态面板元件简介

动态面板元件AxureRP强大元件，实现多样动态效果，多种状态的超级元件，图6-16展示拖入页面过程。动态面板状态管理

动态面板操作双击元件，管理不同状态，添加、复制或删除。

面板功能指定名称，高效控制，图6-17展示操作界面。动态面板使用流程

动态面板的重要性动态面板是Axure重要元件，可完成大部分网页交互效果，创建需