Tabs - 標簽

Tabs make it easy to explore and switch between different views.

【翻譯】
標簽可以方便地瀏覽和切換不同的視圖。

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.

Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.

Because swipe gestures are used for navigating between tabs, don't pair tabs with content that also supports swiping.

【翻譯】
標簽可以在高級別啟用內容組織，例如在視圖，數據集或應用程序的功能方面之間切換。
將標簽顯示為其關聯內容上方的單個行。 標簽標簽應簡明扼要地描述其中的內容。
由于滑動手勢用于在選項卡之間導航，請不要將選項卡與也支持滑動的內容配對。

Types - 類型

Fixed
Scrollable

【翻譯】
固定
可滾動

Tab labels - 標簽文本

Tab labels may be either all icons or all text.

【翻譯】
標簽文本可以是所有圖標或所有文本。

Color - 顏色

Apply your app’s accent color, or a contrasting color, to text fields and the text field cursor.

【翻譯】
將應用的強調顏色或對比顏色應用于文本字段和文本字段光標。

Usage - 用法

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

【翻譯】
選項卡提供了顯示分組內容的能力。標簽標簽簡潔地描述了標簽的相關內容分組。

Mobile tabs - 移動標簽
[圖片上傳失敗...(image-480e08-1552293304414)]
Default app bar and fixed tab bar

【翻譯】
默認應用欄和固定標簽欄

image

Extended app bar and fixed tab bar

【翻譯】
擴展應用欄和固定標簽欄

image

Fixed tab bar pinned to top with scrolled content

【翻譯】
固定標簽欄固定到頂部與滾動內容

[圖片上傳失敗...(image-62a36f-1552293304414)]
Inset search, app bar, and fixed tab bar

【翻譯】
插入搜索，應用欄和固定標簽欄

[圖片上傳失敗...(image-96e0e1-1552293304414)]
Default app bar and scrollable tab bar

【翻譯】
默認應用欄和可滾動的標簽欄

image

The text color is the same as the tab indicator.

【翻譯】
文本顏色與制表符指示符相同。

image

Default app bar and fixed tab bar with icons

【翻譯】
默認應用欄和帶有圖標的固定標簽欄

[圖片上傳失敗...(image-1a7bb4-1552293304414)]
The icon color is the same as the tab indicator.

【翻譯】
圖標顏色與選項卡指示符相同。

Desktop tabs - 桌面選項卡

[圖片上傳失敗...(image-86de82-1552293304414)]
Default app and tab bars

【翻譯】
默認應用和標簽欄

[圖片上傳失敗...(image-fbb8ce-1552293304414)]
Tabs with a More dropdown menu

【翻譯】
帶有更多下拉菜單的標簽頁

[圖片上傳失敗...(image-82dc2b-1552293304414)]
Tabs with an expanded More dropdown menu

【翻譯】
帶有展開的更多下拉菜單的標簽頁

image

Tabs with Books selected from a More dropdown menu

【翻譯】
從更多下拉菜單中選擇了圖書的標簽頁

[圖片上傳失敗...(image-f70ab5-1552293304414)]
Tabs with overflow pagination

【翻譯】
標簽頁溢出分頁

[圖片上傳失敗...(image-5cb0e8-1552293304414)]
Tabs with overflow pagination scrolled

【翻譯】
帶有溢出分頁的標簽滾動

image

Tab bar centered

【翻譯】
標簽欄居中

When to use - 何時使用
Use tabs to organize content at a high level, for example, to present different sections of a newspaper. Don’t use tabs for carousels or pagination of content. Those use cases involve viewing content, not navigating between groups of content.
For more detail about using tabs for navigating top-level views, see “Tabs” in Navigation - Patterns.
Don't use tabs with content that supports the swipe gesture, because swipe gestures are used for navigating between tabs. For example, avoid using tabs in a map where content is pannable, or a list where items can be dismissed with a swipe.
Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory. Scrollable tabs should be used when there are many or a variable number of tabs.

【翻譯】
使用選項卡可以高級組織內容，例如，顯示報紙的不同部分。 不要使用選項卡用于輪播或內容分頁。 這些用例涉及查看內容，而不是在內容組之間導航。
有關使用選項卡導航頂級視圖的更多詳細信息，請參閱導航 - 模式中的“選項卡”。
不要使用包含支持滑動手勢內容的選項卡，因為滑動手勢用于在選項卡之間導航。 例如，請避免在地圖中使用內容可選的標簽，或者可以通過滑動來解除項目的列表。
固定的標簽應該與有限數量的標簽一起使用，并且當一致的放置將幫助肌肉記憶。 當有很多或可變數量的標簽時，應使用可滾動標簽。

