Axure中继器实战应用篇——排版

1 评论 6031 浏览 24 收藏 11 分钟

在B端业务交互设计中,有大量字段需要展示,或表格或表单或输入框等,利用Axure RP 9 的中继器可以实现快速设计制作排版调整等工作。具体怎么做呢?一起来文中看看吧。

一、简单了解一下中继器

在Axure RP 9中,基本原件的最后一个原件就是中继器。

跟其他原件一样,拖拽到面板中使用,面板会默认展示一个三行的表格。

选中中继器原件,在样式列表中有一个『数据』栏目,修改数据,中继器的表格也会随之变化。

中继器自带一个交互属性,意思是『中继器中的(矩形)文本对应数据列表中的【Column0 】这一列的数据』。

双击中继器,是个类似动态面板的界面,其操作逻辑也跟动态面板一致。

样式页面往下,时中继器独有的属性面板,间距、布局、背景、分页。

小结:

以上就是中继器的基本属性和内容,我们下面通过几个实战应用,继续深入了解一下中继器在排版时的使用方法。

二、中继器如何制作表格

在Axure RP 9中,有自带的表格设计组件。

在一些简单的表格设计可以使用,但是一些数据量较大时,或者排版样式多变时就有点力不从心,所以需要用到 中继器来辅助我们来进行表格的制作,下面举个例子制作一个内容比较复杂的列表。

首先利用表格元件制作一个表头。

拖拽出中继器制作对应的内容区。

双击中继器,进入编辑模式。

制作一列内容。

**注意:首行内容需要位置为-1,之后的矩形也要压着一个像素进行排列。

添加数据,对应表格中需要填写的数据,在中继器数据里添加列。

给需要设置文本的元件命名。

添加交互。

设置变量。

最后添加数据。

这样一个表格就制作完成了-完成效果。

小结:

利用中继器做出的表格,便于后期调整和批量操作,配合中继器特有的交互动作和函数可以实现更多的操作,提高效率。

三、中继器表单快速调整

在表单制作时候,需要快速调整表单内容或者排列顺序,如果逐个制作排列不但效率低,且间距样式调整也是比较费手的事情,下面举个例子。

制作一个表单,先思考一下这个表单如何用中继器制作?

双击中继器,放入一个文本框+一个输入框。

然后调整一下排版-先随便添加几行。

然后,利用中继器样式中的间距和布局功能进行版式的调整,到下面的效果。

接着开始,添加数据交互**这个值统一都有冒号,可以在双括号后直接加个冒号同步添加。

编辑内容。

所有的框框都是输入框,所以这步需要对特别类型进行遮挡代替。

这样一个中继器制作的表单就完成了,利用中继器制作表单在后续的调整样式、排列,只需要简单的调整就很快的完成。

小结:

利用中继器制作表单,可是实现便利的调整样式、版式、添加删除字段、改变顺序等操作,提高制作效率。

四、中继器排版综合应用

了解了中继器的基本操作后,可以看到很多交互设计可以借助中继器来提升工作效率,我们随便找个页面看看。

思考一下,红框中的这部分如何用中继器来实现?3~2~1~

做出来的效果是这样的,这里用了两个中继器,一个是分类框,一个是标签。

先打开一个中继器,画一个背板。

然后调整排列一下。

再新建一个中继器 ,去掉样式。

导入文本、可以直接复制文本粘贴到数据中。

调整颜色、布局、间距,我们得到一个标签。

为什去掉标签里的样式,用中继器的填充?因为标签样式长度不一致的时候,自带的样式导出之后不会跟随文字长度变化,希望Axure 后边的版本可以修复这个问题。

随后复制几个导入数据、再调整一下就完成了。

小结:

通过中继器的组合搭配,可以实现多种布局和版式的快速制作和调整,还是为了提高效率。

五、总结近期的使用体会

最近使用中继器一段时间了,确实能缩短交互稿的制作和调整工作时间,有考虑把之前UE,可以用到的部分都改成中继器来制作,整整齐齐的看着也舒服。

最后希望分享能给小伙伴一点启发,祝大家到点就下班。

作者:WOWdesign,研究设计价值最大化,涉及用户体验、品牌体验、空间体验。

本文由人人都是产品经理合作媒体 @WOWdesign 授权发布,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 这个还蛮有意思

    来自江西 回复