实战练习01　制作扁平化按钮

视　频：资源包\视频\第2章\2-4-1.mp4

源文件：资源包\源文件\第2章\2-4-1.psd

●案例分析

本案例是设计制作一款扁平化风格的按钮，配色方案是用大面积的中性色搭配少量的黄色、红色、绿色和蓝色，使整个按钮看起来简单大方。按钮的设计摒弃了大量的阴影和高光，选择少量发光元素凸显按钮的外形，而圆形的外观设计沿用了之前的设计理念，使大众在看到图形的瞬间就知道它是按钮，案例的完成效果如图2-23所示。

●制作步骤

01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-24所示。使用“渐变工具”在画布上拖动鼠标填充从RGB（237、243、246）到RGB（181、190、195）的线性渐变，效果如图2-25所示。

02 执行“视图>新建参考线”命令，弹出“新建参考线”对话框，在对话框中设置参数，如图2-26所示。使用相同方法再次创建参考线，完成后的画布效果如图2-27所示。

03 使用“椭圆工具”在画布中心绘制形状，形状属性如图2-28所示。绘制完成后，形状的图像效果如图2-29所示。

04 双击形状图层缩览图，打开“图层样式”对话框，选择“投影”选项进行相应设置，如图2-30所示。设置完成后，单击“确定”按钮，图像效果如图2-31所示。

05 复制“椭圆1”图层并清除图层样式，将“路径操作”更改为“减去顶层形状”选项后，继续使用“椭圆工具”绘制一个720px×720px的椭圆形状，如图2-32所示。使用“路径选择工具”调整形状位置，如图2-33所示。

提示

使用“形状工具”在画布中绘制形状时，可以首先在画布中单击，然后在弹出的“创建形状”对话框中设置形状的大小、半径值和边数等参数，设置完成后，单击对话框中的“确定”按钮，即可完成形状的绘制。但是这样创建的形状往往会出现在画布的任意位置，像图2-31 中的椭圆形一样，需要调整形状的位置。

06 双击形状图层缩览图，打开“图层样式”对话框，选择“斜面和浮雕”选项进行相应设置，如图2-34所示。设置完成后继续选择“描边”选项，设置具体参数，如图2-35所示。

07 图层样式设置完成后，单击“确定”按钮，图像效果如图2-36所示。打开“图层”面板，选择除“背景”图层以外的两个形状图层，使用快捷键【Ctrl+G】将其编组，“图层”面板如图2-37所示。

08 使用“椭圆工具”绘制一个颜色为RGB（41、41、41）的形状，为图层添加“渐变叠加”图层样式，如图2-38所示。执行“文件>打开”命令，将素材图像“24101.png”拖曳到设计文档中，并摆放到合适位置，如图2-39所示。

09 执行“文件>打开”命令，将素材图像“24101.png”拖曳到设计文档中，并摆放到合适位置，如图2-40所示。新建一个30px×30px的透明文档，在画布中填充颜色，如图2-41所示。执行“编辑>定义图案”命令，保存图案。

10 双击形状图层缩览图，打开“图层样式”对话框，选择“颜色叠加”选项进行相应设置，如图2-42所示。设置完成后继续选择“图案叠加”选项，设置具体参数如图2-43所示。

11 设置完成后单击“确定”按钮，图像效果如图2-44所示。打开“字符”面板，设置参数如图所示。使用“横排文字工具”在画布中输入符号，符号颜色为RGB（223、223、223），如图2-45所示。

12 双击形状图层缩览图，打开“图层样式”对话框，选择“描边”选项进行相应设置，如图2-46所示。设置完成后继续选择“外发光”选项，设置具体参数，如图2-47所示。

13 打开“图层”面板，选中相关图层将其编组，并重命名为“面”，如图2-48所示。完成整个按钮的绘制后，图像效果如图2-49所示。

14 打开“图层”面板，隐藏“背景”图层，执行“图像>裁切”命令，弹出“裁切”对话框后设置参数，如图2-50所示。执行“文件>导出>导出为”命令，弹出“导出为”对话框，参数设置如图2-51所示。

15 设置完成后，单击“全部导出”按钮，在弹出的对话框中选择存储切图的文件夹。文件导出后，图像效果如图2-52所示。

知识链接

按钮和图标的切图输出

1.切图尺寸必须为双数，是为了保证切图图片在工程师开发时高清显示。因为1px 是智能设备能够识别的最小单位，换句话说就是1px 不能在智能设备上被分为两份。

2.图标和按钮的切图输出应根据标准尺寸输出并且要考虑到手机适配，为了适配大分辨率的手机（如iPhone X），图标和按钮在切图时需要输出@2x 和@3x 的切图。

3.为了提升App 的运行速度，要尽量减小图片文件大小。如果切图文件比较大，不利于用户在使用UI 界面过程中加载页面，因此切图时要尽量压缩图片文件的大小。

