该系列的教程会以不同的例子,教你如何利用中继器搭配其他不同的原生组件,创建属于自己的原型组件,从而快速完成可视性,交互性非常强的产品原型。
Axure RP是一款相当成熟的原型设计工具,在Axure7中引入的中继器部件,可以说是最具亮点的一个功能,中继器相当于程序开发中的小型数据库,用于存放同种结构的数据,可对其中的数据进行删除,增加与更新,以及根据设定好的条件对呈现的数据组进行过滤等操作,在Axure8中进行了优化和调整。
中继器虽然是一个非常强大的系统部件,但在实际的工作中,该部件在众多产品经理(交互设计师)当中的使用率还是非常的低,究其原因,个人认为在很大程度上是因为这个组件让很多产品经理们认为难以掌控,学习成本太高;另一方面,则是由于使用以往版本积累养成的习惯,认为原型能够实现就好,并不需要管原型实现的过程,所以也就没必要额外的花费时间去了解中继器的使用,其实并非如此。
中继器的出现,允许我们在产品原型的设计当中,将视图呈现、后台数据以及裸机交互三者分离,从而更好的规划设计产品(MVC软件设计模型,模型-视图-控制器分离)。
在我们了解了用户需求及明确了产品所要实现的具体功能时,会偏重于数据结构的规划与设计(模型);
在产品框架定义完善后,产品的页面呈现则会成为重点(视图);
怎样将两者有效的结合,则需要我们控制好产品的逻辑功能及相对应的交互(控制器)。
合理的利用中继器,能够极大的提高我们的工作效率,并且有利于我们与技术、设计、交互等部门的配合。
接下来,我们通过具体的实例,看看中继器到底是如何使用的。
实例1:一个纯文字的列表
数据模型——构造数据结构
我们先简单设计一个功能菜单,其中包括如下几个功能选项:欢迎页面、功能介绍、关于我们、意见与反馈。设计数据模型的时候,我们只需要一个字段:function,用来存放数据项目,中继器不允许中文命名。
数据结构视图——构造展示样式
中继器的方便在于,对于同样形式的组件,只需要设计一个,通过读取数据,就能以同样的样式展示其他数据。
打开Axure8,将中继器拖动到主区域,双击,对其中的部件进行自定义,这里只用到了一个组件——矩形,Axure8称之为Box:
构造组件小提示:
1、建议将该矩形部件的Y坐标设为-1,或者可以通过设置Project Setting达到同样的效果,合并两个Item之间的线条。如果你不介意展现样式,可以忽略该条提示。
设置Project Setting2、矩形的线条建议用灰色
3、关于组件中需要以数据库中的数据替换的文字,尽可能的在设计部件的时候设定好,比如字体颜色、字号、对齐方式、及边界等
控制器——构造关系绑定视图与数据
通过逻辑控制,由将数据展示到视图上面,从而达到我们的目的
数据绑定接下来,你就可以点击预览(或者F5),在网页中查看真实效果。
该教程相对比较简单,主要是引入概念,以及如何利用MVC这种软件设计模式进行原型设计,在日后的教程中,你们会发现在产品设计中使用中继器,会带给你更多的惊喜。
有兴趣的朋友可以加我个人微信公众号(微信公众号:产品设计曹蜀黍),一起交流!
微信公众号:产品设计曹蜀黍
网友评论
用基础的矩形和箭头原件完成第一个再改好样式,然后复制几个在下面。
只要把几个复制的文字改一下就好了(操作量差不多呢)