如何用Axure制作Tab页签

这一段时间，我在进行“09帮助中心升级”项目，负责其中的白板和视觉设计，总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些Axure的基础教程，也因Axure易用性还是挺高的，在制作大部分白板时，倒也得心应手。可…制作某个页面白板，需要使用Tab页签的时候，我碰到了问题－－我不想通过刷新页面来达到效果…于是，我在网上寻求解决方案，找到了一大堆用Axure制作的Tab页签的样例文件和Axure源文件，可对于新手用户来说，理解起来还是有些困难。揣摩一番后，我总算明白了如何制作，现把整个过程整理了一下，希望能对同为新手的朋友有些帮助。（在往下看前，您需对Axure的工作环境有大致的了解，在此，我不对其进行讲解了^_^）

 在制作这个教程时，我使用的是Axure RP Pro 5，为了让教程更简单，我们这次制作的Tab只有3个页签，分别为tab 1、tab 2、tab 3。

第1步：

拖动widget面板中的Dynamic Panel控件到线框图工作区中（如图1） ，蓝色区域的大小由我们要制作的Tab页签的大小决定，超出蓝色区域的元素皆不显示。

图1

第2步：

双击动态面板（即蓝色区域）打开一个动态面板状态管理器（Dynamic Panel State Manager）对话框，在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态（如图2）。

图2

为了便于记忆，我们对动态面板状态管理器进行以下编辑（如图3）：

a.在Dynamic Panel Label中输入“Tab页签设计”（可依据你的喜好设置，最好能易识别和记忆）

b.单击“state 1”，呈选中状态，点击右侧“Rename”按钮，重命名为“tab 1”

c.在 Add new state的右侧输入框中输入“tab 2”，点击“Add”按钮。重复操作，添加“tab 3”。

图3

第3步：

双击动态面板状态管理器（Dynamic Panel State Manager）中的“tab 1”，在蓝色虚线框内绘制tab 1的页面，效果如图4。

图4