Axure 制作app侧滑菜单

移动app中关于“菜单”的设计有很多种类,其中侧滑菜单是很常见的一种设计方式,本文以淘宝的筛选菜单为例,使用axure实现效果。

为了节约时间,排除干扰,我们就不拖入其他元件了,直接插入一张手机淘宝的页面截图做演示:

  1. 在“筛选”按钮上方覆盖一层热区,命名为“筛选”;
  2. 拖入一个无边框矩形,覆盖整个页面区域,作为菜单弹出后的页面遮罩,设置矩形填充颜色为 #F5F5F5,透明度40%,命名为“遮罩”;
  3. 制作菜单:拖入无边框矩形紧贴页面上方-右侧,高度和页面高度相同,宽度小于页面宽度,在菜单里填充内容,最后把菜单里的所有原件组合,命名为“菜单”,并隐藏。(此步骤由于各种元件是重合的,可以先把菜单在页面背景旁边制作,组合后再移动)

开始添加交互:

  1. 为筛选热区添加鼠标单击时事件:显示“菜单”,动画为向左滑动,至于顶层;显示遮罩。
  2. 为遮罩添加鼠标单击时事件:隐藏“菜单”,动画为向右滑动;隐藏遮罩。

OK,大功告成~

时间: 2025-01-02 16:22:43

Axure 制作app侧滑菜单的相关文章

AXURE制作APP抽屉式菜单

1.拖一个dynamic panel到窗体,将State1改名为State_首页: 2.拖2个dynamic panel到State_首页中,分别命名为侧边菜单及首页内容,首页内容盖住侧边菜单: 3.在首页内容和侧边菜单随便放点东西,比如图片之类的,再在首页内容中放置一个按钮,然后设置按钮的点击事件为Move-首页内容-Move by (280,0)-linear 500ms即可实现点击显示侧边栏效果. 4.同理设置首页内容恢复原位置(move -280即可). 5.如果需要滑动,则设置首页的S

Axure制作app侧面抽屉菜单

在之前的文章中以手机淘宝app的筛选菜单为例,给大家介绍过使用axure制作app侧面滑动菜单的方法,本文继续为大家介绍另外一种app的菜单样式--抽屉菜单.手机qq.酷狗音乐等app都采取了这种抽屉菜单的设计. 先看效果~(因为51博客的缘故,貌似效果不是很好,但能看出来抽屉的推拉效果) 效果描述: 点击左上角头像,抽屉菜单拉出,再次点击头像,抽屉菜单关闭: 向右拖动页面,抽屉菜单拉出,向左拖动页面,抽屉菜单关闭. 我们先确定基本方向: 推拉效果,左右拖动(模拟手机上的滑动手势),我们首先想到

【转载】使用Axure制作App原型怎样设置尺寸?

使用Axure制作App原型怎样设置尺寸? 原文地址:http://www.axure.us/2172/ 本文由原型库网站投稿,转载请注明出处. 最近有几位小伙伴儿都提出同样一个疑问:想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科.这里金乌直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接

使用Axure制作App原型的尺寸设置

想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?这里直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可. 如: iPhone4 320*480iPhone5  320*568 iPhone6  375*667 iPhone 6 Plus 414*736 Samsung Galaxy S

转——使用Axure制作App原型应该怎样设置尺寸?

想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科.这里金乌直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可. 原帖:http://www.yuanxingku.com/article-65-1.html 如: iPhone4

axure 制作滚动效果(不显示滚动条)

笔者在上一篇文章<axure制作app侧滑菜单>中介绍了淘宝app筛选菜单的制作方法,但筛选菜单中的内容仅仅填充了"一屏"的内容,如果内容比较多,就需要菜单能够上下滚动,且仅仅是菜单部分滚动,其他商品列表部分(背景)无需滚动,本文介绍一下实现方法: 上篇<axure制作app侧滑菜单>博文地址: http://pmdrx.blog.51cto.com/11810835/1911380 要是实现局部滚动,动态面板即可实现,但动态面板的滚动条是不能隐藏的,这个时候我

利用 MUI开发app, 如何实现侧滑菜单及其主体部分上下滑动

 利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验.但是,在实现一些复杂功能的过程中,难免遇到一些小问题.博主将以自己在项目开发中的一些的经验,陆续对mui使用中容易遇到的小问题,予以解答和分享,希望能帮到更多的开发者朋友. 最近,博主在项目开发过程中遇到这样一个问题,即利用mui侧滑菜单模块,实现APP的侧滑菜单效果时,侧滑菜单加入以后,将影响自身

老二牛车Axure夜话:Axure手机原型视频教程之侧滑菜单(抽屉导航)

老二牛车Axure夜话:Axure手机原型视频教程之侧滑菜单(抽屉导航) 案例描述:侧滑菜单(抽屉导航) 知识点: 动态面板移动 效果图: 本站在线效果预览:http://www.iniuche.com/phonelesson/drawer/start.html#p=home(firefox原型文件) AxShare在线效果预览: 原型下载地址:侧滑菜单抽屉导航.rp 在线视频: 实现步骤: 更新中…..

如何用Axure快速制作APP交互原型

对于产品经理来说,熟练使用一些常用软件是一项十分必要的技能.其中,作为一个专业的快速原型设计工具,Axure RP无疑在产品人心中拥有一个难以撼动的地位.但就要PS一样,虽然足够专业,但同样也会存在使用灵活性的一些问题. 今天我们就谈谈,如何用Axure快速制作APP交互原型,不对,更准确的说法应该是:如何用Axure快速制作一份有水准的APP交互原型.作为一名优秀的产品人不仅要保证效率,也要保证质量才行. 首先抛出我的方法论:制作属于自己的元件库并要学会善用母版,熟悉APP设计规范并要有自己一