有朋友說讓我多寫點(diǎn)能增加工作經(jīng)驗(yàn)的啦膜，像上次《輸入框的細(xì)節(jié)》那種肪凛，于是想起去年研究的一個(gè)問題殴瘦，是關(guān)于Tab 的同诫，想不想聽？
管你想不想稽煤，反正就講它存淫！
不過在講之前我們先來科普下今天要講的東西是啥艾岂，看下圖：
每一個(gè)選項(xiàng)都是一個(gè)tab ，tab 的形式千千萬潭兽，但今天只講這種選中后下面帶橫線的倦始。（我們給這個(gè)橫線起個(gè)名字叫做小短線吧，下文都這么叫了哈Ｉ截浴）
今天的大綱如下：
1.tab是用來干嘛的
2.tab 的分類
3.幾種常見的小短線
4.小短線的注意事項(xiàng)一
5.小短線的注意事項(xiàng)二
1.tab是用來干嘛的
Tab 的中文名是標(biāo)簽的意思鞋邑，他是用來干嘛的呢，如果你用過ps账蓉，還記得軟件右邊的工具窗口嗎炫狱？如下圖：
上圖有庫、調(diào)整剔猿、樣式三個(gè)tab，為什么要設(shè)置這三個(gè)tab 呢嬉荆？
試想一下归敬，如果沒有tab 給它們分類，所有的小功能全部平鋪開鄙早，哪有地方放啊汪茧，找起來多麻煩！
所以通俗的來講tab就是為了做好分類限番，節(jié)省空間舱污，等需要的時(shí)候更容易找到！
你想想是不是這么回事弥虐！
2.tab 的兩種形式
但我們今天講的并不是ps里面的tab扩灯，而是app頁面中的tab，我們可以將其可分為兩種形式霜瘪，固定的tab與可滑動(dòng)的tab珠插。
固定的tab：
谷歌規(guī)范中規(guī)定：一組固定 tabs 至少包含 2 個(gè) tab 并且不多于 6 個(gè) tab，并且在一行內(nèi)顯示颖对。
可滑動(dòng)的tab：
這種tabs常見于新聞?lì)惖捻敳繉?dǎo)航捻撑，可以左右滑動(dòng)，由于tab個(gè)數(shù)比較多缤底，所以隱藏一部分顾患。
3.小短線到底定多長
了解了tab ，可以講今天的重點(diǎn)了个唧！
去年研究的問題就是：tab選中狀態(tài)時(shí)江解，小短線到底定多長。
我找了很多競品坑鱼，將所有的看到的方案都羅列了出來膘流，經(jīng)過分類后絮缅，發(fā)現(xiàn)大致可以分為兩大類，一類小短線固定長度呼股，一類小短線可變長度耕魄。
先說固定長度的吧，有以下3種方式：
1.小短線非常短
例如貓眼電影——電影模塊彭谁，小短線固定吸奴，且比文字短很多，大概只有30像素缠局。
2.平均等分
像映客的貢獻(xiàn)榜頁面则奥，有三個(gè)tab，每一個(gè)小短線的長度就是三分之一的屏幕寬度狭园。
3.除去兩邊邊距后平均等分
貓眼——我的訂單頁面读处，小短線的長度是先去掉兩邊間距，然后將中間部分平分唱矛。
接下來是小短線長度可變化的時(shí)候：
上圖是B站的番劇頁面罚舱，短線的長度會隨文字的多少變化而變化，一般小短線的長度會比文字稍微寬幾像素绎谦，具體看情況而定管闷。
這種方式會使頁面及切換效果比較舒服，缺點(diǎn)就是開發(fā)哥哥需要多些幾行代碼窃肠。
小短線的長度規(guī)則差不多就上面那幾種包个，我們可以根據(jù)具體的成本和場景選擇使用，但有一些共性的地方值得我們注意一下冤留，請繼續(xù)往下看吧碧囊！
4.注意事項(xiàng)一
小短線的長短其實(shí)并不是隨意使用的，我們看下圖：
我們看同樣是貓眼app里面的界面纤怒，一級導(dǎo)航的小短線很短呕臂，二級導(dǎo)航的小短線就很長。
還有很多app都是相同的規(guī)則肪跋，例如映客app：
這是為什么呢歧蒋？
大家可以先自己想想為什么會出現(xiàn)這樣的情況，然后再看我的分析州既。
我的分析如下：
一級導(dǎo)航會有其他圖標(biāo)谜洽，如果小短線太長會使整個(gè)導(dǎo)航看著太亂太復(fù)雜。
二級導(dǎo)航一般沒有多余的信息和圖標(biāo)吴叶，所以小短線用的長一點(diǎn)也沒關(guān)系阐虚，反而讓層級更清晰，頁面更飽滿蚌卤。
不過有時(shí)候二級導(dǎo)航也會選擇讓小短線很短实束，使整個(gè)頁面更加簡潔清爽奥秆，例如美團(tuán)的訂單頁面：
所以很多時(shí)候，事情并沒有那么絕對咸灿，有合理的說法就可以了构订！
你和我想的一樣不？
嗯避矢，一樣也不給你錢悼瘾！
5.注意事項(xiàng)二
看下圖，發(fā)現(xiàn)一個(gè)現(xiàn)象：
小短線如果很短审胸，一般就會稍微粗一點(diǎn)亥宿，比如6px，因?yàn)楸緛砭投躺芭妫€那么細(xì)烫扼，是不是....
小短線如果很長，一般就會稍微細(xì)一點(diǎn)碍庵，比如4px材蛛，因?yàn)楸緛砭烷L，還那么粗怎抛，是不是....
（想歪的同學(xué)請自覺右轉(zhuǎn)去面壁！）
總結(jié)
最開始遇到這個(gè)問題的時(shí)候芽淡，我覺得小短線隨便定一個(gè)不就好了马绝，哪來那么多講究，但是當(dāng)老板問我為什么這樣設(shè)計(jì)的時(shí)候挣菲，我就沒話了富稻！
所以每當(dāng)遇到問題的時(shí)候，如果你沒有十足的把握白胀，就先分析競品椭赋，把所有能找的方案羅列出來，然后進(jìn)行歸類或杠，最后看我們的情況適合用哪種方案哪怔，這樣在說設(shè)計(jì)思路的時(shí)候就可以有理有據(jù)，底氣十足了向抢！
科科认境！
