AxureRP6.5原型设计-移动端切入式菜单效果制作

接上篇移动端左右滑动菜单效果制作,这次记录一下切入式菜单的在AxureRP中的实现方式。

首先在画板上先按屏幕尺寸建立一个顶部的区域,宽320,高40;顶部左侧放菜单的按钮;在下面剩下的区域放一个动态面板,命名为(top_menu),宽320,高450,覆盖屏幕减去顶部的全部区域:
AxureRP6.5移动端切入式菜单效果制作

动态面板top_menu的State1下面再建立两个动态面板:
top_menu_blackBg,一个黑色背景区域,宽320,高450,作用是菜单切入后在菜单以外的区域背景变暗;
top_menu_menu,菜单主体,放置在top_menu_blackBg上面,做成一个竖直的菜单,宽150,高450,位置左-150,这样它就到屏幕左侧看不见了,做好每个按钮的链接:
AxureRP6.5移动端切入式菜单效果制作

此时页面最外层的top_menu面板结构如下:
AxureRP6.5移动端切入式菜单效果制作

接下来添加逻辑,分为3步
#1. 由于菜单是默认显示的,虽然top_menu的位置预先设置在屏幕外没,但top_menu_blackBg是在屏幕内的,当页面加载的时候,就要先隐藏掉整个菜单:
AxureRP6.5移动端切入式菜单效果制作

#2. 点击顶部的菜单按钮才会弹出菜单,弹出的步骤是先显示top_menu,再让原本在左侧的top_menu_menu滑到屏幕中,然后让黑色背景top_menu_blackBg渐显出来。这里设置了让top_menu_blackBg渐显的逻辑,则显现之前他就会自动隐藏,因此不需要额外添加让它隐藏的命令。
AxureRP6.5移动端切入式菜单效果制作

#3.接下来是关闭菜单的逻辑,就是点一下黑色背景,菜单就滑回去了。
动作要分几步走,先用300ms时间让top_menu_menu滑到左侧屏幕外;此时等上300ms,再隐藏top_menu_blackBg和整个的top_menu,这样动作就连贯了。把这些事件添加到top_menu_blackBg上
AxureRP6.5移动端切入式菜单效果制作

如果是为Android设备设计这个原型,别忘了在手机壳的菜单按钮上也加上上面的#2事件,这样才算完成

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

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

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

发表评论

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