使用axure的动态面板做导航效果

首先打开Axure,在home中，搭建基本样式。如图在左侧的“部件-线框图”中，选择动态面板图，左键点击拖到工作窗口。调整为需要的大小。

在工作窗口的动态面板上双击，弹出“动态面板状态管理”窗口，将第一个状态命名为“11”，点击面板状态的“+”新增一个状态，命名为“22”。

状态添加并命名完毕后，在'面板状态'中点击“编辑全部状态”。如图。

操作玩步骤三后，如下图，会打开“11”和“22”的相应编辑页面。下面我们就要进行具体的导航页面显示的设计了。

首先，“11”的动态面板页面设计，我们设计的目标是，当选择首页时，显示的图片在左边，文字在右边。

双击蓝色框，命名为首页，并输入文字首页。第二个框，输入”第二页“。下面我们来设计第一个首页的用例状态。选中“首页”的矩形框，在右侧右上角的“鼠标单击时”双击，弹出窗口如图，按步骤设计“动态面板”---“设置面板状态”--在窗口的第四步中，选中“设置状态至11”.如图。确定。

同理，在“11”中，设计第二个矩形框的动态。选中“第二页”的矩形框，同设置首页的步骤，在右侧右上角“鼠标单击时”双击，弹出窗口，“动态面板”---“设置面板状态”--在窗口的第四步中，选中“动态面板”，当前默认是“11”，我们需要改成“22”，如图所示，选择后，确定，第二个面板的就设计好了。

第二个设计的方法类似。首先需要复制“11”面板中的按钮矩形框至“22”动态面板，同理拖动图片和多行文字元件至动态工作区。如图。将首页的矩形框颜色改为白色，”第二页“填充为蓝色。

选中“第二页”的矩形框，同设置首页的步骤，在右侧右上角“鼠标单击时”双击，弹出窗口，“动态面板”---“设置面板状态”--在窗口的第四步中，选中“动态面板”，当前默认是“11”，我们需要改成“22”，如图所示，选择后，确定，第二个面板的就设计好了。

我们来生成原型文件，看下具体的状态。

下面是完成后的效果。