控件集——Tab Bars/Tabber/底部導(dǎo)航欄/標(biāo)簽欄

定義

底部導(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)之間的快速切換捞蛋。

不同?app?的底部導(dǎo)航欄


使用規(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è)面的沉浸感和變化感。

Iphone-Album 的底部導(dǎo)航欄缀旁。

只有?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)有歧義懊渡。

上方為?zcool 的底部導(dǎo)航欄刽射,下方為阿里巴巴系列產(chǎn)品的底部導(dǎo)航欄。

頂部帶有半圓的?TabBar剃执。?使標(biāo)簽文字區(qū)域統(tǒng)一誓禁,同時(shí)放大主要標(biāo)簽的 icon 部分以起到和前者 描述同樣的強(qiáng)調(diào)效果。

閑魚(yú)?app 的底部導(dǎ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ì)限制其形狀亿絮。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末告喊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子派昧,更是在濱河造成了極大的恐慌黔姜,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蒂萎,死亡現(xiàn)場(chǎng)離奇詭異秆吵,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)五慈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門(mén)纳寂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人泻拦,你說(shuō)我怎么就攤上這事毙芜。” “怎么了争拐?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵腋粥,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我陆错,道長(zhǎng)灯抛,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任音瓷,我火速辦了婚禮,結(jié)果婚禮上夹抗,老公的妹妹穿的比我還像新娘绳慎。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布杏愤。 她就那樣靜靜地躺著靡砌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪珊楼。 梳的紋絲不亂的頭發(fā)上通殃,一...
    開(kāi)封第一講書(shū)人閱讀 49,760評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音厕宗,去河邊找鬼画舌。 笑死,一個(gè)胖子當(dāng)著我的面吹牛已慢,可吹牛的內(nèi)容都是我干的曲聂。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼佑惠,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼朋腋!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起膜楷,我...
    開(kāi)封第一講書(shū)人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤旭咽,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后赌厅,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體轻专,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年察蹲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了请垛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡洽议,死狀恐怖宗收,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情亚兄,我是刑警寧澤混稽,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站审胚,受9級(jí)特大地震影響匈勋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜膳叨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一洽洁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧菲嘴,春花似錦饿自、人聲如沸汰翠。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)复唤。三九已至,卻和暖如春烛卧,著一層夾襖步出監(jiān)牢的瞬間佛纫,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工总放, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留呈宇,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓间聊,卻偏偏與公主長(zhǎng)得像攒盈,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子哎榴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348