AxureRP6.5原型设计-移动端左右滑动菜单效果制作

这两天在研究AxureRP这个原型设计软件,为公司的一个APP制作原型。总结了几个模仿移动设备滑动效果的制作过程,首先是左右滑动菜单效果。左右滑动菜单在移动端是是很常见的菜单展现方式,通过AxureRP的动态面板结合几条简单的事件就能轻松实现它。

首先在页面添加一个动态面板(Dynamic Panel),命名为MainMenu,在自动生成的场景1(State1)中再添加一个动态面板,命名为MainMenu-menu。
控件的结构如图:
移动端滑动菜单效果制作笔记

动态面板MainMenu相当于一个遮罩:
AxureRP6.5移动端左右滑动菜单效果制作

动态面板MainMenu-menu为滑动菜单的内容,我设计成每一屏宽320px,总共有7屏:
AxureRP6.5移动端左右滑动菜单效果制作

在变量管理器中添加一个变量currentMenu,用于存储当前菜单所在的位置,然后在页面交互中加入一个Case,设定变量currentMenu初始值为1:
AxureRP6.5移动端左右滑动菜单效果制作

给MainMenu添加一堆交互如图:
AxureRP6.5移动端左右滑动菜单效果制作
OnDrag下添加一个事件(Case 1),当拖动开始的时候让MainMenu-menu跟着鼠标左右方向滑动
OnDragDrop下,用[[TotalDragX]]来判断左右滑动的方向,负数代表向左滑,正数代表向右滑,用滑动20个像素为分界做滑动动作的判断(toLeft和toRight事件);
currentMenu同时参与滑动是否到边界的判断,小于等于1或者大于等于7,则表示到了边界(toLeftStop和toRightStop事件),滑动出边界会缓冲回到边界
每次滑动结束currentMenu这个变量会根据左右+1或者-1,表示当前菜单项的序号。滑动结束后,MainMenu-menu的位置计算公式为[[-320*(currentMenu-1)]],并且给它添加一个300ms的缓冲效果。

此效果演示:
http://brain1981.com/work/prototype-HPCmobile/Main_menu.html

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/102.html。百度不可信,搜索请谨慎。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以获取本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

2 关于 “AxureRP6.5原型设计-移动端左右滑动菜单效果制作” 的评论

  1. 产品新人

    您好,http://blog.brain1981.com/102.html 这一篇的原型,我照着您的方法做,总是不成功,currentMenu变量只要创建了就可以?不用把currentMenu和菜单关联起来?能不能给个rp文件呢~一个大三产品学习者求教。谢谢。350533652@qq.com 我邮箱,冒昧打扰了

    回复
    1. Brain 文章作者

      currentMenu的创建是在PageNotes里的,相当于一个全局变量,MainMenu里面的那些事件都在不断的操作着currentMenu。这个项目创建时间久远,RP文件一时也找不到了。另外现在Axure版本已经早就不是6.5了,我这个文章是6.5的,也许和新版有一些不同。

      回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注