用Axure制作Tab页签好资料免费分享.docx

用Axure制作Tab页签好资料免费分享.docx

《用Axure制作Tab页签好资料免费分享.docx》由会员分享，可在线阅读，更多相关《用Axure制作Tab页签好资料免费分享.docx（12页珍藏版）》请在冰点文库上搜索。

用Axure制作Tab页签好资料免费分享

如何用Axure制作Tab页签axure

　1、什么是Axure的动态面板

　　按照Axure官方网站的解释：

动态面板控件（DynamicPanel）可以让你实现高级的交互功能，实现原型的高保真度。

动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。

任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。

结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。

像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。

　　简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。

而动态面板的每一个状态都可以看作是产生的一个新的交互结果。

　　2、Axure的动态面板可以用来做什么

　　1）tab式页签的切换效果：

Axure的官方给出的实例就是这个，AlipayUED的同学按照官方给出的做法制作了一个3tab的原型，不愿看英文说明的同学可以直接参照这篇博客。

　　2）鼠标触发式和点击触发式的下拉菜单效果：

这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。

　　3）鼠标触发式的浮窗效果：

类似“Alt”的效果，常用于浏览提示和触发式广告。

　　4）JS的鼠标点击弹层效果：

这个是目前使用被广泛使用的效果之一。

　　5）注册表单中的根据焦点判断提示的效果：

当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。

　　….andsoon…

　　3、如何使用Axure的动态面板

　　1）动态面板属于Axure的一个组件，在组件栏中选中它，直接拖到你希望它出现的位置。

不用担心，即使在添加完状态之后它的位置也是可以随时改变的。

　　2）在动态面板上点击右键——编辑动态面板——管理动态面板状态。

在弹出的窗口里输入动态面板的标签名称（默认是Unlabeled）、添加新的状态。

当然，也可以在界面的右下角找到“动态面板管理”模块来对动态面板进行操作。

　　友情提示：

　　a）默认的动态面板的状态是显示（蓝色），我们可以把他设置成隐藏（黄色）。

　　b）状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的内容在最终生成原型时将不可见。

　　c）为了不影响其他交互的制作，可以点击“动态面板管理”模块右侧的淡蓝色小方块在隐藏或显示之间切换。

或者，你可以在顶部的页面名称（如Home）上点击鼠标右键，选择右键菜单全部隐藏或全部显示，可以隐藏或显示页面中所有的动态面板。

　　3）双击添加完的动态面板状态（State1、2、…），会在Axure的工作区打开一个新标签。

现在，把这个新标签当作是一个全新的页面来设计就OK了，不过，记住不要超过蓝色虚线外框。

　　4）给动态面板添加交互。

Axure5.5中常用在动态面板上的交互行为包括：

SetPanelstatetoState（设置动态面板的状态切换）、ShowPanel（显示动态面板）、HidePanel（隐藏动态面板）、ToggleVisibilityforPanel（切换动态面板可见属性）、MovePanel（移动动态面板到一个设定的位置（x*y））、BringPaneltoFront（将动态面板置于最前）。

交互行为的添加与添加其他组件的交互一样，没有什么好解释和介绍的。

　　5）生成HTML发布到web上、生成CHM分发给其他团队成员、建立Axure协作共享、….

  友情提示：

　　a）使用Axure汉化版本会让你使用更轻松，虽然汉化的还不是非常完全，但是对于英文不好的同学来说已经是莫大的帮助了，向汉化的平生一笑同学致敬！

　　b）如果看Axure官方的使用说明很费劲，可以参考目前陈良泳同学翻译的快速原型设计，翻译质量很不错！

　　c）从Axure5开始，可以创建自己的组建库和导入别人做好的组建库了，官方提供了一套雅虎的组件，个人觉得已经完全够用了。

　　d）模块和组件是2个完全不同的概念，模块的后缀是.rp而组件的后缀是.rplib。

模块和组件之间是可以相互转化的，你可以利用组件去创建一些自己常用的模块如网站头部、底部等；你也可以把模块里的内容分拆成组件单个使用。

　　e）在生成chm格式的时候页面名称不要使用中文，中文名称的页面在chm里会显示成乱码。

 在制作这个教程时，我使用的是AxureRPPro5，为了让教程更简单，我们这次制作的Tab只有3个页签，分别为tab1、tab2、tab3。

第1步：

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

图1

第2步：

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

图2

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

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

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

c.在Addnewstate的右侧输入框中输入“tab2”，点击“Add”按钮。

重复操作，添加“tab3”。

图3

第3步：

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

图4

第4步：

a.选中含有“tab1”文字的上圆角矩形框，双击控件交互面板（Annotations&interactions）中的OnMouseEnter（这个教程是通过鼠标的滑动来切换各个页签，如果想通过鼠标点击进行切换，则双击OnClick）,弹出交互场景属性面板（InteractionCaseProperties）,在面板中的step2中勾选SetPanelstate（s）toState（s），相应的，会在step3中出现“SetPanelstatetoState”（如图5）。

图5

b.点击PanelstatetoState，弹出SetPanelstatetostate面板，勾选“setTab页签设计statetostate”，此时，step2中出现“SetTab页签设计statetotab1”，单击tab1，选择要显示的状态，这里选择tab1。

同理，为含有“tab2”和“tab3”的上圆角矩形框添加交互行为，只是在b步骤中单击tab1选择显示状态时，分别选择tab2、tab3。

效果如图6。

图6

第5步：

全选tab1页面，ctrl＋c复制。

双击“动态Tab页签设计”动态面板，弹出动态面板状态管理器（DynamicPanelStateManager）对话框，在panelstate中双击tab2，ctrl＋v粘贴tab1页面。

更改tab1上圆角矩形和tab2上圆角矩形的填充色，并更改内容。

效果如图7所示。

图7

第6步：

依据第5步的操作，我们完成tab3的设置。

第7步：

点击主菜单―Generate->Prototype（F5）或工具栏上的Prototype按钮，在打开的ConfigureHTMLPrototype对话框中，可以对原型进行配置和生成。

配置完毕后，点击Generate按钮生成原型。

完毕!