》在线浏览TabView 范例。
》下载展示范例压缩文件 TabView 范例压缩文件 - 如果在线浏览速度过慢,请下载范例压缩文件,解压缩后开启 index.html。
》下载RP檔 Axure RP Prototype范例-TabView RP文件 。
说明
Tab(页签)介面设计是这几年相当流行的Web介面设计元素,这种介面常见于Web 2.0 Style网站。技术上采用AJAX或Javascript所设计出来的Tab介面,由于可以快速切换内容,节省浏览时等待换页的时间,颇受使用者欢迎。在许多知名的网站都可以见到这类的介面设计,比如Yahoo!Kimo首页新闻、UDN联合新闻网。
如果您的开发团队需要Tab设计的原始码,可以参考 Yahoo!的YUI Library Examples: TabView Control。我们在这里所做的示范,也是模拟Yahoo! YUI TabView的设计。
这里提供了3个Axure RP 的Tab设计范例:
- 范例1 : 水平 TabView Design Pattern
- 范例2 : 垂直 TabView Design Pattern
- 范例3 : 另一种 TabView Design Pattern
- 范例4 : 内文有图片 TabView Design Pattern
- 范例5 : 新增 Tab交互设计,模拟新增第4个Tab类别的交互设计。
这5个Tab设计范例都是采用Axure RP的Dynamic Panel的Widget,设计出Tab(页签)的Prototype。当使用者点选Tab (页签),就会触发 "OnClick"的Event,变换Dynamica Panel里头的Tab内容。范例1,2,3的色彩设计也是采用Axure RP直接设计出来的,Axure RP Pro 5提供了渐层色彩填色功能,能使得Prototype增加视觉效果。
您若需要用到这个介面设计,可以下载本范例RP文件 Axure RP Prototype范例-TabView RP文件(下载后解压缩),复制已经做好的示范到您自己的Axure RP Project,便可快速复制相同介面了。
什么时候应该使用Tabs设计?
- 有多样的内容要呈现,但是网页画面空间不足时,可以使用Tab切换窗格来节省画面空间
- 这些内容可以被分类,而且不同类别的内容并不需要同时被呈现
- 在切换不同类别内容时,并不需要换到另一个网页
- 如果要切换到其它的网页时,Tabs的设计必须以设计导览系统的方式来设计Tabs (Navigation Tabs)
使用Tabs设计必须留意什么问题?
- Tabs通常适用于2-8个类别,数量过多的类别,会造成网站使用者的困扰。多达10个以上的类别,网站使用者就必须非常专注才能够挑出他所需要的内容,这就不是好的分类方式
- 类别名称通常必须够短,而且命名要有明显的区隔及差异
- 被选择的Tab类别一定要有明显的标示(Highlight),以显示目前内容窗格是什么类别的Tabs
分类的举例
- 不好的分类: "美容 精品 服饰 表 美食 家具 寝具 床垫 食品 餐厨 单车 机车 汽车 运动 旅游" ,分类项目过多
- 不好的分类: "垦丁民宿饭店订房 台北捷运邻近饭店 高雄捷运邻近饭店 阿里山民宿饭店 谷关游泡汤",类别名称过长
- 不好的分类: "好康优惠 最佳优惠 站长推荐好康 网友票选",类别名称太过相似,不易分辨
- 好的分类: "生活 家电 3C 时尚 交通 育乐",类别数量不超过8个,分类名称很短,而且分类之间差异性很大,很容易辨识
》点下图进入Tab切换效果Prototype展示范例。




这里有2篇很详细的介绍,利用Dynamical Panel 以及 Set Panel States 来实现 Tab View的交互设计
http://ued.alipay.com/2009/02/axure-design-tab/
http://www.alibuybuy.com/7485.html