2022年网页设计方案布局和用色技巧.docx

《2022年网页设计方案布局和用色技巧.docx》由会员分享，可在线阅读，更多相关《2022年网页设计方案布局和用色技巧.docx（37页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用摘要 网页可以说是网站构成的基本元素；当我们轻点鼠标,在网海中漫游,一 副副杰出的网页会出现在我们面前；那么,网页杰出与否的因素是什么呢？文 字的变化、图片的处理等,这些当然是不行忽视的因素,除了这些仍有一个非常重要的因素网页的布局和色彩的搭配,颜色是一把开启人们心灵的钥匙；颜色是形成网页界面风格的最重要的组成部 分, 在排除立体图形、动画成效之外 , 颜色的冲击力是最强 的；在网页中要运用好颜色 , 就要留意主题色和帮助色的合理运用；合理运用静态色和动态色好的颜色不只能够向拜望者传达信息,并且能吸引拜 访者的目光；关

2、键词： 颜色；搭配；留意问题名师归纳总结 - - - - - - -第 1 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用第一章 网页设计的布局1 网页设计布局基础正如你现在所看到的一样,网页的布局设计变得越来越重要；拜访者不愿意再看到只留意内容的站点；虽然内容很重要,但只有当网页 布局和网页内容 胜利接合时,这种网页或者说站点才是受人宠爱的；取任何一面你都无法留住 太过 “挑剔”的拜访者；1.1 网页 布局的基本概念最开头,网页出现在你面前的时侯,它就似乎一张白纸,它需要你任意挥 洒你的设计才思；在开头的时侯,你需要明白,虽然你能掌握一切你所能掌

3、握 的东西,但假如你知道什么是一种商定俗成的标准或者说大多数拜访者的浏览 习惯,那么你可以在此基础上加上自己的东西；你当然也可以制造出自己的设计方案,但假如你是初学者,那么最好明白网页 1.1.1 页面尺寸布局的基本概念；由于页面尺寸和显示器大小及辨论率有关系,网页的局限性就在于你无法 突破显示器的范畴,而且由于浏览器也将占去不少空间,留下给你的页面范畴 变得越来越小；一般辨论率在 800x600 的情形下,页面的显示尺寸为：780x 428 个象素；辨论率在 640x480 的情形下,页面的显示尺寸为 :620X311 个 象素；辨论率在 1024X768 的情形下,页面的显示尺寸为：100

4、7x600；从 以上数据可以看出,辨论率越高页面尺寸越大；浏览器的工具栏也是影响页面尺寸的缘由；一般目前的浏览器的工具栏都 可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页 面的尺寸是不一样的；在网页设计 过程中,向下拖动页面是惟一给网页增加更多内容 尺寸 的 方法；但我想提示大家除非你能确定站点的内容能吸引大家拖动,否就不要让 拜访者拖动页面超过三屏；假如需要在同一页面显示超过三屏的内容,那么你 最好能在上面做上页面内部连接,便利拜访者浏览；1.1.2 整体造型什么是造型,造型就是制造出来的物体形象；这里是指页面的整体形象,这种形象应当是一个整体,图形与文本的接合应当是层

5、叠有序；虽然,显示器 和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它外形 以及它们的组合：矩形,圆形,三角形,菱形等；名师归纳总结 - - - - - - -第 2 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用对于不同的外形,它们所代表的意义是不同的；比如矩形代表着正式,规 就,你留意到很多 ICP 和政府网页都是以矩形为整体造型；圆形带表着柔和,团结,暖和,安全等,很多时尚站点宠爱以圆形为页面整体造型；三角形代表 着力气,权威,坚固,入侵等,很多大型的商业站点为显示它的权威性常以三 角形为页面整体造型；菱形代表着平稳,和谐,公

6、正,一些交友站点常运用菱 形作为页面整体造型；虽然不同外形带表着不同意义,但目前的 网页制作 多数 是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些；1.1.3 页头页头又可称之为页眉,页眉的作用是定义页面的主题；比如一个站点的名 字多数都显示在页眉里；这样,拜访者能很快知道这个站点是什么内容；页头 是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的和谐性；页 头常放置站点名字的图片和公司标志以及旗帜广告；1.1.4 文本文本在页面中显现都数以行或者块 段落 显现,它们的摆放位置打算者整个页面 布局的可视性；在过去由于页面制作技术的局限,文本放置的位置的敏捷性特别小,而

