网页设计与鉴赏解析课件.ppt

《网页设计与鉴赏解析课件.ppt》由会员分享，可在线阅读，更多相关《网页设计与鉴赏解析课件.ppt（122页珍藏版）》请在三一办公上搜索。

1、关于网页设计,1.网页框架,根据目前网页设计现况，可以把网页框架归类为三大类：分栏式结构区域排版非规律的页面排版,1.网页框架,分栏式结构和区项排版是两种较常见的基本构架形式,在商业网页设计方面有较广泛的应用,同时也是非商业网页设计构架的首选.非规律的网页排版,主要是指无框架页面设计以及多变化Flash媒体设计.由于这两种排版形式变化多,不好把握,而且个性化极强,没有规律，因而通称为非规律的网页排版.,1.网页框架,三类框架结构各有特色,分别适用于不同信息类型的网站.其中分栏式结构是运用最为广泛的页面结构，它适用于门户、商业、个人等不同信息类别的网页设计。分栏式结构应用最为普遍，也是网页设计发

2、展的最初形态.,1.分栏式结构,分栏式结构是最常见的网页框架,也可以称为竖分栏.这是一种把页面从上到下分割为几列构架的设计结构，类似于新浪的网页骨架设计().,1.分栏式结构,1.分栏式结构,分栏式结构是竖长方形页面的框架.如上图所示的新浪网骨架结构,从上到下被分为两列,我们称之为二分栏结构.最常见的分栏式骨架结构,还有如的三分栏(见图1.5),以及国外常见的四分栏式结构.另外还有较为特殊的通栏(见图1.7)和五分栏(见图1.8),图1.5 的三分栏框架结构,图1.7 通栏,1.分栏式结构,分栏式结构的变化 在竖分栏内增加多个小分区的方式可以使分栏式结构产生多种变化形式，打破分栏式的死板结构,

3、增强了分栏式结构的应变能力. 根据常见的分栏式结构,可以绘制一些简单变化结构图(图1.11),1.分栏式结构,、是以二分栏作为基础结构。其中，是logo和导航处于下方的情况，这种结构也是很普遍的，可以选用Frame制作。二分栏结构一般是左窄右宽，导航居左，底色加重表示强调，但也有右窄左宽，导航居右，但非主流。是以三分栏作为基础结构。三分栏属于开放式结构，给人的感觉十分大气，适用于门户和流量大的网站。常规内容设置是：导航横排在页面上部，左右两栏为功能区和附加信息区。中栏为主要信息显示区和重要资料显示区。,1.分栏式结构,根据信息源，将中栏进行一些小分栏变化，以确立网站特色。色彩分布则主要是左右两

4、栏色彩深一些，而中栏为白色等常见情况。在全球设计师陆续推出个性化网页设计的同时，一些常规早已被打破。,1.分栏式结构,中的前两个是四分栏的结构框架，后两个是五分栏的结构框架。四分栏式结构会使页面相对很拥挤，给人一种网站的信息量很大的感觉。信息储备少的站点采用这种框架，可以在视觉感官上调整信息量少的不足。由于英文字比中文方块汉字占用空间小，因而四分栏在国外比较多见。,1.分栏式结构,是一些特殊的分栏结构。 在人们都选用开放式的分栏结构的同时，往往又需要在相同的框架结构中设计出不同效果来，以至于看起来“四不像”的框架结构越来越多。栏宽窄不同，底色不同，小区域划分不同，位置不同，排列组合后可以衍生出

5、无穷无尽的变化，给网站带来无穷的魅力和新的生命力。,1.分栏式结构,分栏式结构的页面容易过长，过长的页面载入非常慢，从而失去分栏式的优越性。为了不给访客带来太大的麻烦，应尽量保证页面的长度在两屏到三屏为佳。,1.2 区域编排,利用辅助线、插图色彩把网贞平面订为几个规则的或不规则的区域，形成类似图119所示的网页框架，这种网页框架笼统称为区块分布式结构，也叫做区域编排式结构设计。横向割断分栏式结构，就可以变成区域排版所以也可以称区域排版为分栏结构的变异。,图 1.19,1.2 区域编排,总体来说，分栏式和区域编排没有严格的界限。只要能设计出风格独特的网页，就是好的框架。在进行设计时，不要给自己太

