#我是一個可愛的搬磚工系列# 嘗試對照英文翻譯學(xué)習(xí)MD的組件設(shè)計，借此加深各種組件的應(yīng)用~

Material Design鏈接：Material Design——Tabs

選項卡通過不同的屏幕、數(shù)據(jù)集和其他交互來組織內(nèi)容。

一、用法

選項卡組織和允許在與層次結(jié)構(gòu)相關(guān)的內(nèi)容組之間進(jìn)行導(dǎo)航。

選項卡是一個系列的

每個選項卡應(yīng)包含與集合中其他選項卡不同的內(nèi)容，例如, 選項卡可以呈現(xiàn)不同的新聞節(jié)、不同的音樂流派或不同的文檔主題。

Right：標(biāo)簽標(biāo)簽可以包括圖標(biāo)和文本，文本標(biāo)簽應(yīng)該是短的；Wrong：不要使用制表符在需要按特定順序讀取的順序內(nèi)容中移動。

Right：將制表符作為其關(guān)聯(lián)內(nèi)容上方的一行顯示；Wrong：避免使用選項卡來比較多個選項卡上的內(nèi)容, 例如同一項的不同大小。

△ 原則

· 可伸縮? 當(dāng)選項卡可以水平滾動時, UI 可以有盡可能多的選項卡

· 信息??選項卡將內(nèi)容組織到類別中, 以幫助用戶輕松查找不同類型的信息

·?同一行??在同等重要的類別中, 制表符作為對等方彼此相鄰顯示

與其他組件的組合

選項卡可以與頂級應(yīng)用程序欄等組件配對, 或者嵌套在諸如卡片和表單之類的組件中。

△ 同一行

固定選項卡

固定選項卡顯示一個屏幕上的所有選項卡, 每個選項卡的寬度固定，每個選項卡的寬度由屏幕寬度除以制表符數(shù)來確定，選項卡集表示這是當(dāng)前觸發(fā)的選項卡。

可滾動選項卡

無固定寬度顯示可滾動制表符，它們是可滾動的, 這樣某些選項卡將保留在屏幕之外, 直到滾動。

二、分析

1.ContainerActive icon (Optional if there’s a label)；2.Active text label (Optional if there’s an icon)；3.Active tab indicator；4.Inactive icon (Optional if there’s a label)；5.Inactive text label (Optional if there’s an icon)；6.Tab item

△ 文本標(biāo)簽

文本標(biāo)簽應(yīng)清楚和簡明地描述它們所代表的選項卡的內(nèi)容，選項卡內(nèi)容應(yīng)包含一組具有共同特征的項。

制表符標(biāo)簽顯示在單行中，如果需要, 可以使用第二行, 并截斷文本，或者, 您可以使用可滾動的選項卡允許更長的標(biāo)題空間。

Caution：雖然標(biāo)簽文本可以換行到另一行, 但可滾動制表符將文本限制為單行；Wrong：不要調(diào)整文本標(biāo)簽的大小以適合一行，如果標(biāo)簽太長, 則將文本換到第二行或使用可滾動選項卡。

左：除非需要, 不要截斷標(biāo)簽, 因為截斷的文本會妨礙理解；右：不要混合只包含文本的選項卡, 只包含圖標(biāo)的選項卡，在所有標(biāo)簽上使用所有文本標(biāo)簽、所有圖標(biāo)標(biāo)簽或兩者。

△ 圖標(biāo)

圖標(biāo)以簡單、可識別的方式傳達(dá)標(biāo)簽所代表的內(nèi)容類型，但是, 它們在表達(dá)復(fù)雜內(nèi)容時不像文本標(biāo)簽?zāi)菢佑行А?/p>

選項卡可以使用標(biāo)簽和圖標(biāo)的組合。

選項卡可以使用圖標(biāo)來傳達(dá)內(nèi)容。

不要只在某些選項卡上使用帶有圖標(biāo)和文本標(biāo)簽的制表符，要統(tǒng)一在全部的tabs上使用圖標(biāo)。

當(dāng)只用圖標(biāo)表示選項卡內(nèi)容時請小心, 因為圖標(biāo)的含義在每個主題上可能都不清楚。

△?活動選項卡指示器

若要將活動選項卡與非活動選項卡區(qū)分開來, 請對活動選項卡的文本和圖標(biāo)應(yīng)用下劃線和顏色更改。

下劃線和顏色更改將活動選項卡與非活動標(biāo)簽區(qū)分開來。

三、行為

△?在選項卡之間移動

用戶可以通過點擊選項卡或通過在內(nèi)容上執(zhí)行滑動手勢在選項卡之間導(dǎo)航。

· 點擊選項卡

通過點擊定位到一個選項卡

· 在內(nèi)容區(qū)域內(nèi)滑動

要在選項卡之間導(dǎo)航, 用戶可以在內(nèi)容區(qū)域內(nèi)向左或向右滑動。

對于每種類型的選項卡, 筆勢的出現(xiàn)方式不同:

1.固定選項卡不響應(yīng)所有的滑動手勢

2.在華東時, 可滾動制表符獨立于內(nèi)容區(qū)域滾動

在內(nèi)容區(qū)域中放置其他 swipeable 內(nèi)容 (如交互式地圖或列表項) 時, 請格外小心

Caution：在具有選項卡的 ui 中放置 swipeable 內(nèi)容時要小心, 因為用戶很容易華東錯誤的組件；Wrong：避免在具有制表符的 UI 的內(nèi)容區(qū)域中放置 swipeable 項, 因為用戶可能會錯誤活動組件。

