您现在的位置是:主页 > 博客网站制作 > CSS3|Html5 > >
6条网页设计配色原?让你秒变配色高手
admin 2019-04-03【网站建设教程?/span>人已围观
简?/b>网页设计好不好看,颜色是毋庸置疑要排首位的,所以关于颜色的搭配技巧以及原?对于每一个要学习web前端设计的新手来?这都是一个重要的学习过程.?..
6条网页配色原?
一、需要配色的是你的画布,而不是你的图?/h4>
二、选择简单的灰色作为你网站的基调
三、只选择一种颜色突出显?/strong>
四、如果有疑问,请使用蓝色
五、给你的高亮色增加变?/strong>
六、尽量不要使用颜色选择器右上角的颜?nbsp;
现在我们再详细解说这六条原则:
第一?需要配色的是你的画?而不是你的图?/strong>
一个在网页设计中最根本的原则是,无论你花了多少时间创造了一个辉煌的设计,其最终的作用是发挥出内容的核心位置。你的配色方案永远不应该比它呈现的内容的更加“响亮”。你的设计应该是在后台,目的是帮助突出网站的内容?/span>
下面请看两组图对比一?


淡色的画布突出了图像,而明亮的画布反而不能突出你的内容。(别笑,后者是发生在网络上的真实案例^—^?/p>
用Photoshop或者Sketch等软件设计网站的时候,创建设计的过程往往是相互独立的。有些设计单个看起来很不错,也能被你的客户所接受,但是当它真正被设计成网页的时候不适当的配色往往会分散访客的注意力。事实上,网页设计的过程是和内容紧密相连的,很多制作高品质的网页看上去空空荡荡,几乎没有内容?/p>
网站的配色对内容而言就像衣服对于人的重要性,对此你必须制定一套完美的并且合身的衣服?br style="margin: 0px; padding: 0px;" />
第二?选择简单的灰色作为你网站的基调
你可以为你的网站基调选择无数种颜色,不过我建议你采用最简单的颜色,比如白?浅灰色与深灰色的搭配文字背景?/p>
你可以看看任何热门的网站、模版、主题,白色或浅灰色与深灰色搭配成了大多数的选择,这当然也是有充分理由的。这样的搭配对访客而言提高了你内容的可读性,并且把你的图片突出在最前方?/p>
一般来说,你的文字最好避免使用墨黑色,深灰色一般更容易阅读。我们提供一个比较舒服的文字颜色范围:#333333到#666666?/p>
对于你的背景色,全白色(#FFFFFFF)是可以搭配任何文本的最安全的颜色。如果你想选用其他的背景颜色,我们建议采用#FFFFFF?CCCCCC当然,这些颜色的选择都不是固定死的。只不过如果你是新手,以上的配色方案你可以放心使用?/p>
三、只选择一种颜色突出显?/strong>
如果你选择好几种不同的色调来,那么你的配色方案绝大多数是有问题的。你颜色用得越多,你的页面就越来越难以控制。所以,在你网页以灰色基调的前提下,你最好只选择一种鲜艳的颜色来作为你想要突出的事物,比如标题、菜单、按钮等等。你的高亮颜色可以是蓝色、红色、绿色,等等?/p>
你最好选择与你的基调颜色相关的高亮颜色。打开你的颜色选择器,并单击你彩色方块的中心?/p>

向上或向下移动你的滑块,你可以仔细选择你认为最合适的颜色?/span>
现在,你设计的页面有了三个基本的颜色:背景色、文本色和高亮色。在以后你也可以选择一种以上的高亮色,但现在对于新手的你来说还是选择一种比较合适。你现在已经掌握了基本的配色,如果你有信心,你以后还可以尝试更多种不同的方案?/p>
你刚刚学到:
学会了如何选择“色相”。概括来说,色相是基本色,当你移动滑块,你会看到h值在颜色选择器中的变化?/p>
“H”代表色相,一旦你选择了你的高亮颜色,文本框中显示的就是你当前颜色的色相?/p>
四、如果有疑问,请使用蓝色
如果你对你的高亮色的选择有疑惑的话,不妨使用蓝色。蓝色是一种弹性比较大的颜色,可以和很多种颜色搭配。黄色和紫色也很不错,但是如果使用不当会适得其反?/p>
另一方面,如果你是用蓝色,那么你用错颜色的概率就会很低。如果你正犹豫着不知道用什么颜色好,不妨使用蓝色。比较安全的蓝色包括从H235到H190,从海军蓝到深蓝色?/p>

目前我网站的背景也选择的是蓝色,如果你选定了一种颜色作为你的高亮色,那么也请你在其他需要的地方使用这种颜色。如果你的按钮、标题等需要高亮,把它们的颜色也换成同一种蓝色。在下面这个例子中我把白色换成了蓝色?/span>
五、给你的高亮色增加变?/strong>
你一旦选择了高亮的颜色,从该点移动滑块来选择接下来的颜色。在你的设计中也需要其他的颜色,高亮色的稍微变化会让你的颜色选择变得简单?/p>

使用这些类型的颜色变化的东西,如?br style="margin: 0px; padding: 0px;" />
悬停效果?br style="margin: 0px; padding: 0px;" />

很赞哦! (0
)
上一篇:上一篇:用js+css3来写一个手机栏目导?/a>
下一篇:下一篇:三步实现滚动条触动css动画效果
第二?选择简单的灰色作为你网站的基调


向上或向下移动你的滑块,你可以仔细选择你认为最合适的颜色?/span>
现在,你设计的页面有了三个基本的颜色:背景色、文本色和高亮色。在以后你也可以选择一种以上的高亮色,但现在对于新手的你来说还是选择一种比较合适。你现在已经掌握了基本的配色,如果你有信心,你以后还可以尝试更多种不同的方案?/p>
你刚刚学到:
学会了如何选择“色相”。概括来说,色相是基本色,当你移动滑块,你会看到h值在颜色选择器中的变化?/p>
“H”代表色相,一旦你选择了你的高亮颜色,文本框中显示的就是你当前颜色的色相?/p>
四、如果有疑问,请使用蓝色
如果你对你的高亮色的选择有疑惑的话,不妨使用蓝色。蓝色是一种弹性比较大的颜色,可以和很多种颜色搭配。黄色和紫色也很不错,但是如果使用不当会适得其反?/p>
另一方面,如果你是用蓝色,那么你用错颜色的概率就会很低。如果你正犹豫着不知道用什么颜色好,不妨使用蓝色。比较安全的蓝色包括从H235到H190,从海军蓝到深蓝色?/p>
你一旦选择了高亮的颜色,从该点移动滑块来选择接下来的颜色。在你的设计中也需要其他的颜色,高亮色的稍微变化会让你的颜色选择变得简单?/p>
使用这些类型的颜色变化的东西,如?br style="margin: 0px; padding: 0px;" />
悬停效果?br style="margin: 0px; padding: 0px;" />
很赞哦! (0
) 上一篇:上一篇:用js+css3来写一个手机栏目导?/a> 下一篇:下一篇:三步实现滚动条触动css动画效果
目前我网站的背景也选择的是蓝色,如果你选定了一种颜色作为你的高亮色,那么也请你在其他需要的地方使用这种颜色。如果你的按钮、标题等需要高亮,把它们的颜色也换成同一种蓝色。在下面这个例子中我把白色换成了蓝色?/span>
五、给你的高亮色增加变?/strong>