Color - 顏色

Color palette - 調(diào)色板

Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.

【翻譯】
材料從現(xiàn)代建筑，路標(biāo)，路面標(biāo)記帶和運動場所提取線索。顏色應(yīng)該是意想不到的和充滿活力。

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.

【翻譯】
此調(diào)色板包含主要顏色和重點顏色，可用于插圖或開發(fā)您的品牌顏色。 他們被設(shè)計為彼此和諧地工作。 調(diào)色板以原色開始，并填充光譜，為Android，Web和iOS創(chuàng)建完整而可用的調(diào)色板。 Google建議使用500種顏色作為應(yīng)用程序中的主要顏色，其他顏色作為重音色。

Themes enable consistent app styling through surface shades, shadow depth, and ink opacity.

【翻譯】
主題通過表面陰影，陰影深度和墨水不透明度實現(xiàn)一致的應(yīng)用樣式。

Color schemes - 配色方案

Choosing a color palette - 選擇一個調(diào)色板

Your app's color palette may be defined by using a custom palette suited to your brand, such as monochromatic, black and white, full color, or neutral. Alternatively, you may use the material design color palette. All color palettes should include sufficient contrast between different UI elements.

【翻譯】
您的應(yīng)用程序的調(diào)色板可以通過使用適合您的品牌的自定義調(diào)色板來定義，例如單色，黑白，全色或中性。 或者，您可以使用材質(zhì)設(shè)計調(diào)色板。 所有調(diào)色板應(yīng)在不同UI元素之間包含足夠的對比度。

Using the material design color palette - 使用material design調(diào)色板

Apps that don’t have existing color schemes may select colors from the material design color palette. Limit your selection of colors to three hues from the primary palette and one accent color from the secondary palette.

【翻譯】
沒有現(xiàn)有配色方案的應(yīng)用程序可以從材料設(shè)計調(diào)色板中選擇顏色。將您選擇的顏色限制為主調(diào)色板中的三種色調(diào)和輔助調(diào)色板中的一種強調(diào)顏色。

Example of a color palette using two purple hues from the primary palette and one accent green hue.

【翻譯】
使用來自主調(diào)色板中的兩個紫色色調(diào)和一個強調(diào)綠色色調(diào)的調(diào)色板示例。

Example of UI color application

【翻譯】
UI顏色應(yīng)用程序示例

Primary color - 主色

When using a primary color in your palette, this color should be the most widely used across all screens and components.

【翻譯】
在調(diào)色板中使用主色時，該顏色應(yīng)該在所有屏幕和組件中使用最廣泛。

Example of a primary color palette with variations for when a darker or lighter version of the color is needed

【翻譯】
具有變化的主調(diào)色板的示例，當(dāng)需要更暗或更淺的顏色時

**Secondary color - 輔色

Palettes with a secondary color may use this color to indicate a related action or information.

【翻譯】
具有輔助顏色的調(diào)色板可以使用該顏色來指示相關(guān)動作或信息。

The secondary color may be a darker or lighter variation of the primary color.

【翻譯】
輔助顏色可以是原色的更暗或更淺的變化。

Example of a secondary palette with variations for when a darker or lighter version of the color is needed

【翻譯】
具有變體的輔助調(diào)色板的示例，當(dāng)需要更深或更淺的顏色時

Accent color - 強調(diào)色

The accent should be used for the floating action button and interactive elements, such as:

【翻譯】
重音應(yīng)用于浮動操作按鈕和交互式元素，例如：

Text fields and cursors - 文本字段和游標(biāo)
Text selection - 文本選擇
Progress bars - 進(jìn)度條
Selection controls, buttons, and sliders - 選擇控件，按鈕和滑塊
Links - 鏈接

Floating action button using the accent color

【翻譯】
浮動操作按鈕使用強調(diào)顏色

Switch using the accent color

【翻譯】
使用強調(diào)顏色切換

正確的示范

Do.
Only use the accent color for body text to accent a web link.

【翻譯】
正確的示范
僅使用正文文本的強調(diào)顏色強調(diào)Web鏈接。

錯誤的示范

Don't.
Don’t use the accent color for body text color.

【翻譯】
錯誤的示范
不要對全部文字顏色使用強調(diào)顏色。

正確的示范

Do.
Use the accent color for your primary action button and components like switches or sliders.

【翻譯】

正確的示范
使用主要操作按鈕和組件（如開關(guān)或滑塊）的強調(diào)顏色。

錯誤的示范

Don't.
Don’t use the accent color for app bars or larger areas of color. Avoid using the same color for the floating action button and the background.

【翻譯】
錯誤的示范
不要對應(yīng)用欄或更大的顏色區(qū)域使用強調(diào)顏色。避免對浮動操作按鈕和背景使用相同的顏色。

The App bar, toolbar and system status bar can be customized using your palette accent color. In this example, the toolbar uses the 500 version of indigo, while the status bar uses the 700 version.

【翻譯】
應(yīng)用欄，工具欄和系統(tǒng)狀態(tài)欄可以使用調(diào)色板強調(diào)顏色進(jìn)行自定義。在此示例中，工具欄使用500版本的靛藍(lán)，而狀態(tài)欄使用700版本。

Web links and buttons can be customized using your palette accent color.

