Axure 中继器的使用(一)
2017-01-06 本文已影响72人
Iam产品人
---By J
什么是中继器?
从中继器的特点,我更乐意叫他的名字为数据集。中继器的作用从表面上来看是用来动态存储数据的元件,就像是APP里的数据库,可以进行普通的增删改查,虽然没什么特别,但是却能够通过它实现很多令人意想不到的效果。
中继器是所有axure元件里,最复杂的元件。所以关于它的介绍,不是一次就能介绍完的。今天在这里,我先把它的基础操作给大家做讲解。让大家理解基础操作之后,能够举一反三的研究它更深层次的应用。
为什么要使用中继器?
在APP和网页中,数据列表随处可见,但是我们在原型的设计中,如何高效的展示你所设计的列表,而不是简单地贴上死板的图片?
我们先来看一下几个例子:
1、APP的数据列表
首先我们想达到的目的:
![](https://img.haomeiwen.com/i1366893/275767a36c7537cb.png)
通过两个按钮分别显示不同类型的通知数据列表:
![](https://img.haomeiwen.com/i1366893/5f2ba1caefb2e4e9.png)
根据点击按钮先后顺序,将列表进行排序:
![](https://img.haomeiwen.com/i1366893/5aff858d68787002.png)
如何实现这样的动态加载效果?虽然用动态面板的方式也可以做到,但十分的繁琐且很死板,这个时候我们就需要使用中继器。
2、数据列表的增删改查
这个是我所需要显示的数据列表:
![](https://img.haomeiwen.com/i1366893/14c80fc55f263479.png)
通过用户检索,只显示与检索条件一致的数据列表,达到我要的交互效果:
![](https://img.haomeiwen.com/i1366893/b5fc521143a988b9.png)
这种情况下,依然需要中继器的辅助。
如何使用中继器(一)
那么中继器该怎么使用呢?这一章将详细讲解效果一所展现的效果。
1、拖入中继器控件
![](https://img.haomeiwen.com/i1366893/c969db96d14c4bf4.png)
2、双击所托入的中继器进行样式的编辑,编辑通用的样式,并且对每一个动态的控件进行命名
![](https://img.haomeiwen.com/i1366893/4a1bb08ad500241b.png)
![](https://img.haomeiwen.com/i1366893/57054d800eccc2aa.png)
3、返回中继器,为中继器添加动态的字段以及想要展示的数据
![](https://img.haomeiwen.com/i1366893/01831a0984b7c87f.png)
![](https://img.haomeiwen.com/i1366893/986919b8837999e0.png)
4、将数据与界面关联起来:
![](https://img.haomeiwen.com/i1366893/f61564a29eafed5d.png)
![](https://img.haomeiwen.com/i1366893/2a5305382ef43abf.png)
5、那么如何做到刚加载时,一个数据都不显示呢?
![](https://img.haomeiwen.com/i1366893/bda3fcfc515c7b38.png)
、
![](https://img.haomeiwen.com/i1366893/da2480f63abad83d.png)
好了 这下行的通了,初始的时候啥也没啦!!!
6、最后关键来啦,如何通过点击其他按钮触发事件来显示&排序这两个列表呢?
![](https://img.haomeiwen.com/i1366893/dd3b4578493258e8.png)
大功告成啦!怎么样,赶紧先试试吧~
该文档伪原创,转载请标明出处~