[圖片上傳失敗...(image-c57781-1552293304414)]
Do.
The tabs switch between equally important facets of store content.

【翻譯】
正確的示范
標簽在商店內容的同等重要方面之間切換。

錯誤的示范

Don't.
The tabs switch between destinations of varied importance within the store.

【翻譯】
錯誤的示范
標簽在商店內在不同重要性的目的地之間切換。

Tab characteristics - 標簽特性

Tabs control the display of content in a consistent location.

【翻譯】
標簽控制內容在一致位置的顯示。

Formatting specifications:

Present tabs as a single row. Wrap tab labels to a second line if needed, and then truncate.
Do not include a set of tabbed content within a tab.
Highlight the tab corresponding to the visible content.
Group tabs together hierarchically. Connect a group of tabs with its content.
Keep tabs adjacent to their content to maintain the relationship between the two.

【翻譯】
格式規格：
將制表符顯示為單行。 如果需要，將選項卡標簽包裝到第二行，然后截斷。
不要在標簽中包含一組標簽內容。
突出顯示與可見內容對應的選項卡。
將選項卡分層組合在一起。 將一組標簽頁與其內容相關聯。
保持標簽與其內容相鄰，以保持兩者之間的關系。

[圖片上傳失敗...(image-ede8bc-1552293304414)]
Do.
Tabs are presented as a single row.

【翻譯】
正確的示范
制表符顯示為單行。

錯誤的示范

Don't.
Tabs are not presented as a single column.

【翻譯】
錯誤的示范
標簽不顯示為單個列。

正確的示范

Do.
Use a content hierarchy such that tabs relate to the currently displayed content.

【翻譯】
正確的示范
使用內容層次結構，使選項卡與當前顯示的內容相關。

[圖片上傳失敗...(image-401ad4-1552293304414)]
Don't.
Tabs should not be nested.

【翻譯】
錯誤的示范
標簽不應嵌套。

Content - 內容

Content presented in tabs can vary widely, even between tabs. For example, tabs showing different years of an artist’s portfolio or tabs containing different types of settings.

All content within a set of tabs should be related under a larger organizing principle (for example, Settings or Directions), with each tab’s content mutually exclusive of the others'.

Tab labels should provide meaningful distinctions that logically organize associated content.

Tab labels may be either all icons or all text. When choosing a text label, use short titles.

Avoid the need for cross-tab comparison of content. Significant cross-tab comparison may indicate the content would benefit from a different organization or presentation that places the content closer together.

【翻譯】
標簽中顯示的內容可能有很大差異，甚至在標簽之間也是如此。 例如，顯示藝術家投資組合不同年份的標簽或包含不同類型設置的標簽。
一組選項卡中的所有內容應根據更大的組織原則（例如，設置或方向）相關聯，每個選項卡的內容與其他選項卡的內容互斥。
標簽標簽應提供有意義的區別，從邏輯上組織相關內容。
標簽標簽可以是所有圖標或所有文本。 選擇文本標簽時，請使用短標題。
避免需要對交叉表進行內容比較。 重要的交叉表比較可以指示內容將受益于將內容更靠近在一起的不同組織或表示。

[圖片上傳失敗...(image-b77b72-1552293304414)]
Do.
A long label exceeding the maximum width of a tab may wrap to a second line before being truncated.

【翻譯】
正確的示范
超過標簽最大寬度的長標簽可能會在截斷之前包裝到第二行。

[圖片上傳失敗...(image-2a4589-1552293304414)]
Don't.
Wrap labels before truncating them. Truncating labels too early can impede comprehension.

【翻譯】

錯誤的示范
在截斷標簽之前包裝標簽。過早截斷標簽可能會妨礙理解。

[圖片上傳失敗...(image-66ebe7-1552293304414)]
Don't.
Don't resize single-line labels. If labels are too long, wrap text across two lines or use scrollable tabs

【翻譯】
錯誤的示范
不要調整單行標簽的大小。如果標簽太長，請將文本跨兩行或使用可滾動標簽

[圖片上傳失敗...(image-46e6b2-1552293304414)]
Don't.
Do not combine text labels with icons. Use either all text labels or all icon labels.

【翻譯】
錯誤的示范
不要將文本標簽與圖標組合。使用所有文字標簽或所有圖標標簽。

Types of tabs - 選項卡的類型

Depending on the platform and the context of use, tabbed content can be presented as either fixed tabs or scrollable tabs.

