网络编程
位置:首页>> 网络编程>> 网页设计>> 如何用Axure制作Tab页签

如何用Axure制作Tab页签

作者:锦心 来源:Alipay UED 发布时间:2009-02-08 17:53:00 

标签: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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com