颜色的材料设计灵感来自大胆的色调与静音环境，深阴影和明亮的亮点并列。
调色板
Material从现代建筑，路标，路面标记带和运动场所提取线索。 颜色应该是意想不到的和充满活力。
此调色板包含主要颜色和重点颜色，可用于插图或开发您的品牌颜色。 他们被设计为彼此和谐地工作。 调色板以原色开始，并填充光谱，为Android，Web和iOS创建完整而可用的调色板。 Google建议使用500种颜色作为应用程序中的主要颜色，其他颜色作为重音色。
主题通过表面阴影，阴影深度和墨水不透明度实现一致的应用样式。
配色方案
选择一个调色板
您的应用程序的调色板可以通过使用适合您的品牌的自定义调色板来定义，例如单色，黑白，全色或中性。 或者，您可以使用材质设计调色板。 所有调色板应在不同UI元素之间包含足够的对比度。
使用Material Design调色板
没有现有配色方案的应用程序可以从材料设计调色板中选择颜色。 将您选择的颜色限制为主调色板中的三种色调和辅助调色板中的一种强调颜色。
使用来自主调色板中的两个紫色色调和一个强调绿色色调的调色板示例。
UI颜色应用示例
原色
在调色板中使用原色时，该颜色应该在所有屏幕和组件中使用最广泛。
当需要更暗或更浅的颜色时，主调色板拥有不同的颜色的示例。
次要色
具有辅助颜色的调色板可以使用该颜色来指示相关动作或信息。
次要颜色可以是原色的更暗或更浅的变化。
当需要更暗或更浅的颜色时，次要调色板拥有不同的颜色的示例。
AccentColor
应用于浮动操作按钮和交互式元素，例如：
- 文本字段和游标
- 文本选择
- 进度条
- 选择控件，按钮和滑块
- 链接
Flaoting Action Button使用Accent color
switch（开关）使用Accent color
正确
正确的做法
只能在指向链接的文字上使用Accent color
错误
错误的做法
不要为所有的文本颜色使用Accent color
正确
正确的做法
在主要操作按钮或组件（switch或者slider）使用Accent color
错误
错误的做法
不要在app bar或者大面积区域使用Accent color。避免为Flaoting Action Button和背景色使用相同的颜色
App bar，toolbar和系统状态栏可以使用你自定义的Accent color。在这个例子中toolbar使用的是500号的indigo，状态栏使用的是700号
网络连接和按钮可以使用你自定义的Accent color
文本区域和选项控件可以使用你自定义的Accent color
选中的文本可以使用你自定义的Accent color
Alternative accent colors
深色调和浅色调
如果您的Accent Color太浅或太暗，无法与背景颜色充分对比，请使用深色或浅色的颜色。
正确
正确的做法
在太亮或太暗的背景颜色上使用后备强调色。
错误
错误的做法
如果没有足够的对比度，请勿在背景颜色上使用Accent color。
主颜色变化
另一种替代的强调颜色是您的主要颜色的500版本在白色背景。
但是，如果您的背景颜色已经是主颜色的500版本，请将颜色设置为白色100％或黑色54％。
文本和背景颜色
文本不透明度
文本可以以不同的不透明度显示，以表达某些信息相对于其他信息的重要性。 用于文本的不透明度级别取决于您的背景是更暗还是更浅。
浅色背景上使用深色文本
对于浅色背景上的深色文本，应用以下不透明度级别：
- 最重要的文本的不透明度为87％。
- 次要文本（在视觉层次结构中较低）具有54％的不透明度。
- 文本提示（如文本字段和标签中的文本提示）和禁用文本的视觉突出性甚至更低，透明度为38％。
浅色背景上使用深色文本
| Dark text (#000000) | Opacity |
|---|---|
| Primary text | 87% |
| Secondary text | 54% |
| Disabled text, hint text, and icons | 38% |
| Dividers | 12% |
在深色的背景的白色文本
表格值中继黑色背景上的白色文本的重要性的相对水平。
出现在彩色背景上的白色文字应该以100％的不透明度显示。
在深色的背景的白色文本
| Light text (#FFFFFF) | Opacity |
|---|---|
| Primary text100% | |
| Secondary text | 70% |
| Disabled text, hint text, and icons | 50% |
| Dividers | 12% |
使用不透明度代替灰色
透明的黑色或白色文本保持清晰，活泼，背景颜色变化。 这使得它比同样上下文中的灰色文本更灵活。
错误
错误的做法
如果背景颜色变为洋红色，则白色背景上的灰色文本（十六进制值＃727272）变得难以阅读。
正确
正确的做法
黑色文本，设置为0.54不透明度，确保最小程度的可读性和与新的背景颜色的颜色和谐。
图标和其他元素
像图标这样的元素受益于在38％不透明度下具有黑色或白色（而不是特定颜色）的十六进制值，使得它们在任何颜色的背景上工作。
| Dark icons (#000000) | Opacity |
|---|---|
| Active icon | 54% |
| Inactive icon | 38% |
| Light icons (#FFFFFF) | Opacity |
|---|---|
| Active icon | 100% |
| Inactive icon | 50% |
Themes
主题让您对应用程序应用一致的界面。 主题指定表面的暗度，阴影的水平和墨水元素的适当不透明度。 为了提高应用程序之间的一致性，可以选择浅色和深色主题。
LightTheme
- Status bar
- App bar
- Background
- Cards/Dialogs
DarkTheme
- Status bar
- App bar
- Background
- Cards/Dialogs
网友评论