了解了关于颜色的基本概念之后，这一节我们来看如何在App的布局设计中使用颜色。通常，在一个UI中，我们应该使用两类颜色。
- 一类叫做Primary Color，这里的Primary Color和RGB中的Primary Color含义是不同的。简单说，它指一个UI看过之后能给我们留下印象的主要的颜色；
- 另一类叫做Secondary Color，它用来在基于Primary Color的UI上，突出需要注意的内容，例如：按钮、浮动文字、输入框、指针、进度条、链接、标题等等；
来看一些Google提供的例子：
在这张图里，primary color是紫色，secondary color是绿色。看到这里，大家也就能明白为什么刚才我们说的是应该使用两类颜色，而不是两个颜色了。尽管紫色是这个UI的primary color，但是，文章的标题和副标题，使用了两种略有差别的紫色。而绿色作为secondary color，突出了UI中可以交互的部分。
有时，我们也可以只通过primary color的变化进行设计，而不使用secondary color。例如这样：
这次，UI的primary color是绿色。然后，系统状态栏和搜索图标，分别用了两种primary color的变体。甚至，还用primary color替代了secondary color用作了浮动按钮的颜色。这样的UI不但没有问题，还会给人更简洁一致的视觉感受。
常用的Primary color和Secondary color
接下来，你可能会想，什么颜色可以作为primary color呢？又该如何选择与之配合的secondary color呢？这里，Google给了我们一些建议：
上面这18种颜色都是适合作为primary color的。并且，以其中的每一种颜色为基础，Google都提供了一组备选颜色可以供我们作为辅助颜色：
这里我们只罗列了其中的一部分，完整的色彩列表可以在这里找到。
从图中可以看到，primary color就是每一个颜色组中值为500的颜色。如果你不采用secondary color，就可以从其余50-900的颜色中，选用1到2种来体现UI上不同的部分。而A100 - A700这些颜色，可以用于用户交互，例如：高亮显示。这些A开头的颜色，叫做accent color。
如果你决定使用Secondary color，那么一定不要使用primary color的变体作为secondary color就好了。它可以和primary color颜色接近，也可以和primary color形成强烈对比，这都是没问题的。例如下面的粉色和灰色，都可以作为蓝色的secondary color：
因此，如果你没有特别好的点子，就从这些颜色开始你的设计，它们至少可以保证你不犯一些基本的错误，并且满足绝大多数人的视觉习惯。
关于Material Design的Sketch插件
接下来，我们介绍两个和Material Design相关的Sketch插件。它们可以让我们在设计中方便使用上面提到的各种颜色。
Material design color palette
第一个，叫做Material design color palette。下载完成后，我们可以找到一个叫做material-design-color-palette.sketchplugin的文件。然后，打开Sketch，选择Sketch -> Preferences，在弹出的对话框中，点击Plugins Tab，把之前的sketchplugin文件拖进来就安装好了。
这个插件有三个功能，即在Sketch的画布中，用三种不同的方式，显示Material Design的颜色，方便我们选择和参考：
第一种，是我们刚才列出来的所有primary color的形式，选择Plugins -> Material Design Color Palette -> Value，或者按Ctrl + Shift + V，这时Sketch会弹出一个对话框，要求我们选择一个色彩级别，如果我们指定成500，就是所有的primary colors了。
第二种，是我们刚才列出每一种色彩级别的形式，按Ctrl + Shift + H，然后选择要显示的色彩，Sketch就会列出这种色彩的所有级别了。
第三种，这个插件还可以为我们生成一些色彩搭配。按Ctrl + Shift + S，这时Sketch会让我们选择primary color，例如：Indigo；然后，Sketch会让我们选择accent color，例如：pink。这个插件就会为我们生成下面的色彩搭配供我们参考了。
Sketch Palettes
第二个，叫做Sketch Palettes。安装方法和之前是一样的，我们就不重复了。这个插件可以把Material Design的色彩加入Sketch的色盘，方便我们选择。
这个项目除了对应的sketchplugin文件之外，还有一个Palettes文件夹，里面包含了三个色盘文件：
- ios.sketchpalette：iOS设计规范中定义的颜色；
- material-design.sketchpalette：material design中定义的颜色；
- sketch-default.sketchpalette：Sketch默认的颜色；
我们可以把这些文件加载到Sketch中。点击Plugins -> Sketch Palettes -> Load Palette...，然后，选择对应的色盘文件，Sketch就会提示我们色盘添加的位置。从下面的图中红色箭头的位置可以看到，Sketch包含了两个位置，一个是Global Colors，所有的Sketch文件都可以使用这里的颜色；另一个是Document Colors，只有当前的Sketch文件可用。
把需要的色盘添加到Sketch之后，用起来就更方便了。
一些例子
在这一节最后，我们再通过一些实例来回顾一下之前讲过的设计概念。
首先，让secondary color用于突出UI中需要注意的部分，不要让它占据UI的绝大部分篇幅。
其次，secondary color可以用于当前交互UI的提示，或者高亮选择提示：
第三，不要让secondary color用于系统的状态栏、或者占据UI的绝大部分篇幅。当按钮等交互元素和secondary color背景有重叠的时候，不要用让这些交互元素使用secondary color。
第四，如果secondary color相对于primary color过暗，考虑使用secondary color更明亮的变体：
第五，可以只用primary color和primary color的变体来区分UI的不同部分：
第六，如果图片占据UI的绝大部分，可以考虑使用单色UI来凸显图片的部分：
这里多说一句，单色UI并不是指只用一个颜色的UI。实际上，如果用HSB的方式表达，只要保持H不变，修改S和B，得到的颜色，都可以列为单色之列。当然，之前我们提到的Material Design的各个级别的颜色，也属于单色。
