Tabs 可用于將有關(guān)的內(nèi)容分組,重疊放置在某一布局區(qū)塊內(nèi),重疊的內(nèi)容區(qū)里的每次只有其中一層是可見(jiàn)的。
用戶通過(guò)鼠標(biāo)點(diǎn)擊或移到內(nèi)容區(qū)所對(duì)應(yīng)的標(biāo)簽上,來(lái)請(qǐng)求顯示該層內(nèi)容區(qū)。
Tab屬于扁平信息結(jié)構(gòu),可以讓用戶在分類之間隨意切換,而不用在意當(dāng)前所處的位置。
Tab的優(yōu)勢(shì)
Tab將大量關(guān)聯(lián)的數(shù)據(jù)或者選項(xiàng)劃分成更易理解的分組,提供簡(jiǎn)單的頁(yè)面展示形式,即在不需要切換出上下文,頁(yè)面跳轉(zhuǎn)的情況下,有效的進(jìn)行內(nèi)容組織的扁平化導(dǎo)航設(shè)計(jì)。
如PC端的標(biāo)簽頁(yè)導(dǎo)航、模塊選項(xiàng)卡等設(shè)計(jì)形式。
可以將產(chǎn)品包含的所有內(nèi)容進(jìn)行清晰分類,一目了然地呈現(xiàn)應(yīng)用的內(nèi)容范圍,方便概覽與跳轉(zhuǎn)。
Tab的組成部分
Tab Menu(標(biāo)簽區(qū))
用戶導(dǎo)航和控制切換內(nèi)容區(qū)的操作區(qū)域。
Tab Box(內(nèi)容區(qū))
Tab標(biāo)簽與Tab內(nèi)容是一一對(duì)應(yīng)的,標(biāo)簽與當(dāng)前顯示的內(nèi)容區(qū)對(duì)應(yīng)選中狀態(tài)的標(biāo)簽,當(dāng)前隱藏的內(nèi)容區(qū)對(duì)應(yīng)未選中狀態(tài)的標(biāo)簽。
Tab的使用場(chǎng)景頁(yè)面空間有限當(dāng)希望節(jié)省頁(yè)面空間,布局緊湊,且需要組合的幾種信息之間具有關(guān)聯(lián)性時(shí),可以選擇Tab。
Tab的使用,令頁(yè)面結(jié)構(gòu)緊湊,可以縮短頁(yè)面屏長(zhǎng),降低信息的顯示密度,但同時(shí)又不犧牲可視的信息量。
把有效的信息以最少的布局顯示,能有效減少頁(yè)面的占用空間。
信息之間具有某種關(guān)聯(lián)特征,且是并列關(guān)系,內(nèi)容不交叉
構(gòu)成一個(gè)整體的每個(gè)元素之間都應(yīng)該具有邏輯上的關(guān)聯(lián)性。所以同一組Tab中的每個(gè)Tab項(xiàng),應(yīng)該具有關(guān)聯(lián)特征,內(nèi)容也不相重疊,這樣用戶才能將整個(gè)Tab區(qū)域視為一個(gè)整體。例如:
PS顏色與色板是一組Tab組合。
信息之間不應(yīng)該存在對(duì)比或并行的關(guān)系
Tab元素中,同一時(shí)刻,只能顯示一層內(nèi)容區(qū)。當(dāng)用戶需要對(duì)位于不同內(nèi)容區(qū)上的信息進(jìn)行對(duì)比,或者這幾種信息,同時(shí)顯示會(huì)更便于用戶閱讀時(shí),就不應(yīng)該使用Tab,否則會(huì)導(dǎo)致用戶為了對(duì)比所需的信息,而不停在標(biāo)簽之間進(jìn)行切換。
Tab應(yīng)該用于展示精煉的內(nèi)容
Tab用于展現(xiàn)標(biāo)準(zhǔn)化和易于理解的信息?;诖?,Tab應(yīng)該只用于顯示信息摘要和內(nèi)容要點(diǎn),例如列表、數(shù)據(jù)圖表。
Tab不能濫用于內(nèi)容切換與內(nèi)容分頁(yè),如單個(gè)產(chǎn)品中頁(yè)面之間的切換
Tab強(qiáng)調(diào)的是信息的分類屬性(同類并列),即它一般用于最小單元的組合,而非最小單元的拆分。
右圖不可取,Tab不應(yīng)該應(yīng)用于一個(gè)產(chǎn)品內(nèi)部不同的功能之間導(dǎo)航切換。
Tab的設(shè)計(jì)原則標(biāo)簽上使用簡(jiǎn)短和有邏輯的文字
Tab元素的標(biāo)簽區(qū)寬度是有限的,所有標(biāo)簽區(qū)的文字應(yīng)該簡(jiǎn)潔扼要,具有代表性,長(zhǎng)度控制在6個(gè)文字以內(nèi)。以便可以在一行內(nèi),容納盡可能多的標(biāo)簽。
用精煉的方式展示信息,除了保持設(shè)計(jì)樣式一致外,還可以讓用戶更快速地處理文字信息,用以預(yù)測(cè)隱藏區(qū)域上所包含的內(nèi)容。
選中的標(biāo)簽應(yīng)該高亮顯示
選中狀態(tài)的標(biāo)簽應(yīng)該設(shè)計(jì)地顯眼,讓用戶容易區(qū)分當(dāng)前顯示的內(nèi)容區(qū)是對(duì)應(yīng)哪個(gè)標(biāo)簽。通用的做法是為未選中狀態(tài)使用與背景色對(duì)比度低的顏色,為處于選中狀態(tài)的標(biāo)簽上,使用高亮且與背景色對(duì)比度高的顏色。
保持標(biāo)簽在一行內(nèi)顯示
Tab的標(biāo)簽通常是水平方向排列的(當(dāng)然,也可以設(shè)計(jì)成垂直方向排列),標(biāo)簽如果分布在多行上,會(huì)導(dǎo)致用戶在使用中產(chǎn)生疑惑。
這是由于在水平方向上,多行分布標(biāo)簽,隱含一種等級(jí)關(guān)系,可能讓用戶誤以為第二行是第一行的子級(jí)。
如果Tab數(shù)目過(guò)多,可以參考google搜索頁(yè)面,Tab的處理方式,將更多Tab內(nèi)容收納于更多中,當(dāng)用戶點(diǎn)擊更多中的菜單時(shí),將其顯示在主Tab上。
內(nèi)容區(qū)之間的切換,應(yīng)該沒(méi)有延遲
使用Tab來(lái)控制內(nèi)容切換的特性之一是快速和互動(dòng)。為此,應(yīng)該在設(shè)計(jì)實(shí)現(xiàn)上,提前加載所有Tab下的內(nèi)容,而不是等用戶切換到某一個(gè)標(biāo)簽后再去加載內(nèi)容。
不要在內(nèi)容區(qū)使用滾動(dòng)條
在Tab的內(nèi)容區(qū)里使用滾動(dòng)條(不是指瀏覽器自帶的頁(yè)面滾動(dòng)提示條)會(huì)增加用戶負(fù)擔(dān),用戶查找信息在哪個(gè)內(nèi)容區(qū)時(shí),不僅需要切換標(biāo)簽,還需要加上移動(dòng)滾動(dòng)條的操作。
內(nèi)容區(qū)里容納的信息太多或設(shè)計(jì)Tab時(shí),設(shè)定的高度不夠,會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。所以需要考慮精簡(jiǎn)內(nèi)容、增加高度值,或把選中狀態(tài)的內(nèi)容區(qū)處理為高度自適應(yīng)。
Tab標(biāo)簽用ICON還是ICON+文字
避免在Tab標(biāo)簽上僅使用ICON,尤其是專業(yè)領(lǐng)域。
1.Tab數(shù)目不多,不超過(guò)四個(gè),且新手用戶可以接受認(rèn)知和試錯(cuò)成本,可以考慮只使用圖標(biāo),且應(yīng)是大家約定俗成的通用圖標(biāo),如搜索用放大鏡表示。
2.Tab數(shù)目超過(guò)四個(gè),慎用ICON,不同人對(duì)一個(gè)圖形,有不同的解讀,ICON+文字是比較易于接受的方案。
如果你希望用戶看到什么,就將他放置在默認(rèn)Tab上
位置和順序會(huì)帶給用戶重要程度不同的感知,因屏幕資源有限,即使是內(nèi)容并列的Tab,也存在默認(rèn)展示與排序差異。用戶對(duì)位置與重要程度的關(guān)系有潛在的認(rèn)識(shí),如果非默認(rèn)標(biāo)簽的文字或內(nèi)容刺激度和新鮮度不足,那么操作動(dòng)力也就不夠了。同時(shí)Tab點(diǎn)擊遞減也是一個(gè)常見(jiàn)的問(wèn)題。
有一個(gè)小技巧:
將產(chǎn)品需要推廣或優(yōu)先展示的內(nèi)容放在默認(rèn)Tab,用戶感興趣、無(wú)法忽略的Tab靠后,因?yàn)橛脩粼敢鉃橹档玫膬?nèi)容多付出一次滑動(dòng)操作。
具體可參考App Store-排行榜中,【付費(fèi)】、【免費(fèi)】、【暢銷排行】三個(gè)Tab的順序。
總結(jié)
信息架構(gòu)
在交互范疇內(nèi),如上圖所示即信息的結(jié)構(gòu):在樹(shù)形結(jié)構(gòu)中,Z軸即表示信息的深度,即鏈接的信息層數(shù);X軸表示一個(gè)層級(jí)包含的頁(yè)面總數(shù)(可以理解為此文的Tab數(shù)),即鏈接的廣度;Y軸表示該層級(jí)頁(yè)面的滑動(dòng)的最長(zhǎng)距離,即頁(yè)面的長(zhǎng)度。
用戶的瀏覽成本從高至低:
逐級(jí)跳轉(zhuǎn) > 不同Tab切換 > 單頁(yè)滑屏瀏覽
在交互過(guò)程中,盡量減少信息層級(jí),用戶通過(guò)較少的頁(yè)面跳轉(zhuǎn)就能找到想要的信息,每一次頁(yè)面跳轉(zhuǎn),轉(zhuǎn)化率可能會(huì)減少10%。Tab可以為用戶減少一級(jí)頁(yè)面跳轉(zhuǎn),使信息趨向扁平。但位移的成本,比重疊還低。把關(guān)系緊密的信息放在一個(gè)區(qū)域內(nèi),增加頁(yè)面利用率,用戶在一個(gè)頁(yè)面滑動(dòng)瀏覽,比切換Tab,帶來(lái)的信息負(fù)擔(dān)更輕,更容易讓用戶接受更多信息。
我們珍惜您每一次在線詢盤,有問(wèn)必答,用專業(yè)的態(tài)度,貼心的服務(wù)。
讓您真正感受到我們的與眾不同!