一、組件介紹

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

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

由此可知，在 Tab bars 中使用 3-5 個選項是合理的，更少或更多的選項則應該考慮其他的組件形式，或是重構 App 的功能結構。

二、使用場景

與其說 Tab bars 有什么使用場景，倒不如說它有什么可以不使用的場景。Tab bars 是一個非常泛用的組件，以至于，除非你有對 App 有自己的理解，或者 App 的功能極為專精沒有頂層頁面劃分的需求，否則絕大多數時候都可以使用它。

有 Tab bars 的應用

無 Tab bars 的應用

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

三、設計要點

1.分布邏輯

基礎的 Tab bars 通常采用等分的布局邏輯，不管有幾個 Tab，視圖都是對于全寬度等分的，而圖標和文本則在視圖中居中對齊。

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

2. Tab 內容

①圖標+文本

這種是比較常見的，Tab bars 的圖標可以做得比較偏視覺，對信息傳達形成一定的阻礙，這時候使用文本的補充說明能夠明確圖標的含義。

②純圖標

使用純圖標有一定的潛在條件，即：確保圖標表意清晰。為了滿足這個潛在條件，大部份使用純圖標的 Tab bars 不會使用視覺元素特別復雜的圖標類型，而是力求簡潔、明確。

③純文本

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

3. 高亮的形式

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

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

很多同學做 Tab bars 時找圖標，做樣式，費盡心思做得特立獨行，卻在最基礎的對比上付之闕如，這顯然有些本末倒置了。

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

①色彩填充

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

②強調指示線

有些 App 還會在選項區(qū)域內添加一條強調用的指示線，可以其他方式結合。這種做法多見于純圖標和純文本的 Tab bars，圖標+文本的再添加一條提示線就有些沒必要 (比如 bing 這個)。

③視覺反差

對高亮選項的圖標細化視覺特征，例如：漸變、陰影、插圖化、3D 化、毛玻璃化等等，適合對圖標繪制比較有經驗的同學。

④切換圖形

將圖標整個替換為與原來不相干的圖形，通常來說只會應用在有限的兩個 Tab 上，如：將首頁替換為 App logo，或是將首頁替換為其他功能按鈕比如「回到頂部」和「刷新」，又或者將「我的」替換為用戶頭像等等。

⑤背景高亮

給高亮的選項一個可視的背景，在實際應用中應比較謹慎地使用。這種強調有些過于強烈了，尤其是配合前兩種，背景的加入可能會奪取用戶的注意力。

4. 不一樣的 Tab bars

盡管蘋果給出了通用的 Tab bars 樣式，但你依然可以專門設計自己的 Tab bars，讓你的 App 更具風格。

①馬蜂窩

沒錯又是馬蜂窩，每次聊組件都有它，是因為馬蜂窩不管在哪個組件上，設計多別出心裁

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

②閑魚/知乎

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

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

③Endel

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

④多鄰國/ibetter

而像多鄰國這樣的，將 App 類游戲化設計的產品，則會在 Tab bars 引入更有趣、更卡通的設計。

四、樣式拓展

這里收集了一些 Tab bars 的線上案例，也可以作為設計時的參考：

結尾

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

作者：超人的電話亭