3.3 图标设计风格
图标在软件界面中无处不在，是软件界面设计中非常重要的元素。随着科技的发展、社会的进步，人们对美、时尚、趣味和质感的不断追求，图标设计呈现出百花齐放的局面，许多精致、新颖、富有创造力和人性化的图标涌入大众的视野。
3.3.1 简约化软件图标
近年来，随着人们审美的不断变化，越来越多的设计向简约、精致方向发展，通过简单的图形和合理的色彩搭配构成简约化图标，给人清晰、实用、一目了然的感觉，如图3-15所示。
图3-15
简约软件图标的制作方法看似简单，但其蕴含的喻意却非常丰富，每一个象形图都只能代表一个含义，否则会给用户带来错误的引导。在设计简约软件图标时，要遵守以下设计要点：
? 基本线条和形状
简约软件图标一般都比较简单，通常只保留了需要表现的功能的外形轮廓，使用基本线条和形状完成图标的设计。切记在简约图标的设计中细节不要过多，否则会造成图标意义的混乱。
? 纯色
简约软件图标通常都是纯色的，具有统一外观。如果图标应用时需要调整大小，建议使用Illustrator制作，如果图标是固定大小尺寸，可以使用Photoshop制作。
? 公共元素
使用公共元素绘制图标，有助于创建一组和谐的简约图标，即制作每一个图标时都使用相同的形状、线条和角度，这样有助于创建相同风格的视觉效果。
? 清爽干净
简约软件图标应该看起来清爽干净，在图标的绘制过程中，尽可能不使用渐变颜色，使用纯色进行填充，而且尽量只使用直线进行绘制。
◎ 【自我测评】绘制简约纯色图标
本案例是绘制一组简约纯色图标，主要通过基本的形状图形和线条来构成简约图标，如图3-16所示。
图3-16
? 制作思路与要点
简约图标的绘制比较简单，主要使用Photoshop中的矢量绘图工具绘制基本图形，通过各种基本图形的加减操作，从而得到需要的图形效果，最后为图标添加“内阴影”和“投影”图层样式，从而使图标具有一定的质感，不会显得过于平淡。
? 色彩分析
这款图标大部分使用的是明度较高的浅灰色，在图层样式中设置白色的内阴影和深灰色的投影效果，使图标的整体色调统一。
? 操作步骤
步骤 01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图3-17所示。打开素材图像“资源包\源文件\第3章\素材\23101.jpg”，将其拖入新建的文档中，如图3-18所示。
图3-17
图3-18
步骤 02 新建名称为“房子”的图层组，使用“多边形工具”，在选项栏中设置“工具模式”为“形状”，“填充”颜色为RGB（238、238、238），“边”为3，在画布中绘制一个三角形，如图3-19所示。使用“圆角矩形工具”，在选项栏中设置“路径操作”为“合并形状”，“半径”为4像素，在刚绘制的三角形基础上绘制一个圆角矩形，如图3-20所示。
图3-19
图3-20
步骤 03 使用“直接选择工具”，单击选中三角形最上方的锚点，将其向下移动，调整图形形状，如图3-21所示。使用“矩形工具”，在选项栏中设置“路径操作”为“合并形状”，在刚绘制的图形基础上绘制一个矩形，如图3-22所示。
图3-21
图3-22
步骤 01 使用“圆角矩形工具”，在选项栏中设置“半径”为5像素，在画布中绘制一个圆角矩形，如图3-23所示。使用“矩形工具”，在选项栏中设置“路径操作”为“减去顶层形状”，在刚绘制的圆角矩形上减去矩形，得到需要的图形，如图3-24所示。
图3-23
图3-24
步骤 05 使用“圆矩矩形工具”，设置“路径操作”为“减去顶层形状”，在刚绘制的图形上减去圆角矩形，如图3-25所示。使用“矩形工具”，使用相同的方法，再减去一个矩形，得到需要的图形，如图3-26所示。
图3-25
图3-26
步骤 06 使用“椭圆工具”，设置“路径操作”为“合并形状”选项，绘制一个正圆形，效果如图3-27所示。为“圆角矩形1”图层添加“内阴影”图层样式，对相关选项进行设置，如图3-28所示。
图3-27
图3-28
步骤 07 继续添加“颜色叠加”图层样式，对相关选项进行设置，如图3-29所示。继续添加“投影”图层样式，对相关选项进行设置，如图3-30所示。
图3-29
图3-30
步骤 08 单击“确定”按钮，完成“图层样式”对话框的设置，设置该图层的“填充”为70%，效果如图3-31所示。使有相同的方法，为“圆角矩形1”图层添加相同的图层样式设置，完成该图标的绘制，效果如图3-32所示。
图3-31
图3-32
步骤 09 使用相同的绘制方法，绘制出一系列的简约纯色图标，效果如图3-33所示。
图3-33
3.3.2 扁平化软件图标
扁平化图标在软件界面设计中应用得越来越多，因其简洁、大方、直观和易用等特点，越来越受到人们的喜爱和欢迎。
在人们的日常生活中，每天都接触手机和电脑等媒体，细心观察可以发现不同风格的扁平化图标，概括起来主要有四种风格：基础、阴影、长阴影和半透明风格。
◎ 基础风格
基础风格的扁平化图标，不添加任何渐变、阴影、高光等体现图标透视感的元素，而是通过极其简约的形状图形、符号等表现出图标的主题，如图3-34所示为基础风格的扁平化图标。
图3-34
◎ 阴影风格
阴影风格的扁平化图标主要是为图标中的主体图形元素添加常规的阴影效果，如图3-35所示为阴影风格的扁平化图标。
图3-35
◎ 长阴影风格
长阴影风格的扁平化图标是目前最流行、也是应用范围最广的图标。目前，长阴影设计主要用于较小的对象和元素，如图3-36所示为长阴影风格的扁平化图标。
图3-36
◎ 半透明风格
扁平化设计风格虽然抛弃渐变、高光和阴影等图形透视元素，但并不是完全绝对的，在扁平化设计风格中有一种风格称为“微渐变风格”。微渐变风格就是将简单的图形元素与传统图标高光表现的方式相结合，通过微渐变的方式体现出图标的层次感和立体感，如图3-37所示为微渐变风格的扁平化图标。
图3-37
◎ 【随堂测评】绘制长阴影风格的扁平化图标
本案例制作了一款长阴影风格的扁平化相机图标，图标整体设计风格简约时尚，配色合理，可辨识度高，如图3-38所示。
图3-38
? 制作思路与要点
长阴影风格图标的绘制简单不费事，主要通过使用Photoshop中的矢量绘图工具绘制基本图形，以及通过各种基本图形的相加操作，从而得到需要的图形效果，并为图标添加“内阴影”和“投影”等图层样式，从而使图标具有一定的质感，最后使用矢量工具绘制一些基本圆形，使图标显得更加精致。
? 色彩分析
这款图标图底使用明度较低的蓝色，图标主体使用白色和黑色，使图标的整体色调清贵而不失雅致。
? 操作步骤
步骤 01 执行“文件>新建”命令，设置“新建”对话框，各项参数设置如图3-39所示。填充背景色为RGB（47、45、45），如图3-40所示。
图3-39
图3-40
步骤 02 单击工具箱中的“圆角矩形工具”按钮，设置填充颜色为RGB（37、185、247），在画布中绘制如图3-41所示的圆角矩形。单击“图层”面板底部的“添加图层样式”按钮，在弹出的“图层样式”对话框中选择“渐变叠加”选项，设置如图3-42所示。
图3-41
图3-42
步骤 03 继续选择“投影”选项，设置如图3-43所示。单击“确定”按钮，完成对话框的设置，图像效果如图3-44所示。
图3-43
图3-44
步骤 04 单击工具箱中的“钢笔工具”按钮，在画布中绘制形状，如图3-45所示。单击面板底部的“添加图层蒙版”按钮，为图层添加图层蒙板，如图3-46所示。
图3-45
图3-46
步骤 05 调整图层顺序，将“形状1副本”图层移动到“圆角矩形1”图层下方，图像效果如图3-47所示，图层面板如图3-48所示。
图3-47
图3-48
步骤 06 单击工具箱中的“椭圆工具”按钮，填充颜色为白色，效果如图3-49所示。单击“路径操作”选项，选择“合并形状”选项，在画布中绘制如图3-50所示。
图3-49
图3-50
? 提示
长阴影是扁平化设计风格中非常重要的表现方式之一，通过为图标或设计元素添加长阴影的效果，可以使扁平化图标更具有层次感，视觉效果也更加突出。
步骤 07 单击“图层”面板底部的“添加图层样式”按钮，在弹出的“图层样式”对话框中选择“斜面和浮雕”选项，设置参数如图3-51所示。继续选择“内阴影”选项，设置参数如图3-52所示。
图3-51
图3-52
步骤 08 继续选择“颜色叠加”选项，设置如图3-53所示。最后选择“投影”选项，设置如图3-54所示。
图3-53
图3-54
步骤 09 单击“确定”按钮，完成对话框的设置，图像效果如图3-55所示。单击工具箱中的“椭圆工具”按钮，填充颜色为RGB（227、227、227），如图3-56所示。
图3-55
图3-56
步骤 10 单击“图层”面板底部的“添加图层样式”按钮，在弹出的“图层样式”对话框中设置相应参数，如图3-57所示。完成后单击“确定”按钮，图像效果如图3-58所示。
图3-57
图3-58
步骤 11 继续单击工具箱中的“椭圆工具”按钮，在画布中绘制填充颜色为RGB（21、101、168）的正圆形，如图3-59所示。单击“图层”面板底部的“添加图层样式”按钮，在弹出的“图层样式”对话框中选择“内阴影”选项，如图3-60所示。
图3-59
图3-60
提示
由于版面的限制，此处不再详细列出设置的图层样式，如有需要大家可以参看本书提供的源文件。
步骤 12 单击“确定”按钮，完成“图层样式”的设置，效果如图3-61所示。多次复制“椭圆3”图层，等比例缩小图形，并更改填充颜色，图像效果如图3-62所示。
图3-61
图3-62
步骤 13 使用之前制作阴影的方法完成阴影的制作，效果如图3-63所示。
图3-63
3.3.3 拟物化软件图标
拟物化软件图标除了能够带给用户逼真的感觉，还会带给用户华丽感。通常拟物化软件图标的效果要比真实对象更具美感，因为在设计图标时会将一些不和谐的内容进行美化处理，如不均匀的颜色和阴影、不清晰的纹理等。通过处理使拟物化图标的效果看起来更加真实、细腻和美观，给人很强烈的视觉感受，如图3-64所示。
图3-64
拟物化软件图标具有很强的识别性，在设计过程中需要注意以下几个方面：
? 确定风格
对于拟物化图标也可以添加特殊的风格，使图标效果看起来更一致，但是添加的特效不宜太多，适可而止，否则将失去图标原有的意境。
? 控制最小元素
创建图标时，首先要使其应用含义明确且容易被理解。注意把控绘制对象的最小元素，除了可以使图标效果更加真实外，还有助于用户理解图标的含义。
? 简单的设计
图标作为软件界面中重要的元素，风格要与软件界面的风格保持一致，所以设计时不要花费大量的时间在图标的标新立异上，应充分借鉴软件界面特征的同时增加一些出色的设计。
? 分步操作
拟物化图标的设计过程一般都比较烦琐，建议用户分阶段进行设计制作，这样可以避免由于图标效果未能达到要求需要修改而浪费大量的时间。
? 适当夸张
一个逼真的拟物化图标固然好，但也可以通过适当的夸张将图标需要表现的含义更清晰地表现出来，增强图标的隐喻。