首页 > 代码库 > Axure 制作app侧滑菜单

Axure 制作app侧滑菜单

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


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

  1. 在“筛选”按钮上方覆盖一层热区,命名为“筛选”;

  2. 拖入一个无边框矩形,覆盖整个页面区域,作为菜单弹出后的页面遮罩,设置矩形填充颜色为 #F5F5F5,透明度40%,命名为“遮罩”;

  3. 制作菜单:拖入无边框矩形紧贴页面上方-右侧,高度和页面高度相同,宽度小于页面宽度,在菜单里填充内容,最后把菜单里的所有原件组合,命名为“菜单”,并隐藏。(此步骤由于各种元件是重合的,可以先把菜单在页面背景旁边制作,组合后再移动)


技术分享

技术分享


开始添加交互:

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

  2. 为遮罩添加鼠标单击时事件:隐藏“菜单”,动画为向右滑动;隐藏遮罩。

   

技术分享

技术分享


OK,大功告成~


本文出自 “产品经理_狄睿鑫” 博客,请务必保留此出处http://pmdrx.blog.51cto.com/11810835/1911380

Axure 制作app侧滑菜单