相对于其他交互效果,Axure制作app页面的上下滑动效果还是比较简单的。
为了使效果显著一点,先做一款简单的原型如下。
第一步,将下面框起来的部分要做滑动的内容选好,点击鼠标右键‘转化为动态面板’,并把这个动态面板命名为‘界面内容’;
第二步,选中‘界面内容’动态面板,选择用例‘拖动时’(有的axure版本可能是‘拖动动态面板时’)进入用例编辑;
选择‘移动--勾选’界面内容‘--选择’垂直拖动‘(有的axure版本可能是‘延y轴移动’);
这样确认后预览可以实现页面滑动的效果了;
第三步,到弹回的效果实现了:先拖拽一条水平线放在页面上方下图所示位置,并命名为’顶部接触线‘,是为了使界面内容接触到这根线后弹回;先记录下’界面内容‘动态面板所在位置,我这里是(0,53);
第四步,添加弹回的交互用例:选中动态面板,选择用例’拖动结束时‘;进入用例编辑页面后首先选择’添加条件‘;
’条件设立‘页面选择‘元件范围’接触到‘顶部接触线’;
条件设立确认后,编辑用例选择‘移动’--勾选‘界面内容’--选择‘移动位置’ 坐标--之前记录下来的(0,53);
确认用例编辑后可以预览效果,这样就可以实现上方弹回的效果了;下方弹回也可以用同样的方法。