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

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

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

由于还没使用过。

• 链接到当前项目的某个页面——选择该原型里面的某个页面，触发时在父级框架中打开
• 链接到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里面所有的基本交互动作的介绍了，建议你可以收藏起来，方便以后要用时快速查询。另外如果大家有什么问题，也欢迎和我交流，谢谢大家。

本文作者 @做产品但不是经理 。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！