AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

2021年3月8日17:12:46 发表评论 130 views
Axure 10 Beta 版出来有几天了,官方也提供了详细的更新说明,文章最后有官方的体验地址,了解之后可以去试一试。新东西总是让人感到新奇,今天也来看看到底有哪些地方做的更好的,分别从软件界面、动态面板、中继器、错误状态和距离约束几个点来看看。

01

界面布局

1、界面更紧凑

工具栏、样式设置看起来内容变少了,显得很简洁,原来默认几个同时显示的工具栏按钮都放在下拉框里选择,这样节省了些空间。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

但其实这样感觉不是太方便,因为我们需要多一次操作,例如我们选择三个矩形框,想让它居中对齐,那我们要先点击一次对齐图标,再从下拉列表中选择居中对齐。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

本来我们直接点击一次工具栏上的居中对齐图标就好了。

好在系统提供了工具栏定制,可以仍然选择把几个对齐图标显示在工具栏上,在工具栏上右键选择自定义工具栏,勾选要显示的工具图标,这样就和以前一样了。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

元件样式里显示了常用样式设置,更多的样式设置放在右下角的更多里,说实话感觉也是不方便,样式面板里留那么多空白空间干嘛?又不是放不下,看起来面板是简洁了,但不方便。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

02

元件

2、动态面板

改动有点多,不过确实比以前好用了,主要体现在可以一次同时编辑多个状态,点击右上角的网格状图标即可进入多状态同时编辑,且默认时固定了动态面板的大小,不是自适应内容了。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

多状态编辑模式如下,很方便设置每个状态里的内容:

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

3、中继器

中继器对数据的编辑方式做了改变,以前是通过“每项加载时”事件来显示数据,现在直接提供了一个表格化的方式编辑数据,然后每个字段通过“连接元件”的方式来与元件进行关联,可以直接选择目标元件,这样更容易理解些。可以通过表格的右侧或底部的+号按钮添加数据。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

元件库里也提供了两种方式的中继器,一种是表格,一种是图文卡片,这个也挺好。9的版本的中继器默认是表格方式,而且默认元件是一个矩形框,让很多第一次接触中继器时不知道咋用。而10版本里卡片式直观地告诉使用者中继器可以实现漂亮的图文布局样式。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

4、错误状态

错误状态主要是针对输入框这样的元件使用的,例如如果我们手机号码输入的框不正确,你可以设置错误状态的样式,如红色边框。之前的版本其实也可以通过设置选中时的样式来设置,只是不太容易理解,可能你还想不起来用这样的方式,现在有个单独的错误状态可以设置了。

在元件上右键,选择样式效果,在弹出的窗口里选择“错误”状态,设置相关的状态,例如下面的输入框在输入错误时,显示红色边框,浅红色背景。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

动作列表里添加了设置错误状态和去掉错误状态的动作,方便我们设置交互。

做了个例子,点击阅读原文看看这种交互效果,如果两个输入为空,则显示错误状态。

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

5、距离约束

这个感觉用处不是太大,也没想到在什么场景下使用更合适,我们看看是怎么使用的。

可能一开始看到这个介绍不知道说的到底啥意思,测试下之后可以看到它的实际用处仅仅是在设计状态时使用的。

这个功能是在将一组元件编组后,设置每个元件在这个编组中的位置,距离边缘的显示位置。举个例子,下面这里有5个矩形框元件,上下左右和中间分别有一个,为了演示,用中间的矩形框来说明。选中5个元件ctrl+G将它们编成一组,然后选中中间灰色的矩形,看一下右边样式面板里多了个“调整约束条件”:

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

编组里的每个元件都可以设置约束,以选择上面约束为例,点击竖线选中,表示当你在调整这个编组的大小时,当前这个灰色元件始终保持与上方距离不变:

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

好了,我们在这个编组元件外的界面上其它地方点击一下,然后选中这个编组,选择上方的调整占向下拖动调整大小:

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

当你调整成如下大小时,虽然整体高度小了,但灰色元件距离上方的距离没有变化:

AxureRP10Beta版体验:软件界面、动态面板、中继器、错误状态和距离约束

其它位置的约束的意思类似,可以自己试一下。

感觉。。。用处不太大。。。

发表评论

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