3、Axure 8案例：点击按键d出隐藏菜单教程

1、添加元件

2、隐藏菜单分组

3、给按键添加点击事件

4、预览效果

从元件库中拖动元件到画布：添加按键、菜单背景图、三个菜单文本，如下图2画布所示；

1-2、选中“菜单背景图、三个菜单文本”，设为一组；

3、并设置分组名称为“菜单”，设置名称是方便在大量元件中快速查找到我们需要的元件组（这是个好习惯，请注意）；

4-5、勾选“样式”界面的隐藏按键；

1、单击选中按键；

2、在界面右侧边栏选中“PROPERTIES”（属性）；

3、双击add case 下的“OnCLick”，显示时间编辑界面；

4、如下图，点击“Widgets”》“show/hide” ；

5、在右边栏勾选步骤二中命名的“菜单”；

6-7、勾选“Visibility”》“Toggle”（切换效果-在显示与隐藏之间切换），然后完成设置。

随着互联网的发展，各种网站技术以及网站的呈现技术层出不穷，网站的页面展现已经从之前的页面间跳转到现在大行其道的单页面应用，页面内容的切换不再需要进行页面的跳转了，使用起来更加舒适。

功能在变化，技术在变迁，页面展现的技术已经跟上了，作为产品经理的输出产品-原型，怎么能不是对单页面进行实现呢？

其实，要实现单页面应用的效果，在原型设计软件Axure中来说，最主要使用到的是动态面板以及鼠标的一些点击或者悬停事件。下面将详细介绍如何制作一个单页面应用原型

首先，先新建一个rp文件

新建完后会生成多个默认的页面

因为我们是进行单页面应用的设计，所以只会使用到其中的一个页面，所以只需保留index页面就够用了，删除其他多余页面。

首先在页面区域内添加一个矩形框，作为应用的最大 *** 作区域，并命名 *** 作区域。

添加页面头部矩形框，在头部矩形框中添加三个H2文字，代表三个不同页面入口，在头部栏下方添加一个动态面板，使两个组件将 *** 作区域完全填充，动态面板用于实现单页面效果

双击动态面板，d出动态面板的状态管理框，分别添加首页、资讯、我的三个面板状态

在面板状态管理中点击编辑所有状态即可打开所有状态页面的编辑页

在各个状态的编辑页中加入各自的内容

三个页面都已经有了内容了，现在需要做的是页面内容的切换。定位到index页面，选中首页，选择属性，添加鼠标点击时的事件，选择鼠标点击时设置动态面板状态，然后选中面板状态，再选择面板状态。对于资讯、我的按钮也同样 *** 作。

经过一番 *** 作，已经可以通过点击按钮选择展现去的内容显示了，点击首页将会显示首页内容，点击资讯将会显示资讯也内容，点击我的将会显示我的页面内容。

为了添加选中效果，给头部的菜单栏添加鼠标的悬停事件，当鼠标悬停到对应的菜单是，菜单的背景颜色将会变化。 *** 作如图，先选中菜单，找到属性中的交互样式设置，点击鼠标悬停，在d出窗口中找到填充颜色，选择一个自己喜欢的颜色，点击去确定即可。资讯、我的两个菜单也如此 *** 作即可成。

效果预览，点击预览将会在浏览器中展现页面效果，可以进行相应的点击 *** 作来切换内容展现，实现单页面显示效果。

至此，动态面板配合简单的鼠标事件就已经将单页面应用的简单效果完成了。赶紧去试一下吧。

如何利用Axure PR 8制作Button

第一步，打开Axure RP 8软件，找到“Rounded Rectangle”，拖出一个到Home页面

第二步，拖出两个“Label”和两个“Text Field”到Home界面，并修改了Label标签内容

第三步，再拖出两个“Link Button”、一个“Vertical Line”、一个”Checkbox“和两个”HTML Button“，并修改其显示的内容

第四步，为了限制用户名、密码输入，将用户名长度限制为20，密码长度也为20，并且显示成密码格式输入

第五步，给”忘记“和”注册“添加链接，一个链接到”Page 1“，另一个链接到”Page 2“

最后一步，在浏览器上预览，点击”忘记“或”注册“

---