6、多的条条框框和先入为主的思想，它们会妨碍思路的开阔和创意的展开。,1.2 区域编排,我们归类的以上各种情况，是为了了解今天的网页设计状况，也是为了寻找设计突破点，展开新的创意思路。区域编排结构是由分栏式结构衍生出来的，但分栏式结构设有被淘汰。区域编排虽先进，但却不太稳定。两种框架各有特点，实际操作时，可相互搭配。,1.3 非规律框架设计,分栏式结构和区域编排以外的网页框架归属为一类，即非规律框架。非规律框架设计真的没有规律吗?也不尽然。非规律框架按整体效果可先分为动态网页和静态网页。其中，静态网页主要有以下三种情况： 第一类：由无框架的整张图片分割生成的网页。 第二类：横向页面很长，有些怪异的

7、网页。 第三类：整个信息区很小的袖珍型网站。,1.3 非规律框架设计,动态网页主要是以Flash形式为主的新媒体设计。先不谈其动态的过程和效果，通常最后落定的标版，可粗略归为两种形式：一种是标版类似于分栏式或区域编排结构。换句话说，Flash内局部嵌套以上两种网页框架；第二种则是根本无任何规律可寻，类似于静态网页中的第一类情况。,1.3 非规律框架设计,静态页面设计第一类 设计好的网页图片采取分割整张图片生成网页的形式去制作。此类页面设计通常精美华丽，视觉效果较好但不适用于信息量大的网站和商业类型的站点。 而个人主页和商品展示页面，完全可以采取这样的形式来突出个性化，以便于产品促销。,1.3

8、非规律框架设计,静态页面设计第二类 通常在设计分栏式或区域排版风格的网页时，设计师们十分介意浏览器出现横向滚动条. 一方面只带一个滚动键的鼠标不能滚动横向页面，在鼠标操作上多有不便; 另一方面,在商业类或门户类站点中出现滚动条,是十分不美观的.,1.3 非规律框架设计,一旦横向能够滚动两屏或两屏以上,特殊怪异的个性美就展现出来了。信息平铺到该页,无所谓导航的概念,起内页信息都是以弹出窗口的形式连接。横向滚动的同时，好似观看一场展览。沿着墙壁一路过去，滋味别样。此类网页设计虽然同样不适合商业化信息多的网站，但是可以用来作为展示商品的页面，可以把信息内容连贯起来，使浏览者有统一的视觉轮廓。,1.3

9、 非规律框架设计,静态页面设计第三类 袖珍型的页面设计，同样适用于信息量少的网站。 日韩这类风格的站点很多，大概是他们偏爱这类可爱而小巧的精致设计。 个人主页是网络一道最美丽的风景线，曾有人认为：没有了个人主页，仅剩的商业网页设计真没有什么可看性。,1.3 非规律框架设计,多变化Flash网页设计 动态的flash网页设计，通常表现出互动感、时代感和科技感。给浏览者带来强烈的视觉冲击。,1.3 非规律框架设计,一个完全由Flash制作的网站大多不外乎两种情况： 一种是静止后的页面，类似分栏式或区域排版结构。另一种情况是根本没有边际可寻，完全是一个动画场景或整张图的视觉效果。,1.3 非规律框架

10、设计,以下列出几个教好的Flash技术站点,供大家学习flash是参考查阅:http:/国际最著名flashkit,资源教多,教学、代码全面http:/提供flash的资讯、高级教程和高级源文件http:/www.were-国际著名Flash论坛，聚齐国际知名闪客,1.3 非规律框架设计,http:/业内新闻、动态排行、技术支持等http:/Flash相关软件全面，选这里下载最好http:/源代码非常多，便于下载学习,几个好的网页设计 www.Pwww.Hhttp:/,2.页面元素,导航网站标志（Logo）广告条（Banner）图片文字动画装饰物超级链接,2.1 导航,导航就像一本书的目录，先

11、有章，而后是节，再就是小节。导航栏应放置到明显的页面位置，让浏览者在第一时间内看到它并作出判断，确定要进入哪个栏目中去搜索他们所要的信息。,2.1 导航,导航栏的分类：横排导航、竖排导航、多排导航、图片式导航、Frame框架快捷导航、Jump Menu下拉菜单、隐藏式导航、Flash等,2.1 导航,选用导航的先决条件有两个：是否符合页面风格；是否符合信息类别要求。在导航栏目种类不超过6个的情况下，通常选择一排放置，横竖都可以；导航超过6个就可以考虑用双排。导航栏目非常多的情况下，可以选择多排。大多数网站把栏目个数折半，分成两排。,2.1 导航,门户类、商业类站点，通常会有很多频道，加起来十几

