用三期干貨，全方位解析「標(biāo)簽欄」控件設(shè)計(jì)

「用戶體驗(yàn)」這個詞常常被互聯(lián)網(wǎng)行業(yè)的人掛在嘴邊，然而用戶眾口難調(diào)，「體驗(yàn)」的標(biāo)準(zhǔn)難以具象，所以不同的產(chǎn)品團(tuán)隊(duì)可能有不同的用戶體驗(yàn)驗(yàn)證方法。但業(yè)內(nèi)較常受人所用的還是切入「用戶體驗(yàn)五要素」的層層自檢──戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層。

作為一名無產(chǎn)階級打工仔，有時候我們的職能可能并不允許我們直接地參與到公司的產(chǎn)品戰(zhàn)略、范圍和結(jié)構(gòu)定義。但畢竟身為戰(zhàn)斗在產(chǎn)品前線的一員，不論你是 PM 還是 UI，和框架層與表現(xiàn)層打交道，幾乎是你每天都無法避免的。

在界面落地后，「標(biāo)簽欄」恰巧是在表現(xiàn)層層面向用戶展現(xiàn)產(chǎn)品框架的最直接控件。

雖然設(shè)計(jì)好標(biāo)簽欄，也許依舊無法讓你把控一個產(chǎn)品的體驗(yàn)走向，畢竟戰(zhàn)略層、范圍層、結(jié)構(gòu)層也是很重要的。但如果框架層和表現(xiàn)層垮了，那用戶體驗(yàn)一定是糟糕的，并且和你有最直接的關(guān)系。

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

那么第一期我們就先從 iOS 人機(jī)交互規(guī)范和 Google Material Design 平臺規(guī)范切入，來梳理一下「標(biāo)簽欄」。

標(biāo)簽欄是什么？

iOS 人機(jī)交互規(guī)范定義：出現(xiàn)在應(yīng)用程序屏幕底部，并架構(gòu)了多個屏幕之間頁面內(nèi)容切換的容器叫做「標(biāo)簽欄」（Tab Bar）。

標(biāo)簽欄在任何目標(biāo)頁面中的高度是不變的，iOS 規(guī)定它的高度為 98px（iOS @2x）。但因?yàn)?iPhone X 之后的全面屏手機(jī)引入了 Home Bar ，所以在進(jìn)行界面適配的時候，請務(wù)必要加上 Home Bar 自身的 68px 高度。別讓 Home Bar 遮擋標(biāo)簽欄中標(biāo)簽的展示，這會讓兩個控件發(fā)生操作手勢沖突。

規(guī)范里告訴我們該怎么做

從 GUI 層面出發(fā)，標(biāo)簽欄的視覺規(guī)范可以總結(jié)為以下三大點(diǎn)：標(biāo)簽數(shù)量、標(biāo)簽排版和標(biāo)簽欄視覺分割。

1. 標(biāo)簽數(shù)量

標(biāo)簽欄幾乎是所有控件中，唯一一個有拉平頂級信息結(jié)構(gòu)，并提供一次訪問多個對等信息類別作用的控件。所以想要規(guī)避用戶在使用你的應(yīng)用程序時迷路蒙圈的話，請確保標(biāo)簽欄表現(xiàn)清晰、反饋及時。

為了讓標(biāo)簽欄表現(xiàn)清晰，兩個平臺在規(guī)范里都對標(biāo)簽數(shù)量給出了相同的建議：建議標(biāo)簽欄內(nèi)的標(biāo)簽個數(shù)為 3 個至 5 個。因?yàn)闃?biāo)簽過多，一是會增加產(chǎn)品結(jié)構(gòu)的復(fù)雜性；二是會使每一個單元標(biāo)簽的可觸空間降低，容易導(dǎo)致用戶發(fā)生誤觸。

如果你因?yàn)楫a(chǎn)品結(jié)構(gòu)非常繁雜，而硬著頭皮胡來的話，其實(shí) Material Design 也并不會把你怎么樣，但在 iOS 在實(shí)施規(guī)范這一塊可就強(qiáng)硬多了。

iOS 人機(jī)交互規(guī)范告訴產(chǎn)品設(shè)計(jì)者們：標(biāo)簽欄雖然可以包含任意數(shù)量的標(biāo)簽，但可見標(biāo)簽的數(shù)量會根據(jù)設(shè)備的大小（平板或手機(jī)）和方向（豎屏或橫屏）而自適應(yīng)變化。如果由于水平空間有限而無法顯示某些標(biāo)簽時，最后的一個可見標(biāo)簽將會被系統(tǒng)強(qiáng)行轉(zhuǎn)換為「更多」選項(xiàng)，需要用戶點(diǎn)擊「更多」選項(xiàng)之后，系統(tǒng)才將在單獨(dú)屏幕上的列表中顯示其他被隱藏的標(biāo)簽。

