「用戶體驗」這個詞常常被互聯網行業的人掛在嘴邊，然而用戶眾口難調，「體驗」的標準難以具象，所以不同的產品團隊可能有不同的用戶體驗驗證方法。但業內較常受人所用的還是切入「用戶體驗五要素」的層層自檢──戰略層、範圍層、結構層、框架層和表現層。

作為一名無產階級打工仔，有時候我們的職能可能並不允許我們直接地參与到公司的產品戰略、範圍和結構定義。但畢竟身為戰鬥在產品前線的一員，不論你是 PM 還是 UI，和框架層與表現層打交道，幾乎是你每天都無法避免的。

在界面落地后，「標籤欄」恰巧是在表現層層面向用戶展現產品框架的最直接控件。

雖然設計好標籤欄，也許依舊無法讓你把控一個產品的體驗走向，畢竟戰略層、範圍層、結構層也是很重要的。但如果框架層和表現層垮了，那用戶體驗一定是糟糕的，並且和你有最直接的關係。

所以談及到標籤欄，我不得不錙銖必較一下，我會分三期來全方位地拆分詳解。

那麼第一期我們就先從 iOS 人機交互規範和 Google Material Design 平台規範切入，來梳理一下「標籤欄」。

標籤欄是什麼？

iOS 人機交互規範定義：出現在應用程序屏幕底部，並架構了多個屏幕之間頁面內容切換的容器叫做「標籤欄」（Tab Bar）。

標籤欄在任何目標頁面中的高度是不變的，iOS 規定它的高度為 98px（iOS @2x）。但因為 iPhone X 之後的全面屏手機引入了 Home Bar ，所以在進行界面適配的時候，請務必要加上 Home Bar 自身的 68px 高度。別讓 Home Bar 遮擋標籤欄中標籤的展示，這會讓兩個控件發生操作手勢衝突。

規範里告訴我們該怎麼做

從 GUI 層面出發，標籤欄的視覺規範可以總結為以下三大點：標籤數量、標籤排版和標籤欄視覺分割。

1. 標籤數量

標籤欄幾乎是所有控件中，唯一一個有拉平頂級信息結構，並提供一次訪問多個對等信息類別作用的控件。所以想要規避用戶在使用你的應用程序時迷路蒙圈的話，請確保標籤欄表現清晰、反饋及時。

為了讓標籤欄表現清晰，兩個平台在規範里都對標籤數量給出了相同的建議：建議標籤欄內的標籤個數為 3 個至 5 個。因為標籤過多，一是會增加產品結構的複雜性；二是會使每一個單元標籤的可觸空間降低，容易導致用戶發生誤觸。

如果你因為產品結構非常繁雜，而硬着頭皮胡來的話，其實 Material Design 也並不會把你怎麼樣，但在 iOS 在實施規範這一塊可就強硬多了。

iOS 人機交互規範告訴產品設計者們：標籤欄雖然可以包含任意數量的標籤，但可見標籤的數量會根據設備的大小（平板或手機）和方向（豎屏或橫屏）而自適應變化。如果由於水平空間有限而無法显示某些標籤時，最後的一個可見標籤將會被系統強行轉換為「更多」選項，需要用戶點擊「更多」選項之後，系統才將在單獨屏幕上的列表中显示其他被隱藏的標籤。

所以如果你不想讓系統強行更改你的產品交互方式，但你的產品框架又確實十分複雜的時候，建議你可以嘗試使用分頁標籤或者導航抽屜等其他展現形式。

2. 標籤排版

大家見得比較多的標籤排版應該是：每個標籤在標籤欄中平均分配，且圖標與標籤文字採用上下結構。其實規範里還給了我們一些其他的排版樣式規範。

Android上的標籤排版

Material Design 建議，在移動設備縱向模式下，標籤排版的方式應該由標籤數量而定。

• 三個標籤：所有標籤都應該显示圖標和標籤文字，以上下結構呈現。
• 四個標籤：選中的標籤显示圖標和標籤文字，以上下結構呈現。未選中的標籤建議僅显示圖標，是否显示標籤文字可自定義。
• 五個標籤：選中的標籤显示圖標和標籤文字，以上下結構呈現。未選中的標籤僅显示圖標，只有在空間允許的情況下，才显示標籤文字。

但如果應用程序可以在橫向模式下展示，或支持平板設備時：

• 採用上下結構：沿用縱向模式標籤個數規則，並且保留縱向模式下使用的相同間距，而不要在標籤欄中平均分配。
• 採用左右結構：建議將標籤平均分配在標籤欄中。

除了標籤分佈上的變化，Material Design 在屏幕縱向模式和橫向模式上沒有再定義更多的變量值了，不管是哪一種屏幕模式下，標籤欄的高度和標籤圖標大小都是固定值。這一點和 iOS 有着非常大的差異。

iOS上的標籤排版

iOS 在標籤排版上的規範相對統一。在移動設備縱向模式下始終採用「圖標+標籤文字」上下結構形式；橫向模式下始終採用「圖標+標籤文字」左右結構形式。不會像Material Design 那樣，需要根據不同的標籤數量發生標籤文字顯隱變化。

但是標籤欄高度以及元素的大小都會隨着屏幕模式發生改變。

iOS 將移動設備縱向模式下的標籤欄稱之為常規型、橫向模式下的標籤欄稱之為緊湊型。圖標大小規範與示例標註分別見以下圖：

3. 視覺分割

缺少視覺分割會讓用戶分不清標籤欄與內容界面，它們看起來會更像一個平級。對用戶視覺區分內容主次其實是不友好的。

為了幫助用戶進行標籤欄與內容區域的視覺分割，iOS 的標籤欄是帶有毛玻璃效果的，雖然這會消耗一部分運行性能，但國內許多應用程序還是沿用了這個效果。

△ 標籤欄毛玻璃效果

安卓原生是不支持毛玻璃的，所以 Material Design 建議使用顏色分割。當然，國內的眾多應用程序，也早已探索出了許多其他的視覺分割形式。

總結

標籤欄是向用戶展現產品框架的關鍵控件，連接着整個產品最重要的頂層信息，而所有的功能分支又都是鑲嵌在一個一個的頂層頁面中的。所以一旦選擇了採用標籤欄來承載產品框架信息，就一定要確保用戶不會因為設計者的失誤，而在使用產品的過程中產生挫敗感。

標籤欄不論從視覺層面還是交互層面剖析，都有很多可以探索的點。本期我先從整體入手，由平台規範切入，帶大家先了解標籤欄。下一期我將借標籤欄，總結一下基本圖標的製作與動效圖標的落地。

歡迎大家關注作者微信公眾號：「UCD耍家」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極平台網站_用三期乾貨，全方位解析「標籤欄」控件設計