第3章网站版式设计与颜色搭配
网页设计中颜色搭配
网页设计中颜色搭配网页设计中颜色搭配一、底色和图形色色彩搭配的问题确实不是一个简单的问题。
这一代的设计师比上一代的设计师，所能运用的色彩工具多了许多。
如今，我们能运用好计算机为我们提供的丰富色彩，看来不是很简单的事情。
就我个人而言，在我从事设计师工作以来，往往也会迷失在色彩的世界。
现在交流一下自己学过的和掌握的一些经验，希望大家指正。
配色所要注意的要素实际设计时，我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案，这个方案就是我的配色计划。
在做配色计划时，我们应该考虑下述几点以突出视觉效果。
1.底色和图形色在设计时我们会经常遇到用几个色做各种形的构成，作为底的色我们往往会将它推远，而作为图形或文字的色我们要将它拉近。
这就需要我们了解受配色关系的影响是什么样的。
一般明亮和鲜艳的色比暗浊的色更容易有图形效果。
因此，配色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。
图形色要和底色有一定的对比度。
这样才可以很明确的传达我们要表现的东西。
我们要突出的图形色必须让它能够吸引观者的主要注意力。
如果不是这样就会喧宾夺主。
二、整体色调如果我们想使我们的设计能够充满生气，稳健，冷清或者温暖，寒冷等感觉都是由整体色调决定的。
那么我们怎么能够控制好整体色调呢？只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。
才可以控制好我们设计的整体色调。
首先要在配色中心决定占大面积的色，并根据这一色来选择不同的配色方案会得到不同的整体色调。
从中选择出我们想要的。
如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉，反之亦然。
如果用暖色和纯度高的色作为整体色调则给人以火热刺激的感觉，以冷色和纯度低的色为主色调则让人感到清冷、平静的感觉。
以明度高的色为主则亮丽，而且变得轻快，以明度低的色为主则显得比较庄重、肃穆。
取对比的色相和明度则活泼，取类似、同一色系则感到稳健。
色相数多则会华丽，少则淡雅、清新。
网站配色方案与网页色彩搭配
1 分析：
紫色具有创造、谜、忠诚、神秘及稀有等内涵。象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。紫色通常被用于以女性为对象或以艺术品介绍为主的站点，但很多大公司的站点中也喜欢使用蕴含着神秘、尊贵和高尚的紫色。
2 搭配：
紫色加入少量的白色，就会成为一种十分优美、柔和的色彩。随着白色的不断加入，也就不断产生不同层次的淡紫色，可使紫色的沉闷性格消失，变得优雅、娇气，并充满女性魅力。
2、 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
3、 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。
1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
深蓝色是沉稳的且较常用的色调，能给人以沉稳、冷静、严谨和成熟的心理感受。它主要用于营造安稳、可靠及略带有神秘感的氛围，一般用于企业宣传类网站的设计中。
四、绿色
1 分析：
在商业网页设计中，绿色所传递的是清爽、理想、希望和生长的意象，较符合服务业、卫生保健业、教育行业、农业类网页设计的要求。绿色通常与环保意识有关，也经常使人联想到有关健康方面的事物。绿色与人类息息相关，是自然之色，代表了生命与希望，也充满了青春与活力。它生机勃勃，象征着生命。它本身具有特定的与自然、健康相关的感受，所以也经常被用于与自然、健康相关的站点。此外，绿色还经常用于一些公司的儿童站点或教育站点。绿色具有黄色和蓝色两种成分，绿色的性格最为平和、安稳，是一种柔顺、恬静、满足及优美的色彩。
一、红色
1 分析：
第3章 网页配色
3.3.6
紫色心理与网页表现
紫色是所有彩色中明亮度最低的。紫色是一种娇柔的、浪漫的色彩。自 然界中很难找到紫色，紫色有一种“人造”的意义。紫色的色彩心 理具有创造、神秘、高贵、典雅、躁动、不安的特征。灰暗的紫色 则是伤痛，疾病的代表，容易造成心理上的忧郁。紫色时而带有胁 迫性，时而又有鼓舞性，在设计时要慎重选用。 1.色彩联想 具体联想：茄子、葡萄、紫菜、紫水晶、薰衣草等。 抽象联想：高贵、优雅、想象、灵感、高尚、神秘、女性化、疯狂、夸 大、消极、忧郁等。 2.色彩搭配 在紫色中红色的成分较多时，会造成压抑感、威胁感。 在紫色中加入少量的白，可使紫色的沉闷性格消失，变得优雅、娇气。 在紫色中介入少量的黑，则趋于沉闷、伤感、恐怖。
3.1.5
网页色彩原理
一个网站的整体色彩效果取决于主色调、前景色与背景色的 关系。网站是倾向于冷色或暖色，还是倾向于明朗鲜艳 或素雅质朴，这些色彩倾向所形成的不同色调给人们不 同的印象，也就有了不同的色彩效果。网站色彩的整体 效果取决于网站的主题需要以及浏览者对色彩的喜好， 并以此为依据来决定色彩的选择和搭配。
3.3.7
绿色心理与网页表现
绿色是具有黄色和蓝色两种成分的颜色。在绿色中，将黄色的扩张 感和蓝色的收缩感相中和，将黄色的温暖感与蓝色的寒冷感相抵 消，这样绿色感觉最平和、安稳。绿色是所有色彩中最能让人的 眼睛放松的颜色，绿色对人的精神有镇定和恢复的功效。 1.色彩联想 具体联想：植物、大自然、西瓜、黄瓜、树叶、草、山等。 抽象联想：自然、和平、安全、新鲜、生产、青春、诚实、康复、 成功、丰产等 2.色彩搭配 在绿色中加入较多的黄色成分时，其色彩性格就趋于活泼、友善。 在绿色中加入少量的白，其色彩性格就趋于洁净、清爽。 在绿色中加入少量的黑，其色彩性格就趋于庄重、成熟、老练。
网站设计中的色彩搭配技巧
网站设计中的色彩搭配技巧在网站设计中，色彩的选择和搭配是至关重要的，它能够直接影响用户的视觉体验和情感感受。
正确地运用色彩搭配技巧可以使网站的设计更加吸引人，提高用户对网站的满意度，下面将介绍一些常用的网站设计中的色彩搭配技巧。
1. 理解色彩的基本原理色彩的基本原理包括色相、明度和饱和度。
色相指的是颜色的名称，如红色、蓝色等；明度指的是颜色的明亮程度；饱和度指的是颜色的纯度。
在网站设计中，应该选择与主题相符合的色相，通过调整明度和饱和度来获得丰富的变化。
2. 使用色彩搭配工具为了帮助设计师选择合适的色彩搭配方案，可以使用一些色彩搭配工具。
例如，Adobe Color可以根据输入的色彩进行搭配，提供多种配色方案供选择。
调色板和配色工具可以帮助设计师更好地理解和使用色彩。
3. 选择主色调和辅助色彩在网站设计中，通常需要选择一个主色调和一些辅助色彩。
主色调是网站设计的核心颜色，可以根据品牌风格、网站定位等因素来确定。
辅助色彩可以用来强调重点内容或创造层次感。
主色调和辅助色彩之间应该保持协调和平衡，避免过多的色彩冲突。
4. 运用色彩心理学色彩心理学指的是通过色彩对人的情绪和意识产生的影响进行研究。
在网站设计中，可以根据色彩心理学的原理，选择合适的色彩表达网站的品牌特点或传达特定的信息。
例如，红色可以引起人的注意，蓝色可以传达冷静和信任的感觉。
5. 使用高对比度色彩在网站设计中，高对比度色彩可以提高页面的可读性和辨识度。
通过在背景和前景之间选择对比鲜明的色彩，可以使文字更加清晰，突出重点信息。
然而，过高的对比度也可能导致视觉疲劳，因此需要适度平衡。
6. 避免过多的色彩和花哨效果在网站设计中，过多的色彩和花哨的效果可能会让用户感到混乱和困扰，降低用户体验。
因此，在设计过程中应该避免使用过多的色彩和繁琐的特效，保持简洁和清晰。
7. 考虑不同设备和平台的色彩显示由于不同设备和平台对色彩的显示存在差异，设计师需要在网站设计中考虑到这些差异。
网页设计中色彩搭配原则及方法
网页设计中色彩搭配原则及方法网页的色彩搭配设计影响着网站的美观度，用户都希望页面美观，功能简便又强大。
下面店铺为大家整理了网页设计中色彩搭配原则及方法，希望能帮到大家！网页设计中色彩搭配原则及方法篇1一、色彩搭配原则在选择网页色彩时，除了考虑网站本身的特点外还要遵循一定的艺术规律，从而设计出精美的网页。
1、色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。
2、色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。
3、色彩的艺术性：网站设计是一种艺术活动，因此必须遵循艺术规律。
按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。
4、色彩搭配的合理性：色彩要根据主题来确定，不同的主题选用不同的色彩。
例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。
二、网页色彩搭配方法网页配色很重要，网页颜色搭配的是否合理会直接影响到访问者的情绪。
好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。
1、同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。
2、邻近色彩搭配：邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。
采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。
3、对比色彩搭配：一般来说，色彩的三原色(红、黄、蓝)最能体现色彩间的差异。
色彩的强烈对比具有视觉诱惑力，能够起到几种实现的作用。
对比色可以突出重点，产生强烈的视觉效果。
通过合理使用对比色，能够使网站特色鲜明、重点突出。
在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。
4、暖色色彩搭配：暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。
网站设计中的色彩搭配技巧
网站设计中的色彩搭配技巧在网站设计中，色彩搭配是至关重要的一环。
合理的色彩搭配不仅可以增加网站的美感，还能有效地引导用户的注意力，提升用户体验。
本文将介绍几种常见的色彩搭配技巧，帮助设计师在网站设计中合理运用色彩，实现视觉效果的良好呈现。
1. 主色调的选择在网站设计中，首先需要确定网站的主色调。
主色调起到引导整个网站风格的作用，可以根据网站的定位和目标受众来选择相应的色调。
例如，对于儿童教育类网站，常常选择明亮、鲜艳的颜色，如红色、黄色、蓝色等，以吸引孩子们的注意力。
而对于商务类网站，则通常采用稳重、大气的颜色，如蓝色、灰色、白色等。
2. 对比色的运用在色彩搭配中，对比色是一个重要的元素。
对比色的使用可以增加页面的层次感，使页面内容更加突出。
常见的对比色有红绿、蓝黄、黑白等组合，可以将不同的元素彼此区分出来，并且吸引用户的注意力。
但需要注意的是，对比色的使用过多或不合理会导致页面混乱，影响用户的阅读体验，因此需要谨慎使用。
3. 色彩的渐变效果色彩的渐变效果可以使网站更加生动、流动，增加用户的体验感。
在网站设计中，可以使用色彩渐变的方式来表达某种情感或创造特定的氛围。
例如，在轮播图上使用渐变颜色，可以让整个页面呈现出柔和、温暖的效果。
此外，在按钮、标题等元素上使用渐变色也能吸引用户的眼球，提升页面的美观度。
4. 色彩的饱和度和明度在色彩搭配中，色彩的饱和度和明度也非常重要。
饱和度指的是色彩的纯度，饱和度高的颜色会给人以强烈的感官冲击；明度则是色彩的明暗程度，明度高的颜色更加鲜明，而明度低的颜色则更加柔和。
合理运用饱和度和明度可以使不同的页面元素产生层次感和对比感，丰富网站的整体效果。
5. 色彩的情感表达每种颜色都会引发人们不同的情感和联想，在网站设计中，设计师可以根据所要表达的情感来选择相应的色彩。
例如，红色往往与热情、活力、激情相关联，蓝色则常常与稳重、冷静、专业相联系。
通过选择合适的色彩来传达网站的主要情感，可以增加用户对网站的共鸣与情感连接。
网页布局设计
网页常见布局类型
3.2 网页布局的类型很多，下面简要介绍一 些常见布局类型。
网站Logo+导航栏+Banner广告
导 航 菜 单 主体内容 + 其
广 告 + 其 他
他
版权信息+联系方式+其他 图3-2 国字型网页布局
3.2.1
国字型
国字型网页布局通常被门户、 购物类等内容丰富的大型网站所 使用。其基本布局形式是将网站 的Logo、导航栏及Banner等置 于顶部；下方安排网页的主体内 容，主题内容的左、右两侧分别 是导航菜单、广告或其他栏目； 最后由页尾形成外框底部，将主 体内容包围，如图3-2所示。
提示
扁平化是目前流行的网页设计趋势之 一，其特点是去掉页面中多余的透视、纹 理、渐变及3D效果等元素，让“信息” 重新作为网页核心被凸显出来。同时，在 设计元素上强调极简化和符号化，让页面 中的内容更容易被聚焦，从而带给用户更 直观的浏览体验，如图3-12所示。
图3-12 扁平化布局
18
网页布局技巧
如果网页使用自适应宽度模式，可直接使用 1 920像素或更大的宽度设计。
5
提示
上述网页宽度尺寸是含页边距 （图3-1所示的细节扩展区域）的 尺寸；设计网页版心时，其宽度应 比上述网页宽度稍小一些，以预留 出页边距。例如，若网页对应的是 1 366×768分辨率的显示器，可将 网页版心宽度设为1 190像素。
网站的宣传版块通常使用图文结合的形式进行宣传，此时，使用图文平铺是最基本的信息排 列方式，它能使页面显得整洁利落，如图3-21（a）所示。如果将图片、文字等信息进行层叠，打 破传统的左右、上下布局，能增加画面的透视与层次关系，使枯燥的图文说明方式更具设计感， 如图3-21（b）所示。
论网页设计的布局及色彩搭配
其 目的 主要 是 利 用 造 型 的原 则 和规 律 ， 理 的 分 配 和排 列 文字 、 合 图形 等 视 觉 元素 ， 以便 准确 、 系统 、 效地 传 达 信 息 。 有
关键 词 ： 页设 计 ： 局 ： 网 布 色彩 ； 配 搭
一
、
网页 设计 的布 局
（ ） 八 导航 栏 的位 置
利于阅读。
（ ） 后 确 定 超链 接 五 最
放 位 置决 定着 整 个 页 面 布 局 的 可 视性 。在 过 去 由于 网页 制 作技 术 的 局 限 ， 本 放 置 的 位 置 灵 活性 非 常小 ， 文 随着 Ｈ ｍ 的兴 起 ， ｔｌ 文 本 已经 可 以放 置 在 页 面 的任 何 位 置 。
分 辨 率 下 ， 面 的 显 示 尺 寸 为 ６ ０ ３ １ 素 ： ８ ０ ６ ０像 素 的 页 ２＊ １ 像 在 ０＊０ 分 辨 率 下 ， 示器 的分 辨 率 越高 ， 显 能显 示 的页 面 尺寸 就 越 大 。
（ ） 体 造 型 二 整
站 。 必须 要 先 弄 明 白该 网站 的 主 题 和它 的服 务 对 象 ， 及你 通 你 以
过 色 彩希 望 达 到 的 目的 。
（ ） 定 网 页 的 主 色调 二 确
根据 网站 的主 题 、 务 对象 及 用 色 目的 。 网 站 的 网 页选 一 服 给 个主色调 ， 以形 成 一定 风 格 。 个 网页 最 好 只有 一 个 主 色 调 。主 整 调 色 彩 一 般可 用 公 司 的标 准 色 ， 这符 合公 司 的形 象 战略 ． 以提 可 升 公 司 形象 。
亭受。
０
（ ） 七 多媒 体
的色 彩相 同 ， 可 以不 同。 也
网站及页面的色彩搭配
色彩的象征意义
15
色彩的象征意义——红色
• 强有力，喜庆的色彩。具有刺激效果，容易使人产生冲动，是 一种雄壮的精神体现，愤怒，热情，活力的感觉。
• 红色容易引起人的注意，易使人兴奋、激动、紧张、冲动，它 还是一种造成人视觉疲劳的颜色。
page16
色彩的象征意义——橙色
• 也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时 尚的效果。
page31
网页色彩搭配的技巧
3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝， 淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人 不同，我是在photoshop里按前景色方框，在跳出的拾色器 窗中选择“自定义”，然后在“色库”中选就可以了。
4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很" 跳"。 在网页配色中，忌讳的是： 1.不要将所有颜色都用到， 尽量控制在三种色彩以内。 2.背景和前文的对比尽量要大， (绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。
• 一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一； 在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集 的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发 现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选 择好切合自己的色彩，推出的站点往往比较成功；当最后设计理 念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就 可以设计出简洁精美的站点。
page30
网页色彩搭配的技巧
1、用一种色彩。这里是指先选定一种色彩，然后调整透明度 或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产 生新的色彩，用于网页。这样的页面看起来色彩统一，有 层次感。
网页设计中的色彩搭配原则
网页设计中的色彩搭配原则在网页设计中，色彩搭配是一项至关重要的任务。
合理的色彩搭配不仅可以提升网页的视觉效果，还能够传达信息、引导用户的注意力，并增强用户对网页的整体体验。
本文将介绍几个常用的色彩搭配原则，帮助网页设计师在设计过程中选择合适的色彩组合。
一、色轮理论1. 基本色彩搭配基本色彩搭配主要是指在色轮上选择相邻或互补的颜色进行搭配。
相邻的颜色搭配可以创造出柔和、和谐的效果，常用于创造温暖、舒适的氛围。
而互补的颜色搭配，则可以产生对比强烈的效果，常用于吸引用户的注意力、突出某个元素。
2. 类比色彩搭配类比色彩搭配是指选择相似的颜色进行搭配。
这种搭配方法可以创造出统一、平衡的效果，常用于表达稳定、可靠的信息。
例如，在设计金融类网页时，选择不同深浅的蓝色进行搭配，可以传递出专业、可信赖的形象。
3. 三角色彩搭配三角色彩搭配是指选择色轮上相隔等距的三种颜色进行搭配。
这种搭配可以产生较强烈的对比感，并且使整个设计更加生动活泼。
常见的三角色彩搭配有红、黄、蓝，或者橙、紫、绿等。
二、色彩情感表达色彩在网页设计中还能够通过情感表达来增强用户的情感体验。
不同的颜色所传递的情感是不同的，正确选择和搭配颜色，可以传达出网页所要表达的情感。
1. 红色：激情、活力、危险、警示2. 橙色：创意、温暖、积极、乐观3. 黄色：明亮、快乐、活泼、轻松4. 绿色：平静、健康、自然、安全5. 蓝色：专业、稳重、冷静、无限6. 紫色：神秘、浪漫、华丽、高贵7. 粉色：甜美、柔和、浪漫、女性化8. 灰色：稳定、成熟、经典、中性9. 黑色：神秘、高贵、权威、庄重10. 白色：纯洁、简约、清新、明亮三、注意对比度在进行色彩搭配时，对比度的选择非常重要。
高对比度的色彩搭配可以突出重点，提高信息传递效果，但过高的对比度可能会造成视觉疲劳。
低对比度的色彩搭配可以表现出柔和、舒适的感觉，但可能会导致信息不清晰，影响用户的阅读体验。
四、考虑色盲用户作为网页设计师，在设计色彩搭配时，还需考虑色盲用户的体验。
网站配色与布局
▪ 面积越大，明度、纯度的感觉越强 ▪ 面积越小，明度、纯度的感觉越低
网页设计中色彩运用的基本原则3-1 整体性
网页设计中色彩运用的基本原则3-2
适用性 根据网站类型选择合适的色彩，使内容与形式相统一
网页设计中色彩运用的基本原则3-3
独特性 网页设计要有独特的个性，大胆突破，出奇制胜
常用的色调4-1
色调 准确地表示一幅作品的画面综合观感效果 包括构图、形象、色彩、明暗等因素造成的综合效果
常用的色调4-2
根据色彩的冷暖感觉分类 暖色调：红、橙、黄等颜色使人想到阳光、烈火 冷色调：绿、青、蓝等颜色称为“冷色” 中性色调：以黑、白、灰三种颜色组成
常用的色调4-3
页面中色彩所占比重分为 主色调 页面色彩的主要色调、总趋势 辅色调 仅次于主色调的视觉面积辅助色 点睛色 在小范围内加上强烈的颜色来突出主题，使页面更加生动 背景色 衬托环抱整体的色调，起协调、支持整体的作用
小结
网页配色原则 鲜明性 网页的色彩要鲜艳，容易引人注目 独特性 要有与众不同的色彩，使得浏览者对网站印象强烈 合适性 色彩和表达的内容气氛相适应 联想性 不同的色彩会产生不同的联想
页面布局概述2-1
组成页面的各种元素 框架：框架指页面中区分不同内容的边距或区块 顶L部og：o在网站顶部放置一个通栏，宣传、展示产品等 Logo：几乎所有的网站都会有自己的Logo 导航栏：显示网站的各种分支页面的分类 内容：网站的正文部分 页脚：在页面底部主要包括：版权、联系方式等 空白区：各元素之间的间距、页面和浏览器边缘的间距
▪ 纯度方面 • 高纯度色使人兴奋，低纯度色有沉静感
色彩的感觉2-2
各种色彩的心理感觉 红色：视觉冲击力强，是热烈冲动的色彩 橙色：具有轻快、热烈、温馨、时尚的效果 黄色：明亮度最高的颜色，灿烂、辉煌 绿色：温和，给人宁静的感觉 青色：基本与绿色相同，只是比绿色显得冷静 蓝色：最凉爽、清新、专业的色彩 紫色：给人神秘、高贵的感觉 白色：洁白、明快、纯真、清洁的感觉 黑色：深沉、神秘、寂静、悲哀、压抑的感觉 灰色：柔和、高雅的感觉
网页设计与制作 项目 2 网页版式设计与色彩搭配
（2）手绘布局
• 在实际设计网页之前，最好要在纸上绘制出页面版 式草图，以供设计时参考。手绘设计网页布局更加 自由，根据客户的要求，按照掌握的设计方法和一 些构图规律来进行设计。这个草图不会给客户看， 尽量绘制得简单、明了。在设计时准备工具。准备 白纸若干，几支铅笔和一块橡皮，以免在设计时由 于缺少工具打断设计思路。
行距：接近字体尺寸的行距设置比较适合正文，行 距常规比例10:12，即用字10点，行距12点。
（2）文字的编排
• 文字的图形化 • 文字的重叠 • 标题与正文 • 文字编排的基本形式
（3）文字的强调
• 行首的强调 • 引文的强调
（4）文字的颜色
2.图像的编排与处理 （1）图像的编排 • 四角和中轴四点结构 • 块状组合与散点组合结构 （2）图像的处理 • 图像的外形 • 图像的面积 • 图像的数量 • 与背景的关系 （3）图像在长页中的应用
项目2 网页版式设计与色彩搭配
任务1 网页版式设计 任务2 了解色彩的基本理论及其视觉效果 任务3 了解网页中的色彩及配色本章重点
本章重点介绍“网站建设流程”中的“具 体设计”阶段中所使用到的相关知识，为读者 实际动手建站打好基础。了解网页的基本元素 根据视觉流程原理，依据构成原理来进行网页 版式设计（网页中放什么？怎么放？）。
2.1.2 网页版是的尺寸和构成要素
1.网页版式的尺寸（px——像素）
（1）当屏幕分辨率为800px*600px时，网页宽 度保持在778px以内，不会出现水平滚动条， 高度则有版面和内容决定
（2）当屏幕分辨率为1024px*768px时，网页 宽度保持在1002px以内，若要保持屏幕显示， 高度应在612——615px，则不会出现水平滚动 条和垂直滚动条
第三章 网站色彩、配色及版式布局
l蓝色
蓝色是对视觉器官的刺激较弱，在光线不足的情况下不易辨认，具有缓和情绪的作用。所以情绪 的波动时，看着蓝天和海洋，可以让人心情平静，它和白色混合，能体现柔顺，淡雅，浪漫的气氛。 蓝色的具体表现是：水、海洋、天空、游泳。
蓝色的抽象表现是：稳重、理智、高科技、清爽、凉快、自由等。
情境1：书法家庄辉个人网站模板效果图的设计与制作
要合理地划分整个页面，安排页面各组成元素，即分割。 通过合理运用矛盾和冲突，使设计更加富有生机和活力，即对比。 当然再次也要考虑是功能优于形态？还是形态优于功能？
情境1：书法家庄辉个人网站模板效果图的设计与制作
2. 项目资讯 关键知识点五：网页布局类型的确定方法
1）把内容放入自己喜欢的网页类型中
某科技有限公司网站 网站动画 网站导航 文档搜索 服务动态 专家指导 技术研讨 关爱社会 服务理念
情境1：书法家庄辉个人网站模板效果图的设计与制作
2. 项目资讯
颜色代表的含义
l 白色 白色的自然日光是由多种有色光组成的，白色是光明的颜色。 白色的具体表现是：光，白天、白云、雪、兔子、棉花、护士、新娘等。 白色的抽象表现是：纯洁、干净、善良、空白、光明、寒冷等。 l灰色 灰色是白色与黑色的组成，对视觉器官刺激微弱。 灰色的具体表现是：金属、水泥、砂石、阴天、乌云、老鼠等。 灰色的抽象表现是：柔和、科技、年老、沉闷、暗淡、空虚、中性、缺乏生命力、中 庸、平凡、温和、谦让、中立和高雅的感觉。 黑色 黑色对视觉器官的刺激最弱。 黑色的具体表现是：夜晚、头发、木炭、墨、煤等。 黑色的抽象表现是：罪恶、污点、黑暗、恐怖、神秘、稳重、科技、高贵、不安全、 深沉，神秘，寂静，悲哀，压抑等。
情境1：书法家庄辉个人网站模板效果图的设计与制作
第三讲：网站版面布局与配色
常见版面布局
1 “T”型结构：
左右结构
“三”字型结构
上下、左右的结合 “同”、“川”字型结构
封面型
辐射结构、“一”字结构：
上下结构
这种结构和左右结构一样，一般应用于 小型网站或栏目页面中，其顶部为Logo、 Banner，以及导航条，下方则为主要内 容。这种网页结构目前被较为广泛地在 栏目页面中采用
相反色相、类似色调
– 这种配色方案是采用相反色相类似色调的配色方案。虽然使
用了相反的色相，但通过使用类似的色调可以得到相对统一 的特殊配色效果。影响这种配色效果最重要的因素在于所使 用的色调。当使用了对比度较高的鲜明色调时，画面将被突 出从而得到较强的动态效果；当使用了对比度较低的暗色调 时，即使使用了多种不同的色相也能够得到安静沉重的效果， 这是因为使用暗色调时，色相的差异也会变得不太明显。一 般来说，这种配色方案的特点是具有静态的变化效果。其中 补色、相反色相的配色具有强调、轻快的效果；而类似色相 配色具有整齐、安静的感觉
相反色相、类似色调
配色实例
相反色相、相反色调
就是指利用相反色相和相反色调的配色方案， 使用这种方法配色的网站较少。由于相反色相 和相反色调的强烈反差，得到的效果具有很强 的动感和叛逆性。和类似色调营造的和谐氛围 相反，相反色调配色方案营造的是一种强弱分 明的感觉。影响其效果的最大制约因素是所选 颜色在整体画面中所占的比例
同一或类似色相、类似色调
这是使用同一（或类似）色相的同时使用类似色 调的配色方案，在所有配色方案中，可以营造出最大 程度的冷静整齐的感觉。但当使用了极为华丽鲜明的 色相时，也可以得到强烈变化的感觉。由于对比较弱， 一般来说采用这种配色方案的网站较少
网站页面设计色彩搭配原则
网站页面设计色彩搭配原则网站页面设计色彩搭配原则网页美工设计色彩忌讳尽管三原色的相互搭配创造出了无数颜色，可不是所有的颜色都适用于网页美工设计，不同的颜色在搭配上也有着其中的学问。
下面是关于网站页面设计色彩搭配原则，欢迎大家阅读参考！一、需要配色的是你的画布，而不是你的图片一个在网页设计中最根本的原则是，无论你花了多少时间创造了一个辉煌的设计，其最终的作用是发挥出内容的核心位置。
你的配色方案永远不应该比它呈现的内容的更加“响亮”。
你的设计应该是在后台，目的是帮助突出网站的内容。
淡色的画布突出了图像，而明亮的画布反而不能突出你的内容。
用Photoshop或者Sketch等软件设计网站的时候，创建设计的过程往往是相互独立的。
有些设计单个看起来很不错，也能被你的客户所接受，但是当它真正被设计成网页的时候不适当的配色往往会分散访客的注意力。
事实上，网页设计的过程是和内容紧密相连的，很多制作高品质的网页看上去空空荡荡，几乎没有内容。
这是一个伟大的想法：你可以在你的网站上先铺陈出你的内容，用设计软件也好用代码也好，然后在你内容的周围设计你的网页。
当然这也是一个特殊情况，如果一个特定风格的图像和照片都能和你的设计和谐的融为一体，那么你的设计配色才算是完美。
试想一下，网站的配色对内容而言就像衣服对于人的重要性，对此你必须制定一套完美的并且合身的衣服。
二、选择简单的灰色作为你网站的基调你可以为你的网站基调选择无数种颜色，不过我建议你采用最简单的颜色，比如白色/浅灰色与深灰色的搭配文字背景。
你可以看看任何热门的网站、模版、主题，白色或浅灰色与深灰色搭配成了大多数的选择，这当然也是有充分理由的。
这样的搭配对访客而言提高了你内容的.可读性，并且把你的图片突出在最前方。
一般来说，你的文字最好避免使用墨黑色，深灰色一般更容易阅读。
我们提供一个比较舒服的文字颜色范围：#333333到#666666。
对于你的背景色，全白色(#FFFFFFF)是可以搭配任何文本的最安全的颜色。
网页设计中色彩搭配.doc
网页设计中色彩搭配摘要：在络信息技术被广泛运用的时代背景下，人们日常工作生活的方式出现了明显的转变。
通过对络信息技术的运用人们的信息搜集不再依赖于传统的书籍报刊，而更多的是利用网页进行搜索，因此合理的网页设计成为了提高网页竞争实力的重要方式.在网页设计中良好的色彩搭配是能有效吸引用户的重要因素,这在很大程度上突出了色彩搭配在网页设计中的重要性.本文将从色彩搭配在网页设计中的重要地位出发对色彩得在网页设计中的原则进行分析，进而在确保色彩与网页协调的基础上提出色彩搭配的方式。
ﻭ关键词：网页设计；色彩搭配;协调性ﻭ经济与科技的飞速使得信息技术开始被人们的广泛使用,近年息技术已然成为人们日常生活中不可或缺的内容,利用网页来获取相关的信息更是成为了一种非常普遍的方式。
从现实层面来看,在中网页之间往往面临着非常激烈的竞争，要想提高网页的竞争实力以及对用户的吸引力,就必须在优化网页内容的同时还能给予其设计充足的重视，而作为网页设计中至关重要的色彩搭配也要求设计师能给予其充足的重视，要求能充分结合网页设计的实际要求在坚持协调统一的基础上合理的进行色彩搭配设计。
ﻭ一、网页设计中色彩搭配的重要地位随着市场经济和科学技术的飞速,络信息技术已然成为人们日常生活中所不可或缺的内容，并给人们的工作生活带来了至关重要的影响。
网页作为信息技术的重要组成部分要想切实提高对用户的吸引力就必须进行合理有效的设计确保做好其色彩搭配，究其原因主要是因为，良好的色彩搭配不仅能促使人们信息浏览的效率得到充分的提升，同时还能有效增加网页对用户的吸引力，因此网页设计是否成功与其色彩搭配之间有着密切的关联。
从现实层面来看，色彩搭配的运用往往能直接影响用户对网页的感受，要想提高用户对网页的满意度就必须要重视进行网页的合理设计.在绝大多数情况人所感受到的视觉冲击都来源于色彩，而色彩在网页设计中也占据着至关重要的地位，通过合理有效色彩搭配能切实有效的提高网页对用户的吸引力，而要想提高网页的美观性以及内涵性同样要求能合理的进行色彩的搭配.基于此，在网页设计中设计师就必须要给予色彩搭配充足的重视，确保从根本上对色彩搭配进行优化来提高网页设计的质量.ﻭ二、网页设计中色彩搭配的基本原则ﻭ在网页设计中色彩搭配的运用及要符合网页设计的基本要求，同时还必须符合用户的视觉审美要求,因此色彩搭配还应遵循如下的原则.ﻭ（一）功能性原则ﻭ所谓功能性原则主要指的是在网页设计中的色彩搭配要充分发挥色彩本身所具备的功能,而这一原则最主要的目的就是强化网页对相关信息的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）原色、间色、复色
原色，又称为基色，即用以调配其他色彩的基本色。 原色的色纯度最高，最纯净、最鲜艳。可以调配出 绝大多数色彩，而其他颜色不能调配出三原色(红、 黄、蓝)。 间色，又叫“二次色”，是由2种原色调配出来的 颜色。红与黄调配出橙色，黄与蓝调配出绿色，红 与蓝调配出紫色。橙、绿、紫三种颜色又叫“三间 色”。在调配时，由于原色在份量多少上有所不同， 所以能产生丰富的间色变化。 复色：除了原色和间色以外的其它色。
4．构成的形式
（1）重复构成形式
重复构成是指用同一形态或同组形态有序地反复出现， 形成某种规律的构图形式。重复构成具有强化记忆的功能， 反复地出现会不断地加强视觉冲击，加深形象认识。
（2）近似构成形式
• 在重复构成中保持原有规律性的基础上，把重复元素的基 本形(大小、方向、色彩等)进行微小变化，就演变成了近似构 成形式。近似构成形式中既有形式变化，又有整体的统一。
比较简单的原色和间色的色环。
（3）色彩的三要素
任何一种彩色具备三个要素：色相、明度和纯度。其中非彩 色只有明度属性。 色相，指的是色彩的相貌、名称。这是色彩最基本的特征， 是一种色彩区别于另一种色彩的最主要的因素。比如说紫色， 绿色，黄色等等都代表了不同的色相。 明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩 越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色， 让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要 用于一些游戏类网站，充满神秘感。不同色彩明度不同（例 如白色比黑色明度高），相同色彩在不同强弱的光线下也有 不同的明度。 纯度，指色彩的纯净度，指含杂色的成份多少。纯度高的色 彩纯，鲜亮；纯度低的色彩暗淡，含灰色比较多。
3.3 网页版式设计
1．水平分割
水平分割强调的是层次感和精确感，并有助于不同 信息的分类，通常上方为导航栏，或者是企业动态 形象（Flash），下方是内容。水平分割应当考虑 到分割面积。水平不均匀分割，如果上半部分放置 标题或导航，则面积较小，上半部分放置主体内容， 则面积应适当加大。
2．垂直分割
3.4 网站布局
(4)页眉：对网站起宣传的作用或用于广告。 富有特色的页眉也是网站的一个重要标志。一般放网站的 口号、广告语等信息。 (5)页脚：名称、地址、版权、联系方式等信息 (6)站内搜索 (7)广告 举例（见下页）
2．网页布局的步骤
（1）制作网页的目的及内容：确定网页中需要放什么内容， 并收集资料 应该明确制作网页的目的，制作网页要完成什么任务，要 达到什么样的要求。在这一阶段，搜集制作网页的有关材 料，这些材料应该是真实、正确、详细的。为了以后制作 网页的方便，应该将这些内容写成书面材料，以免制作时 漏掉某些项目
2．线的构成
线有长度属性，而无粗细的限制。 线起分隔和修饰的作用。 线比点具有更强的心理感受。 不同的线给人不同的感觉。网页中的线的类型有： （1）直线（横直线、竖直线、斜直线） （2）曲线（几何曲线、自由曲线）
网页中直线的应用非常广泛，使用直线可以非常清晰明 了地划分页面的布局结构。
Word布局示意图
企业标志 关于龙媒 解决方案 龙媒视点 客户列表 在线咨询 公司动态 企业形象FLASH
图片
图片
图片
图片
媒体设计 说明文字
网站平台建设 说明文字
网络品牌顾问 说明文字
系统集成 说明文字
页脚
Photoshop布局示意图
CorelDRAW布局示意图
3.5 网站色彩搭配
1．色彩的基本概念 (1)现实生活中的色彩可以分为彩色和非彩色。 其中黑白灰属于非彩色系列。其它的色彩 都属于彩色。
2、视觉流程原理
(1)阅读习惯：人们阅读材料时习惯按照从左到右，从上到下 的顺序进行。浏览者的眼睛首先看到的是页面的左上角， 然后逐渐往下看。所以注意价值最大的上部、左侧、左上 与中上又被称为最佳视域。
最佳视域
(2)视觉心理学研究表明人在看一个平面内的信息时，上半 部分让人轻松，下半部让人稳定，左侧让人自在而右侧 让人压抑。这些心理特点都影响着人类的阅读习惯。
（3）软件布局
பைடு நூலகம்
可以使用Firework的图像编辑功能来设计网页版式布局， 也可以用Word、Photoshop或者是CorelDRAW。Word 进行简单的排版比较便捷；Photoshop所具有的对图像 的编辑功能在设计网页布局的图像设计上较为方便，利用 Photoshop可以方便地使用颜色，使用图形，并且可以 利用层的功能设计出用纸张无法表现的布局意念； CorelDRAW进行简单的排版和颜色配置有着更大的优势。 一般来讲使用Firework或CorelDRAW进行排版的设计师 多一些。
(3)加入一些线段可以引导视觉流程(P35图) 一条垂直线在页面上，会引导视线作上下的视觉流 动；水平线会引导视线向左右的视觉流动；斜线 比垂直线、水平线有更强的视觉诉求力；矩形的 视线流动是向四方发射的；圆形的视线流动是辐 射状的；三角形则随着顶角之方向使视线产生流 动；各种图形从大到小渐变排列时，视线会强烈 地按照排列方向流动。
（2）曲线形面
曲线形面也分为几何曲线形和自由曲线形两种。富于变化 和动感。它所表现出来的流动性和弹性给人以无限想象，使 人感到有种生命活力。它具有同曲线一样的女性特征。
（3）偶然形面
偶然形面是在现实生活中偶然获得的一种视觉形态。在平面 设计领域大部分偶然形面是通过特殊技术手段（如绘图软件 中的滤镜或毛笔绘制）获得的。它表现出来的是一种自然的、 无序的形态，有着丰富的象征意义。
3.2 构成设计在网页中的应用
点、线、面是构成视觉空间的基本元素，是表现视 觉形象的基本设计语言。网页设计实际上就是如何 处理好三者之间的关系，因为任何视觉形象或者版 式构成，归根结底，都可以归纳为点、线、面。 网页设计师应当将平面构成理论作为网页设计视觉 形象表现的指导思想，在具体设计过程中大胆运用 多种视觉元素形态变化和表现手法。它们是创造形 式美的基本要素，使网页具有不同的审美倾向。
（8）肌理构成形式
肌理是物质表面的形态，通常是指物体表面的纹理感觉。它 具有粗糙、细腻、柔软、生硬、干燥、湿润等特性，既有自 然形态的肌理(如水波纹、木纹、树叶纹等)，也有人为形态 的肌理(如布纹、墙纸等)。在网页设计中，大部分情况下可 作为网页的背景出现在页面设计中，使用适当的肌理作为背 景图案，将起到很好的视觉调节作用。
（3）渐变构成形式
渐变是一种常见的视觉效果，也是设计中常常使用的技巧。 渐变是指构图基本形(形状、大小、方向、颜色等)逐渐而有 规律地变化。它能够表现出空间感和时间感。
（4）特异构成形式
在重复、近似、渐变构成中，为了改变规律性的单调感，有 意识地出现不合规律的个别基本形，由此产生强烈的对比效 果，这种构成形式就称之为变异。变异的形式有大小变异、 形状变异、方向变异、肌理变异、色彩变异等。
垂直分割和水平分割有很多相似点，把水平分割的页面旋转 90度，即为垂直分割效果。Nikon体育用品网站就应用了这 种构图，这种构图结构清晰，给人工整、坚定和直爽的感觉， 能够树立独立的企业形象。
水平垂直分割是上面两种分割形式的综合运用，整个页面中 既有水平分割的部分，又有垂直分割的部分，互相交织构成 一种网状结构。荷兰壳牌石油公司的网站主页，页面给人一 种非常稳定的感觉，主要用于大型企业或者门户网站这样的 信息量巨大的网站主页。
第3章网站版式设计与颜色搭配
教学目标： 本章重点介绍“网站建设流程”中的“具体设计”阶段 中所使用到的相关知识，为读者实际动手建站打好基础。了 解网页的基本元素，根据视觉流程原理，依据构成原理来进 行网页版式设计（网页中放什么？怎么放？）。 重点和难点： 1．了解视觉流程原理 2．学习构成原理在网页中的应用 3．认识网页的基本元素 4．学习网页版式设计 5．网站的颜色搭配
3.1 视觉流程原理 3.2 构成设计在网页中的应用 3.3 网页版式设计 3.4 网站布局 3.5网站色彩搭配 3.6版式与色彩的综合案例
3.1 视觉流程原理
1、视觉流程的概念 人类的视觉流程习惯是由人类的眼晶体结构的生 理构造决定的，人眼只能产生一个焦点，不能同 时将视线集中在一处以上，所以人在阅读信息的 时候总有流动的习惯，先看这些再看那些。 视觉流程是人的视线在被观察物上的运动过程。 设计中合理的运用视觉流程对于信息的有效传达 极为重要，但同时又是很容易被网页设计者忽视 的因素。
举例：点具有凝聚视觉注意力的作用，在平面上只有一个点 时，我们的视线就会集中在这个点上。
当有两个等大的点或多个等大的点相距一定的距离时，我 们的视觉焦点就会在这几个点之间往返，在心理上产生了 一种“线”的感觉，引导视觉流程。
点是构成网页的最基本元素，具有装饰和活跃画 面气氛的作用。同时定位画面的视觉流程，使网 页更加统一。
3．水平垂直分割
4．变化分割
变化分割是在水平分割和垂直分割的基础上，添加 斜线和曲线的效果，这样的页面版式结构给人自由、 运动和时尚的感觉。
注意事项
形式要和主题相吻合 网站设计强调整体风格的统一
3.4 网站布局
网页布局的标准 美观、适用 1、网页中的基本元素 (1)网站标志LOGO LOGO的大小：88*31、120*60、120*90 (2)网站导航(一组超链接，帮助访问者快速准确地浏览网站) 原则：简洁，容易操作 位置：顶部或左侧 常用的方式：悬停式 (3)网页的主体内容 注意视觉流程原理、文图结合、动静结合、松紧适当。
（2）手绘布局 在实际设计网页之前，最好要在纸上绘制出页面版式草图， 以供设计时参考。手绘设计网页布局更加自由，根据客户的 要求，按照掌握的设计方法和一些构图规律来进行设计。这 个草图不会给客户看，尽量绘制得简单、明了。在设计时准 备工具。准备白纸若干，几支铅笔和一块橡皮，以免在设计 时由于缺少工具打断设计思路。