7、随着 页面的任何位置；1.1.5 页脚DHTML 的兴起,文本已经可以依据自己的要求放置到页脚和页头相呼应；页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方；你能看到,很多制作信息都是放置在页脚的；1.1.6 图片图片和文本是网页的两大构成元素,却一不行；如何处理好图片和文本的位置成了整个页面 布局的关键；而你的 布局思维也将表达在这里；1.1.7 多媒体除了文本和图片,仍有声音,动画,视频等等其它媒体；虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页1.2 网页 布局的方法布局 上也将变得更重要；网页 布局 的方法有两种,第一种为纸上 布局；其次种为软件 布局 ；下

8、面分别加以介绍：名师归纳总结 1.2.1纸上 布局 法第 3 页,共 20 页- - - - - - -精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用很多 网页制作 者不宠爱先画出页面 布局 的草图,而是直接在 网页设计 器里边设计 布局 边加内容；这种不打草稿的方法不能让你设计出优秀的网页来；所以在开头制作网页时,要先在纸上画出你页面的 布局草图来；预备一如干张白纸和一只铅笔,你要设计一个时尚站点； * 尺寸选择：目前一般 800X600的辨论率为商定俗成的浏览模式；所以为了照料大多数拜访者,你页面的尺寸以800X600的辨论率为准； * 造型的选择：先在白纸上

9、画出象征浏览器窗口的矩形,这个矩形就是你 布局 的范畴了；选择一个外形作为整个页面的主题造型,我们选择圆形,由于它代表者柔和,和时尚流行比较相称,然后在矩形框架里随便画出来,你可以试者在增加一些 圆形或者其它外形；这样画下来,你会发觉很乱；其实,假如你一开头就想设 计出一个完善的 布局来是比较困难的,而你要在这看似很乱的图形中找出隐匿 在其中的特殊的造型出来；仍要留意一点,你不要担忧你设计的 布局 是否能够实现；事实上,只要你能想到的布局都能靠现今的 HTML 技术实现；考虑到左边向左凹的弧线,为了取得平稳我们在页面右边增加了一个矩形 也可以是一条线段 ；* 增加页头：jpg 是我们从 .jp

10、g 和 2.jpg得到的 布局造型,那么我们该增加页头了；一般页头都是位于页面顶部,所以我们为 .jpg 增加了一个页头,为了和左边的弧 线和右边的矩形取得平稳,我们增加了一个矩形页头并让页头相交与左边的弧 线；* 增加文本：页面的空白部分加别加入文本和图形；由于在页面右边有矩形作为陪衬,所以文本放置在空白部分不会由于左边的弧线而显得不和谐；* 增加图片：图片是美化页面和说明内容必需的媒体；在这里把图片加入到适当的地 方；经过以上的几个步骤,一个时尚页面的大致布局就显现了；当然,它不是最终的结果,而是你以后制作时的重要参考依据；名师归纳总结 - - - - - - -第 4 页,共 20 页精

11、选学习资料 - - - - - - - - - 1.2.2软件 布局 法个人资料整理仅限学习使用假如你不宠爱用纸来画出你的布局 意图,那么你仍可以利用软件来完成这些工作；这个软件就是Photoshop；Photoshop所具有的对图像的编辑功能用到设计网页 布局 上更显得心应手；不像用纸来设计布局 ,利用 Photoshop可以便利的使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的 布局 意念；1.3 网页布局类型网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下 框架型、综合框架型、封面型、Flash 型、变化型,下面分别论述；1.3.1“ 国”字型 也可以称为

12、 “同”字型,是一些大型网站所宠爱的类型；即最上面是网站的 标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些小条内容,中间是主要部分,与左右一起排列究竟,最下面是网站的一些基本信息、联系 方式、版权声明等；这种结构是我们在网上见到最多的一种结构类型；1.3.2 拐角型这种结构与上一种只是形式上的区分,其实是很相近的；网页最上面是标 题及广告横幅,接下来的左侧是一窄列链接等,右侧是很宽的正文,下面也是一些网站的帮助信息；在这种类型中,一种很常见的类型是最上面是标题及广 告,左侧是导航链接；1.3.3 标题正文型这种类型最上面是标题或类似的一些东西,下面是正文,比如一些文章页 面或注册页

