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

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

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

6.大尺寸图标样式参考

在常规界面中，大图标的使用频率并不高，其主要功能在于平台的品牌推广。此类图形旨在展示产品标识，并对潜在用户阐释相关理念。以“编辑”按钮为例，通常情况下，人们不会选择使用大图标。

手机屏幕的分辨率不断提升，使得界面设计师在图形图像的运用上体验到了前所未有的乐趣。过往的字体设计逐渐被淘汰UI 速查表：图标分类 + 图标样式参考指南（下），现在流行的是采用1px线宽的线条图标。只要设计得当，这些图标便能展现出极致的简洁与优雅。

6.1.1. 标准线条图标

若设计得宜，基础线条图标便能轻易展现出其优雅之美。在着手制作任何图标之前，我必须首先勾勒出基本轮廓，确保其形状准确无误，随后再逐步填充色彩。

设计师注意事项：

以下是几款大尺寸线条图标展示：FreePik的电子商务图标套装，Rudez Studio的商务系列，以及CatKuro的安全图标。

6.1.2. 渐变线条图标

添加一些渐变会带来无聊的线条图标，并立即赋予它更多的个性。

设计师注意事项：

以下是一些具有渐变效果的图标示例：FreePik的实验室图标套装采用线性色彩设计，CatKuro的数字营销图标套装运用了色彩渐变效果图标大全 设计，Xnimrodx的居家办公图标套装则展现了线性渐变的特色。

6.1.3. 等距线条图标

等距设计操作繁琐，需要返回到旧版本的Illustrator或其它非UI设计软件来设定等距网格。尽管如此，精心制作的等距图标依然十分吸引人。若是为生产大型实体产品（例如汽车、住宅、家具、船只等）的企业设计图标，我推荐采用这种风格的图标。

给设计师的技巧提示：

等距设计的大图标范例包括：FreePik提供的等距商业图标套装，等距交通图标套装，以及Smashicons的家具图标套装。

6.1.4．手绘线条图标

当前的设计潮流倾向于鼓励创新，推崇简洁的扁平化风格，那些擅长手绘或设计不对称图标的创作者更容易崭露头角。尽管任何设计师都能轻松下载图标，但真正能够从无到有自己绘制图标的设计师却寥寥无几。手绘图标不仅能让品牌显得更加贴近大众、更加真实，还能增添一份趣味。更有甚者，你甚至可以通过数字化手段来模仿手绘的效果。

设计师注意事项：

以下是大尺寸手绘线条图例：Dinosoftlabs设计的Security手绘图标，Eleonor Wang创作的100款墨水风格图标，以及Iconika的Camping图标。

6.1.5. 虚线图标

线条图标若过于简单，难免显得单调乏味。实际上，只需对线条进行微小的改动，便能赋予图标更多个性。目前，似乎有两种虚线形式颇受欢迎：一种是在线条间留出一定的标准间隔（如左下角的星星图标所示）；另一种则是在间隔中添加一个点或线段（参考右下角的蛋糕图标）。

设计师注意事项：

这是虚线图标集的展示。Anton Kalashnyk专注于搜索引擎优化和网站开发，他的作品在暑假期间（Line）展出；Kmg Design的Summer Holiday系列也是其中之一；而Maxicons的Fast food图标集同样引人注目。

6.1.6. 双色线条图标

这些图标之所以具有强大的吸引力，很大程度上得益于它们的色彩运用，而非线条的描绘。诚然，线条设计得巧妙，亦能对图标起到画龙点睛的作用。然而，要设计出优秀的这类图标，关键在于挑选两种颜色：一方面，这两种颜色单独看可能不够理想，但需确保它们能够和谐搭配；另一方面，还需保证这两种颜色具有相似的对比度，以便视力不佳者也能清晰辨识。

设计师注意事项：

这是一套双色线条设计的图标集合，包括IconGeek26设计的Lifestyle Icon Pack，Rudez Studio打造的Construction 2，以及Aditya Apriyadi创作的Happy Holiday图标。

实线图标可视作线条图标的升级版——亦如彩色涂鸦册。要让这些图标显得既潮流又不失格调，其实并不复杂，只需添加更多样式元素即可。

