当前位置:文章首页 >> 电商运营

Axure教程:App移动端多选作用美化

时间: 2018-12-06 21:15:22 来源:ZQZ原型师 作者:小鱼 

本篇教程将为咱们展现怎么运用Axure美化App移动端多选作用。

终究作用

分化页面

制造过程

首要咱们依照上图在场景中制作出需求用到的元素,而且将元素独自成组(快捷键CTRL+G),别离命名为:了解程度=dx / 合作意向=hzz / 下一步战略=cl。

下一步,咱们创立交互动作,挑选上图中第一个界面里:了解程度后的“请挑选”按钮,双击“当鼠标点击时”,为其设置显现参数,而且将动画设置为“向左滑动”,时刻250ms恩平人才网

运用相同的设置,将“合作意向”、“下一步战略”后的“请挑选”按钮进行装备。

完结这一步,完结了点击不同的按钮,显现不同的场景页面恩平最新招聘职位

下面,咱们来设置多选的作用,也是本例的要点开平招聘网。咱们以“了解程度”场景页面进行举例:

该页面首要包含了选项的称号(上图左边内容),以及点击后被勾选的显现元素(上图右侧内容)。

这儿咱们为右侧5个勾选的作用,别离命名为dx11 ~ dx15。

完结设置后,咱们来创立点击后显现勾选作用的特效,挑选图片左边的选项称号,别离创立5个相同的点击动作。

这儿需求留意一点,需求一一对应,第一个选项对应dx11;第二个选项对应dx12,;依此类推。

完结后,咱们将dx11~dx15这5个元素设置透明度为0,而且移动至“了解程度”页面中,与选项坐标相同韶关公司招聘信息大全

黄色表明元素被设置了透明度为0,而且层级高于下面的层信宜招聘网

然后咱们给“回来”和“保存”按钮,设置动作,点击后,躲藏“了解程度”页面茂名人才网

最终咱们将“了解程度”页面一切元素成组,命名为“dx”,一起将“dx”透明度设置为0,次序设置为“置于顶层(Ctrl+Shift+])”,而且将“dx”移动至主页面,彻底掩盖主页面高州人才网

运用相同的设置,将“合作意向”、“下一步战略”进行装备。

装备完结后,按F5即可进行预览。

源文件下载

https://pan.baidu.com/s/1dhz3v8F5PJGGlOCs3J5-4A

 

作者:ZQZ原型师,专心原型规划/交互规划

本文由 @ZQZ原型师 原创发布于九三招聘网,未经许可,制止转载。

题图来自作者。