Tabs

在一個 app 中，tabs 使在不同的視圖和功能間探索和切換以及瀏覽不同類別的數(shù)據(jù)集合起來變得簡單。

用法

tab 用來顯示有關(guān)聯(lián)的分組內(nèi)容。tab標簽用來簡要的描述內(nèi)容。

移動設(shè)備的 tabs

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-02_large_mdpi.png" alt="" />
擴展的 app bar + tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-03_large_mdpi.png" alt="" />
加入檢索 + app bar + tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-06_large_mdpi.png" alt="" />
默認的 app bar + tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-08_large_mdpi.png" alt="" />
默認的 app bar + 可滾動的 tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-07_large_mdpi.png" alt="" />
和 tab 指示器一樣的字體顏色

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-17_large_mdpi.png" alt="" />
被鎖定滾動的 tab bar

桌面環(huán)境的 tabs

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-09_large_mdpi.png" alt="" />
默認的 app bar + tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-15_large_mdpi.png" alt="" />
附加“更多”溢出下拉菜單

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-12_large_mdpi.png" alt="" />
Tab 溢出標識碼，第一步

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-13_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-16_large_mdpi.png" alt="" />
展開的菜單

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-14_large_mdpi.png" alt="" />
居中的 tab bar

何時使用

使用 tabs 將大量關(guān)聯(lián)的數(shù)據(jù)或者選項劃分成更易理解的分組，可以在不需要切換出當先上下文的情況下，有效的進行內(nèi)容導航和內(nèi)容組織。

僅管 tab 的內(nèi)容讓人自然的聯(lián)想到導航（例如：道路選項可以切換地圖的視圖，搜索結(jié)果引導到其他網(wǎng)站），但 tabs 本身并不是用來導航的。

Tabs 也不是用于內(nèi)容切換或是內(nèi)容分頁的（例如：應(yīng)用中頁面之間的切換）。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_do_10_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_dont_10_large_mdpi.png" alt="" />

(上圖)不可取

Tab 特性

Tabs 應(yīng)該顯示在一行內(nèi)。

Tabs 不應(yīng)該被嵌套。也就是說，一個 tab 里的內(nèi)容不應(yīng)包含另一組 tabs。

一組 tabs 至少包含 2 個 tab 并且不多于 6 個 tab。

Tabs 控制的顯示內(nèi)容的定位要一致。

Tab 中當前可見內(nèi)容要高亮顯示。

Tabs 應(yīng)該歸類并且每組 tabs 中內(nèi)容順序相連。

保持 tabs 和他們的內(nèi)容相鄰，可以明確兩者間的關(guān)系，距離太遠會讓人誤解。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_do_06_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_dont_06_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_do_08_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_dont_08_large_mdpi.png" alt="" />

(上圖)不可取

內(nèi)容

Tab 的內(nèi)容

即使是兩個 tabs 之間，tab 中呈現(xiàn)的內(nèi)容可以有很大的差別。比如，不同年份的 tab 組合或者是不同類型的設(shè)置。

一組 tabs 中的所有內(nèi)容應(yīng)該互相關(guān)聯(lián)并且在同一個主題下（例如：設(shè)置、指南），但是每個 tab 又是相互獨立的。

Tab 標簽應(yīng)該邏輯的組織相關(guān)內(nèi)容，并提供有意義的區(qū)分。

Tab 標簽可能是圖標或者文字并且不能省略。

避免進行跨 tab 的內(nèi)容比較。如果一個跨 tab 的內(nèi)容比較是有必要的，那么也許應(yīng)該換一種內(nèi)容的組織和呈現(xiàn)方式。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-content-tabs_15_large_mdpi.png" alt="" />

Tabs 的類型

根據(jù)平臺和使用環(huán)境，tab 的內(nèi)容可以表現(xiàn)為固定的 tabs 或者是滾動（滑動）的 tabs。

固定的 tabs

固定的 tabs 同時顯示所有 tabs，最適合用于快速相互切換的 tabs （例如，在地圖中切換線路的交通方式）。

視圖的寬度限制了 tabs 的最大數(shù)量。在固定的 tabs 中每個 tab 寬度相等，都是最寬的 tab 標簽的寬度?？梢酝ㄟ^點擊 tab 或者是在內(nèi)容區(qū)域中左右滑動來在固定的 tabs 間進行導航。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-typesoftabs-tabs-spec-06_large_mdpi.png" alt="" />

滾動的 tabs

滾動的 tabs 用于顯示 tabs 的子集，可以在任何時候使用，并且可以包含更長的 tab 標簽和更多的 tabs 數(shù)量，最適合用于觸摸操作的瀏覽環(huán)境并且用戶不需要直接比較 tab 標簽。

可以通過點擊 tab 、在 tab 上左右滑動或者在內(nèi)容區(qū)域中左右滑動來在滾動的 tabs 間進行導航。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-12_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-13_large_mdpi.png" alt="" />

規(guī)格

固定并且全屏寬度

• Tab 寬度：屏幕的 1/3
• 激活的Tab的指示器高度：2 dp
• 文本：14 sp Roboto Medium
• 文本在 tab 中居中
• 激活的文字顏色：#fff 或顏色選擇中的次要顏色（詳情可見Color）
• 不可用的文字顏色：#fff 60%

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-typesoftabs-tabs-spec-04_large_mdpi.png" alt="" />

可滾動的

• Tab 寬度：12 dp + 文本寬度 + 12 dp
• 激活的Tab的指示器高度：2 dp
• 文本：14 sp Roboto Medium
• 激活的文字顏色：#fff 或顏色選擇中的次要顏色（詳情可見Color）
• 不可用的文字顏色：#fff 60%

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-typesoftabs-tabs-spec-05_large_mdpi.png" alt="" />

桌面/平板

• Tab 寬度：24 dp + 文本寬度 + 24 dp
• 激活的Tab的指示器高度：2 dp
• 文本：平板 14 sp 桌面 13 sp Roboto Medium
• 激活的文字顏色：#fff 或顏色選擇中的次要顏色（詳情可見Color）
• 不可用的文字顏色：#fff 60%

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-typesoftabs-tabs-spec-10_large_mdpi.png" alt="" />

按下 tab 時的動畫

原文：Tabs 翻譯：vincent4j 校對：PoppinLp