快好知 kuaihz订阅观点

 

Axure教程:中继器实现列表到详情页的数据传递

作为一个产品经理如果不会使用Axure估计都不好意在人前讲自己如何如何了得,但光会用Axure做线框图就够了吗?显然是不够的,在产品设计中很多时候我们需要使用到高保真原型,而高保真原型的制作需要使用到Axure中许多复杂的功能,动态模板是最常用的,中继器能够的使用能够使我们模拟实现数据交换,至于说Axure中的内置函数神马的那就更不是一般产品经理可以掌握的了。

在这次移动端的项目中,多处涉及到从列表页到详情页的情况,项目中要求体现一定的数据交换的过程。而之前很多时候均是使用动态模板来控制对应关系,一直这样使用自然是熟悉的很而且也容易实现,但是很难达到真实的使用场景的效果(模拟数据交互)。因为动态模板中的内容均是写死的若是列表有100项,那么详情页也需要预先设置好100页。作为一个有梦想的产品汪,我怎么能把我宝贵的时间浪费在如此没有技术含量的重复性工作上?故我鼓起勇气,拿起武器花了5天时间终于把Axure中实力强大的中继器给拿下。

下面是实现的效果图,你看到的图标,均已经实现了它该有的功能,搜索、分类、顶部栏分类滑动等等,鉴于文章篇幅不宜过长的原则,这一次只讲解列表到详情页的数据传递(只是讲解了关键设置点)。

PS:哈哈甚至于我把它转化为IOS的桌面文件时,我的同事还以为是一个真实的手机应用(仰天狂笑!!!)

列表页

详情页

两个页面中的内容均是一一对应的关系。

在整个实现过程中有几点需要特别注意:

中继器只有在同一个页面中才能共享到数据

在多个中继器中传输数据时,必须在数据源的中继器中把数据传输出来,在接受的中继器中是不能主动去获取源中继器中的数据

通过使用indexof函数可以实现数据筛选,在结合相关事件出发赋值行为,可以实现多种形势的筛选

中继器中并不是所有的数据都需要现实,有些字段可以作为隐性数据,用于实现特殊功能存在

过滤器使用时一定要注意清楚时间,axure中自带有清楚单个规则的过滤或是清除中继器中所有过滤规则

通过中继器分页功能能够很好的制作列表到详情的这种跳转关系

中继器中各种值的传递,以及通过一些自带的函数间接传值都是很常用的方法,通过主动设置变量可以把部件中的值传递到中继器中或进行一些特殊的处理

先给看下我中继器中的数据是如何设置的,注意数据属性的字段,整个项目中会用到两个中继器,简便起见直接保持两个中继器的字段一致,只是有些无用的字段具体使用时不使用即可。

这就是我中继器中所有的数据,通过这些数据我显示了列表页与详情页一一对应关系的跳转逻辑,下面是中继器中基本项的设置,此处需要注意上面的数据项比基本项中的数量要多,那么多出的数据有什么用呢?在实际中,列表中的信息往往都是比较少的,而详情页de内容是是否丰富的,在上面设置的很多的属性均是只在详情页才会使用到。而如何把数据传递到详情页呢?这是一个问题,容我一一道来:

下图是第一个中继器中的基本项设置。

中用例中我们可能之前已经看到有中继器这个选项,其下也有Datasets这个选项,以前不知道有什么用。这几个操作是在本次项目中使用最平凡的功能。下面整体讲解下数据传递的逻辑:在源中继器中把数据都录入以后,通过”add rows”功能。

数传递的过程图,注意箭头方向,以及图中的说明文字

接着上一张图,与上一张图在一个连续的流程中,

选择完成后一步一步确认即可,

下图是对数据进行标记,方便后面进行数据更新。

标记数据

更新数据,传递到第二个中继器中。

确认即可,数据传递已经完成,哎还是有点复杂啊 :)

下面这个是在第二个中继器中设置的,建立一个列表与详情页一一对应的关系。

好了整个项目中最关键的点已经说完了,图有点多,有点复杂,不过仔细看一定可以显示两个中继器之间的数据传递,列表与详情页一一对应的关系也是没有问题的,有了这个通用控件我们就可以实现海量数据的列表和详情页的原型啦!!

若是有任何因为讲解不到位的地方,而产生的疑问都可以留言或是私信我,一定会给答复的。

最后附上附件,希望对同学们有所帮助。

作者本人提供:

百度云盘:http://pan.baidu.com/s/1uliIq(公开链接)

备用链接(人人官方源)

链接: http://pan.baidu.com/s/1gd12Ayf

密码: j7yw

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:中继器  中继器词条  传递  传递词条  详情  详情词条  实现  实现词条  教程  教程词条  
原型

 Axure原型设计学习路径图

对于一个新手来说,或者对一个桌面软件使用习惯不是很熟悉的人来说,学习一个设计软件似乎有点吃力,他们希望能有一个路径指导他们如何来学习,如何来使用,以便快速上手。...(展开)

原型

 穿梭器:双向列表带计数选择

前段时间分享过一个支持单选的穿梭器(列表框左右双向选择)案例,很多朋友觉得很赞,同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列...(展开)

原型

 Axure 8.0 拖动滑块设置...

1.绘制基本原件(1)在滑动块中一共由三部分组成:滑动的按钮左侧随滑块变化的进度条右侧逐渐减少的进度条。先创建这三个组件:按钮套入动态面板中,命名为“butto...(展开)