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

Posted 2020-09-01 anddlecn

颜色的运用

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三种颜色，就能确定整个应用的整体配色方案。

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

1. 可以会从色环当中选择一个设计师认为合适的颜色。

2. 也可以从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。大家可以去那里先睹为快。