认识达内从这里开始

图标设计在许多网页设计和app应用设计中都是会经常用到的一个设计元素，今天我们就通过案例分析来简单了解一下，图标设计常用设计方法都有哪些。

在图标设计中通常会犯的几个错误。

线性图标不突出。绘制粗糙、复制化、缺乏精细度。

图标视觉大小不规范、描边粗细不统一、视觉引导线混乱、断线位置不一致等。

一组图标中的配色以主管感受为主，缺乏科学依据和分析支撑。

为了避免在设计中出现以上错误，所以我们在设计图标时应该规范一整套适合自己设计流程和规范。更好的约束我们的设计产出，做到更好的设计落地。这就是我们常说的“商业设计是带着枷锁舞蹈”。

平时UI设计中常用的图标形式分为线性图标、面性图标、线面结合图标和面性带底板图标。

1、线性图标

a、线性图标分为无断线描边和断线描边

图标断点风格并不适用于所有的产品。例如在一些金融类产品中很少使用断点风格。因为金融类产品传达一种严谨安全严肃专业的感觉，所以使用断点风格显然和产品调性不统一协调。而断点风格传递的情感是年轻、活力、趣味。

1、断点图标的断点位置要大致相同，(一般在形状交界处或者转角位置)且开口方向一致。

2、断点缺口大小统一、断点距离相同。

3、断点端点的处理方式有直角(锋利、断裂感)和圆角(圆润、趣味性)

b、线性图标也分有底板和无底板

内环图标描边更粗，可以更好的将视觉重心集中在图标上，而不是被底板分散注意力。视觉重心集中，更好的提升辨识度。

2、线面结合图标

线面图标的区别：视觉比重更强，更有趣味性。

(图标做到统一协调，在一组图标中避免线性图标和面性图标混排，造成这组图标的不和谐。)

3、面性图标

面性图标分为有底板和无底板两种样式，面性图标的样式的选择通常看图标所在位置。

一个图标方案可以衍生出多种图标风格，在平时设计和工作实操中我们可以根据产品需求，分析出图标在页面中的比重、层级和重要性来合理选择我们的设计风格。

那为了更好的选择图标样式和特点需要找到设计的切入点，我们将一个图标拆分为四个方向分别进行分析。

1、图形

通常图形是吸引眼球的元素之一，所以一眼看到的图标外环形状是什么决定着用户对于产品的一印象。而图形元素可以从几何形状着眼，可以分为方形、圆形、三角形。

我们可以清晰的看出形状偏向直角/矩形的图标多适用于金融、教育、学习等类型的产品中。给人一种严肃、稳定、信任度高的感觉。而形状偏向圆润/圆角的图标多适用于女性、电商、低龄儿童类的产品中。传递的情感是圆润包容、亲和力强。

2、圆角

图标的圆角大小和图形形状相辅相成，逻辑相似。圆角越小图标越锐利严肃，圆角越大图标越圆润可爱。

随着圆角大小发生变化，圆角越尖锐那么图标的严肃感、品质感、紧致感、理性感就会传达的更强烈一些。当圆角越来越大时，传达的感觉会越可爱、越具有亲和力、越感性。所以在设计图标时要根据产品的方向和人群的定位去分析到底是采用方形图标还是圆形图标。这样让设计做到有理有据，言之有物。

3、描边

如果图标是线性图标，那么选择图标的描边粗细就至关重要。线条的粗细直接影响了图标性格。

4、配色

色彩出现或者色彩缺失，是色彩情绪的主要传递方式，也是营造产品内在情绪的催化剂。

根据产品定位选择了合适的色彩饱和度后，接下来就要针对每组图标的单个图标进行色彩分析，运用色彩情绪来搭配更符合该图标调性的色相。比如“红色”给我们的感觉是热情洋溢、活力四射的。“黄色”是欢块、光明、富丽的感觉。“绿色”则给人的感觉是健康、清新、自然的。

以上就是在图标设计时要根据产品定位，色彩情绪，定制合适的色彩给图标。做到设计配色的有理有据。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。