Axure RP Pro 7.0怎么制作Tab标签效果?
Axure RP Pro 7.0怎么制作Tab标签效果?
发布时间:2017-01-04 来源:查字典编辑
摘要:AxureRPPro能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的...

Axure RP Pro能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,从而可以将产品人员的想法快速准确的传递给开发人员。本文将分步向大家介绍如何使用Axure RP Pro 7.0创建Tab标签效果。最终效果如下所示:

Axure RP Pro 7.0怎么制作Tab标签效果?1

Axure RP Pro 7.0怎么制作Tab标签效果?2

Axure RP Pro 7.0怎么制作Tab标签效果?3

1、向页面内添加一个动态面板,如图:

Axure RP Pro 7.0怎么制作Tab标签效果?4

2、右键单击动态面板 - 管理面板状态 - 管理面板状态管理,给面板命名为主页,并定义三种状态,Tab1,如图:

Axure RP Pro 7.0怎么制作Tab标签效果?5

Axure RP Pro 7.0怎么制作Tab标签效果?6

3、部件管理 - 主页 - Tab1,右键“编辑”,在Tab1中添加两个矩形,如图:

Axure RP Pro 7.0怎么制作Tab标签效果?7

Axure RP Pro 7.0怎么制作Tab标签效果?8

4、调节矩形大小,使得小的矩形和大矩形在一起的部分重合,再右键“标签1” - 顺序 - 置于顶层,设置小矩形置顶,大矩形置底;右键“标签1”- 选择形状 - 顶部矩形,如图:

Axure RP Pro 7.0怎么制作Tab标签效果?9

Axure RP Pro 7.0怎么制作Tab标签效果?10

Axure RP Pro 7.0怎么制作Tab标签效果?11

Axure RP Pro 7.0怎么制作Tab标签效果?12

Axure RP Pro 7.0怎么制作Tab标签效果?13

5、添加多个标签,复制“标签1”,重命名“标签2”,“标签3”,右键“标签2”- 选择形状 - 矩形,选中“标签2”填充颜色;“标签3”同样,如图:

Axure RP Pro 7.0怎么制作Tab标签效果?14

Axure RP Pro 7.0怎么制作Tab标签效果?15

6、添加交互动作,此处以添加单击为例,选中“标签1”,在“部件交互和注释”- “交互” - 双击 “鼠标单击时”弹出窗口,在“动态面板”- 单击“设置面板状态”,在“第四部:配置动作”中勾选“主页(动态面板)”,如需调整标签在“选择状态”中选择,此处我没有添加多个标签,下一步详细讲解,如图:

Axure RP Pro 7.0怎么制作Tab标签效果?16

Axure RP Pro 7.0怎么制作Tab标签效果?17

7、类似步骤2,在动态面板编辑界面,右键单击动态面板 - 管理面板状态 -管理面板状态管理,单击选中“Tab1”,点击复制,然后重命名“Tab2”、“Tab3”;重复步骤4和步骤5,修改“标签2”,“标签3”,如图:

Axure RP Pro 7.0怎么制作Tab标签效果?18

Axure RP Pro 7.0怎么制作Tab标签效果?19

Axure RP Pro 7.0怎么制作Tab标签效果?20

8、重复步骤6,首先在状态“Tab1”中,给“标签2”,“标签3”也添加动作。重复此步骤在装“Tab2”、“Tab3”中,也给“标签2”,“标签3”也添加动作,在这里要提一下,接的修改“标签1”的动作状态调整到“Tab1”,到这一步就完成了。

Axure RP Pro 7.0怎么制作Tab标签效果?21

Axure RP Pro 7.0怎么制作Tab标签效果?22

Axure RP Pro 7.0怎么制作Tab标签效果?23

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新其他软件工具学习
热门其他软件工具学习
软件教程子分类