12、个，足够双排。横排导航和竖排导航比较起来，横排给人感觉上占页面空间小，所以此类站点多选择横排导航。竖排导航按人们的习惯，大多放置在页面的左边。导航在右边不符合人们的习惯。,2.2 Logo,Logo的中文涵义是标志、标识。几种常见位置图。,2.2 Logo,注意：标志不能有夸张的动感。如果是大动作动画，由于标志的位置通常十分显著，会影响访问者对页面信息的注意力，同样会影响网站形象和页面整体感觉。,2.3 背景图,渐变色背景 渐变色的背景图可以很快抓住人们的视线，体现网站的主体风格。花纹背景 在空白区域大的情况下，变换不同的颜色、花色、暗纹、质地的背景图，可以使整个网站感觉充实。,2.3 背景图

13、,整张图片作为背景 为了突出网页设计的个性化，很多网站甚至用整张图片作为背景。 1，速度，网页不能承受大于100KB的背景图片。 2，过火压缩图片，会使图片模糊影响页面效果。 因此需要优化。,2.3 背景图,把大的背景分割，不需要的部分省去，另一部分可以换成表格背景，分开插入页面当中注意到页面的长度，考虑好是否可以重复使用图片。单色的地方，可以使用表格背景色填充。有文字的地方，可以考虑不做在图片里，以免压缩图片时文字变模糊。,2.3 背景图,使用CSS来控制背景图，在制作上会比较规范。,2.3 背景图,2.4 背景图,分辨率问题页面的分辨率一直是设计师处理页面布局时感到比较头疼的一个环节。背景

