版權(quán)聲明：轉(zhuǎn)載時請以超鏈接形式標明文章原始出處和作者信息及本聲明
http://piglili.blogbus.com/logs/35575149.html
Tab在UI上最廣泛的兩大應(yīng)用，導(dǎo)航Tab(Navigational Tab)和內(nèi)聯(lián)Tab模塊(Module Tab)，幾乎已在不知不覺間成為每個網(wǎng)站的常駐元素。一種模式的流行必然帶來對它的誤用和濫用�？墒�，為什么要使用Tab？它有何優(yōu)勢？又該何時、如何使用？長得像Tab就是Tab了嗎？長得不像Tab可以算是Tab嗎？
首先認識一下Tab。這又是一個來自現(xiàn)實生活的隱喻。在我們紙質(zhì)的筆記本、記事本、電話薄上，Tab可以幫助分組，從而實現(xiàn)對某一部分內(nèi)容的快速定位，起到導(dǎo)航的作用。
Tab為什么會在UI設(shè)計上大行其道呢？主要有兩個原因：
優(yōu)化大量信息的展現(xiàn)——
-對于Tab導(dǎo)航，可以優(yōu)化二級導(dǎo)航項的展現(xiàn)。不涉及任何鼠標懸置也能穩(wěn)定展現(xiàn)它們（不像下拉菜單需要交互才能展示），并能表明清晰的層級關(guān)系。
-對于內(nèi)聯(lián)Tab模塊，可以在原本同樣的屏幕輸出區(qū)(real estate)，增加2、3甚至更多倍的信息量。如同在同一塊地皮上，蓋一層樓和蓋多層住宅的區(qū)別。
符合日常生活中的導(dǎo)航模式——
- 如果在交互和視覺上處理得當，Tab這種模式能給用戶一種有所預(yù)期的安心感。我們在記事本上各個Tab之間翻來翻去，總是在同一個本子里，要翻回原來的 Tab很容易。同理，在UI上，用戶會明確知道點擊了另外一個Tab，還是能輕易回到原Tab，新打開的內(nèi)容也不會是完全陌生的。不會有“是否會彈出新窗口？是否會跳轉(zhuǎn)到另一個不一樣的頁，找不回原來內(nèi)容？”的不確定感。
- 有效傳達用戶當前所在位置。優(yōu)秀的Tab視覺設(shè)計可以模擬出翻到當前頁的效果，比起傳統(tǒng)的按鈕，能更強烈卻不突兀地傳達用戶所在頁面，減輕用戶的迷失感。
要使Tab能發(fā)揮這兩種優(yōu)勢，交互和視覺設(shè)計上要注意什么呢？
1. 交互：
Tab個數(shù)
對于導(dǎo)航Tab，一般建議是一級導(dǎo)航Tab3-10個，二級導(dǎo)航項不超過7個
點擊后的跳轉(zhuǎn)
對于內(nèi)聯(lián)Tab 模塊，這就沒什么好說的了。對于導(dǎo)航Tab，點擊某Tab后，理應(yīng)在當前頁刷新！跳開新頁面的話，上面的Tab導(dǎo)航條的項目個數(shù)、排序也不應(yīng)有所改變。否則，用Tab這種樣式是毫無意義的。更何況即使不用Tab，保持導(dǎo)航條的一致性也是導(dǎo)航條之所以為導(dǎo)航條的原因吧？
圖1是某網(wǎng)站的首頁導(dǎo)航條。其中——
紅色=點擊彈出新頁面，有完全不同的導(dǎo)航條；
綠色=點擊本頁內(nèi)刷新，有完全不同的導(dǎo)航條，且原本該導(dǎo)航項目不再出現(xiàn)在導(dǎo)航條中；
藍色=點擊本頁內(nèi)刷新，有完全不同的導(dǎo)航條，且該導(dǎo)航項目出現(xiàn)在導(dǎo)航條別的位置
天哪，這是迷航條吧？！
圖1
圖2是另一網(wǎng)站首頁的導(dǎo)航條。紅色框以內(nèi)的4個Tab，點擊后都會在本頁內(nèi)刷到相同的、卻有著另一導(dǎo)航條的頁面。其余的分別跳到不同的頁面。
圖2
這種既要模仿Tab，又毫不了解其本質(zhì)的做法，最應(yīng)避免呵。
個人認為像圖3的處理方式比較恰當�！熬劈c”是唯一會彈出新頁面的導(dǎo)航項，所以在視覺上予以了明確的區(qū)別，除此之外其他各項在交互和視覺上均是統(tǒng)一的。
圖3
hover切換還是點擊切換？
hover切換有利于主動展現(xiàn)，弊端是鼠標斜滑時很容易誤展開。而當Tab很多的時候，鼠標移動引起不斷的動態(tài)切換，很容易讓用戶心煩。點擊切換是把選擇權(quán)交給用戶，相比來說是更不容易觸犯用戶的做法，但畢竟多了一個主動的動作，有些情境下又會顯得麻煩。
一般來說，導(dǎo)航Tab都是點擊切換的，因為涉及到整頁刷新時載入速度的問題。但有時因為擔心Tab下的二級導(dǎo)航項藏起來用戶找不到，就會出現(xiàn)圖4這個導(dǎo)航 Tab采用hover切換刷新二級菜單的方式�？墒沁@個導(dǎo)航條不少Tab的二級導(dǎo)航項很多，例如圖4所示，博客Tab下足足13項！鼠標從“博客”移向離“博客”較遠的項目時，經(jīng)常誤展開相鄰Tab。于是用戶不得不采用向下—>向右的低效路徑。（那個可憐的用戶就是我了）
圖4
導(dǎo)航Tab用hover切換，并不是好的做法。但是非要這么做，就必須解決觸發(fā)靈敏度問題。國外的慣例是將觸發(fā)延時0.2秒左右。值得注意的是，對于像圖4這種情況，不僅是一級的Tab和Tab之間要有延時，二級導(dǎo)航項和它頭頂?shù)腡ab之間也應(yīng)該有。試想鼠標從Tab A頁內(nèi)的操作區(qū)上移，想去選擇Tab A的另一個二級項。若鼠標移過了頭（向上滑鼠時難免的），就可能誤展開與Tab A相鄰的Tab B的二級項。這時要重新選擇，必須先重新展開正確的Tab，再從二級項中去選，多煩人�。�
至于內(nèi)聯(lián)Tab模塊，由于載入速度會快很多，到底選擇hover還是點擊切換就較難權(quán)衡了。可以考慮：
（1）Tab個數(shù)——如果Tab只有兩個，那用戶若把鼠標hover到另一個Tab，自然就是想看里面的內(nèi)容咯？這時候hover自動切換似乎更替用戶省事。隨著Tab個數(shù)的增加，自動切換的弊端會隨之變得明顯。這時候就要考慮（2）（3）兩個因素。
（2）在層內(nèi)的操作——如果只是做出選擇某個對象的操作，如選一條鏈接，hover展開對用戶的操作不會有太大的阻礙，當然前提是解決了切換靈敏度過高的問題。但如果涉及到更復(fù)雜的操作，如多項選擇、輸入等，那還是讓用戶在一個安定不變的場景里完成任務(wù)吧。
（3）層內(nèi)內(nèi)容：Tab切換時需要加載的內(nèi)容越多，越不合適自動切換，否則很容易出現(xiàn)懸置于一Tab出現(xiàn)的還是原懸置Tab下的內(nèi)容。除去技術(shù)層面的影響，Tab內(nèi)內(nèi)容的本質(zhì)也是另一考慮因素。當內(nèi)聯(lián)Tab 模塊展示的是同級別下不同分類的內(nèi)容（圖6），如新聞（國內(nèi)、國際…）、排行榜（人氣最高、最新…），或用戶對于各個Tab很可能沒有特定傾向性的時候（抱著隨便看看的心態(tài)），似乎自動切換更佳？但對于各Tab是非并列關(guān)系，或用戶可能比較明確自己想看什么的情景（圖7），點擊切換也許更恰當。
圖6
圖7
總而言之，內(nèi)聯(lián)Tab模塊的兩種切換方式?jīng)]有絕對的優(yōu)劣之分，要綜合考慮以上三要素來決定。
點擊熱區(qū)大小
YDL中強調(diào)了將整片Tab設(shè)為熱區(qū)，對于Tab標題占滿或幾乎占滿整片Tab的情況，通常問題不大。但是像圖8這種Tab寬字少的內(nèi)聯(lián)Tab，熱區(qū)只設(shè)在字上，就需要用戶很準確的點擊，造成一定的不便利。
圖8
粵公網(wǎng)安備 44010402000282號