編輯導(dǎo)語：Tabs標(biāo)簽頁又稱選項(xiàng)卡（以下簡稱標(biāo)簽頁），它是一種高效的屏幕空間利用手段，映射非常接近卡片的目錄索引，用戶可以基于索引標(biāo)簽，快速定位到目標(biāo)內(nèi)容中去，這也是大多數(shù)用戶來自現(xiàn)實(shí)世界的經(jīng)驗(yàn)。本文總結(jié)了10個(gè)Tabs標(biāo)簽頁怎么使用的方法，一起來看看。

在Web頁面中，它的使用場景也較為簡單，當(dāng)頁面的內(nèi)容信息量較多，用標(biāo)簽頁可以對(duì)其分類，一方面可以提升查找信息的效率，另一方面可以精簡用戶單次獲取到的信息量，用戶更能夠專注于當(dāng)前已顯示的內(nèi)容。

本文從標(biāo)簽頁的「基本原則」和「使用避免」兩個(gè)維度，總結(jié)10個(gè)我們所要注意的一些規(guī)則和方法，如果遵循這些原則，它不僅能夠快速、高效幫助用戶完成任務(wù)，也會(huì)讓我們設(shè)計(jì)的體驗(yàn)更好。

由于Tabs標(biāo)簽頁涉及到的端設(shè)備及內(nèi)容較多，本文只討論Web端內(nèi)標(biāo)簽頁的使用情況，不討論瀏覽器級(jí)別的標(biāo)簽和導(dǎo)航標(biāo)簽設(shè)計(jì)等。

一、基本原則

1. 標(biāo)簽的文案應(yīng)當(dāng)是簡短且高效的

1）標(biāo)簽的文案應(yīng)當(dāng)簡短，做到讓用戶快速識(shí)別

標(biāo)簽的文案需要盡可能使用簡短的、概括性強(qiáng)的關(guān)鍵詞，如果使用較長的文案，那么對(duì)于用戶閱讀和區(qū)分這些信息都是一個(gè)不小的挑戰(zhàn)。標(biāo)簽文案需要有明顯的區(qū)分，避免用戶產(chǎn)生歧義；在詞語上優(yōu)先使用名詞而不是動(dòng)詞，因?yàn)閯?dòng)詞讓用戶誤以為這是可以行動(dòng)的按鈕。

2）標(biāo)簽的文案應(yīng)當(dāng)做到高效展示

標(biāo)簽的信息展示傳達(dá)應(yīng)當(dāng)高效，比如不要讓標(biāo)簽文案分展示，如下圖的標(biāo)簽頁的狀態(tài)和數(shù)量兩組信息較為割裂，用戶會(huì)做短暫思考關(guān)聯(lián)下方內(nèi)容的是狀態(tài)還是數(shù)量。如果設(shè)計(jì)的樣式與常規(guī)標(biāo)準(zhǔn)差異較大，用戶就會(huì)產(chǎn)生疑惑，所以對(duì)于用戶已形成的行為習(xí)慣，盡可能避免改變。

2. 已選中的標(biāo)簽應(yīng)當(dāng)是唯一的且足夠突出

1）已選中的標(biāo)簽應(yīng)當(dāng)是唯一的

標(biāo)簽頁之間是相互獨(dú)立且互斥的，一次只顯示一個(gè)標(biāo)簽的內(nèi)容信息，不會(huì)出現(xiàn)點(diǎn)擊一個(gè)標(biāo)簽頁，出現(xiàn)兩個(gè)甚至更多標(biāo)簽的詳細(xì)信息。一般默認(rèn)選項(xiàng)為第一個(gè)標(biāo)簽頁，而如果沒有給到用戶預(yù)選擇的情況，也會(huì)讓用戶感覺困惑。同時(shí)關(guān)聯(lián)的詳細(xì)內(nèi)容區(qū)域?qū)挾葢?yīng)該是等同的，切換不同的標(biāo)簽，不要改變其內(nèi)容寬度的大小。

2）已選中的標(biāo)簽應(yīng)當(dāng)是足夠突出

