网上有很多关于 Axure 的教程,但是按照我学习的过程我认为 Axure 完全不需要你完整的去花一段时间去刻意的学习,需要哪些疗效并且没有思路上网可以查到对应的方案完成自己想要的疗效就可以了,所以我也希望可以将我之前查询过的教程整理下来给须要的朋友们参考。
本次将会一起说下 Axure 中拖动风波和滚动风波,大家可在下文中按大标题快速找到对应的教程,不明白有哪些区别的朋友可以大约完整浏览一下。
Axure 中的拖动风波
应用场景如:移动位置;滑动验证;拖动上传;拖动排序等。
操作方法: pc 端:鼠标左键按住联通 手机端:手指按住联通即可。
本次我们以一个简单的滑动滑块为例:
(1)首先在 Axure 中画出一个简单的滑块
(2)将原型滑块右键设置为动态面板(因为动态面板才可以设置拖动和滚动风波)
(3)给动态面板设置拖动风波,拖动时让滑块动态面板水平联通
(4)完成,进行预览
我们预览时会发觉滑块会超出圆形线段的范围,这并不是我们想要的疗效。
(5)设置拖动的边界(演示中右边小于 40px,右侧大于 610px)
(6)操作完成,我们预览来看一下疗效吧
在线预览地址:
Axure 中的滚动风波
应用场景如:长页面的显示;线上滚动是出现置顶按键;滚动切换Tab等
操作方法: pc 端:鼠标滚轮上下滚动 手机端:上下滑动即可
本次我们以 Chrome 的 Infinity 插件切换疗效为例:
(1)首先在 Axure 中画出一个简单的线框图(又懒又强迫症,我就先截图了)
(2)调整第一页和第二页的位置后合并为分组,同时创建一个动态面板
(3)调整动态面板的大小,这是很重要的一步,如果你之前的尝试没有成功,那么很可能是这步的问题。滚动只有动态面板可以上下滚动时,也就是动态面板区域要比内容小。故我们将动态面板调整为比内容小 1px 的高度,和合适的长度。(没有出现滚动条的可以在动态面板上右键选择显示滚动条)
(4)给动态面板设置滚动风波,分别设置向下和向上滚动时联通到我们想要的位置,为了不这么肿胀我们降低一个弹性动漫,时间 500ms。
(5)现在我们想要的疗效已经完成了,但是作为完美主义,我们最后吧滚动条隐藏一下吧
(6)我们期望的疗效早已完美完成了,最后我们顺便把里面提及到拖动风波也加一下吧。分别设置向左拖动和往右拖动是联通到对应的位置,同时设置拖动时随着拖动一起联通(边界左右稍为降低一点距离,效果会更好哦)
预览地址:
到这儿本次的教程就结束了,大家假如有其他哪些想要的实现的疗效可以在下边留言,我们一起学习阐述哈。