1、Tab的浸染
tab的浸染是为了做好内容分类，节省屏幕空间，等须要的时候更随意马虎被人找到!
试想一下，如果没有tab 给内容分类，所有的功能全部平铺展开，找起来多麻烦呀，就像衣柜的衣服没有分类，一堆乱糟糟的，是不是很影响出门速率呢!
2、Tab的分类
根据tab在界面中所处的位置我们可以把tab分为顶部栏tab、侧边栏tab和底部栏tab。
底部栏tab在前面文章中已经讲过了，感兴趣的小伙伴可以去UI底部Tab 栏设计总结 这篇文章看看。
侧边栏tab：侧边栏tab放在界面左边还是右边取决于tab标签与内容的关联性。
常见的是放在界面左边，如叮咚买菜， 你想找西红柿那么你得先找到蔬菜栏目，再去找西红柿。从上往下，从左到右，符合用户浏览习气。
但也有放在右边的，如QQ空间的日期tab，由于放在左边的话会挡住发布韶光和部分信息，影响阅读。而这个功能的利用场景便是用户想要看朋友某个月的动态内容，以是放在右侧更得当。
3、Tab的两种状态
以下内容都是针对顶部栏Tab来说的。
Tab可以分为选中状态和非选中状态，一样平常来说为了凸显选中状态，我们紧张处理方法有改变字色、放大色号、添加线条、增加背景色等。如下图所示：携程是用改变字色+添加色块的办法使选中状态更突出。美团外卖是通过改变字色+短线的办法来突出。
详细利用什么办法还要根据自己产品的特点来设计，没有统一的标准。那么可能有小伙伴就会问了，既然没有统一标准那就可以根据自己喜好来设计了?NO NO NO!!
下面总结了几种tab设计套路供大家参考，我们逐一来看：
加短线的tab样式
你们做设计时会不会纠结tab选中状态时小短线做多长得当呢?
短线有固定长度跟可变长度，我们先说固定长度的吧，这里总结了3种办法：
(1).小短线非常短，占一个字旁边宽的尺寸，如下图所示：
(2).小短线稍长一些，一样平常会比两个字宽几个像素，如下图所示：
(3).根据屏幕平分，这种样式可用于内容比较简洁的页面。
接下来是小短线长度可变的情形：
下图是豆瓣的书影音页面，UI设计中Tab设计指南https://www.aaa-cg.com.cn/ui/2591.html?gpf短线的长度会随笔墨的多少而变革，一样平常小短线的长度会比笔墨轻微宽几像素，详细看情形而定。
为什么同样都是tab，而短线有长有短，该怎么选择利用呢?这里供应一个思路供大家参考。
当页面内容比较多，可能会伴有其他图标等，小短线太长会使全体导航看着太满太挤。以是会选短一点的长度。
页面内容比较简洁，没有多余的信息和图标，小短线用长一点也没紧要，可以让页面更饱满，层级更清晰。
不过有时候大略的页面也会选择让小短线很短，使全体页面更加简洁清爽 ，以是很多时候并没有那么绝对，有合理的说法就行了。
说完了短线的长度我们来说说短线的粗细，小短线如果很短，一样平常就会轻微粗一点，由于本来就短，如果还那么细，是不是没有什么存在感。
小短线如果很长，一样平常就会轻微细一点，由于本来就长，如果还那么粗，是不是会让页面很臃肿。
两级tab样式
两级tab样式指有一个主导航，一个副导航。主导航一样平常会用线条样式，副导航会用色块样式。
由于线具有贯通整体的浸染，比较适宜用于展示层级较高的导航。而导航都是由上而下的，以是会优先考虑利用线条。然后层级较低的导航为了区分会利用背景色。由于色块的视觉权重比线条大一些，随意马虎分散用户的把稳力。而tab的浸染是为了让用户更方便的找到自己想要利用的功能，以是没有必要做的太显眼。如下图所示：
酷狗音乐的一级导航用了小短线的样式，二级导航用了色块标签，层次比拟明显。马蜂窝一级导航小短线结合自身产品品牌特色进行了设计，二级导航选中状态利用图标加笔墨颜色变革，同时下面线条样式也有变革，比较有新意。
分外样式Tab
还有一种tab类似网页的样式，用于功能性比较强的页面。
4、tab的利用举例
1、tab 可以分为固定和滑动2种样式，一样平常会根据内容多少决定利用什么样式。
tab项过多情形下用户可以滑动，但是有的情形下tab选项实在是太多了，这时候可以做成弹框切换的样式进行选择。如腾讯视频的处理办法：
2、tab的用色处理，一样平常会根据利用目的做不同区分。
如拉勾首页顶部tab并不是想勾引用户去点击，而是让用户根据自己的须要去切换选择，在页面优先级和主要程度上没有那么高，因此利用无彩色系的浅灰色和玄色来展现。
如下面右图我把颜色改为品牌色后，视觉上明显了很多，这样反倒对页面其他元素产生了很多滋扰，以是tab用色还是要根据利用场景来确定。
5、总结
最开始做tab时， 我以为样式随便设计一个就好了，哪须要考虑这么多呢，但当别人问为什么这样设计的时候，我就懵逼了!
我们剖析任何一个设计元素的终极目的都是为了更好的利用它。碰着问题，如果你没有十足的把握，就先剖析竞品，把所有能找的方案罗列出来进行归类总结，末了找到适宜我们产品的方案，这样在说设计思路的时候也有理有据了，不会被问的一脸懵。
好了，本日的分享就到这里了，欢迎大家留言谈论。因此，您现在已经理解了与UI设计师的事情干系的紧张技能。如果您想理解更多信息，请给我点个关注，我会连续发包含有关在该领域事情的更多干系文章。
