2.1 认识网页图标_网页UI设计之道（第二版）-QQ阅读男生中文武侠网

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

设备和账号都新为新人

2.1 认识网页图标

图标是一种非常小的可视控件，是网页中的指示路牌，它以最便捷、简单的方式去指引浏览者获取其想要的信息资源。用户通过图标上的指示，无须仔细地浏览文字信息就可以很快地找到自己需要的信息或者完成某项任务，从而节省大量宝贵的时间和精力。

2.1.1 图标概述

图标的应用范围极为广泛，例如，一个国家的图标是国旗；一件商品的图标是注册商标；军队的图标是军旗；学校的图标是校徽等。而网页中的图标也会以不同的形式显示在网页中。

图标分为广义和狭义两种。广义的图标是指具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，软硬件、网页、社交场所、公共场合无所不在，例如各种交通标志等。

狭义的图标是指计算机软件方面的应用，包括程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等，如图2-1所示为常见的计算机系统图标。

一个图标是一组图像，以各种不同的格式（大小和颜色）组成，如图2-2所示。此外，每个图标可以包含透明的区域，以方便图标应用在不同背景中。

图2-1

图2-2

图标在网页中占据的面积很小，不会阻碍网页信息的宣传。另外，设计精美的图标还可以为网页增添色彩。几乎每个网页的界面中都会使用图标来为用户指路，从而大大提高用户浏览网站的速度和效率，也极大地提升了网页视觉风格的美观程度，如图2-3所示。

图2-3

2.1.2 网页图标应用

网页图标就是用图像的方式来标识一个栏目、功能或命令等，例如，在网页中看到一个日记本图标，很容易就能辨别出这个栏目与日记或留言有关，这时就不需要再标注一长串文字了，也避免了各个国家之间不同文字所带来的麻理解障碍，如图2-4所示。

图2-4

在网页界面的设计中，会根据不同的需要来设计不同类型的图标，最常见到的是用于导航的导航图标，以及用于链接其他网站的友情链接图标，如图2-5所示。

图2-5

当网站中的信息过多，而又想将重要的信息显示在网站首页时，除了以导航菜单的形式显示，还可以以内容主题的方式显示。网站首页的内容主题既可以是超链接文字，也可以是相关的图标，而使用不同图标的表现方式，可以更好地突出主题内容的显示，如图2-6所示。

图2-6

【自测1】设计简约风格网页图标

视频：光盘\视频\第2章\简约风格网页图标.swf 源文件：光盘\源文件\第2章\简约风格网页图标.psd

● 案例分析

案例特点：本案例设计一组简约风格的网页图标，主要通过基本形状图形的加减操作来得到需要的图标效果，图标的整体风格简约、直观。

制作思路与要点：随着扁平化设计风格的流行，网页界面中越来越多地使用一些简洁的纯色图标。本案例所设计的简约风格网页图标，主要是使用Photoshop中的矢量绘图工具绘制基本形状图形，通过形状图形的加减操作得到的。这种简约风格的图标适合多种不同风格的网页界面，并且其表现简洁、直观、意义明确。

● 色彩分析

本案例的简约风格网页图标主要以白色为主色调，在个别图标中使用明度较高的浅灰色搭配，并且为各图标都添加了投影的效果，使得该组图标的视觉效果统一，并且具有很高的辨识度。

● 制作步骤

步骤01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-7所示。新建“图层1”，为该图层填充任意颜色，如图2-8所示。

图2-7

图2-8

步骤02 为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-9所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-10所示。

步骤03 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-11所示。新建名称为“图标1”的图层组，使用“圆角矩形工具”，在选项栏上设置“工具模式”为“形状”、“半径”为2像素，在画布中绘制白色的圆角矩形，如图2-12所示。

图2-9

图2-10

图2-11

图2-12

提示

使用Photoshop中的“钢笔工具”和形状工具等矢量绘图工具，可以创建出不同类型的对象。其中包括形状图层、工作路径和像素图像。在工具箱中选择矢量绘图工具后，并在选项栏中的“工具模式”下拉列表中选择相应的模式，即可指定一种绘图模式，然后在画布中进行绘图即可。

步骤04 选择“圆角矩形工具”，在选项栏上设置“路径操作”为“减去顶层形状”、“半径”为1像素，在刚绘制的圆角矩形上减去3个圆角矩形，效果如图2-13所示。使用“钢笔工具”，在选项栏上设置“路径操作”为“减去顶层形状”，在图形上减去相应的形状，得到需要的图形，如图2-14所示。

图2-13

图2-14

提示

如果设置“路径操作”为“减去顶层形状”，则可以在已经绘制的路径或形状图形中减去当前绘制的路径或形状图形。

步骤05 使用“矩形工具”在画布中绘制矩形，将刚绘制的矩形进行旋转操作，并调整到合适的位置，如图2-15所示。选择“多边形工具”，在选项栏上设置“路径操作”为“合并形状”、“边”为3，在画布中绘制白色的三角形，并调整到合适的位置，如图2-16所示。