所以如果你不想讓系統(tǒng)強(qiáng)行更改你的產(chǎn)品交互方式，但你的產(chǎn)品框架又確實(shí)十分復(fù)雜的時候，建議你可以嘗試使用分頁標(biāo)簽或者導(dǎo)航抽屜等其他展現(xiàn)形式。

2. 標(biāo)簽排版

大家見得比較多的標(biāo)簽排版應(yīng)該是：每個標(biāo)簽在標(biāo)簽欄中平均分配，且圖標(biāo)與標(biāo)簽文字采用上下結(jié)構(gòu)。其實(shí)規(guī)范里還給了我們一些其他的排版樣式規(guī)范。

Android上的標(biāo)簽排版

Material Design 建議，在移動設(shè)備縱向模式下，標(biāo)簽排版的方式應(yīng)該由標(biāo)簽數(shù)量而定。

• 三個標(biāo)簽：所有標(biāo)簽都應(yīng)該顯示圖標(biāo)和標(biāo)簽文字，以上下結(jié)構(gòu)呈現(xiàn)。
• 四個標(biāo)簽：選中的標(biāo)簽顯示圖標(biāo)和標(biāo)簽文字，以上下結(jié)構(gòu)呈現(xiàn)。未選中的標(biāo)簽建議僅顯示圖標(biāo)，是否顯示標(biāo)簽文字可自定義。
• 五個標(biāo)簽：選中的標(biāo)簽顯示圖標(biāo)和標(biāo)簽文字，以上下結(jié)構(gòu)呈現(xiàn)。未選中的標(biāo)簽僅顯示圖標(biāo)，只有在空間允許的情況下，才顯示標(biāo)簽文字。

但如果應(yīng)用程序可以在橫向模式下展示，或支持平板設(shè)備時：

• 采用上下結(jié)構(gòu)：沿用縱向模式標(biāo)簽個數(shù)規(guī)則，并且保留縱向模式下使用的相同間距，而不要在標(biāo)簽欄中平均分配。
• 采用左右結(jié)構(gòu)：建議將標(biāo)簽平均分配在標(biāo)簽欄中。

除了標(biāo)簽分布上的變化，Material Design 在屏幕縱向模式和橫向模式上沒有再定義更多的變量值了，不管是哪一種屏幕模式下，標(biāo)簽欄的高度和標(biāo)簽圖標(biāo)大小都是固定值。這一點(diǎn)和 iOS 有著非常大的差異。

iOS上的標(biāo)簽排版

iOS 在標(biāo)簽排版上的規(guī)范相對統(tǒng)一。在移動設(shè)備縱向模式下始終采用「圖標(biāo)+標(biāo)簽文字」上下結(jié)構(gòu)形式；橫向模式下始終采用「圖標(biāo)+標(biāo)簽文字」左右結(jié)構(gòu)形式。不會像Material Design 那樣，需要根據(jù)不同的標(biāo)簽數(shù)量發(fā)生標(biāo)簽文字顯隱變化。

但是標(biāo)簽欄高度以及元素的大小都會隨著屏幕模式發(fā)生改變。

iOS 將移動設(shè)備縱向模式下的標(biāo)簽欄稱之為常規(guī)型、橫向模式下的標(biāo)簽欄稱之為緊湊型。圖標(biāo)大小規(guī)范與示例標(biāo)注分別見以下圖：

3. 視覺分割

缺少視覺分割會讓用戶分不清標(biāo)簽欄與內(nèi)容界面，它們看起來會更像一個平級。對用戶視覺區(qū)分內(nèi)容主次其實(shí)是不友好的。

為了幫助用戶進(jìn)行標(biāo)簽欄與內(nèi)容區(qū)域的視覺分割，iOS 的標(biāo)簽欄是帶有毛玻璃效果的，雖然這會消耗一部分運(yùn)行性能，但國內(nèi)許多應(yīng)用程序還是沿用了這個效果。

△ 標(biāo)簽欄毛玻璃效果

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

總結(jié)

標(biāo)簽欄是向用戶展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，連接著整個產(chǎn)品最重要的頂層信息，而所有的功能分支又都是鑲嵌在一個一個的頂層頁面中的。所以一旦選擇了采用標(biāo)簽欄來承載產(chǎn)品框架信息，就一定要確保用戶不會因?yàn)樵O(shè)計(jì)者的失誤，而在使用產(chǎn)品的過程中產(chǎn)生挫敗感。

標(biāo)簽欄不論從視覺層面還是交互層面剖析，都有很多可以探索的點(diǎn)。本期我先從整體入手，由平臺規(guī)范切入，帶大家先了解標(biāo)簽欄。下一期我將借標(biāo)簽欄，總結(jié)一下基本圖標(biāo)的制作與動效圖標(biāo)的落地。

歡迎大家關(guān)注作者微信公眾號：「UCD耍家」