设计师Tess Gadd的图标层次化分类建议，你知道吗？

时间：2025-10-25作者：admin分类：广告与营销视觉浏览：5评论：0

编者按：几乎所有的 UI\(设计\)都离不开图标设计，然而对于这个常见得习以为常的事物，在分类方面时常常要致使陷入无序杂乱状态，鉴于此，设计师 Tess Gadd 提出了属于她自己的层次化分类构想，先是依照大小，接着依据类别，最终按照要素对图标予以区分，其中不但给出了详尽的运用提议，还涵盖了丰富多样的示例，能够成为各位设计师的参考指引。原内容发布于Medium之上，其标题为UI cheat sheet即图标类别加上图标样式参考指南，鉴于篇幅存在关系，我们会划分为两部分予以刊出，这里所呈现的乃是第二部分。

6.大尺寸图标样式参考

平常界面内大图标使用较少，主要用于平台品牌宣传，这些图形用于提供产品标识，向潜在用户解释相关概念，比如“编辑”按钮一般不用大图标。

6.1. 线条图标

伴着手机屏幕分辨率提升，设计人员于手机界面运用图形图像时，开始体会到更多乐趣，往昔那种字形被淘汰了，被1px线宽了线条图标取代掉了，倘若设计恰当，这些图标能够特别干净优雅。

6.1.1. 标准线条图标

只要设计恰当，基本的线条图标极易显得优雅。于创建任何图标之前，我都得先创建基本轮廓且确保形状无误，之后再往其中添加颜色。

设计师注意事项：

大尺寸，线条图标，示例。FreePik的ECommerce Icon Pack，Rudez Studio的Commerce line，CatKuro的Security。

6.1.2. 渐变线条图标

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

设计师注意事项：

带有大线图标且呈现出渐变情况的诸如这样一些示例，FreePik的Laboratory Icon Pack（线性颜色），CatKuro的Digital Marketing Icon Pack（梯度），Xnimrodx的在家工作Icon Pack（线性渐变）。

6.1.3. 等距线条图标

等距设计颇有麻烦，这是由于你需回到旧的Illustrator亦或是别的非UI程序方可设置等距网格。然而，虽说颇费功夫，可做得好的等距图标着实非常漂亮。要是要给制作大型实体产品比如汽车、房屋、家具、船等的公司创建图标，我提议能够采用这些类型的图标。

给设计师的技巧提示：

表示等距大尺寸的图标样例有，FreePik的，Isometric Business Icon Pack ，还有Isometric Transports Icon Pack ，以及Smashicons的，Furniture Icon Pack 。

6.1.4．手绘线条图标

当下设计趋势倾向于良好创作，是扁平设计，拥有手绘或非对称图标设计能力之人会崭露头角。任何设计师均可下载图标，然而能从零起步自行绘制图标的设计师有几个呢？手绘图标能够使品牌更具亲和力、更显真实，乃至更具趣味性。你甚至能够通过数字化手段绘制出手绘效果来作弊。

设计师注意事项：

存在大尺寸的，经由手绘而成的具有线条的图标图案示例，有属于Dinosoftlabs的Security Hand Drawn，还有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. 实线图标

更进一步的线条图标，可被视作实线图标，或者被当成涂色本。只要赋予更多样式，也就是要素，就能让这些图标既有时尚感又不会显得俗气，此事不难做到。

6.2.1. 填充轮廓图标

图形是由轮廓与颜色组合创作而成的，给视觉障碍者看见了视觉障碍者们也能够看见的图形，这是源于那些具备强烈轮廓的可以看得见的有着强烈轮廓的平面彩色图形。

这类图标的一个缺陷，就是看起来有点像“着色本”，不过通过几条策略能避免此情况，即要留意线条粗细，颜色调色板，还有线条样式，在样式里做些大胆选择，可助你避免图标看上去像品牌通用之物（见下面示例）。

设计师注意事项：

那些大尺寸的、由实线构成的图标所具有的示例，FRDMN的关于“Shopping and Ecommerce”的示例，Eucalyp Studio的有关“Street Food and Food Trucker”的示例，Peer Buksh的涉及“SEO and Internet Marketing”的示例。

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

无轮廓的背景，加上有轮廓的图标，往往效果不错，这会带出一些阴影效果，利用这些图标，再结合有限颜色调色板做出来的效果会很性感。

设计师注意事项：

无轮廓的背景，加上有轮廓的图标示例，FreePik的Communication Icon Pack，Pixelbuddha的Freebie: Business Flat Icons Kit ，Pixel Perfect的New Business Icon Pack。

6.2.3. 手绘填充轮廓图标

手绘图标是一种反应，这种什么反应呢，是面对互联网上存在的那种表现上呈现出的千篇一律的情况所做出的反应。存在着一类具有自定义特性的涂鸦图形，这些涂鸦图形能够达成的效果是什么呢，是可以让界面具备一种增强后的真实感，同时还能够使得界面在风格上展现出更为质朴甚至是幼稚俏皮的特质，当然啦，这里所说的质朴或幼稚俏皮最终呈现何种风格具体取决于画风的样式。

创作手绘图标存在两种方式，其一，先将图标画好，接着进行扫描，随后运用Photoshop或者其他工具予以润饰，之后另存为jpg或者png（留意参照以下图中所示），其二，手工将图标画好，完成扫描后，采用钢笔工具重新绘制轮廓并开展数字化修改，手绘存在的问题是图标文件相对较大，手绘转数字面临的问题是其看起来仿若并不似“手绘” 。

设计师注意事项：

