颜色的运用

Material Design采用的是扁平化的设计，可以看到一大块一大块区域的颜色。这些颜色大多亮丽引人，整个界面上搭配的颜色也不会太多，基本保持在三种颜色以内。

“没有错误的颜色的，只有错误的搭配”。颜色是没有对错的，我们要用经验和直觉来搭配它们，所以要先来认识认识颜色。

颜色理论

颜色是有语言的，红色代表这热情奔放，蓝色代表的沉着安静，绿色代表着生机活力。搭配一组颜色，就是表达作品要传递的含义。

我们大部分人都知道RGB颜色，它的理论依据是：任何颜色都是通过不同强度的红色R、绿色G、蓝色B组合而成的，改变它们的组合就能得到任何颜色。在计算机领域，这三种颜色分别具有0～255个不同的数值。

对于设计师配色来讲，还会使用另外一个体系的颜色理论-HSB：色调H，饱和度S，亮度B。

我们人在谈论颜色的时候，总是说这个颜色很红、有点绿、偏蓝。

当我们说很红的时候，就是给颜色设定了一个基调-红色。这种基调称为色调。色调成圆环形状的分布，依次渐变的呈现出赤橙黄绿青蓝紫各种颜色。

色环具有360度，因此色调的数值就是0～359度。色调数值从0到359变化，也代表着颜色从暖色逐步过渡到冷色。你是不是看到红色就觉得温暖，而看到深蓝色就觉得冷飕飕的呢？

很红的很字，就要通过饱和度和亮度来体现了，

饱和度：可以理解成把一种纯粹的颜色溶解到水里面，如果水很多，颜色就很淡；如果水很少，颜色就很纯。因此它具有0%～100%的数值。
亮度：我们能看到物体是因为光线照在物体上面的缘故。如果一点光没有，不管什么样的颜色，看起来都是黑的，只有充足的光线才能反映出物体本来的颜色。因此它具有0%～100%的数值。0%说明没有光照，那么就会是黑色。

如果你的本行并不是设计师或者刚入行不久，在给安卓应用配色的时候一定会犯迷糊，不知如何选择。幸好Google已经考虑到了这点。它从360度的色环当中，为大家选择出了非常适合做界面设计的色调，并通过调整这些色调的饱和度和亮度，得到了一系列可以与主色调搭配和谐的颜色（实际上，这些色调与主色调可能有细微的偏差，比如说3度）。这些颜色放在一起，被形象的叫做调色板。

例如，

这些颜色都给出了对应的RGB数值，也给出了它们自己的名字，例如500，100，200，……，A700，数值越高，颜色越深。其中带A的，表示这个颜色推荐用来作为Accent Color（Accent color接下来会马上介绍到。）。

通过数字给颜色编号，这是为了方便设计师与开发者之间的沟通，给这些颜色取的名字。当他们谈论某个颜色的时候，只需要说出颜色的名字，大家脑中就会产生一个直观的印象。如果他们讲RGB值，大家都会觉得很难想象。

选择颜色

通常来讲，一个应用界面当中，不要超过三种不同的色调，否则色调的差异就会过多的吸引使用者的注意，把关注点从内容上分散到各个不同的颜色上去了。

为了简化设计师的工作，Google的Material Design只需要选择Primary Color Primary Dark Color Accent Color三种颜色，就能确定整个应用的整体配色方案。

当设计师要给一个应用选择颜色的时候，

可以会从色环当中选择一个设计师认为合适的颜色。
也可以从Google提供的调色板中选取。这些颜色都是Google千挑万选后的结果，如果大家没有特别的原因，就使用这种表现稳健的颜色吧。

Primary Color

Primary Color是一个应用使用最为广泛的颜色，它决定了一个应用整体的基调。界面中很多的元素都会使用到这个颜色。

比如，主颜色选取Indigo 500。

Primary Dark Color

选定主颜色之后，通常还会在主颜色的附近，选择一个暗色作为搭配，例如Indigo 600～900作为深色。这个颜色通常只是体现在状态栏的颜色上。

