组应用程序中的图标规范

图标是应用程序不可或缺的一部分，可以在应用程序界面的任何位置找到。另外，由于图标的通用性，我们经常需要在一个应用程序中应用多组图标，这与简单的第一印象相反。

许多新人认为我们只需要设计一个大而完整的图标，可以在项目中提取。但是有很多场景，如果你只使用一种类型的图标，效果将非常糟糕。

1.图标的大小

大小是图标的大小规格。某些元素的元素权重较低，图标大小较小。一些重量更高。例如，在Apple Music的播放界面中，快进等按钮用作页面上最重要的按钮，尺寸非常大，其他可点击的图标为秒，两个按钮表示音量是最小的。

确定图标大小是我们在图标设计项目中做的第一件事。但是，尺寸的确定不是凭空而来的。我们必须首先构建实际的“场景”进行分析，即完成界面的高保真原型或交互式原型。

2.图标的样式

确认图标大小后，以下是确认图标的样式。与尺寸一样，我们想要应用的图标样式需要在已经具有可视原型的页面中进行比较，并且设计无法提前启动。

在我的设计过程中，我通常将图标放在项目的最后并开始设计。原因是图标的视觉风格取决于位置和环境。它是“第一个界面风格，然后是图标风格”。

在正常情况下，如果应用程序中有多组图标，则正常的中小尺寸图标可以使用一般线性或面部样式。在类别为 的快速输入中，它具有装饰性的 大小，您应该使用一些更激进的设计风格。

图标的不同状态

产品中的图标除了用作装饰外，通常可用作按钮。每个应用程序都有大量用于单击和交互的图标，例如底部导航栏，头部消息图标 等。

当一个图标可以被操纵时，我们需要注意它的状态变化。例如，从导航栏图标，常规选择状态是更改颜色，但越来越多的应用程序将在选定状态下采用不同的设计样式，并通过更丰富的样式性能增强可见性。

此外，控件中包含的某些图标将随控件状态的变化而变化。例如，在帐户输入框中，如果选择了输入框，则图标的颜色也会更改。如果输入框当前处于无法启用状态，则图标也将显示为灰色。合格的UI设计人员将考虑图标更改的各种状态，并在提交给开发过程时提供 分类的详细说明。并且，充分利用Sketch等软件中的组件功能，以提高项目效率和最终输出。

图标标签和切割

完成界面和图标的设计后，我们会将设计提交给开发人员。其中，我们包括我们的注释和切割表。无论其他设计元素如何，让我们来谈谈图标剪切需要遵循的规范，并且字体在此过程中最容易出错。

应用程序图标的导出已在前一章中提及，因此以下主要基于工具图标的说明。

1.图标的边框

我们将回到第2章中工具图标的规范。当我们确定图标的大小时，我们不希望设计图形以适应大小，而是使用网格系统来定义它们的大小。

许多新手会在这个过程中产生疑虑，因此在标记过程中，我们会标记图形与其他元素的距离，或者从图标轮廓到其他图形的距离。

实际上，图标的距离是基于外部轮廓计算的。虽然这个轮廓肉眼看不见，但它包含的内在规律可以帮助我们忽略不必要的小问题。

2.图标画布

有很多协作工具可以帮助我们标记和剪切，例如Blue Lake  Zeplin。只要我们上传设计草稿，程序员就可以获得与图标对应的剪切图。

削减一些特定元素非常棒，但通过在线页面导出图标的方式非常不可靠。我们说应用程序可能有多种规格的图标，因此应根据不同的规格导出合理的图标切割图并进行排序。

3.图标的名称

下面我们简要介绍一下图标的命名规则。刚刚进入职场的很多新手和UI设计师。压力图标必须以英文命名，并收集各种常见的英文命名词汇表。我必须首先指出这是错误的。

由于整个应用程序的图标系统，有很多图标意味着“抽象”。例如，在我上面的情况下，启动图标的中文名称是“Secondary”，那么该单词应该如何翻译？即使你不是英语水平，你写的英语并不意味着开发人员可以理解它，并且大量抽象词的积累最终导致命名不是一个有效的索引条件，因为没有人们可以理解，开发需要找到一个图标仍然通过缩略图而不是名称传递。

因此，如果内部没有特定的命名约定，或者程序员没有特殊要求，我建议使用中文命名系统，因为大多数国内程序员都会使用获取图标的第二个名称。

命名格式可以分为3个级别，格式大致为：“模块_名称_状态@1x”，如下例：

设置_钱包_高亮@1x.png
动态_评论_默认@1x.png
登录_按钮_点击@2x.png

当然，这不是唯一准确的命名方法。我们可以根据实际场景进行调整，但我们必须记住，图标的名称是为了方便我们的搜索 

最后，图标符号的命名必须与图标的命名一致，以便用一半的努力获得两倍的结果。

4.图标格式

上一章中启动图标的导出格式将根据不同的设备 场景导出不同的大小，并使用PNG格式。不用担心，工具图标与设备不同，但您不需要导出这么多规格。我们来谈谈这两个图标的导出类型。

位图格式最常用的导出格式是位图PNG格式。因为显示器显示不同的放大倍率，我们要输出1x  2x  3x三倍放大规格。如果我们设计16pt图标，我们需要输出16pt  32pt  48pt。三种尺寸。导出文件名的标签标有@ 1x  @ 2x  @ 3x。

此规范对iOS和Android都很常见。虽然有超过3x的设备，但这些设备只需要调用3x规格。

虽然稍后将以矢量格式导出图标，但对于使用渐变 投影或工件样式的位图，必须使用位图的格式，否则无法完整记录图形的细节。

矢量格式

导出3种类型的图标很麻烦，位图往往会占用大量空间。因此，为了优化此问题，iOS和Android在以前的系统更新中默认支持矢量格式剪切文件：

1x使用PDF剪切iOS图像

Android使用SVG的1x剪切图表

当然，如果您使用矢量格式导出，请记住在排序文件夹时单独保存iOS和Android，而不是将它们混合在一起。

结束

我相信这是整个网络上最完整，最详细的图标教学。我希望你能获得一些东西并掌握入门图标设计的正确姿势。