6.2.1. 填充轮廓图标

通过轮廓与色彩的搭配，我们能够创造出即便视觉受限的人也能辨识的图案，这主要归功于平面彩色图形所拥有的鲜明边缘特征。

这类图标存在一个不足，即它们可能会让人联想到“着色本”。然而，通过采取一些策略，我们能够有效避免这一现象。这包括关注线条的粗细、选择合适的颜色调色板以及调整线条的样式。在样式上做出一些大胆的尝试，可以确保图标不会显得过于品牌化（以下示例可供参考）。

设计师注意事项：

以下是不同公司设计的大尺寸实线图标范例。FRDMN公司展示了其购物和电子商务领域的图标，Eucalyp Studio则呈现了街头美食和食品运输车相关的图标，而Peer Buksh公司则推出了其搜索引擎优化和互联网营销的图标。

6.2.2.无轮廓背景上的填充轮廓图标

没有轮廓的背景搭配带有轮廓的图标，常常能呈现出令人满意的效果；这样的设计会带有一丝阴影感。借助这些图标，并搭配有限的颜色选择，最终呈现出的效果往往充满性感魅力。

设计师注意事项：

无轮廓的背景搭配带有轮廓的图标示例。例如，FreePik的通讯图标套装，Pixelbuddha提供的免费商务扁平图标套件，以及Pixel Perfect推出的新商务图标套装。

6.2.3. 手绘填充轮廓图标

手绘图标是对网络内容普遍雷同现象的一种应对方式。通过个性化的涂鸦设计，界面可以呈现出更为真实、质朴或略显稚嫩、俏皮的风格，这主要取决于创作者的绘画风格。

创作手绘图标有两种途径。首先，可以先绘制图标，接着将其扫描，并利用Photoshop等软件进行美化处理，最后将其保存为jpg或png格式（如图所示）。另一种方法是直接手工绘制，扫描后，运用钢笔工具重新勾勒轮廓，并进行数字化编辑。需要注意的是，手绘图标往往文件体积较大。而在将手绘作品转化为数字版时，可能会出现其不够“手绘”的感觉。

设计师注意事项：

这是一些大尺寸手绘线条图标示例。例如，FreePik的Summertime Holidays Icon Pack，Raindropmemory的Natsu，以及FreePik的Valentines图标包。

6.2.4. 偏移填充图标

这种图标设计让我联想到那些印刷失误的漫画册，亦或是那些我屡试不爽的丝网印刷作品。然而，这并非是件坏事。

颜色与线条若故意错位排列，便能营造出独特的酷炫视觉效果；当色彩向右下方移动时，左上方的突出区域便会格外引人注目。

这些图标图标大全 设计，与手绘图标相似，常常在“有趣”与“杂乱无章”之间仅一线之差。要确保其协调性，最有效的方法是运用简洁的色彩搭配和统一的线条设计。

设计师注意事项：

展示偏移填充背景的线条图标案例，包括Anton Kalashnyk在社交媒体上的头像及标志，Jeff Kristiansen的圣诞专题，以及Paolo Valzania设计的天气符号。

6.2.5. 填充浅色轮廓图标

深色轮廓的标准填充图标可能会显得有些刺目，给人一种“着色本”的印象；而采用浅色轮廓的图标，则能让这些图标看起来更加柔和，更易于接受。

设计师注意事项：

展示浅色调轮廓图标集的范例。例如，FreePik提供的地理位置图标包，Iconella设计的COVID-19系列，以及Bedon Style的夏日风格图标。

6.2.6．形状与线条图标

我对这种图标设计情有独钟，其精髓并非仅在于色彩的运用，色彩仅作为点缀之用。尽管如此，必须承认的是，并非所有符号都能被正确识别。

设计师注意事项：

线条图形图标集范例。Eucalyp工作室的虚拟形象，FreePik的生日图标套装，Marta Deyrieux设计的法师工作站图标。

6.2.7．单色调图标

