2.3　色彩在网站UI设计中的作用

毫无疑问，任何一个网页设计作品都离不开色彩。也许有人会问，那些以黑白色调为基本色或由不同明度的灰色调构成的页面又如何体现色彩的作用呢？它们也有色彩吗？答案是肯定的，从色彩学角度上看，灰色系都是完全的不饱和颜色，或者称为“无彩色系”，而通常人们易于辨识的红、橙、黄、绿、蓝、紫，以及由这些基本色混合而产生出的所有色彩则被称为“有彩色系”。实际上，“色彩”这一概念就是由无彩色和有彩色构成的，因此在任何网站UI设计中，色彩都是最基本的元素。

2.3.1　突出主题

将色彩应用于网站UI设计中，能给网页带来鲜活的生命力。它既是网站界面设计的语言，又是视觉信息传达的手段和方法，是网站UI设计中不可或缺的重要元素。色彩设计是指遵循科学与艺术的内在逻辑，对色彩进行富有鲜明创意性及理想化的组合过程，是理性与感性相结合的过程。

网页传递的信息内容与传递方式应该是相互统一的，这是设计作品成功的必要条件。网页中不同的内容需要由不同的色彩来表现，利用不同色彩自身的表现力、情感效应以及审美心理感受，可以使网页的内容与形式有机地结合起来，以色彩的内在力量来烘托主题、突出主题，如图2-15所示。

2.3.2　划分视觉区域

网页的首要功能是传递信息，色彩正是创造有序的视觉信息流程的重要元素。利用不同色彩划分视觉区域，是视觉设计中常用的方法，在网站界面设计中同样如此。

网页中的信息不仅多，而且种类繁杂，往往在一个页面中可以看到各种各样的信息，特别是门户型或综合型网站中更是如此，这就涉及信息分布及顺序排列的问题。

利用色彩进行划分，可以将不同类型的信息分类排布，并利用各种色彩带给人的不同心理效果，很好地区分出主次顺序，从而形成有序的视觉流程，如图2-16所示。

2.3.3　吸引用户

在网络上有不计其数的网站，即使是那些已经具有一定规模和知名度的网站，也要时刻考虑如何能更好地吸引用户的目光。那应该怎么做呢？这就需要利用色彩的力量，不断设计出各式各样的、赏心悦目的网站界面，来“讨好”挑剔的用户。

网页中的色彩应用，或含蓄优雅、或动感强烈、或时尚新颖、或单纯有力，无论哪种形式都是为了一个明确的目标，即引起更多用户的关注。

由于色彩设计的特殊性能，越来越多的网页设计师认识到，一个网站拥有突出的色彩设计，对于网站的生存起着至关重要的作用，是迈向成功的第一步。如图2-17所示为成功的网页配色。

◎ 【自我测评】制作数码产品网页导航

本案例通过使用形状工具和图层样式来设计一个数码产品网站页面的导航部分，如图2-18所示。

? 制作思路与要点

在该网站页面的设计中，使用灰色纹理素材作为页面的背景，搭配线条和立体几何图形，表现出网站页面的空间感，有助于更好地表现产品。

? 色彩分析

本案例设计的是数码产品网站页面，运用无彩色系进行配色，给人很强的科技感和时尚感。使用浅灰色作为网站页面的背景主色调，搭配深灰色的栏目和文字，色调统一，并且为产品部分应用少量的蓝色进行点缀，使得整个网页给人很强的时尚感和潮流感。

? 操作步骤

步骤 01　执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，打开并拖入素材图像“资源包\源文件\第2章\素材\101.jpg”，效果如图2-19所示。

步骤 02　使用“直线工具”，在选项栏中设置“填充”颜色为RGB（140、140、140），“粗细”为1像素，在画布中绘制一条直线，效果如图2-20所示。复制“形状1”图层得到“形状1拷贝”图层，双击“形状1拷贝”图层缩览图，修改复制得到的直线颜色为白色，并向右移动1像素，效果如图2-21所示。

步骤 03　使用相同的制作方法，绘制出相似的直线效果，如图2-22所示。新建名称为“产品”的图层组，打开并拖入素材图像“资源包\源文件\第2章\素材\102.png”，将其调整到合适的大小和位置，效果如图2-23所示。

步骤 04　新建“图层3”，使用“画笔工具”，设置“前景色”为白色，选择合适的笔触和笔触大小，在画布中合适的位置单击，效果如图2-24所示。设置“图层3”的“不透明度”为65%，效果如图2-25所示。