13、面等就是这种类型；1.3.4. 左右框架型这是一种为分左右两页的框架结构,一般左面是导航链接,有时最上面会 有一个小的标题或标志,右面是正文；我们见到的大部分的大型论坛都是这种 结构的,有一些企业网站也宠爱采纳；这种类型结构特别清楚,一目了然；1.3.5. 上下框架型与左右框架型类似,区分仅仅在于是一种上下分为两页的框架；1.3.6 综合框架型是左右框架型和上下框架型的结合,相对复杂的一种框架结构,较为常见名师归纳总结 - - - - - - -第 5 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用的是类似于 “拐角型 ”结构的,只是采纳了框架结构

14、；1.3.7 封面型 这种类型基本上是显现在一些网站的首页,大部分为一些精致的平面设计结合一些小的动画,放上几个简洁的链接或者仅是一个“进入 ”的链接甚至直接在首页的图片上做链接而没有任何提示；这种类型大部分显现在企业网站和个 人主页,假如说处理的好,会给人带来赏心悦目的感觉；1.3.8Flash 型其实这与封面型结构是类似的,只是这种类型采纳了目前特别嬉戏行的 Flash ,与封面型不同的是,由于 Flash 强大的功能,页面所表达的信息更丰 富,其视觉成效及听觉成效假如处理得当,绝不差于传统的多媒体；1.3.9 变化型即上面几种类型的结合与变化,比如网站在视觉上是很接近拐角型的,但 所实现

15、的功能的实质是那种上、左、右结构的综合框架型；1.4 网页 布局的技术1.4.1 层叠样式表的应用在新的 HTML4.0标准中, CSS 层叠样式表 被提出来,它能完全精确的定位 文本和图片； CSS 对于初学者来说显得有点复杂,但它的确是一个好的 布局方法；你曾经无法实现的想法利用CSS 都能实现；目前在很多站点上,层叠样式表的运用是一个站点优秀的表达；你可以在网上找到很多关于 CSS 的介绍和使用方法；当然,日趋炙热的 WEB 标准XHTML+CSS）开是剧烈推崇内容和表现相分别,并为下一代数据交换 1.4.2 表格 布局XML 做为过渡 ,你会看到这个页面是如何利用表格的；1.4.3 框

16、架 布局 不知道什么原故,框架结构的页面开头被很多人不宠爱,可能是由于它的兼容性；但从 布局 上考虑,框架结构不失为一个好的布局 方法；它犹如表格 布名师归纳总结 - - - - - - -第 6 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用局一样,把不同对象放置到不同页面加以处理,由于框架可以取消边框,所以 一般来说不影响整体美观；布局 指南并不是全部的网页 布局 技术,从某种意义上来说,引导你在制作网页 的时侯,怎样把图片和文本放置的恰到好处,而且如何拥有一个跳越的设计思 维；1.5 详细的网页布局1.5.1 关于第一屏 所谓第一屏,是指我们

17、到达一个网站在不拖动滚动条时能够看到的部分；那么第一屏有多 “大”呢？其实这是未知的；一般来讲,在800 600 的屏幕显示模式 这也是最常用的 下,在 IE 安装后默认的状态 即工具栏地址栏等没有改 变下, IE 窗口内能看到的部分为 778 435 像素；一般来讲,我们以这个大小 为标准就行了,究竟在无法适合全部人的情形下,我们只能为大多数考虑了；说了那么多,无非是一个标准的问题,接下来不用我说大家也能想到,第一屏 当然要放最主要的内容,关键要知道的是,我们要对第一屏能显示的面积要有 个估量,而不要仅仅以自己的机器为准；其实网页制作的一个很麻烦的地方就 是浏览者的机器是未知的；1.5.2有

18、关导航栏的位置导航栏能让我们在浏览时简洁地到达不同的页面,是网页元素特别重要的 部分,所以导航栏肯定要清楚、醒目；一般来讲,导航栏要在“第一屏 ”能显示 出来,但是有时第一屏可能会小于上面所说的 435 像素,基于这点考虑,那种 横向放置的导航栏要优于纵向的导航栏考虑,缘由很简洁：假如浏览者的第一 屏很短,横向的仍能全部看到,而纵向的就很难说了,由于窗口的宽度一般是 不会受浏览器设置影响的,而纵向的不确定性要大的多；1.5.3 什么样的布局是最好的这是初学者问得最多的问题；其实这要详细情形详细分析的：假如内容非 常多,就要考虑用“国字型 ”或拐角型；假如内容不算太多而一些说明性的东西 比较多,

