安庆死飞价格交流组

Axure8系列教程 中继器最佳实践

Axure原型设计工场 2020-06-29 06:33:21

中继器通俗的解释就是一个小型的数据库,可对数据进行增加、删除、排序等操作。

关于中继器,我们重点讲解一个实际应用的例子,以某移动网站宽带专区为例,用户可在该专区内新装或续约宽带,通过查询条件过滤出自己想要的套餐。

这是一个最佳实践教程,会综合应用axure的知识。

点击下方阅读原文下载源文件

先看看该网站的实际截图:


页面上的功能说明:

1)  选择城市、速率、类型可以进行过滤

2)  宽带套餐信息显示的内容有速率、套餐简述、套餐价格、办理人数及立即抢购按钮

3)  鼠标经过宽带端口信息时会显示半透明窗口,显示套餐的详细描述信息

4)  点击立即抢购按钮进入套餐详情页面。

我们就以实现上面的功能为目标,体验中继器的使用方法。

示例场景:宽带专区套餐查询与过滤,为了演示方便,只设置部分地市

示例步骤:

1)  从生产环境上截图,获取图标(这是常用的方法,有的图标我们不需要自己来做,直接截图,或者图片另存为拿来使用)

2)  设置好文字标签

3)  地区、速率、类型选择按钮:几个按钮样式一致,设置一个后,其它复制

a)添加一个矩形,调整好大小和圆角


b)右键单击矩形设置交互样式,需要设置鼠标经过和选中的样式,截图当前默认选中的合肥,粘贴到设计区域,目的是为了获取颜色值

先设置鼠标悬停时的样式:边框为橙色


再设置选中状态下字体颜色和填充颜色,选中状态下按钮无边框,注意去掉:


设置选中样式的填充颜色值为橙色,通过颜色吸管获取颜色值,这是一个很实用的技巧哦,一定要熟悉!

设置好样式后,把截图粘贴过来的图片删除掉。

c)下面就是一个从1N的复制/粘贴过程,下面的样式也准备好,添加个中继器(命名list


d)F5预览,发现城市、速率、类型没有默认选中的样式,右键设置一下即可


再次F5看看效果:


4)  开始准备中继器数据

因为我们只是个原型,所以数据不必太多,场景覆盖到的数据有就行了。


5)  设置中继器内容项的样式

重点,这里要根据数据项设置元件的具体显示值,并要设置好布局样式

a)设置每项数据布局

双击中继器,进入中继器设置界面,添加相关标签和按钮,设置好样式,并给要显示的标签命名,便于后面赋值。


b)设置中继器样式

返回中继器上一层,设置一下样式属性,水平每排显示4个,水平和垂直间距为10,预览图看起来像个样子了,但是因为没有给标签赋值,所以数据看起来一个模样:


c)设置事件

开始设置事件,设置每个标签中要显示的内容:


确定后设计界面会同步变化,这次更接近真实数据了:


d)鼠标经过时样式

设置鼠标经过图片(占位符部分)时,显示半透明遮罩层:


半透明遮罩层组成:一个矩形,和后面的图片大小一致,设置填充色为黑色,透明度为50%;一个圆角虚线矩形显示速率(命名txtSpeed2),下方一个文本标签显示套餐详情(命名txtDesc2),将这个半透明遮罩层右键转换成动态面板,命名为mask,设置它初始状态为隐藏。

向前面一样,在中继器加载时,设置txtSpeed2txtDesc2的值:


下一步是添加事件处理,在鼠标移入图片时,显示遮罩层,添加向上滑动的动画效果:


显示了遮罩层后,鼠标再次移出遮罩层时,我们需要隐藏遮罩层,并添加向下滑动的动画效果:


到这里,中继器本身的布局样式、数据、事件处理都设置完了,F5预览一下效果。


6)  地区、速率和类型的过滤处理

现在我们回头开始设置选择不同的地区、不同速率、不同类型是展示对应的数据。

a)处理单选效果

选中合肥按钮,设置OnClick事件(每个按钮要命名)


重要:事件里先取消选中所有同组按钮,再设置当前按钮为选中状态,这样就达到单选的目的了。

复制按钮合肥的事件到其它地区(安庆、蚌埠)的按钮上(事件可以复制粘贴的)

b)单击“合肥”过滤出合肥的数据


先移除地市的其它过滤条件,再添加过滤合肥(命名hefei)的条件,其它两个地区设置类似。

和地区过滤一样,设置速率过滤时,注意不要删除了地区的过滤,因为和地区的过滤是并存的,只需要删除同类条件(其它速率)即可:


设置速率的“不限”条件时,只删除速率的三个条件。、


小结

中继器是个比较复杂的元件,有时我们可能根本就不需要这样的元件,我们只要能向用户解释出我们的需求即可。几句话其实也能解释清楚,毕竟做中继器的过滤这样的操作还是比较复杂的,花的时间过多可能偏离我们使用原型的本意了。


Copyright © 安庆死飞价格交流组@2017