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

时间:2024-04-02 12:56:44

欢迎关注微信公众号九万里大数据。

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