往期文章閱讀：

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)。

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

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

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的組件，今天就介紹到這里了。

新一期B端課程已經(jīng)開(kāi)課，課程和作品集輸出方式再次升級(jí)，有提升需要的同學(xué)快來(lái)！