導(dǎo)讀：「Tabs」作為界面設(shè)計(jì)當(dāng)中誕生比較早的交互組件，一直在設(shè)計(jì)稿之中占舉足輕重的地位，當(dāng)他從桌面時(shí)代進(jìn)化到移動(dòng)端時(shí)代過(guò)程中也誕生了很多的變體，同時(shí)由于客觀上存在復(fù)雜的用戶場(chǎng)景，造成新手設(shè)計(jì)師使用起來(lái)會(huì)碰到很多問(wèn)題花樣百出。

01「Tabs」在現(xiàn)實(shí)世界的隱喻

「Tabs」在現(xiàn)實(shí)世界當(dāng)中可以看作是一個(gè)大抽屜，而不同標(biāo)簽頁(yè)是對(duì)放在抽屜里不同文件夾的比喻，其中每個(gè)文件夾是有其特定內(nèi)容，大體性質(zhì)相互一致，但所有文件夾均屬于同一個(gè)抽屜，文件夾上的標(biāo)簽可以讓使用者對(duì)該文件夾進(jìn)行命名或者進(jìn)行標(biāo)記。

02「Tabs」的交互含義

從現(xiàn)實(shí)世界映射到界面世界中，「Tabs」是一種可以在不同屏幕、不同數(shù)據(jù)集或者不同組織內(nèi)容之間實(shí)現(xiàn)相互切換功能的交互組件，其本質(zhì)為對(duì)屏幕的復(fù)用。

03「Tabs」的結(jié)構(gòu)

「Tabs」作為一種常用交互組件，設(shè)計(jì)師已經(jīng)演化出許多不同的外觀，這里小編直接引用Material Design里提到的外觀進(jìn)行解構(gòu)。

1.Container 容器

2.Active icon 選中圖標(biāo)(如果有選中文本標(biāo)簽，其可選)

3.Active text label 選中文本標(biāo)簽(如果有選中圖標(biāo)，其可選)

4.Active tab indicator 選中標(biāo)簽指示器（可選）

5.Inactive icon 非選中圖標(biāo)(如果有非選中文本標(biāo)簽，其可選)

6.Inactive text label 非選中文本標(biāo)簽(如果有非選中圖標(biāo)，其可選)

7.Tab item 標(biāo)簽項(xiàng)

04 聊下「分段選擇器」

「Segmented Controls」意為「分段選擇器」，由于兩者外形結(jié)構(gòu)相似性很高，許多年輕設(shè)計(jì)師會(huì)把「tabs」與「Segmented Controls」混用，以為兩者是同一樣事物，其他它們本質(zhì)大有不同，「Segmented Controls」是iOS原生控件之一，有他特定的使用場(chǎng)景。

在蘋果的人機(jī)交互指南當(dāng)中對(duì)「Segmented Controls」的定義：分段選擇器是一組分段（segment ）的線性集合，每段互斥對(duì)立，點(diǎn)擊一段后使其觸發(fā)，其他分段將變成未觸發(fā)。

所以蘋果對(duì)「Segmented Controls」的定義其實(shí)是一種單選組件的變體，功能上更趨近于數(shù)據(jù)篩選而不是屏幕復(fù)用，這里提供人機(jī)交互指南對(duì)應(yīng)網(wǎng)址。

https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/

05「Tabs」的使用小竅門

1. 突出選中標(biāo)簽，弱化未選中標(biāo)簽

很多設(shè)計(jì)師在設(shè)計(jì)前都會(huì)記得這個(gè)基本點(diǎn)，但是使用中又往往會(huì)南轅北轍。通常使用的設(shè)計(jì)手法有拉開標(biāo)簽字體的大小、粗體，使用圖標(biāo)等一些視覺(jué)設(shè)計(jì)手法來(lái)提高區(qū)分度。下圖所示，如果這個(gè)設(shè)計(jì)有三個(gè)標(biāo)簽項(xiàng)那么就沒(méi)問(wèn)題，但是在兩個(gè)標(biāo)簽項(xiàng)的情況下用戶就會(huì)很迷惑。

