手机端交互中,页面的上下左右滑动是常用的交互形态,今天给大家分享一下如何使用Axure来进行模拟,这里使用动态面板来实现,如果对动态面板不是很了解的同学,请查看专栏里的“动态面板入门教程”。
先看效果:
开工之前我们我们先分析一下,滑动效果的用处和实现方法:
1、上下滑动:一般用于浏览页面,例如新闻客户端的信息流。
实现方案:通过onDrag事件(锁定y轴)控制页面move动作,使页面上下移动
2、左右滑动:一般用于tab切换,且一般都是顶部tab,例如新闻客户端的分类
实现方案:通过onSwpieLeft和Right控制多个state页面切换,达到tab切换
案例:模拟头条的页面切换(上下浏览页面,左右切tab)
一、实现方案:
由于顶部tab和内容页面的切换效果不一样(一个为滑动,一个无动画),我们这里将tab和页面分隔为两个动态面板来实现。
我们首先创建两个动态面板,如下图,我们分别命名为:Tab页,内容页。
二、动态面板的内容设置
1、为动态面板2(内容页),增加三个state页面,并将三个页面内容填充进去
①为了体现上下滑动效果,页面尽量长一些,至少2屏,这样滑动效果较好。
②每个页面中的元件制作完成后,建议都group起来,方便后续绑定action。