当时方位:主页 > 网页教程 > 规划制造归纳 > 内容欢迎咱们投稿

规划师颜色理论终极攻略

时刻:2015-02-24 14:11来历:不知道 作者:大宝库 点击:读取中
阅览东西:字体:

  假如一幅图所表达的内容就能够胜过数千文字的叙说,那么一张界面又有多少内容能够让咱们谈论呢?事实证明,这里有许多不同的主题值得咱们去谈论,其间一个主题便是颜色理论,它包含挑选一个匹配颜色色系的根本技巧。

  当你在规划网站时,选用的颜色会传达出天壤之别的思维和情感,所以为你的品牌挑选适宜的颜色十分的重要。例如,假如你给美国的尖端沙滩规划网站,和你发明一个像Groppon相同的在线商城,你必定期望用不同的配色规划它们,由于它们传达的是不同的信息——一个网站传达的是让人心境放松,而另一网站传达的是由于做了一次十分棒的买卖而让心跳加快振奋。

  本攻略谈论的主题是关于网站和平面规划的颜色。学习先进的颜色理论最好的办法,是经过实践,而不是理论。可是为了进步,你必须有一个起点。除了有用的配色技巧和观念,你还能够发现许多名贵的资源散落在整片文章中。

  颜色的意图

  从艺术的视点来探究颜色,它能够使主题愈加显着。这便是一张绘图和一幅绘画首要的差异,尽管它们能传达相似的信息。这个道理适用于任何规划包含网页规划。

  

规划师颜色理论终极攻略 三联

  将颜色添加到规划中使画面的表达愈加丰厚。图形、字体、按钮和超链接,全部都能够在某种程度上匹配全体的基调。例如,葡萄园网站的颜色和水族馆网站的颜色是不同的。为什么呢?由于这是两种彻底不同类型的网站,它们企图传达不同含义、意图或许爱情给自己的方针受众。

  因而,当在考虑颜色时,记住,颜色很少用来做页面的结构的差异和树立。你应该用灰色来构建一个布局,就能够让人了解到界面的全体结构联络。访问者在阅览网站界面时,颜色能够带给访问者愈加丰厚的信息内容。

  HSV颜色模型

  大多数颜色理论文章谈论的观念是,每种颜色背面的思维和它们表现出的情感。我觉得爱情的论题太片面,尽管它是精确的。挑选一个配色计划,不仅仅是凭情感,相反,我要研讨颜色是怎么作业的,以及怎么初步自己操练。

  一个杰出的初步是色相(Hue)、饱和度(Saturation)、明度(Value)(或HSV)。你或许了解这些丈量颜色的术语,可是我想告知你这些值的确十分重要。明度是你在黑白相片上取得的信息——便是不同色度的灰色。把一个网站截图,将它转换为灰度图,你就会看到它的原始值。

  

灰度图

  这便是说,明度是明暗程度,表明颜色的明与暗,也被称作亮度。色相是最根本的颜色术语,一般用来衡量实践的颜色,如蓝色、赤色或黄色。色相是恰当简略的,你能够经过记传统的色轮来记住它的规则。

  饱和度(或纯度)与一个颜色的纯度和艳丽度相关。能够把饱和度看成是颜色的强与弱、浊与清。大多数人辨认饱和度便是经过比照香蕉黄和粉笔黄的差异。粉笔色更为“发白”,好像短少艳丽度,由于它的饱和度更低。从下图的Munsell color system(孟塞尔颜色体系)图表中,能够取得更好的了解:

  

孟塞尔颜色体系

  这个图是值得咱们去了解的,由于颜色都是相对的。所以,一个“冷”色,像蓝色用在淡色中就不那么冷了,相同的“暖”色,在暗色中也就不那么暖了。颜色体系是一个古怪的论题,由于它常常与其它颜色相互作用。这样听起来好像是没有含义的,但你能够把它作为学习的比如,在实践的项目中不断操练。

  Harmonic方式

  当挑选一个配色计划时,你有许多不同的方式能够遵从。固然不是每个人都懂得怎么挑选颜色,幸亏网络上有许多便利的资源,来协助咱们完结这个使命。我以为这些颜色谐和的网页做的很超卓,可是让咱们谈论一些更风趣的挑选吧。

  互补色是色轮上相对的两个颜色,它们之间的颜色比照十分激烈。例如,紫色按钮在黄色布景上十分的杰出,由于它们是高比照度的配色。当然,这还取决于每一种颜色的饱和度,经过实践来了解是最好的。请记住:敌比照照!

  

互补色

  附近色在色轮上紧邻互相。很显然这样的配色计划不会发生高比照度。但在规划图形、banner、纹路或许布景,这些需求匹配整个网页色系的元素时,这是十分有用的。毕竟在全体布局上,并非全部都应该是需求高比照度。

  

