axure8.0快速入门新手教程:电子相册

2017年3月31日 阅读:734

电子相册,多用于个人空间相册,它以循环轮播的方式对相片进行展示。它的展示方式主要是将当前的相片最大最清晰地放在最顶层,然后其他相片则逐层变小变模糊,在用户点击下一张时,这些相片可以循环进行轮播。目前在网络上似乎还没看见有人做出这种电子相册的原型,这里就教大家如何使用axure8.0制作电子相册原型,如下是其效果图:

第一步:拖拉摆放好相关控件

1、5张相片:这5张相片分别命名为“图片1”、“图片2”、“图片3”、“图片4”和“图片5”,大小分别为240X320、222X296、204X272、204X272和222X296,不透明度分别为100%、60%、20%、20%和60%,层次摆放分别为“图片1”>“图片2”>“图片3”>“图片5”>“图片4”,从左到右5张相片的中心点等距相差100,每张相片的初始状态均设置为禁用。

2、1个矩形:白底黑框,169X45,命名为“下一张”。

第二步:为页面添加页面载入时用例

为页面载入时添加5个全局变量,并设置初始值,picture1=0,picture2=1,picture3=1,picture4=0,picture5=0。

第三步:为“下一张”添加鼠标单击时用例

在鼠标单击“下一张”时,触发5张相片的鼠标单击时用例。

第四步:为“图片1”~“图片5”各自添加鼠标单击时用例

“图片1”在鼠标单击时有5个用例,分别如下设置:

用例1:

条件:如果当前元件的宽度为204,全局变量picture1为1;

动作1:相对移动“图片1”,x轴为-400,y轴为0,动画为线性,时间为500毫秒;

动作2:设置全局变量picture1为0。

用例2:

条件:如果当前元件的宽度为204,全局变量picture1为0;

动作1:相对移动“图片1”,x轴为100,y轴为0,动画为线性,时间为500毫秒;

动作2:设置“图片1”的尺寸宽度为【当前元件宽度+18】,高度为【当前元件高度+24】,锚点为中心,动画为线性,线性为500毫秒;

动作3:设置“图片1”的不透明度为60%,动画为线性,线性为500毫秒。

用例3:

条件:如果当前元件的宽度为222,全局变量picture1为0;

动作1:相对移动“图片1”,x轴为100,y轴为0,动画为线性,时间为500毫秒;

动作2:设置“图片1”的尺寸宽度为【当前元件宽度+18】,高度为【当前元件高度+24】,锚点为中心,动画为线性,线性为500毫秒;

动作3:将“图片1”置于顶端;

动作4:设置“图片1”的不透明度为100%,动画为线性,线性为500毫秒。

用例4:

条件:如果当前元件的宽度为240,全局变量picture1为0;

动作1:相对移动“图片1”,x轴为100,y轴为0,动画为线性,时间为500毫秒;

动作2:设置“图片1”的尺寸宽度为【当前元件宽度-18】,高度为【当前元件高度-24】,锚点为中心,动画为线性,线性为500毫秒;

动作3:设置“图片1”的不透明度为60%,动画为线性,线性为500毫秒;

动作4:设置全局变量picture1为1。

用例5:

条件:其他

动作1:相对移动“图片1”,x轴为100,y轴为0,动画为线性,时间为500毫秒;

动作2:设置“图片1”的尺寸宽度为【当前元件宽度-18】,高度为【当前元件高度-24】,锚点为中心,动画为线性,线性为500毫秒;

动作3:设置“图片1”的不透明度为20%,动画为线性,线性为500毫秒;

这里只教大家如何设置“图片1”的鼠标单击时用例,其他4张相片的交互设置类似,只是一些参数不同罢了,具体请查看原型rp文件的设置。

设置好5张相片的交互后,点击预览并选择“下一张”就可以看到电子相册的轮播效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之电子相册
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/03/31/281/

16条评论

  • 2018年3月14日在下午12:43

    能不能帮我看一下我的为什么不能循环吗

  • cool 2017年11月8日在下午12:13

    我做出来了,但是点击下一张按钮没反应,单个点击图片能实现,我还想问下,为什么用例5没有加条件拿?

  • zico 2017年11月7日在下午4:26

    单独单击每一张图片的效果,和点击”下一张”的效果不一样,为什么

    • cool 2017年11月12日在上午11:46

      遇到和你一样的问题,不知道解决没你。

  • 赵先森 2017年7月27日在下午3:34

    写的挺好的

  • CSJ 2017年7月25日在下午3:49

    从左到右5张相片的中心点等距相差100,这个怎么做啊?

  • 哈杂 2017年7月14日在上午11:16

    快速一直点击下一张 会将整个交互界面移出浏览器窗口。是因为交互用例设置的问题么?

    • 维度 2017年7月14日在上午11:57

      不是,axure本身的精度问题,只能通过禁用的方式来避免狂点的行为

  • 哈杂 2017年7月14日在上午10:11

    快速一直点击下一张的时候,会把整个交互移到浏览器外?这是怎么回事?

  • 晓艳 2017年6月14日在下午2:13

    感谢楼主的教程。终于做出来了。但是我在用例4中加上当图片宽度等于240时 Send This to back, 然后效果才正常。

  • 一方 2017年4月25日在上午11:00

    这个不能下载呀。。。

    • 维度 2017年4月25日在下午6:28

      这个暂时不开放

  • 老陈 2017年4月19日在下午4:22

    按照你描述的做出来运行后效果不能实现,可否帮我看看哪里有问题?

    • 维度 2017年4月22日在上午11:35

      这个原型确实比较复杂,你要具体看看我博客中的每一图中的原型交互用例,特别要注意移动位置和层次的关系

      • 老陈 2017年4月22日在下午4:27

        我把资料发给你帮我看看,你的邮箱是?

        • 维度 2017年4月24日在上午11:16

          能循环起来,不过你自己把图片的宽和高搞乱了,仔细检查检查。