確保已選中的標(biāo)簽頁足夠突出，讓用戶一眼就知道了當(dāng)前選中了哪個(gè)選項(xiàng)卡，特別是當(dāng)只有兩個(gè)標(biāo)簽頁的時(shí)候?？梢酝ㄟ^字體大小、顏色、粗體等在增加已選中的視覺權(quán)重。

3. 標(biāo)簽頁版面延伸到內(nèi)容區(qū)域，可加強(qiáng)標(biāo)簽與內(nèi)容的關(guān)聯(lián)性

如果將選中卡片式標(biāo)簽頁背景顏色和內(nèi)容面板背景保持一致，就能夠做到增強(qiáng)選項(xiàng)卡與內(nèi)容之間的聯(lián)系感。

4. 標(biāo)簽頁的位置和排序，應(yīng)當(dāng)基于人的閱讀習(xí)慣

1）位置：強(qiáng)調(diào)或需要引起用戶的注意，請(qǐng)把它放至頂部

因?yàn)?strong>人的閱讀習(xí)慣是從左至右、從上到下的順序?yàn)g覽，所以相較于底部或左側(cè)的標(biāo)簽頁，頂部的標(biāo)簽頁具有更強(qiáng)的視覺引導(dǎo)并引起用戶的注意。相反如果用戶不太關(guān)心，甚至很少切換這些標(biāo)簽頁，可以考慮將它們放至底部。

2）排序：重要的、使用頻率高的標(biāo)簽應(yīng)當(dāng)放至前面

如上所說，人的閱讀視線從左到右，所以應(yīng)當(dāng)將重要的、使用頻率高的或者按照邏輯順序往前排，通常默認(rèn)選項(xiàng)（一般為左側(cè)第一個(gè)）是用戶進(jìn)入頁面看到的第一個(gè)標(biāo)簽頁，因此它的信息應(yīng)當(dāng)是最重要的、或者應(yīng)當(dāng)是用戶使用頻率最高的。以下是以京東關(guān)于商品詳情的一個(gè)排序，用戶看到的第一個(gè)標(biāo)簽頁是關(guān)于商品的介紹，第二個(gè)標(biāo)簽頁是商品的規(guī)格包裝，第三個(gè)是該商品提供了哪些售后保障等等。

二、使用避免

1. 避免使用圖標(biāo)作為標(biāo)簽頁文案

在一些場景下，圖標(biāo)有時(shí)反而會(huì)用戶誤解標(biāo)簽的信息，如果要用請(qǐng)全部添加，不要只針對(duì)部分標(biāo)簽選擇使用圖標(biāo)。使用時(shí)仍需注意，將圖標(biāo)放至tab標(biāo)簽的左側(cè)。

2. 避免截?cái)鄻?biāo)簽文案，并且讓它們有足夠的點(diǎn)擊面積

1）避免截?cái)鄻?biāo)簽左側(cè)的文案，減少的文本會(huì)阻礙用戶對(duì)于信息的識(shí)別和理解

完整的標(biāo)簽信息，可以幫助用戶快速識(shí)別當(dāng)前的位置。如圖左側(cè)標(biāo)簽內(nèi)容的減少，會(huì)妨礙用戶用戶對(duì)于信息的理解，反而會(huì)降低標(biāo)簽的可識(shí)別度和操作切換的決策成本。

2）標(biāo)簽頁應(yīng)當(dāng)有足夠的面積，避免讓它們進(jìn)入緊湊模式

每個(gè)標(biāo)簽頁都有層級(jí)引導(dǎo)的作用，需有一定面積來展示標(biāo)簽信息。比如像瀏覽器的標(biāo)簽頁特別多時(shí)，會(huì)給用戶使用帶來兩個(gè)問題，一是可點(diǎn)擊區(qū)域非常小，精準(zhǔn)點(diǎn)擊較為困難；二是標(biāo)簽獲取到的可用信息非常少，甚至有時(shí)只是一個(gè)圖標(biāo)，當(dāng)然對(duì)于瀏覽器，我們完全可以重新打開一個(gè)新窗口，來解決這個(gè)問題。

3. 避免數(shù)據(jù)為空，就不顯示這個(gè)標(biāo)簽頁

