幾何

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

作為一名無產階級打工仔,有時候我們的職能可能并不允許我們直接地參與到公司的產品戰略、范圍和結構定義。但畢竟身為戰斗在產品前線的一員,不論你是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 人機交互規范告訴產品設計者們:標簽欄雖然可以包含任意數量的標簽,但可見標簽的數量會根據設備的大?。ㄆ桨寤蚴謾C)和方向(豎屏或橫屏)而自適應變化。如果由于水平空間有限而無法顯示某些標簽時,最后的一個可見標簽將被會被系統強行轉換為“更多”選項,需要用戶點擊“更多”選項之后,系統才將在單獨屏幕上的列表中顯示其他被隱藏的標簽。

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

 

2.2 標簽排版

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

 

2.2.1 Android 上的標簽排版

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

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

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

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

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

 

2.2.2 iOS 上的標簽排版

iOS 在標簽排版上的規范相對統一。在移動設備縱向模式下始終采用“圖標+標簽文字”上下結構形式;橫向模式下始終采用“圖標+標簽文字”左右結構形式。不會像Material Design 那樣,需要根據不同的標簽數量發生標簽文字顯隱變化。

 

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

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

 

2.3 視覺分割

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

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

標簽欄毛玻璃效果

 

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

 

三、總結

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

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

下方可下載我在工作中整理的標簽欄組件 Symbol,自用或協同的效率好幫手~

提取碼:isum

 

原文地址:UCD耍家(公眾號)

作者:Howie_t

 

轉載請注明:學UI網 » 耍好控件 | 沒弄懂標簽欄之前,先不談用戶體驗

登錄收藏
 
你可能喜歡的:
【經驗】B端后臺產品UI設計小結【經驗】B端后臺產品UI設計小結
「設計思考」做B端的一種思考方式「設計思考」做B端的一種思考方式
小公司沒人帶如何提升自己,我是這樣做的!小公司沒人帶如何提升自己,我是這樣做的!
【項目分享】一刻相冊-從0-1設計背后的故事【項目分享】一刻相冊-從0-1設計背后的故事
適配深色模式,你還沒用變量庫?適配深色模式,你還沒用變量庫?
用心思考從C端到B端的情感化設計方法和學習企業級產品的設計語言用心思考從C端到B端的情感化設計方法和學習企業級產品的設計語言
深耕“用戶界面”(下篇)- 界面設計科學化內容傳達深耕“用戶界面”(下篇)- 界面設計科學化內容傳達
為什么交互設計能幫助產品解決問題為什么交互設計能幫助產品解決問題
淺談-APP缺省頁情感化的設計技巧淺談-APP缺省頁情感化的設計技巧
編寫錯誤提示的11個小技巧編寫錯誤提示的11個小技巧
?
天津十一选五app