UI設(shè)計中標簽欄總結(jié)

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

　　雖然設(shè)計好標簽欄，也許依舊無法讓你把控一個產(chǎn)品的體驗走向，畢竟戰(zhàn)略層、范圍層、結(jié)構(gòu)層也是很重要的。但如果框架層和表現(xiàn)層垮了，那用戶體驗一定是糟糕的，并且和你有最直接的關(guān)系。今天AAA教育郭老師就針對UI設(shè)計中標簽欄總結(jié)進行簡單的說明。
 

　　一、標簽欄是什么?
 

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

 

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

 

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

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

　　2.1 標簽數(shù)量
 

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

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

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

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

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

　　2.2 標簽排版
 

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

 

　　2.2.1 Android 上的標簽排版
 

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

　　三個標簽：所有標簽都應(yīng)該顯示圖標和標簽文字，以上下結(jié)構(gòu)呈現(xiàn)。
 

　　四個標簽：選中的標簽顯示圖標和標簽文字，以上下結(jié)構(gòu)呈現(xiàn)。未選中的標簽建議僅顯示圖標，是否顯示標簽文字可自定義。
 

　　五個標簽：選中的標簽顯示圖標和標簽文字，以上下結(jié)構(gòu)呈現(xiàn)。未選中的標簽僅顯示圖標，只有在如果空間允許的情況下，才顯示標簽文字。

 

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

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

　　采用左右結(jié)構(gòu)：建議將標簽平均分配在標簽欄中。

 

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

　　2.2.2 iOS 上的標簽排版
 

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

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

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

 

　　2.3 視覺分割
 

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

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

 

　　標簽欄毛玻璃效果
 

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

 

　　三、總結(jié)
 

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

　　標簽欄不論從視覺層面還是交互層面剖析，都有很多可以探索的點。我先從整體入手，由平臺規(guī)范切入，帶大家先了解標簽欄。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。