什么是tab
tabs 可用于將有關(guān)的內(nèi)容分組，重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。
用戶通過鼠標(biāo)點擊或移到內(nèi)容區(qū)所對應(yīng)的標(biāo)簽上，來請求顯示該層內(nèi)容區(qū)。
tab屬于扁平信息結(jié)構(gòu)，可以讓用戶在分類之間隨意切換，而不用在意當(dāng)前所處的位置。
tab的優(yōu)勢
tab將大量關(guān)聯(lián)的數(shù)據(jù)或者選項劃分成更易理解的分組，提供簡單的頁面展示形式，即在不需要切換出上下文，頁面跳轉(zhuǎn)的情況下，有效的進(jìn)行內(nèi)容組織的扁平化導(dǎo)航設(shè)計。
如pc端的標(biāo)簽頁導(dǎo)航、模塊選項卡等設(shè)計形式。
可以將產(chǎn)品包含的所有內(nèi)容進(jìn)行清晰分類，一目了然地呈現(xiàn)應(yīng)用的內(nèi)容范圍，方便概覽與跳轉(zhuǎn)。
tab的組成部分
tab menu（標(biāo)簽區(qū)）
用戶導(dǎo)航和控制切換內(nèi)容區(qū)的操作區(qū)域。
tab box（內(nèi)容區(qū)）
tab內(nèi)容中重疊的區(qū)塊，用于顯示信息內(nèi)容。tab menu（標(biāo)簽區(qū)）有選中、未選中兩種狀態(tài)，且只有一個tab為選中狀態(tài)。頁面載入時，一般默認(rèn)第一個tab為選中態(tài)。
tab標(biāo)簽與tab內(nèi)容是一一對應(yīng)的，標(biāo)簽與當(dāng)前顯示的內(nèi)容區(qū)對應(yīng)選中狀態(tài)的標(biāo)簽，當(dāng)前隱藏的內(nèi)容區(qū)對應(yīng)未選中狀態(tài)的標(biāo)簽。
tab的使用場景頁面空間有限
當(dāng)希望節(jié)省頁面空間，布局緊湊，且需要組合的幾種信息之間具有關(guān)聯(lián)性時，可以選擇tab。
tab的使用，令頁面結(jié)構(gòu)緊湊，可以縮短頁面屏長，降低信息的顯示密度，但同時又不犧牲可視的信息量。
把有效的信息以最少的布局顯示，能有效減少頁面的占用空間。
信息之間具有某種關(guān)聯(lián)特征，且是并列關(guān)系，內(nèi)容不交叉
構(gòu)成一個整體的每個元素之間都應(yīng)該具有邏輯上的關(guān)聯(lián)性。所以同一組tab中的每個tab項，應(yīng)該具有關(guān)聯(lián)特征，內(nèi)容也不相重疊，這樣用戶才能將整個tab區(qū)域視為一個整體。例如：
ps顏色與色板是一組tab組合。
信息之間不應(yīng)該存在對比或并行的關(guān)系
tab元素中，同一時刻，只能顯示一層內(nèi)容區(qū)。當(dāng)用戶需要對位于不同內(nèi)容區(qū)上的信息進(jìn)行對比，或者這幾種信息，同時顯示會更便于用戶閱讀時，就不應(yīng)該使用tab，否則會導(dǎo)致用戶為了對比所需的信息，而不停在標(biāo)簽之間進(jìn)行切換。
tab應(yīng)該用于展示精煉的內(nèi)容
tab用于展現(xiàn)標(biāo)準(zhǔn)化和易于理解的信息。基于此，tab應(yīng)該只用于顯示信息摘要和內(nèi)容要點，例如列表、數(shù)據(jù)圖表。
tab不能濫用于內(nèi)容切換與內(nèi)容分頁，如單個產(chǎn)品中頁面之間的切換
tab強(qiáng)調(diào)的是信息的分類屬性（同類并列），即它一般用于最小單元的組合，而非最小單元的拆分。
右圖不可取，tab不應(yīng)該應(yīng)用于一個產(chǎn)品內(nèi)部不同的功能之間導(dǎo)航切換。
tab的設(shè)計原則
標(biāo)簽上使用簡短和有邏輯的文字
tab元素的標(biāo)簽區(qū)寬度是有限的，所有標(biāo)簽區(qū)的文字應(yīng)該簡潔扼要，具有代表性，長度控制在6個文字以內(nèi)。以便可以在一行內(nèi)，容納盡可能多的標(biāo)簽。
用精煉的方式展示信息，除了保持設(shè)計樣式一致外，還可以讓用戶更快速地處理文字信息，用以預(yù)測隱藏區(qū)域上所包含的內(nèi)容。
選中的標(biāo)簽應(yīng)該高亮顯示
選中狀態(tài)的標(biāo)簽應(yīng)該設(shè)計地顯眼，讓用戶容易區(qū)分當(dāng)前顯示的內(nèi)容區(qū)是對應(yīng)哪個標(biāo)簽。通用的做法是為未選中狀態(tài)使用與背景色對比度低的顏色，為處于選中狀態(tài)的標(biāo)簽上，使用高亮且與背景色對比度高的顏色。
保持標(biāo)簽在一行內(nèi)顯示
tab的標(biāo)簽通常是水平方向排列的（當(dāng)然，也可以設(shè)計成垂直方向排列），標(biāo)簽如果分布在多行上，會導(dǎo)致用戶在使用中產(chǎn)生疑惑。
這是由于在水平方向上，多行分布標(biāo)簽，隱含一種等級關(guān)系，可能讓用戶誤以為第二行是第一行的子級。
如果tab數(shù)目過多，可以參考google搜索頁面，tab的處理方式，將更多tab內(nèi)容收納于更多中，當(dāng)用戶點擊更多中的菜單時，將其顯示在主tab上。
內(nèi)容區(qū)之間的切換，應(yīng)該沒有延遲
使用tab來控制內(nèi)容切換的特性之一是快速和互動。為此，應(yīng)該在設(shè)計實現(xiàn)上，提前加載所有tab下的內(nèi)容，而不是等用戶切換到某一個標(biāo)簽后再去加載內(nèi)容。
不要在內(nèi)容區(qū)使用滾動條
在tab的內(nèi)容區(qū)里使用滾動條（不是指瀏覽器自帶的頁面滾動提示條）會增加用戶負(fù)擔(dān)，用戶查找信息在哪個內(nèi)容區(qū)時，不僅需要切換標(biāo)簽，還需要加上移動滾動條的操作。
內(nèi)容區(qū)里容納的信息太多或設(shè)計tab時，設(shè)定的高度不夠，會導(dǎo)致滾動條出現(xiàn)。所以需要考慮精簡內(nèi)容、增加高度值，或把選中狀態(tài)的內(nèi)容區(qū)處理為高度自適應(yīng)。
tab標(biāo)簽用icon還是icon 文字
避免在tab標(biāo)簽上僅使用icon，尤其是專業(yè)領(lǐng)域。
1.tab數(shù)目不多，不超過四個，且新手用戶可以接受認(rèn)知和試錯成本，可以考慮只使用圖標(biāo)，且應(yīng)是大家約定俗成的通用圖標(biāo)，如搜索用放大鏡表示。
2.tab數(shù)目超過四個，慎用icon，不同人對一個圖形，有不同的解讀，icon 文字是比較易于接受的方案。
如果你希望用戶看到什么，就將他放置在默認(rèn)tab上
位置和順序會帶給用戶重要程度不同的感知，因屏幕資源有限，即使是內(nèi)容并列的tab，也存在默認(rèn)展示與排序差異。用戶對位置與重要程度的關(guān)系有潛在的認(rèn)識，如果非默認(rèn)標(biāo)簽的文字或內(nèi)容刺激度和新鮮度不足，那么操作動力也就不夠了。同時tab點擊遞減也是一個常見的問題。
有一個小技巧：
將產(chǎn)品需要推廣或優(yōu)先展示的內(nèi)容放在默認(rèn)tab，用戶感興趣、無法忽略的tab靠后，因為用戶愿意為值得的內(nèi)容多付出一次滑動操作。
具體可參考app store-排行榜中，【付費】、【免費】、【暢銷排行】三個tab的順序。
總結(jié)
信息架構(gòu)
在交互范疇內(nèi)，如上圖所示即信息的結(jié)構(gòu)：在樹形結(jié)構(gòu)中，z軸即表示信息的深度，即鏈接的信息層數(shù)；x軸表示一個層級包含的頁面總數(shù)（可以理解為此文的tab數(shù)），即鏈接的廣度；y軸表示該層級頁面的滑動的最長距離，即頁面的長度。
用戶的瀏覽成本從高至低：
逐級跳轉(zhuǎn) > 不同tab切換 > 單頁滑屏瀏覽
在交互過程中，盡量減少信息層級，用戶通過較少的頁面跳轉(zhuǎn)就能找到想要的信息，每一次頁面跳轉(zhuǎn)，轉(zhuǎn)化率可能會減少10%%u3002tab可以為用戶減少一級頁面跳轉(zhuǎn)，使信息趨向扁平。但位移的成本，比重疊還低。把關(guān)系緊密的信息放在一個區(qū)域內(nèi)，增加頁面利用率，用戶在一個頁面滑動瀏覽，比切換tab，帶來的信息負(fù)擔(dān)更輕，更容易讓用戶接受更多信息。

買云服務(wù)器買華東還是華北
查詢負(fù)載均衡云服務(wù)器列表
云服務(wù)器建淘客網(wǎng)站
租阿里巴巴云服務(wù)器
買了阿里云服務(wù)器解決了延時
輪播圖不顯示-虛擬主機(jī)/數(shù)據(jù)庫問題
國內(nèi)vps云服務(wù)器租用
低價香港云服務(wù)器價格