axure制作移动端产品原型时,会遇到很多难题,建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具.当然,axure是完全能够实现移动端交互的,只是我们需要利用动态模板、坐标定位等等方式灵活的实现目标.
接下来进入主题,跟小伙伴们分享一下【如何利用axure实现移动端页面拖动展示效果】
打开axure前,小伙伴们不妨先设想一下任务的实现方法：
1、移动端显示的页面是固定尺寸的,里面的整体页面可能会超出固定尺寸范围,所以我们需要建立一个动态模板,使其成为固定尺寸的页面,而把超长的整体页面放入其中.
2、整体页面必须能够被拖拽,所以整体页面又是一个动态面板
3、在我们使用移动端产品,进入页面后,向下拖拽,一般页面会被下拉,而且上方会出现【放开刷新】的提示；同理,我们手指上滑,页面被拖至底部,再不停上滑,页面会被上拉,手指放开后,页面下滑至原位.所以我们axure中对整体页面的动态模板需要设置离开顶部或者离开底部时,自动返回原位的交互
这三个实现方法,是我们实现拖动交互的主要思路.接着我们就具体看一下如何在axure中实现目标.
1、准备工作：打开axure,新建文档,添加一张iphone的背景素材,顶部添加的wifi和电量的信息,以及顶部导航栏（这些素材百度都能够找到,ios8 UIkit）,准备工作完毕
2、添加一个动态面板,这个面板相当于我们的屏幕,所以名字能够称为“固定页面”
3、动态面板内再添加一个动态面板,这第二个面板相当于我们要展示的内容,需要拖动才能展示整个内容,长度自然也比“固定页面”要长,能够称之为“长内容”
4、长内容的面板内添加正文内容,这里我添加了一张图片
5、接下来先实现长面板的拖动功能,在固定页面内对长内容面板添加onDrag交互,交互的内容是move,而且move with y,也就是长面只能沿着Y轴拖动
6、拖动功能已经实现,我们能够先预先浏览一下已经完成的效果（点击axure *** 作栏的preview按钮）,尝试着上下拖动图片,结果符合预期,只是拖动后,图片不可以复位,那么接下去就要实现复位的功能
7、为了实现复位,我们需要在固定页面的顶部和底部添加两个判断用的矩形.顶部的矩形我们暂且称之为“上离开判断区域”,顾名思义,当长内容面板向下拖动,离开“上离开判断区域”,长内容需要move到原始的"0,0"坐标,这个交互我们称之为“下拉复位”.判断区域能够设置为透明,与长内容同宽,高度为象征性的2px
8、选择长内容面板,在onDrag动作中添加新的交互“下拉复位”,增加触发条件：当area of widget 长内容 is not over area of widget 上离开判断区域.那么首先wAIt 400ms,接着move 长内容,编辑结果 move to X：0 Y：0.
注意：编辑完下拉复位后,这里有一个很重要的改动,在交互栏中,右击把“下拉复位”的else if条件修改为if.必须这样做,不然下拉复位的动作没有办法实现.至于这样做的原因,就留给小伙伴们思考吧.
9、上拉复位的动作完成后,我们还要实现下拉复位.首先我们添加一个判断框,边框与填充均为透明,尺寸为长内容的宽度与象征性的2px,定位于固定页的底部
10、在实现下拉复位的时候,我们给长内容的复原位定为X：0和Y：0,这个很容易理解,长面板向上复位时肯定移动到（0,0）的位置.但现在实现上拉复位,我们需要计算长面板的高度,这是由于长面板拖到底部后,固定页面显示的是长面板的下部分内容.这里可能有些费解,看我的截图也许能帮助理解
11、经过上一步的 *** 作,我们得知当整个长内容显示到最底部时,整个长内容的定位为（0,-295）,接下去就和实现下拉复位一样了,在交互栏onDrag动作中添加交互“上拉复位”,添加触发条件 当area of widget 长内容 is not over area of widget 下离开判断区域.那么首先wAIt 400ms,接着move 长内容,编辑结果 move to X：0 Y：-295.
编辑完上拉复位后,在交互栏中,右击把“上拉复位”的else if条件修改为if.
12、全部条件编辑完毕,查看一下交互栏onDrag动作中的全部交互
13、大功告成,赶紧运行一下观察效果
总结：
利用axure实现移动端最基本的上拉与下拉动作是如此复杂,所以我还是建议利用其它原型工具制作移动端原型.然而即便如此,axure还是有其优势,实现静态的页面要比其它原型工具都要便利.
第一步：我们先打开我们的axure软件，点击新建，然后将我们的手机模型拖拽进我们的axure，点击我们的“动态面板”将其往编辑窗口拖拽。如下图
第二步：创建好我们的动态面板之后，按住“ctrl+c”将其复制下来，然后双击我们的“外层动态面板”下面的state1，然后按住“ctrl+v”将我们的“外层动态面板”复制下来
第三步：然后双击我们的“内层动态面板”下面的state1，然后点击“矩形”，并将其图案拖拽到我们的内层动态面板中，调整好位置，并给其填充颜色。
第四步：在拖进一个占位符，并调整其位置，如图所示。
第五步：然后点击我们导航栏上面的“外层”，并将我们的“内层”图案拖拽平移一段距离，如下图。
第六步：然后点击“矩形”，用来量我们“外层”和“内层”之间的距离，方便我们的侧边栏的移动。如下图。量出距离之后，即可将其删掉。
第七步：点击我们导航栏的“内层”，然后在我们选中我们刚才的“占位符”，然后点击我们的“鼠标单击时”选项，如下图。
第八步：进入我们的“单击鼠标时”之后，点击“移动”，勾选“内层”，然后在下面的“y”内输入我们刚才量出来的距离，即“-134”
第九步：点击上面的“添加条件”选项，选择“变量值”、“！=”“0”，然后点击确定。
第十步：再次重复第八和第九步骤，“y”值改为“134”，其他不变，然后点击上面的“添加条件”选项，选择“变量值”、“==”“0”，然后点击确定。
第十一步：然后再次点击我们的“case1”，找到并点击下面的“设置变量值”，勾选“变量”，然后将变量值设为“0”，点击确定，“case2”我们也重复此动作，只是在设置变量值时，不设为0即可。
最后，我们可以预览我们做出来的效果了，我们按住F5，或者点击上面的“预览”，进入网页之后，我们上下滚动鼠标即可看出我们的效果了。
Axure神奇 *** 作系列 - 循环（第一讲）
众所周知，我们使用Axure不仅仅能够制作原型图，也能在原型图中实现一些复杂的交互。接下来带来第一个神奇 *** 作-循环
循环的实现方式
通过JavaScript提供的LOOPS迭代的方法来实现html中的循环一样，Axure中也提供了不同的方式能够帮助我们来实现循环的 *** 作。在用Axure这么久以来我总结归纳了两种循环的实现方式即： 触发事件 与 动态面板循环 ，其中 触发事件 可以针对元件本身进行 *** 作，而 动态面板循环 则是借助于动态面板的循环来触发循环效果。接下来将针对二者做详细讲解。
触发事件
触发事件原理
其实很多的同学在用Axure很久之后可能都没接触到触发事件这个动作，毕竟触发这个动作在动作库的最后面，对！就在这里！
那么当我们针对一个原件添加触发事件时候，发现动作的配置项和元件的交互有所类似，其实这个就是元件的真实交互，也就是说我们在对一个元件添加交互时候能够通过触发事件去触发一个元件的交互，那么如果这两个元件是同一个而且交互唯一的话？
没错，这就能够不断的去交互—触发事件—交互—触发事件—……，就可以进入到循环事件中了。那么这也就是触发事件的原理，通过元件本身的交互去触发自己的交互完成循环。
使用触发事件完成涟漪效果
那么在了解了触发事件的原理之后，我们通过一个示例来讲解如何通过触发事件来完成一个交互的循环，这里将通过透明度调整+尺寸调整的循环交互来实现涟漪效果，最终将会实现下图的效果：
以下为分析及实现步骤：
（1）涟漪循环解析
首先拿到一个交互，首先我们来分析下具体怎么实现效果 （这也是未来大家在做自己的交互时候需要先考虑的问题，而不是直接上手试错） ，那么一个涟漪实际上就是一个圆在放大自己的过程中降低自己的透明度直至消失，一个完整的涟漪实际上就是很多个这样的圆在放大自己的过程中降低自己的透明度直至消失了，所以，核心元件： 一个圆 ，接下来就是实现了
（2）涟漪效果实现
首先，在Axure中拖入一个圆。设置直径为100，填充颜色看自己喜好，边框取消掉，这样为了出来的效果好看。接下来我们先实现圆形在放大自己的时候降低自己的透明度。
那么在这里我们会遇上第一个问题： 什么时候触发涟漪效果？
一般来说我会习惯于在元件载入时候就触发，这样能够实现页面载入之后就开始我们的效果，当然根据实际情况也可以点击之后触发或者鼠标移入之后触发等等，此处根据自己需要的效果灵活调整即可。那么根据载入时的交互来设计，得到如下交互：
这两步拆分如下：
在2000ms中以锚点为中心将圆的尺寸放大为直径240；
在2000ms中将圆的透明度调整为0%。
需要注意的是，在axure中添加动作时， 动作的先后顺序并不是按照组织动作的先后顺序由上向下进行的 ，在没有碰见等待时间之前，所有的动作同时进行。
所以整合起来就是，在2000ms中以锚点为中心将圆的尺寸放大为直径240 并且 将圆的透明度调整为0%。就这样，我们就能够实现圆的放大效果，接下来我们要考虑如何循环这个过程。
在循环之前，我们需要先将圆还原到放大之前的状态，这里不做细讲，简而言之就是将透明度和尺寸恢复到之前的状态（也可以把透明度再降低点，尺寸在小点，具体效果差异可以自己尝试着看）。那么在这里需要注意上面提到的一句话： 动作的先后顺序并不是按照组织动作的先后顺序由上向下进行的 ，所以中间我们需要加上 等待事件， 这个事件的时间设定为0即可，对于Axure来说，只要有这个事件，那么交互在这里就会停下来。（这里建议可以尝试下不做等待事件看下最终的效果，可以加深理解），然后我们得到这个交互：
这个时候我们F5一下，就可以发现元件放大透明之后返回到自己原始状态了，那么接下来就是如何循环了。
这里直接讲解：添加触发事件动作，选择元件为自己，然后由于我们的交互是做在自己的载入时动作上的，那么，下方选择载入时，这样就完成了一个触发事件了。
F5预览下看下，一个圆就能够自己搁哪儿放大透明然后变回来再放大透明如此循环了。那么至此，其实我们已经完成了一个完整的循环了。
后面就简单了，复制三个相同的圆，然后给另外两个圆的交互加上一个等待事件，把三个圆叠加在一起就完成了！F5一下，看下效果~
小结
通过触发事件我们能够很方便的实现一个循环，通过触发事件我们能够做到闪烁、涟漪、旋转、左右横跳（误）等等各种 *** 作。那么问题来了~
由于触发事件只要开始了就进入了一个闭环，就算在中间插入其他的动作，也只是打断了一会儿，导致这个循环会不听的进行下去，那么， 如何停下来？
反正目前我也没想到好的办法，所以下一期我们来介绍一种通过其他的元件来实现循环并且能够随时停止继续的方法— 动态面板实现循环 。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）