旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

時(shí)間:2020-09-23來源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-09-23點(diǎn)擊量:作者:Gella

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

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

  一、標(biāo)簽欄是什么?
 

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

 

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

 

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

 

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

 

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

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

  2.1 標(biāo)簽數(shù)量
 

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

  為了讓標(biāo)簽欄表現(xiàn)清晰,兩個(gè)平臺在規(guī)范里都對標(biāo)簽數(shù)量都給出了相同的建議:建議標(biāo)簽欄內(nèi)的標(biāo)簽個(gè)數(shù)為3個(gè)至5個(gè)。因?yàn)闃?biāo)簽過多,一是會增加產(chǎn)品結(jié)構(gòu)的復(fù)雜性;二是會使每一個(gè)單元標(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)簽時(shí),最后的一個(gè)可見標(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ù)雜的時(shí)候,建議你可以嘗試使用分頁標(biāo)簽或者導(dǎo)航抽屜等其他展現(xiàn)形式。
 

  2.2 標(biāo)簽排版
 

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

 

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

 

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

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

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

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

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

 

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

 

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

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

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

 

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

 

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

  2.2.2 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)注分別見以下圖:

 

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

  2.3 視覺分割
 

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

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

 

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

 

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

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

 

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

 

  三、總結(jié)
 

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

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

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



 

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