【翻譯】
Web鏈接和按鈕可以使用調(diào)色板強調(diào)顏色進(jìn)行自定義。

Text fields and selection controls can be customized using your palette accent color.

【翻譯】
文本輸入和選擇控件可以使用調(diào)色板強調(diào)顏色進(jìn)行自定義。

Text selection can be customized using your palette accent color.

【翻譯】
文本選擇可以使用調(diào)色板強調(diào)顏色進(jìn)行自定義。

Alternative accent colors - 備用強調(diào)色

Darker shades and lighter tints - 深色調(diào)和淺色調(diào)

If your accent color is too light or dark to sufficiently contrast with the background color, use a darker shade or lighter tint of the accent color instead.

【翻譯】
如果您的強調(diào)色太淺或太暗，無法與背景顏色充分對比，請使用深色或淺色的強調(diào)顏色。

正確的示范

Do.
Use a fallback accent color over background colors that are too light or too dark.

【翻譯】
正確的示范
在太亮或太暗的背景顏色上使用后備強調(diào)色。

錯誤的示范

Don't.
Don’t use the accent color over a background color if there isn’t enough contrast.

【翻譯】
錯誤的示范
如果沒有足夠的對比度，請勿在背景顏色上使用強調(diào)顏色。

Primary color variations - 主顏色變化

Another alternative accent color is the 500 version of your primary color on white backgrounds.

【翻譯】
如果你的強調(diào)色無法正常顯示，那么在白色背景上會使用飽和度 500 的基礎(chǔ)色。

However, if your background color is already the 500 version of your primary color, make your accent color either white 100% or black 54%.

【翻譯】
但是，如果您的背景顏色已經(jīng)是主顏色的500版本，請將強調(diào)顏色設(shè)置為白色100％或黑色54％。

Text and background colors - 文本和背景顏色

Text opacity - 文本不透明度

Text may be displayed with different degrees of opacity to convey how important certain information is relative to other information. The level of opacity used for text depends on whether your background is darker or lighter.

【翻譯】
文本可以以不同的不透明度顯示，以表達(dá)某些信息相對于其他信息的重要性。用于文本的不透明度級別取決于您的背景是更暗還是更淺。

Dark text on light backgrounds - 在亮背景上的暗色文本
For dark text on light backgrounds, apply the following opacity levels:
1.The most important text has an opacity of 87%.
2.Secondary text, which is lower in the visual hierarchy, has an opacity of 54%.
3.Text hints (like those in text fields and labels) and disabled text have even lower visual prominence with an opacity of 38%.

【翻譯】
對于淺色背景上的深色文本，應(yīng)用以下不透明度級別：
1.最重要的文本的不透明度為87％。
2.次要文本（在視覺層次結(jié)構(gòu)中較低）具有54％的不透明度。
3.文本提示（如文本字段和標(biāo)簽中的文本提示）和禁用文本的視覺突出性甚至更低，透明度為38％。

Dark text on light backgrounds

【翻譯】
在亮背景上的暗色文本

White text on dark backgrounds - 在黑暗的背景的白色文本
The table values relay relative levels of importance for white text on dark backgrounds.
White text appearing on colored backgrounds should do so at an opacity of 100%.

【翻譯】
表格值中繼黑色背景上的白色文本的重要性的相對水平。 出現(xiàn)在彩色背景上的白色文字應(yīng)該以100％的不透明度顯示。

White text on dark backgrounds

【翻譯】
在黑暗的背景的白色文本

Use opacity instead of grey - 使用不透明度代替灰色
Black or white text that is transparent remains legible and vibrant against background color changes. This makes it more flexible than grey text in the same contexts.

【翻譯】
透明的黑色或白色文本保持清晰，活潑，背景顏色變化。這使得它比同樣上下文中的灰色文本更靈活。

錯誤的示范

Don't.
Grey text (hex value of #727272) on a white background becomes hard to read if the background color changes to magenta.

【翻譯】
錯誤的示范
如果背景顏色變?yōu)檠蠹t色，則白色背景上的灰色文本（十六進(jìn)制值＃727272）變得難以閱讀。

Do.
Black text, set to a 0.54 opacity, ensures a minimum degree of legibility and color harmony with new background colors.

【翻譯】
正確的示范
黑色文本，設(shè)置為0.54不透明度，確保最小程度的可讀性和與新的背景顏色的顏色和諧。

**Icons and other elements - 圖標(biāo)和其他元素 **

Elements like icons benefit from having a hex value of black or white (rather than a specific color) at 38% opacity so that they work on backgrounds of any color.

【翻譯】
像圖標(biāo)這樣的元素受益于在38％不透明度下具有黑色或白色（而不是特定顏色）的十六進(jìn)制值，使得它們在任何顏色的背景上工作。

Themes - 主題

Themes let you apply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.

【翻譯】
主題是對應(yīng)用提供一致性色調(diào)的方法。樣式指定了表面的亮度、陰影的層次和字體元素的適當(dāng)不透明度。為了提高應(yīng)用間的一致性，提供兩種主題選擇深色和淺色

Light theme - 淺色主題

1. Status bar
2. App bar
3. Background
4. Cards/Dialogs

Dark theme - 深色主題

1. Status bar
2. App bar
3. Background
4. Cards/Dialogs