知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述android应用开发-从设计到实现 2-3 颜色的运用相关的知识,希望能为你提供帮助。
颜色的运用Material Design
采用的是扁平化的设计,可以看到一大块一大块区域的颜色。这些颜色大多亮丽引人,整个界面上搭配的颜色也不会太多,基本保持在三种颜色以内。
文章图片
“没有错误的颜色的,只有错误的搭配”。颜色是没有对错的,我们要用经验和直觉来搭配它们,所以要先来认识认识颜色。
颜色理论颜色是有语言的,红色代表这热情奔放,蓝色代表的沉着安静,绿色代表着生机活力。搭配一组颜色,就是表达作品要传递的含义。
我们大部分人都知道RGB颜色,它的理论依据是:任何颜色都是通过不同强度的
红色R
、绿色G
、蓝色B
组合而成的,改变它们的组合就能得到任何颜色。在计算机领域,这三种颜色分别具有0~255个不同的数值。文章图片
对于设计师配色来讲,还会使用另外一个体系的颜色理论-HSB:色调H,饱和度S,亮度B。
我们人在谈论颜色的时候,总是说这个颜色很红、有点绿、偏蓝。
当我们说
很红
的时候,就是给颜色设定了一个基调-红色。这种基调称为色调。色调成圆环形状的分布,依次渐变的呈现出赤橙黄绿青蓝紫各种颜色。文章图片
色环具有360度,因此色调的数值就是0~359度。色调数值从0到359变化,也代表着颜色从
暖色
逐步过渡到冷色
。你是不是看到红色就觉得温暖,而看到深蓝色就觉得冷飕飕的呢?很红
的很
字,就要通过饱和度和亮度来体现了,- 饱和度:可以理解成把一种纯粹的颜色溶解到水里面,如果水很多,颜色就很淡;如果水很少,颜色就很纯。因此它具有0%~100%的数值。
文章图片
- 亮度:我们能看到物体是因为光线照在物体上面的缘故。如果一点光没有,不管什么样的颜色,看起来都是黑的,只有充足的光线才能反映出物体本来的颜色。因此它具有0%~100%的数值。
0%
说明没有光照,那么就会是黑色。
例如,
文章图片
文章图片
文章图片
文章图片
这些颜色都给出了对应的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
是一个应用使用最为广泛的颜色,它决定了一个应用整体的基调。界面中很多的元素都会使用到这个颜色。比如,主颜色选取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和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。
【android应用开发-从设计到实现 2-3 颜色的运用】除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。
推荐阅读
- Android Studio之高德地图实现定位和3D地图显示
- Android实现按钮点击效果(第一次点击变色,第二次恢复)
- Android中通过反射获取资源Id
- Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法(转)
- Android多媒体开发介绍(转)
- 安卓四大组件
- Android-RecylerView控件
- Android自定义View之LoadingLayout
- Android的Fragment的自定义转场动画