Question

Axure怎么使用动态面板制作APP隐藏菜单？

Answer 1

很多产品在设计过程中，通常都是既要界面简单又功能丰富，为了解决这一问题，隐藏菜单被发明出来。那么，在Axure原型软件里，怎么利用动态面板制作APP隐藏菜单呢？下面将为大家讲解讲解！如果你打算自学Axure原型设计的话，推荐的Axure自学视频课，专业讲师传授知识点，可以0基础学会软件功能操作以及动手实操~

Axure使用动态面板制作APP隐藏菜单教程：

一、侧栏菜单1.拖拉元件

1）主页

一个矩形、一段文字、一个图片（点击事件就在图片身上），为了实现原文中主页在侧栏展开时的颜色变化，又添加了一个矩形（填充颜色、置于底层、隐藏）。

2）侧边

一个动态面板（不可见、自适应内容），对应加一个状态，状态里只有一个矩形、一段文字。

需要注意的是，这里用了Axure9的负空间，其他没特殊之处，都是简单操作，看拖拉后的效果。

2.添加交互

1）给图片“

”添加“单击”交互，效果是将负空间里藏起来的侧栏给展示和隐藏；

2）添加事件“单击时”，单击有2个情形：展示和隐藏；

3）添加情形“展示”，条件是动态面板“侧栏菜单”不可见时；

4）添加动作“移动”，将动态面板“侧栏菜单”移动到达(0,0)，动画效果可有可无；

5）添加动作“显示/隐藏”，将动态面板“侧栏菜单”显示出来，并且推动右边的元件；为了实现侧栏展示时的层次感，多加了一个矩形来显示不同的背景色；

6）添加情形“折叠”，条件是动态面板“侧栏菜单”可见时；

7）添加动作“移动”，将动态面板“侧栏菜单”移动到达(-200,0)，动画效果可有可无；

8）添加动作“显示/隐藏”，将动态面板“侧栏菜单”隐藏出来，并且把右边的元件拉回来；再还原主页的背景色。

二、浮钮菜单1.拖拉元件

1）添加2个矩形框，1个白色填充1个灰色填充；其中灰色的矩形框是用来在悬浮菜单打开时显示的，设置不可见；

2）添加一个应景的图片和一个圆形，组合在一起，取个名“悬浮按钮”；位置就在右下角，大小就56*56；

3）添加一个动态面板，取个名“悬浮菜单”并设置可不见；增加一个状态，在状态里添加一个应景的图片和一个圆形，组合在一起，取个名“关闭按钮”；位置就在右下角，大小就56*56。

为了效果，关闭按钮最好跟悬浮按钮位置重叠。

大概就是这个样子：

2.添加交互

1）单击“悬浮按钮”，逐渐显示“悬浮菜单”并隐藏“悬浮按钮”，将有灰色背景的矩形框显示出来，设置尺寸是为了看起来是从右下角显示出来的。

2）单击“关闭按钮”，跟“悬浮按钮”点击反着干就行了。

跟原文的效果还是差一点，感觉不够丝滑。另外悬浮按钮拖拽效果还在研究中。

三、更多菜单1.拖拉元件

是不是我的错觉，到这个效果实现一个比一个简单。

1）添加2个矩形框，1个白色填充1个灰色填充，其中灰色的矩形框是用来在悬浮菜单打开时显示的，设置不可见；

2）添加一个应景的图片，就是点点点；

3）添加一个动态面板，取个名“悬浮菜单”并设置可不见；增加一个状态，在状态里，添加一个矩形，一个关闭的图片。

大概就是这个样子：

2.添加交互

感觉“更多”和“悬浮”差不多啊，有可能是没我领会到不同之处。

1）单击“更多按钮”，以灯箱效果显示“悬浮菜单”：

2）单击“关闭按钮”，隐藏“悬浮菜单”：

以上就是关于“Axure怎么使用动态面板制作APP隐藏菜单？”的内容分享了，希望能够帮到你！更多Axure精彩分享，尽在Axure相关文章！Axure因其能够快速、高效的创建原型，备受众多产品设计人员所使用！对于想要快速学会Axure原型设计的小伙伴，就可以选择精选的Axure自学视频课！不要犹豫，选择合适的课程开始学习体验吧~