写在前面
大家好，昨天我们说到了：为什么你总是觉得配色那么“愁”是因为不够系统，问题来了我现在会建立颜色系统了，那我怎么应用呢？今天给大家准备的就是颜色的应用，我们如何让使用颜色，有哪些原则，应用到那里合适等等，这些问题都在这篇文章中，里面列举到了多个APP界面的配色方法说明，抓紧时间看一看吧。

用法

我们追求的是颜色以一致且有意义的方式应用于 UI 元素和组件。今天的这些指南描述了颜色应用很重要的各种 UI 组件和元素。

原则

顶部和底部应用栏

颜色应用于顶部和底部应用栏的方式可帮助用户识别它们并了解它们与周围元素的关系。

识别应用栏
顶部和底部应用栏使用应用的主要颜色。系统栏可以使用原色的深色或浅色变体来将系统内容与顶部应用栏内容分开。

//-做此顶部应用栏使用原色（紫色 500），系统栏使用深色原色（紫色 700）。-//
要强调应用栏和其他表面之间的差异，请在附近的组件（例如浮动操作按钮 (FAB)）上使用辅助颜色。

//-做-此底部应用栏使用主色（蓝色 700），浮动操作按钮上使用辅助色（橙色 500）。-//

//-切记-如果底部应用栏和浮动操作按钮颜色相同，请使用阴影或替代方式在它们之间创建足够的区别。-//

将应用栏与背景混合
当应用的顶部或底部应用栏颜色与背景颜色相同时，它们会混合在一起，强调应用的内容而不是其结构。

//-此应用程序的顶部应用程序栏颜色和背景颜色都是主要颜色：白色。但是，在滚动时，顶部应用栏会出现阴影，表明它的高度高于滚动在其后面的内容。-//

//-此应用程序明亮、无缝的布局使用其主要的蓝色（蓝色 700）颜色作为应用程序栏、底部导航和背景色，因此单个元素不那么突出，而内容更突出。激活状态使用二级黄色。它包括底部导航上的阴影以显示表面之间的高度划分。-//

背景

背景有前后层。为了区分这两个图层，基线背层颜色是你的原色，基线前层是白色。

//-此应用程序在背景的背面层使用其原色（紫色 800）。文本字段是浅色主要变体（紫色 700）。次要颜色（红色 700）用作航班票价的重点。-//

//-这个应用程序使用原色（粉红色 100）作为背景的背面层，使用原色（粉红色 900）作为排版和图像。此外，辅助色（粉红色 50）用于前层的膨胀片。-//


方式和表面

工作表和表面（例如底部工作表、导航抽屉、菜单、对话框和卡片）的基线颜色为白色。这些组件可以结合颜色以在其他表面之间形成对比。对比度可以使表面边缘明显，表明表面重叠时的高度差异。

//-本产品已将底部工作表和导航抽屉中的默认白色更改为主要颜色。

1.本产品在底片部分使用原色（紫色500）而不是基线白色。

2.本产品的导航抽屉使用其原色（紫色500）而不是基线白色。-//

模态表
在临时出现在屏幕上的表面上使用对比色，例如导航抽屉和底部工作表。通常这些表面是白色的，但你可以使用应用程序的主要或次要颜色。

//-此应用程序在底部导航抽屉上使用其主要颜色蓝色（蓝色 700），帐户切换器使用主要深色变体（蓝色 800），以及用于选择的辅助颜色（橙色 500）。-//

//-这个应用程序使用它的主要颜色（白色）作为它的模态导航抽屉，在深色字体和导航之间创建最大的对比度。白色纱布用于使其后面的内容不那么引人注目，因为导航抽屉与背景颜色相同。-//

//-此应用程序在右下角显示一张用其原色（粉红色 500）着色的工作表。点击后，工作表会展开。-//


卡片
卡片的基线颜色是白色。可以定制这种颜色来表达品牌或提高易读性。卡片文本和图标也可以使用颜色主题来提高易读性。

//-这些卡片的表面使用原色（紫色 500）。该应用程序的背景颜色为白色。次要颜色（青色 200）用于数据可视化。-//

//-卡片可以继承颜色以展示选择或重要性。-//


当卡片的文本和图标出现在图像前面时，它们可能难以阅读。为了提高易读性，您可以使用颜色为文本和图标创建表面。

//-这张卡片使用彩色纱布来确保文字清晰易读。-//


按钮、芯片和选择控件

按钮、芯片和选择控件可以通过对它们应用主要或次要颜色来强调。

颜色类别
包含、文本和轮廓按钮的基线颜色是您的主要颜色。

浮动操作按钮和扩展浮动操作按钮的基线颜色是您的次要颜色。

选择控件的基线颜色是您的辅助颜色。

//-此应用程序的颜色主题由原色（紫色 500）、原色深色变体（紫色 600）和二次色（青色 200）组成。

1. 本产品使用主色（紫色 500）作为底部应用栏和辅助色（青色 200）作为浮动操作按钮和选择控件的重点。

2. 本产品使用次要颜色（青色 200）作为选定列表项的重点。-//


按钮、芯片和选择控件

可以使用主要或次要颜色来强调按钮、芯片和选择控件。

//-此应用程序使用其原色（粉红色 100）作为其扩展的浮动操作按钮和芯片。它使用其主要的深色变体（粉红色 900）作为滑块。-//

浮动操作按钮 (FAB)
浮动操作按钮 (FAB) 应该是屏幕上最容易识别的项目之一。

使用颜色在 FAB 和周围元素（例如应用栏）之间创建对比。您的辅助颜色是用于 FAB 的基线颜色。如果您的画布使用多种颜色，您的 FAB 可以改用单色着色，以从内容中脱颖而出。

//-此应用程序的辅助颜色（橙色 500）应用于 FAB，与周围的 UI 形成对比。-//


//-此应用程序的颜色主题对所有按钮、选择控件和图标使用主要白色和次要黑色。这些组件之所以脱颖而出，是因为它们与生动的多色内容形成鲜明对比。-//


排版和图像

颜色可以表达文本相对于其他文本的重要性是更大还是更低。颜色还可以确保文本在放置在图像或背景上方时仍然清晰易读，这可能会导致难以阅读它们前面的文本。

排版层次结构
颜色可以增加文本的可见性和重要性级别。

//-此应用程序的颜色主题由主色（紫色 500）和辅助色（橙色 600）组成。橙色突出了卡片的标题，紫色出现在选项卡和按钮上。-//


标题和标签
重要的文本，如标签和标题，可以使用您的主要或次要颜色。

//-此应用程序使用其次要颜色（橙色 800）来强调并引起对标题的关注。-//


//-此应用程序使用其主要颜色（绿色 800）作为选项卡，权重变化指示选中和未选中状态。-//

文本易读性
当文本放置在图像上方时，通常会导致易读性问题。在文本和图像之间创建一个彩色层可以确保文本保持清晰。

//-此应用程序在图像上方应用黄色稀松布，以确保其上方的文本清晰易读。-//

图标

图标有助于识别操作并提供信息。它们的颜色应与背景形成对比，以确保它们清晰可辨。


//-此应用程序为其图标使用其主要颜色（绿色 800）和辅助颜色（橙色 800）。-//

//-Shrine 使用其主要的深色变体（粉红色 900）作为图标。-//

本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：术心！