Axure交互大全：Axure全交互模板及视频教程

我在指导粉丝设计原型的时候，发现大部分同学其实并没有系统的学习过axure的交互动作，他们设计交互时往往需要花大量的时候上网查询，而网上也没有一个关于axure全部完整交互的模板。

所以，我将axure里所有的基本交互动作整理成一个模板，并且将整个过程录了下来做成视频教程。新同学能够通过学习该模板，快速掌握axure里面的交互，打好扎实的基础；老同学在画原型时，如果忘记了某个交互，也可以当速查表，快速查询。

下面我们以文字的形式，快速介绍Axure里面的所有交互动作以及使用范围，总共分成链接、元件、全局变量、中继器和其他五大部分，从第一个打开链接到最后一个触发事件，大家可以选择需要的学习。

01 链接

1.1 打开链接

1.1.1 当前窗口

这个交互是axure里面最简单，也是最常用的交互，适用于页面跳转

• 链接到当前项目的某个页面——选择该原型里面的某个页面，触发时打开
• 链接到url或文件——输入url地址，包括网络地址（https://www.baidu.com）和本地地址（D:教程.html），注意：本地地址在预览时是不可用的，需要生成本地html才能生效，触发时打开url地址页面，这种一般适用于打开外部的地图、统计图表等内容。
• 重新加载当前页面——刷新页面，适用于数据刷新或者再来一次的原型案例。
• 返回上一页——常用交互，一般子页面返回主页面时使用。

1.1.2 新窗口/新标签

这个交互和上一个交互的不同处在于会在新的标签页面打开某个页面，这样原来的页面还保留，客户可以切换标签查看不同的内容。一般适用外部于广告，链接的跳转。

• 链接到当前项目的某个页面——选择该原型里面的某个页面，触发时在新标签中打开
• 链接到url或文件——输入url地址，包括网络地址（https://www.baidu.com）和本地地址（D:教程.html），注意：本地地址在预览时是不可用的，需要生成本地html才能生效，触发时在新标签中打开url地址页面，这种一般适用于打开外部的地图、统计图表等内容。

1.1.3 弹出窗口

这个交互和上一个交互的不同处在于该交互会以弹出的形式打开某个页面，我们可以同时看到两个页面的内容，弹出窗口的基本属性（大小、工具栏、共东条等）可以设置。一般类是选择机构、员工等页面要素比较多，不适用于下拉列表的情况，当然也适用于外部于广告，链接的跳转。

• 链接到当前项目的某个页面——选择该原型里面的某个页面，触发时在弹出窗口中打开
• 链接到url或文件——输入url地址，包括网络地址（https://www.baidu.com）和本地地址（D:教程.html），注意：本地地址在预览时是不可用的，需要生成本地html才能生效，触发时在弹出窗口打开url地址页面，这种一般适用于打开外部的地图、统计图表等内容。

1.1.4 父极窗口

父级窗口对应弹出窗口，就是在弹窗窗口中可以设置原来窗口的页面。这个交互一般和关闭页面一起用，例如点击了弹窗中的广告，先可以设置原来的页面跳转至产品页面，再关闭弹出窗口。

• 链接到当前项目的某个页面——选择该原型里面的某个页面，触发时在父级窗口中打开
• 链接到url或文件——输入url地址，包括网络地址（https://www.baidu.com）和本地地址（D:教程.html），注意：本地地址在预览时是不可用的，需要生成本地html才能生效，触发时在父级窗口打开url地址页面，这种一般适用于打开外部的地图、统计图表等内容。

1.2 关闭窗口

这个用于关闭当前窗口，但是axure里面有bug，要在axure软件里预览当前页面才能关闭，如果是从其他页面跳转过来就关闭不了，而且这个交互在原型中很少用，因为一般都是直接关闭浏览器的

1.3 在框架中打开链接

1.3.1 内联框架

这个也是每个项目必备的事件，一般项目原型会设置一个菜单页，点击菜单栏后在内联框架中打开某个页面。

• 链接到当前项目的某个页面——选择该原型里面的某个页面，触发时在内联框架中打开
• 链接到url或文件——输入url地址，包括网络地址（https://www.baidu.com）和本地地址（D:教程.html），注意：本地地址在预览时是不可用的，需要生成本地html才能生效，触发时在内联框架打开url地址页面，这种一般适用于打开外部的地图、统计图表等内容。

1.3.2 父级框架

父级框架对应内联框架，具体是指A框架内包含B框架，把框架内页面的能同个此交互控制A框架打开的页面。这个交互在实际运用中极少，作者还没使用过。

• 链接到当前项目的某个页面——选择该原型里面的某个页面，触发时在父级框架中打开
• 链接到url或文件——输入url地址，包括网络地址（https://www.baidu.com）和本地地址（D:教程.html），注意：本地地址在预览时是不可用的，需要生成本地html才能生效，触发时在父级框架打开url地址页面，这种一般适用于打开外部的地图、统计图表等内容。

