aure 原型设计之 tab 选项卡

Tab选项卡是网页设计或者APP设计中相当常见的一个元素，多用于网站导航，商品分类，信息隐藏等等地方，也是学习axure原型设计的最基础技能之一。那么，这里就教大家如何快速地设计一个简单的tab选项卡原型，主要有以下3步：

效果图：http://miji07.axshare.com

Tab选项卡是网页设计或者APP设计中相当常见的一个元素，多用于网站导航，商品分类，信息隐藏等等地方，也是学习axure原型设计的最基础技能之一。那么，这里就教大家如何快速地设计一个简单的tab选项卡原型，主要有以下3步：

第一步：拖拉摆放相关的控件

1、三个同样大小的矩形控件，分别命名为“tab1”，“tab2”和“tab3”，均设置为无底边、黑边、灰底矩形，整齐横排在动态面板的左上方；

2、一个动态面板控件，并为其设置3个相对应面板状态，分别命名为“面板1”，“面板2”和“面板3”，这3个面板状态中都放置一个黑边白底的矩形和一张各不相同的图片，其中矩形与动态面板一样大小。

（这里需要注意的是，要保证“tab1”的最底边刚好盖住动态面板的最顶边一个像素，而动态面板的最顶边又刚好盖住“tab2”和“tab3”的最底边一个像素）

第二步：设置选项卡的样式

1、选中“tab1”，右键设置其初始状态为选中状态；

2、同时选中“tab1”，“tab2”和“tab3”，右键“设置选项组”，设置名称为“tab选项卡”；

3、同时选中“tab1”，“tab2”和“tab3”，右键“交互样式”，设置“鼠标悬停”，“鼠标按下”和“选中”三种状态的“填充颜色”均为白色。

第三步：设置选项卡的鼠标单击时用例

分别为“tab1”，“tab2”和“tab3”添加一个鼠标单击时用例，并为用例添加以下4个动作：

1、设置选中当前元件

2、将动态面板置于顶层

3、将当前元件置于顶层

4、设置动态面板为相对应的面板状态（“tab1”对应“面板1”，“tab2”对应“面板2”，“tab3”对应“面板3”）

至此已经制作完成，预览时分别点击各个选项卡即可以看到效果，本来不是特别想写这篇文章，因为tab选项卡是一个比较基础的原型设计，但不管怎么说，也是原型设计中的其中一个经典例子，所以还是决定将其纳入axure原型设计系列文章之中。

作者：维度
出处：weidublog.com

关键字：产品经理, 面板

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！