《Axure RP 9 教程:中继器实现模块排序》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品,界面组成等多维度案例或实操来进行更多的学习;此教程是由子姜在2021-08-20发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
? 创建中继器,取名为Content
? 双击进入中继器页面在页面内设置出想要的内容和布局,设置好后,这个布局就可以赋予不同的数值无限复用了。本案例使用LOL人物角色,大纲及布局如下(不做详细介绍):
注意:给后期需要赋值的Label设置好名称,这样在中继器中设置数据的时候会更加明确,不容易出现数据设置错误的情况,例如性别的Label我注释的名称是Sex,这样在后期设置中继器的时候找到Sex赋值就可以了。
?在中继器样式选项中:找到布局,设置每行的个数,即设置每行的模块数,本案例每行是3个。
?在中继器样式选项中:找到数据,设置行数,行数代表了模块的总个数,本案例共使用8个人物角色,故这里需要设置8行数据。设置列数,列数代表了每个模块内参数的个数,本案例共使用“背景图”、“头像”、“角色名称”、“性别”、“位置”、“评分”等9个参数,故数据列表需要设置9列。
?为每一列每一行设置名称,使每个Label名称和列表中名称一一对应,由于Axure中继器内不能设置中文名称,所以本案例都设置为英文名称,见下图:
?在中继器设置交互:(其实就是将中继器数据填充到我们设置好的Label内)
?设置好以上交互后,在中继器数据中,每一格内填写数据,本案例我填写了每个角色的名称、定义了每个角色的属性值(乱写的勿喷)并导入了背景图片和头像图片。此时已初见成效:
这时大家发现,如果不使用中继器,一个一个去画出来也可以做出同样的效果,但使用中继器自然有它的好处:
第一,中继器使用一个模块不断复用的方式,简单便捷;
第二,使用中继器做出这样的列表在预览原型时可以减少卡顿;
第三,第三点也是重点,中继器可以轻松实现模块排序。
?设置用于排序的btn,本案例使用了四个排序btn,分别为评分(Score)、攻击距离(Attack_distance)、攻击力(Aggressivity)和防御力(Defenses)。这里只给出评分排序的交互设置,其他的几个自己延伸吧(嘿嘿)!点击评分btn,使8个模块按照评分高低进行排序,交互比较简单,直接上图:
解释:本案例设置了从大到小排序和从小到大排序的Icon,这样可以增加用户进行排序操作的交互体验。
以上为利用中继器排序的操作流程
Adobe Photoshop CC 2017 部分:
?每个角色的背景图片进行高斯模糊
?头像用椭圆选框工具选好后加上外发光,形成阴影效果
Axure RP 9 beta 部分:
?加入手机、电脑或者ipad的边框
?在屏幕最上方加入形形色色的小Icons
?给排序btn设置用于区分从大到小和从小到大排序的icon
?本案例还给ipad加入了背景图片
以上就是Axure RP 9 教程:中继器实现模块排序的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure中继器使用教程之制作直播视频的卡片列表操作实例
> 下一篇 Axure穿梭器:双向列表带计数选择
2022-06-24 10:00
2022-06-23 10:04
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论