如何将品牌色调融入图标设计中？这其实是一种既巧妙又简便的方法。此类图标与浅色填充图标相似，同样能营造出一种“温馨”与“柔和”的视觉感受，同时避免了给人留下“色彩样本”的刻板印象。

设计师注意事项：

这是单色图标范例。Chanut is Industries推出的外太空单色——探险框架设计，Payungkead的食品配送图标套装，以及Wanicon的图书馆图标。

6.3．彩色形状

这类图标主要依靠形状与色彩来呈现。然而，要将色彩与形状巧妙地结合并非易事，因为其中不再单纯依赖线条。总体来说，我对这类图标感到十分满意，并希望您也能感受到同样的愉悦！

6.3.1. 扁平图标

几载之前，平色图标一度广受欢迎，其受欢迎程度并非无因。它们设计简洁、易于亲近，且在细节上恰到好处，极具吸引力。同时，这些图标还能有效维护品牌形象，这一点是其他图标设计有时难以做到的。

设计师注意事项：

以下为扁平图标示例：DinosoftLabs推出的Delivery Icon Pack，Amoghdesign设计的Spring图标，以及Prosymbols的Digital marketing Icon Pack。

6.3.2．容器内的扁平图标

容器中的平面图标，成为了一种展示服务与创意的潮流手段。我特别钟爱那些图标局部超出容器边界的设计，这样的设计让人感觉更加生动自然，充满活力。

设计师注意事项：

这是放置于容器中的平面图标集范例。例如，FreePik提供的丛林图标包，Mangsaabguru的冬季活动图标包，以及FreePik的实验室图标包。

6.3.3. 平色等距图标

等距平色图标在制作三维效果的同时，能够有效规避那些过于俗气的拟物化设计。虽然这类图标看起来颇具时尚感，但一旦缩小，其效果常常不尽人意。因此，建议您仅将其作为图形元素使用，不宜将其纳入交互空间的设计之中。

设计师注意事项：

以下为彩色等距图标示例：Alexiuz AS的WHCompare等距网站托管与服务器图标，FreePik的气象图标包，FreePik的用户界面图标包。

6.3.4. 半阴影的平色图标

这类带有半阴影效果的平面图标在数年前颇受欢迎，其制作过程相对简便——只需绘制一些单调的图案，接着加入半色调的阴影效果，这样一来，一个更具个性化的图标便诞生了。

若时间紧迫，我便会采用源自众多图标库的各式图标，只需为其添加少许阴影，便能让它们仿佛出自同一图标集。

设计师注意事项：

这是半色调平色图标集的展示实例。其中包括了FreePik的犬种图标包，FreePik的用户界面图标包，以及FreePik的海洋生物图标包。

6.3.5．长阴影平色图标

平色图标的一个问题可能在于其过于单调。若在图标上添加长阴影，则能瞬间提升其立体感。但需留意，此操作仅适用于图标位于容器内部的情况。

你还可以采用这两种阴影效果：一种是单一颜色（可参考右下角示例）或颜色过渡（分别见左下和中间部分）。

设计师注意事项：

这是长阴影平色图标示例，包括了FreePik的UI界面图标包，Yana Kulakova设计的冬季棒棒糖图标，以及FreePik的露营图标包。

与其他图标种类有所区别图标大全 设计，拟物图标实际上已经涵盖了大部分的基本元素。此类图标已经实现了三维效果，并且加入了阴影、底纹以及渐变等细节处理。

Curtis对拟物设计有着这样的看法：在iOS系统中，拟物设计被视为一种装饰性的设计手法，其部分作用在于提升用户对功能的识别度。

该设计理念基于一个观点，即通过使图标与现实生活中的类似图标保持高度相似，以使用户感受到更加自在。

设计师注意事项：

以下为拟物图标集实例：Artbees公司的Paradise Fruit图标系列，Aha-Soft提供的Free Business Desktop图标，以及Visual Pharm的Must Have图标。

自然，图标的设计种类远超我所列举的这些。要将它们全部详尽地罗列在一篇文章中，实属不可能。

即便我恐怕难以实现这一目标，我仍旧渴望提出一种全新的思考图标理念。

希望你能设计出许多漂亮的图标。