19、就可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方 便,速度快,但结构变化不敏捷；而假如是一个企业网站想呈现一下企业形象或个人主页想呈现个人风采,封面型是首选；Flash 型更敏捷一些,好的Flash大大丰富了网页,但是它不能表达过多的文字信息；仍没有提到的就是变化型了,我想这个读者应当自己把握了；由于,只有不断的变化才会提高,才会不 断丰富我们的网页；名师归纳总结 - - - - - - -第 7 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用其次章 网页设计的用色技巧2.1 网页设计的颜色摸索人们常常感受到颜色对自己心理的影响,这些影

20、响总是在不知不觉中发挥作用,左右我们的心情；颜色的心理效应发生在不同层次中；有些属直接的刺名师归纳总结 - - - - - - -第 8 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用激,有些要通过间接的联想,更高层次就涉及到人的观念、信仰,对于艺术家 和 设 计 者 来 说 , 无 论 哪 一 层 次 的 作 用 都 是 不 能 忽 视 的 ；对于网页设计者来说,颜色的心理作用特殊重要,由于用网络是在一种特 定的历史与社会条件的环境下,即在高效率、快节奏的现代生活方式的条件 下,这就需要做网页时把握人们在这种生活方式下用网络的一种心理需求；作为网

21、页设计师来说,做到有针对性的用色是相当重要的,由于网站往往是各 种各样的,大公司、政府组织、体育组织、谈天的、新闻的、个人主页等等,不同内容的网页的用色应是有较大的区分；所以要合理的使用颜色来表达出网站的特色,这是高明的做法；例如：做公司的网页,就不能仅仅使用一些不着边际的颜色来吸引人,而 要 让 人 一 看 到 这 个 网 站 的 用 色 就 立 即 明 确 该 公 司 的 主 题 ；怎么能做到这一步呢？我认为要从公司的标准色上入手；一个公司的 CI企业形象识别）是灵魂,做网站往往是为了提升公司的形象；因此把表现 企业主题的标准色应用到网页中去,肯定会给浏览者留下深刻的印象；这就牵 涉到标准

22、色的组合应用上,要有一个颜色的基调问题,抓住自己的主色来配以 不同的辅色这样既突出了主页的公司的特色,又能使页面出现丰富多彩 给人的感觉是寂静、冰冷；而暖色 如红色给人的感觉是热闹、火热；冷暖色的奇妙运用可以让网站产生意想不到的效果；颜色与人的心理感觉和心情也有肯定的关系,利用这一点可以在设计网页时形成自己特殊的颜色成效,给浏览者留下深刻的印象；一般情形下,各种颜色给人的感觉是：1 红色分析：红色色感暖和,性格刚烈内向,是一种对人刺激性很强的颜色；红色简洁引起人的留意,也简洁使人兴奋、兴奋、紧急、冲动；红色在各种媒体中被广泛的运用,除了具有较佳的明视成效外,更被用来传达具有活力、积极、热名师归

23、纳总结 - - - - - - -第 10 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用诚、暖和以及前进等含义的企业形象与精神；另外,红色也常被用作警告、危 险、禁止、防火等标识色；搭配：在网页颜色的应用中,单纯以红色为主色调的网站相对较少,多用作帮助 色、点睛色,以达到陪衬、醒目的成效；红色与少量黄色相搭配,会使其热力强大,趋于躁动、担心,极富动感和张扬的个性；红色与黑色的搭配在商业设计中被誉为商业胜利色,在网页设计中也比较 常见；红黑搭配常被用于较前卫时尚、个性的消遣休闲区网页中；红色与灰色、黑色等暗色调搭配使用,给人以现代、激进的感觉；粉红

24、色是红色系中的冷色系,这类颜色的组合多用于女性主题,如化妆 品、服装等,鲜嫩而布满诱惑,简洁营造出柔情、娇媚、温顺、甜蜜、纯真、诱惑和艳丽等气氛；2 黄色分析：黄色是有彩色中最光明的颜色,因此净化藏给人留下光明、辉煌、辉煌、开心、名贵和柔和的印象,同时又简洁引起味觉上的条件反射,给人以甜蜜和 香酥感；黄色有着金色的光线,有期望与功名等象征意义,仍代表着土地,象 征着权力,并且仍带有神奇的宗教颜色；黄色是光明的且可以给人甜蜜和幸福 感的颜色,在很多设计作品中黄色都被用来表现喜庆的气氛和华丽的商品；搭配：黄色在网页配色中使用最为广泛的颜色之一,黄色与其他颜色协作很活泼,有暖和感,代表欢快、期望、聪

