2.4 网页中按钮的特点_网页UI设计之道（第二版）-QQ阅读历史男生网

书名：网页UI设计之道（第二版）
作者名：盛意文化编著
本章字数：4170字
更新时间：2025-02-18 09:49:41

2.4 网页中按钮的特点

随着互联网的发展，网络速度也得到了飞速发展，在网站中越来越多地使用图像按钮、JavaScript交互按钮或Flash动态按钮的形式，以增加页面的动态和美观。

按钮主要具有两个作用：第一是提示性作用，通过提示性的文本或者图形告诉浏览者单击后会有什么结果；第二是动态响应作用，即当浏览者在进行不同的操作时，按钮能够呈现出不同的效果，响应不同的鼠标事件。这样的动态按钮一般有4个状态，即Up（释放）、Over（滑过）、Down（按下）和Over While Down（按下时滑过）。从功能的角度来看，按钮和文字链接的作用相同，都是引导人们去访问某些内容。

不论是静态图片按钮还是动态按钮，网站中的按钮都具有如下几个特点：

1. 易用性

在网页中使用图片按钮比使用特殊字体更容易被浏览者所识别。网页中的图片按钮可以充分发挥网页设计师的创意和想法，使图片按钮跃然于页面上，更方便浏览者的操作和使用，随着Flash动画在网页中越来越广泛地应用，在网站中也越来越多地可以看到Flash动画按钮，Flash动画按钮更能够吸引浏览者的注意，使网页更易于操作。所以现在的网页设计中越来越多地应用了设计精美的图片按钮和Flash动态按钮，如图2-126所示。

图2-126

2. 可操作性

在网页设计过程中，为了使网页中比较重要的功能或链接能够突出显示，通常会将该部分内容制作成按钮的形式，例如“登录”按钮、“搜索”按钮等，或是一些具有特别功能的链接按钮。这些按钮，不论是静态的还是动态的，在网页都需要实现某些功能或作用，而不是装饰，所以这就需要网页中的按钮都要有一定的可操作性，能够实现网页的某种功能，如图2-127所示。

图2-127

3. 动态效果

静态图片按钮的表现形式较为单一，不容易引起浏览者的兴趣和注意。而JavaScript交互按钮和Flash按钮具有动态效果，能够增强页面的动感，传达更丰富的信息，并且可以突出该按钮与页面中其他普通按钮的区别，突出显示该按钮及其内容，如图2-128所示。

图2-128

【自测4】设计质感游戏按钮

视频：光盘\视频\第1章\质感游戏按钮.swf 源文件：光盘\源文件\第1章\质感游戏按钮.psd

● 案例分析

案例特点：本案例设计一款质感游戏按钮，主要通过多种图层样式的结合使用，来体现出按钮图形的质感。

制作思路与要点：按钮的设计风格一定要和网页界面的整体风格相统一。制作本案例的质感游戏按钮，首先绘制圆角矩形，通过多种图层样式的添加表现出按钮的质感；接着为按钮添加纹理效果和高光效果；最后输入按钮上的文字并为文字添加相应的图层样式，整个按钮给人很强的质感和立体感。

● 色彩分析

本案例所设计的质感游戏按钮使用蓝色作为主色调，运用明度和纯度较高的蓝色渐变作为按钮的背景色，搭配深蓝色的按钮文字，使得按钮层次分明，视觉效果明亮，应用在深蓝色的网页界面，效果比较突出。

● 制作步骤

步骤01 打开素材图像“光盘\源文件\第2章\素材\501.jpg”，如图2-129所示。新建名称为“按钮”的图层组，使用“圆角矩形工具”，在选项栏上设置“半径”为20像素，在画布中绘制一个黑色的圆角矩形，如图2-130所示。

图2-129

图2-130

步骤02 为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-131所示。继续添加“描边”图层样式，对相关选项进行设置，如图2-132所示。

图2-131

图2-132

步骤03 继续添加“内阴影”图层样式，对相关选项进行设置，如图2-133所示。继续添加“光泽”图层样式，对相关选项进行设置，如图2-134所示。

图2-133

图2-134

步骤04 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-135所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-136所示。

图2-135

图2-136

提示

为图层添加图层样式的方法有3种。第1种，选择需要添加图层样式的图层，执行“图层>图层样式”命令，通过“图层样式”子菜单中相应的命令可以为图层添加相应的图层样式。第2种，单击“图层”面板上的“添加图层样式”按钮，在弹出菜单中选择需要对添加的图层样式。第3种，在需要添加图层样式的图层名称外侧区域双击，也可以弹出“图层样式”对话框。

步骤05 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-137所示。新建图层，使用“画笔工具”，设置“前景色”为RGB（208，209，210），选择合适的笔触，在画布中合适的位置进行涂抹，效果如图2-138所示。

图2-137

图2-138

