快好知 kuaihz

Axure用一个功能搞定手风琴式菜单设计

最近做原型想做一个手风琴的效果,但是忘了怎么做的,于是百度了一些方法,发现大部分方法都会用到中继器,觉得有点麻烦。后来翻看以前的书找到了原来学会的方法,现在分享给大家。

其实很简单,只需要使用“切换可见性”即可完成。(以Axure8为例)

第一步:绘制相关图形

绘制三个矩形作为按钮,分别命名为标题一、标题二、标题

再绘制三个动态面板,里面填充一些可以区别的内容,命名为内容一、内容二、内容

第二步:摆放图形位置

标题一与内容一对应,将内容一放置在标题一的下方,其他的依此类推,摆放完毕后,将动态面板设为隐藏。

第三步:设置标题一的动态效果

选中标题一,添加鼠标点击效果。选择切换可见性,设置如下:

先选择内容一位设置为切换、推动拉动元件向下

再选择内容二(三),设置为隐藏、拉动元件向下

第四步:设置标题

选中标题二进行鼠标点击的设置,和标题一的设置基本一致,注意切换的是当前标题对应的动态面板,隐藏的是其他标题的动态面板

第五步:标题三用同样的方法,设置完后就可以预览看效果了。

题外话:

1. 同样的方法还可以设置左右的切换,在推动拉动元件时选择向右即可。

2. 如果想要做的效果是,展开内容后,点击其他标题不收起,只有点击当前标题时才收起,只需要将隐藏的动作去掉即可。

3. 另外这种效果不仅可以做菜单也可以做内容的展示,如下图

Axure内的设计:

预览效果:

4. 以上演示的是Axure8的版本,如果使用的Axure7的话使用同样的功能,动作名称有点区别,如下图

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:手风琴  手风琴词条  搞定  搞定词条  菜单  菜单词条  功能  功能词条  一个  一个词条  
原型

 Axure教程|购物车商品增减删...

看了前面几位大神发的中继器的九宫格啥的,我只能说:请收下我的膝盖!中继器我也就初级水平,就不献丑了,还是给大家分享点我这水平能够做到的东西,希望大家表喷我,多给...(展开)

原型

 如何利用axure制作简易版的推...

我出的这一版非常简单,就是让大家熟悉推箱子游戏做出来的原理,当然你可以花时间优化一下,比如加个方格子,多设置几个障碍物,多加几个箱子等等。熟悉基本原理,拓展性的...(展开)

原型

 更快,更爽的制作原型-Axure...

尽管原型制作工具哪家强的论战在知乎愈演愈烈,但Axure无疑还是多数产品狗的主力工具。究其原因,Blink简单的总结为:在目前互联网环境下,Axure是更好的平...(展开)