加载中…
正文 字体大小:

Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)

(2016-06-11 20:16:29)
标签:

axure教程

axure固定区域拖动。

分类: ps及交互教程
如果是做手机app应用的高保真原型图的话,在限定区域上下滑动应该是比较常见的一种交互效果,无论是图片展示也好,列表信息也好,那今天就说说axure做这种交互效果的方法。
首先准备一张瘦长型图片,我选了一张芒种的,正好对应现在的节气,也算应景了。
在做之前,脑子中其实应该生成一张效果图,这样有助于帮助我们理清楚需要添加什么元件,使用什么用例。
如下图所示,图片无论怎么拖动,最下限不会在下面红线的上方,最上限不会在上面红线的下方,听起来好拗口,但这就是我们要的效果。
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)

用图片来说明一下吧,简单粗暴,但是浅显易懂。
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)     Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)

想象个差不多之后就可以开始了,(不要YY的太久嘛),下面一步步来分解。
首先,既然是固定的显示区域,老规矩,用动态面板来实现。
这里动态面板的高度自然要比图片小一些,因为图片是250*640,所以动态面板随便给了个高度300,命名还是appear吧。
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)


编辑appear,把图片放进去。这里因为下一步要做拖动图片的动作,但图片的交互里面是没有拖动选项的,所以把图片再转换成动态面板,命名drag_pic(拖动图片的意思,命名要有意义嘛)

Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)

go on~  第一张图所示的上下两根红线限定的范围肿么办呢?这次,我们引入一个新的元件,叫做热区(hot spot)。热区元件怎么理解呢?其实它和画个矩形没有区别,但是热区是透明的,当然啦,你也可以把矩形搞成透明的,但直接用热区不是简单嘛。这就好像很多效果可以用动态面板的几个状态来实现,非要叠加一堆然后搞个隐藏显示的。

Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)


上下各拖入一个热区,分别命名top和down.
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)

万事俱备,只欠交互,下面就可以进行用例的设置了。
选动态面板drag_pic的交互动作“拖动动态面板时”,在用例那里点击“新增条件”

Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)


在做条件时,想清楚我们要的第一个效果,就是在限定区域自由上下拖动,没有离开限定区域。
那转换成条件语句就是当drag_pic接触top和接触down的时候,drag_pic沿Y轴拖动。
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)


下面继续做把拖动限定在固定区域的操作。
向下拖动时,当图片离开(不接触)了热区top怎么办?让pic不能再继续向下拖动,这是正解。
双击“拖动动态面板时”,继续加用例,用条件语句实现:
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)


配置动作就是当pic沿Y轴向下拖动离开top时,把pic再拉回去,拉回去的位置就是绝对位置(0,0)
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)

同理,把离开down的“监控”范围的用例也添加上。在做这一步之前,我们有个要提前完成的工作,就是看一下当图片向上拖动到图片最下缘到down那里时对应的坐标。如图所示,我的是(0,-340)
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)


当drag_pic未接触down时,把pic拉回来,坐标就是刚才确定的坐标。
Axure在限定范围里的滑动效果(顺附热区和条件语句的使用)

over,F5运行一下,完美。
附百度网盘源文件地址,可直接下载修改使用 http://pan.baidu.com/s/1o8QtwEm 
 

明天如果有时间的话,会继续分享热区的使用技巧~





0

阅读 评论 收藏 转载 喜欢 打印举报
已投稿到:
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有