在UI设计中，图标并不是孤立存在的。我们学习图标设计不是为了画一套图然后上传到设计平台去分享或者求好评，而是要在真实的项目中发挥作用。如果不了解将图标应用到项目中的知识点，那么在项目设计过程中就会失去真正的图标设计水平。一组应用程序中的图标规范图标是应用程序不可或缺的组成部分，在应用程序界面中随处可见。也因为图标的通用性，我们往往需要在一个应用中套用多套图标，这与崇尚简洁的印象背道而驰。很多新手认为我们只需要设计一套大而全的图标，然后提取到项目中即可。但是有很多场景只使用一种图标类型效果不佳。比如下面的淘宝设置页面，前后包含了6个以上的图标。太复杂了，但是如果我们把所有的图标都换成同一套呢？可以看到，右边替换后的case效果很不理想。交互规则说：非必要不加实体，但对于图标的使用，这是必须的。应用中的图标规格不同，可以按大小和样式两个属性来划分。1.图标的尺寸是图标的尺寸规格。有些界面元素权重低，图标尺寸小，有些元素权重高，反之亦然。例如在AppleMusic的播放界面中，播放和快进等按钮作为页面最重要的按钮，尺寸非常大，其次是其他可点击的图标，表示音量的两个按钮最小.确定图标大小是我们在项目中做图标设计的事情之一。但是尺寸的确定也不是凭空做出来的。我们首先要构建实际的“场景”进行分析，即先完成界面的高保真原型或交互原型。下面是我自己做的原型演示。建好这样一个页面后，我会在prototype中查看我一共使用了多少个iconsizes，它们会应用在哪些场景，然后整理出来。如果有一些不需要的，可以将它们调整并组合成一个尺寸。所以，在这种情况下，我整理了4种尺寸的图标：48pt：类别和快速入口的大图标32pt：底部的TabBar图标24pt：常规工具图标16pt：小提示图标在设计上有一个明确的设计方向。再回顾一下，为什么我们要先尺寸再设计，而不是统一设计一套大图标再缩小。由于图标必须尽可能满足像素对齐的要求，因此缩小后的图标往往会出现错位、模糊、细节丢失等问题。另外，从一开始就在大画布上设计图标和在小画布上设计图标，过程中获得的视觉反馈是完全不同的。当图标首先绘制在大画布上，然后缩小到16pt或12pt规格时，往往会有所不同。显得太复杂，或者笔画太粗。2.图标样式确定图标大小后，接下来就是确定图标样式了。和size一样，我们要应用什么风格的icon，需要在已经有可视化原型的页面上通过对比来确定，不能提前开始设计。在我的设计过程中，我通常在开始设计之前将图标放在项目的末尾。原因是图标的视觉风格取决于位置和环境。就是“先界面风格，后图标风格”。.一般情况下，如果一个应用中有多组图标，那么普通的中小尺寸图标可以使用一般的线性或多面体风格。在分类、快速入口等装饰性、大尺寸类型中，应采用一些比较激进的设计风格。例如下图是58同城客户端应用图标的案例：通常，一个样式会应用到一个“分类”图标上。上面的情况是一种理想状态，一个类别的图标对应一个尺寸，但是在一些更复杂的环境中，同样的尺寸往往包含不同类别的图标。不同的状态图标在一个产品中，图标除了作为装饰品之外，通常还可以作为按钮使用。每个应用中都有大量的图标可以点击交互，比如底部导航栏、头部的消息图标、发布图标等等。当一个图标可以被操作时，我们需要注意它的状态变化。以导航栏图标为例，正常的选中状态是改变颜色，但越来越多的应用会在选中状态下采用不同的设计风格，通过更丰富的风格表现来提高可视性。比如淘宝、QQ的底部导航栏。另外，控件中包含的一些图标也会随着控件状态的变化而变化。比如账号输入框，如果输入框被选中，那么图标的颜色也会发生变化。如果输入框当前被禁用，图标将相应地变灰。一个合格的UI设计师会充分考虑图标变换的各种状态，在提交开发时会提供详细的描述和分类。并且，充分利用Sketch等软件中的组件功能，提高项目的效率和产出。图标的标注和裁剪当我们完成了界面和图标的设计后，我们需要将我们的设计提交给开发者。其中，包括了我们的注释和抠图。抛开其他的设计元素不谈，我们来说说裁剪图标时需要遵循的标准。它和字体是这个过程中最容易出错的地方。上一章我们已经提到了应用程序图标的导出，所以下面会给出工具图标的说明。1.图标的边界我们将回到第2章中工具图标的规范。当我们确定图标的大小时，我们不应该将图形设计为完全适合大小，而是使用网格系统来定义它们的大小。在这个过程中很多新手都会有疑惑，所以在标注的过程中，我们标注的是图形到其他元素的距离，或者说图标的轮廓到其他图形的距离。实际上，图标的距离是根据外轮廓来计算的。虽然这个大纲是我们肉眼看不见的，但是它所包含的内在规律可以帮助我们忽略一些不必要的小问题。因此，要使标注有效，一定不能偷懒，只在画布中放置图标，不要透明矩形背景。2、图标画布现在有很多协同工具可以帮助我们标注和切图，比如BlueLake、Zeplin等，只要我们上传设计稿，程序员就可以自己获取图标对应的切图.对于裁剪一些特定的元素非常有用，但是通过在线页面导出图标的方法非常不可靠。我们说过，一个应用程序中可能会出现各种规格的图标，所以合理的图标抠图应该根据不同的规格导出整理（如下图），而不是让程序员从网上工具下载，这样不仅操作难度大，图标之间的不同状态不易获取。所以在项目设计的过程中，需要制作不同规格的画布（Symbol），并进行分类排列，这样不仅有利于我们以后调用图标，也方便导出切图在批次到相应的文件夹。3、图标的命名涉及到切图的导出，所以不得不提一下图标命名的标准。之前写过一篇关于命名的文章，里面比较详细的提到了图标的命名方法。你可以扩展它。阅读：《万字干货!可能是最全面的UI 设计师文件命名规范》。下面简单说一下图标的命名规则。很多刚入职场的小白和UI设计师都会强调图标一定要用英文命名，各种常见的英文命名词汇收集起来。首先，我想指出，这种做法是错误的。因为涉及到整个应用的图标系统，会有大量的图标带有“抽象”的意味。比如我上面的案例，有一个启动图标，中文名字叫“中二”，那么这个词应该怎么翻译呢？即使不受英语水平的限制，你写的英文也不代表开发者能看懂。大量抽象词的积累，使得命名无法成为有效的索引条件，因为没有人能看懂，而开发需要找图标时，还是用缩略图代替名称。因此，如果内部没有具体的命名规范，或者程序员没有特殊要求，我推荐使用中文命名系统，因为国内大部分程序员的习惯是对获取的图标进行重命名。命名格式可分为3个级别。格式大致为："Module_Name_Status@1x"，比如下面这个案例：Setting_Wallet_Highlight@1x.pngDynamic_Comment_Default@1x.pngLogin_Button_Click@2x.png当然我们可以根据实际场景自由调整，但是大家还是要保持请记住，图标的命名是为了方便我们搜索和检索。图标Symbol的命名要与图标的命名保持一致，这样才能达到事半功倍的效果。4.图标格式上一章的启动图标导出格式会根据不同的设备和场景导出不同的大小，这里会用到PNG格式。别着急，虽然工具图标也面临不同设备的问题，但它不需要导出那么多规格。下面说一下这两个图标的导出类型。位图格式最常用的导出格式是位图PNG格式。因为显示倍率不同，我们需要导出1x、2x、3x三种倍率规格的图片。即如果设计一个16pt的图标，我们需要导出16pt、32pt、48pt三种尺寸。并在导出的文件名后缀上标有@1x、@2x、@3x。此规范对iOS和Android都是通用的。虽然有3x以上的设备，但那些设备只需要调用3x规范即可。虽然后面会提到图标可以导出为矢量格式，但是对于使用渐变、投影或拟物化风格的图标，必须使用位图格式，否则无法完整记录图形的细节元素。以矢量格式导出3种尺寸的图标很麻烦，而且位图通常会占用大量空间。所以，为了优化这个问题，iOS和Android在之前的系统更新中都默认支持矢量格式抠图文件：iOS使用PDF1x抠图Android使用SVG1x抠图当然，如果你使用矢量格式导出，那么记得对文件夹进行排序时，请将iOS和Android分开，不要混在一起。最后，相信这是全网最全最详细的图标教程了。希望大家有所收获，掌握入门图标设计的正确姿势。