【翻譯】
根據平臺和使用的上下文，標簽內容可以呈現為固定標簽或可滾動標簽。

Fixed tabs - 固定標簽

Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs in fixed positions, such as switching transportation methods for directions in Google Maps.

Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

【翻譯】
固定標簽同時顯示所有標簽，最適合使用固定位置標簽之間快速轉換的內容，例如在Google地圖中切換路線的交通方式。
固定標簽具有相等的寬度，計算方式為視圖寬度除以標簽數量，或基于最寬的標簽標簽。 要在固定標簽之間導航，請觸摸標簽或向左或向右滑動內容區域。

[圖片上傳失敗...(image-134786-1552293304414)]
Fixed tabs on mobile

【翻譯】
在移動設備上固定標簽

[圖片上傳失敗...(image-69117e-1552293304414)]
Fixed tabs on mobile

【翻譯】
在移動設備上固定標簽

Scrollable tabs - 可滾動的標簽頁

Scrollable tabs display a subset of tabs at any given moment. They can contain longer tab labels and a larger number of tabs than fixed tabs. Scrollable tabs are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels.

To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

【翻譯】
可滾動標簽在任何給定時刻顯示標簽的子集。 它們可以包含較長的選項卡標簽和比固定選項卡更多的選項卡。 可滾動選項卡最適合用于在用戶不需要直接比較選項卡標簽時在觸摸界面中瀏覽上下文。
要在可滾動的標簽頁之間導航，請觸摸標簽頁或向左或向右滑動內容區域。 要滾動標簽頁而不導航，請向左或向右滑動標簽頁。

Scrollable tabs on mobile

【翻譯】
在移動設備上滾動標簽

image

[圖片上傳失敗...(image-5e328a-1552293304414)]
Examples of scrollable tabs

【翻譯】
可滾動標簽頁的示例

Fixed tabs - 固定標簽

The width of each tab can be calculated by taking the width of the view and dividing it by the number of tabs. Alternatively, make all tabs the width of the largest tab.

If the margin between the tab edge and view edge is 16dp or less, use full-width tabs instead of centered tabs.

【翻譯】
每個選項卡的寬度可以通過獲取視圖的寬度并除以選項卡的數量來計算。 或者，使所有選項卡的最大選項卡的寬度。

如果標簽邊緣和視圖邊緣之間的邊距為16dp或更小，請使用全角標簽而不是居中標簽。

Width minimum and maximum (inclusive of padding)

Maximum: 264dp
Minimum: 160dp for larger views, 72 dp for smaller views
Height

48dp
Padding

12dp left and right of text
20dp from bottom for a single line of text, 12dp from bottom for two lines of text
Alignment

Full-width for smaller views
Centered for larger views
Indicator

Height: 2dp
Color: #fff or accent color

【翻譯】
寬度最小值和最大值（包括填充）
最大：264dp
最小值：160dp（較大視圖），72 dp（較小視圖）
高度
48dp
填充
12dp左右文本
20dp從底部為單行文本，12dp從底部為兩行文本
對準
全角的較小視圖
中心為更大的視圖
指示符
身高：2dp
顏色：#fff或強調顏色

Tabs with text only - 僅包含文字的標簽

Text

14sp Roboto Medium
12sp when wrapped across a maximum of two lines
All caps
Horizontally and vertically centered
Active color: #fff or accent color
Unfocused tab color: #fff 70%

【翻譯】
文本
14sp Roboto Medium
12sp當包裹在最多兩行
所有上限
水平和垂直居中
活動顏色：#fff或強調顏色
未聚焦的標簽顏色：#fff 70％

image

Mobile landscape example of same tabs aligned with left keyline

【翻譯】
相同選項卡的移動橫向示例與左鍵盤對齊

image

Mobile landscape example of same tabs centered

【翻譯】
相同標簽的移動橫向示例居中

Tabs with icons and text - 帶有圖標和文本的標簽

Height

72dp
Icon

24 x 24dp
Content alignment

Text and icon are centered horizontally in the tab
Padding

10dp between icon and text
16dp under text

【翻譯】
高度
72dp
圖標
24 x 24dp
內容對齊
文本和圖標在選項卡中水平居中
填充
10dp之間的圖標和文本
16dp下的文本

[圖片上傳失敗...(image-ce73ec-1552293304414)]
Fixed tabs on mobile, icons and text

【翻譯】
固定在移動，圖標和文本上的標簽

[圖片上傳失敗...(image-86a2f8-1552293304414)]
Fixed tabs on mobile, icons and text

