標(biāo)簽本身是毫無(wú)意義的，但是當(dāng)它們本身能夠在不打擾用戶的同時(shí)還能指引用戶前往正確的內(nèi)容和特性時(shí)，你便不得不承認(rèn)它也是可以做到耀眼的。

這里是關(guān)于標(biāo)簽選項(xiàng)卡的12個(gè)設(shè)計(jì)準(zhǔn)則：

1、使用標(biāo)簽選項(xiàng)卡在相同容器不同內(nèi)容下的視圖間切換，而不是作為導(dǎo)航將用戶帶到不同的區(qū)域。這是最重要的一點(diǎn)，因?yàn)樵诓煌臉?biāo)簽視圖下切換時(shí)保持內(nèi)容容器的一致是我們?cè)陂_(kāi)始使用標(biāo)簽選項(xiàng)卡時(shí)最主要的原因。

2、每一個(gè)標(biāo)簽背后的內(nèi)容要合乎邏輯，好讓用戶能夠輕而易舉的預(yù)見(jiàn)到選擇一項(xiàng)后會(huì)發(fā)現(xiàn)些什么。 (卡片分類是研究這類“微型信息架構(gòu)”問(wèn)題的方法之一。 如果你找不出有明顯不同的歸類性信息，那么使用標(biāo)簽選項(xiàng)卡就可能是管理你頁(yè)面內(nèi)容的錯(cuò)誤方法）

3、只有當(dāng)用戶不需要同時(shí)看到多個(gè)選項(xiàng)卡的內(nèi)容時(shí)，再考慮使用標(biāo)簽選項(xiàng)卡。如果人們確實(shí)需要比較不同標(biāo)簽頁(yè)的信息，那么相比于把所有信息都放在一個(gè)頁(yè)面顯示，多標(biāo)簽的做法會(huì)因?yàn)橛脩粜枰诓煌瑯?biāo)簽間來(lái)回切換，無(wú)疑增加了用戶的閱讀負(fù)擔(dān)和操作成本，進(jìn)而降低網(wǎng)站的可用性。

4、所有的標(biāo)簽在本質(zhì)上應(yīng)該是平行的（類似的），如果標(biāo)簽跟標(biāo)簽之間顯著不同，用戶將會(huì)把他們視作網(wǎng)站的導(dǎo)航。

Workday 的主頁(yè)主要使用標(biāo)簽控件指向它的服務(wù)和應(yīng)用，而第一個(gè)標(biāo)簽卻是提供公司的概覽，跟其他標(biāo)簽并不處在平行關(guān)系，因此最好將其移除才對(duì)

5、突出強(qiáng)調(diào)當(dāng)前選中的標(biāo)簽，確保其表現(xiàn)形式足夠讓用戶意識(shí)到究竟是哪個(gè)標(biāo)簽選中了。

Ticketmaster 的標(biāo)簽控件通過(guò)無(wú)色的處理標(biāo)示出當(dāng)前選中的選項(xiàng)卡，然而這種做法更適用于至少有3個(gè)標(biāo)簽時(shí)。圖中只有2個(gè)標(biāo)簽的時(shí)候，你很難告訴我究竟哪個(gè)才是選中的標(biāo)簽

除了高亮顯示的方法，你也可以通過(guò)尺寸、標(biāo)簽、圖標(biāo)上的變化或者位置上的調(diào)整來(lái)標(biāo)識(shí)出當(dāng)前選項(xiàng)。如上圖中所示，在只有兩個(gè)標(biāo)簽時(shí)這種額外的標(biāo)識(shí)尤其重要。

6、對(duì)于那些未被選中的標(biāo)簽，其應(yīng)該保持清晰可見(jiàn)的狀態(tài)且易于讀取，提醒用戶還有其他選項(xiàng)可供選擇。而如果這些標(biāo)簽在背景下隱藏過(guò)深時(shí)，就會(huì)存在一定的風(fēng)險(xiǎn)，即用戶可能永遠(yuǎn)不會(huì)點(diǎn)擊到它們甚至發(fā)現(xiàn)不了這些選項(xiàng)。

7、當(dāng)前的標(biāo)簽要關(guān)聯(lián)到指定的內(nèi)容區(qū)域，就好比你是在拖動(dòng)不同標(biāo)簽對(duì)應(yīng)的實(shí)體卡片一樣。這樣的話，就能突出顯示對(duì)應(yīng)的內(nèi)容面板，同時(shí)也能夠在只有兩個(gè)標(biāo)簽的時(shí)候依然明確的告訴用戶當(dāng)前選中的是哪個(gè)標(biāo)簽。

Travelers 的標(biāo)簽控件將選中的標(biāo)簽和內(nèi)容面板置于相同的顏色，強(qiáng)化了兩者之間的關(guān)聯(lián)性

