定義
底部導(dǎo)航欄可以實(shí)現(xiàn)一個(gè)?app?中不同功能的快速切換阁簸。通常情況下底部導(dǎo)航欄是半透明或者磨砂半透明的,可以看到背景的一些色彩氯夷。當(dāng)鍵盤(pán)彈出時(shí)會(huì)隱藏。
底部導(dǎo)航欄包括多個(gè)標(biāo)簽靶擦,在蘋(píng)果系統(tǒng)中腮考,標(biāo)簽顯示數(shù)量取決于設(shè)備的尺寸和規(guī)范,當(dāng)一些標(biāo)簽因?yàn)閷挾认拗撇荒鼙伙@示的時(shí)候玄捕,最后一項(xiàng)會(huì)變成「更多」踩蔚,其中用分屏的形式用列表顯示更多標(biāo)簽。
通常情況下桩盲,在應(yīng)用程序的層級(jí)上去使用底部導(dǎo)航欄以組織信息寂纪。一方面,底部導(dǎo)航欄對(duì)于展示?app?信息的層級(jí)是非常有效率的方法;另一方面可以實(shí)現(xiàn)不同功能分類(lèi)之間的快速切換捞蛋。
使用規(guī)范
嚴(yán)謹(jǐn)使用底部導(dǎo)航欄孝冒。底部導(dǎo)航欄通常情況下不要加入交互動(dòng)作,如果需要在當(dāng)前視圖加入交互控制元素拟杉,請(qǐng)使用工具欄庄涡。查看工具欄。
避免使用過(guò)多標(biāo)簽搬设。過(guò)多的標(biāo)簽會(huì)減少標(biāo)簽之間的間距穴店,使整個(gè)底部導(dǎo)航欄變得復(fù)雜不易操作。雖然「更多」標(biāo)簽可以顯示額外的標(biāo)簽拿穴,但其需要額外的頁(yè)面泣洞,所以也不是很好的展示方式。所以默色,請(qǐng)保留最主要的標(biāo)簽球凰,并且使用最小的標(biāo)簽去展示。
過(guò)少的標(biāo)簽也會(huì)造成問(wèn)題腿宰。因?yàn)闀?huì)讓人覺(jué)得功能之間沒(méi)有聯(lián)系呕诉。通常情況下3-5個(gè)標(biāo)簽較為適合。平板設(shè)備吃度、手表甩挫、網(wǎng)頁(yè)則根據(jù)實(shí)際寬度情況適度縮闊范圍。
當(dāng)用戶(hù)通過(guò)底部導(dǎo)航欄前往不同頁(yè)面的時(shí)候椿每,不要自動(dòng)隱藏底部導(dǎo)航欄伊者。底部導(dǎo)航欄提供全局導(dǎo)航,所以其應(yīng)該在任何情況下保持可視拖刃。但特殊情況下——例如全屏顯示删壮、沉浸式閱讀——可以短暫隱藏贪绘,但請(qǐng)保證它可以被輕易呼出(例如向上滾動(dòng))兑牡。因?yàn)檫@些特殊情況提供給用戶(hù)一種沉浸的體驗(yàn),以至于會(huì)忽視其他元素税灌。
當(dāng)?shù)撞繉?dǎo)航欄的功能不可用時(shí)均函,不要將其隱藏。如果因?yàn)槟承┰驅(qū)Ш綑诘墓δ苣承顩r下不可用菱涤,界面將會(huì)變得不穩(wěn)定苞也、不受信。確保底部導(dǎo)航欄的所有功能在任何情況下可用粘秆,然后用禮貌的方式向用戶(hù)解釋為什么一些功能目前不可使用如迟。例如,如果你的設(shè)備中沒(méi)有音樂(lè),那么「Music」 程序的「My Music」 標(biāo)簽則會(huì)解釋「如何去下載音樂(lè)」殷勘。再比如當(dāng)一些功能需要登錄才可以使用時(shí)此再,向用戶(hù)解釋這個(gè)功能為什么需要登錄,并引導(dǎo)登錄入口的位置玲销。(而不是直接彈出登錄框填寫(xiě)私人信息输拇。)
請(qǐng)一直保持導(dǎo)航欄在固定位置。例如贤斜,請(qǐng)不要當(dāng)導(dǎo)航欄在一個(gè)頁(yè)面出現(xiàn)在左邊策吠,在另一個(gè)頁(yè)面突然跑到了右邊。
保證標(biāo)簽?ICON?在視覺(jué)構(gòu)成上統(tǒng)一瘩绒、平衡猴抹。
使用「徽標(biāo)」來(lái)實(shí)現(xiàn)弱溝通。在底部導(dǎo)航欄的標(biāo)簽上使用徽標(biāo)锁荔,以示該標(biāo)簽下的頁(yè)面的新信息洽糟。Badge/通知徽標(biāo)/小紅點(diǎn)/Notice point?。
TIP
嚴(yán)格區(qū)分底部導(dǎo)航欄和工具欄堕战。底部導(dǎo)航欄目的是讓用戶(hù)方便在一個(gè)應(yīng)用程序的不同功能之間快速切換坤溃;工具欄則是列出了在一個(gè)功能中進(jìn)行操控的一些工具。一般而言底部導(dǎo)航欄和工具欄不會(huì)同時(shí)出現(xiàn)在一個(gè)應(yīng)用程序中嘱丢。
滿(mǎn)足個(gè)性化場(chǎng)景
純文字的頁(yè)面底部導(dǎo)航欄薪介。
背景半透明的底部導(dǎo)航欄和毛玻璃底部導(dǎo)航欄。底部導(dǎo)航欄一般以矩形的形式固定在頁(yè)面的下方越驻,加入半透明的元素或毛玻璃的質(zhì)感以顯示頁(yè)面主體部分的內(nèi)容汁政,可以有效地提升頁(yè)面的沉浸感和變化感。
只有?icon 的 TabBar记劈。在普通的icon+文字的標(biāo)簽中加入只有 icon 的標(biāo)簽可以有效的發(fā)揮「特異」的構(gòu)成效果。通常在每一個(gè) APP 的底部導(dǎo)航欄中只存在一個(gè)并巍,以顯示整個(gè)應(yīng)用程序最核心最常用的功能目木。其由于沒(méi)有文字描述,所以要求 icon 本身的語(yǔ)義表達(dá)更為精準(zhǔn)和沒(méi)有歧義懊渡。
頂部帶有半圓的?TabBar剃执。?使標(biāo)簽文字區(qū)域統(tǒng)一誓禁,同時(shí)放大主要標(biāo)簽的 icon 部分以起到和前者 描述同樣的強(qiáng)調(diào)效果。
帶有背景色的?TabBar摹恰。?當(dāng)一些重要節(jié)日到來(lái)辫继,需要我們?cè)诘撞繉?dǎo)航來(lái)加一些絢麗的效果時(shí),我們可以加入背景圖片俗慈,使其更充滿(mǎn)節(jié)日氣息骇两。
舍棄矩形框的圓角?TabBar。?一些 app 為了突出沉浸式的閱讀模式姜盈,舍棄了固有的矩形框低千,使用懸浮式的圓角矩形 TabBar 或圓形分割式 TabBar。
小結(jié)
在基礎(chǔ)的TabBar 上馏颂,目前的底部導(dǎo)航欄已經(jīng)逐漸在向「沉浸式」示血、「極簡(jiǎn)」的方向發(fā)展。越來(lái)越增加圖形元素在語(yǔ)義符號(hào)中的比重救拉。
純文字的頁(yè)面指示器难审。頁(yè)面指示器僅在視覺(jué)上是一個(gè)點(diǎn),而不會(huì)限制其形狀亿絮。