展示设计风格分类-如何选择合适的图标？查看图标类型和样式的总结

当我们看到好的图标时，我们会习惯性地截图并保存。 然而，随着我们收集的图标越来越多，我们会发现图标的分类会变得越来越混乱……在进行设计时，我们不知道该参考或使用哪些。 这种风格最合适。 让我们来看看如何解决这些问题吧！

图标是基本但重要的表达元素，在UI设计中发挥着不可替代的作用。

常见的分类都是简单的线性分类，缺乏三维图标分类思维。 本文通过整理，帮助大家对不同类型、不同风格的图标有一个系统的了解。

1.定义图标类型

在对图标进行分类时，一个常见的问题是一个图标有多种风格； 例如下面的水滴图标，样式简单，但可以分为多个类别。

面对这样的问题，建议使用系统化的结构来划分图标类别：

通过这样的结构层次，可以清晰地定义图标的类别。

2. 图标大小

图标的大小取决于具体功能。 例如，带有渐变和阴影的图标看起来很酷，但将其缩小到 16px 不会带来那些酷炫的效果。

在对图标进行分类时，首先要考虑图标用在什么地方吉祥物，需要多大。 这里，图标分为两类：

3. 图标类型

确定图标大小后，进一步细分图标类型：

使用这种简单的分类方法可以避免图标重叠。 另外，拟物化的精致风格不适合小尺寸图标，因此小图标类别中不会显示拟物化。

4. 图标构成

图标尺寸越小，显示的细节越有限； 与大图标相比，小图标的大小有一定的局限性，图标组成包括标准和容器。

大图标可以利用其尺寸来显示更多的内容，并分为各种组合。

5.小尺寸图标样式

简单的图像可以更具包容性，而且图标的尺寸越小，设计师传达信息的能力就越好。

1. 脸部图标

1) 标准人脸图标

多面图标易于识别展示设计风格分类，适合在小尺寸图标中使用。

关键点：

2）带有背景颜色的脸部图标

多彩的背景为极简设计带来更多可能性。 使用这个技巧可以使基于脸部的图标更友好、更有吸引力。

关键点：

2. 线性图标

1) 标准线性图标

线性图标因其简洁和现代感而受到用户的欢迎； 随着屏幕变得更加清晰，我们可以更大胆地使用线性图标。

关键点：

2) 二色线性图标

设计小尺寸图标时，重要的是放弃细节并强调简单的形状； 但当使用一种颜色效果不佳时，请考虑添加一些颜色。

关键点：

3）线面组合图标

线面图标的结合，细节更多，增强了用户的愉悦感。

关键点：

4) 平面图标

平面图标既简单又巧妙，表达品牌形象的同时也具有丰富的内涵。

关键点：

6.大尺寸图标样式

大尺寸图标较少在界面中使用，更多用于产品识别或品牌推广。

1. 线性图标

1) 标准线性图标

在设计任何图标之前，您可以先创建一个线性轮廓，并确保形状看起来足够漂亮，然后再添加颜色。

关键点：

2）渐变线性图标

添加一些渐变可以使原本单一的线性图标更具个性。

关键点：

3）等距线性图标

制作 2.5D 图标需要花费大量时间，但结果往往非常好。 在设计汽车、房屋、家具等大型实体产品时，建议优先使用2.5D图标。

关键点：

4）手绘线性图标

随着设计趋势向简单化和扁平化发展，许多设计师已经失去了手工绘制图标的能力。 事实上，手绘图标让品牌更真实、更有趣。

关键点：

5) 断开连接图标

标准的线性图标可能看起来单调，但简单灵活的断线处理可以为图标增添更多个性。

关键点：

6) 二色线性图标

正确使用双色线性图标的技巧是选择两种搭配良好的颜色展示设计风格分类，确保颜色具有相同的对比度。

关键点：

确保两种颜色具有相同的对比度，否则用户可能无法看清其中一种颜色，从而无法识别完整的图标； 例如左下角的浅绿色对于视力较弱的用户来说非常不友好。

2.线面组合图标

线面图标可以被认为是添加了颜色的线性图标。 线与面的结合形成了强烈的轮廓卡通人物，使图标清晰可见。

1）标准线面组合图标

关键点：

2）带背景色的线面组合图标

关键点：

3）线面组合图标错位

当填充颜色和描边错位时，颜色会移动到右侧图标的左上角留下亮点，带来清新的感觉。

关键点：

4) 色块图标

这种风格图标的特点是不依赖颜色，仅用于装饰。

关键点：

5）单色线面组合图标

关键点：

3.平面图标

平面图标通常没有笔画，主要利用形状和颜色来完成组合； 简单、友好和适当的细节使这种类型的图标非常有吸引力。

1) 标准平面图标

关键点：

2) 带容器的平面图标

关键点：

3）等距图标

关键点：

4) 半阴影平面图标

半阴影图标为平面图标添加半色调阴影，以创建更加个性化的图标。

关键点：

5) 长阴影平面图标

当图标位于容器中时，可以考虑添加长阴影，主要包括纯色阴影和渐变阴影两种。

关键点：

4.拟物化图标

拟物化图标实际上包含了大部分风格，例如它们是三维的，并且具有丰富的渐变和阴影。

这种风格的图标看起来尽可能与现实生活中的图标相似，让用户感觉更舒服。

关键点：

七、总结

希望通过这篇文章，能够对图标的分类和设计有更全面、深入的了解，从而构建一个完整的图标思维体系。