版權聲明：轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明
http://piglili.blogbus.com/logs/35575149.html

Tab在UI上最廣泛的兩大應用，導航Tab(Navigational Tab)和內聯(lián)Tab模塊(Module Tab)，幾乎已在不知不覺間成為每個網站的常駐元素。一種模式的流行必然帶來對它的誤用和濫用?？墒?，為什么要使用Tab？它有何優(yōu)勢？又該何時、如何使用？長得像Tab就是Tab了嗎？長得不像Tab可以算是Tab嗎？

首先認識一下Tab。這又是一個來自現(xiàn)實生活的隱喻。在我們紙質的筆記本、記事本、電話薄上，Tab可以幫助分組，從而實現(xiàn)對某一部分內容的快速定位，起到導航的作用。

Tab為什么會在UI設計上大行其道呢？主要有兩個原因：

優(yōu)化大量信息的展現(xiàn)——
-對于Tab導航，可以優(yōu)化二級導航項的展現(xiàn)。不涉及任何鼠標懸置也能穩(wěn)定展現(xiàn)它們（不像下拉菜單需要交互才能展示），并能表明清晰的層級關系。
-對于內聯(lián)Tab模塊，可以在原本同樣的屏幕輸出區(qū)(real estate)，增加2、3甚至更多倍的信息量。如同在同一塊地皮上，蓋一層樓和蓋多層住宅的區(qū)別。
符合日常生活中的導航模式——
- 如果在交互和視覺上處理得當，Tab這種模式能給用戶一種有所預期的安心感。我們在記事本上各個Tab之間翻來翻去，總是在同一個本子里，要翻回原來的 Tab很容易。同理，在UI上，用戶會明確知道點擊了另外一個Tab，還是能輕易回到原Tab，新打開的內容也不會是完全陌生的。不會有“是否會彈出新窗口？是否會跳轉到另一個不一樣的頁，找不回原來內容？”的不確定感。
- 有效傳達用戶當前所在位置。優(yōu)秀的Tab視覺設計可以模擬出翻到當前頁的效果，比起傳統(tǒng)的按鈕，能更強烈卻不突兀地傳達用戶所在頁面，減輕用戶的迷失感。
要使Tab能發(fā)揮這兩種優(yōu)勢，交互和視覺設計上要注意什么呢？

1. 交互：

Tab個數
對于導航Tab，一般建議是一級導航Tab3-10個，二級導航項不超過7個

點擊后的跳轉
對于內聯(lián)Tab 模塊，這就沒什么好說的了。對于導航Tab，點擊某Tab后，理應在當前頁刷新！跳開新頁面的話，上面的Tab導航條的項目個數、排序也不應有所改變。否則，用Tab這種樣式是毫無意義的。更何況即使不用Tab，保持導航條的一致性也是導航條之所以為導航條的原因吧？

圖1是某網站的首頁導航條。其中——
紅色=點擊彈出新頁面，有完全不同的導航條；
綠色=點擊本頁內刷新，有完全不同的導航條，且原本該導航項目不再出現(xiàn)在導航條中；
藍色=點擊本頁內刷新，有完全不同的導航條，且該導航項目出現(xiàn)在導航條別的位置

天哪，這是迷航條吧？！

圖1

圖2是另一網站首頁的導航條。紅色框以內的4個Tab，點擊后都會在本頁內刷到相同的、卻有著另一導航條的頁面。其余的分別跳到不同的頁面。

圖2

這種既要模仿Tab，又毫不了解其本質的做法，最應避免呵。

個人認為像圖3的處理方式比較恰當?！熬劈c”是唯一會彈出新頁面的導航項，所以在視覺上予以了明確的區(qū)別，除此之外其他各項在交互和視覺上均是統(tǒng)一的。


圖3

hover切換還是點擊切換？

hover切換有利于主動展現(xiàn)，弊端是鼠標斜滑時很容易誤展開。而當Tab很多的時候，鼠標移動引起不斷的動態(tài)切換，很容易讓用戶心煩。點擊切換是把選擇權交給用戶，相比來說是更不容易觸犯用戶的做法，但畢竟多了一個主動的動作，有些情境下又會顯得麻煩。

一般來說，導航Tab都是點擊切換的，因為涉及到整頁刷新時載入速度的問題。但有時因為擔心Tab下的二級導航項藏起來用戶找不到，就會出現(xiàn)圖4這個導航 Tab采用hover切換刷新二級菜單的方式。可是這個導航條不少Tab的二級導航項很多，例如圖4所示，博客Tab下足足13項！鼠標從“博客”移向離“博客”較遠的項目時，經常誤展開相鄰Tab。于是用戶不得不采用向下—>向右的低效路徑。（那個可憐的用戶就是我了）

