Axure太强悍了！！！

<p>Axure的动态Panel太强悍了，可以做出很酷的动态效果</p>
<p></p>
<p>转帖内容如下：</p>
<p></p>
<p>如何用Axure制作Tab页签</p>
<p></p>
<p>这一段时间，我在进行“09帮助中心升级”项目，负责其中的白板和视觉设计，总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些
Axure的基础教程，也因Axure易用性还是挺高的，在制作大部分白板时，倒也得心应手。可…制作某个页面白板，需要使用Tab页签的时候，我碰到了
问题－－我不想通过刷新页面来达到效果…于是，我在网上寻求解决方案，找到了一大堆用Axure制作的Tab页签的样例文件和Axure源文件，可对于新
手用户来说，理解起来还是有些困难。揣摩一番后，我总算明白了如何制作，现把整个过程整理了一下，希望能对同为新手的朋友有些帮助。（在往下看前，您需对
Axure的工作环境有大致的了解，在此，我不对其进行讲解了^_^）</p>
<p>在制作这个教程时，我使用的是<span style="color: #800000;">Axure RP Pro 5</span>
，为了让教程更简单，我们这次制作的Tab只有3个页签，分别为tab 1、tab 2、tab 3。</p>
<p><strong><span style="color: #000000;">第1步：</span>
</strong>
</p>
<p>拖动widget面板中的<span style="color: #800000;">Dynamic Panel控件</span>
到线框图工作区中（如图1），蓝色区域的大小由我们要制作的Tab页签的大小决定，超出蓝色区域的元素皆不显示。</p>
<p><a href="http://www.kuqin.com/upimg/allimg/090301/0012570.jpg" target="_blank"><img class="alignleft size-full wp-image-850" title="1" src="http://www.kuqin.com/upimg/allimg/090301/0012570.jpg" alt="" width="359" height="330"></a>
</p>
<p></p>
<p>图1</p>
<p><strong><span style="color: #000000;">第2步：</span>
</strong>
</p>
<p>双击动态面板（即蓝色区域）打开一个<span style="color: #800000;">动态面板状态管理器（Dynamic Panel State Manager）</span>
对话框，在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态（如图2）。</p>
<p><a href="http://www.kuqin.com/upimg/allimg/090301/0012571.jpg" target="_blank"><img class="alignleft size-full wp-image-857" title="2" src="http://www.kuqin.com/upimg/allimg/090301/0012571.jpg" alt="" width="500" height="405"></a>
</p>
<p>图2</p>
<p>为了便于记忆，我们对动态面板状态管理器进行以下编辑（如图3）：</p>
<p>a.在Dynamic Panel Label中输入“Tab页签设计”（可依据你的喜好设置，最好能易识别和记忆）</p>
<p>b.单击“state 1”，呈选中状态，点击右侧“Rename”按钮，重命名为“tab 1”</p>
<p>c.在 Add new state的右侧输入框中输入“tab 2”，点击“Add”按钮。重复操作，添加“tab 3”。</p>
<p><a href="http://www.kuqin.com/upimg/allimg/090301/0012572.jpg" target="_blank"><img class="alignleft size-full wp-image-862" title="31" src="http://www.kuqin.com/upimg/allimg/090301/0012572.jpg" alt="" width="500" height="405"></a>
</p>
<p>图3</p>
<p><strong>第3步：</strong>
</p>
<p>双击<span style="color: #000000;">动态面板状态管理器（Dynamic Panel State Manager）</span>
中的“<span style="color: #800000;">tab 1</span>
”，在蓝色虚线框内绘制tab 1的页面，效果如图4。</p>
<p><a href="http://www.kuqin.com/upimg/allimg/090301/0012573.jpg" target="_blank"><img class="alignleft size-full wp-image-865" title="4" src="http://www.kuqin.com/upimg/allimg/090301/0012573.jpg" alt="" width="332" height="317"></a>
</p>
<p>图4</p>
<p>第4步：</p>
<p><strong>a.</strong>
选中含有“tab1”文字的上圆角矩形框，双击<span style="color: #800000;">控件交互面板（Annotations&interactions</span>
)中的<span style="color: #800000;">OnMouseEnter<span style="color: #000000;">(这个教程是通过鼠标的滑动来切换各个页签，如果想通过鼠标点击进行切换，则双击OnClick)</span>
</span>
<span style="color: #000000;">,</span>
弹出<span style="color: #800000;">交互场景属性面板（Interaction Case Properties)</span>
<span style="color: #000000;">,</span>
在面板中的step2中勾选<span style="color: #000000;"><span>Set Panel state(s) to State(s)</span>
，</span>
相应的，会在step3中出现“Set <span style="text-decoration: underline;"><span style="color: #0000ff;">Panel state to State</span>
</span>
”（如图5）。</p>
<p><a href="http://www.kuqin.com/upimg/allimg/090301/0012574.jpg" target="_blank"><img class="alignleft size-full wp-image-878" title="51" src="http://www.kuqin.com/upimg/allimg/090301/0012574.jpg" alt="" width="494" height="527"></a>
</p>
<p>图5</p>
<p><strong>b.</strong>
点击<span style="text-decoration: underline;"><span style="color: #0000ff;">Panel state to State</span>
</span>
，弹出<span style="color: #800000;">Set Panel state to state面板</span>
，勾选“set Tab页签设计state to state”，此时，step2中出现“Set Tab页签设计 state to <span style="color: #0000ff;"><span style="text-decoration: underline;">tab 1</span>
</span>
”，单击<span style="color: #0000ff;"><span style="text-decoration: underline;">tab 1</span>
</span>
<span style="color: #000000;">，选择要显示的状态，这里选择tab 1。</span>
</p>
<p>同理，为含有“tab 2”和“tab 3”的上圆角矩形框添加交互行为，只是在b步骤中单击<span style="color: #0000ff;"><span style="text-decoration: underline;">tab1</span>
</span>
<span style="color: #000000;">选择显示状态时，分别选择tab 2、tab 3。效果如图6<strong>。</strong>
</span>
</p>
<p><a href="http://www.kuqin.com/upimg/allimg/090301/0012575.jpg" target="_blank"><img class="alignleft size-full wp-image-867" title="6" src="http://www.kuqin.com/upimg/allimg/090301/0012575.jpg" alt="" width="328" height="310"></a>
</p>
<p>图6</p>
<p><strong>第5步：</strong>
</p>
<p>全选tab1页面，ctrl＋c复制。双击“动态Tab页签设计”动态面板，弹出动态面板状态管理器（Dynamic Panel State
Manager）对话框，在panel state中双击tab
2，ctrl＋v粘贴tab1页面。更改tab1上圆角矩形和tab2上圆角矩形的填充色，并更改内容。效果如图7所示。</p>
<p><a href="http://www.kuqin.com/upimg/allimg/090301/0012576.jpg" target="_blank"><img class="alignleft size-full wp-image-872" title="71" src="http://www.kuqin.com/upimg/allimg/090301/0012576.jpg" alt="" width="328" height="310"></a>
</p>
<p>图7</p>
<p><strong>第6步：</strong>
</p>
<p>依据第5步的操作，我们完成tab 3的设置。</p>
<p><strong>第7步：</strong>
</p>
<p>点击主菜单―Generate->Prototype (F5)或工具栏上的Prototype按钮，在打开的 Configure HTML Prototype对话框中，可以对原型进行配置和生成。配置完毕后，点击Generate按钮生成原型。</p>
<p>完毕，bow～</p>
<p></p>