新闻中心

怎么都不会错的6条网页设计配色原则

发布时间:2016-03-24  来源:本站
皇姑区网站建设,铁西区网站制作,和平区网站制作公司,大东网络公司,沈河区网站建设,于洪网站建设,东陵网站建设,浑南网站建设
身为 页面规划 菜鸟的你,是不是还在纠结于你制造的页面找不到一组完美的配色计划?在本教程中咱们将与你共享6条肯定会火,而且“错不了”的指导方针,你能够依照这些原 则把握最根本的色彩规矩。如今咱们共享的这些准则都不是规矩,你会在你的职业生涯中发明出更多的配色计划。相反,他们是一个起点,是你怎样生存在 页面规划 范畴色彩方向的安全攻略。
一、需求配色的是你的画布,而不是你的图画
一个在页面规划中最底子的准则是,不管你花了多少时刻发明了一个辉煌的规划,其最终的作用是发挥出内容的核心方位。你的配色计划永远不应该比它出现的内容的愈加“嘹亮”。你的规划应该是在后台,意图是帮助杰出网站的内容。

淡色的画布杰出了图画,而明亮的画布反而不能杰出你的内容。(别笑,后者是发作在网络上的真实事例^—^)
用Photoshop或许Sketch等软件规划网站的时分,创立规划的进程通常是彼此独立的。有些规划单个看起来很不错,也能被你的客户所接 受,可是当它真正被规划成页面的时分不适当的配色通常会涣散访客的注意力。事实上,页面规划的进程是和内容严密相连的,许多制造高品质的页面看上去空空荡 荡,几乎没有内容。
这是一个巨大的主意:你能够在你的网站上先铺陈出你的内容,用规划软件也罢用代码也罢,然后在你内容的周围规划你的页面。当然这也是一个特别情 况,假如一个特定风格的图画和相片都能和你的规划调和的融为一体,那么你的规划配色才算是完美。试想一下,网站的配色对内容而言就像衣服关于人的重要性, 对此你必须拟定一套完美的而且合身的衣服。
二、挑选简略的灰色作为你网站的基调
你能够为你的网站基调挑选许多种色彩,不过我主张你选用最简略的色彩,比方白色/浅灰色与深灰色的调配文字布景。
你能够看看任何热门的网站、模版、主题,白色或浅灰色与深灰色彩配成了大多数的挑选,这当然也是有充沛理由的。这样的调配对访客而言提高了你内容的可读性,而且把你的图画杰出在最前方。

