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

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

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

02「Tabs」的交互含義

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

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

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

1.Container 容器

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

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

4.Active tab indicator 選中標簽指示器（可選）

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

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

7.Tab item 標簽項

04 聊下「分段選擇器」

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

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

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

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

05「Tabs」的使用小竅門

1. 突出選中標簽，弱化未選中標簽

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

2. 「tabs」在移動端支持手勢交互

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

3. 滾動型「tabs」 注意露出標簽的位置

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

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

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

5. 慎重對待默認項

對于「tabs」來說默認項是第一個標簽，但是在特定情況下也是可以對其進行自定義。但是對于數(shù)據(jù)（例如填寫率，轉(zhuǎn)化率等）來說個從左到右標必定衰減，那么我們在設(shè)計時就得考慮這一點。

6. 信息對比不使用「tabs」

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

06 文末小節(jié)

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

作者：月亮與六便士；公眾號：月亮體驗設(shè)計坊

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

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