步骤 05　新建“图层4”，使用“画笔工具”，设置“前景色”为RGB（255、25、8），选择合适的笔触和笔触大小，在画布中合适的位置单击，效果如图2-26所示。设置该图层的“混合模式”为“颜色减淡”，效果如图2-27所示。

步骤 06　使用相同的制作方法，完成相似图形效果的绘制，如图2-28所示。新建名称为“左侧”的图层组，使用“横排文字工具”，在“字符”面板中对相关选项进行设置，在画布中输入相应的文字，如图2-29所示。

步骤 07　新建“图层7”，使用“画笔工具”，设置“前景色”为RGB（40、163、227），选择合适的笔触和笔触大小，在画布中合适的位置进行涂抹，为该图层创建剪贴蒙版，效果如图2-30所示。使用相同的制作方法，输入相应的文字，效果如图2-31所示。

步骤 08　使用“矩形工具”，在选项栏中设置“填充”颜色为RGB（76、76、76），在画布中绘制矩形，效果如图2-32所示。使用“直接选择工具”，分别对矩形下方的两个锚点进行调整，从而改变矩形的形状，效果如图2-33所示。

步骤 09　为该图层添加“渐变叠加”图层样式，对相关选项进行设置，单击“确定”按钮，完成“图层样式”对话框的设置，如图2-34所示。

步骤 10　使用“钢笔工具”，在选项栏中设置“工具模式”为“形状”，在画布中绘制形状图形，如图2-35所示。为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-36所示。

步骤 11　单击“确定”按钮，完成“图层样式”对话框的设置，设置该图层的“填充”为0%，效果如图2-37所示。使用“横排文字工具”，在“字符”面板中对相关选项进行设置，在画布中输入文字，并为相应的文字添加“渐变叠加”图层样式，效果如图2-38所示。步骤12复制“矩形1”图层得到“矩形1拷贝”图层，将复制得到的图形垂直翻转并向下移至合适的位置，如图2-39所示。使用相同的制作方法，输入相应文字，效果如图2-40所示。

◎ 【随堂测评】制作完整数码产品网页

本案例是设计一个数码产品网站页面，页面的布局简约，通过使用无彩色系表现出产品的科技感和时尚感，如图2-41所示。

? 制作思路与要点

网页中其他元素的设计同样采用不规则的几何形状图形，页面中大量运用留白，统一的表现形式给浏览者一种很强的科技感和空间感。

? 色彩分析

本案例设计的是数码产品网站页面，运用无彩色系进行配色，给人很强的科技感和时尚感。使用浅灰色作为网站页面的背景主色调，搭配深灰色的栏目和文字，色调统一，并且在产品部分用少量的蓝色进行点缀，使得整个网页给人带来很强烈的时尚感和潮流感。

? 操作步骤

步骤 01　使用相同的制作方法，完成其他选项效果的制作，如图2-42所示。新建名称为“装饰”的图层组，使用“钢笔工具”，在选项栏中设置“填充”颜色为RGB（128、124、124），在画布中绘制形状图形，如图2-43所示。

步骤 02　使用“钢笔工具”，在选项栏中设置“填充”颜色为白色，在画布中绘制形状图形，如图2-44所示。使用相同的制作方法，绘制出其他的装饰图案，效果如图2-45所示。

步骤 03　在“装饰”图层组上方新建名称为“宣传文字”的图层组，使用“横排文字工具”，在画布中输入文字，如图2-46所示。为该文字图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-47所示。

步骤 04　单击“确定”按钮，完成“图层样式”对话框的设置，效果如图2-48所示。使用相同的制作方法，拖入相应的素材图像并输入相应的文字，效果如图2-49所示。

步骤 05　同时选中相机的图层，按快捷键【Ctrl+T】，对图像和文字进行旋转操作，效果如图2-50所示。使用相同的制作方法，制作出其他文字效果，如图2-51所示。

步骤 06　新建名称为“版底信息”的图层组，使用“矩形工具”，设置“填充”颜色为RGB（22、22、22），在画布中绘制矩形，效果如图2-52所示。使用相同的制作方法，完成版底信息部分内容的制作，效果如图2-53所示。

步骤 07　完成该数码产品网站页面的设计制作，最终效果如图2-54所示。

2.3.4　增强艺术性

将色彩应用于网站UI设计中，可以给网页作品带来鲜活的生命力。色彩既是视觉传达的方式，又是艺术设计的语言。

色彩对于网页作品的艺术品位起着举足轻重的作用。好的色彩应用，可以大大增强网页的艺术性，也使得网页更富有审美情趣，如图2-55所示。