实现TAB切换的复杂动态效果

软件界面原型是交互设计师与需求工程师、产品经理和研发工程师沟通最直观的工具。在做一个产品成型的框架之前，先做一个简单的框架，这个框架包括产品的界面排版和布局、页面元素、业务流程，甚至可以表现最终产品需要实现的各种效果。一个完整的、优秀的界面原型能够帮助设计师、软件工程师等更好地了解产品需求，从而最大限度地实现预期的功能。

有很多工具可以制作原型，比如一张纸和一支笔就可以画草图，但是做出的原型过于粗糙。也可以使用Visio、Excel等工具，但是实现一些复杂的交互操作就显得力不从心了，比如TAB标签的动态切换、定位页面锚点、全选效果、登录框效果、图片轮播等等。因此，专业的Axure原型设计工具在设计原型的过程中使用方便、效率高，而且能模拟的效果很多。目前我使用的是Axure 6.5版本。

如何实现TAB切换的复杂动态效果

首先想好一个需要TAB切换效果的主题，比如学生查看任课教师对他上交的作业的批改情况。需要查看的内容包括老师给自己作业的分数和评语，老师对全班作业的点评以及发布哪些同学的作业可以参考，最后能看到自己本次作业提交了什么内容。根据这个主题，可以进行三种内容的切换。

首先，在页面上拖拽三个矩形，调整它们成为高35、宽110的按钮样式，并列排好。在每个按钮上写上“作业批阅结果”、“作业总体点评”和“我的作业内容”。然后在按钮的下方再拖拽一个矩形，我们将在这个矩形区域显示不同的内容。

在矩形区域添加第一个按钮要显示的内容，然后选中内容和矩形，右键转换为动态面板。这里之所以这么做，是为了便捷制作原型。转换成动态面板后，双击面板，在弹出的动态面板管理对话框中对面板进行命名为“学生查看已批阅作业”，然后对面板的状态1重命名为“作业批改结果”。接下来，在这个面板管理对话框中增加两个面板状态，分别用来显示作业总体点评信息和学生的作业内容信息，并按照步骤4进行重命名。

接下来给步骤5新添加的两个状态添加显示内容。在Axure界面的右下方有一个动态面板管理区，可以看到我们刚刚做好的动态面板的名字以及所包含的所有状态。双击状态“作业总体点评”添加内容，然后重复这个步骤将所有的内容添加好。

设置按钮点击后显示对应的内容。首先选择按钮“作业批阅结果”，在页面的右侧部件属性面板中对“onclick（点击时）”事件添加用例。在弹出的用例面板中选择“设置面板状态为指定状态”，在右侧配置动作下找到刚刚添加的“学生查看已批阅作业”动态面板，并选择状态1“作业批阅结果”。如果希望点击后显示内容时有一些特效，在进行动画设置时可以进行设置。

接下来设置第二个按钮“作业总体点评”，按照步骤6设置显示动态面板的状态2“作业总体点评”。然后设置第三个按钮。

生成原型，在浏览器中预览这个TAB切换效果吧。生成原型时可以选择浏览器，不过有些浏览器需要一些设置，比如Chrome。可以选择IE进行预览。

在IE中点击三个按钮，可以看到内容已经随着按钮变化了，并且还有淡入淡出的效果。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。