教程记录原因
Axure作为产品工作中不可缺少的可视化原型工具,虽然我们每天都在用,但是大多数人也只是在做堆积木的过程,这其中也包括我~一些产品界经验丰富的老咖面对原型图,可能觉得只要能够表达出需求的意思就可以了,没有必要做很多的动态效果,添加很多的变量。我刚入行时,我的经理也说过这样的话。直到有一次,涉及到一个新的项目,需要尽可能的让所有的需求都可视化。正好这个项目又落到我的头上时,我轻轻松松的去做了,结果当然被K了。页面重复的做了很多,客户看的很复杂,很麻烦,没有丝毫动态效果,更不要提什么变量了~所以,我深深的总结了,新人还是要做好基础,老咖之所以说不重要是因为人家都会了,自然知道什么时候该做,什么时候不做了。
教程说明
本次教程只说明APP原型设计中遇到长界面需要拖动时,如何做到上下拖动,都可以控制在一定范围内。
教程开始
1、打开Axure8,Axure经过更新后界面更加符合现代潮流了,很像WPS的界面风格,功能应用大致没有什么变化、元件库里多了默认的ICON图标、概要页面中更加具体,一目了然啊~很方便(舒服脸)
2、找到元件库中的内联框架,拖动到工作区域内;
设置内联框架的尺寸为宽:300,高500;(随便设置的,为了下面计算方便),这里放置内联框架时最好贴着坐标系的(0,0)
3、在另外1个页面上放置动态面板;
设置动态面板的尺寸为宽300,高800;(说好的长尺寸来了)在动态面板中放好内容物,我放了2张美女图片(呵呵呵~),同样放置在坐标系的(0,0)处;
4、设置动态面板的拖动规则,设置结束后的状态如下,如果不想看详解就直接对着做哦~
详细说明:
首先将动态面板和内联框架连接,双击内联框架,在出现的弹窗中点击需要连接的动态面板即可;
其次回到设置动态面板属性设置;
设置动态面板(图片集)垂直拖动
完成上一步,就能够实现动态面板上下滑动了,但是还不能实现在固定范围内滑动;
接下来设置“拖动结束时”的情况;
拖动结束时有2种情况,1种是用户向下滑动,需要动态面板自动弹回到初始状态;另外1种是用户向上滑动,超出了框架的底部一定范围时,动态面板会弹回到和框架平齐的状态;
第1种向下滑动,只要在动态面板的Y值大于0时,将动态面板弹回初始状态就可以了;
第2种需要计算坐标值;
假设,我们需要判断拖动内容超过内联框架100的时候弹回,也就是说当动态面板的Y值小于-400的时候,才可以弹回;条件有了,目标是什么,也就知道了。只要将动态面板的Y值调回-300就可以实现。
就酱~需要一些动态效果,比如弹跳神马的,也可以自己设置哦~~