Axure神奇操作实例-通过触发模拟APP图像上传 获赏10金币 基础教程

OMINI_BASS 普通用户 2019-11-8 3682

Axure神奇操作实例-通过触发模拟APP图像上传

前面之前两张的教学与实例为大家展示了如何通过触发动态面板实现循环的效果,然而实际上通过这两个交互我们还能够实现很多其他的效果,只要用得好,我们就能够通过Axure实现很多正式的操作模拟。今天带来的就是新的触发实例,通过触发来模拟APP图像的上传。惯例先来看下最终效果~

一、交互解析

还是和以前一样,先来确认下我们要实现什么样的功能,再来考虑怎么做,捋一下我们要实现:

  1. 点击默认头像弹出图像选择窗口

  2. 点击图像选择窗口中的图像,有单选选中效果;

  3. 点击完成,则将原始头像替换为选中的图像;若点击返回,则不替换。

先来分析下Axure中关于设置图片的功能,我们在Axure中任意创建一个元件,对单击设置交互后能找到一个设置图像的动作,页面如下:

其中分为两类:图片,其中图片只能够从本地导入,也就是只能够使用一次,很明显这里不适用,那么我们看第二个,纵观Axure中所有和图片有关的值,没有!但是有一个元件可以存图片,还可以将图片以值的形式保存,这个元件就是中继器

所以这次我们要用到中继器元件和触发交互,接下来理一下思路。

  1. 点击初始头像时候弹出图像列表(通过中继器制作),图像列表包含所有图片;

  2. 点击图像列表中的图像时候选中该图片,并且将图片储存在一个临时图像中(通过中继器制作);

  3. 点击完成按钮,将临时图像替换到头像中,隐藏图像列表;若点击返回按钮则直接隐藏图像列表,不替换头像。

接下来就开始动手;

二、原型设计

2.1 展示头像

  1. 从元件库中拖出一个图片元件,命名为头像(展示层),尺寸根据需要自行调整即可,双击后选择本地文件将其设置为默认头像样式;

2.2临时头像准备

  1. 从元件库中拖出一个中继器元件,将其命名为中间层;双击中继器进入中继器编辑页面,删除默认元件,按照步骤1中的方法拖入一个图片元件,将图片命名为头像(中间层),尺寸与步骤1中的图片一致,双击后选择本地文件替换即可;

2. 为头像(中间层)添加点击交互,设置为点击时将当前图片赋值到头像(展示层);

  3. 返回最外层页面,点击中继器,删除中继器列表后两行,并将默认列名修改为pic;

  4. 在中继器列表第一行上右键,点击导入图片按钮,选择本地的图片导入;

  5.针对中继器修改每项加载时的交互,分为两部分:1、将中继器pic列赋值到图像中;2、标记中继器全部行(这块功能在后面会用到)按照规则设置中继器的交互动作。


 6.设置完成后,就能够看到中继器中的图片变成了我们导入的图像了。

2.3头像列表准备

    1. 按照上一章节内容,我们先创建一个头像库,在头像中加入单选框,这里使用的我自己设计的单选框,大家在自己做的时候也可以用元件库自带的单选框;此处注意:将中继器选中默认的取消选项组效果取消掉,具体原因大家可以尝试不取消看下效果~

    2.  并且多导入几张本地图片,,在样式中设置网格显示,得到如下的一个中继器;

    3. 对中继器中的图片添加两个交互:

        1)点击时设置单选框为选中状态;

        2)更新中间层中继器的数据,由于在上一步骤中我们已经标记了所有行,而且中间层中继器只有一行,所以这里实际上就是将当前图片赋值到临时头像上的意思。


      4. 对图片上的单选框添加交互,使其点击时同样能够赋值到临时头像;


2.4 其他元件

那么最后就只剩两个按钮元件了:完成返回

在页面中拖入两个按钮,并将其余2.3章节中的内容组合成组,命名为选择图片分别设置交互:

  1. 返回按钮设置点击时隐藏选择图片组;

  1. 完成按钮点击时实际上是将临时头像更新到展示头像上,由于我们在临时头像的点击交互上添加了赋值的动作,所以此时就只需要触发即可了,下一步,隐藏即可!

三、元件美化

