美文网首页PMskill
如何使用Axure中继器创建复杂的列表(一)

如何使用Axure中继器创建复杂的列表(一)

作者: ee6474486ea9 | 来源:发表于2015-04-04 19:23 被阅读1375次

    在上一篇,我们对中继器初步的介绍,接下来,我们便用它创建更为复杂的列表部件。

    列表在众多应用中算是较为重要的一个组成部分,几乎随手打开个移动端的应用,都能够找到它的身影,例如:

    列表示意

    以上的列表,虽然代表不了全部产品的列表类型,但也差不太多。IOS的系统设置这类列表较为典型,也最为基础,列表的子单元包含有图片,文字,以及一些状态提示信息。而百度糯米虽然包含的元素更多,样式更复杂,但仍然是没有脱离IOS系统设置的那种结构。再看看今日头条的样式,虽然较为复杂,穿插了2种不同类型的显示,但也能看到是从IOS系统设置的影子,最后优酷的列表,虽然看起来和之前的3者都有所不同,它顶多算是IOS系统设置类型的变化体,在原型设计上只是比第二种稍稍增加了一些操作,处理方式还是一样的。

    下面我就先教大家如何利用中继器实现以上的几种效果。

    实例2:IOS系统设置页面的实现

    我们打开之前在实例1创建的那个简单列表,选择在它的基础上进行修改。

    首先我们先构造自己的基本部件,它看上应该是这个样子的:

    部件的构造

    接下来,我们对这个部件进行一些设置

    设置部件

    部件的命名与样式的基本调整

    我们注意到,在IOS的系统设置中,会对不同类型的项目列表通过一个背景为灰的空白行做间隔处理,所以我们需要对列表名称这个矩形部件做一个效果,在该部件上点击右键,选择交互样式设置(Interaction Styles Setting)

    对列表矩形添加选择效果

    然后我们开始设置数据结构,并补填部分数据供展示:

    数据的填写

    对于在数据设置这里,我们怎么导入图片到Image列中,你可以在相应的位置,右键鼠标,就会出现导入图片的项。对于细心的读者可以看到,在数据源中,我们有2行并未添加任何数据,而这两行空白数据只是起间隔作用,所以并不需要有数据的录入。

    做完这些,我们开始进行数据和各个部件之间的绑定。

    数据和各个部件之间的绑定

    这里需要特别提出的是,对于部件中的图片与数据源中导入的图片绑定,需要用到动作里面的set image方法。

    列表项图标与数据源中的图片的绑定

    其实,做到这里,基本上就能实现最基本的要求了,大家可以在这里点击预览(或F5)查看,但是还并没有到达我们想要的效果,我们缺失了2个地方的细节处理:1、对于飞行模式来讲,它只有开关项,并没有向右箭头;2、各个项目功能之间的间隔不是很明显,会让设计误认为是空项,所以接下来我们将这两个问题给他解决掉。

    首先,我们先处理间隔的问题,在上面,我们曾对列表名称那个矩形做过一个交互样式的设置,现在在这里就会用到。

    我们回到中继器的动作设置面板(Repeater Item Interactions),在OnItemLoad下面加一个动作,用数据源中的Name作标识判断,如果Name值为空,则选中列表名称这个矩形部件,并将箭头这个额外的元素隐藏起来,具体如下:

    增加显示空白列的动作

    至此,关于间隔的问题我们有效的处理完成,接下来继续完成飞行模式开关的问题,我们先对之前创建的部件进行完善,补全缺失的关素。改变之后的部件应该是这样子。

    中继器组件新增部件

    然后,我们继续回到中继器的动作设置面板(Repeater Item Interactions),在OnItemLoad下面再增加新的一个动作,仍然用数据源中的Name作判断标识,如果Name的值等于“飞行模式”,则隐藏掉箭头这个部件,同时显示开关这个部件,最终的OnItemLoad下面的动作为:

    增加飞行模式的开关按钮

    这时候,我们遗留的问题已经得到解决,可以点击预览看看自己的成果了。

    最终效果

    有兴趣的朋友可以加我个人微信公众号(微信公众号:产品设计曹蜀黍),一起交流!

    微信公众号:产品设计曹蜀黍

    相关文章

      网友评论

        本文标题:如何使用Axure中继器创建复杂的列表(一)

        本文链接:https://www.haomeiwen.com/subject/qbdaxttx.html