2017-7-10 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
有朋友說讓我多寫點能增加工作經驗的，像上次《幫你做能落地的界面設計之輸入框》那種，于是想起去年研究的一個問題，是關于Tab 的，想不想聽？
我們先來科普下今天要講的東西是啥，看下圖：
每一個選項都是一個tab ，tab 的形式千千萬，但今天只講這種選中后下面帶橫線的。（我們給這個橫線起個名字叫做小短線吧，下文都這么叫了哈?。?
今天的大綱如下：
Tab 的中文名是標簽的意思，他是用來干嘛的呢，如果你用過ps，還記得軟件右邊的工具窗口嗎？如下圖：
上圖有庫、調整、樣式三個tab，為什么要設置這三個tab 呢？
試想一下，如果沒有tab 給它們分類，所有的小功能全部平鋪開，哪有地方放啊，找起來多麻煩！
所以通俗的來講tab就是為了做好分類，節省空間，等需要的時候更容易找到！
但我們今天講的并不是ps里面的tab，而是app頁面中的tab，我們可以將其可分為兩種形式，固定的tab與可滑動的tab。
固定的tab：
谷歌規范中規定：一組固定 tabs 至少包含 2 個 tab 并且不多于 6 個 tab，并且在一行內顯示。
可滑動的tab：
這種tabs常見于新聞類的頂部導航，可以左右滑動，由于tab個數比較多，所以隱藏一部分。
了解了tab ，可以講今天的重點了！
去年研究的問題就是：tab選中狀態時，小短線到底定多長。
我找了很多競品，將所有的看到的方案都羅列了出來，經過分類后，發現大致可以分為兩大類，一類小短線固定長度，一類小短線可變長度。
先說固定長度的吧，有以下3種方式：
小短線非常短
例如貓眼電影——電影模塊，小短線固定，且比文字短很多，大概只有30像素。
平均等分
像映客的貢獻榜頁面，有三個tab，每一個小短線的長度就是三分之一的屏幕寬度。
除去兩邊邊距后平均等分
貓眼——我的訂單頁面，小短線的長度是先去掉兩邊間距，然后將中間部分平分。
接下來是小短線長度可變化的時候：
上圖是B站的番劇頁面，短線的長度會隨文字的多少變化而變化，一般小短線的長度會比文字稍微寬幾像素，具體看情況而定。
這種方式會使頁面及切換效果比較舒服，缺點就是開發哥哥需要多幾行代碼。
小短線的長度規則差不多就上面那幾種，我們可以根據具體的成本和場景選擇使用，但有一些共性的地方值得我們注意一下，請繼續往下看吧！
注意事項一
小短線的長短其實并不是隨意使用的，我們看下圖：
我們看同樣是貓眼app里面的界面，一級導航的小短線很短，二級導航的小短線就很長。
還有很多app都是相同的規則，例如映客app：
這是為什么呢？
大家可以先自己想想為什么會出現這樣的情況，然后再看我的分析。
我的分析如下：
一級導航會有其他圖標，如果小短線太長會使整個導航看著太亂太復雜。
二級導航一般沒有多余的信息和圖標，所以小短線用的長一點也沒關系，反而讓層級更清晰，頁面更飽滿。
不過有時候二級導航也會選擇讓小短線很短，使整個頁面更加簡潔清爽，例如美團的訂單頁面：
所以很多時候，事情并沒有那么絕對，有合理的說法就可以了！
你和我想的一樣不？
嗯，一樣也不給你錢！
注意事項二
看下圖，發現一個現象：
小短線如果很短，一般就會稍微粗一點，比如6px。
小短線如果很長，一般就會稍微細一點，比如4px。
最開始遇到這個問題的時候，我覺得小短線隨便定一個不就好了，哪來那么多講究，但是當老板問我為什么這樣設計的時候，我就沒話了！
所以每當遇到問題的時候，如果你沒有十足的把握，就先分析競品，把所有能找的方案羅列出來，然后進行歸類，最后看我們的情況適合用哪種方案，這樣在說設計思路的時候就可以有理有據，底氣十足了！
藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、大屏設計、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務