》線上瀏覽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展示範例。
Tags:
