一、組件介紹

Tab bars，是從屬于 iOS 所規(guī)定的幾種 App 全局組件之一，絕大多數(shù) App 都遵從于 iOS 的交互規(guī)范，使用 Tab bars 來(lái)劃分最頂層的功能頁(yè)面，這種廣泛性也反過(guò)來(lái)塑造了用戶對(duì)不同 App 統(tǒng)一的使用習(xí)慣。

針對(duì)這個(gè)組件，iOS 官方給出了分別針對(duì) 3 tabs、4 tabs 和 5 tabs 的通用模版。

由此可知，在 Tab bars 中使用 3-5 個(gè)選項(xiàng)是合理的，更少或更多的選項(xiàng)則應(yīng)該考慮其他的組件形式，或是重構(gòu) App 的功能結(jié)構(gòu)。

二、使用場(chǎng)景

與其說(shuō) Tab bars 有什么使用場(chǎng)景，倒不如說(shuō)它有什么可以不使用的場(chǎng)景。Tab bars 是一個(gè)非常泛用的組件，以至于，除非你有對(duì) App 有自己的理解，或者 App 的功能極為專精沒(méi)有頂層頁(yè)面劃分的需求，否則絕大多數(shù)時(shí)候都可以使用它。

有 Tab bars 的應(yīng)用

無(wú) Tab bars 的應(yīng)用

在 App 內(nèi)部的頁(yè)面中，Tab bars 通常只會(huì)出現(xiàn)在一級(jí)頁(yè)面上，二級(jí)頁(yè)面則視本身的情況在決定要不要使用，大部份情況是不加的。

三、設(shè)計(jì)要點(diǎn)

1.分布邏輯

基礎(chǔ)的 Tab bars 通常采用等分的布局邏輯，不管有幾個(gè) Tab，視圖都是對(duì)于全寬度等分的，而圖標(biāo)和文本則在視圖中居中對(duì)齊。

但有一些比較特殊的 Tab bars，中間會(huì)出現(xiàn)不同的按鈕樣式，比如最常見(jiàn)的「發(fā)布按鈕」，出現(xiàn)這種按鈕時(shí)如果依然使用均分，視覺(jué)上會(huì)有些不大協(xié)調(diào)，這時(shí)候就需要調(diào)整視圖的寬度，以達(dá)到一個(gè)視覺(jué)平衡的值。

2. Tab 內(nèi)容

①圖標(biāo)+文本

這種是比較常見(jiàn)的，Tab bars 的圖標(biāo)可以做得比較偏視覺(jué)，對(duì)信息傳達(dá)形成一定的阻礙，這時(shí)候使用文本的補(bǔ)充說(shuō)明能夠明確圖標(biāo)的含義。

②純圖標(biāo)

使用純圖標(biāo)有一定的潛在條件，即：確保圖標(biāo)表意清晰。為了滿足這個(gè)潛在條件，大部份使用純圖標(biāo)的 Tab bars 不會(huì)使用視覺(jué)元素特別復(fù)雜的圖標(biāo)類型，而是力求簡(jiǎn)潔、明確。

③純文本

在少數(shù)內(nèi)容權(quán)重很高的 App 中，我們可能還會(huì)看到只用文本的 Tab bars 樣式，例如小紅書(shū)、抖音。這類 App 這么做的目的，是防止 Tab bars 圖標(biāo)干擾用戶瀏覽內(nèi)容，如果你也有此類需求，則可以考慮純文本的 Tab bars。

3. 高亮的形式

不管是何種內(nèi)容類型，選中 Tab 和未選中 Tab 都要做到非常明確清晰的對(duì)比。

表達(dá)用戶目前正處于哪個(gè)頁(yè)面是 Tab bars 的意義之一，如果對(duì)比做得不夠清晰，則完全喪失了組件本應(yīng)達(dá)到的目的。

很多同學(xué)做 Tab bars 時(shí)找圖標(biāo)，做樣式，費(fèi)盡心思做得特立獨(dú)行，卻在最基礎(chǔ)的對(duì)比上付之闕如，這顯然有些本末倒置了。

在高亮的形式上，普遍有以下幾種做法。

①色彩填充

