设计师Tess Gadd对图标层次化分类建议，成设计参考指南

编者按：几乎所有的UI设计都离不开图标，然而对于这个常见之物，在分类方面却常常会陷入混乱，为此设计师Tess Gadd提出了自己的层次化分类建议，按大小划分图标之举前置，按类别划分图标之行随后，按要素划分图标之措置后，其中不仅给出了具体的应用建议，还涵盖了丰富的样例，可成为各位设计师的参考指南。原文于Medium上发表，标题为：UI cheat sheet: Icon categories + icon style reference guide，因篇幅存在关系，我们将其分作两部分进行刊出，这是其中的第一部分。

处于最棒状态的图标，是不允许被反驳的，没法被反驳那种哦嗯。我对图标怀揣的喜爱之情，在程度方面并不亚于按钮。可是呢，图标存在着一个问题，那就是我们实在是不清楚究竟从哪个地方开始说起才好。对于那些没有图形设计相关经验的人来讲，这种情况是格外困难的。

所以，我的这份速查表关注重点在于，帮助我们对图标不同类型，建立共同理解，帮助我们对图标不同类别，建立共同理解，帮助我们对图标不同样式，建立共同理解。对图标进行分类并非精确科学，不过这是我针对怎么最佳做到这一点，给出的解释，这是我针对怎么最佳做到这一点，给出的建议。

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

图标分类：

Ico样式参考：

1.定义图标类别

分类图标样式的方法存在多种，能够依据主题、色彩的调色板、尺寸、产品年代、创建所采用的方式、所处文化背景、涉及审美等展开分类，而针对图标实施分类期间遭遇的主要问题在于，其中存在许多重复情况，并不具备较多特异性。

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

好吧，“然而它到底归属于哪一种类呢？”，于对该问题作出回应之前，我们先来瞧瞧其他网站是采用何种分类方式的：

可是，遗憾的是，上述这般分类而言于我是不具备效力的。图标理应能够是呈现为3D彩色样式的，还能够是经由手绘而成的、呈轮廓形状的，亦能够是有着锐利特质的图象字符之类的 。

我的做法是，分类要建立层次结构，首先，得按大小，也就是大图标或者小图标进行划分，然后，再按类别划分，类别包括图象字符、轮廓、填充、彩色形状、拟物，然后，按要素划分，要素有阴影、容器、3D、手绘等，这样就能够避免在前两个级别出现重合，然后，鼓励在最底层的级别上重合。

那个图呈现出两大类，就是大的和小的这两类，之后是一类，这类包含好几种，有被称作字形的，有呈现线条模样的，有那种实心进行勾勒轮廓的，有带有色彩并呈现出特定形状的，有仿照着某种形态的，最后是各种成分，其中有符合相关标准的，有作为容器形式存在的，有呈现出渐变效果的，有保持等距特征的，有手绘形式的，有带有阴影的，还有属于其他情况的。

2.图标尺寸

你要设计的图标，其大小是要依据用途来确定的。带有亮眼渐变以及阴影的酷炫图标，确实是很好看的，然而放置在16px的文本标签旁边，却无法起到应有的作用。

出于此缘故，我趋向于将“大图标”与“小图标”予以分离，缘由在于它们分别具备不一样的目的，间或也会出现重合的情况。小图标常常用于当作UI控件，能够达成功能性或者装饰性的目的。大图标通常用以借助图形方式阐释服务或者功能，然而也能够用来展现品牌的标识，并促使平台在美学维度上愈发让人感到愉悦。

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

3.图标类别

当所需图标被确定为“大”图标，或者是被确定为“小”图标之后，便能够将它们再进一步划分成图标类别：

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

一开始看的时候，这好像有一点儿简易，然而这么去做所具备的益处是不会出现重叠的情况。你不行将有着彩色形状的图标放置到字形的内部，你除此之外也不行把有着填充轮廓的网拟物放置进去。

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

4.图标要素

于使用尺寸较大的图形之际，你定会冀望图标拥有更多的细节，不然的话，图标看上去便会略显平淡乏味，甚而沦为上天都无法容忍的“剪贴画”，然而于运用尺寸较小的图标之时，你几乎无需任何细节。

虽说小图标尺寸微小，故而能够操控的像素数量更为稀少，像素存在限制会致使要素受到限制，尽管小图标进行拟物操作存在一定可能性，然而这种可能性并不高，所以我们便将其忽略了。

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

若要制作的是大图标，你会拥有更多空间去展现你的艺术气息。虽说做大字形并非不行，然而我不建议你如此做，因这会略显无聊，且吸引力不及颜色更丰富、细节更多的其他图标类别那般大。

有些要素能针对所有类别适用，而有的要素并非如此。某些图标样式能够涵盖多种要素，或者仅能于某种样式当中进行复制。又或者，若对拟物图标予以观察，实际上大部分要素其均有具备。

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

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