步骤06 设置该图层的“混合模式”为“叠加”，效果如图2-139所示。使用“圆角矩形工具”，设置“半径”为20像素，在画布中绘制白色的圆角矩形，如图2-140所示。

图2-139

图2-140

提示

设置图层的“混合模式”为“叠加”，可以改变图像的色调，但图像的高光和暗调将被保留。

步骤07 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-141所示。使用“矩形选框工具”，在画布中绘制选区，并分别填充颜色，效果如图2-142所示。

图2-141

图2-142

步骤08 执行“编辑>定义图案”命令，弹出“图案名称”对话框，如图2-143所示。单击“确定”按钮，将其定义为图案。返回设计文档中，为“圆角矩形2”图层添加“图案叠加”图层样式，对相关选项进行设置，如图2-144所示。

步骤09 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-145所示。设置该图层的“混合模式”为“柔光”、“不透明度”为3%、“填充”为6%，效果如图2-146所示。

图2-143

图2-144

图2-145

图2-146

步骤10 使用“钢笔工具”在画布中绘制白色的形状图形，并设置该图层的“不透明度”为70%，效果如图2-147所示。使用相同的制作方法，可以完成相似图形效果的绘制，如图2-148所示。

图2-147

图2-148

步骤11 选择“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，如图2-149所示。为该图层添加“描边”图层样式，对相关选项进行设置，如图2-150所示。

图2-149

图2-150

RGB（150，216，243）

步骤12 继续添加“内阴影”图层样式，对相关选项进行设置，如图2-151所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-152所示。

图2-151

图2-152

步骤13 完成该质感游戏按钮的设计制作，最终效果如图2-153所示。

图2-153

【自测5】设计网站个性按钮

视频：光盘\视频\第2章\网站个性按钮.swf 源文件：光盘\源文件\第2章\网站个性按钮.psd

● 案例分析

案例特点：本案例设计一款网站个性按钮，主要通过综合运用图层样式表现出按钮的质感，并通过水滴等图形的绘制，使按钮的表现效果更加突出。

制作思路与要点：本案例所设计的网站个性按钮并不是特别复杂，绘制出简单的按钮图形，为图形添加各种图层样式，即可表现出强烈的立体感和质感，结合“不透明度”和“填充”选项的设置，可以使按钮图形产生凹凸质感，更加具有视觉层次感。

● 色彩分析

本案例所设计的网站个性按钮使用黄色作为按钮的主体色调，搭配白色的高光和橙色的阴影，体现出按钮的立体感和质感，按钮的配色与网页界面的整体色调统一，使按钮在网页界面中的表现效果和谐、舒适。

● 制作步骤

步骤01 打开素材图像“光盘\源文件\第2章\素材\601.jpg”，效果如图2-154所示。新建名称为“进入按钮”的图层组，选择“圆角矩形工具”，在选项栏上设置“半径”为20像素，在画布中绘制一个黑色的圆角矩形，效果如图2-155所示。

图2-154

图2-155

步骤02 为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-156所示。继续添加“内阴影”图层样式，对相关选项设置，如图2-157所示。

图2-156

图2-157

步骤03 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-158所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-159所示。

步骤04 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-160所示。复制“圆角矩形1”图层，得到“圆角矩形1拷贝”图层，清除“圆角矩形1拷贝”图层的图层样式，添加“投影”图层样式，对相关选项进行设置，如图2-161所示。

图2-158

图2-159

图2-160

图2-161

提示

如果需要删除图层所添加的某一种图层样式，可以拖动该图层样式名称至“图层”面板下方的“删除”按钮上。如果需要删除图层所添加的多个图层样式，可以在该图层上单击鼠标右键，在弹出的菜单中选择“清除图层样式”命令，即可一次性删除该图层的多个图层样式。

步骤05 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为0%，效果如图2-162所示。复制“圆角矩形1拷贝”图层，得到“圆角矩形1拷贝2”图层，清除该图层的图层样式，添加“渐变叠加”图层样式，对相关选项进行设置，如图2-163所示。

图2-162

图2-163

步骤06 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-164所示。选择“钢笔工具”，在选项栏上设置“工具模式”为“形状”，在画布中绘制白色的形状图形，如图2-165所示。

图2-164

图2-165

步骤07 为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-166所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-167所示。

图2-166

图2-167

步骤08 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为10%，效果如图2-168所示。使用相同的制作方法，可以完成相似图形效果的绘制，如图2-169所示。

图2-168

图2-169

步骤09 新建“图层1”，使用“画笔工具”，设置“前景色”为白色，选择合适的笔触并设置笔触的不透明度，在画布中合适的位置涂抹，设置该图层的“混合模式”为“柔光”，效果如图2-170所示。复制“图层1”图层，得到“图层1拷贝”图层，将复制得到的图形垂直翻转并向上移至合适的位置，效果如图2-171所示。