熟练设计师的七原则(2):颜色运用

所属分类: 网页制作 / 应用技巧 阅读数: 1272
收藏 0 赞 0 分享

上一篇:熟练设计师的七原则(1):字体设计
英文原文
限制你的色彩
成为一个顶级设计师的7个简单原则的第二部分
限制使用你的色彩。好象上个准则是让你限制用你的字体,对吗?非常对!我们限制用我们的色彩的原因和我们限制使用字体的原因一样。在我们的设计当中减少色彩的数目将使之变的谐调。基本上,每件东西看起来将很一致,就像一个体育队伍的运动服或者是一个公司的商标那样。—我们想使制服(运动服)整体看上去是一个色彩的。
和选择字体一样,限制使用你的色彩数目只是一个参考指南,不是一条准则。你可以在你的设计中很好的使用彩虹的颜色,那将非常好看。但是一开始,你需要一个使用色彩的策略,并且坚持用这个策略。使之始终贯穿在你的设计中。
对于初学者,让我们来说一下色值吧。一个颜色的色值就是它的亮暗程度。例如一个黄色是非常亮的颜色,紫色就是很暗的颜色。当然一个颜色可以有它的色彩值域。例如,紫色是一个使我们大多数人联想到暗色的颜色,但是紫色也有很亮的紫色。这里有个例子关于一些颜色和它们相关的色值。然后,你可以看到的是一个颜色的色值范围。

所以当我在采用的色彩方案时我会用一条准则:确保在你的色彩方案中有一个色值的范围。在任何设计中你都需要一些淡色和一些深色去形成对比。如果要举例的话,你设计的背景是深色的,你就需要一个淡颜色的文字,图画。这样的话文字,图画就容易被阅览。反过来,如果你有一个淡色的背景,你就需要一个深色的图画,文字或是其它什么的。
我也会代表性的只采用2-5种颜色去完善我的色彩方案。减少选择的数目,那么你就会在你的设计中得到一个好结果。这里有个色彩方案的例子我将它们放在一起。就像你看见的,我采用了一个深色,一个中间调子的颜色和一个淡色。就从右边开始,我为每一个颜色建立了一个色值范围。这些色彩组合就像我的调色板,我会将它们运用到我的设计项目中去。一旦我有了这个调色板,我就会尽全力只用这些颜色。

好了,我们刚才说到了一些色彩采用方面的技巧,像你需要选择多少种颜色,它们的色值应该是多少;那么下一步是什么呢?我将告诉你什么是下一步,也是最难的部分;那就是如何决定这2-5个颜色!我个人认为这是项有时候有点难的活儿。这里有张表,是帮助我采用我的色彩方案的技巧的表: 确定一个冷暖色调的范围。
就是采用暖色调或冷色调。暖色有红,橙,黄,棕色等。冷色是蓝色和紫色。我认为绿色是一个相当中间的颜色。如果你将所有你选用的颜色处于一个色调中,他们将肯定非常和谐。 www.colourlovers.com 网站上汲取灵感
这个精彩的网站全是关于色彩方案。你只需一页页的点击色彩方案。 留意你的周围
色彩方案在你的周围到处都是。看一下食品店的包装,看一下你们当地的星巴克咖啡店的油漆颜色,看一下大自然!如果你看到一些令人愉快的色彩,只要在脑海中作个笔记,看看是否可以复制到你的电脑里去。 留心一些已有的公司商标色彩
我常常运用一些已有的商标色彩,我会看一下他们的logo,色彩方案并且将之成为我最初的想法。然后可能只加上一个或两个颜色。
这里是一个我已经完成的设计,它展示了被限制的色彩方案。

如你所见,紧凑的色彩方案和统一的字体真的使所有的东西都井井有条。
我知道这些课程都很基础……但是这就是设计的基石。所以,它永远不会伤到一个恢复精神的人。下面5个准则马上就要出来了,我保证下5个要更加有趣。谢谢!
更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多