25、明和轻快；黄色比较适合活泼跳动、颜色 绚丽的配色方案；高亮度的黄色与黑色相结合可以得到清楚洁净的成效,这种配色在网页设 计中常常会见到；在配色时,黄色与绿色搭配会显得很有朝气和活力；通常,在商品网站中使用黄色与红色搭配来渲染喧闹气氛；淡黄色几乎能与全部的颜色相搭配,但假如要达到醒目的成效,就不能将 淡黄色放在其他的浅色上,特殊是白色,由于它将是人什么也看不见；深黄色一般不予深红色及深紫色相搭配；3 蓝色 分析：蓝色给人以沉稳的感觉,且具有深远、永恒、沉静、博大、理智、诚恳和 冰冷的意象；同时,蓝色仍能够营造出和平淡雅洁净及牢靠等氛围；在商业设名师归纳总结 - - - - - - -第 11 页

26、,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用计中强调科技、商务的企业形象时,大多项用蓝色当标准色；蓝色是冷色系中 最典型的代表,是网站设计中运用得最多的颜色；蓝色会使人自然联想起大海 和天空,所以会使人产生一种爽朗开阔和凉爽的感觉；搭配：浅蓝色具有淡雅、清爽、浪漫和名贵的特性,常被用于化妆品、女性、服 装网站的设计中,它也是最具凉快、清爽特点的颜色；浅蓝色和绿色、白色的搭配在网页中是比较常见的,他们之间的搭配可以是页面看起来特别洁净清 澈,能表达出柔顺淡雅和浪漫的气氛；蓝色是冷色系中的典型代表,而黄、红色是暖色系中最典型的代表,冷暖 色系对比度大,

27、较为明快,很简洁感染、带动浏览者的心情,具有很强的视觉 冲击力；深蓝色是沉稳的且较常用的色调,能给人以沉稳、冷静、严谨和成熟的心 理感受；它主要用于营造平稳、牢靠及略带有神奇感的氛围,一般用于企业宣 传类网站的设计中；4 绿色 分析：在商业网页设计中,绿色所传递的是清爽、抱负、期望和生长的意象,较 符合服务业、卫生保健业、训练行业、农业类网页设计的要求；绿色通常与环 保意识有关,也常常使人联想到有关健康方面的事物；绿色与人类息息相关,是自然之色,代表了生命与期望,也布满了青春与活力；它朝气蓬勃,象征着 生命；它本身具有特定的与自然、健康相关的感受,所以也常常被用于与自 然、健康相关的站点；此外

28、,绿色仍常常用于一些公司的儿童站点或训练站点；绿色具有黄色和蓝色两种成分,绿色的性格最为平和、平稳,是一种柔 顺、恬适、满意及美丽的颜色；搭配：绿色在黄色和蓝色之间,属于较中庸的颜色,是和平色,偏向自然美,宁 静、朝气蓬勃、宽容,可与多种颜色搭配而达到和谐的成效,也是网页中最为 广泛的颜色之一；绿色与红色、蓝色与黄色两组对比色搭配在一起,虽然听起来似乎颜色很 杂,但是只要和谐搭配,就能起到意想不到的成效；适当运用不同纯度的深绿和浅绿色并不刺目,反而可使页面看起来很有朝 气和活力；5 紫色 分析：紫色具有制造、谜、忠诚、神奇及稀有等内涵；象征着女性化,代表着高名师归纳总结 - - - - - -

29、 -第 12 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用贵和奢华、文雅与魅力,也象征着神奇与庄重、神圣和浪漫；紫色通常被用于 以女性为对象或以艺术品介绍为主的站点,但很多大公司的站点中也宠爱使用 包蕴着神奇、尊贵和高尚的紫色；搭配：紫色加入少量的白色,就会成为一种特别美丽、柔和的颜色；随着白色的 不断加入,也就不断产生不同层次的淡紫色,可使紫色的沉闷性格消逝,变得文雅、娇气,并布满女性魅力；不同色调的紫色可以营造出特别浓郁的女性化气息,而且在灰色这一突出 颜色的衬托下,紫色可以显示出更大的魅力；紫色与紫红色都是特别女性化的颜色,给人的感觉都是浪

