颜色的UI应用
颜色通过一致且有意义的方式应用在UI元素和组件中。
目录
用法
顶部和底部应用栏
背景
动作条和表面
按钮、纸片和选择控件
文字和图标
用法
以下指南说明了在各种UI组件和元素中颜色应用的重要性。
原则
• 一致性
在整个UI中，颜色的使用应保持统一，并且与其所代表的品牌匹配兼容。
• 独特性
颜色应该让不同元素产生差异，使它们之间有足够的对比。
• 目的性
颜色应有目的地使用，因为它能通过多种方式传达意义，例如表示元素间的关系和结构中的层次。
顶部和底部应用栏
将颜色应用于顶部和底部应用栏，有助于用户识别理解它们与周边UI元素的关系。
识别应用栏
顶部和底部应用栏都使用应用程序的主色。系统栏可使用主色的深浅衍生色来区分系统栏和顶部应用栏中的内容。
正确示例
主色（紫色500）用于顶部应用栏，系统栏上使用主色的深衍生色（紫色700）
为了强调应用栏与其它表面的差异，可在相邻组件（如FAB-浮动操作按钮）上使用辅助色。
正确示例
主色（蓝色700）用于底部应用栏，辅色（橙色500）用于浮动操作按钮
谨慎使用
如果底部应用栏和浮动操作按钮颜色相同，最好使用阴影或相关方式给它们创造足够大的区别。
融合应用栏与背景
当应用程序的顶部或底部应用栏的颜色与背景色一致时会融合在一起，从而突出内容而非结构。
这个应用程序的顶部应用栏和背景颜色都是主色（白色），但在滚动时，顶部应用栏获会产生一个阴影，表明它的海拔高于其背后的内容。
这个应用程序在应用栏、底部导航栏和背景上使用主色（蓝色700）对界面进行了明亮、无缝的布局，所以弱化了独立元素，突出了内容。激活状态使用了辅助色黄色。它的底部导航包含阴影，可以表示两个面之间具有高度差。
背景
背景（backdrop）包含前后两层。为区分这两个图层，现规定后层基准色是主色，前层基准色是白色。
这个APP背景后层使用了主色（紫色800）。文本字段是主色浅色衍生色（紫色700）。辅助色（红色700）用来突出机票费用。
这个应用程序的背景后层使用了主色（粉红100），文本和图标使用了主色深衍生色（粉红900）。另外，辅助色（粉红50）用于前层动作条的扩展。
动作条和表面
动作条和表面（例如底部动作条、导航抽屉、菜单、弹框和卡片）的基准色都是白色。这些组件可以结合颜色与其它表面产生对比。对比可让表面的相交边缘明显，在层叠时表现出海拔高度的差异。
这个产品在底部动作条和抽屉导航上将默认的白色改为了主色。
1. 产品在底部动作条上部分使用主色（紫色500）代替基准色白色
2. 产品在抽屉导航上使用主色（紫色500）代替基准色白色
模态动作条
对临时出现在屏幕上的表面使用对比色，例如抽屉导航和底部动作条。通常这些表面是白色的，但是你也可以使用应用程序的主色或辅助色。
这个应用程序在底部抽屉导航上使用主色（蓝色700），账户切换使用主色深衍生色（蓝色800），选中状态使用辅助色（橙色500）。
这个应用程序在其模态抽屉导航上使用了主色（白色），使深色的文本与导航形成了最大对比。由于抽屉导航与背景颜色相同，所以使用了一个白色遮罩层来弱化后面的内容。
这个应用程序右下角显示了一个动作条，颜色为主色（粉红500），点击后会扩展。
卡片
卡片的基准色是白色，可以自定义这种颜色来表现品牌或提高可读性。卡片内的文本和图标也可使用颜色主题来提高其可读性。
这些卡片的表面使用主色（紫色500），应用程序的背景是白色，辅助色（青色200）用于数据可视化。
卡片可通过颜色继承来表示选中或重要性。
当卡片中的文本和图标出现在图片上时，可能难以阅读。为提高可读性，可在文本和图标间创建一个颜色层。
这个卡片采用了多种颜色的遮罩层来确保文本清晰可读。
按钮、纸片和选择控件
按钮、纸片（chips）和选择控件可以通过使用主色或辅助色来加以突出。
颜色分类
• 容器、文本和线框按钮的基准色是主色。
• 浮动操作按钮和可扩展浮动操作按钮的基准色是辅助色。
• 选择控件的基准色是辅助色。
这个应用程序的颜色主题由主色（紫色 500）、主色深衍生色（紫色600）和辅助色（青色200）组成。
1. 产品在底部应用栏使用主色（紫色500），而辅助色（青色200）用来强调浮动操作按钮和选择控件。
2. 产品使用辅助色（青色200）来强调已选列表项。
按钮、纸片和选择控件
主色或辅助色可用来强调按钮、纸片和选择控件。
这个应用程序在其已扩展的浮动操作按钮和纸片上使用了主色（粉红100），在滑块上使用了主色深衍生色（粉红900）。
正确示例（绿色）
选择控件可以沿用应用程序的辅助色。
错误示例（红色）
不要在警报上使用任何品牌色，这有助于它们突出显示。
浮动操作按钮（FAB）
浮动操作按钮（FAB）应是界面中最易识别的按钮之一。
利用颜色在FAB与其相邻元素（比如应用栏）之间创造对比。辅助色是FAB的基准色。如果你的界面有多种颜色，FAB可以选用单色来使其在内容中突出。
这个应用程序的FAB使用了辅助色（橙色500），与周围的UI形成鲜明对比。
这个应用程序的颜色主题在所有按钮、选择控件和图标上使用了主色（白色）和辅助色（黑色）。这些组件之所以突出是因为它们与色彩丰富生动的内容形成了鲜明的对比。
文字和图标
颜色可以表示文本间的相对重要程度。当文本出现在各种使其难以阅读的图片或背景之上时，运用颜色可确保它们保持清晰可读。
文字层级
颜色可提高文本的可见性和重要等级。
这个应用程序的颜色主题由主色（紫色500）和辅助色（橙色600）组成。橙色强调了卡片的主题，紫色出现在选项卡和按钮上。
标题和选项卡
重要文本（如选项卡和标题）可以使用主色和辅助色。
这个应用程序使用了辅助色（橙色800）来强调和突出标题。
这个应用程序在选项卡上使用了主色（绿色800），字体粗细的不同表明已选或未选状态。
正确示例
使用主色或辅助色强调较短的文本，例如标题。
正确示例
可以使用主色或辅助色来突显链接。
谨慎使用
避免在正文上使用高明度的主色或辅助色。
文本可读性
当文本置于图像上时，经常会引起可读性问题。在文本和图像间创建一个颜色层可以确保文本清晰可读。
这个应用程序在图片上使用了一个黄色半透明遮罩层，确保上边的文本清晰可读。
图标
图标有助于识别操作和提供信息。它们的颜色应与其背景色形成鲜明对比，以确保清晰易辨。
这个应用程序在图标上使用了主色（绿色800）和辅助色（橙色800）。
Shine（一款电商app，详情请见2.8章节）在图标上使用了主色深衍生色（粉红900）。
*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考。
