UI 速查表：图标分类 + 图标样式参考指南（上）

UI 速查表：图标分类 + 图标样式参考指南（上）

编者按：在UI设计的领域，图标的使用几乎是不可或缺的。然而，尽管图标如此普遍，人们在对其进行分类时却常常感到困惑。为此，设计师Tess Gadd提出了一个层次化的分类方法，她建议首先根据图标的大小进行划分，接着按照类别进行分类，最后再根据构成要素进行细致的区分。在她的建议中，不仅有详细的应用指导，还提供了大量的实例，这些内容对于设计师们来说，无疑是一份宝贵的参考手册。该文章于Medium平台发布，其标题为“UI速查表：图标类别及图标风格参考指南”。由于篇幅限制，我们将其分为两个部分进行连载，现在呈现的是第一部分内容。

图标的品质上乘，无人能出其右。我对图标的青睐程度与对按钮的喜爱相当。然而，图标存在的问题之一在于我们往往不知从何谈起。尤其是对于那些缺乏图形设计背景的人来说图标大全 设计，这一点尤为棘手。

因此，我所编制的这份快速查阅指南，其核心宗旨在于协助我们共同建立起对各类图标、它们所属的类别以及具体样式的共识。图标分类并非一门精确的科学，然而，这正是我对如何实现这一目标所提出的阐释或建议。

在本速查表中，我们将介绍：

Ico样式参考：

1.定义图标类别

图标样式的划分方式众多，可依据主题、色彩搭配、尺寸大小、年代归属、制作手段、文化内涵以及审美标准等多个维度进行区分。然而，在图标分类过程中，一个显著的问题便是大量图标存在重复现象，且缺乏明显的独特性。

下面的图标看起来简单，但从技术上讲，就可以分为几个类别。

好的，首先，我们需要探讨一个关键问题：“它究竟归属何类？”在给出答案之前，不妨先观察其他网站是如何进行分类的。

然而，遗憾的是，这些分类对我而言并不适用。图标既可以是三维的、色彩丰富的，也可以是手绘风格、线条勾勒的，亦或是锐利清晰的字符图案等。

我的处理方式是构建一个分层的分类体系。首先，需要依据图标的大小（如大图标与小图标）进行区分图标大全 设计，接着再根据不同的类别进行划分（例如图像字符、轮廓、填充、彩色形状、拟物等），最后再按照构成要素进行细分（如阴影、容器、3D效果、手绘等）。通过这种方式，可以确保在较高层次上避免重复，同时又在最低层次上允许一定的重叠。

这幅图展示了两大类别，分别是大类别和小类别，紧接着是大类别中的具体分类，包括字形、线条、实心轮廓、彩色形状以及拟形，最后则是成分部分，涵盖了标准、容器、渐变、等距、手绘、阴影以及其他。

您所设计的图标尺寸需根据其使用场景来决定。那些拥有炫目渐变效果和阴影的时尚图标虽然视觉效果出众，但当它们置于16像素的文本标签旁时，却无法发挥出预期的功能。

我更倾向于将“大图标”与“小图标”区分开来，二者各自拥有独特的用途，尽管有时它们的功能会有所交集。小图标通常被用于用户界面控件中，既能够实现功能性的需求，也能增添一定的装饰效果。而大图标则通常以图形形式展示服务或功能，同时还能作为品牌标识的一部分，从而使得平台在视觉美感上更具吸引力。

区分大小图标没有明确的界限，但我一般以40px为分界线。

一旦我们明确了所需的图标是“大图标”还是“小图标”，便可以将其进一步划分为不同的图标类别：

图标类别：字形、线条、填充轮廓、彩色形状、拟物。

初看似乎颇为简易，然而采取此法的一大优势在于能够避免内容重复。彩色图案的图标不可嵌入文字形状之中，同样，填充轮廓的图形也不宜置于拟物化图案之内。

就像油和水一样，这些类别不会混在一起。

当图形尺寸较大时，我们期望图标拥有丰富的细节，以免显得单调乏味，甚至沦落为天不认可的“拼贴画”。然而，若图标尺寸较小——你几乎无需添加任何细节。

小图标尺寸较小，因而可操作的像素点数量较少。像素点的数量有限，进而限制了可呈现的元素。尽管制作出拟物风格的小图标在理论上存在可能，但实际操作中这种可能性并不大，因此我们选择将其省略。

图标分类、要素二维表示例。

若你打算制作的是较大尺寸的图标，你将拥有更广阔的天地来展现你的艺术才华。尽管制作大号图标并非不可行，但我并不推荐你采取这种方式UI 速查表：图标分类 + 图标样式参考指南（上），这样做可能会显得有些单调乏味，而且其吸引力相较于那些色彩更加丰富、细节更为繁复的其他图标类型，显然要逊色不少。

某些元素适用于各类别，而另一些则不然。某些图标设计可以融入多种元素，亦或仅限于特定设计风格中复制。再者，若细观拟物风格图标，会发现大多数元素其实都具备。

