Axure 11 新特性:布局、交互样式、事件等功能升级

2024-09-2210:05:43原型设计Comments292 views字数 1095阅读模式

布局功能升级

Axure 11 提供了一种新的布局方式,叫【按照网格布局】(Distribute on grid),可以使选中的元件按照网格进行整齐排列:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

当选中一组已经等距分布的元件时,可以通过鼠标拖拉的方式快速调整元件之间的间距:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

或者拖动其中一个元件到另一个元件上来交换它们的位置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

样式功能升级

Axure 11 可以给元件设置模糊效果,选中元件后,在【样式】(Style)板块找到【模糊】(Blur)分类,勾选【原件模糊】(Widget blur)后,可以调整模糊的效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

除了样式模糊,还可以给元件添加背景模糊,在【模糊】(Blur)分类下勾选【背景模糊】(Backdrop blur):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

注意不要给设置背景模糊的元件添加填充背景色,否则这个背景模糊的效果就看不出来了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

交互样式功能升级

如果我想实现鼠标悬停时放大图片,离开时恢复原始大小,如果是在旧版本,需要通过交互事件来实现,而在新版本,通过交互样式效果就可以实现了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

在【交互】(Interactions)板块找到【样式效果】(Style effects),点击【+添加样式效果】(+Add style effect),选择【鼠标移入】(MouseOver),然后选择【转换】(Transform),可以设置【缩放】(Scale to)或【旋转】(Rotate):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

我这里配置的是放大1.5倍,看看浏览器中的效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

这个比配置交互事件快多了,但这个转换效果略显生硬,因此,Axure 11 还提供了【过渡】(Transition),在刚刚配置转换的位置,点击【样式效果】(Style effects)右侧图标可以设置过渡效果和时间:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

配置好再来看看效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

交互事件升级

应用样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

通过交互事件修改元件样式,给元件添加点击交互,找到【应用样式】(Apply style)事件,选择【目标】(Target)后配置要应用的样式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

几乎所有的样式都可以进行配置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

并且只要不勾选【清除已经应用的样式】(Clear previously applied styles),还可以实现样式叠加,看看效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

变量值改变文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

如果我们需要在页面上显示一段文本内容,内容来自一个变量,有很多地方的操作都可以改变这个变量,如果是在旧版本,需要在所有改变这个变量的地方同时配置更新页面文本内容的事件,但是在 Axure 11 上,提供了一个变量改变的事件,配置起来就省事多了,只需要配置对应变量改变时更新文本内容,后续不管有多少处地方会影响变量值,只要改变了变量值,就会触发更新的事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

只需要点击【页面】(Page),然后选择需要添加事件的变量,设置事件即可:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

在其他元件添加改变变量事件的时候,就无需再添加改变文本的事件,看看效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

Axure 11 新特性:布局、交互样式、事件等功能升级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/65147.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/65147.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定