2.2 软件按钮和图标设计
在软件UI设计中，图标和按钮设计占有很大的比例，图标和按钮一般是为软件提供单击功能或者用于着重表现软件中的某个功能或内容的，了解其功能和作用后要在其辨识度上下功夫。不要将软件图标或按钮设计得太过于花哨，否则使用者不容易看出它的功能，好的软件图标和按钮设计是使用者只要看一眼外形就知道其功能。
2.2.1 什么是软件图标
图标是一种小的可视控件，是软件界面设计中的指示路牌，以最便捷、简单的方式指引浏览者获取其想要的信息资源。图标是具有明确指代含义的计算机图形。其中，操作系统桌面图标是软件或操作快捷方式的标识，界面中的图标是功能标识。
图标在软件界面中无处不在，是软件界面设计中非常重要的设计元素。随着科技的发展、社会的进步，以及人们对美、时尚、趣味和质感的不断追求，图标设计呈现出百花齐放的局面，越来越多的精致、新颖、富有创造力和人性化的图标涌入浏览者的视野。但是，图标设计不仅需要精美、质感，更重要的是具有良好的可用性，如图2-7所示。
图2-7
好的图标设计不仅需要精美，具有可识别性、独特性，更重要的是具有很强的实用性，所以好的图标设计应具有多样性、艺术性、准确性、实用性和持久性。
2.2.2 软件图标设计原则
界面设计的未来方向是简洁、易用和高效，精美的扁平化图标设计往往具有画龙点睛的作用，从而提升设计的视觉效果。现在的图标其设计越来越新颖、有独创性，扁平化图标设计的核心思想是要尽可能地发挥图标的优点：比文字直观漂亮，在该基础上尽可能使简洁、清晰、美观的图形表达出图标的意义。
① 可识别性原则
可识别性是图标设计的首要原则，是指设计的图标要能够准确地表达相应的操作，让浏览者一眼看到就能明白该图标要表达的意思。例如，道路上的图标，可识别性强、直观、简单，即使不认识字的人，也可以立即了解图标的含义，如图2-8所示。
图2-8
② 差异性原则
这也是图标设计的重要原则之一，同时也是容易被设计者忽略的一条原则。只有图标之间有差距，才能被浏览者所关注和记忆，从而对设计内容留有印象，否则图标设计就是失败的，如图2-9所示。
图2-9
③ 实用性原则
在软件界面中经常会使用一些系统操作小图标，这些系统操作小图标的设计虽然简单，却很实用。通常，软件界面不需要精度很高、尺寸很大的图标，并且这些图标要符合差异性、可识别性和风格统一的原则，如图2-10所示。
图2-10
④ 与环境协调原则
任何图标或设计都不可能脱离环境而独立存在，图标最终要放在软件界面中才会起作用，因此，图标的设计要考虑图标所处的环境，这样的图标才能更好地为设计服务，如图2-11所示。
图2-11
④ 视觉效果原则
图标设计追求视觉效果，一定要在保证差异性、可识别性和协调性原则的基础上，先满足基本的功能需求，然后考虑更高层次的要求——视觉要求。如图2-12所示为视觉效果出众的软件图标。
图2-12
⑤ 创建性原则
随着时代的发展和人们审美水平的提高，图标的设计更是层出不穷，要想让浏览者注意到设计的内容，对图标设计者提出了更高的要求。在保证图标实用性的基础上，应提高图标的创造性，只有这样才能和其他图标相区别，给浏览者留下深刻的印象，如图2-13所示。
图2-13
2.2.3 图标的常用格式
图标也称icon，广泛应用于程序标志、数据标志、命令选择、模式信号或切换开关、状态指示等，图标有助于用户快速执行命令和打开程序文件。一个图标就是一套相似的图片，每张图片都有不同的格式。图标包含透明区域，在透明区域内可以透出图标下的背景。因为操作系统和显示设备的多样性，导致了图标格式的多样性要求。如表2-1所示为图标的常见格式。
表2-1 图标的常见格式
（续表）
2.2.4 简约软件图标
近年来，随着人们对美的认知发生改变，越来越多的设计向简约、精致方向发展，通过简单的图形和合理的色彩搭配构成简约的图标，给人感觉简约、清晰、实用、一目了然，如图2-14所示。
图2-14
简约软件图标的制作方法看似简单，但其蕴含的意义却非常丰富，每一个象形图都只能代表一个含义，否则会给用户带来错误的引导。在设计简约软件图标时，可以遵守以下设计要点：
① 使用基本线条和形状
简约软件图标一般都比较简单，通常只保留了需要表现的功能的外形轮廓，可以使用基本线条和形状完成简约图标的设计，切记在简约图标的设计中细节不要过多，否则会影响图标的意义，造成混乱。
② 应用纯色
简约软件图标通常都是纯色的，具有统一的外观。如果图标应用的时候需要调整大小，建议使用Illustrator软件制作，如果是固定尺寸大小的图标，可以使用Photoshop软件制作。
③ 使用公共元素
使用公共元素绘制图标，有助于创建一组和谐的简约图标，制作每一个图标时都使用相同的形状、线条和角度有助于创建相同风格的视觉效果。
④ 清爽干净
简约软件图标应该看起来是清爽干净的，尽可能不使用渐变颜色填充。在图标的绘制过程中，尽量只使用直线和45度细线条进行绘制，可以通过显示网格辅助图标的绘制。
【自测1】绘制简约纯色图标
视频：光盘\视频\第2章\简约纯色图标.swf
源文件：光盘\源文件\第2章\简约纯色图标.psd
案例分析
案例特点：本案例绘制一组简约纯色图标，主要通过基本的形状图形和线条来构成。
制作思路与要点：简约图标的绘制比较简单，主要通过使用Photoshop中的各种矢量绘图工具绘制基本图形；通过各种基本图形的相加和相减操作，得到需要的图形效果；最后为图标添加“内阴影”和“投影”图层样式，从而使图标又具有一定的质感，不至于太过平淡。
色彩分析
这款图标大部分使用的是明度较高的浅灰色，在“图层样式”对话框中设置白色的内阴影和深灰色的投影效果，使图标的整体色调统一。
制作步骤
步骤01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-15所示。打开素材图像“光盘\源文件\第2章\素材\201.jpg”，将其拖入到新建的文档中，如图2-16所示。
图2-15
图2-16
步骤02 新建名称为“房子”的图层组，使用“多边形工具”，在选项栏上设置“工具模式”为“形状”、“填充”为RGB（238,238,238）、“边”为3，在画布中绘制一个三角形，如图2-17所示。使用“圆角矩形工具”，在选项栏上设置“路径操作”为“合并形状”、“半径”为4像素，在刚绘制的三角形基础上绘制一个圆角矩形，如图2-18所示。
图2-17
图2-18
提示
使用“多边形工具”可以绘制三角形、六边形等形状。单击工具箱中的“多边形工具”按钮，在画布中单击并拖动鼠标即可按照在选项栏上的设置绘制出多边形和星形。
步骤03 使用“直接选择工具”，选中三角形最上方的锚点，将其向下移动，调整图形形状，如图2-19所示。选择“矩形工具”，在选项栏上设置“路径操作”为“合并形状”，在刚绘制的图形的基础上绘制一个矩形，如图2-20所示。
图2-19
图2-20
步骤04 使用“圆角矩形工具”，在选项栏上设置“半径”为5像素，在画布中绘制一个圆角矩形，如图2-21所示。选择“矩形工具”，在选项栏上设置“路径操作”为“减去顶层形状”，在刚绘制的圆角矩形上减去矩形，得到需要的图形，如图2-22所示。
图2-21
图2-22
步骤05 选择“圆矩矩形工具”，设置“路径操作”为“减去顶层形状”，在刚绘制的图形上减去圆角矩形，如图2-23所示。选择“矩形工具”，使用相同的方法，再减去一个矩形，得到需要的图形，如图2-24所示。
图2-23
图2-24
步骤06 选择“椭圆工具”，设置“路径操作”为“合并形状”，绘制一个正圆形，效果如图2-25所示。为“多边形1”图层添加“内阴影”图层样式，对相关选项进行设置，如图2-26所示。
图2-25
图2-26
步骤07 继续添加“颜色叠加”图层样式，对相关选项进行设置，如图2-27所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-28所示。
图2-27
图2-28
步骤08 单击“确定”按钮，完成图层样式的设置，设置该图层的“填充”为70%，效果如图2-29所示。使有相同的方法，为“圆角矩形1”图层添加相同的图层样式，完成该图标的绘制，效果如图2-30所示。
图2-29
图2-30
步骤09 使用相同的绘制方法，可以绘制出一系列的简约纯色图标，效果如图2-31所示。
图2-31
2.2.5 拟物化软件图标
拟物化软件图标除了能够带给用户逼真的感觉，还会带给用户华丽感。通常拟物化软件图标的效果要比真实对象更好，因为在设计图标时会对一些不和谐的内容进行美化处理，例如不均匀的颜色和阴影、不清晰的纹理等，通过处理使拟物化图标的效果看起来更加真实、细腻、美观，给人很强烈的视觉感受，如图2-32所示。
图2-32
拟物化软件图标具有很高的易识别性，在设计过程中需要注意以下几个要求：
① 确定一种风格
对于拟物化图标也可以添加特殊的风格，使图标效果看起来更一致，但是添加的特效不宜太多，适可而止，否则将失去图标原有的意境。
② 保持最小元素
创建图标时，首先要使其应用含义明确且容易被理解。保持绘制对象的最小元素，除了可以使图标效果更加真实，还有助于用户理解图标的含义。
③ 坚持简单
图标作为软件界面中的重要元素，风格要和软件界面的风格保持一致，所以设计时不要花费大量的时间在图标的标新立异上，充分借鉴软件界面特征的同时，也可以增加一些出色的设计。
④ 分步制作
拟物化图标的设计过程一般都比较烦琐，建议用户分阶段进行设计制作，这样可以避免由于图标效果未能达到要求而需要修改时浪费大量的时间。
⑤ 适当夸张
一个逼真的拟物化图标固然好，但也可以通过适当的夸张将图标需要表现的含义更清晰地表现出来，增强图标的隐喻效果。
【自测3】绘制扁平化天气图标
视频：光盘\视频\第2章\扁平化天气图标.swf
源文件：光盘\源文件\第2章\扁平化天气图标.psd
案例分析
案例特点：本案例制作一个精美的扁平化天气图标，通过绘制基本图形来构成扁平化图标效果，最后为图标添加长阴影效果。
制作思路与要点：使用矢量绘图工具绘制基本的图形，注意使用绘制路径的方法来绘制出白云和太阳的图形效果，并为图形添加相应的图层样式，使图标效果看起来更加具有质感。
色彩分析
这款图标使用蓝色作为背景色，使用物体的固有色来表现天气图形，体现出真实感，更容易使人理解。
制作步骤
步骤01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-90所示。设置“前景色”为RGB（96,60,85），为画布填充前景色，如图2-91所示。
图2-90
图2-91
步骤02 使用“椭圆工具”，在选项栏上设置“工具模式”为“形状”，在画布中绘制一个正圆形，如图2-92所示。为“椭圆1”图层添加“渐变叠加”图层样式，在弹出的对话框中对相关选项进行设置，如图2-93所示。
图2-92
图2-93
步骤03 继续为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-94所示。继续为该图层添加“投影”图层样式，对相关选项进行设置，如图2-95所示。
图2-94
步骤04 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，可以看到图形的效果，如图2-96所示。使用“椭圆工具”，在画布中绘制一个白色的正圆形，如图2-97所示。
图2-95
图2-96
图2-97
步骤05 使用“椭圆工具”，在选项栏上设置“路径操作”为“合并形状”，在画布中绘制正圆形与前一个正圆形相加，如图2-98所示。使用相同的方法，可以再绘制几个正圆形和一个矩形进行形状相加，得到需要的图形，如图2-99所示。
图2-98
图2-99
步骤06 设置“椭圆2”图层的“混合模式”为“柔光”，图形的效果如图2-100所示。复制“椭圆2”图层得到“椭圆2 拷贝”图层，将复制得到的图形等比例缩小，调整到合适的位置并进行水平翻转操作，效果如图2-101所示。
图2-100
图2-101
步骤07 新建名称为“太阳”的图层组，使用“多边形工具”，在选项栏上设置“填充”为RGB （209,142,20）、“边”为12，单击“设置”按钮，在弹出的面板中选中“星形”复选框，设置“缩进边依据”为20%，如图2-102所示。在画布中拖动鼠标绘制一个多角星形，如图2-103所示。
图2-102
图2-103
提示
使用“多边形工具”绘制多边形和星形时，只有在“多边形选项”面板中选中“星形”复选框后，才可以对“缩进边依据”和“平滑缩进”选项进行设置。在默认情况下，“星形”复选框不被选中。
步骤08 按快捷键Ctrl+T，将所绘制的多角星形进行适当的旋转，如图2-104所示。复制“多边形1”图层得到“多边形1 拷贝”图层，为复制得到的图层添加“内阴影”图层样式，对相关选项进行设置，如图2-105所示。
图2-104
图2-105
步骤09 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-106所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，将复制得到的多角星形向上移动一些，如图2-107所示。
图2-106
图2-107
步骤10 使用“钢笔工具”，在选项栏上设置“工具模式”为“形状”、“填充”为RGB（255,223, 150），在画布中绘制形状图形，如图2-108所示。为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-109所示。
图2-108
步骤11 单击“确定”按钮，完成“渐变叠加”图层样式的添加，设置该图层的“不透明度”为20%，效果如图2-110所示。为该图层添加图层蒙版，使用“画笔工具”，设置“前景色”为黑色，在蒙版中进行适当的涂抹处理，效果如图2-111所示。
图2-109
图2-110
图2-111
步骤12 将“形状1”图层复制多次，分别调整其中的图形至合适的位置并进行旋转处理，效果如图2-112所示。使用“椭圆工具”，在选项栏上设置“填充”为RGB（255,180,60），在画布中绘制一个正圆形，如图2-113所示。
图2-112
图2-113
步骤13 为该图层添加“描边”图层样式，对相关选项进行设置，如图2-114所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-115所示。
图2-114
图2-115
步骤14 使用“椭圆工具”，在选项栏上设置“填充”为RGB（255,221,145），在画布中绘制一个正圆形，如图2-116所示。使用“椭圆工具”，在选项栏上设置“路径操作”为“减去顶层形状”，在刚绘制的正圆形上减去相应的正圆形，得到需要的图形，如图2-117所示。
图2-116
图2-117
步骤15 为“椭圆4”图层添加图层蒙版，使用“画笔工具”，设置“前景色”为黑色，在蒙版中进行涂抹处理，效果如图2-118所示。使用相同的方法，可以绘制出相似的图形，如图2-119所示。
图2-118
图2-119
步骤16 在“太阳”图层组上方新建名称为“白云”的图层组，使用前面所介绍的绘制方法，可以绘制出白云的图形效果，如图2-120所示。同时选中“太阳”和“白云”图层组，复制这两个图层组，并将复制得到的图层组合并，将合并得到的图层组移至“太阳”图层组下方，载入该图层选区，如图2-121所示。
图2-120
步骤17 为选区填充颜色RGB（25,121,149），取消选区，执行“滤镜>模糊>动感模糊”命令，弹出“动感模糊”对话框，具体设置如图2-122所示。单击“确定”按钮，将该图层中的图形向右下方稍移动一些，效果如图2-123所示。
图2-121
图2-122
图2-123
提示
为图像应用“动感模糊”滤镜，可以根据制作效果的需要沿指定方向、指定的强度来模糊图像，形成残影的效果。
步骤18 使用“钢笔工具”，在选项栏上设置“填充”为RGB（25,113,159），在画布中绘制形状图形，如图2-124所示。为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-125所示。
图2-124
图2-125
步骤19 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-126所示。将该图层调整至“白云 拷贝”图层的下方，并设置该图层的“填充”为25%，完成长阴影效果的绘制，如图2-127所示。
图2-126
图2-127
提示
长阴影是扁平化设计风格中非常重要的表现方式之一，通过为图标或设计元素添加长阴影的效果，可以使扁平化图标更具有层效感，视觉效果也更加突出。
步骤20 使用相同的方法，还可以为整个图标添加长阴影效果，如图2-128所示。掌握了扁平化图标的绘制后，使用相同的绘制方法，还可以设计出其他的扁平化图标效果，如图2-129所示。
图2-128
图2-129
2.2.7 软件按钮
简单精致的软件按钮在软件界面设计中比较常见，也是最常用到的设计，它必须在很小的范围内有序地排列字体和图标，以及合理地进行颜色的搭配等。在设计制作过程中，要考虑到用户的视觉感受，不需要过于花哨，设计应该简单明了，重点突出按钮的功能。
按钮与图标非常类似，但又有所不同，图标着重表现图形的视觉效果，而按钮则着重表现其功能性。在按钮的设计中通常采用简单直观的图形，充分表现按钮的可识别性和实用性，如图2-130所示。
图2-130
【自测4】绘制精美软件按钮
视频：光盘\视频\第2章\精美软件按钮.swf
源文件：光盘\源文件\第2章\精美软件按钮.psd
案例分析
案例特点：本案例制作了一款软件按钮在3种不同状态下的效果，通过图层样式表现出按钮的效果。
制作思路与要点：绘制出按钮的圆形轮廓，通过添加图层样式的方式，表现出按钮的高光和阴影效果，使用基本图形来构成按钮上的图标效果，简洁明了。在绘制过程中注意表现出3种不同状态下的按钮效果。
色彩分析
在本案例按钮的绘制中，主要使用不同明度的灰色进行搭配，使用灰色可以很好地表现出图标的质感，在3种不同的状态下，运用不同的颜色设计按钮的功能图标，从而区别按钮的当前状态，具有很好的识别性。
制作步骤
步骤01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-131所示。使用“渐变工具”，设置从RGB（49,54,60）到RGB（34,37,41）的颜色渐变，在画布中拖动鼠标填充径向渐变，效果如图2-132所示。
图2-131
图2-132
步骤02 新建名称为“默认状态”的图层组，使用“椭圆工具”，在选项栏上设置“工具模式”为“形状”、“填充”为RGB（39,44,51），在画布中绘制一个正圆形，如图2-133所示。为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-134所示。
图2-133
图2-134
步骤03 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-135所示。复制“椭圆1”图层得到“椭圆1 拷贝”图层，将复制得到的正圆形等比例缩小，如图2-136所示。
图2-135
图2-136
提示
选择需要进行变换操作的图形，按快捷键Ctrl+T或执行“编辑>变换>缩放”命令，可以在图形上显示变换框，按住Shift键拖动变换控制点，可以以变换中心点为中心对图形进行等比例缩放操作，缩放完成后，按Enter键，可以确认对图像的缩放操作。
步骤04 双击“椭圆1 拷贝”图层，修改为该图层添加的“渐变叠加”图层样式，对相关选项进行设置，如图2-137所示。继续添加“外发光”图层样式，对相关选项进行设置，如图2-138所示。
图2-137
步骤05 继续添加“投影”图层样式，对相关选项进行设置，如图2-139所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-140所示。
图2-138
图2-139
步骤06 复制“椭圆1 拷贝”图层得到“椭圆1拷贝2”图层，清除该图层的图层样式，双击该图层缩览图，设置填充颜色为白色，如图2-141所示。为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-142所示。
图2-140
图2-141
图2-142
提示
如果需要清除为图层所添加的图层样式，可以在该图层上单击鼠标右键，在弹出的快捷菜单中选择“清除图层样式”命令，即可一次清除为该图层所添加的所有图层样式。如果需要删除该图层中多个图层样式中的某一个，可以将需要删除的图层样式拖动至“图层”面板上的“删除”按钮上。
步骤07 单击“确定”按钮，设置该图层的“填充”为0%、“不透明度”为20%，效果如图2-143所示。复制“椭圆1 拷贝2”图层，得到“椭圆1拷贝3”图层，将该图层的“不透明度”设置为100%，如图2-144所示。
图2-143
图2-144
步骤08 双击该图层，弹出“图层样式”对话框，对“渐变叠加”图层样式进行修改，如图2-145所示。继续添加“内发光”图层样式，对相关选项进行设置，如图2-146所示。
图2-145
图2-146
步骤09 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-147所示。复制“椭圆1 拷贝3”图层，得到“椭圆1拷贝4”图层，将该图层的图层样式清除，双击该图层，弹出“图层样式”对话框，添加“内阴影”图层样式，对相关选项进行设置，如图2-148所示。
图2-147
步骤10 继续添加“内发光”图层样式，对相关选项进行设置，如图2-149所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-150所示。
图2-148
图2-149
图2-150
提示
此处为多个正圆形分别添加相应的图层样式，通过图层样式的设置制作出按钮的层次感和立体感，表现出按钮的高光和凹凸视觉效果，这也是圆形按钮中常用的一种层次感的表现方法。
步骤11 使用相同的制作方法，可以绘制出相似的图形并添加相应的图层样式设置，效果如图2-151所示。使用“椭圆工具”和“圆角矩形工具”，结合“路径操作”选项的设置，可以绘制出按钮上小图标的效果，完成默认状态下按钮效果的绘制，如图2-152所示。
图2-151
图2-152
步骤12 复制“默认状态”图层组，将复制得到的图层组重命名为“经过状态”，并将该图层组中的图形整体向右移动，如图2-153所示。双击“经过状态”图层组中的“椭圆3”图层，弹出“图层样式”对话框，添加“颜色叠加”图层样式，对相关选项进行设置，如图2-154所示。
图2-153
图2-154
步骤13 继续添加“外发光”图层样式，对相关选项进行设置，如图2-155所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-156所示。
图2-155
图2-156
步骤14 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，完成鼠标经过状态下按钮效果的绘制，如图2-157所示。使用相同的制作方法，还可以制作出按钮在按下状态时的效果，如图2-158所示。
图2-157
图2-158