5.小图标样式参考

大家常常觉得小图标不像大图标那般有趣，然而这与事实大相径庭，可供摆弄的空间更少致使你得更具创造力，并且你还非得更多地去考量图标所要传达的内容，而非风格。

更具包容性的是简单图像，苏珊·卡瑞这样表示。

5.1. 字形

字形这个词，最初源于希腊语单词“gluphē ”，其大致意思表明为“符号或象形文字” 。如今我们所运用的字形，或者填充实心图标，通常仅仅是一种彩色以及实体形状。这些图标，在缩小之际，往往仍旧会保持形状。尽管它们极其易于辨认，然而它们常常有点无聊。在不运用颜色、轮廓等情形下，想要给这些图标增添一点“个性” ，可能会颇为棘手。

5.1.1. 标准字形或实心图标

字形并非是那种最为美观漂亮的图标，然而却无疑是极易让人看清的，这样的图标极其适宜于在界面当中当作小尺寸去使用，并且也适宜用来在标志之上当作大尺寸来使用。

设计师注意事项：

代表不同字形的集的示例，带有Material Design图标的那种填充样式的，还有Font Awesome的实心样式的，以及Ionicons的填充样式的。。

5.1.2锐利图标

大多锐利图标乃以字形填充实心图标成基础，然而这些图标具锐利边缘，多数图标边框半径仅一两个像素，而锐利图标存在硬边 。

原因之一是，你有可能选用锐利图标，而并非圆角图标，是因为图标在缩小至较小尺寸之际会显得更为清晰。要是瞧瞧下面的参考内容，并且把它们同前一节的示例予以比较，那你便会察觉到边界半径的差别。

设计师注意事项：

展现不同锐利程度的字形集示例，其中包括Material Design图标呈现出的锐利样式，还有Ionicons所具备的锐利形态。

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

2013年，Windows为极简的设计引入一种崭新外观，2013年，Windows为字形引入一种崭新外观，这种崭新外观是把它们放到彩色背景上，事实证明，这种超级简单的把它们放到彩色背景上的技巧能够让字形更友好，事实证明，这种超级简单的把它们放到彩色背景上的技巧能够让字形更具吸引力。

设计师注意事项：

5.2. 线条图标

近些年，因具备简洁性以及更为现代的外观，线条图标或者轮廓图标已变得越发流行。尽管字形常常被视作在可用性层面表现更佳，然而并非所有符号皆是如此。比如说，对话泡泡图标运用线条图标来表示会更优。

5.2.1. 小尺寸线条图标

构建小尺码线条图标或许会颇为棘手，以往我通常会运用字形，因构建起来更为简便，且更易于维持。不过，随着智能手机屏幕愈发优良，如今我们也能够体验一番采用线条图画标的豪奢之感了，即便制作欠佳的线条图标在新款iPhone上也还说得过去。

设计师注意事项：

示例为线条图标集所构成的集合，其中包含Material Design图标（轮廓样式），还有Feather Icon，以及Ionicons（填充样式）。

5.2.2. 双色小尺寸线条图标

制作尺寸较小的图标时，你要放弃细节，强调简单形状，添加一些颜色可行，不过使用一种颜色时，可读性不太理想。

设计师注意事项：

带有两种颜色的小尺寸线条图标示例，其中Candy Icons是由YiğitPinrbaṣi制作的，35 Simple Line Icons是由Wilbur Xu制作的，还有Freebie，是PixelBuddha的电子商务和导航矢量图标集。

5.3小尺寸填充轮廓图标

我觉得将轮廓图标予以填充属于最为“能让人感到欢愉”的小图标样式当中的一种，然而，要是颜色数量过多的情形下，便会产生问题。

设计师注意事项：

小尺寸的，用于填充的图标实例，Material Design图标，其为双色的，Aha - Soft的16x16规格的免费工具栏图标，还有Sihan Liu的彩色形状为天气的图标。

5.4. 小尺寸彩色形状图标

相较于其他样式，从美学角度讲，这或许是我最青睐的那种样式。这些小小的图标，既具有内涵，呈现出别具一格恰到好处的简单与巧妙，并且籍由调色板以及特定组合样式，传递出极具影响力的品牌标识。

即使在缩小比例的状况下，极简图标比其他扁平图标类型有效得多，可还是比不上字形图标。这种图标在图形区域使用时，有时会显得过小，而运用到界面时，有时又会显得过大。我最喜的应用场合，是在演示时用作“要点符号”。

给设计师的提示：

示例，表现为彩色形状图标集，其中有Erdem创作的Freebie Security图标，还有Nitish Khagwal的Vivid svg Icons， 以及Fajrul Fitrianto为Inipagi Studio创作的SEO ICONS (FREE!) 。

译者：boxi

继续浏览有关 UI设计图标分类 的文章