1.4 滚动到元件<锚链接>

该交互能让页面滚动到指定的元件，在长页面中比较常见，例如内容分享平台，功能介绍，用户分析、可视化视图等。

1.5设置自适应视图

如果设置了多个分辨率的视图，该事件可以选择视图。这个事件基本不用，因为需求阶段时间比较紧急，很少有时间话几个分辨率的视图。另外也可以通过浏览器缩放来控制。

02 元件

2.1 显示隐藏

2.1.1 显示

显示这个交互动作非常常用，主要用于弹窗选择、提示等内容。显示动作可以增加动画，也可以选择显示效果。

• 灯箱效果，显示后，如果鼠标单击其他内容，隐藏显示内容，适用于提醒内容。
• 弹出效果，显示后，如果鼠标离开该区域，隐藏显示内容，常用语顶部菜单或下拉列表
• 推动元件，显示后，推动右侧或下方的元件，适用于根据不同选项显示不同内容的页面

2.1.2 隐藏

隐藏是和显示相对应的，主要用于弹窗选择、提示等内容后取消显示。隐藏动作同样可以增加动画。也可以拉动元件，对应显示时的推动元件，拉动元件就是将其复位。

2.1.3 切换可见性

切换可见性是显示与隐藏的结合，如果元件隐藏，可以将其显示，如果显示就可以将其隐藏，常用于菜单，卡片，下拉列表等。

2.2 设置面板状态

动态面板好比是一本书，每次只能看一页内容，设置面板状态即打开这本书的哪一页，同时也可以设置进入动画和退出动画，是否推动或拉动元件。应用的地方很多，例如图片轮播、相册、标签内容等。

• 跳转至指点页面——可以设置该动作跳转至那个页面，在页面不多的情况下可以这样设置。
• 向后翻页——触发时向后翻一页
• 向前翻页——触发时向前翻一页
• 循环播放——设置自动翻页的时间，以及是否重复轮播。
• 停止循环——暂停循环播放
• 跳转至状态名称或序号——可以使用函数，让动态面板跳转至指定值，在页面多的情况下使用该交互可以减少很多工作量。

2.3 设置文本

设置文本最常见的就是设置文本=输入框的内容，或者是设置显示文字的样式；除此之外也会用到一些函数，例如时间、日期、角度等等。

• 设置文字为输入值——这个交互常用于保存某个值=输入的值
• 设置文字为富文本——改变文字的大写、字体、颜色等样式。
• 设置文字为标准时间——这是会用于系统的顶部或者底部
• 设置文字为日期——获取系统日期，常用于维护后记录维护日期
• 设置文字为时间——获取系统时间，常用于维护后记录维护时间
• 设置保留小数点位数——计算后常用交互，例如计算百分比等。
• 设置文本为随机数字——随机设置一位0-1之间的树，这个是基础函数。
• 设置文本为6位随机数字——根据上面的随机函数，设置6位随机数字，常用于短信验证码
• 设置文本为随机字符——和上面的区别是这个包括英文大小写。
• 更多其他函数——其他函数一般比较少使用，后面有时间的话，作者也会做一期全函数的教程

2.4 设置图片

• 设置图片为中继器值——常用于中继器每项加载时的事件，设置图标为中继器中保存的图片
• 设置图片为外网图片——适用于输入url直接显示图片。

2.5 设置选中

该交互常用于标签、菜单、单选组

• 选中——选中时可以显示选中时的样式
• 取消选中——取消已选中的内容
• 切换选中状态——可以多次切换选中和未选中状态，常见于多选，或者是否已读条款等。
• 设置单选组——单选组内选中一个元件，其他元件自动取消选中

2.6 设置列表被选项

比较少用这个交互，一是系统的下拉列表不好用，没有搜索功能，一般好用的下拉列表都是用中继器制作的；其次是下拉单选列表可以默认选项，演示时单击也会显示该选项，一般情况下，是不需要使用该事件控制列表被选项的。只有一种情况，当下拉列表在中继器里面时，每项默认的选中项不同，就可以用该事件设置被选项。

2.7 启用/禁用

一般会由于维护时，部分信息不允许修改，或者没有权限时，就禁用该元件。

• 禁用——禁用使用元件，禁用样式也可以自定义设置。
• 启用——解除禁用事件

2.8 移动

一般用于游戏，或者是滑动验证等于。

• 移动——移动指定元件到固定位置，可以设置移动的动画，绝对位置和相对位置。绝对位置指元件的移动到那个坐标；相对位置指移动多少距离。
• 拖动——拖动元件跟着鼠标移动，可以增添移动的边界。

2.9 旋转

