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