想必大家都知道，图标是一种图形化的标识，对于图标都不陌生，多多少少都应该了解一点的啦，我们先从基础的理论入手哈：图标：它具有高度浓缩并高效快捷传达信息，便于记忆的特性。在UI的设计体系中，图标是最重要的组成部分之一，是任何UI界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，可以说是入门UI设计的必备条件。从古代的图腾到现代图标，可以看出其不仅运用广泛，且功能强大还附有特殊的含义。它可以是一个国家的国旗，一个品牌的标志，也可以是交通等公共指示牌。关于这一点大家可能觉得，图标真的那么牛吗？那当然啦。现在网上有很多文章、视频、问答之类的都有关于图标的介绍，都是都比较片面，碎片化的只是太多了，需要慢慢的整理消化，认识不全面，在设计的过程中总会蒙圈，设计作品总感觉缺少啥，不完善一样。对于这个图标的设计问题我觉得我有必要在这里我详细的给大家总结一下图标设计的所有要点和具体的设计方法，帮助更所的设计新人更快的学习掌握图标设计的要点接下来我们先了解几个基本的图片内容：一：图标的基本认识我们可以把图标分为广义和狭义两种概念：广义指的是在现实中有明确指向含义的图形符号狭义主要应用于计算机软件方面，UI中的图标是具有明确指代含义的计算机图形，主要针对的也是这一个概念，与非常大的覆盖性UI界面视觉组成的关键元素之一最常见的扁平化设计风格中，界面的实际视觉组成4种元素有：图片、文字、几何图形、图标。图片、文字、几何图形的运用：用于到排版的技巧图标则是UI设计中除了插画元素以外唯一需要我们“绘制”、“创作”的元素，一涉及到这两件事，难度就直线上升了。可能有人会说：往界面里弄一些方方圆圆、贴几张图片、填一些字就可以了，用也是可以的，为什么还要那么费劲的设置图标呢？原因很简单。文字虽然也是一种图形符号，但相对于图标而言，文字肯定没有图标文那么方便简洁，既能展现要突出的意义又符合大众的审美，赏心悦目的同时还可以容易让人记忆深刻，在识别效率上有先天的劣势。视觉上的冲击力也是一方面，大家可以看下图想象一下只有文字没有图婊会是给人什么样的视觉效果？从功能分类角度分为：启动图标、应用图标、功能图标，以启动图标为例讲解：启动图标启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把“LOGO嵌套进系统图标模版”的图标。除了必要的规范掌握以外，启动图标的主体物设计就是LOGO的设计，已经超出了图标绘制本身的知识点一下是设计形式解析：A：文字形式适用了文字作为图标主体物的类型，通常是这类应用本身的品牌LOGO就使用了文字，所以这里就把字体照搬过来。B：图标形式对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。C：图形图标图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。D：插画形式对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。工具图标：即应用内有明确功能、提示含义的标识我们将风格分为线性风格、面性风格、线面结合、2.5D及微拟物风这五种风格风格1：线性风格线性图标，即图形是通过线条的描边轮廓勾勒出来的！多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。线性风格的图标不同粗细，圆角或直角带给人的视觉感觉是完全不同效果，可以看下图：·圆角图标圆角的图标给人柔和、亲切的一面。版本之后，粗线条圆角图标被越来越多的人运用，可以说它是当下较为流行的一种。直角图标直角的图标给人干脆、果断的一面。双色图标双色图标色彩可以选择App或者品牌主色和辅色。用于分类页面相比单色来说，多加一个色彩点缀，画面不会显得比较单调。且不会过于复杂、花哨。透明度图标通过区分图标的透明度或者是同色的深浅变化，来增加图标的层次，丰富细节。风格2：面性风格·面性-透明度叠加·面性-颜色叠加·面性-微渐变质感·面性-光影渐变质感这种带有光影质感的图标，常用于一些运营类或游戏的图标面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型风格3：混合风格（线面结合图标）·线面错位线性图标结合缩放错位的邻近色的面，增加了图标的层次感。相比单色线性图标更为丰富。线面渐变风格4：2.5D风图标2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用2.5D会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。炫彩渐变这是一个拗口的原创名词，找不到更合适的，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。实物贴图最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要再后面掌握它的做法。风格5：拟物风格虽然当下流行于扁平风格，但仍然保留了微拟物风格，并被部分行业或营销活动运用。拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确，所以自然顶部的相关图标使用拟物的设计形式会更贴合。图标的设计方式是多种多样的，除了以上的那些，还有很多需要我们慢慢的挖掘，比如：明星大头照、摄影图、游戏原画等等下边再来了解一下：扁平风格扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也相对于普通图标有更丰富的细节与趣味性装饰图标和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。装饰图标在识别性上的作用就是国内的界面设计环境，会根据运动需求设计进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。那么设计图标需要到哪些软件呢？UI主要使用的设计软件包含、XD/XD这两个软件是我们设计UI界面的主力。主要的功能是用来完成UI界面元素的排版，而不是创作和绘图。虽然它们都包含路径、钢笔、布尔、等功能（相对XD更完善一点点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，那是不可行的。刚入门的小伙伴不要着急从这两个软件入手。先掌握PS和AI，这两个软件就相对简单，在UI设计里边也比较常用，后面想要快速实现一些简单的图标时，自然懂得如何使用和XD。是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款“位图软件”我们会用PS设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。（零基础不知道怎么入手的可以说下，进期找到一套从软件介绍到入门的视频）和PS一样，也是UI设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比PS，它有更好的矢量操作支持，对于路径细节的调整上，是比较全面的，并且AI中的图形还可以直接复制黏贴到其它应用的画布中。看完还有不明白的地方或想了解的都可以私我，从事设计多年，资源有不少，现在准备清理网盘了。最后说下，除了正确设计出图标以外，高低阶的UI设计师之间的区别也包含图标设计类型掌握的。在开始学习前，可以扩散思维，不要局限在一个空间里，要学会慢慢的挖掘，只有这样，才能发觉更多的乐趣，就好比探索新事物是一样的道理哦