8、使用簡(jiǎn)單明了的標(biāo)簽語(yǔ)言，而不是代辦專業(yè)性的描述。每個(gè)選項(xiàng)卡對(duì)應(yīng)的文本標(biāo)簽應(yīng)該在1-2個(gè)單詞，保證用戶易于閱讀。如果你真的需要更長(zhǎng)的標(biāo)簽語(yǔ)言，那就意味著你的標(biāo)簽控件設(shè)計(jì)的過(guò)于復(fù)雜了。

9、不要針對(duì)標(biāo)簽語(yǔ)言采用全部大寫的做法，這絕不是一個(gè)好的主意，因?yàn)闀?huì)增加閱讀的難度。雖然可讀性對(duì)單一的，簡(jiǎn)短的詞組不成問(wèn)題，但是正如網(wǎng)站可用性指南中描述， 你應(yīng)該選擇一個(gè)大小寫格式（無(wú)論是針對(duì)句子還是標(biāo)題樣式）并堅(jiān)持使用。

10、要堅(jiān)持所有的標(biāo)簽選項(xiàng)卡只采用單行排列。如果放置在多行的話，就會(huì)引起元素間的跳躍性，破壞用戶在空間上的記憶，使他們不可能記住自己已經(jīng)訪問(wèn)過(guò)的標(biāo)簽。另外，這種做法也是設(shè)計(jì)過(guò)渡復(fù)雜的一個(gè)表征，這個(gè)時(shí)候你必須要考慮簡(jiǎn)化你的設(shè)計(jì)。

11、將標(biāo)簽選項(xiàng)卡布置在頁(yè)面頂部的一個(gè)面板上，不要放在用戶常常會(huì)忽略的邊欄或底部位置。

每個(gè)標(biāo)簽對(duì)應(yīng)的內(nèi)容區(qū)域在視覺(jué)上應(yīng)該有明確的界限。從喻意上來(lái)說(shuō)，使用標(biāo)簽就像在老式的抽屜式卡片目錄下翻閱索引卡片一樣，因此用戶必須在第一眼就能明白什么組成了“索引卡片”（即選項(xiàng)卡面板)。

Reuter 主頁(yè)下的市場(chǎng)選區(qū)內(nèi)，使用邊框來(lái)從視覺(jué)上表現(xiàn)出標(biāo)簽對(duì)應(yīng)的內(nèi)容區(qū)域

12、所有的標(biāo)簽選項(xiàng)卡在視覺(jué)和作用方式上應(yīng)該一致，因?yàn)檫@種一致性的做法能夠幫助用戶在幾個(gè)方面建立起對(duì)他們對(duì)用戶界面的把控度：

• 可識(shí)別性：當(dāng)一些東西看起來(lái)總是一致時(shí)，你能夠知道要去找哪一個(gè)以及找到的那個(gè)又是什么。
• 可預(yù)見(jiàn)性：當(dāng)一些東西總是以一致的方式作用時(shí)，你能夠預(yù)見(jiàn)到當(dāng)你作用于它時(shí)將會(huì)發(fā)生什么。
• 自主性：?當(dāng)你可以依賴你過(guò)去的所有可用的知識(shí)特性，您可以很容易地構(gòu)建起一連串的動(dòng)作來(lái)達(dá)成你的目標(biāo)。
• 高效性：你不需要花費(fèi)額外的時(shí)間來(lái)學(xué)習(xí)新東西，也不必?fù)?dān)心不一致的功能會(huì)帶來(lái)的影響。

結(jié)論

在圖形化的用戶界面設(shè)計(jì)中，標(biāo)簽選項(xiàng)卡看上去簡(jiǎn)陋而無(wú)趣。但是就像本文提到的，在創(chuàng)建作用優(yōu)良，容易使用，提升體驗(yàn)的標(biāo)簽時(shí)，仍然有一些需要我們注意的具體問(wèn)題。

標(biāo)簽選項(xiàng)卡的設(shè)計(jì)問(wèn)題只是我們?cè)诜治鯱X的優(yōu)良性時(shí)遇到的一個(gè)普通的問(wèn)題。如果你在追蹤用戶在頁(yè)面內(nèi)的行為操作，如果發(fā)現(xiàn)用戶在某些頁(yè)面中很少使用到標(biāo)簽，請(qǐng)嘗試檢查你的設(shè)計(jì)是不是違背了本文中提到的一些指導(dǎo)原則。如果確實(shí)違背了，那可能就出自你的設(shè)計(jì)問(wèn)題，不過(guò)你也有可能通過(guò)重新設(shè)計(jì)后再來(lái)做個(gè)快速的A/B測(cè)試來(lái)彌補(bǔ)自己的過(guò)錯(cuò)。

如果你遵循了本文中的指導(dǎo)原則進(jìn)行設(shè)計(jì)，用戶就能夠不需要花費(fèi)額外的探索或猜測(cè)來(lái)搞清楚如何使用你的標(biāo)簽。這就意味著他們可以把所有的時(shí)間和腦力用來(lái)理解在這些標(biāo)簽背后的內(nèi)容和特性。

作者：三達(dá)不留點(diǎn)gpj

譯自：https://www.nngroup.com/articles/tabs-used-right/

本文由 @三達(dá)不留點(diǎn)gpj 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。