3.4 网页图标按钮设计_UI设计全书（全彩）-QQ阅读男生科幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

3.4　网页图标按钮设计

网页图标按钮设计和软件图标按钮设计大同小异，但总体来说，还是存在一定的区别，下面为大家介绍网页图标按钮设计的技巧和规范。

3.4.1　网页中按钮的设计规则

在网页里要强调的链接会以按钮的形式出现，重量级按钮是促成浏览者完成页面功能的一个很重要的部分，所以对于其本身而言，应该具有吸引眼球的作用，建议从以下几个方面来思考：

◎ 选择适当的配色

按钮本身的颜色应该区别于其周围的环境色，按钮的配色应该要比周围的环境色更亮，而且按钮的配色最好与周围的环境色形成高对比度。

◎ 按钮摆放位置

按钮摆放的位置也需要仔细考究，基本原则是要容易找到，特别重要的按钮应该处在画面的中心位置，如图3-65所示。

图3-65

◎ 按钮上的文字

在按钮上选择使用什么文字传递给用户是非常重要的，要注意按钮上的文字要言简意赅、直接明了，如注册、下载、创建、试玩等，甚至可以用“点击进入”等字眼，就是千万不要让浏览者去思考，越简单、越直接越好，如图3-66所示。

图3-66

◎ 根据系统选择按钮的尺寸

一个页面中按钮的大小通常代表了这个按钮的重要级别，但同时按钮的尺寸也不是越大越好，最好根据系统来决定。

按钮过大的话，会误导用户潜意识地将按钮认成是一块区域，导致错误操作。而按钮过小的话，又会导致用户看不到按钮，从而错过使用按钮。

? 《iPhone人机界面设计规范》建议：最小点击目标尺寸是44px×44px

? 《Windows手机用户界面设计和交互指南》建议：使用34px×34px

? 《Android的界面设计规范》建议：使用 48px×48dp（物理尺寸为9mm左右）

◎ 便于阅读

网页按钮不能与网页中的其他元素挤在一起，它需要有充足的外边距才能更加突出，也需要更多的内边距才能让文字更容易阅读，如图3-67所示。

图3-67

◎ 好的交互效果

给较为重要的按钮适当添加一些鼠标滑过的效果，会有力地增强按钮的点击感，给用户带来良好的体验，起到画龙点睛的作用，如图3-68所示。

图3-68

? 知识补充

要注意的是，按钮集中的地方，每个都增加高亮的鼠标滑过效果是不太合适的，这样会造成视觉混乱，影响用户浏览的舒适度，所以要“恰当”地添加鼠标滑过的效果。

3.4.2　网页中常见的按钮类型

在网页中按钮是一个非常重要的元素，按钮的美观性与创意是很重要的。设计有特点的按钮不仅能给用户一个新的视觉冲击，还能给网站页面增值加分。

按制作技术来分，网页按钮主要分为：静态图片按钮、JavaScript翻转图片按钮及Flash动画按钮。目前，在网站中应用较多的是静态图片按钮和Flash动画按钮。

◎ 静态按钮

静态图片按钮，顾名思义就是将按钮制作为静态图片的效果，且不会有任何的交互效果和动态效果。但是静态图片按钮与普通文字链接相比，显得美观、醒目，视觉效果好，更能吸引用户的注意，如图3-69所示。

图3-69

◎ JavaScript翻转图片按钮

这种形式的按钮一般通过JavaScript语言来实现。JavaScript翻转图片按钮是JavaScript按钮最为常见的形式，即按钮正常状态下是一幅图片，当鼠标指针移动到按钮上时，该按钮更换为另一幅图片，如图3-70所示。

图3-70

◎ HTML5动画按钮

HTML5按钮在网站中应用得比较广泛，在网站广告中也常常出现。运用HTML5按钮所能达到的表现效果远远大于普通按钮，特别是在游戏类网站界面中，使用HTML5动画按钮可以大大地增加网站界面的交互感和设计感，如图3-71所示。

图3-71

3.4.3　网页中按钮的特点

随着互联网的发展，网络速度也得到了很大的提升，在网站中越来越多地使用按钮的形式来增加页面的动态和美观。

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

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

◎ 易用性

在网站中使用图像按钮比使用特殊字体，更容易被用户所识别。网站中的图像按钮可以充分发挥网页设计师的创意和想法，使图像按钮跃然于页面上，更方便用户的操作和使用。随着HTML5动画在网页中应用得越来越广泛，在网站中也越来越多地可以看到Flash动画按钮、HTML5动画按钮，这些按钮更能够吸引用户的眼球，使网页更易于操作。所以在现在的网页设计中越来越多地应用了设计精美的图像按钮和HTML5动态按钮等，如图3-72所示。

图3-72

◎ 可操作性

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

图3-73

◎ 动态效果

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

图3-74

◎ 【随堂测评】绘制页游开始按钮

本案例是设计一款游戏按钮，主要是通过使用多种图层样式，体现出按钮图形的质感，如图3-75所示。

图3-75

? 制作思路与要点

按钮的设计风格一定要与网站界面的整体风格统一。在本案例的质感游戏按钮设计中，通过绘制圆角矩形，为其添加多种图层样式，从而表现出按钮的质感，接着为按钮添加纹理效果和高光效果，最后输入按钮文字并为文字添加相应的图层样式，整个按钮表现出很强的质感和立体感。

? 色彩分析

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

? 操作步骤

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

图3-76

图3-77

步骤 02　为该图层添加“内阴影”图层样式，对相关选项进行设置，如图3-78所示。继续添加“描边”图层样式，对相关选项进行设置，如图3-79所示。

图3-78

图3-79

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

图3-80

图3-81

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

图3-82

图3-83

? 提示

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

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

图3-84

图3-85

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

图3-86

图3-87

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

图3-88

图3-89

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

图3-90

图3-91

步骤 09　单击“确定”按钮，完成“图层样式”对话框的设置，效果如图3-92所示。设置该图层的“混合模式”为“柔光”，“不透明度”为3%，“填充”为6%，效果如图3-93所示。步骤10使用“钢笔工具”，在画布中绘制白色形状图形，并设置该图层的“不透明度”为70%，效果如图3-94所示。使用相同的制作方法，完成相似图形效果的绘制，如图3-95所示。步骤11使用“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，如图3-96所示。为该图层添加“描边”图层样式，对相关选项进行设置，如图3-97所示。