今天跟大家聊聊底部tab栏的常见设计样式，文章将从以下4点展开：

1、tab栏常见布局样式

2、背景颜色

3、标签展现方式

4、图标样式

一、tab栏的布局样式

一般根据标签数量多少决定，标签数量在3-5个之间是比较合适的。这里总结了3中常见的布局方式：1屏幕等分、2减去左右间距后等分、3图标左右间距相等。

 

1、屏幕等分

技术实现比较简单，市面上使用比较多的样式。计算方法：列宽=屏幕宽度/标签个数。

2、减去左右间距后等分

标签之间相对紧凑。如下图所示

3、图标左右间距相等

多用在标签数量为3个的情况，因为用屏幕等分方式图标看起来会比较散，所以可以采用这种方法。

4、其他布局

有些特殊情况，标签数量会大于5个，如果继续放在一起会降低视觉美观度和操作体验。那么该怎么办呢？如果根据产品需要必须置于底部，可以选择将重要标签露出，其他标签放更多里面。

二、背景样式

这里总结了4种常见的背景样式：1白色或浅灰 、2黑色  、 3毛玻璃 、  4透明背景

1、白色或浅灰

最为常见的背景样式，它能够更好的突出标签内容，同时不会让底部显得过重。可以使用白色加投影或者底部加浅灰色分隔线的方式将其和内容区分开。

 

2、黑色

黑色背景往往用于一些特殊类型的APP，如运动、股票等，渲染氛围。

3、毛玻璃

在前2年比较流行，多用在IOS中，给人时尚的感觉，不过会耗费大量资源，目前使用的比较少。

4、透明背景

采用透明背景，可以让用户视觉更聚焦于内容本身。但这种方式会导致标签信息展示较弱，所以透明背景多用在内容为主的APP中，如抖音。

三、展现方式

这里收集了4种常见的标签展示方式：1图标+文字、2纯图标、3图标+文字+驼式按钮、4纯文字

1、图标+文字

最常见的标签展示样式，用图标吸引人的眼球，配合文字说明，更能凸显图标标签栏。如下图所示：

2、纯图标

采用纯图标样式比较简洁，但识别性较低，一般适用于小众产品中，如花瓣、Pinterest，这2个产品是设计分享类平台，用户群体比较小众且目标用户是互联网从业人员，对这些图标含义较为熟悉，采用这种方式会显得产品比较有气质。

3、图标+文字+驼式按钮

这种标签栏样式常见于社区类APP中，采用驼式按钮来突出功能点，引导用户发布内容。

如闲鱼PP，点击加号按钮就可发布闲置，调动用户积极性。

4、纯文字

采用这种方式能够更直观的让用户进行操作，遵循简单易用的原则。但样式比较单一，适合用户群体跨度较大但产品，多用于直播类、内容类、简单工具类APP中，例如小红书、百度翻译。

四、图标样式

在产品设计中，不同样式的图标会给人不同的感受，这里我收集了6种常见的图标样式。

1、线性

常见的线性图标有2px 、3px、4px的描边。选中效果可以是线性高亮或面性高亮，适用于时尚类、精细类APP中。

以淘宝APP为例：采用2px的图标显得比较精细，可以表现更多细节。轻巧简练，不会对界面产生太大的视觉干扰，容易给人精致时尚的感觉，但识别性较低。

采用3px的图标从识别性和表现性来说比较适中，适合用户跨度较大的产品。

采用4px的图标相对更加厚重，需要注意线条不易过于复杂，不然会降低图标识别性。采用较为流行的色块叠加效果会让整个图标更年轻潮流，如马蜂窝APP。

2、面性

面性图标相比线性更加稳重，在默认状态多采用浅灰色展示，采用面性图标比较符合产品稳定的气质。

3、线性+面性高亮

一般用于选中状态中，线性描边+颜色填充（颜色较亮）体现活泼的品牌调性。加入小元素或断线处理可使图标更有风格。

 

4、轻拟物

在游戏类和儿童类等年轻化产品中使用较多，拟物形象对儿童来说更易理解。

5、节日图标

春节采用红灯笼、端午采用粽子等元素图标来突出氛围，赋予产品温度。

6、微交互

微交互常常用于选中效果中，运用情感化设计让人们在使用过程中产生乐趣从而增加用户体验。表现和识别性都比较好。

常见的动画效果有：小变大、旋转、跳动、小元素变化、背景板+小元素动画+放大、异形等。