序
之所以這篇想寫Tabs這個組件，是想到了很久以前做過的一個需求，大致內(nèi)容是將三種類型的圖片作一個預(yù)覽的功能，當(dāng)時我就使用了Tabs組件去設(shè)計。
這是一個真實且值得回憶的事情。
Tabs：選項卡
前言
首先什么是選項卡？
選項卡由多個(2個或以上)選項標(biāo)簽和所控制的內(nèi)容組成。
選項卡很容易和導(dǎo)航欄混淆，這篇會先講一下選項卡，導(dǎo)航欄放在后一篇文章里去說。
目錄
- 選項卡的由來
- 何時使用選項卡
- 選項卡的選項標(biāo)簽
- 選項卡和導(dǎo)航欄的區(qū)別
- 按優(yōu)先級排列選項標(biāo)簽
- 選項標(biāo)簽應(yīng)該更易懂
- 盡量不使用圖標(biāo)
- 始終有一個選項標(biāo)簽被選中并強調(diào)
- 未選中的選項標(biāo)簽也要容易被發(fā)現(xiàn)
- 放置選項卡的位置
- 單行放置選項標(biāo)簽避免嵌套
- 熱區(qū)的大小
- 滑動手勢是加分項
- 動效同樣也是加分項
- 最后
選項卡的由來
很多組件的交互方式受現(xiàn)實生活中實物影響，比如之前說過的單選按鈕受早期汽車上收音機的物理按鈕所影響，選項卡也是，是受現(xiàn)實生活中能夠快速翻閱的索引卡（如上圖）影響。
因為和現(xiàn)實呼應(yīng)，所以這些組件能夠在應(yīng)用中更有效的去幫助用戶提高效率并完成目的。
何時使用選項卡
當(dāng)用戶不需要同時看到多個選項標(biāo)簽中的內(nèi)容時，可以考慮使用選項卡組件。
如果當(dāng)用戶需要比較多個選項標(biāo)簽中的內(nèi)容時，就應(yīng)該把所有信息放在一個頁面。因為如果使用選項卡這個組件，會讓用戶在不同選項標(biāo)簽之間來回切換，增加了用戶的交互成本，降低了閱讀性和可用性。
選項卡的選項標(biāo)簽
每個選項標(biāo)簽所控制的內(nèi)容是互斥的，根據(jù)用戶的認(rèn)知有條理的對選項標(biāo)簽進行歸類。
如上左圖應(yīng)用中選項標(biāo)簽控制著相同維度的內(nèi)容(類別)切換，右圖中選項標(biāo)簽控制著不同維度的內(nèi)容(類型)切換。
如果選項標(biāo)簽的內(nèi)容在不同維度時，就會和底部導(dǎo)航(HIG中是:Tab Bars、MD中是:Bottom Navigation)很相像了。
選項卡和導(dǎo)航欄的區(qū)別
雖然說這兩者會有著類似的功能，但他們在使用上還是有很大差異。選項卡的內(nèi)容被認(rèn)為是相互關(guān)聯(lián)的，但導(dǎo)航欄不是。
- 當(dāng)點擊導(dǎo)航欄標(biāo)簽時，用戶是在不同位置且不同頁面下進行切換。
- 當(dāng)點擊選項卡的選項標(biāo)簽時，用戶是在相同位置且不同頁面下進行切換。
按優(yōu)先級排列選項標(biāo)簽
對用戶有幫助的去排列選項標(biāo)簽，選項標(biāo)簽需要遵循順序規(guī)則才能提高可用性。
但最重要的是需要根據(jù)用戶的認(rèn)知(使用邏輯)或商業(yè)目的進行排序。
選項標(biāo)簽應(yīng)該更易懂
選項標(biāo)簽需要使用簡單易懂的描述，而不是很專業(yè)的描述(內(nèi)部叫法)。每個選項卡對應(yīng)的選項標(biāo)簽文字需要盡量簡短，保證用戶快速理解，點擊選擇其中某個選項標(biāo)簽后會得到什么信息。
盡量避免很多文字的選項標(biāo)簽，會發(fā)生字符截斷(...)或換行。
盡量不使用圖標(biāo)
選項標(biāo)簽可以是文字或icon，但不要在文字中穿插使用icon。
雖說用戶對部分icon有認(rèn)知，但很難快速的從icon中讀懂標(biāo)簽的含義，所以使用文字選項標(biāo)簽效果會比icon好。
始終有一個選項標(biāo)簽被選中并強調(diào)
選項標(biāo)簽必須默認(rèn)選中一項，默認(rèn)被選中的可以是：有商業(yè)目的或大多數(shù)用戶想得到的信息。
選中狀態(tài)除了常見的高亮顯示，也可以調(diào)整字體大小、字體加粗、圖標(biāo)(橫杠)等等變化來強調(diào)出的被選中的選項標(biāo)簽所對應(yīng)的內(nèi)容。如上圖，就可以避免很難看出到底哪個才是選中的問題了。
未選中的選項標(biāo)簽也要容易被發(fā)現(xiàn)
對于未選中的選項標(biāo)簽，也需要保持清晰可見的未選中狀態(tài)，可以起到提醒用戶還有其他標(biāo)簽可供選擇的作用。如果當(dāng)這些未選中的選項標(biāo)簽隱藏不可見時，就會有很難發(fā)現(xiàn)的風(fēng)險，容易遺漏。
放置選項卡的位置
將選項卡放置在屏幕中居上的位置，盡量不要放在邊欄或底部，這樣會讓用戶忽略；還有一個原因是選項卡是標(biāo)題，在信息層級高于其他的內(nèi)容。
單行放置選項標(biāo)簽避免嵌套
堅持把所有的選項標(biāo)簽單行橫向放置，避免嵌套。
當(dāng)嵌套放置在多行時，就會發(fā)生兩個組件間的跳躍性閱讀，破壞用戶在空間上的記憶，會使他們很難記住自己曾經(jīng)訪問過什么選項標(biāo)簽。
熱區(qū)的大小
根據(jù)費茨定律，讓選項標(biāo)簽的點擊熱區(qū)足夠大，便于點擊。計算每個選項標(biāo)簽的點擊寬度，可以用設(shè)計尺寸的寬度除以選項標(biāo)簽的數(shù)量，或者可以使用所有選項標(biāo)簽中最大寬度的標(biāo)簽。
使用指點設(shè)備到達一個目標(biāo)的時間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大小（S）有關(guān)。
——Wikipedia(費茨法則)
滑動手勢是加分項
雖然點擊切換選項標(biāo)簽沒毛病，但可以根據(jù)頁面性能和個廠規(guī)范，加入滑動手勢，這樣用戶就不必回到選項標(biāo)簽所在的位置去點擊切換了。
HIG中沒有說明Segmented Controls的滑動動作，Material Design中說明了Tabs滑動手勢。
動效同樣也是加分項
加強了不同選項卡處于相同位置的效果，不單單只使用默認(rèn)的動態(tài)效果。使用滑入滑出動效是加分的。
同時動效也起到了鼓勵用戶使用滑動手勢去切換選項標(biāo)簽的作用。
最后
Tabs是一個簡單的組件，合理運用其特性就能有巨大的作用。雖說只可能是我們應(yīng)用(App/Pc)中很小的一部分，但是一個優(yōu)秀的Tabs設(shè)計是可以幫助用戶高效完成任務(wù)的。
同時也可以基于Tabs的原則去做不一樣的設(shè)計，比方：騰訊視頻App在首頁頂部Tabs這一欄右側(cè)有個可以讓用戶自定義排序頻道(選項標(biāo)簽)的功能，這樣用戶就可以放置自己鐘意的頻道(選項標(biāo)簽)的在靠前位置，從而再過濾不鐘意的內(nèi)容，同時也減少了操作。
不知這功能用的人是否多，我猜測這起碼是為三層用戶設(shè)計的。
參考文章：
Tabs for Mobile UX Design、Tabs, Used Right
Guideline：
以上的觀點從我個人總結(jié)出發(fā)，雖說文筆拙劣，但是如果你有不同的意見，歡迎交流～
廣告位：《常見的表單設(shè)計，如何最大化提升用戶體驗？》
不知大家還發(fā)現(xiàn)過什么優(yōu)秀的Tabs設(shè)計應(yīng)用，比如說：簡書App的首頁可以定制調(diào)整Tabs順序。
雖說評論不能傳圖，但歡迎文字留言。
