什么是標(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)航欄