用Axure制作Tab页签好资料免费分享Word下载.docx
《用Axure制作Tab页签好资料免费分享Word下载.docx》由会员分享,可在线阅读,更多相关《用Axure制作Tab页签好资料免费分享Word下载.docx(12页珍藏版)》请在冰点文库上搜索。
结合交互动作,可以让动态面板的状态进行隐藏、显示和改变。
像添加其它控件一样,可以在控件面板中拖放动态面板控件到线框图中。
简单的说,动态面板就是展示在页面不跳转的情况下所能实现的交互状态。
而动态面板的每一个状态都可以看作是产生的一个新的交互结果。
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按钮生成原型。
完毕!