|
什么是標(biāo)簽欄? 標(biāo)簽欄 (iOS) 與底部導(dǎo)航欄 (Android) 標(biāo)簽欄的名稱在iOS開發(fā)和設(shè)計(jì)中非常流行,在 android 中,它通常被稱為底部導(dǎo)航欄或?qū)Ш綑凇?/span> ![]() 標(biāo)簽欄與軌道導(dǎo)航 手機(jī)的標(biāo)簽欄位于屏幕底部靠近用戶拇指的位置,以便更好地觸及和使用,但在平板電腦和臺(tái)式機(jī)等大屏幕設(shè)備上,標(biāo)簽欄變成了導(dǎo)航欄,它提供了相同的功能,可以選擇更多的項(xiàng)目或標(biāo)簽。 ![]() 標(biāo)簽欄構(gòu)造 Tab bar 的構(gòu)造很簡(jiǎn)單,但是你需要了解它才能了解一些關(guān)于標(biāo)簽欄的知識(shí),所以標(biāo)簽欄的構(gòu)造包括:
![]() 標(biāo)簽欄的大小 當(dāng)設(shè)備為縱向和橫向時(shí),Android標(biāo)簽欄的首選大小是58px,以獲得更好的可用性。此外,元素之間應(yīng)該有相等的距離,這樣用戶就可以輕松地用拇指點(diǎn)擊。
iOS 使用點(diǎn)系統(tǒng),在縱向屏幕上的標(biāo)簽欄應(yīng)該是 49像素,而在橫向屏幕上,根據(jù)蘋果的指導(dǎo)方針,它應(yīng)該是32像素。 注意:不同的公司使用不同的標(biāo)簽欄高度,這取決于他們的應(yīng)用數(shù)據(jù)和功能,我上面討論的所有這些指導(dǎo)方針和大小都不是固定的,但它們可以為你提供更好的可用性起點(diǎn)。 ![]() 標(biāo)簽欄的類型 應(yīng)用程序設(shè)計(jì)中有多種類型的標(biāo)簽欄,其中兩種最流行的類型是靜態(tài)標(biāo)簽欄和動(dòng)態(tài)/響應(yīng)式標(biāo)簽欄。
靜態(tài)欄附在屏幕底部,當(dāng)我們?cè)谶x項(xiàng)卡之間切換和滾動(dòng)內(nèi)容時(shí),它永遠(yuǎn)不會(huì)離開它的位置。但是當(dāng)你在屏幕之間跳轉(zhuǎn)和滾動(dòng)瀏覽內(nèi)容時(shí),動(dòng)態(tài)/響應(yīng)欄會(huì)隱藏和移動(dòng)。 他們都有自己的用途,亞馬遜應(yīng)用程序,Airbnb 使用靜態(tài)欄,而Pinterest則是一個(gè)響應(yīng)欄。當(dāng)用戶滾動(dòng)內(nèi)容時(shí),響應(yīng)欄提供更多內(nèi)容。 標(biāo)簽欄靈感
對(duì)于應(yīng)用程序的標(biāo)簽欄設(shè)計(jì),我基本上從 2 個(gè)網(wǎng)站中獲得靈感。
標(biāo)簽欄最佳 Figma UI 套件 1. Adi Chakravarty 的終極底部導(dǎo)航欄組件
2. Alireza Rahmani 和 Ehsan Ezzati 的導(dǎo)航欄
|
|
|