图2-15

图2-16

步骤06 为该图层组添加“投影”图层样式，对相关选项进行设置，如图2-17所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-18所示。

图2-17

提示

图2-18

为图层组添加图层样式的方法与为图层添加图层样式的方法完全相同，其最大的优势是可以将图层组中的所有图层作为一个整体，同时添加相同的图层样式，从而减少为每个图层分别添加图层样式的烦琐操作。

步骤07 新建名称为“图标2”的图层组，使用“椭圆工具”在画布中绘制白色的正圆形，如图2-19所示。选择“椭圆工具”，在选项栏上设置“路径操作”为“减去顶层形状”，在刚绘制的正圆形上减去正圆形，得到需要的图形，如图2-20所示。

提示

使用“椭圆工具”在画布中绘制椭圆形时，如果按住Shift键的同时拖动鼠标，则可以绘制正圆形；拖动鼠标绘制椭圆形时，在释放鼠标之前，按住Alt键，则将以单击点为中心向四周绘制椭圆形；在画布中拖动鼠标绘制椭圆形时，在释放鼠标之前，按住Alt+Shift组合键，则将以单击点为中心向四周绘制正圆形。

图2-19

图2-20

步骤08 使用“椭圆工具”在画布中绘制白色的正圆形，如图2-21所示。选择“圆角矩形工具”，在选项栏上设置“路径操作”为“减去顶层形状”、“半径”为1像素，在刚绘制的正圆形上减去两个圆角矩形，得到需要的图形，如图2-22所示。

图2-21

图2-22

步骤09 使用“椭圆工具”，在画布中绘制白色的正圆形，如图2-23所示。使用“矩形工具”，在选项栏上设置“路径操作”为“减去顶层形状”，在正圆形上减去相应的矩形，将得到的图形旋转，效果如图2-24所示。

图2-23

图2-24

步骤10 使用相同的制作方法，完成相似图形的绘制，如图2-25所示。使用相同的制作方法，为“图标2”图层组添加“投影”图层样式，效果如图2-26所示。

图2-25

图2-26

步骤11 新建名称为“图标3”的图层组，选择“圆角矩形工具”，设置“半径”为3像素，在画布中绘制白色的圆角矩形，如图2-27所示。使用“矩形工具”，设置“路径操作”为“合并形状”，在刚绘制的圆角矩形上添加矩形，效果如图2-28所示。

图2-27

图2-28

提示

如果设置“路径操作”为“合并形状”，则可以在原有路径或形状图形的基础上添加新的路径或形状图形。

步骤12 选择“矩形工具”，设置“路径操作”为“减去顶层形状”，在刚绘制的图形上减去矩形，得到需要的图形，效果如图2-29所示。选择“多边形工具”，在选项栏上设置“边”为3，在画布中绘制白色的三角形，将其调整到合适的大小和位置，如图2-30所示。

图2-29

图2-30

步骤13 使用“矩形工具”在画布中绘制白色的矩形，如图2-31所示。选择“矩形工具”，设置“路径操作”为“减去顶层形状”，在刚绘制的矩形上再减去一个矩形，得到需要的图形，效果如图2-32所示。

图2-31

图2-32

提示

完成路径或形状图形的绘制后，可以使用“直接选择工具”选中需要进行调整的路径或形状图形，按快捷键Ctrl+T，显示自由变换框，可以对该路径或形状图形进行缩放、旋转和调整位置等变换操作，从而保证所要减去的矩形效果为合适的效果。

步骤14 选择“矩形工具”，在选项栏上设置“填充”为RGB（221，225，242），在画布中绘制矩形，并调整图层的叠放顺序，效果如图2-33所示。使用相同的制作方法，为“图标3”图层组添加“投影”图层样式，效果如图2-34所示。

图2-33

图2-34

步骤15 使用相同的制作方法，可能完成系列简约网站图标的设计，最终效果如图2-35所示。

图2-35

【自测2】设计按钮图标工具栏

视频：光盘\视频\第2章\按钮图标工具栏.swf 源文件：光盘\源文件\第2章\按钮图标工具栏.psd

● 案例分析

案例特点：本案例设计一款按钮图标工具栏，将简约的图标与按钮相结合，并且设计出按钮图标在按下状态的显示效果。

制作思路与要点：按钮图标工具栏在许多界面中经常使用，例如手机界面、软件界面等。本例将图标与按钮相结合，通过图标的方式来体现各个按钮的功能，采用简约的风格，并且设计出按钮图标的鼠标经过和按下状态的显示效果。首先绘制圆角矩形并添加相应的图层样式，表现出各按钮的效果和质感；接着通过绘制形状图形设计出各图标的效果，整体给人感觉简洁、统一。