布局功能升级

Axure 11 提供了一种新的布局方式,叫【按照网格布局】(Distribute on grid),可以使选中的元件按照网格进行整齐排列:

Axure 11 新特性快速入门

当选中一组已经等距分布的元件时,可以通过鼠标拖拉的方式快速调整元件之间的间距:

Axure 11 新特性快速入门

或者拖动其中一个元件到另一个元件上来交换它们的位置:

Axure 11 新特性快速入门

样式功能升级

Axure 11 可以给元件设置模糊效果,选中元件后,在【样式】(Style)板块找到【模糊】(Blur)分类,勾选【原件模糊】(Widget blur)后,可以调整模糊的效果:

Axure 11 新特性快速入门

除了样式模糊,还可以给元件添加背景模糊,在【模糊】(Blur)分类下勾选【背景模糊】(Backdrop blur):

Axure 11 新特性快速入门

注意不要给设置背景模糊的元件添加填充背景色,否则这个背景模糊的效果就看不出来了。

交互样式功能升级

如果我想实现鼠标悬停时放大图片,离开时恢复原始大小,如果是在旧版本,需要通过交互事件来实现,而在新版本,通过交互样式效果就可以实现了。

在【交互】(Interactions)板块找到【样式效果】(Style effects),点击【+添加样式效果】(+Add style effect),选择【鼠标移入】(MouseOver),然后选择【转换】(Transform),可以设置【缩放】(Scale to)或【旋转】(Rotate):

Axure 11 新特性快速入门

我这里配置的是放大1.5倍,看看浏览器中的效果:

Axure 11 新特性快速入门

这个比配置交互事件快多了,但这个转换效果略显生硬,因此,Axure 11 还提供了【过渡】(Transition),在刚刚配置转换的位置,点击【样式效果】(Style effects)右侧图标可以设置过渡效果和时间:

Axure 11 新特性快速入门

配置好再来看看效果:

Axure 11 新特性快速入门

交互事件升级

应用样式

通过交互事件修改元件样式,给元件添加点击交互,找到【应用样式】(Apply style)事件,选择【目标】(Target)后配置要应用的样式:

Axure 11 新特性快速入门

几乎所有的样式都可以进行配置:

Axure 11 新特性快速入门

并且只要不勾选【清除已经应用的样式】(Clear previously applied styles),还可以实现样式叠加,看看效果:

Axure 11 新特性快速入门

变量值改变

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

只需要点击【页面】(Page),然后选择需要添加事件的变量,设置事件即可:

Axure 11 新特性快速入门

在其他元件添加改变变量事件的时候,就无需再添加改变文本的事件,看看效果:

Axure 11 新特性快速入门

Disclaimer: All articles on this site, unless otherwise noted or tagged, are original publications of this site. Any individual or organization is prohibited from copying, misappropriating, collecting, or publishing this content on any website, book, or other media platform without our prior consent. If any content on this site infringes upon the legitimate rights and interests of the original author, please contact us for resolution.