网页设计配色基本原则有那些?
一、需要配色的是你的画布,而不是你的图片
一个在网页设计中最根本的原则是,无论你花了多少时间创造了一个辉煌的设计,其最终的作用是发挥出内容的核心位置。你的配色方案永远不应该比它呈现的内容的更加“响亮”。你的设计应该是在后台,目的是帮助突出网站的内容。
淡色的画布突出了图像,而明亮的画布反而不能突出你的内容。(别笑,后者是发生在网络上的真实案例^—^)
用Photoshop或者Sketch等软件设计网站的时候,创建设计的过程往往是相互独立的。有些设计单个看起来很不错,也能被你的客户所接
受,但是当它真正被设计成网页的时候不适当的配色往往会分散访客的注意力。事实上,网页设计的过程是和内容紧密相连的,很多制作高品质的网页看上去空空荡
荡,几乎没有内容。
这是一个伟大的想法:你可以在你的网站上先铺陈出你的内容,用设计软件也好用代码也好,然后在你内容的周围设计你的网页。当然这也是一个特殊情
况,如果一个特定风格的图像和照片都能和你的设计和谐的融为一体,那么你的设计配色才算是完美。试想一下,网站的配色对内容而言就像衣服对于人的重要性,
对此你必须制定一套完美的并且合身的衣服。
二、选择简单的灰色作为你网站的基调
你可以为你的网站基调选择无数种颜色,不过我建议你采用最简单的颜色,比如白色/浅灰色与深灰色的搭配文字背景。
你可以看看任何热门的网站、模版、主题,白色或浅灰色与深灰色搭配成了大多数的选择,这当然也是有充分理由的。这样的搭配对访客而言提高了你内容的可读性,并且把你的图片突出在最前方。
一般来说,你的文字最好避免使用墨黑色,深灰色一般更容易阅读。我们提供一个比较舒服的文字颜色范围:#333333到#666666。
对于你的背景色,全白色(#FFFFFFF)是可以搭配任何文本的最安全的颜色。如果你想选用其他的背景颜色,我们建议采用#FFFFFF到#CCCCCC
当然,这些颜色的选择都不是固定死的。只不过如果你是新手,以上的配色方案你可以放心使用。
三、只选择一种颜色突出显示
如果你选择好几种不同的色调来,那么你的配色方案绝大多数是有问题的。你颜色用得越多,你的页面就越来越难以控制。所以,在你网页以灰色基调的
前提下,你最好只选择一种鲜艳的颜色来作为你想要突出的事物,比如标题、菜单、按钮等等。你的高亮颜色可以是蓝色、红色、绿色,等等。
你最好选择与你的基调颜色相关的高亮颜色。打开你的颜色选择器,并单击你彩色方块的中心。
向上或向下移动你的滑块,你可以仔细选择你认为最合适的颜色。
现在,你设计的页面有了三个基本的颜色:背景色、文本色和高亮色。在以后你也可以选择一种以上的高亮色,但现在对于新手的你来说还是选择一种比较合适。你现在已经掌握了基本的配色,如果你有信心,你以后还可以尝试更多种不同的方案。
你刚刚学到:
学会了如何选择“色相”。概括来说,色相是基本色,当你移动滑块,你会看到h值在颜色选择器中的变化。
“H”代表色相,一旦你选择了你的高亮颜色,文本框中显示的就是你当前颜色的色相。
四、如果有疑问,请使用蓝色
如果你对你的高亮色的选择有疑惑的话,不妨使用蓝色。蓝色是一种弹性比较大的颜色,可以和很多种颜色搭配。黄色和紫色也很不错,但是如果使用不当会适得其反。
另一方面,如果你是用蓝色,那么你用错颜色的概率就会很低。如果你正犹豫着不知道用什么颜色好,不妨使用蓝色。比较安全的蓝色包括从H235到H190,从海军蓝到深蓝色。
五、给你的高亮色增加变化
你一旦选择了高亮的颜色,从该点移动滑块来选择接下来的颜色。在你的设计中也需要其他的颜色,高亮色的稍微变化会让你的颜色选择变得简单。
六、尽量不要使用颜色选择器右上角的颜色
颜色选择器的右上角是一块肥沃的土地。在右上角的颜色就像F1赛车;
他们可以执行出惊人的效果,而且非常诱人,但通常想用好需要大量的经验。如果没有这种经验,他们可能会导致事故的发生,所以最好以削弱你的颜色,最好都保持比较淡化的色彩。
网页设计布局要注意什么
1、JUMP率
在版面设计中,标题的大小必须由内容决定。标题和正文大小的比例被称为JUMP率。
JUMP率越大,版面就越活泼;JUMP率越小,版面的格调就越高。根据这个尺度来衡量,很容易判断版面的效果。标题和文字字体大小的决定,还要考虑双方的比例关系,如何进一步调整,也是一个不小的学问。
2、排版率
在设计用纸中,一个文档所使用的排版面积称为版面,而版面与整个页面面积的比例则称为版面率。
空白的多少对版面的印象,有着决定性的影响。如果空白部分较多,会使格调提高,使版面稳定;空白较少,会使人感到活泼。如果设计一本信息量很大的杂志版面,使用较多的空白,显然不合适。
3、留白量
当涉及到布局时,留白量也很重要。即使是同一张照片,由于留白量的问题,同一句话也会影响演示的形象。不管排版的平衡性有多好,文章有多漂亮,当读者看到版面的留白量时,他就已经打分了。
"留白"并不特指网页上的白色区域。事实上,网页中任何不受前景元素干扰的视觉区域都被称为"留白"。
横向通栏的留白可以使网页具有水平的流动感;纵向的留白可以平衡文字、导航栏等视觉元素在水平方向上的作用力;标题区的大面积留白可以突出公司名称或网页标题信息;正文区的大面积留白不仅可以丰富页面布局的内涵,也可以缓解浏览者阅读时可能产生的视觉疲劳。
4、视觉导线
根据眼睛或物体指向的方向,使版面呈现出引导路线,称为视觉导线。
每个网页都是一个神奇的视觉空间。像我们熟悉的四维时空一样,网页空间也有深度、广度和时间的流逝感,甚至在设计元素引发的"力"的作用下产生运动或扭曲。
每当打开一个新的网页时,人的视线首先会集中在网页上最吸引人注意的地方——通常称其为视觉焦点。
然后,我们的视觉会受到视觉焦点周边的设计元素的形状和分布的影响,并在无意识地将我们的眼睛转移到另一个值得注意的位置(例如,一条醒目的线,一个颜色的渐变到它的近似值,所有这些都会使我们的眼睛按照预先确定的轨迹移动)。