一般情況下，如果將標(biāo)簽頁作為數(shù)據(jù)信息分類展示時(shí)，即使該標(biāo)簽下沒有數(shù)據(jù)，該標(biāo)簽也是需要顯示的，否則用戶就永遠(yuǎn)不會(huì)知道有這個(gè)標(biāo)簽頁的存在。

4. 避免標(biāo)簽頁，在內(nèi)容較少或者作為比較時(shí)使用

1）避免將標(biāo)簽頁用于很少的內(nèi)容分類，因?yàn)闀?huì)降低信息的展示效率

標(biāo)簽頁本就為過多內(nèi)容信息，而采用的一種分類方式，如果一個(gè)tab下只有幾段文字或者幾組錄入數(shù)據(jù)信息，可以考慮在一個(gè)頁面內(nèi)展示這些內(nèi)容，不僅可以提高屏效，還可以減少操作上的切換成本。如下圖，簡單的三組數(shù)據(jù)信息，我們就可以將它們在一個(gè)頁面，通過卡片來區(qū)分它們。

2）避免將標(biāo)簽頁用于比較不同類別的信息，因?yàn)樗鼤?huì)增加用戶的記憶負(fù)擔(dān)

因?yàn)橛脩敉ㄟ^切換標(biāo)簽頁去比較這些信息時(shí)，短暫記住這些內(nèi)容是一件非常困難的事情。所以對(duì)比不同類別之間的內(nèi)容，可以考慮在一個(gè)頁面展示，如下圖就是蘋果官網(wǎng)在一個(gè)頁面顯示的Mac機(jī)型比較，可以同時(shí)對(duì)比三款機(jī)型的信息。

5. 避免嵌套標(biāo)簽頁，如果使用請(qǐng)加大他們的層級(jí)關(guān)系

避免在web頁面中嵌套標(biāo)簽頁，因?yàn)?strong>嵌套后層級(jí)較為復(fù)雜，可能會(huì)造成信息的混亂，用戶記不住已訪問過哪些標(biāo)簽頁。如果有嵌套tab，請(qǐng)?jiān)谝曈X上加大他們的層級(jí)關(guān)系，并且盡可能減少一級(jí)tab的數(shù)量。

6. 避免復(fù)雜內(nèi)容標(biāo)簽頁，用戶直接刪除

在表單中，如果刪除該標(biāo)簽頁后，會(huì)給用戶造成工作負(fù)擔(dān)，甚至?xí)G失一些數(shù)據(jù)，這時(shí)的刪除操作需要給用戶反饋提醒，給到用戶二次確認(rèn)是否刪除；

如果刪除該頁簽后，對(duì)于用戶幾乎沒有任何負(fù)擔(dān)，或者再次輸入的成本較小時(shí)，不建議使用二次確認(rèn)，因?yàn)檫@時(shí)給用戶帶來的操作干擾遠(yuǎn)大于誤操作成本。比如下圖Microsoft Excel，當(dāng)標(biāo)簽頁簽有內(nèi)容輸入時(shí)，刪除會(huì)需要用戶二次確認(rèn)，而當(dāng)頁面內(nèi)容為空時(shí)刪除不會(huì)給到用戶任何提醒。

在具體的業(yè)務(wù)場景中，我們需要結(jié)合用戶的刪除頻率、誤操作成本以及刪除組件的干擾三者之間找到一個(gè)相對(duì)平衡點(diǎn)。

三、總結(jié)

以上就是標(biāo)簽頁在設(shè)計(jì)中我們所注意的一些事項(xiàng)，如果遵循這些用法，不但解決信息的堆積問題，也能夠大幅提升頁面的清晰和可用性。而如果我們發(fā)現(xiàn)用戶很少去點(diǎn)擊這些標(biāo)簽頁、或者使用經(jīng)常出錯(cuò)，就需要考慮這些標(biāo)簽頁是否使用得當(dāng)，或者違反了上述所說的一些基本用法。

舉例覆蓋的場景不一定全面，不過我們最終的目的還是通過標(biāo)簽頁這個(gè)組件，去引導(dǎo)用戶將視覺聚焦于頁面內(nèi)容。

參考文獻(xiàn)：

張亮《細(xì)節(jié)決定交互設(shè)計(jì)的成敗》

尼爾森諾曼，《Nielsen Norman Grou》

本文由 @小高雜談 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議