《网页设计方案布局和用色技巧.pdf》由会员分享，可在线阅读，更多相关《网页设计方案布局和用色技巧.pdf（20页珍藏版）》请在三一文库上搜索。
1、个人资料整理仅限学习使用 摘要 网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一 副副精彩的网页会呈现在我们面前。那么，网页精彩与否的因素是什么呢？文 字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些还有一个非 常重要的因素网页的布局和色彩的搭配， 颜色是一把开启人们心灵的钥匙。色彩是形成网页界面风格的最重要的组成部 分, 在排除立体图形、动画效果之外 , 色彩的冲击力是最强 的。在网页中要运用好色彩, 就要注意主题色和辅助色的合理运用。 合理运用静态色和动态色好的颜色不只能够向拜访者传达信息，并且能吸引拜 访者的目光。 关键词： 色彩；搭配；注意问题 个人资料整理仅
2、限学习使用 第一章网页设计的布局 1 网页设计布局基础 正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿 意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容 成功接合时，这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住 太过“ 挑剔” 的访问者。 1.1网页布局的基本概念 最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥 洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制 的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览 习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设 计方案，
3、但如果你是初学者，那么最好明白网页布局的基本概念。 1.1.1页面尺寸 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法 突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围 变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x 428 个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个 象素；分辨率在 1024X768的情况下，页面的显示尺寸为：1007x600。从 以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都 可以取消或者增加，那么当你显示全部的工
4、具栏时，和关闭全部工具栏时，页 面的尺寸是不一样的。 在网页设计 过程中，向下拖动页面是惟一给网页增加更多内容(尺寸 的 方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让 访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你 最好能在上面做上页面内部连接，方便访问者浏览。 1.1.2整体造型 什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象， 这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器 和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状 以及它们的组合：矩形，圆形，三角形，菱形等。 个人资料整理仅限学
5、习使用 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规 则，你注意到很多ICP 和政府网页都是以矩形为整体造型；圆形带表着柔和， 团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表 着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三 角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱 形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作 多数 是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。 1.1.3页头 页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名 字多数都显示在页眉里
6、。这样，访问者能很快知道这个站点是什么内容。页头 是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页 头常放置站点名字的图片和公司标志以及旗帜广告。 1.1.4文本 文本在页面中出现都数以行或者块(段落 出现，它们的摆放位置决定者 整个页面 布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的 灵活性非常小，而随着DHTML 的兴起，文本已经可以按照自己的要求放置到 页面的任何位置。 1.1.5页脚 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或 者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。 1.1.6图片 图片和文本是网页的两大构成元
7、素，却一不可。如何处理好图片和文本的 位置成了整个页面 布局的关键。而你的 布局思维也将体现在这里。 1.1.7多媒体 除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经 常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。 1.2网页布局的方法 网页布局的方法有两种，第一种为纸上布局；第二种为软件 布局。下面分 别加以介绍： 1.2.1纸上布局法 个人资料整理仅限学习使用 许多网页制作 者不喜欢先画出页面 布局的草图，而是直接在 网页设计 器里 边设计 布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所 以在开始制作网页时，要先在纸上画出你页面的布局
8、草图来。 准备一若干张白纸和一只铅笔，你要设计一个时尚站点。 * 尺寸选择： 目前一般 800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多 数访问者，你页面的尺寸以800X600的分辨率为准。 * 造型的选择： 先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。 选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和， 和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些 圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设 计出一个完美的 布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏 在其中的特别的造型出来。还要注
9、意一点，你不要担心你设计的布局是否能够 实现。事实上，只要你能想到的布局都能靠现今的 HTML 技术实现。 考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形 (也可以是一条线段 。 * 增加页头： jpg 是我们从 .jpg 和 2.jpg得到的 布局造型，那么我们该增加页头了。一 般页头都是位于页面顶部，所以我们为.jpg 增加了一个页头，为了和左边的弧 线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧 线。 * 增加文本： 页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬， 所以文本放置在空白部分不会因为左边的弧线而显得不协调。 * 增加图
10、片： 图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地 方。 经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是 最后的结果，而是你以后制作时的重要参考依据。 个人资料整理仅限学习使用 1.2.2软件布局法 如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这 些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能 用到设计网页 布局上更显得心应手。不像用纸来设计布局，利用 Photoshop 可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实 现的布局意念。 1.3 网页布局类型 网页布局大致可分为“ 国”
11、 字型、拐角型、标题正文型、左右框架型、上下 框架型、综合框架型、封面型、Flash 型、变化型，下面分别论述。 1.3.1“ 国” 字型 也可以称为 “ 同” 字型，是一些大型网站所喜欢的类型。即最上面是网站的 标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容， 中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系 方式、版权声明等。这种结构是我们在网上见到最多的一种结构类型。 1.3.2 拐角型 这种结构与上一种只是形式上的区别，其实是很相近的。网页最上面是标 题及广告横幅，接下来的左侧是一窄列链接等，右侧是很宽的正文，下面也是 一些网站的辅助信息。在这种
12、类型中，一种很常见的类型是最上面是标题及广 告，左侧是导航链接。 1.3.3 标题正文型 这种类型最上面是标题或类似的一些东西，下面是正文，比如一些文章页 面或注册页面等就是这种类型。 1.3.4. 左右框架型 这是一种为分左右两页的框架结构，一般左面是导航链接，有时最上面会 有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种 结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 1.3.5. 上下框架型 与左右框架型类似，区别仅仅在于是一种上下分为两页的框架。 1.3.6 综合框架型 是左右框架型和上下框架型的结合，相对复杂的一种框架结构，较为常见 个人资料整
13、理仅限学习使用 的是类似于 “ 拐角型 ” 结构的，只是采用了框架结构。 1.3.7 封面型 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计 结合一些小的动画，放上几个简单的链接或者仅是一个“ 进入 ” 的链接甚至直接 在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个 人主页，如果说处理的好，会给人带来赏心悦目的感觉。 1.3.8Flash 型 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的 Flash ，与封面型不同的是，由于Flash 强大的功能，页面所表达的信息更丰 富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。 1.3
14、.9 变化型 即上面几种类型的结合与变化，比如网站在视觉上是很接近拐角型的，但 所实现的功能的实质是那种上、左、右结构的综合框架型。 1.4网页布局的技术 1.4.1层叠样式表的应用 在新的 HTML4.0标准中， CSS( 层叠样式表 被提出来，它能完全精确的 定位文本和图片。 CSS 对于初学者来说显得有点复杂，但它的确是一个好的布 局方法。你曾经无法实现的想法利用CSS 都能实现。目前在许多站点上，层叠 样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS 的介绍 和使用方法。当然，日趋炙热的 WEB 标准 ，你会看到这个页面是如何利用表格的。 1.4.3框架布局 不知道什么
15、原故，框架结构的页面开始被许多人不喜欢，可能是因为它的 兼容性。但从 布局上考虑，框架结构不失为一个好的布局方法。它如同表格 布 个人资料整理仅限学习使用 局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以 一般来说不影响整体美观。 布局指南并不是全部的网页 布局技术，从某种意义上来说，引导你在制作网页 的时侯，怎样把图片和文本放置的恰到好处，而且如何拥有一个跳越的设计思 维。 1.5具体的网页布局 1.5.1 关于第一屏 所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。 那么第一屏有多 “ 大” 呢？其实这是未知的。一般来讲，在800600 的屏幕显示 模式
16、(这也是最常用的 下，在 IE 安装后默认的状态 (即工具栏地址栏等没有改 变下，IE 窗口内能看到的部分为778435 像素。一般来讲，我们以这个大小 为标准就行了，毕竟在无法适合所有人的情况下，我们只能为大多数考虑了。 说了那么多，无非是一个标准的问题，接下来不用我说大家也能想到，第一屏 当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有 个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就 是浏览者的机器是未知的。 1.5.2有关导航栏的位置 导航栏能让我们在浏览时容易地到达不同的页面，是网页元素非常重要的 部分，所以导航栏一定要清晰、醒目。一般来讲，导
17、航栏要在“ 第一屏 ” 能显示 出来，但是有时第一屏可能会小于上面所说的435 像素，基于这点考虑，那种 横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一 屏很短，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是 不会受浏览器设置影响的，而纵向的不确定性要大的多。 1.5.3 什么样的布局是最好的 这是初学者问得最多的问题。其实这要具体情况具体分析的：如果内容非 常多，就要考虑用“ 国字型 ” 或拐角型；如果内容不算太多而一些说明性的东西 比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方 便，速度快，但结构变化不灵活；而如果是一个企业网站想展
18、示一下企业形象 或个人主页想展示个人风采，封面型是首选；Flash 型更灵活一些，好的Flash 大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型 了，我想这个读者应该自己把握了。因为，只有不断的变化才会提高，才会不 断丰富我们的网页。 个人资料整理仅限学习使用 第二章网页设计的用色技巧 2.1 网页设计的色彩思考 人们常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥 作用，左右我们的情绪。色彩的心理效应发生在不同层次中。有些属直接的刺 个人资料整理仅限学习使用 激，有些要通过间接的联想，更高层次则涉及到人的观念、信仰，对于艺术家 和 设 计 者 来 说 ， 无
19、 论 哪 一 层 次 的 作 用 都 是 不 能 忽 视 的 。 对于网页设计者来说，色彩的心理作用尤其重要，因为用网络是在一种特 定的历史与社会条件的环境下，即在高效率、快节奏的现代生活方式的条件 下，这就需要做网页时把握人们在这种生活方式下用网络的一种心理需求。 作为网页设计师来说，做到有针对性的用色是相当重要的，因为网站往往是各 种各样的，大公司、政府组织、体育组织、聊天的、新闻的、个人主页等等， 不同内容的网页的用色应是有较大的区别。所以要合理的使用色彩来体现出网 站的特色，这是高明的做法。 例如：做公司的网页，就不能仅仅使用一些不着边际的颜色来吸引人，而 要 让 人 一 看 到 这
20、个 网 站 的 用 色 就 立 即 明 确 该 公 司 的 主 题 。 怎么能做到这一步呢？我认为要从公司的标准色上入手。一个公司的 CI给人的感觉是安静、冰冷；而暖色( 如红 色给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效 果。 色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形 成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给 人的感觉是： 1 红色 分析： 红色色感温暖，性格刚烈内向，是一种对人刺激性很强的颜色。红色容易 引起人的注意，也容易使人兴奋、激动、紧张、冲动。红色在各种媒体中被广 泛的运用，除了具有较佳的明视效果外，更
21、被用来传达具有活力、积极、热 个人资料整理仅限学习使用 诚、温暖以及前进等含义的企业形象与精神。另外，红色也常被用作警告、危 险、禁止、防火等标识色。 搭配： 在网页颜色的应用中，单纯以红色为主色调的网站相对较少，多用作辅助 色、点睛色，以达到陪衬、醒目的效果。 红色与少量黄色相搭配，会使其热力强盛，趋于躁动、不安，极富动感和 张扬的个性。 红色与黑色的搭配在商业设计中被誉为商业成功色，在网页设计中也比较 常见。红黑搭配常被用于较前卫时尚、个性的娱乐休闲区网页中。 红色与灰色、黑色等暗色调搭配使用，给人以现代、激进的感觉。 粉红色是红色系中的冷色系，这类颜色的组合多用于女性主题，如化妆 品、服
22、装等，鲜嫩而充满诱惑，容易营造出柔情、娇媚、温柔、甜蜜、纯真、 诱惑和艳丽等气氛。 2 黄色 分析： 黄色是有彩色中最明亮的色彩，因此净化藏给人留下明亮、辉煌、灿烂、 愉快、高贵和柔和的印象，同时又容易引起味觉上的条件反射，给人以甜美和 香酥感。黄色有着金色的光芒，有希望与功名等象征意义，还代表着土地，象 征着权力，并且还带有神秘的宗教色彩。黄色是明亮的且可以给人甜蜜和幸福 感的颜色，在很多设计作品中黄色都被用来表现喜庆的气氛和华丽的商品。 搭配： 黄色在网页配色中使用最为广泛的颜色之一，黄色与其他颜色配合很活 泼，有温暖感，代表快乐、希望、智慧和轻快。黄色比较适合活泼跳跃、色彩 绚丽的配色方
23、案。 高亮度的黄色与黑色相结合可以得到清晰整洁的效果，这种配色在网页设 计中经常会见到。 在配色时，黄色与绿色搭配会显得很有朝气和活力。 通常，在商品网站中使用黄色与红色搭配来渲染热闹气氛。 淡黄色几乎能与所有的颜色相搭配，但如果要达到醒目的效果，则不能将 淡黄色放在其他的浅色上，尤其是白色，因为它将是人什么也看不见。深黄色 一般不予深红色及深紫色相搭配。 3 蓝色 分析： 蓝色给人以沉稳的感觉，且具有深远、永恒、沉静、博大、理智、诚实和 寒冷的意象。同时，蓝色还能够营造出和平淡雅洁净及可靠等氛围。在商业设 个人资料整理仅限学习使用 计中强调科技、商务的企业形象时，大多选用蓝色当标准色。蓝色是
24、冷色系中 最典型的代表，是网站设计中运用得最多的颜色。蓝色会使人自然联想起大海 和天空，所以会使人产生一种爽朗开阔和清凉的感觉。 搭配： 浅蓝色具有淡雅、清新、浪漫和高贵的特性，常被用于化妆品、女性、服 装网站的设计中，它也是最具凉爽、清新特征的色彩。浅蓝色和绿色、白色的 搭配在网页中是比较常见的，他们之间的搭配可以是页面看起来非常干净清 澈，能体现出柔顺淡雅和浪漫的气氛。 蓝色是冷色系中的典型代表，而黄、红色是暖色系中最典型的代表，冷暖 色系对比度大，较为明快，很容易感染、带动浏览者的情绪，具有很强的视觉 冲击力。 深蓝色是沉稳的且较常用的色调，能给人以沉稳、冷静、严谨和成熟的心 理感受。它
25、主要用于营造安稳、可靠及略带有神秘感的氛围，一般用于企业宣 传类网站的设计中。 4 绿色 分析： 在商业网页设计中，绿色所传递的是清爽、理想、希望和生长的意象，较 符合服务业、卫生保健业、教育行业、农业类网页设计的要求。绿色通常与环 保意识有关，也经常使人联想到有关健康方面的事物。绿色与人类息息相关， 是自然之色，代表了生命与希望，也充满了青春与活力。它生机勃勃，象征着 生命。它本身具有特定的与自然、健康相关的感受，所以也经常被用于与自 然、健康相关的站点。此外，绿色还经常用于一些公司的儿童站点或教育站 点。绿色具有黄色和蓝色两种成分，绿色的性格最为平和、安稳，是一种柔 顺、恬静、满足及优美的
26、色彩。 搭配： 绿色在黄色和蓝色之间，属于较中庸的颜色，是和平色，偏向自然美，宁 静、生机勃勃、宽容，可与多种颜色搭配而达到和谐的效果，也是网页中最为 广泛的颜色之一。 绿色与红色、蓝色与黄色两组对比色搭配在一起，虽然听起来好像颜色很 杂，但是只要协调搭配，就能起到意想不到的效果。 适当运用不同纯度的深绿和浅绿色并不刺目，反而可使页面看起来很有朝 气和活力。 5 紫色 分析： 紫色具有创造、谜、忠诚、神秘及稀有等内涵。象征着女性化，代表着高 个人资料整理仅限学习使用 贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。紫色通常被用于 以女性为对象或以艺术品介绍为主的站点，但很多大公司的站点中
27、也喜欢使用 蕴含着神秘、尊贵和高尚的紫色。 搭配： 紫色加入少量的白色，就会成为一种十分优美、柔和的色彩。随着白色的 不断加入，也就不断产生不同层次的淡紫色，可使紫色的沉闷性格消失，变得 优雅、娇气，并充满女性魅力。 不同色调的紫色可以营造出非常浓郁的女性化气息，而且在灰色这一突出 颜色的衬托下，紫色可以显示出更大的魅力。 紫色与紫红色都是非常女性化的颜色，给人的感觉都是浪漫、柔和、华丽 和高贵优雅，特别是紫红色更是女性化的代表颜色。高彩度的紫红色可以表现 出超凡的华丽，而低彩度的紫红色可以表现出高雅的气质。 紫色配合时尚的卡通人物，可以使页面具有非常强烈的现代感，给人以更 深刻的印象。 6
28、橙色 分析： 橙色的波长居于红和黄之间，橙色是十分活泼的光辉色彩，是最暖的色 彩，给人以华贵而温暖、兴奋而热烈的感觉，也是令人振奋的颜色。橙色具有 健康、活力、勇敢和自由等象征意义，能给人以庄严尊贵神秘等感觉。橙色会 使人联想到金色的秋天以及丰硕的果实，因此是一种富足、快乐而幸福的色 彩。橙色适用于对视觉要求较高的时尚网站，也常被用于对味觉要求较高的食 品网站，因为橙色也是容易引起食欲的颜色。 搭配： 橙色是可以通过变换色调营造出不同氛围的典型颜色，它既能表现出青春 的活力又能实现稳重的效果，所以橙色在网页设计中的使用范围是非常广泛 的。 使用了高亮度橙色的网页通常都会给人一种明朗和新鲜的感觉
29、，而将浅黄 色、黄色、黄绿色等邻近色与橙色搭配使用，通过不同明度和纯度的变化可以 得到更为丰富的色阶通常都能得到非常好的视觉效果，只要在视觉上处理的井 然有序，将会使整个页面看起来华丽、新鲜、充满活力。 通过将浅绿色、浅蓝色、蓝色等颜色与橙色搭配使用，可以构成最明亮、 最欢乐的色彩。 橙蓝对比色比较少见，给人印象深刻，使人很容易记住它。 7 白色 分析： 个人资料整理仅限学习使用 白光是所有颜色光线的集合，白色反射所有的光线，不吸收任何可见光， 因此白色被作为纯粹、虚无、轻盈、光明及金属的象征。在商业设计中，白色 具有洁白明快纯真和清洁的意象。白色是网页设计中通用的颜色，它具有容易 突出彩度的
30、特性，当一个页面设计未使用白色时，往往会感觉空间减弱，容易 造成猜度不够明确、页面沉闷等反应。 搭配： 很少有纯白色的网页，通常与其他色彩搭配使用。 黑色与白色表现出了两个极端的亮度，这两种颜色搭配使用通常可以表现 出都市化，现代的感觉。因为黑色和白色的搭配给人以特殊的严肃感，所以也 经常被用于庄重的场合。 8 黑色 分析： 黑色的内涵最为丰富和复杂，黑色具有很强的感染力，能够表现出特有的 高贵显得严肃、庄严和坚毅。另外，黑色还具有恐怖、烦恼、忧伤、消极、沉 睡、悲痛甚至死亡等意象。黑色用在宗教网站中显出严肃和庄严。 搭配： 黑色是一种流行色，适合于许多色彩搭配。黑色还具有高贵、稳重、科技 的
31、意象，是许多科技网站的主色调配合其他辅助色，营造出科技的神秘感。 另外在一些音乐网站中也常常用黑色为主色调，营造出炫酷的氛围。 9 灰色 分析： 灰色居于黑色与白色之间，属于中等明度。灰色是色彩中最被动的色彩， 受有彩色影响极大，靠邻近的色彩获得生命。灰色若靠近鲜艳的暖色，就会显 出冷静的品格。若靠近冷色，则变为温和的暖灰色。灰色是视觉中最安静的色 彩，有很强的调和对比的作用 搭配： 灰色是中性色，可以与任何色彩搭配，也可以帮助两种对此强烈的色彩实 现和谐过度。在许多高科技产品，尤其是金属材料有关的产品，几乎都采用灰 色来展现高科技的形象。灰色也是网页设计中较为流行的颜色。 2.2.2 色彩搭
32、配的原则 色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设 计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从 而设计出色彩鲜明、性格独特的网站。 1 特色鲜明 个人资料整理仅限学习使用 一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏 览者留下深刻的印象。 2 搭配合理 网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵 从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和 谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。 3 讲究艺术性 网站设计也是一种艺术活动，因此它必须遵循艺术规律，在
33、考虑到网站本 身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合 网站要求，又有一定艺术特色的网站。 2.2.3 色彩搭配要注意的问题 1 使用单色 尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色 彩的饱和度和透明度也可以产生变化，使网站避免单调。 2 使用邻近色 所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色 就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面 的和谐统一。 3 使用对比色 对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够 使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作
34、为 点缀，可以起到画龙点睛的作用。 4 黑色的使用 黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺 术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。 5 背景色的使用 背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的 色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。 6 色彩的数量 一般初学者在设计网页时往往使用多种颜色，使网页变得很“ 花” ，缺乏统 个人资料整理仅限学习使用 一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不 是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变 化。 2.3 网页设计中的色彩运用
35、 2.3.1 主题色和辅助色的合理运用 1 主题色的运用 主题色是代表站点形象的最主要的色彩。它可以是一种或一组色彩。不同 的主题色定位不同的色彩格调。选择何种颜色作为主题色, 需要视网站的具体 情况而定。 (1明确网站的主题、服务对象及用色彩要表达的目的 要确定一个网页用什么色彩合适, 你必须要先弄明白该网站的主题和它的 服务对象 , 以及你通过色彩希望达到的目的。如 ht t p : / /www. barb i e . co m 网站的服务对象主要是儿童, 其网页设计不仅采用卡通和声音等众多形式, 还选择了非常鲜艳活泼的色彩。如餐饮业网站的设计也是很特殊的一类, 餐饮网 站多以橘红、橙黄
36、系色彩为主色调, 这种色调很容易让人产生食欲, 并且食物 通常让人感受到的是实实在在的体贴, 所以用些让人温暖的颜色。 (2根据企业形象决定主题色 对于很多企业、机构及团体来说 , 他们的网站形象实际上是自身整体形象的 一部分 , 这类站点的主题色一般可用公司的标准色, 这符合公司的形象战略 , 可以 提升公司形象。如 htt p : / /www.m cdonalds . com网站的色彩就是其公司 的标准色红和黄。再如可口可乐公司的网站选用的是大红色, 因为可口可乐给 人的一贯形象就是大红色, 红色产生的激情也正如其公司推出的产品可乐, 让人兴奋 , 与消费者产生共鸣。 2 辅助色的运用
37、在建设网站、组建页面的过程中 , 经常要使用主题色以外的其他色彩, 用 来增加页面的色彩层次或帮助实现某项功能, 这就需要定义辅助色。辅助色的 面积虽小 , 却起着缓冲和强调的作用。辅助色能让页面有生气、有趣味 , 使主 色调流畅 , 辅助色与主色调搭配合理 , 可使整个页面特色鲜明 , 引人入目。 个人资料整理仅限学习使用 (1辅助色的取用要与主题色和谐 辅助色的取用应当建立在与主题色有内在规律的关联上, 既要保持相互之间 和谐, 又要辅助主题色的统帅地位。辅助色与主题色共同构成站点的标准色彩, 其基调则决定网页的整体色彩风格。 (2根据主题色选择辅助色彩 主调色确定后 , 可选一至两种辅助
38、色配合使用, 整个网页的色彩最好控制在 三色之内。网页的辅助色可用主调色的邻近色, 也可用对比色。如 htt p : / /www. a llreci pes . com是一个烹饪网站 , 网站的主色调采用黄色调, 辅助 色用其邻近的红色 , 给人香甜的感觉 , 符合烹饪网站的特色。 2.3.2 静态色和动态色的合理运用 在一个完整展现的 w eb页面内 , 大多包含静态和动态两类元素。以其呈现 方式是否包含变化为依据, 可以将网页中的色彩分为动态色和静态色两类。动 态色彩又可分为以时间为条件变化的色彩和以交互因素为条件变化的色彩共两 类。 1 动态色的运用 (1以时间为条件变化的动态色闪烁
39、排除动画因素外 , 网页中以时间为条件变化的色彩主要指闪烁。闪烁是一种 色彩的动态效果 , 能够有效引起注意与烘托气氛。闪烁分为单色闪烁和颜色闪 烁, 前者指单一色彩的亮度变化。后者指不同颜色形成的动态变化。闪烁主要 用来吸引注意 , 低频率、小色彩范围的闪烁也被用来活跃画面。 决定闪烁效果的因素首先是闪烁的频率。越快速的闪烁吸引视线的能力越强, 急促和不安的感觉也相应增强, 缓慢的闪烁则具有柔美和抒情的意味。其次是 闪烁色彩变化的幅度。闪烁色彩明度越大越引人注目, 在页面中的跳跃度也高 , 明度变化越小的闪烁相对含蓄柔和。在颜色闪烁中, 两极色彩在色环上的夹角 越大, 闪烁越引人注目。临近色
40、的闪烁优美、内敛 , 原色和补色闪烁则最为强 烈。闪烁的色彩为红、黄系的暖色时 , 其热门、突出的感觉强 , 为冷色时则可 能有神秘感。在网页中使用闪烁效果时, 需注意闪烁频率、色彩的明度和 色相变化范围与整个页面内容、风格的协调性。闪烁无论出现在何种位置 都会不断吸引视线 , 因而在使用时要格外注意闪烁范围与周围其它元素的平衡 关系。 个人资料整理仅限学习使用 (2包含交互因素的动态色 网页中包含交互因素的动态色常见于按钮、热区、超文本等具有交互功 能的屏幕对话构件中 , 常用的色彩变化包括亮度、反色和特殊颜色。例如当光 标移至感应区域时 , 按钮或文本变为较之前明亮、高饱和度的色彩或对比色
41、以 吸引注意。对于已点击过的内容, 则以区别于未点击色彩 , 但亮度、饱和度较 低的颜色显示 , 既可有所区别 , 又不至于造成过度的视觉干扰。 2 静态色的运用 静态色主要指静止不动的颜色, 静态色又以静态文本的颜色为主。静态文 本是功能相对单纯的阅读型文本, 在网页中常以大段文字的形式出现。对于感 兴趣的文字内容 , 浏览者需要集中注意力和花费时间, 因此这类文本与背景的 颜色搭配应以易于提取信息、利于减小视觉疲劳为原则。 若眼睛同时聚焦于两种对比明显的鲜艳彩色上, 眼睛周围的肌肉会特别紧 张。一些鲜艳补色、准补色的组合方式是不利于用户阅读的, 例如紫色为背景 的黄色显示 , 绿色为背景的
42、紫红色显示, 以及纯红与纯蓝色的组合。 相对于注视无彩色 , 人们持续注视鲜艳的彩色更容易疲劳和厌烦。一般而言, 底色与文字色的色彩跳跃度越低, 即越接近无彩色 , 越有利于长时间阅读。越高 明度差的色彩搭配, 越具有高认识度, 用户也就越易于从中获取信息。低纯 度、 高明度对比的文本与背景搭配, 是适用于静态文本的显示色彩。在无彩色 的搭配中 , 白底黑字的显示方式可读性更强。 第三章总结 随着互联网发展步伐的进一步加快, 在互联网这个大家庭中新网站会像雨后 个人资料整理仅限学习使用 春笋般层出不穷 , 行业竞争也会越来越激烈。无论网站还是浏览者对网页设计 的要求都会越来越高, 网页不仅被当
43、作信息的载体, 还被认为是艺术品 , 要求 实用性与美观性于一体。所以作为一个网页设计者, 一定要深深懂得网页色彩 的重要性 , 充分利用色彩 , 创作出既规范合理又赏心悦目的美的网页。 参考文献 : 个人资料整理仅限学习使用 1 郭洁恩 . 网页色彩表现研究 D. 西安美术学院 , 2007 . 3 ,P28- P30 . 2 王庆斌 , 张福昌 . 现代网页色彩设计 J. 无锡轻工大学学报 , 2001 . 6 , 2( 2: P26 . 3 张秀杰 . 个性化网页设计技巧 J. 黑龙江畜牧兽医职业学院学报, 2006 . 12 , P59- P60 . 4 董海斌 , 王家民. 网页界面中的色彩设计 J. 艺术理论 ,2007 . 11 , P78- P79 . 5 李立伟 . 浅谈网页色彩设计 J. 郑州轻工业学院学报,2007 . 2 , P76 . 参考文献 范小春 . 周小瓯 . 色彩理论 .J.色彩构成教程 .2004(9.