除了暗色，有时还需要使用与主颜色相配合的亮色，例如Indigo 500作为主色之后，Indigo 50～400，都是亮色可选的对象。

Accent Color

Accent Color是与Primary Color完全不同的一个色调，用来吸引用户的注意力，比如用在按钮、进度条等等需要用户关注的、有交互功能的组件上面。如果Primary Color与Accent Color是不同色调，设计师可以自由的选择；如果Primary Color与Accent Color都是同一种色调，那么确定Accent Color的时候，通常使用Google调色板中名字里带A的颜色，例如A100～A700.

常用工具

使用Google提供的调色板进行配色的时候，如果能够快速的查看配色完成后的效果就好了。

Material Palette为我们提供了这样的方便。当选中期望的Primary Color和Accent Color以后，右边的预览界面就会立刻看到搭配的效果。确认搭配方案之后，还可以下载配色的方案到本地，便于将调色板导入界面设计的软件当中直接使用。

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

android应用开发-从设计到实现 2-3 颜色的运用相关推荐

android应用开发-从设计到实现 2-4 文字的使用
文字的使用文字是应用当中使用最多的要素.显示一段供用户阅读的文字,程序运行时的信息提示都离不开它. 文字是内容的实际体现者,因此设计师需要将用户的注意力尽可能的吸引到文字当中. 字体可以分成两种类型 ...
android应用开发-从设计到实现 4-10 解析天气预报数据
解析天气预报数据界面布局完成以后,就需要设计代码来控制界面上各个元素的逻辑了. 从网络获取天气预报数据: 解析获取的数据: 根据解析的结果更新天气预报界面: 天气预报的数据依赖于网络端的服务器,不是 ...
android应用开发-从设计到实现 3-3 Sketch静态原型设计
Sketch静态原型设计对于静态原型的设计,我们使用Sketch. 启动Sketch后,我们将看到类似如下的界面, 工具栏它的顶部是工具栏, 可以通过菜单栏View -> Customize ...
android应用开发-从设计到实现 2-1 设计原理
设计原理设计是一门让人感觉很抽象的艺术.设计需要从两个方面来考虑问题: 实用:体现在功能上和交互性上: 美观:体现在界面的布局,色彩的搭配,字体的运用上: 对于我们的安卓应用来讲,设计的目的就是要体 ...
android应用开发-从设计到实现 3-9 Origami动态原型设计
动态原型设计动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具. 开发者不需要猜测设计师要什么样的效果,照着原型产品做就好了. 很多创业团队也发现了产品人的这个刚需,做出 ...
android应用开发-从设计到实现 3-5 静态原型的Appbar
静态原型的Appbar 我们设计的Appbar包括了两个部分,一个是toolbar,另一个就是flexible space-显示当日天气的详细信息, Toolbar参数确定添加Toolbar很简单, ...
android应用开发-从设计到实现 3-4 静态原型的状态栏
静态原型的状态栏状态栏Symbol 状态栏似乎很复杂,有wifi信号.手机信号.时间.电量等信息,幸好Sketch原生就自带的现成组件,你可以直接拿过来就用了.当然,你也可以自己一个一个去画,不过既 ...
android应用开发-从设计到实现 3-6 静态原型的天气预报
静态原型的天气预报未来5天的天气预报,可以看成由5个类似的天气模块构成,只要完成一个,其他几个就可以通过复制+修改内容实现改变. 首先来明确一下各个组件的尺寸和参数, 整个区域的大小,我设定成360 ...
android应用开发-从设计到实现 4-4版本管理
版本管理前面已经提到了,非常有必要对开发的代码进行管理.那么进行版本管理到底什么时候使用呢? 我总结了使用版本管理的主要场景,有以下3种: 对于个人开发者,版本管理能记录开发的变迁.它记录了所有文档 ...

android应用开发-从设计到实现 2-3 颜色的运用