了解了關于顏色的基本概念之后，這一節(jié)我們來看如何在App的布局設計中使用顏色。通常，在一個UI中，我們應該使用兩類顏色。
- 一類叫做Primary Color，這里的Primary Color和RGB中的Primary Color含義是不同的。簡單說，它指一個UI看過之后能給我們留下印象的主要的顏色；
- 另一類叫做Secondary Color，它用來在基于Primary Color的UI上，突出需要注意的內(nèi)容，例如：按鈕、浮動文字、輸入框、指針、進度條、鏈接、標題等等；
來看一些Google提供的例子：
在這張圖里，primary color是紫色，secondary color是綠色?？吹竭@里，大家也就能明白為什么剛才我們說的是應該使用兩類顏色，而不是兩個顏色了。盡管紫色是這個UI的primary color，但是，文章的標題和副標題，使用了兩種略有差別的紫色。而綠色作為secondary color，突出了UI中可以交互的部分。
有時，我們也可以只通過primary color的變化進行設計，而不使用secondary color。例如這樣：
這次，UI的primary color是綠色。然后，系統(tǒng)狀態(tài)欄和搜索圖標，分別用了兩種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種來體現(xiàn)UI上不同的部分。而A100 - A700這些顏色，可以用于用戶交互，例如：高亮顯示。這些A開頭的顏色，叫做accent color。
如果你決定使用Secondary color，那么一定不要使用primary color的變體作為secondary color就好了。它可以和primary color顏色接近，也可以和primary color形成強烈對比，這都是沒問題的。例如下面的粉色和灰色，都可以作為藍色的secondary color：
因此，如果你沒有特別好的點子，就從這些顏色開始你的設計，它們至少可以保證你不犯一些基本的錯誤，并且滿足絕大多數(shù)人的視覺習慣。
關于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設計規(guī)范中定義的顏色；
- material-design.sketchpalette：material design中定義的顏色；
- sketch-default.sketchpalette：Sketch默認的顏色；
我們可以把這些文件加載到Sketch中。點擊Plugins -> Sketch Palettes -> Load Palette...，然后，選擇對應的色盤文件，Sketch就會提示我們色盤添加的位置。從下面的圖中紅色箭頭的位置可以看到，Sketch包含了兩個位置，一個是Global Colors，所有的Sketch文件都可以使用這里的顏色；另一個是Document Colors，只有當前的Sketch文件可用。
把需要的色盤添加到Sketch之后，用起來就更方便了。
一些例子
在這一節(jié)最后，我們再通過一些實例來回顧一下之前講過的設計概念。
首先，讓secondary color用于突出UI中需要注意的部分，不要讓它占據(jù)UI的絕大部分篇幅。
其次，secondary color可以用于當前交互UI的提示，或者高亮選擇提示：
第三，不要讓secondary color用于系統(tǒng)的狀態(tài)欄、或者占據(jù)UI的絕大部分篇幅。當按鈕等交互元素和secondary color背景有重疊的時候，不要用讓這些交互元素使用secondary color。
第四，如果secondary color相對于primary color過暗，考慮使用secondary color更明亮的變體：
第五，可以只用primary color和primary color的變體來區(qū)分UI的不同部分：
第六，如果圖片占據(jù)UI的絕大部分，可以考慮使用單色UI來凸顯圖片的部分：
這里多說一句，單色UI并不是指只用一個顏色的UI。實際上，如果用HSB的方式表達，只要保持H不變，修改S和B，得到的顏色，都可以列為單色之列。當然，之前我們提到的Material Design的各個級別的顏色，也屬于單色。