2. 「tabs」在移動(dòng)端支持手勢(shì)交互

使用時(shí)用戶可以通過(guò)點(diǎn)擊一個(gè)標(biāo)簽來(lái)進(jìn)行內(nèi)容之間的切換，同時(shí)在內(nèi)容模塊上也要支持執(zhí)行滑動(dòng)手勢(shì)對(duì)「tabs」進(jìn)行左右切換。但是如果在界面內(nèi)也存在某些支持滑動(dòng)的元素時(shí)，那么在設(shè)計(jì)「tabs」的滑動(dòng)手勢(shì)就需要特別注意了。

3. 滾動(dòng)型「tabs」 注意露出標(biāo)簽的位置

由于在移動(dòng)端「tabs」對(duì)于標(biāo)簽頁(yè)數(shù)量沒(méi)有卡的特別死，那么我們就可以通過(guò)滾動(dòng)型「tabs」來(lái)擴(kuò)展更多的數(shù)量。同時(shí)在使用滾動(dòng)型「tabs」時(shí)部分標(biāo)簽是處在屏幕之外，那么在交接處的標(biāo)簽名我們需要露出部分在屏幕內(nèi)，這樣做可以暗示用戶「tabs」可滑動(dòng)，并且在屏幕外還存在信息。

4. 內(nèi)容劃分符合認(rèn)識(shí)邏輯

對(duì)標(biāo)簽下的頁(yè)面內(nèi)容劃分要符合當(dāng)前的信息邏輯，這樣做的好處是讓用戶可以輕松預(yù)測(cè)他們?cè)谶x擇下一個(gè)標(biāo)簽時(shí)的內(nèi)容，如果設(shè)計(jì)師對(duì)于信息設(shè)計(jì)很難做到合適的劃分角度，那么這時(shí)候使用「tabs」組件可能是一個(gè)錯(cuò)誤的選擇。

5. 慎重對(duì)待默認(rèn)項(xiàng)

對(duì)于「tabs」來(lái)說(shuō)默認(rèn)項(xiàng)是第一個(gè)標(biāo)簽，但是在特定情況下也是可以對(duì)其進(jìn)行自定義。但是對(duì)于數(shù)據(jù)（例如填寫率，轉(zhuǎn)化率等）來(lái)說(shuō)個(gè)從左到右標(biāo)必定衰減，那么我們?cè)谠O(shè)計(jì)時(shí)就得考慮這一點(diǎn)。

6. 信息對(duì)比不使用「tabs」

小編見過(guò)很多設(shè)計(jì)師在設(shè)計(jì)一組對(duì)比信息時(shí)喜歡使用「tabs」來(lái)對(duì)信息進(jìn)行分類，然后讓用戶在不斷點(diǎn)擊標(biāo)簽時(shí)進(jìn)行信息對(duì)比。其實(shí)這種設(shè)計(jì)框架十分不可取。來(lái)回切換會(huì)給用戶的短期記憶帶來(lái)額外的負(fù)擔(dān)，增加認(rèn)知負(fù)荷和交互成本，并降低可用性。

06 文末小節(jié)

「Tabs」可能看起來(lái)像是用戶界面設(shè)計(jì)中一個(gè)毫不起眼并且十分無(wú)趣的組件，但是設(shè)計(jì)師必須靠它與用戶建立起良好的交互關(guān)系、同時(shí)它也包含著設(shè)計(jì)師對(duì)于界面編排的基本理解以及對(duì)頁(yè)面框架結(jié)構(gòu)的闡述。合理的「tabs」使用可以讓用戶迅速下降對(duì)于信息的接納成本，提高使用體感。

作者：月亮與六便士；公眾號(hào)：月亮體驗(yàn)設(shè)計(jì)坊

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

題圖來(lái)Unsplash，基于CC0協(xié)議。