這里是關(guān)于標(biāo)簽選項卡的12個設(shè)計準(zhǔn)則：
1、使用標(biāo)簽選項卡在相同容器不同內(nèi)容下的視圖間切換蛋欣，而不是作為導(dǎo)航將用戶帶到不同的區(qū)域航徙。這是最重要的一點(diǎn)，因為在不同的標(biāo)簽視圖下切換時保持內(nèi)容容器的一致是我們在開始使用標(biāo)簽選項卡時最主要的原因陷虎。?
2到踏、每一個標(biāo)簽背后的內(nèi)容要合乎邏輯，好讓用戶能夠輕而易舉的預(yù)見到選擇一項后會發(fā)現(xiàn)些什么尚猿。 (卡片分類是研究這類“微型信息架構(gòu)”問題的方法之一窝稿。 如果你找不出有明顯不同的歸類性信息，那么使用標(biāo)簽選項卡就可能是管理你頁面內(nèi)容的錯誤方法）
3凿掂、只有當(dāng)用戶不需要同時看到多個選項卡的內(nèi)容時伴榔，再考慮使用標(biāo)簽選項卡。如果人們確實需要比較不同標(biāo)簽頁的信息庄萎，那么相比于把所有信息都放在一個頁面顯示踪少，多標(biāo)簽的做法會因為用戶需要在不同標(biāo)簽間來回切換，無疑增加了用戶的閱讀負(fù)擔(dān)和操作成本糠涛，進(jìn)而降低網(wǎng)站的可用性援奢。
4、所有的標(biāo)簽在本質(zhì)上應(yīng)該是平行的（類似的）忍捡，如果標(biāo)簽跟標(biāo)簽之間顯著不同集漾，用戶將會把他們視作網(wǎng)站的導(dǎo)航。?
5凌埂、突出強(qiáng)調(diào)當(dāng)前選中的標(biāo)簽栽连，確保其表現(xiàn)形式足夠讓用戶意識到究竟是哪個標(biāo)簽選中了。
除了高亮顯示的方法挨下，你也可以通過尺寸熔恢、標(biāo)簽、圖標(biāo)上的變化或者位置上的調(diào)整來標(biāo)識出當(dāng)前選項臭笆。如上圖中所示叙淌，在只有兩個標(biāo)簽時這種額外的標(biāo)識尤其重要秤掌。
6、對于那些未被選中的標(biāo)簽鹰霍，其應(yīng)該保持清晰可見的狀態(tài)且易于讀取闻鉴，提醒用戶還有其他選項可供選擇。而如果這些標(biāo)簽在背景下隱藏過深時茂洒，就會存在一定的風(fēng)險孟岛，即用戶可能永遠(yuǎn)不會點(diǎn)擊到它們甚至發(fā)現(xiàn)不了這些選項。
7督勺、當(dāng)前的標(biāo)簽要關(guān)聯(lián)到指定的內(nèi)容區(qū)域渠羞，就好比你是在拖動不同標(biāo)簽對應(yīng)的實體卡片一樣。這樣的話智哀，就能突出顯示對應(yīng)的內(nèi)容面板次询，同時也能夠在只有兩個標(biāo)簽的時候依然明確的告訴用戶當(dāng)前選中的是哪個標(biāo)簽。
8屯吊、使用簡單明了的標(biāo)簽語言，而不是代辦專業(yè)性的描述摹菠。每個選項卡對應(yīng)的文本標(biāo)簽應(yīng)該在1-2個單詞雌芽，保證用戶易于閱讀。如果你真的需要更長的標(biāo)簽語言辨嗽，那就意味著你的標(biāo)簽控件設(shè)計的過于復(fù)雜了世落。
9、不要針對標(biāo)簽語言采用全部大寫的做法糟需，這絕不是一個好的主意屉佳，因為會增加閱讀的難度。雖然可讀性對單一的洲押，簡短的詞組不成問題武花，但是正如網(wǎng)站可用性指南中描述， 你應(yīng)該選擇一個大小寫格式（無論是針對句子還是標(biāo)題樣式）并堅持使用杈帐。
10体箕、要堅持所有的標(biāo)簽選項卡只采用單行排列。如果放置在多行的話挑童，就會引起元素間的跳躍性累铅，破壞用戶在空間上的記憶，使他們不可能記住自己已經(jīng)訪問過的標(biāo)簽站叼。另外娃兽，這種做法也是設(shè)計過渡復(fù)雜的一個表征，這個時候你必須要考慮簡化你的設(shè)計尽楔。
11投储、將標(biāo)簽選項卡布置在頁面頂部的一個面板上第练，不要放在用戶常常會忽略的邊欄或底部位置。
每個標(biāo)簽對應(yīng)的內(nèi)容區(qū)域在視覺上應(yīng)該有明確的界限玛荞。從喻意上來說娇掏，使用標(biāo)簽就像在老式的抽屜式卡片目錄下翻閱索引卡片一樣，因此用戶必須在第一眼就能明白什么組成了“索引卡片”（即選項卡面板)勋眯。
12、所有的標(biāo)簽選項卡在視覺和作用方式上應(yīng)該一致凡恍，因為這種一致性的做法能夠幫助用戶在幾個方面建立起對他們對用戶界面的把控度：
（1）可識別性：當(dāng)一些東西看起來總是一致時，你能夠知道要去找哪一個以及找到的那個又是什么怔球。?
（2）可預(yù)見性：當(dāng)一些東西總是以一致的方式作用時嚼酝，你能夠預(yù)見到當(dāng)你作用于它時將會發(fā)生什么。
（3）自主性： 當(dāng)你可以依賴你過去的所有可用的知識特性竟坛，您可以很容易地構(gòu)建起一連串的動作來達(dá)成你的目標(biāo)闽巩。
（4）高效性：你不需要花費(fèi)額外的時間來學(xué)習(xí)新東西，也不必?fù)?dān)心不一致的功能會帶來的影響担汤。
結(jié)論
在圖形化的用戶界面設(shè)計中涎跨，標(biāo)簽選項卡看上去簡陋而無趣。但是就像本文提到的崭歧，在創(chuàng)建作用優(yōu)良隅很，容易使用，提升體驗的標(biāo)簽時率碾，仍然有一些需要我們注意的具體問題叔营。?
標(biāo)簽選項卡的設(shè)計問題只是我們在分析UX的優(yōu)良性時遇到的一個普通的問題。如果你在追蹤用戶在頁面內(nèi)的行為操作所宰，如果發(fā)現(xiàn)用戶在某些頁面中很少使用到標(biāo)簽绒尊，請嘗試檢查你的設(shè)計是不是違背了本文中提到的一些指導(dǎo)原則。如果確實違背了仔粥，那可能就出自你的設(shè)計問題婴谱，不過你也有可能通過重新設(shè)計后再來做個快速的A/B測試來彌補(bǔ)自己的過錯。?
如果你遵循了本文中的指導(dǎo)原則進(jìn)行設(shè)計躯泰，用戶就能夠不需要花費(fèi)額外的探索或猜測來搞清楚如何使用你的標(biāo)簽谭羔。這就意味著他們可以把所有的時間和腦力用來理解在這些標(biāo)簽背后的內(nèi)容和特性。 ?標(biāo)簽本身是毫無意義的麦向，但是當(dāng)它們本身能夠在不打擾用戶的同時還能指引用戶前往正確的內(nèi)容和特性時口糕，你便不得不承認(rèn)它也是可以做到耀眼的。
譯自：https://www.nngroup.com/articles/tabs-used-right/
