頂部tab是我們在設(shè)計APP時最常用到的組件，資訊、購物、教育、音樂、視頻等各種類型的APP中都可以看見它小小的身影，雖然它占據(jù)的頁面空間不大，但是卻在界面中卻發(fā)揮了很大的作用，本次分享簡單整理一下目前最常用的Tab種類，著重分析tab指示的設(shè)計思路、常用樣式及其他價值。

一. 為什么會有tab指示

界面在呈現(xiàn)非單一維度的資源時，為了讓用戶可以快速找到目標資源，會按照不同的維度將資源進行分類，比如視頻類APP的資源類型有熱點、電影、電視劇、綜藝等等，用戶在不同類型的資源中進行切換的時候，為了防止用戶迷失其中，就需要用一個比較明顯的樣式區(qū)分當前tab和其他tab，以便用戶可以清晰定位自己所在位置。

二. 頂部tab的種類

在展示現(xiàn)有的tab指示之前，我們先來簡單了解一下tab的種類，以便我們可以根據(jù)不同種類的tab給出不同的指示樣式。1. 純文字tab這是最常見的tab類型，資訊、音樂、視頻、社交等內(nèi)容呈現(xiàn)為主的APP基本都是這種表現(xiàn)形式

2.文字+圖標型tab

這種類型的tab常用在購物類APP中，電商、外賣APP中常見

三. 頂部tab指示設(shè)計思路

通過了解tab的種類我們可以發(fā)現(xiàn)，兩者合起來看也就2個元素，一個是文字，一個是圖形，那我們先來看看這兩個元素想要做出不同會有哪些形式：1. 文字不同文字之間要想做出差異性，主要有三種途徑，一是字號大小不同，二是字重不同，三是顏色不同

2. 圖形

圖形結(jié)構(gòu)要想做出差異性，主要也是兩種途徑，一是顏色的不同，二是圖形結(jié)構(gòu)的不同（線面切換）

當然你也可能想說還可以做大小的不同，這種想法在設(shè)計中是很常用的手段，但是在頂部tab這個小小的空間內(nèi)就不太適合了，因為用戶更多關(guān)注的還是文字內(nèi)容，圖標只是起到輔助說明的作用，不應(yīng)該在這里搶主角的風頭，同時這個小小的空間也不適合做這么復(fù)雜的變化。

3. 引入第三者

tab本身的元素已經(jīng)能做出差異，但是為了讓這種差異更明顯一點，我們在界面設(shè)計中通常還會引導(dǎo)第三者，一個簡單的圖形放在文字的周圍，輔助進行定位說明。根據(jù)通用和特色可以分為兩種形式：一種是小橫線提示，二是體現(xiàn)產(chǎn)品品牌特征的元素

以上是設(shè)計tab指示最基本的思路，這些設(shè)計思路可以單獨展示，也可以和其他類型搭配進行展示，下面我們就具體它們在界面中都是怎樣呈現(xiàn)的。

四. 頂部tab指示類型展示

1. 文字顏色不同

要做出文字顏色的不同主要有兩種方式：

• 常規(guī)的tab用黑色的文字，當前指示的tab用品牌色做指示
• 常規(guī)tab用灰色的文字，當前指示的tab用黑色的文字

2. 字重不同

從下圖中的例子我們可以看到字重的改變通常不是單獨出現(xiàn)，而常常會與顏色、字號等變化一起搭配使用。

3. 字號大小不同

字號大小不同也經(jīng)常伴隨著顏色、字重的不同，或者引入第三者。

4. 圖形不同

tab上的圖形不同主要還是在線面的區(qū)分上，當前狀態(tài)為面形圖標

5. 小橫線指示

小橫線常用表現(xiàn)形式

• 一種是黑色的橫線，通常底部工具來的圖標切換也是黑色的，沒有品牌屬性；

eg.人人都是產(chǎn)品經(jīng)理整個首頁都沒有顏色傾向，給人營造一種沉浸式的閱讀體驗，所以tab指示也用了黑色，與整體的風格相匹配。

• 一種是品牌顏色的橫線；

作者：小火焰?? 轉(zhuǎn)自微信公眾號：海鹽社