30、漫、柔和、华丽 和名贵文雅,特殊是紫红色更是女性化的代表颜色；高彩度的紫红色可以表现 出超凡的华丽,而低彩度的紫红色可以表现出高雅的气质；紫色协作时尚的卡通人物,可以使页面具有特别剧烈的现代感,给人以更 深刻的印象；6 橙色 分析：橙色的波长居于红和黄之间,橙色是特别活泼的光辉颜色,是最暖的色 彩,给人以华贵而暖和、兴奋而热闹的感觉,也是令人兴奋的颜色；橙色具有 健康、活力、英勇和自由等象征意义,能给人以庄重尊贵神奇等感觉；橙色会 使人联想到金色的秋天以及丰硕的果实,因此是一种富足、欢快而幸福的色 彩；橙色适用于对视觉要求较高的时尚网站,也常被用于对味觉要求较高的食 品网站,由于橙色也是简洁引

31、起食欲的颜色；搭配：橙色是可以通过变换色调营造出不同氛围的典型颜色,它既能表现出青春 的活力又能实现稳重的成效,所以橙色在网页设计中的使用范畴是特别广泛 的；使用了高亮度橙色的网页通常都会给人一种明朗和新奇的感觉,而将浅黄 色、黄色、黄绿色等邻近色与橙色搭配使用,通过不同明度和纯度的变化可以 得到更为丰富的色阶通常都能得到特别好的视觉成效,只要在视觉上处理的井 然有序,将会使整个页面看起来华丽、新奇、布满活力；通过将浅绿色、浅蓝色、蓝色等颜色与橙色搭配使用,可以构成最光明、最欢快的颜色；橙蓝对比色比较少见,给人印象深刻,使人很简洁记住它；7 白色 分析：名师归纳总结 - - - - - - -

32、第 13 页,共 20 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用白光是全部颜色光线的集合,白色反射全部的光线,不吸取任何可见光,因此白色被作为纯粹、虚无、轻巧、光明及金属的象征；在商业设计中,白色 具有雪白明快纯真和清洁的意象；白色是网页设计中通用的颜色,它具有简洁 突出彩度的特性,当一个页面设计未使用白色时,往往会感觉空间减弱,简洁 造成猜度不够明确、页面沉闷等反应；搭配：很少有纯白色的网页,通常与其他颜色搭配使用；黑色与白色表现出了两个极端的亮度,这两种颜色搭配使用通常可以表现 出都市化,现代的感觉；由于黑色和白色的搭配给人以特殊的庄重感,所以也 常常

33、被用于庄重的场合；8 黑色 分析：黑色的内涵最为丰富和复杂,黑色具有很强的感染力,能够表现出特有的 名贵显得庄重、庄重和坚决；另外,黑色仍具有恐惧、苦恼、悲伤、消极、沉睡、哀思甚至死亡等意象；黑色用在宗教网站中显出庄重和庄重；搭配：黑色是一种流行色,适合于很多颜色搭配；黑色仍具有名贵、稳重、科技 的意象,是很多科技网站的主色调协作其他帮助色,营造出科技的神奇感；另外在一些音乐网站中也常常用黑色为主色调,营造出炫酷的氛围；9 灰色 分析：灰色居于黑色与白色之间,属于中等明度；灰色是颜色中最被动的颜色,受有彩色影响极大,靠邻近的颜色获得生命；灰色如靠近明艳的暖色,就会显 出冷静的品行；如靠近冷色,

34、就变为温顺的暖灰色；灰色是视觉中最寂静的色 彩,有很强的调和对比的作用 搭配：灰色是中性色,可以与任何颜色搭配,也可以帮忙两种对此剧烈的颜色实 现和谐过度；在很多高科技产品,特殊是金属材料有关的产品,几乎都采纳灰 色来呈现高科技的形象；灰色也是网页设计中较为流行的颜色；2.2.2 颜色搭配的原就颜色搭配既是一项技术性工作,同时它也是一项艺术性很强的工作,因此,设计者在设计网页时除了考虑网站本身的特点外,仍要遵循肯定的艺术规律,从 而设计杰出彩鲜明、性格特殊的网站；1 特色鲜明名师归纳总结 - - - - - - -第 14 页,共 20 页精选学习资料 - - - - - - - - - 个人

