界面落地後，“标簽欄”恰巧是在表現層層面向用戶展現産品框架的最直接控件。作者全發那個味拆解标簽欄的設計和交互，看看如何給用戶更好的體驗。

“用戶體驗”這個詞常常被互聯網行業的人挂在嘴邊，然而用戶衆口難調，“體驗”的标準難以具象，所以不同的産品團隊可能有不同的用戶體驗驗證方法。

但業内較常受人所用的還是切入“用戶體驗五要素”的層層自檢——戰略層、範圍層、結構層、框架層和表現層。

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

在界面落地後，“标簽欄”恰巧是在表現層層面向用戶展現産品框架的最直接控件。

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

所以談及到标簽欄，我不得不锱铢必較一下，我會分三期來全方位地拆分詳解。

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

一、标簽欄是什麼？

iOS 人機交互規範定義：出現在應用程序屏幕底部，并架構了多個屏幕之間頁面内容切換的容器叫做“标簽欄”（Tab Bar）。

标簽欄在任何目标頁面中的高度是不變的，iOS 規定它的高度為98px（iOS @2x）。但因為 iPhone X 之後的全面屏手機引入了 Home Bar ，所以在進行界面适配的時候，請務必要加上 Home Bar 自身的68px高度。

别讓Home Bar遮擋标簽欄中标簽的展示，這會讓兩個控件發生操作手勢沖突。

二、規範裡告訴我們該怎麼做

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

2.1 标簽數量

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

為了讓标簽欄表現清晰，兩個平台在規範裡都對标簽數量都給出了相同的建議：建議标簽欄内的标簽個數為3個至5個。

因為标簽過多，一是會增加産品結構的複雜性；二是會使每一個單元标簽的可觸空間降低，容易導緻用戶發生誤觸。

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

iOS 人機交互規範告訴産品設計者們：标簽欄雖然可以包含任意數量的标簽，但可見标簽的數量會根據設備的大小（平闆或手機）和方向（豎屏或橫屏）而自适應變化。

如果由于水平空間有限而無法顯示某些标簽時，最後的一個可見标簽将被會被系統強行轉換為“更多”選項，需要用戶點擊“更多”選項之後，系統才将在單獨屏幕上的列表中顯示其他被隐藏的标簽。

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

2.2 标簽排版

大家見得比較多的标簽排版應該是：每個标簽在标簽欄中平均分配，且圖标與标簽文字采用上下結構。

其實，規範裡還給了我們一些其他的排版樣式規範。

2.2.1 Android 上的标簽排版

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

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

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

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

除了标簽分布上的變化，Material Design 在屏幕縱向模式和橫向模式上沒有再定義更多的變量值了。

不管是哪一種屏幕模式下，标簽欄的高度和标簽圖标大小都是固定值，這一點和iOS有着非常大的差異。

2.2.2 iOS 上的标簽排版

iOS 在标簽排版上的規範相對統一。

在移動設備縱向模式下始終采用“圖标 标簽文字”上下結構形式；橫向模式下始終采用“圖标 标簽文字”左右結構形式。不會像Material Design 那樣，需要根據不同的标簽數量發生标簽文字顯隐變化。

但是，标簽欄高度以及元素的大小都會随着屏幕模式發生改變。

iOS 将移動設備縱向模式下的标簽欄稱之為常規型、橫向模式下的标簽欄稱之為緊湊型。

圖标大小規範與示例标注分别見以下圖：

2.3 視覺分割

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

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

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

三、總結

标簽欄是向用戶展現産品框架的關鍵控件，連接着整個産品最重要的頂層信息，而所有的功能分支又都是鑲嵌在一個一個的頂層頁面中的。

所以，一旦選擇了采用标簽欄來承載産品框架信息，就一定要确保用戶不會因為設計者的失誤，而在使用産品的過程中産生挫敗感。

标簽欄不論從視覺層面還是交互層面剖析，都有很多可以探索的點。

本期我先從整體入手，由平台規範切入，帶大家先了解标簽欄。下一期我将借标簽欄，總結一下基本圖标的制作與動效圖标的落地。

作者：Howie_t；公衆号：UCD耍家（ID：ucdplayer）

本文由 @Howie_t 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部