附近色

  三色式是在色轮上等距离隔三个独立的颜色,三种颜色在色轮上要呈正三角散布。当要耍弄这种配色计划时,必定要选出一种颜色作为主色,别的两种作为辅佐色,平衡颜色,决议它们应该怎么融入全体布局。饱和度在其间扮演重要的人物,可是全体的配色计划任然不会因而发生大的改变。

  

三色式 三角形调配

  割裂互补色十分像前面的互补色计划,但略微有些改变。该配色计划是从色轮上的一个点初步,调配与它相对的两个相邻色,运用附近色来替代互补色中的一个。割裂互补色的比照依然十分激烈,但它并不会像互补颜色配那样刺目,使人感觉不舒服,它给颜色的挑选供给了一点回旋余地。

  

割裂互补色

  四色式(矩形调配)是最难以谐和的,平衡的恰当会使画面显得绚丽多彩。这种配色计划运用两对互补色,它们之距离两个色格,这四种颜色在色环上的连线构成一个矩形。在规划过程中若让一个颜色成为主色,作用会愈加,一起要留意冷暖色的平衡。我不主张在一初步就选用这种配色计划,由于假如没有经历,很难去操控它。可是它在较大的规划中运用会显得十分美丽,所以它值得被紧记。

  

四色式 矩形调配

  颜色比照

  比照是网页规划的永久论题。比照度是页面上的两个目标之间的明晰程度。最值得留意的包含阶段、链接和标题文本。假如文本和布景颜色之间没有满足的比照,那么文字就很难阅览(太亮或太暗)。

  最安全的挑选是一向退回到一个明暗标准——灰色在白色上或白色在灰色上。深色的文字在亮色的布景上愈加显着,反之亦然。可是,一些颜色常常发生一种不调和的作用,如赤色和绿色。这种比照在某些情况下是精巧的艺术,但不是任何情况下。在布局傍边,假如遇到颜色丰厚的当地,在给链接和按钮用色时要十分当心。

  

颜色比照

  看Duplos的网页,你能够看到一些颜色不同的对话气泡,运用相同的白色文字。由于布景颜色够深,文字在各种颜色布景下都可读。这种不是单纯的根据文本的界面,值得咱们在规划中去学习寻求。

  考虑一下,图标或具有行为呼唤才能的按钮,在规划中所需求的比照度等级。调和的高比照度元素,天然能引起人们地重视。当某个按钮或许注册区域需求更多的重视,高比照度往往是一个很好的解决计划。颜色假如运用妥当,能发生均衡的比照。

  防止纯黑

  从美学界取得一些主张,便是防止纯黑色。当你看到实际日子中的物体,你简直看不到纯黑色。作业看起来很暗,但它的HEX色值(十六进制)不太或许是#000。你乃至能够测验拍照相片,并在Photoshop中测验它的HEX色值。

  最近我发现了Ian Storm Taylor写的一篇文章, ,标题叫做《不要运用黑色》。它指出,经过防止在界面上运用纯黑色,能更真实地反映实际国际。这或许是一个有成见的说法,不过近些年来,我发现这是一个极好的主张。

  为了实践这一观念,尽量防止在较亮的布景上运用#000。取而代之,挑选一个暗灰色,或许是混合色(深蓝色,深绿色,深橙色等)。我总是觉得,在白色布景上的深灰色文字,比纯黑色文字的可读性高出10倍。

  纯黑色与其它颜色比较,反差十分大。这一点让我很苦恼,但即使是一点活跃的差异,仍是有差异的,所以我的主张是防止运用#000。

  提炼配色计划

  入门颜色理论,最简略的办法或许是从一个单一的颜色初步下手,并运用在线辅导东西。没有人与生俱来就了解颜色的挑选。但跟着不断的重复,它就变成了你的第二天分。

  挑选配色计划的时刻,会在发动一个Web项目并搜集主意(线框图,草图,页面元素)之后。这或许发生在规划一个简略的模型之前或许之后,但办法依然是相同的。只需挑选一种颜色,能够与根据内容、方式、风格或情感的布局很好地作业。

  

Paletton

  在线web运用,如Paletton是前期的计划规划中必不可少的。你输入一个单色,然后挑选你喜爱的(附近色,三色式,四色式等)匹配计划。每种配色计划答应额定弥补一个,与你挑选的颜色相反的颜色。

  Paletton是我个人最喜爱的,由于它供给了一系列根据调整饱和度的相对色。它还供给了根据你所挑选的颜色,相同的颜色规模的预规划划。最重要的是,它是彻底免费的!

  

