App设计体系之标签栏

1、定义

标签栏的位置在App底部，提供多个标签快速切换，以不同样式作为区分来告知用户当前所在标签页，标签个数为2～5个。

2、标签布局

布局样式有常规布局和鸵式布局

2.1 常规布局

2.2 鸵式布局

和常规布局不同的是，中间的标签icon更为突出，可以像闲鱼中的“发布”一样，“溢出”标签栏。

3、展示方式

3.1 文字

为了避免单纯文字所造成的视觉效果弱，可以加上其他辅助标识，比如在文字下方加下划线。

3.2 图标

没有文字的说明，对图标的辨识度要求较高，需要让用户只看图标就能明白其涵义是什么。

3.3 文字+图标

大多数App使用这种常规方式

4、图标样式

4.1 线

常见的线性图标有2px、3px、4px的描边。

4.2 面

4.3 线+面

4.4 拟物

如今扁平风格的时代，较少使用轻拟物图标，可以在游戏类和儿童类的产品中运用。

4.5 活动图标

活动时的标签栏图标需要和banner、金刚区的图标形成统一风格。

5、实际应用

5.1 超出标签栏

图标不必只局限在标签栏区域，也可以适当延伸到标签栏外。

5.2 做推广 

爱奇艺的“庆余年-VIP会员”达到了很好的推广效果

5.3 品牌效应

不同于常规的首页图标，而是使用logo作为首页的标签图标，增强品牌效应。

5.4 返回顶部

上拉首页时，首页图标就变成返回顶部。

5.5 丰富细节

如果标签栏的图标足够简约，可以在选中状态的图标添加其他元素，既能更好的区分图标状态，又能增强视觉效果。