通常来说,你的文字最佳防止运用墨黑色,深灰色通常更简略阅览。咱们供给一个对比舒畅的文字色彩范围:#333333到#666666。
关于你的布景色,全白色(#FFFFFFF)是能够调配任何文本的最安全的色彩。假如你想选用别的的布景色彩,咱们主张选用#FFFFFF到#CCCCCC
当然,这些色彩的挑选都不是固定死的。只不过假如你是菜鸟,以上的配色计划你能够放心运用。
三、只挑选一种色彩杰出显现
假如你挑选好几种不一样的色彩来,那么你的配色计划绝大多数是有疑问的。你色彩用得越多,你的页面就越来越难以操控。所以,在你页面以灰色基调的 前提下,你最佳只挑选一种鲜艳的色彩来作为你想要杰出的事物,比方标题、菜单、按钮等等。你的高亮色彩能够是蓝色、赤色、绿色,等等。
你最佳挑选与你的基调色彩有关的高亮色彩。翻开你的色彩挑选器,并单击你五颜六色方块的基地。

向上或向下移动你的滑块,你能够细心挑选你以为最适宜的色彩。

如今,你规划的页面有了三个根本的色彩:布景色、文本色和高亮色。在今后你也能够挑选一种以上的高亮色,但如今关于菜鸟的你来说仍是挑选一种对比适宜。你如今现已把握了根本的配色,假如你有决心,你今后还能够测验更多种不一样的计划。
你刚刚学到:
学会了怎样挑选“色相”。归纳来说,色相是根本色,当你移动滑块,你会看到h值在色彩挑选器中的改动。
“H”代表色相,一旦你挑选了你的高亮色彩,文本框中显现的即是你当前色彩的色相。
四、假如有疑问,请运用蓝色
假如你对你的高亮色的挑选有疑问的话,无妨运用蓝色。蓝色是一种弹性对比大的色彩,能够和许多种色彩调配。黄色和紫色也很不错,可是假如运用不当会拔苗助长。
另一方面,假如你是用蓝色,那么你用错色彩的概率就会很低。假如你正犹豫着不知道用啥色彩好,无妨运用蓝色。对比安全的蓝色包含从H235到H190,从海军蓝到深蓝色。

五、给你的高亮色添加改动
你一旦挑选了高亮的色彩,从该点移动滑块来挑选接下来的色彩。在你的规划中也需求别的的色彩,高亮色的稍微改动会让你的色彩挑选变得简略。

运用这些类型的色彩改动的东西,如:
悬停作用:

六、尽量不要运用色彩挑选器右上角的色彩
色彩挑选器的右上角是一块肥美的土地。在右上角的色彩就像F1赛车; 他们能够履行出惊人的作用,而且十分诱人,但通常想用好需求很多的经历。假如没有这种经历,他们可能会致使事故的发作,所 以最佳以削弱你的色彩,最佳都坚持对比淡化的色彩。
这即是为啥在本教程的第三有些,我问你点击的色彩在地图右上角的基地挑选您的高亮色彩之前,要确保你有一个对比柔软的色彩拉开序幕。
为了阐明这一点,看假如我仅仅改动了咱们规划的色彩,到目前停止,会发作啥。

看上去仍是听舒畅的对吧?可是假如你把色彩调整为挑选器右上角的色彩,咱们再来看看作用怎样:

分分钟亮瞎了访客的双眼!假如你想确保你不烧焦你的访客的视网膜,遵从留出色彩挑选器的右上角的格子的通常准则。
饱满度和亮度
当您拖动周围的色彩挑选器区域的地图区域,你会看到“S”和“B”的值发作改动,这代表饱满度和亮度。您还能够看到色相号坚持不变。所以,你经过改动你原有的色相的饱满度和亮度会发生色彩的改动。

饱满度
是一种生动的色彩体现。例如,以为“我的衬衣中渗透着葡萄酒红”。在一个典型的色彩挑选器饱满度是多少白了即是混在你的基地的色彩来决议。白色越少,越饱满。
当您拖动到右边的色彩在地图上能够削减白色量,从而添加了饱满度,“S”的值上升。当您拖动到左面向一切的白角,你会削减饱满使“S”的值降低。

亮度
亮度是有多少黑色混合到你的色彩。黑色越少,越亮。
当你拖动滑块向上,削减了黑色的数量,添加亮度,在色彩挑选器中的“B”的值上升。

与你本来的色彩混合的黑色也被称为发明了“阴影”。这也来源于油漆混合,是黑色油漆与涂料色彩的混合。
当你混合灰色到五颜六色这被称为发明了色彩。假如你调理饱满度和亮度,那么你就发明了一种色彩。所以根本上任何时分不管你的饱满度和亮度均小于100%,这即是一个色彩。
相同,这个词来源于油漆混合,在其间创立一个灰色的油漆,然后用五颜六色涂料混合。
单色配色计划
单色的配色计划是,你以一个根本的色彩和拓展它的色相,饱满度和亮度。因此,经过采摘一大亮点的色彩和它发明的改动,你实际上创立了一个单色计划。

下一步?
坚持操练对灰度根底的单色配色计划,直到你感到很有决心停止。试着用不一样的色彩,测验创立不一样的高亮色,看看它是怎样改动饱满度和亮度的设置,直到能够运用停止。
当你感受很舒畅,能够添加一个额定的高亮色彩。我主张测验橙色和蓝色,因为他们通常 是最简略的二重奏。然后测验绿色和蓝色,这在我的经历中是第二个最简略的。这两种通常是与客户和访客都会称赞的调配。
为了推动了你对Web的配色计划的了解,最 好的工作即是抓住自个喜爱色彩,你能够用取样器(浏览器拓展Colorzilla),并用它来 研究经历丰厚的规划师是怎样做到的丰厚的色彩调配的。当你在浏览互联网的时分,看到一个很大的合作突破,你能够用色彩取样器看看在页面上运用的色彩的配色 计划。你乃至能够测验每个色相,看看哪些饱满度和亮度水平作用最佳吧。别的要注意它的色彩组合的调和度。
假如有疑问,能够随时回到归于你的“安全榜首”的指导方针,这不管怎样都是不会错的。

客服
客服