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

01「Tabs」在現實世界的隱喻

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

02「Tabs」的交互含義

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

03「Tabs」的結構

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

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」意為「分段選擇器」，由于兩者外形結構相似性很高，許多年輕設計師會把「tabs」與「Segmented Controls」混用，以為兩者是同一樣事物，其他它們本質大有不同，「Segmented Controls」是iOS原生控件之一，有他特定的使用場景。

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

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

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

05「Tabs」的使用小竅門

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

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

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

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

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

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

4. 內容劃分符合認識邏輯

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

5. 慎重對待默認項

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

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

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

06 文末小節

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

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

本文由 @月亮與六便士 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來Unsplash，基于CC0協議。