一般用于游戏，例如前段时间很火的口红机，或者是摆正图片验证登录。

• 旋转的方向——顺时针或者逆时针
• 旋转的角度——按需填写，如果需一直旋转可以填写大一点的角度，如36000000就是10万圈
• 锚点——至旋转的中心点，一般选择中心。如果是摆锤类的就选择顶部
• 锚点偏移——例如偏移中心点的距离
• 动画——设置选择的动画和时间。

2.10 设置尺寸

使用该交互同样需要选择锚点和动画，一般应用于放大查看商品、图片等。

• 设置固定尺寸——设置元件的尺寸为固定的值
• 放大——放大元件，一般搭配函数使用，例如放大目标10%的高度，函数应为[[target.height*1.1]]
• 缩小——缩小元件，同样是搭配函数使用，例如缩小目标10%的高度，函数应为[[target.height*0.9]]

2.11 顶层/底层

这两个交互比较少用，因为一般用显示事件是可以直接设置显示在顶层的位置。可能多个动态面板都固定在顶层时需要用到该交互。

• 顶层——将元件设置到顶层
• 底层——将元件设置到底层

2.12 设置不透明度

这个交互也是很少使用，因为在元件颜色设置时就可以设置不透明度。该事件一般应用于动态设置不透明度的，例如修图软件等。

2.13 获取焦点

这个交互一般适用于判断错误后焦点回到输入框，方便客户使用。例如手机号码输入完，点提交按钮判断手机号格式错误时，焦点回到手机号码输入框。

获取焦点可以选择是否选中元件的文本。

2.14 展开折叠树节点

这个交互是针对axure里面的树元件的，但是比较少使用。因为树元件点击时本来就可以展开或折叠，不需要该事件触发，其次是axure自动的树不太好用，没有增删改查的功能，所以一样不使用自带的树元件。

03 全局变量

全局变量一般做高保真会用到，可以简单理解为页面与页面之间传递数据的值。例如用张三的账号登录成功后，那所有页面都需要显示张三的信息，这时就需要用全局变量来传递该参数。

04 中继器

中继器就像excel表格，能够储存列表信息（文字、图片、页面），能实现动态增删改查效果。所以中继器是在高保真原型中最重要的一个事件

4.1 排序

• 数字排序——可以按中继器表格中的某一列数字进行升降序切换排序
• 文本排序——可以按中继器表格中的某一列文本进行升降序切换排序
• 日期排序——可以按中继器表格中的某一列日期进行升降序切换排序

4.2 移除排序

可以移除中继器列表中的单个排序或者所有排序

4.3 筛选

• 分类筛选——可以根据用户选择进行分类筛选，最常见的是商品分类
• 精确搜索——可以输入文字，快速查询中继器列表种对应的数据行
• 模糊搜索——可以输入文字，快速查询中继器列表中包含输入文字的数据行

4.4 移除筛选

可以移除中继器列表中的单个筛选或者所有筛选

4.5 设置显示页面

如果中继器列表数据太多，一般会用分页显示的方式，该交互就是可以设置中继器显示那一页的内容。可以设置为显示下一页、显示上一页、显示最后一页、显示第一页或者显示具体页面。

4.6 设置每页显示数目

初始的显示的数目可以在中继器样式分页里面设置，演示时如果需要更每页显示数目可以用该交互设置。

4.7 添加行

可以在中继器列表中新增一行内容。

4.8 标记和取消标记

• 标记——简单的理解为选中中继器的某一行或者多行，后续可以更新已标记行的内容或者删除行
• 取消标记——简单的理解为取消选中的某一行

4.9 更新行

• 更新该行——更新当前行的列表内容
• 批量更新——可以先标记需要更新的行，也可以写入更新行的条件，然后批量更新。

4.10 删除行

• 删除该行——删除当前行的列表内容
• 批量删除——可以先标记需要删除的行，也可以写入删除行的条件，然后批量删除。

05 其他

5.1 等待

这个时间一般用于需要延迟的交互动作，例如加载中，等待几秒后在进入对应页面；又例如提示自动隐藏，可以设置提示几秒后自动隐藏提示。等待这个事件可以隔开其他两个事件发生的时间。

5.2 其他

其他这个交互，可以设置在弹出窗口显示的文字，暂时未发现该交互有什么特别的作用，因为只能输入文字，且不能用函数，弹出窗口没有交互，所以作者也很少用这个交互。

5.3 触发

这个也是高保真中很常用的交互，他可以触发其他交互事件发生，特别是如果一个按钮中有多个交互，另外一个新的按钮也时同样的交互，那我们这是直接用触发，就不需要重新把交互再写一次。

那以上就是Axure里面所有的基本交互动作的介绍了，建议你可以收藏起来，方便以后要用时快速查询。另外如果大家有什么问题，也欢迎和我交流，谢谢大家。