UI设计图标有哪些需要关注的知识点
新闻来源：优漫教育
日期：2021-10-10
UI初学者设计师开始充电！设计者带新手时必讲的入门指导，包括图标的分类。设计技巧要点及如何设计成系列图标！
UI的一个重要组成部分是图标，随着平面设计的发展趋势，越来越重视图标的简洁和寓意的表达，平面图标已经占据主导地位。每个设计者在不同的阶段所考虑的重点都不相同，我将图标设计分成了两个阶段：初级和高级，这样分是为了有步骤的学习和提升，当然，能人的话一步一步地进行，对新人来说会比较难，需要实际指导与自己的经验总结。虽然我不会花里胡哨的语言，但我可以分享一些实用的基本方法，也是这几年会给同学们反复必讲的辅导，有自己成熟方法表达的设计者可忽略这里，先说初阶设计关键点。
一、概念范畴。
大多数平面图标只不过是剪影显示而已，这里的重点还是讲图标的形状设计，而不是颜色，因为一切都先有形，然后再考虑。形体不好再如何创造整体风格就白费力了，好比建筑造型和装饰之间的关系，而色彩等营造的风格可以另起文章分析。图示形式上不外乎两个典型的类型：平面和线条。利用这两个基本元素去造型还可以进行各种组合的不同表现。组合式造型一般具有单体造型.多种元素的组合造型，线与面间的独立和变化。
二、简单化微写实图标。
这种类型一般为整体色彩表现，造型与组合较为写实，并非纯粹的剪影，是由写实过渡而来的简单化，也是近于剪影、平面、简单化设计，在此主要是利用平面和色彩进行造型设计。纹理样式也有6种(已有人分析)，大概是纯平面.折叠.轻质纹理.折纸风.微细立体。这类剪影好画很多，也比较容易塑造风格，更多的是在色彩方面有得发挥和考究，用在界面上也是为突出。也是近几年很流行的一种二维.三维装饰表达方式，叫做“低平面造型”，感兴趣的人去搜索一下。
上述元素的组合，如下图所示，当前为2个元素——信封和信纸，如果还需要添加任何功能状态提示，在右上角多加一个小信息提示。由于元素越多越复杂，其表达的意义也就越多，而且还会影响造型的移动。无论多少元素总是有多大的物体，其它的都是次要的，不同的是，它们的尺寸也不同。
三、正、负形的剪影图标。
这种类型一般为单色显示，当然也有合成色。它更精练抽象、言简意赅、高度精炼精炼、讲究表象意境、有理解的门槛。因此，设计上就很困难了。很讲究设计的理性和感性之间在功能传递上的逻辑思考。又是UI领域所谓的现代简约主义的代表，注意到，没有把握好就变得很“空”，把握好就是时尚feel啦~。
四、负数图标。
正是以线绘出的图形，高度的轮廓概括，都与所需要的画骨一样，也称为线形图标。负形状剪影是一种讲究而又难于表达的样式，如果画得不好就很容易俗气和简陋。
五、正形图标
在平面上画出图形，也有和线的综合表现情况，自己按需创造改变吧。一般情况下，在负形图标之间进行转换，移动tab上很常见，比如ios7。
好处：简洁、新鲜、优雅；现代(尽管在古代有高度概括的符号表现形式，这里指的是因特网上的一个全新应用)；扩展了设计和含义的综合含义；完成一些抽象词汇的图形传达。
图示是上载到云端的意思，这里的主要对象是云，所以箭头和云量的比例不一样，上载箭头是辅助图形。懂得对多元元素主次关系的界定，才能把握整体造型走向。一般基础表现为以上两种，然后在实际绘制时根据自己的喜好和设计进行融合，能够得到更丰富的表现。
六、技术设计要点。
1.绘制关键节点图。
拟物化设计就是画出尽可能冗长的细节，追求丰富和相似性。与剪影图标相反，以简洁的方式绘制。但细枝末节就没有了，不是了，而是更细心认真地注意每一笔，而且越来越文雅。下面举一个剪影图画图示的方法，3步就能搞定，看起来又简单又难，简单的就是画出参考轮廓，保持基本的辨识，步骤很少；难的是这个调整过程与产品环境的融合性、易用性，以及你自己的创意想法。
谈到简单点，就是去繁择简和经过思考对设计过程的改造。并以锐利的目光抓住基础才能抓住造型的关键点，雏形出来后再根据创意调整。
2、提取精华勾画轮廓。
一般是基于已经画好的参考图去设计一个图标，就可以对你喜欢的造型参照物进行分析，首先抓取参照物中的关键节点，几何形状画出相似的基本图形。
3、调线时要优雅。
基本雏形出来后开始加入自己的思路来调整线锋，线条走向决定造型。在这段时间，必须对多个版本进行调整。设计者们精巧而纠结的处女座在此大汗淋漓，不断调整对比，挑出一款优品再继续下一步。
4、增加特殊的细节出风格。
再来塑形，便是画龙！形态特征在这一步要完成。
对新老设计者来说，这样的方法是比较可取和好用的，交互式设计师也可以这样入门哦！特别是步骤，能不能出雏形？以下是其它案例设计方法的欣赏，和我上面总结的同样道理。
5、精细的基本要素。
精巧就是精细。这个看起来很简单的图标其实很难做到，但是了解了这些基本要素之后，你就能完成一个合格的图标。一个好的图标就是小心小心的对每一笔每一笔像素都锚定，尽量往精致优雅的方向努力吧~。
6、锐利清晰。
需锻炼强健的眼睛，使你的火眼金星捕捉每一像素的差值，使像素满格即可清晰地呈现，通常会遇到下列3种情况，这也是影响图标基本质量的问题。
1)轮廓不清。
图示必须使用矢量绘制，但初学者容易犯的一个错误就是图示模煳不清，也不清楚为什么。实际上是因为矢量边缘模煳不清，也是由于个人作画的不好习惯所致。为了避免此问题，您必须在画布上绘制图形，并且不要直接将图标缩放，甚至改变尺寸也要放大画布调整路径的锚点，重复检查和修正1px网格是否对齐，而非0.1~0.9px，只有满足1px格才会产生虚线。而且圆的绘制增加十字架4个边角对齐即可。
2）出现倾斜的情况。
斜线条也会有模煳不清和细致入微的区别，其实就是看不清问题，也许很多人都会碰到图形进行倾斜效果的时候，是有锯齿的，多角度的对比下，会发现哪个角度更清晰。还能把图层做两层叠加，会很犀利哦~。
3)像素不足或多余。
所有这些都是为什么像素虚像像素虚线一样清晰，下面这个例子是一个箭头在小尺寸情况下可点阵矢量像素绘制，如果是大尺寸(例如上面的箭头示例)可以直接画笔画。