14、图的应用可以帮助我们解决一部分有关分辨率的问题.能够缓解分辨率的背景图,一般来说,其花色最好是横向重复的或是水平线形花纹.这类背景图要求简洁并且可与页面信息部分相符合.(如图. http:/www.li-,2.4 背景图,有信息内容的页面上的背景图在含有信息内容的页面上要加背景图片时应注意:背景与主体明度对比为3:1到5:1之间为宜.淡色系列的背景有助于整体和谐.淡色材质背景为佳,能与主题分离之浅色标志或文字背景亦可.,2.5 插图,图片可以美化页面,但不能无节制地乱用.页面上图片的主体应清晰可见,图形的含义最好简单明了,图片内所含文字应该清晰,容易辨认.图片上的文字:若图片上含有文字,这些文

15、字一定要清晰.模糊的文字会降低视觉效果.含有文字的图片,尽量保存为.gif格式和.png格式,或者高质量的.jpg格式.,2.5 插图,图片上的色彩:要选择适宜的插图,首先就要注意图片上反应出来的信息内容,其次才是图片本身的色彩是否符合页面的整体配色风格,不太符合的图片必须进行色彩上的处理.44,2.5 文字,每一行文字的长度最好为2030个中文字(4060个英文字母).标题以H1到H3为佳,内文字体以34级为佳.同版面字型最好在三种字型以内.文字的颜色最好在三种颜色以内.文字在颜色上要与背景区分.内文排列向左对齐并与左边界保持适当距离.标题字数宜少,排在同一行,字数少则字可大.可利用空行,画

16、线条或装饰线分隔不同类型的内文.,2.5 文字,内文中欲引人注意的重点,可用与内文同大小之斜体字或较粗的字体,或于重点下画线.首字处理可为版面带来图案的趣味,同时不要太过夸张.不同性质的内文,例如问题与解答,可分别采用不同字体或颜色.,2.5 文字,字体的搭配大标题,小内文粗标题,细内文字体少,字型少字体与网站内容相配合.着重理性类网站,宜采用较冷静理智的方正型字体,如黑体,圆体;感性类网站,不妨用较具变化感的字体.,2.6 装饰物,页面的装饰物是网页设计中最为特殊、变化最多的页面元素。这其中包括图标、图片式的按钮、导航条上的修饰物及吸引视线的小动画、修饰页面完整性的小设计等。,2.7 动画,

17、动画设计最能体现网站的技术含量和设计师的动态设计水平。动画可以由多种形式制作，目前最主要的还是Flash动画和gif动画。动画容易造成对读者视觉上的强烈骚扰，同时也容易制约页面的访问速度。目标明确。为什么一定要用动画图像，为浏览方便？还是为强调信息？,2.7 动画,尽量缩减动画的大小。一个gif动画最大不要超过30KB。Flash动画一定要做装载动画。注意动画是很抢眼的，弄不好会画蛇添足。所以针对动画的设计，需要多方面的思考与尝试。,2.8 超级链接,文字式超级链接的四种状态色，一定要符合整体页面的风格。不要在一篇短文里提供太多的超级链接。适当、有效率地使用超级链接是一个优良的导览系统不可或缺

18、的要件之一，但过分滥用超级链接，会造成短短的一篇文章里处处是links，反而损害了页面行文的流畅。在一篇长短适中的页面里，文章里提供的文字式超级链接最好不要超过10个。,http:/,2.9 网络广告,网络广告标准规格1997.1.24 2001.2,3.色彩设计,色彩是最先也是最持久地影响浏览者对网站兴趣的因素.色彩的使用在网页设计中起着非常关键的作用,有很多网站以其成功的色彩搭配令人过目不忘.实用网页色彩设计也有一些可寻性规律.,3.1 网页中的色彩,网页色彩是设计色彩中的一种.无论是单个页面的色彩搭配,还是整个网站的色彩设计,首先要确立主体色(主色调).榕树下(http:/) 绿色新浪(

19、http:/) 黄色雅虎(http:/) 白色,3.2 基本概念和规律,色谱一条连续彩虹中的”可视光”分解成从蓝到红的色谱,如下图所示.在色谱中,线性罗列了所有的基本颜色,也是所有颜色的根本.,3.2 基本概念和规律,色环在从红到紫的光谱中,等间的选择两种或两种以上的颜色,相邻的两个色相互混合又得到另一种特殊的颜色.如此周而复始,从而构成一个首尾相交的环,被称为孟赛尔色相环,即色环.从本质上讲,色环就是色谱可以看到的颜色所形成的线性连续环.,3.2 基本概念和规律,三原色的概念如同大家所知道的,三原色是能够按照一些数量规定合成其他任何一种颜色的基色.所有的颜色其实都是由三原色按照不同的比例混合

20、而来.色彩的三原色为红,黄,蓝,而色光的三原色为红,绿,蓝.,3.2 基本概念和规律,RGB我们日常见的白光，实际由红（Red）、绿（Green）、蓝（Blue）三种波长的光组成，物体经光源照射，吸收和反射不同波长的红、绿、蓝光，经由人的眼睛，传到大脑形成了我们看到的各种颜色，也就是说，物体的颜色就是它们反射的光的颜色。,3.2 基本概念和规律,CMYK接触过印刷的人都知道，印刷制版的颜色是青（Cyan）、洋红（Magenta）、黄（Yellow）和黑（Black）。这就是CMYK颜色模式。这种颜色模式的基础不是增加光线，而是减去光线，所以青、洋红和黄称为“减色法三原色”。,3.2 基本概念和

21、规律,色相指颜色的属性,是红色,绿色还是蓝色.如下图所示,分别为同一张图片的三种色相.,3.2 基本概念和规律,纯度也称作饱和度,是指在同等明度的条件下,颜色从灰色到纯色的变化.如下图所示为同一张图片,饱和度分别为-100,0,+100时的状态.,3.2 基本概念和规律,明度从黑到白中间增加9个均匀过渡的灰度阶段,被称为明度,也叫明度尺.如下图所示为同一张图片明度分别为-50,0,+50时的状态.,3.2 基本概念和规律,近似色近似色是已给出的颜色之外的任何一种颜色.如果从橙色开始,它的两种近似色应该选择红和黄.如下图所示,为近似色在色环上的位置.用近似色的颜色主题可以实现色彩的融洽与融合.,

22、3.2 基本概念和规律,几种近似色的搭配方案,3.2 基本概念和规律,下图为使用了近似色搭配方式的商业网站.蓝色系的搭配,给人以清凉,专业的感觉.,3.2 基本概念和规律,补充色补充色也叫对比色,是指在色环中的直接位置相对的颜色,如下图所示.如果想要使色彩强烈突出,富有冲击力的话,可选择对比色.,3.2 基本概念和规律,下图为使用了补充色的网站.大块的橙色和蓝色用到一起,具有强烈的冲击力,达到了视觉上的震撼效果.,3.2 基本概念和规律,分离补色分离补色可以由2-3种颜色组成.在色环上选择一种颜色,它的补色就在色环的另一面.可以使用补色旁边的一种或多种颜色.这样的一组颜色叫做分离补色.如下图所

23、示.分离补色的搭配可以起到类似补充色的强烈对比作用,但有近似色的缓冲,可以使页面效果更加柔和.,3.2 基本概念和规律,下图为使用了分离补色搭配方式的网站.这个网站给人的感觉是色彩鲜明,但是又不会过于突出.,3.2 基本概念和规律,组色组色是色环上距离相等的任意3种颜色.如下图所示为色环上的一组组色.因为3种颜色形成了对比关系,所以组色被用作一个色彩主题时,会对浏览者造成紧张的情绪.一般在设计中,很少采用组色的搭配.,千万年来的生活实践，人类由鲜血的红色、植物的绿色、稻麦的黄色、海洋的蓝色等各种自然色彩中形成了一系列共同的印象，使人们对色彩这一物理学上的光波赋予了特别的象征意义。色彩所形成的这

24、种“视觉语言”常常表达着如下的含义：红色热烈、喜庆、激情、辟邪、危险 橙色温暖、事物、友好、财富、警告 黄色艳丽、单纯、光明、温和、活泼 绿色生命、安全、年轻、和平、新鲜 青色信任、朝气、脱俗、真诚、清丽 蓝色整洁、沉静、冷峻、稳定、精确 紫色浪漫、幽雅、神秘、高贵、妖艳 白色纯洁、神圣、干净、高压、单调 灰色平凡、随意、宽容、苍老、冷漠 黑色正统、严肃、死亡、沉重、恐怖,3.3 颜色的意义,3.4 选择色彩,选择色彩时大体上应考虑以下几个因素：清楚界定出想要用色彩达到什么样的目的。选择反映设计所需要的主色。选完中央纯色后，再排色彩搭配的设计。以设计的特点或人的感觉为着眼点，让可以利用得到的色

25、彩选择更加完美。,3.5 网页配色,网页配色1.按形容词分类2.按颜色分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3.5 按形容词分类,3. 5 按颜色分类,虽然没有进行过精确的统计，但使用红色为主颜色的站点相对较少，因为很多人不太敢于大范围使用鲜艳的红色。红色在网页中大多数情况下都用

26、于突出颜色，因为鲜明的红色极易吸引人们的目光。 高亮度的红色通过与灰色、黑色等非彩色搭配使用，可以得到现代且激进的感觉。 低亮度的红色通过冷静沉重的感觉营造出古典的氛围。,3. 5 按颜色分类,在整个人类的发展历史中，红色始终代表着一种特殊的力量与权势。在很多宗教仪式中会经常使用鲜明的红色，且在我国红色一直都是象征着吉祥幸福的代表性颜色。同时，鲜血、火焰、危险、战争、狂热等极端的感觉都可以与红色联系在一起。红色所具有的这种生命力在很多艺术大家的作品中得到了淋漓尽致的发挥。,3. 5 按颜色分类,使用了高亮度橙色的站点通常都会给人一种晴朗新鲜的感觉，而通过将黄色、黄绿色等类似颜色与成色搭配使用，

27、通常都能得到非常好的效果。同时，中等色调的橙色类似于泥土的颜色，所以也经常用来创造自然的氛围。橙色是可以通过变换色调营造出不同氛围的典型颜色，它既能表现出青春的活力也能够实现沉稳老练的效果，所以橙色在网页配色中的使用范围是非常广泛的。,3. 5 按颜色分类,橙色通常会给人一种朝气活泼的感觉，它通常可以是原本抑郁的心情豁然开朗。在东方文化中，橙色象征着爱情和幸福。充满活力的橙色会给人健康的感觉，且有人说橙色可以提高厌食症患者的食欲。有些国家的僧侣主要穿着橙色的僧侣服，他们解释说橙色代表着谦逊。,3. 5 按颜色分类,黄色是在站点配色中使用最为广泛的颜色之一，因为黄色本身具有一种明朗愉快的效果，所

28、以能够得到大部分人的认可。黄色在从儿童站点直至门户型网站等几乎每一个角落中都找到了自己的发挥空间，通过结合紫色、蓝色等颜色可以得到温暖愉快的积极效果。高彩度的黄色与黑色的结合可以得到清晰整洁的效果，这种配色实例在网页设计中经常可以见到。 采用同一色调的深褐色与黄色的搭配，可以表达一种成熟的城市时尚的感觉。,3. 5 按颜色分类,黄色是明亮的且可以给人甜蜜幸福感觉的颜色。在很多艺术家的作品，黄色都用来表现喜庆的气氛和富饶的景色。同时黄色还可以起到强调突出的作用，这也是使用黄色作为路口指示灯的原因。黄色因为具有诸多以上的特点，所以在我们的日常生活中随处可见。,3. 5 按颜色分类,黄绿色时而能够表

29、现出自然的感觉，时而能够表现出未来虚幻的感觉。原本这两种印象之间有很大的差异，但黄绿色就像穿越时间隧道那样能够自由自在地表现出这两种截然不同的感觉。在网页中，黄绿色通常与蓝色搭配使用。总的来说，黄绿色主要用于表现温暖亲切的感觉或高科技神秘虚幻的感觉。,3. 5 按颜色分类,黄绿色和草绿色都会让人联想起大自然。黄绿色同时含有黄色和绿色两种颜色的共同特点，也就是说，黄绿色既能表现出黄色的温暖，也能表现出绿色的清新。在社会上，儿童和年轻人比较喜欢黄绿色。,3. 5 按颜色分类,绿色也是在网页中使用最为广泛的颜色之一。因为它本身具有一定的与健康相关的感觉，所以也经常用于与健康相关的站点。绿色还经常用于

30、一些公司的公关站点或教育站点。当搭配使用绿色和白色时，可以得到自然的感觉。 当搭配使用绿色与红色时，可以得到鲜明且丰富的感觉。 同时，一些色彩专家和医疗专家们提出绿色可以适当缓解眼部疲劳。,3. 5 按颜色分类,人们看到绿色的时候，第一反应就会想到大自然。很多人都说绿色是大自然的颜色，绿色也代表着大自然中的每一个可贵的生命。大自然给了我们新鲜的氧气，而绿色也能使我们的心情变得格外明朗。当需要揭开心中的抑郁时，当需要找回安详与宁静的感觉时，回归大自然是最好的方法。,3. 5 按颜色分类,青绿色会给人带来凉爽清新的感觉，且青绿色既可以使人原本兴奋的心情冷静下来，也可以使人原本沉静的心情活跃起来。使

31、用青绿色的站点也是随处可见。青绿色与黄色、成色等颜色搭配可以营造出可爱亲切的氛围。 青绿色与蓝色、白色等颜色搭配可以得到清新爽朗的效果。,3. 5 按颜色分类,青绿色可以说是草绿色的健康和蓝色的清新感觉的结合体，但在自然界中它并不多见，会给人较强的人工制作的感觉。这也使它在保留自然颜色原有特点的同时，有为其赋予了特殊的效果。色彩和心理学家分析说，青绿色可以给一个心情低迷的人一种特殊的信心与活力。,3. 5 按颜色分类,很多站点都在使用蓝色与青绿色的搭配效果。最具代表性的蓝色物体莫过于海水和蓝天 ，而这两种物体都会让人有一种清凉的感觉。高彩度的蓝色会营造出一种整洁轻快的印象。 低彩度的蓝色会给人

32、一种都市化的现代派印象。 蓝色与绿色、白色的搭配在我们的现实生活中也使随处可见的，它的应用范围几乎覆盖了整个地球。主颜色选择明亮的蓝色，配以白色的背景和灰亮的辅助色，可以使站点干净而整洁，给人庄重、充实的印象。 蓝色、青绿色、白色的搭配可以使页面看起来非常干净清澈。,3. 5 按颜色分类,蓝色会使人自然地联想起大海和天空，所以也会使人产生一种爽朗、开阔、清凉的感觉。作为冷色的代表颜色，蓝色会给人很强烈的安稳感，同时蓝色还能够表现出和平、淡雅、洁净、可靠等多种感觉。低彩度的蓝色主要用于营造安稳、可靠的氛围，而高彩度的蓝色可以营造出高贵的严肃的氛围。,3. 5 按颜色分类,蓝紫色在色相环中位于蓝色

33、和紫色之间，所以它也蕴含着紫色的一些神秘感。低亮度的蓝紫色显得很有分量，而高亮度的蓝紫色显得非常高雅。在网页中，蓝紫色通常与蓝色一起搭配使用。,3. 5 按颜色分类,蓝紫色可以用来创造出都市化的成熟美，且蓝紫色可以使心情浮躁的人冷静下来。明亮的色调直至灰亮的蓝紫色有一种与众不同的神秘美感。,3. 5 按颜色分类,紫色通常用于以女性为对象或以艺术作品介绍为主的站点，但很多大公司的站点中也喜欢使用包含神秘色彩的紫色。较暗色调的紫色可以表现出成熟的感觉，但女性站点中使用的通常都是清澈的紫色。不同色调的紫色可以营造非常浓郁的女性化气息，而且在白色的背景色和灰色的突出颜色的衬托下，紫色可以显示出更大的魅

34、力。,3. 5 按颜色分类,在艺术家们的眼里，紫色通常都代表着神秘和尊贵高尚。正因为紫色的这种特点，从古至今紫色在很多领域发挥着不可或缺的作用。据说因为在古代提取紫色染料耗费的成本非常高，所以价格昂贵的紫色布料只有那些王公贵族们才享受得起。,3. 5 按颜色分类,清澈（Pale）色调的紫红色又称粉红色，粉红色主要用于包含少女在内的女性站点。因为从明亮（Bright）到苍白（Very Pale）色调的粉红色能够表现出可爱、乖巧的感觉，所以有人也会用作背景色或在页面中大范围地使用该颜色。紫红色并不能随意在所有的站点中使用，但使用恰当的紫红色会给人留下深刻的印象。白色、粉红色、天蓝色的颜色搭配，是最

35、受少女欢迎的配色方案。 高彩度的紫色和粉红色之间的搭配通常都能得到较好的效果。,3. 5 按颜色分类,紫红色市非常女性化的颜色，它给人的感觉通常都是浪漫、柔和、华丽、高贵优雅，特别是粉红色可以说是女性化的代表颜色。高彩度的紫红色可以表现出超凡的华丽，而低彩度的粉红色可以表现出高雅的气质。,黑色与白色表现出了两个极端的亮度，而这两种颜色的搭配使用通常可以表现出都市化的感觉。只要能够合理地搭配使用黑色与白色，甚至可以做到比那些彩色的搭配更生动的效果。黑色与白色的搭配通常用于现代派站点中，通过合理地添加一些彩色还可以得到突出彩色的效果。,3. 5 按颜色分类,白色有很强烈的感召力，它能够表现出如白雪

36、般的纯洁与柔和。黑色也有很强大的感染力，它能够表现出特有的高贵，且黑色还经常用于表现死亡和神秘。因为黑色和白色的搭配有一种特殊的严肃感，所以还经常用于如结婚典礼等庄重的场合。,两个以上的色彩放置在一起,就会产生色相、明度、彩度、冷暖、面积等性质差异对应关系。按 色彩对比的程度来划分，色彩对比的状态有：明暗弱对比、明暗中对比、明暗强对比；近似色相对比、对比色相对比、互补色相对比；彩度弱对比、彩度中对比、彩度强对比；冷暖弱对比、冷暖中对比、冷暖强对比；大面积与小面积对比、近似面积对比。,3. 6 色彩对比,按色彩的形象来划分，色彩对比的状态有：面积对比、位置对比、聚散对比、虚实对比、肌理对比、方向

37、对比。,3. 5 按颜色分类,按色彩的心理作用来划分，色彩对比的状态有：冷暖对比、轻重对比、干湿对比、厚薄对比、繁简对比、华素对比、动静对比、远近对比、新旧对比。,按色彩的组织来划分，色彩对比的状态有：单一对比、重复对比、多样对比、主从对比、特异对比等。,按需要的时间来划分，色彩对比的状态有：同时对比、连续对比。,3. 5 按颜色分类,按需要的空间来划分，色彩对比的状态有：同一平面对比、不同平面对比、主体各面对比、主体环境对比、同一视域对比、不同视域对比。,按色彩对比组合来划分，色彩对比的状态有：二色对比、三色对比、四色对比、多色对比、色组对比、色调对比。74,不同的视域,不仅注意力价值不同,在心理上也给人不同的感受;上部：给人以轻快、漂浮、积极、高昂的感觉。下部：给人以压抑、沉重、消沉、限制、低矮、稳定的感觉。左侧：感觉轻便、自由、舒展、活动。右侧：感觉紧促、局限、庄重。,4 视觉流程,