Tab是什么？
在macOS 中的Tab
在android中的Tab
在iOS中的Tab
在網(wǎng)頁中的Tab
本文主要以網(wǎng)頁端的產(chǎn)品場(chǎng)景為例進(jìn)行分析和討論；
Tab的使用場(chǎng)景?
當(dāng)頁面空間有限時(shí)，頁面需要展示多維度且有關(guān)聯(lián)性的信息時(shí)，可以選用tab組件來展示頁面。
Tab的使用可以在一定程度上節(jié)約頁面空間，使得布局緊湊，降低信息的展示密度的同時(shí)不因空間限制縮減信息量。
Tab 對(duì)標(biāo)現(xiàn)實(shí)場(chǎng)景中最經(jīng)典的是瀏覽器的標(biāo)簽頁；根據(jù)不同的不同產(chǎn)品的復(fù)雜程度，Tab組件需要承載的頁面信息內(nèi)容可能有不同。特別是后臺(tái)類型的產(chǎn)品常常因業(yè)務(wù)的復(fù)雜度而需要嵌套多層Tab來滿足信息展示的需求，不過建議在設(shè)計(jì)前，需要先理清產(chǎn)品的信息架構(gòu)和產(chǎn)品經(jīng)理進(jìn)行功能梳理整合，建議網(wǎng)頁中的Tab最多不要超過三層。
以我參與的設(shè)計(jì)語言規(guī)范Youcloud Design為例(主要介紹設(shè)計(jì)的思路，了解思路可設(shè)置符合你自己的規(guī)范)。產(chǎn)品主要面向To B的移動(dòng)營銷數(shù)據(jù)產(chǎn)品。因業(yè)務(wù)特性和面向用戶群體的復(fù)雜度都要求我們的產(chǎn)品頁面需要承載更多的信息內(nèi)容。我們?cè)谠O(shè)計(jì)Tab組件的時(shí)候，設(shè)計(jì)了三種樣式的Tab來滿足不同的信息層級(jí)展示。分別是：
1、Page Tab（頁面式），強(qiáng)調(diào)頁面性級(jí)別的內(nèi)容分頁，可類比于公司中的不同事業(yè)部的分頁；用來表達(dá)弱關(guān)聯(lián)性或者無關(guān)聯(lián)性的分類信息。
2、Module Tab（模塊式），用于表達(dá)二級(jí)分類，模塊級(jí)別，可類比與一個(gè)事業(yè)部中的不同項(xiàng)目組；用來表達(dá)有關(guān)聯(lián)的信息分類。
3、Label Tab（標(biāo)簽式），用于表達(dá)三級(jí)分類，更細(xì)分的級(jí)別，可類比項(xiàng)目組中的不同崗位分類；用來表達(dá)同層級(jí)中關(guān)聯(lián)性比較強(qiáng)的信息分類。
不同的Tab樣式給用戶傳達(dá)什么樣的信息？
對(duì)于Page Tab，把這種類型的Tab樣式設(shè)計(jì)得像瀏覽器的頁面標(biāo)簽相似，讓用戶有個(gè)心理預(yù)期是想給用戶傳達(dá)切換不同tab的時(shí)候信息是彼此無聯(lián)結(jié)或者弱聯(lián)結(jié)的。不同tab信息承載的內(nèi)容也明顯能區(qū)別關(guān)聯(lián)性。用戶因此也能有個(gè)預(yù)知，切換了之后是看到另外一個(gè)不同維度的信息。
對(duì)于Module Tab，這種類型的tab截?cái)喔斜容^小，樣式上有一條線相通連接，視覺表現(xiàn)上用來給用戶傳達(dá)不同的維度信息組合描述相同的事務(wù)。
對(duì)于Label Tab，這種類型的tab設(shè)計(jì)得像標(biāo)簽紙一樣，與module tab 一樣，區(qū)別只在于更深入一層來表達(dá)信息。
Tab設(shè)計(jì)的原則是什么？
1、能直接展示的信息就不用分tab來展示
tab的引入設(shè)計(jì)主要是因?yàn)轫撁婵臻g有限但是信息量大的情況，能一個(gè)頁面展示完的信息就不用切分成不同的tab來展示。所以第一個(gè)原則就是能不用就不要用。
2、信息歸類符合用戶的預(yù)期，方便用戶對(duì)比關(guān)聯(lián)性強(qiáng)的信息。
tab的引入從用戶的角度是增加了他們看完整信息的操作的，但是合理的使用也是能理解。前提條件是需要將信息歸類分得很合理。減少用戶來回切換對(duì)比信息的額外操作。
3、信息層級(jí)架構(gòu)設(shè)計(jì)不要超過三層
“所有信息架構(gòu)超過三層的信息展示都欠梳理?！薄獊喞锸慷嗟隆ゐB(yǎng)龍
太深入層級(jí)的信息對(duì)用戶體驗(yàn)是不友好的。產(chǎn)品不要自己懶惰梳理信息架構(gòu)而將操作成本轉(zhuǎn)嫁給用戶。
Tab要注意哪些問題？
1、Tab 與 Radiobutton的區(qū)別？
簡要概括區(qū)別，Radiobutton 用于表達(dá)tab用途的前提是當(dāng)前信息的架構(gòu)是完全一致，切換細(xì)分粒度展示。比如同樣的信息，切換時(shí)間維度30天/7天 展示。
如下圖中，只是時(shí)間維度的不同看到的其他數(shù)據(jù)維度是一樣的，可以用RadioButton來表示。
這里推薦經(jīng)過龍抓槐守望者的許可，分享關(guān)于控件的區(qū)別的系列文章《這個(gè)控件叫什么》系列中關(guān)于segment control 和tab 的區(qū)別的文章。http://www.itdecent.cn/p/e32d038c82ae
感謝龍抓槐守望者的支持。