最后一步,将前面三步中的所有元件按照APP的展示规则进行页面优化,这里可以根据自己的理解进行设置,我这里根据我的理解,最终得到以下三个组合:

最后将图中数据层中间层的内容隐藏起来,移动到对应位置即可~

小结

由于本期内容涉及到了中继器的操作,可能有的同学学习起来会比较懵,所以这里也上传了文件的原型,大家可以自行下载研究~

另外:中继器是个好东西,不论需不需要做交互都建议学一下,毕竟效率神器~

以上~


上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (39)
  • CQ3 普通用户 24天前
    0 引用 40
    厉害 学习
  • yujiabian 普通用户 3月前
    0 引用 39
    66666
  • pandakill 普通用户 2022-6-16
    0 引用 38
    感谢分享
  • 18809860773 普通用户 2022-4-23
    0 引用 37
    11
  • 哈迪斯00 普通用户 2021-2-18
    0 引用 36
    666
  • zhenzhenyang 普通用户 2021-2-7
    0 引用 35
    感谢分享
  • ccoo 普通用户 2021-2-5
    0 引用 34
    这牛逼
  • 飞奔的母猪 普通用户 2020-9-16
    0 引用 33
    感谢分享
  • 暖暖_1594784296 普通用户 2020-7-21
    0 引用 32
    谢谢
  • 单单 普通用户 2020-3-20
    0 引用 31
    谢谢
  • 程维维 普通用户 2020-3-11
    0 引用 30
    感谢分享
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 29
    感谢分享
  • 簟纹灯影 普通用户 2020-2-26
    0 引用 28
    感谢分享!
  • 芋头爸比 普通用户 2020-2-1
    0 引用 27
    感谢分享
  • 爱晒钛阳滴鱼 普通用户 2020-1-18
    0 引用 26
    厉害了
  • 小宝_1578031532 普通用户 2020-1-9
    0 引用 25
    正是需要的,感谢
  • leesonp 普通用户 2020-1-9
    0 引用 24
    感谢分享
  • 晨曦2020 普通用户 2020-1-7
    0 引用 23
    66
  • 周周_1573913106 普通用户 2019-12-24
    0 引用 22
    感谢分享
  • CAPTAIN猎鹰 普通用户 2019-12-23
    0 引用 21
    感谢分享
  • 12345qwert 普通用户 2019-12-19
    0 引用 20
    lihaolexiongdi
  • Crisis 普通用户 2019-12-9
    0 引用 19
    好人呐,好人
  • 小猪佩奇,小牛配我 普通用户 2019-12-9
    0 引用 18
    优秀啊,感谢
  • yohn 普通用户 2019-12-7
    0 引用 17
    非常感谢  厉害
  • Aurora.Cc 普通用户 2019-12-7
    0 引用 16
    蟹蟹
  • lhzxqxl 普通用户 2019-12-4
    0 引用 15
    感谢分享
  • changzh1990 普通用户 2019-12-3
    0 引用 14
    感谢分享!
  • 我是微笑 普通用户 2019-12-3
    0 引用 13
    牛逼
  • bigbigm 普通用户 2019-12-2
    0 引用 12
    感谢分享
  • CH13211 普通用户 2019-12-2
    0 引用 11
    感谢分享
  • Linda_1574951307 普通用户 2019-11-28
    0 引用 10
    腻害,
  • taotao+1 普通用户 2019-11-18
    0 引用 9
    不错的
  • 酸奶味小草莓 普通用户 2019-11-18
    0 引用 8
    学习
  • 忧郁小猫猫 普通用户 2019-11-18
    0 引用 7
    感谢分享
  • 呆呆熊 普通用户 2019-11-12
    0 引用 6
    厉害
  • OMINI_BASS 普通用户 2019-11-12
    0 引用 5
    shine214 中继器是个坎儿
    是的,能够使用中继器做最基本的重复,原型绘制速度就完全是质一般的飞跃了~
  • shine214 普通用户 2019-11-12
    0 引用 4
    中继器是个坎儿
  • 婉儿_1570691211 普通用户 2019-11-12
    0 引用 3
    感谢分享
  • 沈十三 管理员 2019-11-8
    0 引用 2
    感谢分享,已获得10金币奖励!
返回