△ 活動

當(dāng)屏幕滾動時, 制表符可以固定在屏幕的頂部, 或者從屏幕上滾動，如果他們從屏幕上滾動, 當(dāng)用戶向上滾動時, 它們將返回。

當(dāng)選項卡連接到頂部應(yīng)用程序欄時, 它們可以用條形圖從屏幕上滾動, 并在屏幕頂部固定。

選項卡可以滾動, 并在頁面滾動時重新出現(xiàn)。

不要在頂部應(yīng)用程序欄后面滾動制表符，當(dāng)選項卡附加到組件時, 它們應(yīng)作為單個單元出現(xiàn)并移動。

四、位置

△?制表符布局

選項卡顯示在一行中, 每個選項卡都連接到它所表示的內(nèi)容，作為一個集合, 所有選項卡為同一個主題。

將制表符置于內(nèi)容上方。

Caution：避免在另一個選項卡中嵌套選項卡；Wrong：不要把制表符放在下面。

△?制表符放置

選項卡可以與諸如頂級應(yīng)用程序欄、嵌入在特定 UI 區(qū)域中的組件或嵌套在卡片和表等組件中一起使用，選項卡控制顯示在它們下面的 UI 區(qū)域。

頂部應(yīng)用程序欄下面的選項卡

在滾動的時候，不要使用選項卡與短的頂部應(yīng)用程序欄, 或頂部應(yīng)用程序欄, 過渡到短的頂部應(yīng)用欄。

不要將選項卡附加到底部導(dǎo)航, 因為它可能會導(dǎo)致混淆哪些操作或選項卡控制哪些內(nèi)容。

選項卡可以嵌入到特定的 UI 區(qū)域中, 以便控制該區(qū)域中顯示的內(nèi)容。

嵌套在列中的選項卡, 它們可以在點擊時控制的內(nèi)容，縮小到62.5%。

不要將標(biāo)簽放在他們不能控制的內(nèi)容上面，如果選項卡只更改 UI 的某個部分, 請將其嵌入到該節(jié)中?？s小到62.5%。

嵌套在卡中的制表符。

嵌套在表單中的選項卡。

五、固定選項卡

△ 用法

固定選項卡同時顯示集合中的所有選項卡，它們最適合于快速切換相關(guān)內(nèi)容, 如地圖中的傳輸方法，若要在固定選項卡之間導(dǎo)航, 請單擊單個選項卡, 或在內(nèi)容區(qū)域中向左或向右滑動。

顯示有限數(shù)量的類別時使用固定選項卡。

使用圖像和標(biāo)簽的固定標(biāo)簽欄。

△ 位置

固定制表符的寬度相等, 可計算為:

·?屏幕的寬度除以制表符的數(shù)目

·?最寬標(biāo)簽標(biāo)簽的寬度

使用固定選項卡時, 請確保在移動時可以看到它們, 而不截斷其文本，不要同時使用四個以上的固定標(biāo)簽。

不要在一組中使用超過四個固定選項卡，尺寸減少到62.5%。

在更寬的布局中, 固定制表符的寬度會增加, 因為它們的制表符寬度取決于屏幕的寬度，尺寸減少到62.5%。

避免讓固定標(biāo)簽導(dǎo)致內(nèi)容混淆，這些制表符寬度與此布局中的列緊密對齊, 這樣選項卡和內(nèi)容之間的關(guān)系可能會被誤解。

△ 密集固定選項卡

密集固定標(biāo)簽在屏幕上不相等，選項卡欄居中、右對齊或左對齊，應(yīng)在橫向布局 (如橫向模式) 中使用群集固定選項卡。

在更寬的布局中, 選項卡可以居中放置在選項卡欄上。

密集的固定選項卡可以向左或向右對齊。

六、可滾動選項卡

△ 用法

在屏幕上無法容納一組選項卡時, 請使用可滾動選項卡，可滾動選項卡可以使用較長的文本標(biāo)簽和更大數(shù)量的制表符，它們最好用于瀏覽觸摸界面。

一組可滾動的選項卡。

△ 位置

可滾動選項卡同時顯示所有選項卡的子集，每個選項卡的寬度由其文本標(biāo)簽的長度定義。

在 "移動" 和 "桌面" 上, 偏移左側(cè)的第一個選項卡, 以指示選項卡是可滾動的。

避免在每個選項卡上使用不一致的填充。

在桌面上, 提供一個可視指示器, 顯示更多的選項卡在屏幕上可用。

△ 行為

要在一組可滾動的選項卡之間導(dǎo)航, 用戶可以向左或向右滑動設(shè)置。選項卡集可以循環(huán), 因此當(dāng)用戶到達(dá)集中的最后一個選項卡時, 第一個選項卡將再次顯示。

要選擇單個選項卡, 請點擊它。

·?激活時的制表符放置

在點擊時, 可滾動制表符應(yīng)重新定位以在屏幕上完全可見。

活動選項卡重新定位以在屏幕上完全顯示。

活動選項卡在活動時可以移動到行的中間。

七、狀態(tài)

默認(rèn)情況下, 選項卡繼承啟用的狀態(tài), 其中有一個活動態(tài)。

選項卡的非活動狀態(tài)可以繼承懸停、焦點和按下狀態(tài)。

已啟用選項卡的懸停、焦點和按下狀態(tài)

選項卡的活動狀態(tài)可以繼承懸停、焦點和按下狀態(tài)。

活動選項卡的懸停、焦點和按下狀態(tài)

END.THANKS FOR YOUR READING~

如有不當(dāng)，還請多多指教~