神译局是36氪旗下编译团队，关注科技、商业、职场、生活等领域，重点介绍国外的新技术、新观点、新风向。
编者按：几乎所有的UI设计都离不开图标。但是对于这个司空见惯的东西，在分类上面却往往会陷入混乱。为此，设计师Tess Gadd提出了自己的层次化分类建议，先按大小，再按类别，最后按要素对图标进行划分。里面不仅给出了具体的应用建议，还包括了丰富的样例，可以成为各位设计师的参考指南。原文发表在Medium上，标题是：UI cheat sheet: Icon categories + icon style reference guide。篇幅关系，我们分两部分刊出，此为第二部分。
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 ink style icons， Iconika的Camping 。
6.1.5. 虚线图标
虚线图标
基本的线条图标看起来会很无聊，太简单。不管出于什么原因，其实只要把线条稍微打断一下就可以让图标更加个性话。有两种类型的虚线似乎很受欢迎；一似乎是在线条之间空出一块标准隔断（见左下图的星星）。二是在隔断中间加个点或线段（参见右下方的蛋糕图标）。
设计师注意事项：
增加虚线就是增加个性。
线宽应保持一致。
可以考虑在虚线之间加个点（请参见右下图）。
尽量让不同的图标的虚线数保持一致。规则可以是每个图标只能有3隔断，或者每隔一行就必须有一条虚线等等。
虚线图标集的示例。Anton Kalashnyk的搜索引擎优化与网站开发，，暑假（Line），Kmg Design的Summer Holiday，Maxicons的Fast food。
6.1.6. 双色线条图标
双色线条图标
这些图标的魔力大部分是因为颜色，未必是因为线条。虽然，如果线条设计得好的话好，图标显然会锦上添花。这种图标要想设计好，诀窍是选择好两种颜色，要求a）看起来不好或不行，但能很好地融合在一起；b）确保这些颜色有相同的对比度，从而让视力不好的人也可以看清楚。
设计师注意事项：
听起来很明显，但是还是要确保使用的两种颜色可以搭配起来。
虽然两种颜色可以很好地融合在一起，但还要确保它们的对比度相同，否则，某些用户可能就看不到其中一种颜色，也就因此看不出完整的图标。比方说，左下方颜色较浅的部分视力差的人很难看清。
双色线条图标集。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. 偏移填充图标
偏移填充图标
这种图标风格，让我想起了印刷错误的漫画书，或者我尝试过多次均告失败的丝网印刷。但那不是坏事。
填充颜色跟线条刻意不对齐可以创造出很酷的效果和感觉。把颜色向右下移动时，左上角的高亮部分就会备受瞩目。
就像手绘图标一样，这些图标在“好玩”与“一团糟”之间往往只有一线之隔。保持协调的最好办法是，采用简单的颜色调色板以及一致的线条样式。
设计师注意事项：
可以考虑用虚线轮廓。
行业标准似乎是向右下角偏移，但是如果你不想循规蹈矩，那就看着办吧。
考虑只往背景的一侧偏移而不是整体移动。这样既能得到左上的高亮，又避免右下的溢出（参见下图右）。
有限制地运用颜色调色板。
轮廓和背景色要简单且一致。
偏移填充背景的线条图标示例。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化又避免拟物那种媚俗的好办法。尽管这种图标很酷，但缩小后效果往往不好，所以建议你只是用作图形，而不应用作交互空间的一部分。
设计师注意事项：
需要用插图应用而不是UI程序才能做好这种图标。
让所有符号朝向相同。
颜色调色板必须要调对，这一点非常重要，因为不同图标的阴影区必须保持一致。
小尺寸就不要用这种图标了。
彩色等距图标示例。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化，而且已经有阴影，底纹和渐变了。
拟物图标
A. Curtis是这么评价拟物的，“拟物用于iOS时，是一种装饰设计技巧，部分用来增强用户对功能的感知”。
这种设计风格有一个理论，那就是通过让图标看起来跟现实生活中的图标尽可能的相似，从而让用户感到更舒适。
设计师注意事项：
考虑增加底影。
让光源来自同一方向。
大多数用户界面设计程序都不会提供实现这种样式的图标所需的那种光照功能。不妨考虑用3D建模程序。
确保所有图标朝向相同的方向。
拟物图标集示例。Artbees的Paradise Fruit icons，Aha-Soft的Free Business Desktop Icons，Visual Pharm的Must Have。
7. 最后思考
当然，图标的样式比我这里罗列的要多得多了。想要全部在一篇文章列完是不可能的。
尽管我大概不可能完成这件事情，但我确实希望能够提供一种有关思考图标的新的思维模式。
希望你能设计出许多漂亮的图标。
译者：boxi