网页设计怎么都不会错的6条配色原则
发布时间:2016/10/25 来源:沈阳志鼎科技有限公司 访问次数:56
你是否还在纠结于你制作的页面找不到一组完美的配色计划?在本教程中咱们将与你共享6条肯定会火,并且“错不了”的指导方针,你能够依照这些准则把握最根本的色彩规则。它们是一个起点,是你怎么生计在页面规划范畴色彩方向的安全攻略。
一、需求配色的是你的画布,而不是你的图画
一个在页面规划中最根本的准则是,不管你花了多少时刻发明了一个光辉的规划,其终究的作用是发挥出内容的基地方位。你的配色计划永久不应该比它出现的内容的愈加“嘹亮”。你的规划应该是在后台,意图是协助杰出网站的内容。
淡色的画布杰出了图画,而亮堂的画布反而不能杰出你的内容。用Photoshop或许Sketch等软件规划网站的时分,创立规划的进程往往是彼此独立的。有些规划单个看起来很不错,也能被你的客户所承受,可是当它真正被规划成页面的时分不适当的配色往往会涣散访客的注意力。事实上,页面规划的进程是和内容严密相连的,许多制作高品质的页面看上去空空荡荡,几乎没有内容。
这是一个巨大的主意:你能够在你的网站上先铺陈出你的内容,用规划软件也罢用代码也罢,然后在你内容的周围规划你的页面。当然这也是一个特殊情况,假如一个特定个性的图画和照片都能和你的规划谐和的融为一体,那么你的规划配色才算是完美。试想一下,网站的配色对内容而言就像衣服关于人的重要性,对此你有必要拟定一套完美的并且合身的衣服。
二、挑选简略的灰色作为你网站的基调
你能够为你的网站基调挑选许多种色彩,不过我主张你选用最简略的色彩,比方白色/浅灰色与深灰色的调配文字布景。
你能够看看任何抢手的网站、模版、主题,白色或浅灰色与深灰色彩配成了大多数的挑选,这当然也是有充沛理由的。这样的调配对访客而言提高了你内容的可读性,并且把你的图画杰出在最前方。
通常来说,你的文字最佳防止运用墨黑色,深灰色通常更简略阅览。咱们供给一个对比舒畅的文字色彩规模:#333333到#666666。
关于你的布景色,全白色(#FFFFFFF)是能够调配任何文本的最安全的色彩。假如你想选用别的的布景色彩,咱们主张选用#FFFFFF到#CCCCCC
当然,这些色彩的挑选都不是固定死的。只不过假如你是新手,以上的配色计划你能够放心运用。
三、只挑选一种色彩杰出显现
假如你挑选好几种不一样的色彩来,那么你的配色计划绝大多数是有疑问的。你色彩用得越多,你的页面就越来越难以控制。所以,在你页面以灰色基调的前提下,你最佳只挑选一种艳丽的色彩来作为你想要杰出的事物,比方标题、菜单、按钮等等。你的高亮色彩能够是蓝色、赤色、绿色,等等。
你最佳挑选与你的基调色彩有关的高亮色彩。翻开你的色彩挑选器,并单击你五颜六色方块的基地。
向上或向下移动你的滑块,你能够细心挑选你以为最适宜的色彩。
如今,你规划的页面有了三个根本的色彩:布景色、文本性和高亮色。在今后你也能够挑选一种以上的高亮色,但如今关于新手的你来说仍是挑选一种对比适宜。你如今现已把握了根本的配色,假如你有决心,你今后还能够测验更多种不一样的计划。
你刚刚学到:学会了怎么挑选“色相”。概括来说,色相是根本性,当你移动滑块,你会看到h值在色彩挑选器中的改动。“H”代表色相,一旦你挑选了你的高亮色彩,文本框中显现的即是你当时色彩的色相。
四、假如有疑问,请运用蓝色
假如你对你的高亮色的挑选有疑问的话,无妨运用蓝色。蓝色是一种弹性对比大的色彩,能够和许多种色彩调配。黄色和紫色也很不错,可是假如运用不当会拔苗助长。
另一方面,假如你是用蓝色,那么你用错色彩的概率就会很低。假如你正犹疑着不知道用啥色彩好,无妨运用蓝色。对比安全的蓝色包括从H235到H190,从海军蓝到深蓝色。
假如是我的话,我通常挑选H205的蓝色,假如你选定了一种色彩作为你的高亮色,那么也请你在别的需求的当地运用这种色彩。假如你的按钮、标题等需求高亮,把它们的色彩也换成同一种蓝色。在下面这个比如中我把白色换成了蓝色。
五、给你的高亮色添加改动
你一旦挑选了高亮的色彩,从该点移动滑块来挑选接下来的色彩。在你的规划中也需求别的的色彩,高亮色的略微改动会让你的色彩挑选变得简略。
运用这些类型的色彩改动的东西,如:
悬停作用
鸿沟
经过杰出显现色彩
渐变
光影作用
六、尽量不要运用色彩挑选器右上角的色彩
色彩挑选器的右上角是一块肥美的土地。在右上角的色彩就像F1赛车; 他们能够履行出惊人的作用,并且十分诱人,但通常想用好需求很多的经历。假如没有这种经历,他们可能会致使事端的发作,所以最佳以削弱你的色彩,最佳都坚持对比淡化的色彩。
这即是为啥在本教程的第三有些,我问你点击的色彩在地图右上角的基地挑选您的高亮色彩之前,要保证你有一个对比柔软的色彩拉开序幕。
为了阐明这一点,看假如我仅仅改动了咱们规划的色彩,到目前停止,会发作啥。
看上去仍是听舒畅的对吧?可是假如你把色彩调整为挑选器右上角的色彩,咱们再来看看作用怎么:
分分钟亮瞎了访客的双眼!假如你想保证你不烧焦你的访客的视网膜,遵循留出色彩挑选器的右上角的格子的通常准则。
饱满度和亮度
当您拖动周围的色彩挑选器区域的地图区域,你会看到“S”和“B”的值发作改动,这代表饱满度和亮度。您还能够看到色相号坚持不变。所以,你经过改动你原有的色相的饱满度和亮度会产生色彩的改动。饱满度
是一种生动的色彩体现。例如,以为“我的衬衣中渗透着葡萄酒红”。在一个典型的色彩挑选器饱满度是多少白了即是混在你的基地的色彩来决议。白色越少,越饱满。
当您拖动到右边的色彩在地图上能够削减白色量,然后添加了饱满度,“S”的值上升。当您拖动到左面向所有的白角,你会削减饱满使“S”的值下降。
亮度
亮度是有多少黑色混合到你的色彩。黑色越少,越亮。当你拖动滑块向上,削减了黑色的数量,添加亮度,在色彩挑选器中的“B”的值上升。
与你本来的色彩混合的黑色也被称为发明了“暗影”。这也来源于油漆混合,是黑色油漆与涂料色彩的混合。
当你混合灰色到五颜六色这被称为发明了色彩。假如你调节饱满度和亮度,那么你就发明了一种色彩。所以根本上任何时分不管你的饱满度和亮度均小于100%,这即是一个色彩。
相同,这个词来源于油漆混合,在其中创立一个灰色的油漆,然后用五颜六色涂料混合。
单色配色计划
单色的配色计划是,你以一个根本的色彩和拓展它的色相,饱满度和亮度。因而,经过采摘一大亮点的色彩和它发明的改动,你实际上创立了一个单色计划。
下一步?
坚持操练对灰度基础的单色配色计划,直到你感到很有决心停止。试着用不一样的色彩,测验创立不一样的高亮色,看看它是怎么改动饱满度和亮度的设置,直到能够运用停止。
当你感受很舒畅,能够添加一个额定的高亮色彩。我主张测验橙色和蓝色,由于他们往往是最简略的二重奏。然后测验绿色和蓝色,这在我的经历中是第二个最简略的。这两种往往是与客户和访客都会称誉的调配。
为了推动了你对Web的配色计划的了解,最佳的工作即是捉住自个喜爱色彩,你能够用取样器(阅读器拓展Colorzilla),并用它来研讨经历丰富的规划师是怎么做到的丰富的色彩调配的。当你在阅读互联网的时分,看到一个很大的合作打破,你能够用色彩取样器看看在页面上运用的色彩的配色计划。你乃至能够测验每个色相,看看哪些饱满度和亮度水平作用最佳吧。别的要注意它的色彩组合的谐和度。
假如有疑问,能够随时回到归于你的“安全第一”的指导方针,这不管怎么都是不会错的。