Sketch 基础学习(2)

了解了关于颜色的基本概念之后，这一节我们来看如何在App的布局设计中使用颜色。通常，在一个UI中，我们应该使用两类颜色。

• 一类叫做Primary Color，这里的Primary Color和RGB中的Primary Color含义是不同的。简单说，它指一个UI看过之后能给我们留下印象的主要的颜色；
• 另一类叫做Secondary Color，它用来在基于Primary Color的UI上，突出需要注意的内容，例如：按钮、浮动文字、输入框、指针、进度条、链接、标题等等；

来看一些Google提供的例子：

Color in layout

在这张图里，primary color是紫色，secondary color是绿色。看到这里，大家也就能明白为什么刚才我们说的是应该使用两类颜色，而不是两个颜色了。尽管紫色是这个UI的primary color，但是，文章的标题和副标题，使用了两种略有差别的紫色。而绿色作为secondary color，突出了UI中可以交互的部分。

有时，我们也可以只通过primary color的变化进行设计，而不使用secondary color。例如这样：

Color in layout

这次，UI的primary color是绿色。然后，系统状态栏和搜索图标，分别用了两种primary color的变体。甚至，还用primary color替代了secondary color用作了浮动按钮的颜色。这样的UI不但没有问题，还会给人更简洁一致的视觉感受。

常用的Primary color和Secondary color

接下来，你可能会想，什么颜色可以作为primary color呢？又该如何选择与之配合的secondary color呢？这里，Google给了我们一些建议：

Color in layout

上面这18种颜色都是适合作为primary color的。并且，以其中的每一种颜色为基础，Google都提供了一组备选颜色可以供我们作为辅助颜色：

Color in layout

这里我们只罗列了其中的一部分，完整的色彩列表可以在这里找到。

从图中可以看到，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：

Color in layout

因此，如果你没有特别好的点子，就从这些颜色开始你的设计，它们至少可以保证你不犯一些基本的错误，并且满足绝大多数人的视觉习惯。

关于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文件拖进来就安装好了。

Color in layout

这个插件有三个功能，即在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。这个插件就会为我们生成下面的色彩搭配供我们参考了。

Color in layout

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文件可用。

Color in layout

把需要的色盘添加到Sketch之后，用起来就更方便了。

一些例子

在这一节最后，我们再通过一些实例来回顾一下之前讲过的设计概念。

首先，让secondary color用于突出UI中需要注意的部分，不要让它占据UI的绝大部分篇幅。

Color in layout

其次，secondary color可以用于当前交互UI的提示，或者高亮选择提示：

Color in layout

第三，不要让secondary color用于系统的状态栏、或者占据UI的绝大部分篇幅。当按钮等交互元素和secondary color背景有重叠的时候，不要用让这些交互元素使用secondary color。

Color in layout

第四，如果secondary color相对于primary color过暗，考虑使用secondary color更明亮的变体：

Color in layout

第五，可以只用primary color和primary color的变体来区分UI的不同部分：

Color in layout

第六，如果图片占据UI的绝大部分，可以考虑使用单色UI来凸显图片的部分：

Color in layout

这里多说一句，单色UI并不是指只用一个颜色的UI。实际上，如果用HSB的方式表达，只要保持H不变，修改S和B，得到的颜色，都可以列为单色之列。当然，之前我们提到的Material Design的各个级别的颜色，也属于单色。