图标要素示例：标准、容器、渐变、3D、手绘、阴影等。

注：不用说，实际的要素比这里提到的要多得多。

5.小图标样式参考

人们常常觉得小图标不如大图标那样引人入胜，然而实际情况并非如此。由于可操作的空间有限，这反而促使你发挥出更多的创造力。此外，这也迫使你更加关注图标所需要表达的信息，而非仅仅关注其风格。

苏珊·卡瑞曾言，简单的图像能够展现出更广泛的适应性。

“glyph”这个术语源于古希腊语的“gluphē”，其含义可以理解为“符号”或“象形文字”。目前我们所使用的字形，或者说填充或实心图标，通常仅是色彩与实体形状的结合。这类图标即便在缩小后，形状依旧能够辨认。然而，尽管它们易于识别，却常常显得有些······乏味。若想在无需借助色彩、外形等元素的前提下，为这些图标增添几分“特色”，或许会面临一定的挑战。

5.1.1. 标准字形或实心图标

这种图标虽然外观并非最吸引人——然而其辨识度却相当高。它非常适合在界面设计中以较小的尺寸呈现，同样也适用于标志设计中较大的尺寸。

设计师注意事项：

以下为不同字形的集合示例：Material Design图标采用填充形式、Font Awesome则使用实心设计、Ionicons图标同样以填充方式呈现。

锐利的图标通常以字体、填充或实心形式呈现，然而，这类图标的特点在于其边缘的锋利。多数图标的边框半径仅为一两个像素，而锐利图标则展现出明显的硬边特征。

你之所以倾向于选用尖锐的图标而非圆润的图标，一个关键原因在于，当图标被缩小至较小的尺寸时，其清晰度会更高。通过观察下方的示例，并与前文中的案例进行对比，你将明显察觉到两者在边界半径上的区别。

设计师注意事项：

以下是一些具有鲜明锐利特征的字体集样本。例如，Material Design中的图标设计（具有锐利感），以及Ionicons（同样具有锐利的特点）。

5.1.3. 带彩色背景的字形图标

2013年，微软的Windows操作系统推出了全新的外观设计，将极简风格与字体设计相结合，并将它们置于丰富多彩的背景之中。实践证明，这一极为简便的方法显著提升了字体的亲和力和视觉吸引力。

设计师注意事项：

近期，线条或轮廓式的图标因其简洁的设计和更具现代感的视觉风格而日益受到青睐。尽管在多数情况下，人们倾向于认为字体图标在易用性上更为出色，但这并不意味着所有图标都遵循这一规律。以对话泡泡图标为例，使用线条图标来呈现可能会更加合适。

5.2.1. 小尺寸线条图标

制作小尺寸线条图标或许颇具挑战，以往我多选用字形，毕竟它更易操作且更易维持。然而，随着智能手机显示屏的日益精良，我们如今同样能够领略线条图标带来的奢华体验，即便线条图标制作得不够完美，在新iPhone上也能呈现出不错的观感。

设计师注意事项：

线条图标集合范例。采用Material Design设计的图标（以轮廓形式呈现），Feather图标，以及Ionicons图标（以填充形式展现）。

5.2.2. 双色小尺寸线条图标

在制作较小尺寸的图标时，我们必须舍弃过多的细节，转而突出简洁的图形设计。适当加入一些色彩是允许的，然而，若仅使用一种颜色，其可读性往往不尽如人意。

设计师注意事项：

展示了两款色彩搭配的迷你线条图标范例。YiğitPinrbaṣi设计的Candy Icons、Wilbur Xu创作的35款简洁线条图标，以及PixelBuddha提供的免费电子商务与导航矢量图标资源集。

5.3小尺寸填充轮廓图标

我认为轮廓图标填充是一种极具“愉悦感”的图标设计风格。然而，一旦色彩种类过多，便可能引发问题。

设计师注意事项：

以下是一些小尺寸填充图标的示例：包括Material Design的双色图标，Aha-Soft提供的16x16尺寸的免费工具栏图标，以及Sihan Liu设计的彩色天气图标。

5.4. 小尺寸彩色形状图标

在众多样式之中，从美学角度来看，这或许是我最为偏爱的设计。它们既简洁又充满智慧，那些图标蕴含着丰富的意蕴，而且通过调色板和设计风格，它们还成功地传达了鲜明的品牌形象。

极简图标在缩小尺寸后，其效果相较于其他扁平化图标类型更为显著，尽管与字体图标相比仍有所不及。然而，当这类图标应用于图形区域时，有时会显得过于细小；而用于界面时图标大全 设计UI 速查表：图标分类 + 图标样式参考指南（上），又可能显得过于庞大。我个人最偏爱的是将其作为演示中的“要点标记”来使用。

给设计师的提示：

这是一组彩色形状的图标样本。Erdem设计的免费安全图标，Nitish Khagwal的生动SVG图标，以及Fajrul Fitrianto为Inipagi Studio制作的免费SEO图标。