菜单是指引用户浏览网页或者使用APP的导向，吸附菜单在PC端和移动端的设计都有存在，它突出了菜单的重要性，它让菜单时时刻刻都在用户“够得着”的地方，以让用户没那容易“迷路”。这一章就教大家如何使用axure原型工具制作APP中的吸附菜单。当然，网页中的吸附菜单原理一样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
第一步：拖拉摆放好相关的控件
所有控件包括三部分：“手机壳”图片、“屏幕”动态面板和“菜单”组合文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
1、“手机壳”图片：就一张图片，这没啥好说的；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
2、“屏幕”动态面板：271X483，放在“手机壳”的中间，在state1面板状态中放置3条水平线以及一个动态面板，分别命名为“界限”，“下限”，“上限”和“内容”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
（1）“界限”水平线：宽度为271，放在（0，-150）的位置上；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
（2）“下限”水平线：宽度为271，放在（0，482）的位置上；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
（3）“上限”水平线：宽度为271，放在（0，0）的位置上；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
（4）“内容”动态面板：271X796，放在（0,0）的位置上，在该动态面板的state1面板状态中，顶部放置一张图片表示banner图，中间放置三个矩形表示菜单按钮，分别为产品，技术和运营，下方放置一些白底矩形表示该页面主题内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
3、“菜单”组合：于“内容”动态面板的state1面板状态中的3个菜单按钮一样，直接复制出来放在“屏幕”顶部即可，初始状态记得设置为隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
第二步：为“内容”添加一个拖动时用例
该用例的条件是：“内容”接触到“界限”的时候。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
该用例的动作是：一是显示“菜单”组合，二是垂直拖动“内容”动态面板，其中顶部边界小于等于“上限”的y轴位置，底部边界大于等于“下限”的y轴位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
第三步：为“内容”添加另一个拖动时用例
该用例的条件是：“内容”未接触到“界限”的时候。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
该用例的动作是：一是隐藏“菜单”组合，二是垂直拖动“内容”动态面板，其中顶部边界小于等于“上限”的y轴位置，底部边界大于等于“下限”的y轴位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
可以了，点击预览并上下拖动屏幕即可以看到效果。同时也可以随时关注我的个人博客：http://weidublog.com，因为工作过程中有很多这些axure原型设计小技巧的例子，所以我会坚持分享下去，希望对大家有帮助，你们对我的关注就是我的动力。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
效果图：axure原型设计之吸附菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
附件下载：吸附菜单rp文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html
作者：维度。个人博客：http://weidublog.com/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2410.html