【翻譯】
固定在移動，圖標和文本上的標簽

Tabs with icons only - 只有圖標的標簽

Height

48dp
Icon

24 x 24dp
Content alignment

Icon is centered horizontally and vertically in the tab
Padding

12dp under icon

【翻譯】
高度
48dp
圖標
24 x 24dp
內容對齊
圖標在標簽中水平和垂直居中
填充
12dp下的圖標

[圖片上傳失敗...(image-440274-1552293304414)]
Fixed tabs on mobile, icons only

【翻譯】

固定移動設備上的標簽，僅限圖標

[圖片上傳失敗...(image-25ebf9-1552293304414)]
Fixed tabs on mobile, icons only

【翻譯】
固定移動設備上的標簽，僅限圖標

Scrollable tabs - 可滾動的標簽頁

The left-most tab content aligns with the keyline. Alignment varies between landscape and portrait to match the different keylines.

The width of each tab is independently calculated.

Width minimum and maximum (inclusive of padding)

Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
Minimum: 160dp for larger views, 72 dp for smaller views
Height

48dp
Padding

12dp left and right of text
20dp from bottom for a single line of text, 12dp from bottom for two lines of text
Indicator

Height: 2dp
Color: #fff or accent color

【翻譯】
最左側的選項卡內容與關鍵字對齊。 對齊在風景和肖像之間變化，以匹配不同的鍵。
獨立計算每個標簽的寬度。
寬度最小值和最大值（包括填充）
最大值（取較小值）：264dp或（視圖大小減去56dp的值）
最小值：160dp（較大視圖），72 dp（較小視圖）
高度
48dp
填充
12dp左右文本
20dp從底部為單行文本，12dp從底部為兩行文本
指示符
身高：2dp
顏色：#fff或強調顏色

image

Scrollable tab

【翻譯】
可滾動標簽

image

Extremely long tab labels, as shown here, should be avoided. This max-width scrollable tab contains wrapped text.

【翻譯】
應避免極長的選項卡標簽，如此處所示。此最大寬度可滾動標簽包含換行文本。

Text

14sp Roboto Medium
12sp when wrapped across a maximum of two lines
All caps
Vertically and horizontally centered
Active color: #fff or accent color
Unfocused tab color: #fff 70%

【翻譯】
文本
14sp Roboto Medium
12sp當包裹在最多兩行
所有上限
垂直和水平居中
活動顏色：#fff或強調顏色
未聚焦的標簽顏色：#fff 70％

image

Extremely long tab labels, as shown here, should be avoided. These max-width tabs, depicted in landscape mode on mobile, are aligned with the left keyline.

【翻譯】
應避免極長的選項卡標簽，如此處所示。這些最大寬度標簽（在移動設備上以橫向模式描繪）與左鍵盤對齊。

Desktop - 桌面

Width minimum and maximum (inclusive of padding)

Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
Minimum: 160dp for larger views, 72 dp for smaller views
Height

48dp
Alignment

Centered or aligned with left keyline
Text

13sp Roboto Medium
All caps
Horizontally and vertically centered
Wraps across a maximum of two lines
Active color: #fff or accent color
Unfocused tab color: #fff 70%
Padding

24dp left and right of text
20dp from bottom for a single line of text, 12dp from bottom for two lines of text
First tab text left padding: 80dp
Indicator

Height: 2dp
Color: #fff or accent color

【翻譯】
寬度最小值和最大值（包括填充）
最大值（取較小值）：264dp或（視圖大小減去56dp的值）
最小值：160dp（較大視圖），72 dp（較小視圖）
高度
48dp
對準
以左鍵盤為中心或對齊
文本
13sp Roboto Medium
所有上限
水平和垂直居中
最多包含兩行
活動顏色：#fff或強調顏色
未聚焦的標簽顏色：#fff 70％
填充
24dp左右文本
20dp從底部為單行文本，12dp從底部為兩行文本
第一個標簽文本左邊填充：80dp
指示符
身高：2dp
顏色：#fff或強調顏色

[圖片上傳失敗...(image-3c2618-1552293304414)]
Desktop tabs

【翻譯】
桌面選項卡

**Tab touch target animation - 標簽觸摸目標動畫 **

Note: Implementations of this component may vary by platform. By using standard platform implementations, you will receive related future improvements.

【翻譯】
注意：此組件的實現可能因平臺而異。通過使用標準平臺實現，您將收到相關的未來改進。

Animation of tab touch target.

【翻譯】
選項卡觸摸目標的動畫。