|
信息之間不應(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)行切換。
下面這個(gè)案例中，BGPatterns (一個(gè)在線制作背景圖案的網(wǎng)站）tab就用得不是地方。當(dāng)用戶想設(shè)計(jì)或修改他所制作的背景圖案時(shí)，必須反復(fù)在幾個(gè)標(biāo)簽之間進(jìn)行切換。Tab在這里妨礙了用戶的操作。如果在頁(yè)面上同時(shí)顯示這4個(gè)內(nèi)容區(qū)上的信息，可用性和友好度會(huì)更高。
另一個(gè)反面案例：網(wǎng)站 Best Web Gallery 在它側(cè)邊欄上所放置的Tab，標(biāo)簽分別是 ”特別推薦“（包含了一些網(wǎng)站所有者認(rèn)為值得注意的鏈接）和 “最新評(píng)論”。 這兩組信息之間并沒(méi)有邏輯聯(lián)系，用戶會(huì)很疑惑為什么這兩者要放在一起呢。所以這個(gè)Tab中的兩組信息最好分開(kāi)放置。
每個(gè)內(nèi)容區(qū)應(yīng)該有一個(gè)簡(jiǎn)短明確的標(biāo)題。
Tab元素的標(biāo)簽區(qū)寬度是有限的，所以標(biāo)簽區(qū)的文字應(yīng)該簡(jiǎn)潔扼要，具有代表性，長(zhǎng)度控制在1~3個(gè)英文單詞。用精煉的方式展示信息，除了保持設(shè)計(jì)樣式不變形外，還可以讓用戶更快速地處理文字信息，用以預(yù)測(cè)隱藏區(qū)域上所包含的內(nèi)容。 Tab應(yīng)該用于展現(xiàn)精煉的內(nèi)容。
Tab本意用于展現(xiàn)標(biāo)準(zhǔn)化和易于理解的信息�；诖�，Tab應(yīng)該只用于顯示信息摘要和內(nèi)容要點(diǎn)，例如列表，數(shù)據(jù)圖表，或1~2段簡(jiǎn)短的文字這種形式。 二、Tab的可用性原則及優(yōu)化方法
這一章節(jié) 我們將討論一些關(guān)于Tab的可用性設(shè)計(jì)原則，以及如何使這種交互元素變得更友好和有效。 選中的標(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)使用統(tǒng)一的背景色，為出于選中狀態(tài)的標(biāo)簽上使用高亮的背景色。 保持標(biāo)簽只在一行內(nèi)顯示
Tab的標(biāo)簽通常是水平方向排列的（當(dāng)然如果你愿意，也可以設(shè)計(jì)成垂直方向排列的），標(biāo)簽如果分布在多行上會(huì)導(dǎo)致用戶在使用中產(chǎn)生疑惑。
這是由于在水平方向上多行分布標(biāo)簽，隱含一種等級(jí)關(guān)系，可能讓用戶誤以為第二行是第一行的子級(jí)。
標(biāo)簽需要分布在多行上時(shí)，也就意味著標(biāo)簽的數(shù)量過(guò)多或者標(biāo)簽上文字太長(zhǎng)。而這些都是需要被精簡(jiǎn)的。
出處：西喬的九卦
責(zé)任編輯：bluehearts
上一頁(yè) Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [1] 下一頁(yè) Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [3]
|
第 1 頁(yè) 
第 2 頁(yè) Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [2]
