Axure8-动态面板+简单鼠标事件实现单页面应用

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

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

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

首先，先新建一个rp文件

新建页面文件

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

默认页面文件

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

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

定义应用的操作区域

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

页面布局

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

面板状态管理

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

编辑所有状态

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

首页内容 资讯页 我的页面

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

设置面板显示与隐藏

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

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

菜单交互样式设置

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

预览操作 效果图

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