当前位置: 首页 >网页设计 >网站配色与布局关系介绍(简析十大网站布局和配色)

网站配色与布局关系介绍(简析十大网站布局和配色)

2022-07-07 10:40:42 网页设计
472 0

配色方案:
一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。1、在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。2、在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。 3、在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。 4、在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。


二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。 1、 在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。 2、 在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。 3、 在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。 4、 在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。


三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。 1、 如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。 2、 在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。

 
四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中庸,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。 1、 在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。 2、 在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。 3、 在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。

 
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。 1、 在紫色中红的成份较多时,其知觉具有压抑感、威胁感。 2、 在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。 3、 在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。


六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。 1、 在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。 2、 在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。 3、 在白色中混入少量的蓝,给人感觉清冷、洁净。 4、 在白色中混入少量的橙,有一种干燥的气氛。 5、 在白色中混入少量的绿,给人一种稚嫩、柔和的感觉。 6、 在白色中混入少量的紫,可诱导人联想到淡淡的芳香。


52我爱CSS(http://www.52css.com/
该网站以简洁、清雅为特点。银灰色的背景,再加上惹人醒目的天蓝色的导航条,顿时让整个页面显得质朴和内向,与技术网站的风格比较和谐。再又搭配上红色52让整个页面不会太过于沉闷。
它的是传统的三栏布局,中间一栏是主体,其中有好多小模块,之间用虚线间隔开来,前面用蓝灰色的箭头标注,与整个页面融为一体。左边一栏是这个网站的经典模块,所以用图片进行链接,图片的颜色也是以暗红和灰色为主。右边一栏也是这个网站的板块分区,是蓝色和黑色的字体。网页的最下面是淡蓝色背景,蓝色字体做成的友情链接。


中国NBA(http://china.nba.com/) 
这是一个中国官方网站,又是一个体育运动网站,整个页面的色彩分为两部分,刚打开页面是充满整个屏幕的蓝色,然后拖动滚动条就变成白色,这种颜色上的转换导致了浏览者视觉上的跳动。再说,整个页面除了颜色造成的跳动感外,照片的跳动,还有大量的flash,这都是网站的主题——运动相符的。再说布局方面,它也是三栏,只是与上面的那个网站不同的是它的内容比较多,所以就分了好多板块。每个板块都是淡蓝色标题栏,黑色的字体,网页最下面的也是友情链接。


http://www.donews.com/
这个网站因为信息量比较大,所以分为了四栏,有好多个板块,但是却不显得杂乱,而是井然有序,现在我们来仔细地分析一下它吧。左边一栏比较窄,贯穿上下,是对近几天的新闻进行投票;因为整个页面比较长,所以中间的两栏上下之间均匀地穿插了四幅图片。在页面下面从左到右都是以蓝色为主体的链接。整个页面是以淡蓝色为主题,基本上没有其他的颜色。

 
依儿酷站(
http://www.yi2.net/
颜色分非彩色和彩色两类,非彩色是指黑,白,灰系统色,彩色是指除了非彩色以外的所有色彩。这个网站采用的就是非彩色的搭配,黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。白、黑灰这三种色组成了一个具有艺术气息的网站。


中国艺术设计联盟 (http://www.arting365.com/
整个页面以红色为主色调,白色为背景,红色是一种激奋的色彩,刺激效果,能使人产生冲动,热情,活力的感觉。再加上黄色的辅助色,显得特别醒目,意蕴深厚,也不会太张扬刺眼。网页布局也是分为三列,右两栏是连在一起的,是对不同内容的分类。整个页面充满了图片,展现出活力与激情,与红色相呼应。


收成在线(http://www.sc98.cn/
页面开头和结尾都以翠绿色为背景,而整个网页就好像嵌在黑灰色的大背景上。感觉底蕴深厚,翠绿色又体现出了活泼和生机。这个网页大致可以分为两列,左列是对本站的介绍和网站推广,右列就是主体了,它有分了6行。各个小标题都是绿色的,其它都是白底黑字。给人以一种大方得体的感觉。

中国设计秀(
http://www.cnwebshow.com/
背景是土黄色,两边还留了白,色调比较暗,但是页面上图片比较多,而且颜色比较鲜艳,给原本暗淡的背景上增加了一些亮眼的东西,使浏览者的眼睛为之一亮,带来了跳动的视觉感。各个小标题都是用黄色箭头来指示的,与背景相映生辉。这个网页是标准的三栏布局,图片是以行的形式插在各个栏中的。


设计前沿(http://www.wzsky.net/
这也是个专门设计的网站,但是它的风格跟之前的那几个网站都不一样,相比之下它显得淡雅朴素,网页是以淡蓝色为主调,淡雅之外又透着清新,这个网页内容比较多,所以内容就比较繁杂,但是网页分割的小板块和小板块之间比较整齐,所以看上去看到的是一个一个的板块。


猫扑(http://tech.mop.com/
整个页面是以淡蓝色为主色调,白色为背景,好像这是个经典的搭配,永远都不落俗套,再在banner处加上了鲜黄的颜色,为这个网页加上了一点人文的色彩,多了种厚实的感觉。


中国高等教育学生信息网(http://www.chsi.com.cn/?
这是一个教育性质的网页,整个色调是天蓝色,蓝色是最具凉爽,清新,专业的色彩。用在这里很合适。板块的框架边线也是用蓝色勾勒出来的,这个网页的布局是方方正正的三列。

 


通过以上分析,可以得出网页色彩搭配应该注意的问题:
1.使用单色  
尽管网站设计要避免采用单一色彩,以免产生单调的感觉,但通过调整色彩的饱和度和透明度也可以产生变化,使网站避免单调。
2.使用邻近色
所谓邻近色,就是在色带上相邻近的颜色,例如绿色和蓝色,红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱,易于达到页面的和谐统一。
3.使用对比色
对比色可以突出重点,产生了强烈的视觉效果,通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调,对比色作为点缀,可以起到画龙点睛的作用。
4.黑色的使用
黑色是一种特殊的颜色,如果使用恰当,设计合理,往往产生很强烈的艺术效果,黑色一般用来作背景色,与其它纯度色彩搭配使用。
5.背景色的使用
背景色一般采用素淡清雅的色彩,避免采用花纹复杂的图片和纯度很高的色彩作为背景色,同时背景色要与文字的色彩对比强烈一些。
6.色彩的数量
一般初学者在设计网页时往往使用多种颜色,使网页变得很“花”,缺乏统一和协调,表面上看起来很花哨,但缺乏内在的美感。事实上,网站用色并不是越多越好,一般控制在三种色彩以内,通过调整色彩的各种属性来产生变化。


admin
admin

评论列表(0条)

发表评论

Copyright © 2021 All Rights Reserved 版权所有 一舟讲堂