示例为大尺寸手绘的线条图标，有FreePik的Summertime Holidays Icon Pack ，Raindropmemory的Natsu ，FreePik的Valentines 。

6.2.4. 偏移填充图标

这种图标风格，使我忆起印刷有误的漫画书，或者我多次尝试皆失败的丝网印刷，然而那并非是件坏的事情。

采用填充颜色与线条有意不进行对齐的方式，能够营造出很酷的效果以及感觉。当把颜色朝着右下方向移动之际，左上角的高亮部分就会变得备受瞩目。

如同手绘图标那般，这些图标于“好玩”跟“一团糟”之间常常仅存在一线之隔，保持协调的最佳办法是，采用简约的颜色调色板以及一致的线条样式。

设计师注意事项：

线条图标设计技巧_UI大图标样式参考_应用图标设计图案

对背景进行偏移填充的线条图标所给出的示例，Anton Kalashnyk的社交媒体以及logo，Jeff Kristiansen的圣诞节专题专栏，Paolo Valzania的天气图标。

6.2.5. 填充浅色轮廓图标

标准化进行填充的轮廓图标之中的深色轮廓极具可能会存有一点点刺眼的感觉，与此同时还会存在着宛如“着色本”样式的感觉。选用浅色轮廓的图标能够促使这些图标展现得更为柔和，进一步增添舒适之感。

设计师注意事项：

例示，对浅色轮廓图标集予以填充。FreePik的名为Location Icon Pack的图标，Iconella的COVID - 19图标，Bedon Style的被称作Summer的图标。

6.2.6．形状与线条图标

我是这般图标样式的忠实拥护者，它的窍门并非凭借颜色，颜色仅是用于装饰，虽说无可否认的是，你没办法每个符号都做对。

设计师注意事项：

表示线条形状的图标集的示例，Eucalyp Studio所拥有的Avatar，FreePik的Birthday Icon Pack，Marta Deyrieux的Mage's Workstation 。

6.2.7．单色调图标

怎样将品牌颜色应用于图标之上呢，这乃是又佳且简易的做法，如同对浅色图标进行填充那般，此类图标同样会给予你“柔和”且温馨的感受，并且并不会存有“着色本”的印象。

设计师注意事项：

单色调图标示例，Chanut is Industries的Outer Space Mono Color，其图案为Expedition Frame Design，Payungkead的Food Delivery Icon Pack图案，还有Wanicon的Library图案。

6.3．彩色形状

彩色的形状图标，仅依靠形状以及颜色，然而呢，要将颜色与形状搭配妥当并非易事，在于你不再依靠线条了，总体来说哦，这类图标着实令我愉悦，我期望你亦是这般！

6.3.1. 扁平图标

有那么几年前，平色图标那可是一度风行起来，很是火爆，它们这般火那是存在一定道理的，其呈现出干净的特质，展现着友好的风格，并且细节在适度范围之内，这样的图标极具吸引力，同时还能够维持品牌的标识度，而这恰恰是其他类型图标在有的时候所欠缺没有的。

设计师注意事项：

扁平化图标示例，DinosoftLabs的Delivery Icon Pack，Amoghdesign的Spring，Prosymbols的Digital marketing Icon Pack 。

6.3.2．容器内的扁平图标

展示服务或者创意的一种极为时尚的方式，是容器以内的扁平图标，我特别喜爱图形当中一部分突破容器的那种感觉，鉴于这般感觉更为有机且更具动感。

设计师注意事项：

放于容器当中的扁平图标集的示例，FreePik 的 Jungle Icon Pack，Mangsaabguru 的 Winter Activity，FreePik 的 Laboratory Icon Pack。

6.3.3. 平色等距图标

等距平色图标不失为一种构思，该构思旨在打造3D化，同时规避拟物风格所带有的那种过分讨好世俗的意味。虽说这种图标具备很酷的特质，然而在其尺寸缩小之后，所呈现出的效果常常不尽如人意，鉴于此，建议你仅将其当作普通图形来使用，而不要将其应用成为交互空间的其中一部分；

设计师注意事项：

呈彩色状的，有着等距特点的图标相关示例，其中包括Alexiuz AS推出的WHCompare Isometric Web Hosting & Servers，还有FreePik所提供的Meteorology Icon Pack ，以及FreePik的User Interface Icon Pack 。

6.3.4. 半阴影的平色图标

几年前，半阴影的平色图标曾一度极为流行，究其原因，是因为这类图标制作起来相对容易，只需去画一幅无趣的图形，继而为其添加上半色调阴影，如此这般，一瞬间你便获得了一个更具个性化的图标。

如果时间紧迫，我会运用各类来自不同图标集的图标，添加半个阴影，使其自动显得仿若出自同一图标包之物。

设计师注意事项：

有关半色调平色图标集的示例，源于FreePik的Dog Breeds Icon Pack ，还有FreePik的User Interface Icon Pack ，且包括FreePik的Sea life Icon Pack 。

6.3.5．长阴影平色图标

平色图标存在一问题，即或许太平淡，添加长阴影后图标一下便增添了维度，有一点需记住，即仅在图标于容器之内时，才可如此做。

你能够运用这两种阴影，第一种是纯色，这种纯色可参见右下方，或者是渐变，此渐变可参见下左和下中。

设计师注意事项：

代表平色且带着长阴影的图标示例情况，有FreePik这家所用的UI interface Icon Pack，还有Yana Kulakova创作的Winter Lollipop，另外还有FreePik的Camping Icon Pack。

6.4．拟物

与别的图标类别不一样，拟物图标实际上已涵盖了大部分要素，拟物已然实现3D化作，并且早已有了阴影，底纹以及渐变了。