4.要把可点击部件的相关状态都切图输出，比如正常状态、点击状态。在切图过程中不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图。

2.4.2　UI界面中的图标

图标是一种小的可视控件，是软件UI界面设计中的指示路牌，以最便捷、简单的方式指引浏览者获取其想要的信息资源。图标是具有明确指代含义的计算机图形，其中，操作系统桌面图标是软件或快捷操作方式的标识，界面中的图标是软件或应用的某种功能的标识。

图标在软件界面中无处不在，是软件UI界面设计中非常重要的设计元素。随着科技的发展、社会的进步，人们对美、时尚、趣味和质感的不断追求，图标设计呈现出百花齐放的局面，越来越多精致、新颖、富有创造力和人性化的图标涌入浏览者的视野。但是，图标设计不仅要精美、富有质感，更重要的是具有良好的可用性，如图2-53所示。

提示

好的图标设计不仅要精美，具有可识别性、独特性，而且要具有实用性，所以好的图标设计具有以下几个特点：多样性、艺术性、准确性、实用性和持久性。

2.4.3　图标的设计原则

界面设计的未来方向是简洁、易用和高效，精美的扁平化设计往往起到画龙点睛的作用，从而提升设计的视觉效果。现在，图标的设计越来越新颖，扁平化图标设计的核心思想是要尽可能地发挥图标的优点：比文字直观、漂亮，并在该基础上尽可能使简洁、清晰、美观的图形表达出图标的意义。

●可识别性原则

可识别性是图标设计的首要原则，具体是指设计的图标要能够准确地表达相应的操作，让浏览者一眼看到就能明白该图标要表达的意思。例如：道路上的图标，可识别性强、直观、简单，即使不识字的人，也能立即了解图标的含义，如图2-54所示。

●差异性原则

这也是图标设计的重要原则之一，同时也是容易被设计者忽略的一条原则。只有图标之间有差异，才能被浏览者关注，从而对设计内容留有印象，否则图标设计就是失败的，如图2-55所示。

●实用性原则

在软件界面中，我们经常会看到一些系统操作小图标。这些系统操作小图标的设计虽然简单，却很实用。通常，软件界面不需要精度很高、尺寸很大的图标，并且这些图标要有差异性、可识别性，并且风格要保持统一，如图2-56所示。

●与环境协调原则

任何图标或设计都不可能脱离环境而独立存在，图标最终要放在软件界面中才会起作用。因此，图标的设计要考虑图标所处的环境，才能更好地为设计服务，如图2-57所示。

●视觉效果原则

图标设计追求视觉效果，一定要在保证差异性、可识别性和协调性原则的基础上，先满足其基本的功能需求，然后考虑更高层次的需求——视觉需求。如图2-58所示为视觉效果出众的软件图标。

●创造性原则

随着时代的发展和人们审美的提高，图标的设计层出不穷，要想让浏览者注意到设计的内容，只有在保证图标实用性的基础上，提高图标的创造性，才能给浏览者留下深刻的印象。如图2-59所示为具有创造性的图标，很容易让浏览者印象深刻。

2.4.4　图标的常用格式

图标也称“icon”，广泛应用于程序标志、数据标志、命令选择、模式信号或切换开关、状态指示等，图标有助于用户快速执行命令或打开程序文件。一个图标就是一套相似的图片，每一张图片有不同的格式，图标包含透明区域，在透明区域内可以透出图标下的背景。因为操作系统和显示设备的多样性，导致了图标格式也要具有多样性。图标的常见格式如表2-1所示。

2.4.5　拟物化风格图标

拟物化软件图标除了能够给用户带来逼真的感觉，还会带给用户华丽感。通常拟物化软件图标的效果要比真实对象更好，因为在设计图标时会将一些不和谐的内容进行美化处理，如不均匀的颜色和阴影、不清晰的纹理等，通过处理使拟物化图标看起来更加真实、细腻、美观，给人很强烈的视觉感受，如图2-60所示。

拟物化软件图标具有很高的识别性，在设计过程中需要注意以下几个要求∶

●确定一种风格

对于拟物化图标也可以添加特殊的风格，使图标效果看起来更一致，但是添加的特效不宜太多，适可而止，否则将失去图标原有的意境。

●保持最小元素

创建图标时，首先要使其含义明确且容易被理解。保持绘制对象的最小元素，除了可以使图标效果更加真实，还有助于用户理解图标的含义。

●坚持简单

图标作为软件界面中重要的元素，风格要与软件界面的风格保持一致，所以设计时不要花费大量的时间在图标的标新立异上，充分延续软件界面特征的同时增加一些出色的设计。

●分步制作

拟物化图标的设计过程一般都比较烦琐，建议用户分阶段进行设计制作，这样可以避免由于图标效果未能达到要求需要修改，从而浪费大量的时间。

●适当夸张

一个逼真的拟物化图标固然好，但也可以通过适当夸张将其需要表现的含义更清晰地表现出来，增强图标的隐喻。