圖4

導航Tab用hover切換，并不是好的做法。但是非要這么做，就必須解決觸發(fā)靈敏度問題。國外的慣例是將觸發(fā)延時0.2秒左右。值得注意的是，對于像圖4這種情況，不僅是一級的Tab和Tab之間要有延時，二級導航項和它頭頂的Tab之間也應該有。試想鼠標從Tab A頁內的操作區(qū)上移，想去選擇Tab A的另一個二級項。若鼠標移過了頭（向上滑鼠時難免的），就可能誤展開與Tab A相鄰的Tab B的二級項。這時要重新選擇，必須先重新展開正確的Tab，再從二級項中去選，多煩人??！

至于內聯(lián)Tab模塊，由于載入速度會快很多，到底選擇hover還是點擊切換就較難權衡了?？梢钥紤]：

（1）Tab個數——如果Tab只有兩個，那用戶若把鼠標hover到另一個Tab，自然就是想看里面的內容咯？這時候hover自動切換似乎更替用戶省事。隨著Tab個數的增加，自動切換的弊端會隨之變得明顯。這時候就要考慮（2）（3）兩個因素。
（2）在層內的操作——如果只是做出選擇某個對象的操作，如選一條鏈接，hover展開對用戶的操作不會有太大的阻礙，當然前提是解決了切換靈敏度過高的問題。但如果涉及到更復雜的操作，如多項選擇、輸入等，那還是讓用戶在一個安定不變的場景里完成任務吧。

（3）層內內容：Tab切換時需要加載的內容越多，越不合適自動切換，否則很容易出現(xiàn)懸置于一Tab出現(xiàn)的還是原懸置Tab下的內容。除去技術層面的影響，Tab內內容的本質也是另一考慮因素。當內聯(lián)Tab 模塊展示的是同級別下不同分類的內容（圖6），如新聞（國內、國際…）、排行榜（人氣最高、最新…），或用戶對于各個Tab很可能沒有特定傾向性的時候（抱著隨便看看的心態(tài)），似乎自動切換更佳？但對于各Tab是非并列關系，或用戶可能比較明確自己想看什么的情景（圖7），點擊切換也許更恰當。

 
圖6


 圖7

總而言之，內聯(lián)Tab模塊的兩種切換方式沒有絕對的優(yōu)劣之分，要綜合考慮以上三要素來決定。

點擊熱區(qū)大小

YDL中強調了將整片Tab設為熱區(qū)，對于Tab標題占滿或幾乎占滿整片Tab的情況，通常問題不大。但是像圖8這種Tab寬字少的內聯(lián)Tab，熱區(qū)只設在字上，就需要用戶很準確的點擊，造成一定的不便利。

圖8

先來看看Yahoo Design Pattern Library里面對于Tab視覺設計的兩條建議：

被選中的Tab與其他Tab相比，應有顯著的突出感。未被選中的Tab在視覺上應讓用戶感覺是處于背景的，從而讓用戶更明確當前在站內所處的位置。
選中某Tab后展示出來的頁面，應通過諸如顏色、弧線、邊框等設計元素與該Tab聯(lián)系起來。
也就是說，一個好的Tab樣式設計會兼顧到兩方面：讓被選中的Tab突出（或將未被選中的弱化），將選中Tab里的內容與該Tab從視覺上聯(lián)系起來。通過一些反例來說明問題吧——

例1：長得一點不像Tab，卻套了內聯(lián)Tab模塊的交互模式

例2：長得像極了Tab，卻是分別跳轉到同一頁面其他區(qū)域的頁內導航。囧~~~

樣式以及hover的效果都讓人覺得肯定是Tab，但一點就飛到另一個頁面啦~~~

例3：被選中的Tab與搜索框在視覺上毫無關聯(lián)，真不知道上面的選擇是否會影響搜索結果。



相比起來下面的設計給人更強的關聯(lián)感吧？



例4：豎式Tab本身是不賴的想法，而且更接近生活中看到的Tab哦！但這個視覺呈現(xiàn)也太糟糕了，選中和沒選中毫無區(qū)別

下例明顯好很多吧？雖說那豎著寫的英文單詞還真讓人看得辛苦……

例5：這個配色看得我一陣心慌，是不是眼睛有問題？怎么是漸進色的？都啥意思?。?/P>

--------------------------------------------------------------------------------

曾經，Amazon是Tab的瘋狂使用者 （圖9），他們也是Tab導航火起來的始作俑者。但如今再去Amazon看看，一片兒Tab的蹤影都沒有了。其實，找到最適合自己網站用戶群的設計，比追隨設計潮流更重要吧？而且追隨，也應該建立在理解的基礎上。

圖9