为你增加工作经验——Tab的小短线

管你想不想，反正就讲它！

不过在讲之前我们先来科普下今天要讲的东西是啥，看下图：

今天的大纲如下：

2.tab 的分类

3.几种常见的小短线

4.小短线的注意事项一

5.小短线的休息事项二

试想一下，如果没有tab 给它们分类，所有的小功能全部平铺开，哪有地方放啊，找起来多麻烦！

所以通俗的来讲tab就是为了做好分类，节省空间，等需要的时候更容易找到！

你想想是不是这么回事！

固定的tab：

可滑动的tab：

去年研究的问题就是：tab选中状态时，小短线到底定多长。

先说固定长度的吧，有以下3种方式：

(1).小短线非常短

(2).平均等分

(3).除去两边页边距后平均等分

接下来是小短线长度可变化的时候：

这种方式会使页面及切换效果比较舒服，缺点就是开发哥哥需要多些几行代码。

小短线的长度规则差不多就上面那几种（可能会有遗漏的，不过这些已经够我们用了），我们可以根据具体的成本和场景选择使用，但有一些共性的地方值得我们注意一下，请继续往下看吧！

还有很多app都是相同的规则，例如映客app：

大家可以先自己想想为什么会出现这样的情况，然后再看我的分析。

.

.

.

.

我的分析如下：

一级导航会有其他图标，如果小短线太长会使整个导航看着太乱太复杂。

二级导航一般没有多余的信息和图标，所以小短线用的长一点也没关系，反而让层级更清晰，页面更饱满。

不过有时候二级导航也会选择让小短线很短，使整个页面更加简洁清爽，例如美团的订单页面：

嗯，一样也不给你钱！

小短线如果很长，一般就会稍微细一点，比如4px，因为本来就长，如果还那么粗，是不是….

（想歪的同学请自觉出门右转去面壁！）

所以遇到问题，如果你没有十足的把握，就先分析竞品，把所有能找的方案罗列出来，然后进行归类，最后看我们的情况适合用哪种方案，这样在说设计思路的时候就可以有理有据，底气十足了！