35、资料整理 仅限学习使用一个网站的用色必需要有自己特殊的风格,这样才能显得个性鲜明,给浏 览者留下深刻的印象；2 搭协作理网页设计虽然属于平面设计的范畴,但它又与其它平面设计不同,它在遵从艺术规律的同时,仍考虑人的生理特点,颜色搭配肯定要合理,给人一种和 谐、开心的感觉,防止采纳纯度很高的单一颜色,这样简洁造成视觉疲惫；3 讲究艺术性网站设计也是一种艺术活动,因此它必需遵循艺术规律,在考虑到网站本身特点的同时,依据内容打算形式的原就,大胆进行艺术创新,设计出既符合 网站要求,又有肯定艺术特色的网站；2.2.3 颜色搭配要留意的问题 1 使用单色尽管网站设计要防止采纳单一颜色,以免产生单调的感觉,

36、但通过调整色彩的饱和度和透亮度也可以产生变化,使网站防止单调；2 使用邻近色所谓邻近色,就是在色带上相邻近的颜色,例如绿色和蓝色,红色和黄色就互为邻近色；采纳邻近色设计网页可以使网页防止颜色杂乱,易于达到页面 的和谐统一；3 使用对比色对比色可以突出重点,产生了剧烈的视觉成效,通过合理使用对比色能够使网站特色鲜明、重点突出；在设计时一般以一种颜色为主色调,对比色作为 点缀,可以起到画龙点睛的作用；4 黑色的使用黑色是一种特殊的颜色,假如使用恰当,设计合理,往往产生很剧烈的艺术成效,黑色一般用来作背景色,与其它纯度颜色搭配使用；5 背景色的使用背景色一般采纳素淡清雅的颜色,防止采纳花纹复杂的图片

37、和纯度很高的颜色作为背景色,同时背景色要与文字的颜色对比剧烈一些；6 颜色的数量名师归纳总结 一般初学者在设计网页时往往使用多种颜色,使网页变得很“ 花” ,缺乏统第 15 页,共 20 页- - - - - - -精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用一和和谐,表面上看起来很花哨,但缺乏内在的美感；事实上,网站用色并不是越多越好,一般掌握在三种颜色以内,通过调整颜色的各种属性来产生变化；2.3 网页设计中的颜色运用2.3.1 主题色和帮助色的合理运用1 主题色的运用主题色是代表站点形象的最主要的颜色；它可以是一种或一组颜色；不同的主题色定位不同的颜色格调

38、；选择何种颜色作为主题色 情形而定；1明确网站的主题、服务对象及用颜色要表达的目的, 需要视网站的详细要确定一个网页用什么颜色合适 , 你必需要先弄明白该网站的主题和它的服务对象 , 以及你通过颜色期望达到的目的；如 ht t p : / /www. barb i e . co m 网站的服务对象主要是儿童 , 其网页设计不仅采纳卡通和声音等众多形式 , 仍选择了特别明艳活泼的颜色；如餐饮业网站的设计也是很特殊的一类 , 餐饮网站多以橘红、橙黄系颜色为主色调 , 这种色调很简洁让人产生食欲 , 并且食物通常让人感受到的是实实在在的爱护2依据企业形象打算主题色, 所以用些让人暖和的颜色；对于很多

39、企业、机构及团体来说 , 他们的网站形象实际上是自身整体形象的一部分 , 这类站点的主题色一般可用公司的标准色 提升公司形象；如 htt p : / /www.m cdonalds . com, 这符合公司的形象战略 , 可以 网站的颜色就是其公司的标准色红和黄；再如可口可乐公司的网站选用的是大红色 , 由于可口可乐给人的一贯形象就是大红色 , 红色产生的激情也正如其公司推出的产品可乐 ,让人兴奋 , 与消费者产生共鸣；2 帮助色的运用在建设网站、组建页面的过程中 , 常常要使用主题色以外的其他颜色, 用来增加页面的颜色层次或帮忙实现某项功能, 这就需要定义帮助色；帮助色的面积虽小 , 却起着缓冲和强调的作用；帮助色能让页面有愤怒、好玩味 , 使主色调流畅 , 帮助色与主色调搭协作理 , 可使整个页面特色鲜明 , 引人入目；名师归纳总结 - - - - - - -第 16 页,共 20 页精选学习资料 - - - -