• 欢迎关注微信公众号:九万里大数据
  • 请使用Ctrl+D收藏本站到书签栏
  • 手机也可访问本站 jwldata.com

产品原型设计:使用axure实现菜单下拉效果

其他 九万里大数据 2年前 (2021-02-23) 372次浏览 0个评论 扫描二维码

在我们使用的网页菜单上,经常遇到以下这种下拉菜单,其特点是把同一类型的功能子项,下设在一个统一的功能父项下面。通过鼠标点击父项,会折叠或显示子项。对于产品经理或者交互设计师而言,往往需要在产品原型设计中体现这种效果,下面通过axure来实现。

产品原型设计:使用axure实现菜单下拉效果

使用axure画出以下几个模块,箭头使用的是FontAwesome字体。字体速查表可以访问https://fontawesome.com/v4.7.0/cheatsheet/
产品原型设计:使用axure实现菜单下拉效果

将FontAwesome的css网络链接地址(http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css)配置在发布->预览选项->配置->Web字体中。
产品原型设计:使用axure实现菜单下拉效果

将子项1,子项2,子项3组合成一个动态面板(菜单1子项),并给菜单1添加鼠标单击时动作。
产品原型设计:使用axure实现菜单下拉效果

给菜单1鼠标单击时添加条件,当元件可见时,隐藏动态面板(菜单1子项),动画为向上滑动200ms,从下方拉动元件,动画为线性200ms。同时设置箭头为⬇。
产品原型设计:使用axure实现菜单下拉效果
产品原型设计:使用axure实现菜单下拉效果
产品原型设计:使用axure实现菜单下拉效果

给菜单1鼠标单击时添加条件,当元件隐藏时,显示动态面板(菜单1子项),动画为向下滑动200ms,从下方推动元件,动画为线性200ms。同时设置箭头为⬆。
产品原型设计:使用axure实现菜单下拉效果

同理,可对菜单2和菜单2子项设置同样的效果。
产品原型设计:使用axure实现菜单下拉效果

最后发布的效果请关注微信公众号九万里大数据观看。


欢迎关注我的公众号“九万里大数据”,原创技术文章第一时间推送。


产品原型设计:使用axure实现菜单下拉效果


本站文章,如未注明,均为原创 | 原创文章版权归九万里大数据所有,未经许可不得转载。
本文链接:产品原型设计:使用axure实现菜单下拉效果
喜欢 (1)

您必须 登录 才能发表评论!