Adobe Color

  另一个盛行的挑选是Adobe Color,它有十分相似的设置,但界面有些杂乱。你依然需求根据输入一个单色,来挑选配色计划。不过Adobe Color运用色轮展现匹配的颜,每一种颜色是灵敏的,易于移动的,在保持颜色方式一致性之内。

  当谈到提炼自己的配色计划,我激烈主张挑选这两个中的一个。它们都是根据Web的免费东西,并供给满足的功用,让你初步结构心爱和丰厚多彩的项目。

  在线东西和Webapps

  除了令人称奇的配色出产器,也有一些其它东西,值得保存以供将来参阅。我觉得这些东西和资源,对数码规划,例如如图形或网站规划最有协助。但你应该从中精选那些最有益于您的作业流的资源。

  

ColorSchemer

  假如你正在寻觅预建的配色计划,有许多可用的网站。一种挑选是ColorSchemer,它有许多的附加功用,如移动运用程序和桌面软件。但该网站自身是免费的,并供给了用户生成的一个大型的配色计划展现库。

  

Colrd

  另一种挑选是Colrd,它从图片相片和其它图形中提取颜色。这是一个古怪的Web运用程序,由于它不必定总在网页规划范畴颇有助益。但你能够经过研讨图片,和它们相关的颜色学习到许多。一般来说,天然总是正确的,所以假如你仔细调查日子和照中,你会从中取得配色的新思路。

  可是,当涉及到数字规划,有许多其它网站,你能够前去学习。一个在线东西Check My Colours,能够将任何网站拉进来,查看文本和布景颜色之间的比照度。这是一个优质的资源,用来测验其它网站以及您自己的规划。

  

Check My Colours

  成果以表格方式列出来,说明晰每个页面元素,在比照度和亮度方面的不同。这当然也不是完美的,但它的确为新的规划师,供给一个杰出的初步。

  阅览器扩展

  咱们大多数人都知道Adobe产品中有拾色器,如Photoshop或许Illustrator。这是一个迫切需求的东西,由于它供给整个色谱,以及一个RGB和HEX值。但现在大多数Web阅览器插件,能够仿制一个相似的颜色挑选器。

  

Chroma

  Chroma是谷歌Chrome阅览器为规划师和颜色爱好者,供给的一个免费扩展运用。它有一个正方形和圆形的颜色挑选器,以及很广泛的不同明度的配色东西。 Mozilla Firefox阅览器有一个相似的扩展运用,叫做ColorZilla,它有吸管功用,能够从网页挑选颜色,并显现它的RGB及HEX色值。

  

Color Picker

  假如你是一个Opera的用户,能够找到一个名叫Color Picker的扩展运用。你会发现它与Photoshop里的界面风格相同。

  有了适宜的扩展,所有这些阅览器都能够转换为颜色的资源,而不需求敞开另一个程序。

  颜色美观的网站

  我喜爱用详细实例来说明颜色的挑选,而不是列一堆网站。这些比如或许不是颜色匹配的肯定模范,但它们的确为网页规划师供给了一个牢靠的学习经历。

  

Barcamp Omaha 2014

  网站Barcamp Omaha 2014 在接连翻滚的页面区域,选用了许多不同的颜色。最杰出的一点是,文本规划很好地融入到每一个布景部分。页面上比照度最大的,往往是图形或按钮。你能够在整个网站中都看到这种作用。

  尽管这种风格或许并非适用于每个站点,但他它却是混色的一个很好的比如。页面很简略阅览,但并不觉得比照度太强。找到一个香甜平衡的颜色是一个规划师的终极使命。

  

iForex Water

  iForex Water 是一个视差网站,展现有关水资源耗费的信息。不像我最终一个比如,此网站在每一屏都运用相同的颜色,可是布景在不断改变。可是由于颜色都是深色,它们依然能够作为布景正常作业。

  这个比如是一个风趣的比较联络,相同还要留意不同部分翻滚时,颜色联络的改变。在颜色理论的国际里,最好的作用是相对的。

  Digimurai是一个更简略但典型的网站。清楚明了,网站的规划布局首要会集在暗蓝色的颜色中。这给人的印象是,蓝色占主导地位,并操控了大部分的规划。

  

Digimurai

  但你会发现整个布局,还有其它的高亮颜色。橙色和浅蓝色的呈现十分杰出,与暗色布景构成比照。要记住在挑选一个配色计划时,运用2个或3个不同的颜色,由于这样很或许会规划出一个十分棒的网站。

  完毕辞

  最终,我期望这个攻略能供给牢靠的起点给各位数字艺术家和网页规划师。颜色理论十分像音乐理论,其间首要的原理是经过实践得知,而不是传统的理论剖析。可是在起步阶段,或许会感觉有些困难,等你积累了恰当一部分资源和理论根底之后会感觉越来越顺利。

  假如你真的想了解配色计划的挑选,那么就要坚持操练。刚初步的期望值不要太高,由于很有或许你在初始阶段的实践成果不会很成功,可是跟着时刻的推移,你会做得越来越好。

(责任编辑:大宝库)


------分隔线----------------------------
188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help
引荐内容
赞助商链接
赞助商链接