这次我们来做一下摩拜左侧抽屉菜单。
目标：
1、点击左上角人像按钮，滑出菜单
2、左划隐藏菜单
3、点击菜单列表有按下效果
步骤
1、拖进一个动态面板，设置尺寸为 （320，568），样式设置为
2、参照摩拜放入头部
3、关键的步骤来啦，用中继器来实现菜单列表。
3.1、首先拖入一个中继器
3.2、双击中继器，参照列表放入图片、文本、矩形，并设置元件名称。给cell矩形设置选中状态颜色为#C9C9C9
3.3、选中中继器，对中继器中的表格表头进行编辑
编辑表头为icon和label，图片的输入是：复制图片，选中单元格直接粘贴即可
3.4、对中继器添加载入时事件
使载入时，让元件自动从中继器中获取文字来展示
和文本的方式类似
到这，列表就出来了，效果如图：
3.5、添加菜单的按下效果，双击中继器，选择所有元件，右键转换为动态面板，给动态面板添加事件
4、首页左上角添加个人icon，添加事件
5、在“左侧抽屉菜单中加个透明的元件，添加事件
再补充一些小细节就完成了。
福利：
原型预览地址：http://pko7xu.axshare.com
源文件地址：http://pan.baidu.com/s/1pLjvUEv 密码：rw73
原创文章，作者：研究院精选，如若转载，请注明出处：https://www.pmtemple.com/axurerp/axure-course/1961/
微信扫一扫 
支付宝扫一扫 
评论列表（4条）
哇！这个摩拜左侧抽屉菜单教程超实用啊！🎮 特别是中继器实现菜单列表那部分，简直是为游戏UI设计量身定做的！作为游戏策划，我们经常需要类似的交互效果，这个教程帮大忙了！✨ 有点想试试用在游戏背包系统上呢！
教程太实用啦！👌 作为经常设计APP界面的摄影师，这种交互菜单对提升用户体验太重要了！步骤清晰易懂，连中继器的使用都讲得这么详细，新手也能轻松上手！摩拜这个设计简洁大方，很符合当下流行的极简风～💪
@快门分享客：哇！这个Axure抽屉菜单教程简直太棒啦！作为游戏策划，这种交互设计对我做游戏UI超有帮助！(◕‿◕✿) 中继器的使用思路可以迁移到游戏背包系统设计中，步骤清晰又实用，大大提升了原型效率！🎮
这个交互设计很基础，但正是这种细节决定了用户体验。摩拜当年靠这种简洁高效的界面设计赢得了市场，投资人应该关注这种看似微小却影响留存率的关键设计。