2.5 网站UI设计配色方法
不同色彩的网页给人的感觉会有不同，可见网页的配色对于整个网站的重要性。一般在选择网页色彩时，会选择与网页类型相符的颜色，而且尽量少用几种颜色，调和这些颜色，使其具有稳定感。
2.5.1 主色
色彩作为视觉信息，无时无刻不在影响着人类的生活。美妙的自然色彩，刺激和感染着人们的视觉和心理情感，给人们提供丰富的视觉空间。
主色是指在网页中最主要的颜色，包括大面积的背景色、装饰图形颜色等构成视觉中心的颜色。主色是网页配色的中心色，通常以此为基础搭配其他颜色。如图2-66所示为使用明度较高的紫红色作为网页主色。
图2-66
? 知识补充
网页主色主要是指网页中整体栏目或中心图像所形成的中等面积的色块。它在网页空间中具有重要的地位，通常形成网页中的视觉中心。
网页主色的选择通常有两种方式：要产生鲜明、生动的效果，则选择与背景色或者辅色呈对比的色彩；要整体协调、稳重，则应该选择与背景色、辅色相近的同色相的颜色或邻近色。如图2-67所示为采用主色与背景色的对比配色。
图2-67
2.5.2 背景色
背景色是指网页中大块面积的颜色，即使是同一组网页，如果背景色不同，带给人的感觉也截然不同。背景色由于占绝对的面积优势，支配着整个空间的效果，是网页配色首先关注的重点地方。
目前网页背景常使用的颜色主要包括白色、纯色、渐变颜色等。网页背景色也被称为网页的“支配色”，网页背景色是决定网页整体配色印象的重要因素。如图2-68所示为使用渐变绿色作为背景色的网页。
图2-68
在人们的脑海中，有时看到色彩就会想到相应的事物。当看到一个画面，人们第一眼看到的就是色彩。例如：绿色带给人一种很清爽的感觉，象征着健康，因此人们不需要看主题字，就会知道这个画面在传达着什么信息，简单易懂。
网页的背景色对网页整体空间影响比较大，因为网页背景在网页中占据的面积最大。如图2-69所示为使用柔和的蓝色作为背景色的网页。
图2-69
如果使用鲜艳的颜色作为网页的背景色，可以使网页给人活跃、热烈的印象，而使用柔和的色调作为网页的背景色，可以形成易于协调的背景。
2.5.3 辅色
一个网站页面通常都不止一种颜色。除了处于视觉中心的主色，还有一类陪衬主色或与主色相呼应而产生的辅色。辅色的视觉重要性和体积次于主色和背景色，常常用于陪衬主色，使主色更加突出。辅色通常应用于网页中较小的元素，如按钮、图标等。
辅色衬托主色，可以令网页瞬间充满活力，给人以鲜活的感觉。辅色与主色的色相相反，起突出主题的作用。若辅色面积太大或是纯度过强，都会弱化主色，所以相对暗淡、适当面积的辅色才会达到理想的效果。如图2-70所示为在网页中搭配红色和黄色的辅色。
图2-70
在网页中为主色搭配辅色，可以使网页画面产生动感，活力倍增。网页辅助色通常与网页主色保持一定的色彩差异，既能突显网页主色，又能够丰富网页整体的视觉效果。如图2-71所示为在网页中搭配红色的辅色。
图2-71
2.5.4 点缀色
点缀色是指网页中较小的一处面积颜色或者易于变化物体的颜色，如图片、文字、图标和其他网页装饰颜色。点缀色常常采用强烈的色彩，常用对比色或高纯度色彩来加以表现。
为了营造出生动的网页空间氛围，点缀色应选择较鲜艳的颜色。如图2-72所示为使用蓝色作为点缀色。
图2-72
点缀色通常用来打破单调的网页整体效果，所以如果选择与背景色过于接近的点缀色，就不会产生理想效果。在少数情况下，为了特别营造低调柔和的整体氛围，则点缀色还是可以选用与背景色接近的色彩。
在不同的网页位置上，对于网页点缀色而言，主色、背景色和辅色都可能是网页点缀色的背景。如图2-73所示为使用绿色作为点缀色。
图2-73
在网页中点缀色的应用不在于面积大小，面积越小、色彩越强烈，点缀色的效果才会越突出。例如：在需要表现清新、自然的网页配色中使用绿叶来点缀网页画面，使整个画面瞬间变得生动活泼、有生机感。绿色树叶既不抢占网页画面主色彩，又不失点缀的效果，主次分明、有层次感。
◎ 【自我测评】制作珠宝网站导航
本案例是设计一款珠宝网站页面，运用广告页面的布局形式，重点突出表现产品，在页面中使用高光等使网站界面产生光芒效果，如图2-74所示。
图2-74
? 制作思路与要点
珠宝首饰类网站页面的重点是产品，需要突出产品的表现效果。在本案例的珠宝网站页面中，在页面中心位置运用大图轮换的方式展示珠宝产品，突出珠宝的显示效果，而导航菜单等其他内容则放置在页面中面积相对较小的区域，使得界面具有很强的感染力，提升产品的宣传效果。
? 色彩分析
该珠宝网站页面使用黑色和深灰色作为页面的主色，在深灰色的界面背景上放置精美的珠宝首饰图片，可以有效地凸显珠宝首饰的产品效果，使产品璀璨夺目。搭配明度和纯度较低的黄色文字，体现出产品的尊贵品质，整个网站界面给人一种高档、华贵的视觉印象。
? 操作步骤
步骤 01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，设置“前景色”为RGB（12、12、12），为画布填充前景色，如图2-75所示。
图2-75
步骤 02 打开并拖入素材图像“资源包\源文件\第2章\素材\301.jpg”，效果如图2-76所示。为该图层添加图层蒙版，使用“画笔工具”，在蒙版中涂抹，设置该图层的“混合模式”为“颜色减淡”，“填充”为90%，效果如图2-77所示。
图2-76
图2-77
步骤 03 新建名称为“顶层”的图层组，使用“矩形工具”，设置“填充”颜色为RGB（19、19、18），在画布中绘制一个矩形，效果如图2-78所示。新建“图层2”，使用“画笔工具”，设置“前景色”为RGB（102、93、72），在画布相应的位置涂抹，效果如图2-79所示。
图2-78
图2-79
步骤 04 执行“图层>创建剪贴蒙版”命令，为“图层2”创建剪贴蒙版，设置该图层的“填充”为40%，效果如图2-80所示。使用“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，如图2-81所示。
图2-80
图2-81
步骤 05 使用相同的制作方法，完成其他文字内容的输入，效果如图2-82所示。使用“矩形工具”，设置“填充”颜色为RGB（136、122、90），在画布中绘制一个矩形，效果如图2-83所示。
图2-82
图2-83
步骤 06 多次复制刚绘制的矩形，分别将复制得到的矩形调整到合适的大小和位置，并将相关图层合并，效果如图2-84所示。新建名称为“菜单”的图层组，使用“矩形工具”，在画布中绘制一个矩形，效果如图2-85所示。
图2-84
图2-85
步骤 07 为该图层添加“描边”图层样式，对相关选项进行设置，如图2-86所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-87所示。
图2-86
图2-87
步骤 08 单击“确定”按钮，完成“图层样式”对话框的设置，效果如图2-88所示。新建“图层3”，使用“椭圆选框工具”，在画布中绘制一个椭圆形选区，如图2-89所示。
图2-88
图2-89
步骤 09 执行“选择>修改>羽化”命令，弹出“羽化选区”对话框，参数设置如图2-90所示。单击“确定”按钮，羽化选区，为选区填充颜色为RGB（80、72、57）。取消选区，设置该图层的“填充”为80%，效果如图2-91所示。
图2-90
图2-91
步骤 10 多次复制该图层，并分别将复制得到的图像调整到合适的大小和位置，效果如图2-92所示。新建名称为“分割线”的图层组，使用“矩形工具”，设置“填充”为RGB（130、118、88），在画布中绘制一个矩形，效果如图2-93所示。
图2-92
图2-93
步骤 11 为该图层添加图层蒙版，使用“渐变工具”，在蒙版中填充黑白径向渐变，效果如图2-94所示。多次复制该图层，并分别将复制得到的图形调整到合适的大小和位置，效果如图2-95所示。
图2-94
图2-95
步骤 12 使用相同的制作方法，完成相似矩形效果的绘制，如图2-96所示。使用“圆角矩形工具”，设置“填充”颜色为RGB（183、168、127），“半径”为20像素，在画布中绘制一个圆角矩形，如图2-97所示。
图2-96
图2-97
步骤 13 将该圆角矩形所在图层栅格化为普通图层，对圆角矩形进行旋转操作，执行“滤镜>模糊>高斯模糊”命令，弹出“高斯模糊”对话框，参数设置如图2-98所示。单击“确定”按钮，执行“图层>创建剪贴图层”命令，为该图层创建剪贴蒙版，效果如图2-99所示。
图2-98
图2-99
步骤 14 复制该图层，并将复制得到的图像水平向右移动，调整到合适的位置，效果如图2-100所示。打开并拖入素材图像“资源包\源文件\第2章\素材\302.png”，如图2-101所示。
图2-100
图2-101
步骤 15 设置该图层的“混合模式”为“颜色减淡”，效果如图2-102所示。拖入素材图像“资源包\源文件\第2章\素材\303.png”，使用“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，效果如图2-103所示。
图2-102
图2-103
◎ 【随堂测评】制作完整珠宝网站
本案例是设计一款珠宝网站页面，运用广告页面的布局形式，重点突出表现产品，在页面中使用高光等使网站界面产生光芒效果，如图2-104所示。
图2-104
? 制作思路与要点
珠宝首饰类网站页面的重点是产品，需要突出产品的表现效果。在本案例的珠宝网站页面中，在页面中心位置运用大图轮换的方式展示珠宝产品，突出珠宝的显示效果。导航菜单等其他内容则放置在页面中面积相对较小的区域，使得界面具有很强的感染力，提升产品的宣传效果。
? 色彩分析
该珠宝网站页面使用黑色和深灰色作为页面的主色，在深灰色的界面背景上放置精美的珠宝首饰图片，可以有效地凸显珠宝首饰的产品效果，使产品璀璨夺目。搭配明度和纯度较低的黄色文字，体现出产品的尊贵品质，整个网站界面带给人一种高档、华贵的视觉印象。
? 操作步骤
步骤 01 新建名称为“窗口”的图层组，使用相同的制作方法，完成二级导航菜单效果的制作，如图2-105所示。新建名称为“商品”的图层组，新建“图层6”，使用“画笔工具”，设置“前景色”为RGB（109、109、109），在选项栏中设置“不透明度”为60%，在画布中相应的位置涂抹，效果如图2-106所示。
图2-105
图2-106
步骤 02 执行“滤镜>模糊>高斯模糊”命令，弹出“高斯模糊”对话框，对相关选项进行设置，单击“确定”按钮，为图像添加“高斯模糊”滤镜效果，如图2-107所示。
图2-107
步骤 03 使用相同的制作方法，完成相似图形效果的绘制，如图2-108所示。使用“自定形状工具”，在“形状”下拉面板中选择相应形状，在画布中绘制形状图形。按快捷键【Ctrl+T】，将形状图形调整到合适的大小和位置，效果如图2-109所示。
图2-108
图2-109
步骤 04 为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-110所示。单击“确定”按钮，完成“图层样式”对话框的设置，效果如图2-111所示。
图2-110
图2-111
步骤 05 复制该图层，将复制得到的图形水平翻转，并向左移至合适的位置，如图2-112所示。新建名称为“广告”的图层组，使用相同的制作方法，完成相似部分内容的制作，效果如图2-113所示。
图2-112
图2-113
步骤 06 新建名称为“2”的图层组，使用“圆角矩形工具”，设置“填充”颜色为RGB（49、44、34），“半径”为3像素，在画布中绘制一个圆角矩形，效果如图2-114所示。为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-115所示。
图2-114
图2-115
步骤 07 单击“确定”按钮，完成“图层样式”对话框的设置，效果如图2-116所示。使用相同的制作方法，完成相似图形效果的绘制，如图2-117所示。
图2-116
图2-117
步骤 08 完成该珠宝网站界面的设计制作，最终效果如图2-118所示。
图2-118