Axure中继器操作教程:完成九宫格图片的设计

2020-12-2109:17:27原型设计Comments2,736 views1字数 896阅读模式

软件:Axure 9 系列(Axure 8类似)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

熟练程度:中级(元件使用,函数调用)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

相关使用元件:矩形、文本、SVG(形状)图标、动态面板、图片、中继器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

原型元件组成展示

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

演示动图

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

正文(制作过程)

制作思路

整个发布动态的九宫格图片由两个页面组成,在每个页面中各自存在一个中继器,进行数据的存储。通过中继器的函数进行数据的传递,达到选中展示的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

注:由于中继器函数需要在同一页面中继器中使用,所以需要将两个页面放置于同一画布。通过显示隐藏的交互达到切换的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

简单原型

在整个交互逻辑中,最重要的一步就是中继器之间的交互传值。下面详细介绍之间的交互逻辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

第一步:创建两个中继器。(展示中继器:用于后期九宫格的展示。选项中继器:模拟手机图片库)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

第二步:修改中继器内部内容为图片元件对应命名为展示图片、选项图片。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

第三步:给选项中继器进行图片配置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

①配置交互事件,每项加载时设置选项图片为中继器中导入的对应图片。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

②进行中继器图片的导入(在中继器对应数据栏右键选择导入图片选项)。导入完成后,可以看到对应的中继器中已经加载对应的图片。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

注:为了界面展示美观,图片使用应该是相同等比的图片。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

第四步:设置选项中继器的交互。通过点击选项中继器,进行对应图片传递给展示中继器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

①:配置图片单击交互事件,添加展示中继器行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

②:点击添加行,配置对应数据。(注意:只需要添加一行)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

③:配置参数,选择当前中继器的参数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

④:点击预览,查看对应效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

注:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

1、只能通过预览查看对应效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

2、如果展示图片有三张没有加载出来,就是因为没有在预览前清空预览中继器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

⑤:此时已经完成了整个的核心逻辑。下面部分简单讲述下后续细节优化的思路,有不太清楚的小伙伴可以在文章下留言,或关注公众号获取源文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

细节优化

如何设置展示中继器的加号

思路:设置一张加号的图片,通过判断其中继器数据来控制其隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

如何设置图片超过9张的数字

思路:首先设置文本,当展示中继器的数据大于9条时,通过展示中继器条数-9的差值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

如何设置一张图片、两张图片展示效果

思路:同样获取中继器的数据,根据数据,改变原有的内部图片的尺寸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

Axure中继器操作教程:完成九宫格图片的设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

总结

主要是中继器的联动赋值与中继器数据的判断。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20766.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/20766.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定