顧名思義，給高亮選項(xiàng)的圖標(biāo)進(jìn)行色彩填充，其余則保持中性色 (面性或線性都可)。所填充的色彩既可以使用主色，也可是加深的中性色，具體如何選擇取決于 1、主色是否足夠醒目，是的話可以選擇填充主色；2、是否想要削弱 Tab bars 的存在感，是的話可使用加深的中性色；3、Tab bars 是否已經(jīng)存在其他使用主色的控件，是的話選擇填充中性色。

②強(qiáng)調(diào)指示線

有些 App 還會(huì)在選項(xiàng)區(qū)域內(nèi)添加一條強(qiáng)調(diào)用的指示線，可以其他方式結(jié)合。這種做法多見(jiàn)于純圖標(biāo)和純文本的 Tab bars，圖標(biāo)+文本的再添加一條提示線就有些沒(méi)必要 (比如 bing 這個(gè))。

③視覺(jué)反差

對(duì)高亮選項(xiàng)的圖標(biāo)細(xì)化視覺(jué)特征，例如：漸變、陰影、插圖化、3D 化、毛玻璃化等等，適合對(duì)圖標(biāo)繪制比較有經(jīng)驗(yàn)的同學(xué)。

④切換圖形

將圖標(biāo)整個(gè)替換為與原來(lái)不相干的圖形，通常來(lái)說(shuō)只會(huì)應(yīng)用在有限的兩個(gè) Tab 上，如：將首頁(yè)替換為 App logo，或是將首頁(yè)替換為其他功能按鈕比如「回到頂部」和「刷新」，又或者將「我的」替換為用戶頭像等等。

⑤背景高亮

給高亮的選項(xiàng)一個(gè)可視的背景，在實(shí)際應(yīng)用中應(yīng)比較謹(jǐn)慎地使用。這種強(qiáng)調(diào)有些過(guò)于強(qiáng)烈了，尤其是配合前兩種，背景的加入可能會(huì)奪取用戶的注意力。

4. 不一樣的 Tab bars

盡管蘋(píng)果給出了通用的 Tab bars 樣式，但你依然可以專門(mén)設(shè)計(jì)自己的 Tab bars，讓你的 App 更具風(fēng)格。

①馬蜂窩

沒(méi)錯(cuò)又是馬蜂窩，每次聊組件都有它，是因?yàn)轳R蜂窩不管在哪個(gè)組件上，設(shè)計(jì)多別出心裁

僅論 Tab bars，馬蜂窩使用了毛玻璃、懸浮式的模塊，在滑動(dòng)的過(guò)程中還可以收起不必要的展示，把更多的空間留給內(nèi)容。

②閑魚(yú)/知乎

閑魚(yú)比較不一樣的地方在于中間的發(fā)布按鈕，是很多同學(xué)會(huì)考慮使用的「部分超出范圍」的做法。

但很多同學(xué)不知道該如何把控「超出的度」以及中間按鈕和周圍按鈕的位置，導(dǎo)致按鈕的比例非常奇怪。這里給一個(gè)可行的方案：中間的按鈕超出不宜過(guò)多，4pt 左右即可，周圍圖標(biāo)與中間的按鈕垂直居中對(duì)齊，文字置于圖標(biāo)下方。

③Endel

Endel 就比較有意思了，把 Tab bars 做成了分頁(yè)器 (一種控件) 的樣式，這樣做的好處是可以把選項(xiàng)增加到 5 項(xiàng)以上，多出的選項(xiàng)甚至能左右滑動(dòng)，但因?yàn)檩^弱的視覺(jué)特征，只適合用在功能比較簡(jiǎn)單、專一的工具類 App 里。

④多鄰國(guó)/ibetter

而像多鄰國(guó)這樣的，將 App 類游戲化設(shè)計(jì)的產(chǎn)品，則會(huì)在 Tab bars 引入更有趣、更卡通的設(shè)計(jì)。

四、樣式拓展

這里收集了一些 Tab bars 的線上案例，也可以作為設(shè)計(jì)時(shí)的參考：

結(jié)尾

Tab bars 的組件，今天就介紹到這里了。

作者：超人的電話亭