今天和大家聊一聊设计细节，每个提到的细节你们都能直接拿走，并且在项目中使用。
这个页面相信大家平时工作中都会做到，有很多图标放在一起，里面可能是一些常用菜单，这个设计有什么问题呢？相信看在这里的小伙伴，脑海里有无数答案？不统一，还是什么？我们来分析下。
首先从大家关心的统一性来说，没有任何问题，图形都是在规范的图标栅格里面，也非常的统一，那么问题出在哪里？
仔细观察，我们会发现「联系人」和「历史消息」的图标过于饱满，虽然他们尺寸一样，但是比「最近使用」这个图标要大很多，原因是什么呢？因为后面这两个图标从视觉来说他们的重量太重了，所以看起来会比较大。
所以今天我们在做设计时候，如遇图标瘦长或者圆形等不够饱满的情况，请酌情将图标撑满像素，来保证整体一致的视觉体量感。
如果图标较饱满的情况下，可使用微缩，来保证整体一致的视觉体量感。我们文中案例之所以出现这种情况，是因为没有定义出图形体量大小具体的绘制规则，所以导致图形过于饱满，看起来会显得视觉重量不一致。
所以我们第一步，对图形绘制规则进行优化，保证图形在页面中体感一致，我提供了 4 个基础图形绘制技巧和对应的辅助线参考图。
所以在实际应用时，可略微在可变范围内微调，对于过于饱满的图形，高度变低时，需要增加宽度来保证视觉重量相等。
这样调整后，整体的图标视觉重量就会更加均衡，也会更加规则。所以，今天如果你发现你们产品页面中图标大小体量不一样，或许是因为你忘记对图标体量进行规范。
图标我们在界面中使用场景很多，很多时候用大图标，有时候用小图标，我们该如何去定义小图标大小，大图标大小，这是很多同学非常纠结的。有时候就乱定，导致页面没有秩序感。
第一步，我们要先去梳理页面场景，看看哪些地方会用到图标，把全部场景列出来。
列出来后，我们根据你 APP 设计的最小单元的倍数来定义图标风格，比如支付宝最小单元是 4，所有间距都是 4 的倍数，那么在图标这里，也是同样的原则，全部的图标尺寸，我们根据 4 的倍数去定义几种大小，比如 24X24，32X32，44X44，56X56，72X72 等等，如果页面中不够用，同样的在 4 的倍数基础上进行新增。
我相信大家都有这种情况，一组图标在使用时候，会出现在各个场景，这个时候需要放大，甚至缩小，但是不知道放大后图标粗细该如何确定，直接放大，直接缩小会出现图标的细节粗细有问题，那么这种时候该如何处理？
直接放大缩小，图标粗细没有任何说法，而且会显得比例非常奇怪，如何去解决这个问题？
第一步：我们需要确定图标大小和线条比例，以支付宝为例，首先要确定图标大小和线条粗细比例为 14：1。当然每个比例是不一样的，你可以根据你们产品的调性去决定，如果你图标比较细，你可以设定为 10：1，这些都没有固定标准。
这样的话，假如你图标需要设计一个 140X140 的大小，那么你的图标粗细就应该是 10px。
如果你图标是 112 尺寸大小，那么按照 14：1 的比例，那么你图标线条粗细就应该是 8px，以此推动，通过这样的方式来保证图形的一致性和稳定性。
以上三个小点，是绝大多设计师忽略掉的，也是设计中不太注意的细节，但是设计的专业程度往往就是由这些细节组成，今天这 3 个技巧，看会了之后，你就可以直接在项目中去运用。
文章来源：优设网 作者：我们的设计日记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
不知道大家有没有被说过，设计做的不精致？拿图标举例，其实不精致的原因就是统一性没做好。我们总说做图标要统一，但是到底要统一哪些要素？有没有一个完整的自检表呢？以前我总结了 5 到 6 个要统一的要素，最近观察大家的练习之后，直接扩增到 9 个了，今天就以线形图标为例，看看我们需要统一哪 9 个要素。
大纲如下：
这个很容易理解，就是一组图标看起来大小是一致的。但是最近发现了一个比较重要的点，就是很多同学做一组练习，相邻的图标都差不太多，但是隔的比较远的图标放在一起就差很多了，比如下面这几个图标，就是逐渐变大的：
所以对于大小统一，我们必须要做到，一组图标里，任意两个图标拿出来都是大小统一的，否则就是不及格。
保持大小统一的方法见这篇 – 图标设计规范。
圆角统一也是比较好理解的点，无非就是圆角大小，像下面这两个图标：
如果圆角差很多，你很容易发现，因为都是差不多大小的矩形，但是我们很容易忽略一些细节，比如下面第一个图标的三角形，和旁边的日历相比，就过于尖锐：
这是图标里面很细的细节，所以容易被忽视，大家一定要重视。
语言统一你可以理解为设计风格统一，如果一组图标里面出现了多种风格，那会显得非常不专业。
比如下面这组练习：
大体看好像是一种语言，但仔细观察其实还是有很多细节不统一的，比如外轮廓上面有的有白色，有的没有，白色还分带描边和不带描边：
这就是在语言上不统一的案例，大家在做练习的时候，一定要想清楚你的语言是什么。
粗细统一就不用说了吧，基本就是用在线性图标线条粗的，比如像这种比较明显的粗细不一致，就不应该出现了：
这都是最最基础的问题。
疏密统一其实是很多新人朋友容易犯的错，比如下面这一组图标：
大部分地方是比较透气疏松的，但是只有第二个比较密集，这样就会让人感觉比较突兀，整体不够和谐。这就是疏密程度的统一性，一定要把握住节奏感，否则就会不舒服。
这个点一般用在断线图标上，也就是你开口大小的统一性，比如一个开很大，一个开很小：
那就证明细节没有做到位。
比例可以分很多种，比如颜色比例，像下面这个原作的颜色比例就没有太统一：
在小 y 优化临摹之后，达到了颜色比例的平衡：
再比如之前说的一个案例，粗细线条的比例：
在这样不统一的情况下，图标是一定不会精致的。这些都是比例统一问题出现的实际场景。
正负形也是没那么容易看出来的，举个例子，下面这组周楠做的图标，乍一看没什么问题，但是仔细一观察，其实我们会发现，白色面积的重量其实是不统一的，那个消息上面的“#”会偏重一点：
当优化之后，我们再看：
整体就会比之前统一精致很多。
角度，也是增加图标统一感的因素之一，最常见的角度统一方式就是按照一定的倍数来制定规范，比如 30 度的倍数：
再举一个角度其他方面的例子，在做下面这组图标的时候，最初没有考虑断线的规律：
所以看久了会觉得有些凌乱，于是我将断线处定为右下角 45 度，如遇到圆角拐角处，可挪动靠近拐角处进行断线：
这样我们就会看到所有的图标断线位置都大致出现在右下角的地方，最终效果如下：
很大程度上提高了图标的统一性，并且在延展执行的时候节省了大量的思考时间（思考在哪里断）。
但是对于断线的位置是否一定要规定其出现的角度，我觉得不一定，也可以从其他角度考虑，但最终的目的还是让整体统一和谐，且延展性高。
以上就是目前总结的 9 个需要统一的点，只要能把所有的统一性做好，精致一定是没问题的。
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。带着这个想法，我开始逛“避寒寺”和“追波”，找可以参考的作品。这套作品我挺喜欢的，作者还做出了 3D 视角的。
先分析一下图标的结构。图标有三层：底部几何色块、毛玻璃主造型，带有含义的白色图形。
再分析俯视角度时图标的表现，方便用工具表现。
最后是颜色的归纳。作者用了饱和度非常高的颜色，基本都在右上角最尖尖的位置。
分析完以后可以开始临摹了…因为造型比较简单，我没有临摹，直接创意发散做了另一套。选主题的时候我随便开了个 APP（当时打开的是微博），觉得个人中心的快捷入口图标主题可以拿来试试。我选了深色作为背景，所以这套图标用到界面会比较难适配，和原 APP 风格也不符合。在这里单纯利用主题来做练习。
做底部的几何色块时，形状可以尽量跟主图形相关性大一些，加强它们之间的关联性，如果实在没法关联的也不必勉强。
我降低了几何色块的面积，增加了多一层毛玻璃形状层，并且让白色的图形更灵活，而不是雕刻在毛玻璃层上。这是我理解了原作者图标的结构之后，自己进行的改变，效果还行。
做的过程中，发现草稿箱如果里面放一张白色的卡纸，视觉效果还不错，所以我又做了另一种效果。最终呈现出来的效果只有草稿箱比较出彩，其它很牵强。
拿「照片」这个图标来进行拆分，参数分别如下：
这是最后呈现的效果：
封面图参考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做会更逼真吧。
临摹一套图标的时候，要带着目的去临摹，分析原作者每一步的处理。然后把图标拆分成不同的变量，修改这些变量的时候或许会得到不错的想法。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章主路径如下：
这组图标非常有活力和创意，色彩很活泼，原作者是菜心。我也常用微渐变来做图标，但是没有尝试过加上描边，并且这种强烈的对比色也在我习惯用色外。临摹这组图标可以突破我的用色习惯。
我们先逐步拆分，再进行总结。
第一步，分析原作品的结构。
图标可以拆分为线、面和小元素。我在 sketch 做的，形状的线面转换比较简单。线跟面的图层要分开，因为面图层带有反光，而线图层没有。
第二步，确定光源的方向。
从作者的表现来看，光源在左上角，因此所有的图标应该遵循同一光源方向的原则。光源的表现会因为材质的不同而不同。比如「LIKE 灯牌」带有自发光、「铃铛」带有高光。所有物体的反光比受光面要亮一点，让人感觉很通透。
第三步，分析原作的颜色。
不要吸色，先自己调色。刚开始会有点难，但是这种练习会帮助我们提高眼睛辨色的能力，提高色感。对比自己和原作的颜色，发现我调色不够准确，没有做到不同颜色饱和度一致，渐变色跳跃比较大。这表示我还没有理解原作的用色，后续临摹的时候需要修正。
第四步，总结作者的设计语言。
分析完以后开始临摹。
先说一下体量感的问题，因为有很多设计师在做图标的时候会忽略这一点。常见的方法是拿图标框来限定，但是问题又来了，有的人限定得太死板，不会根据实际情况来微调。针对这种情况，可以拿别人的整套图标作品做反推，在临摹的时候，留意别人对体量感的把握。
定义了大概的体量之后，我会观察图标大致的形状和角度，凭印象先把造型做出来。过程中没有把原作品放在旁边，最多在忘记的时候去看一眼。这样做的好处是，可以发现自己观察的时候漏了什么（这个方法是跟菜心学的）。下图就是第一次临摹的草稿，orz…铃铛最不好画了。
拿着草稿来对比原图，把自己错漏的地方找出来。
统计错漏的地方，重新调整图标，达到 90%以上的相似度后，给图标上色。
做完这一步后，大概理解了作者做这套图标时的逻辑以及方法。我们可以开始做半原创的设计，在原作的基础上延展几个图标。我选择电商主题的「充值、签到 、赚钱、砍价」这四个图标来做。
我们先找参考素材。不管画图标、做界面，还是画插画，学会找参考非常重要。参考不是照抄，而是给我们提供灵感来源，切记不要凭空想象。有一天，团队的设计师跟我说她不会画衣服的褶皱，画起来总是怪怪的。我叫她上网找相似衣服的图片，看一下别人的褶皱和光影，她就茅塞顿开了。因为她总是用“原创”局限自己，没有找实物参考。
原创绝不是凭空想象，而是有源设计的融合。
结合作者的设计语言做延展图标，放在原作里面也不违和的话，就成功一大半啦。
接下来是原创时间～我们将作者的设计语言其中一些变量改变，会得出不同的结果。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。
网上现存不少关于图标绘制的文章和教学，但不是太笼统，就是太片面。即使看了很多这种碎片化的知识，也很难在我们的认知中对它有比较全面、系统的认识，所以大多数初级的 UI设计师，始终画不好图标。
针对这个问题，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快地上手图标设计。
本文共分为5个部分：
图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。
对于 UI设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。
在当下最常见的扁平化设计风格中，界面的实际视觉组成只有4种元素，图片、文字、几何图形、图标。
△ 由图片、文字、几何、图标组成的界面
可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI设计中除了插画元素以外唯一需要我们「绘制」、「创作」的元素，一涉及到这两件事，难度就直线上升了。
本来往界面里丢一些方方圆圆、贴几张图、填一些字，就可以把界面做出来了，比如 Clear APP，不仅工作量少，而且还符合极简原则，为什么还要吃力不讨好的设计图标？
△ Clear APP 的截图
这就涉及图标作用的探讨了，为了节约篇幅，更快进入大家最想看的重点干货，我就不长篇大论从上古时期人类与图形符号的纠葛开始写了，就谈对于图形界面本身，为什么图标有这么重要的地位，没它不行？
有两个原因，第一文字虽然也是一种图形符号，但相对于图标而言，文字实在太复杂了，在识别效率上有先天的劣势。再者，不同的语言，文字的长度也不同，如果换成阿拉伯语或者俄罗斯语，或许一行还装不下所有文字。图标可以以一种更高效的方式，将我们想要传递的信息进行浓缩，不仅易于识别，也能让界面更简洁，利于排版，比如下方案例。
△ 应用文字替换了图标的对比
第二点，就是关于视觉的观赏性。有些页面中，如果把图标去掉了，也丝毫不会影响我们的操作效率，以及对内容的理解。但没有图标，缺少这些点缀，我们就会觉得这个页面看起来太枯燥了，不得劲，最好的例子就是应用的设置页了，见下方案例。
△ 设置页有图标和没有图标的对比
既然知道了图标的作用和重要性，那么接下来，就要进一步了解在工作中我们要设计哪些图标。
可以先划分成三种大类：
下面，我们将对它们分别进行介绍，以及展示相关的设计类型，方便读者在开始学习具体设计前，对 UI设计会创作的图标有更全面的认识。
首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确功能、提示含义的标识。作为最常见的图标类型，我们就不需要做太多的说明了。
△ 常见的工具图标
虽然理解起来容易，但是它所包含的设计样式却并不少，可以把它们归纳成线性、面性两个大类，再分别进行细分。
1. 风格1：线性风格
线性图标，即图形是通过线条的描边轮廓勾勒出来的。多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。
下面我们把它们罗列出来。
△ 线性风格的工具图标
2. 风格2：面性风格
面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。
△ 面性风格的工具图标
3. 风格3：混合风格
当然，在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。常见的样式类型如下：
△ 混合风格的工具图标
和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。
比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。
△ 装饰图标在识别性上的作用
还有就是国内的界面设计环境，会根据运营需求设计进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。
△ 节日活动中的装饰图标
装饰性的图标设计，虽然没有明确的规范该怎么做，效果怎么好怎么来，但最常见的类型有四种，下面分别进行介绍。
1. 扁平风格
扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也比普通图标有更丰富的细节与趣味性。
△ 扁平风格的装饰图标
2. 拟物风格
拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，所以自然顶部的相关图标使用拟物的设计形式会更贴合。
△ 拟物风格的装饰图标
3. 2.5D风格
2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用2.5D会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。
△ 2.5D风格的装饰图标
4. 炫彩渐变
这是一个拗口的原创名词，找不到更合适的形容，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。
使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。
△ 炫彩渐变风格的装饰图标
5. 实物贴图
最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要在后面掌握它的做法。
△ 应用摄影实物的装饰图标
最后，就要说说启动图标了。启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把「LOGO嵌套进系统图标模版」的图标。
除了掌握必要的规范以外，启动图标的主体物设计就是 LOGO 的设计，已经超出了图标绘制本身的知识点。所以，在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习，这里我们先来了解一下它有哪几种设计形式。
1. 文字形式
使用了文字作为图标主体物的类型，通常是这类应用本身的品牌 LOGO 就使用了文字，所以这里就把字体照搬过来。
△ 文字类的启动图标
2. 图标形式
对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。
△ 图标类的启动图标
3. 图形图标
图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。
△ 图形类的启动图标
4. 插画形式
对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。
△ 插画类的启动图标
5. 拟物形式
虽然现在扁平化的设计占据主导地位，但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确。
△ 拟物类的启动图标
当然，还有其它的数之不尽的启动图标设计方式，比如明星大头照、摄影图、游戏原画等，但理解上面这些类型就够了。
前面介绍的三种图标，就是今后在进入 UI 行业设计的内容。虽然图标看起来简单，但可以玩出的花样不少。除了正确设计出图标以外，高低阶的 UI设计师之间的区别也包含图标设计类型掌握的多寡。
所以，在开始学习前，不要将设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等待你们去尝试。
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了。通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这4款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分。
1. Sketch / XD
这两款软件是我们设计 UI 界面的主力。但大家一定要记得，它们主要的功能是用来完成 UI 界面元素的排版，而不是创作和绘图。
虽然它们都包含路径、钢笔、布尔运算等功能（Sketch 相对 XD 更完善一点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，往往就束手无策。
所以，我建议所有学习 UI 的新人，都不要从这两个软件中入手，而是先掌握 PS 和 AI，后面想要快速实现一些简单的图标时，自然懂得如何使用 Sketch 和 XD。
可以说，PS 和 AI 的应用决定了我们图标设计的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
2. Photoshop
PS 是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款「位图软件」。后续的文章中会提及，在界面中采用矢量格式的图标是最理想的，而 PS 针对矢量的操作并不便捷，比如将矢量图层复制到其它软件中。
实际项目中，我们会用 PS 设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。
绘制图标需要用到的 PS 功能并不太多，需要在前期学习这个软件的过程中加以筛选，重点是以下知识点：
虽然 PS 在实际项目中是用来画复杂的图标，但并不妨碍我们使用 PS 从最基础的图标开始画起，因为想要熟练掌握上方的知识点，简易的工具图标是最好的磨刀石，之后再学习 AI 的操作，就可以更快的上手。
3. Illastrator
AI 也是 UI 设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比 PS，它有更好的矢量操作支持，对于路径细节的调整上，是最全面最细腻的软件，并且 AI 中的图形还可以直接复制粘贴到其它应用的画布中。
如果掌握了上方提及的 PS 基础，那么学习 AI 也就轻松了不少，其中，AI 设计图标中有三个特殊的功能是需要重点掌握和学习的：
花几个晚上，掌握了 PS 和 AI 的相关知识点以后，就为我们后续的学习提供了技术支持，可以进入下一阶段了。
这是图标系列文章的第一篇，信息量不算少。所以我们在结尾再总结一次，方便大家记忆。
文章来源：优设网 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。
大家好，我是Clippp。看到好的图标我们会习惯性地截图保存，但随着收集的图标越来越多，会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题！
对图标进行分类时，普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标，样式很简单，但可以划分到多个类别中。
首先将图标按尺寸大小分为两类；
继续细分对应的面性、线性、线面结合、扁平、拟物化等类型；
最后选择标准、容器、渐变、3D、手绘、阴影等风格。
利用这种结构层级，可以明确定义图标类别。
图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷，但把它缩小到16px，这些酷炫的效果都无法呈现出来。
小尺寸图标用作UI控件，起到引导功能或装饰目的。
利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中，所以在小图标分类中没有展示。
大图标利用尺寸上的优势能展示更多内容，分为多种组成形式。
1.2带有背景色的面性图标
1.2渐变线性图标
1.3等距线性图标
1.4手绘线性图标
1.5断线图标
1.6双色线性图标
2.2带有背景色的线面结合图标
2.3错位线面结合图标
2.4色块图标
2.4单色线面结合图标
3.2带有容器的扁平化图标
3.3等距图标
3.4半阴影扁平图标
3.5长阴影扁平图标
希望大家能对图标的分类及设计有更全面深入的认识，从而构建一套完整的图标思维体系。
文章来源：站酷 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为一名UI设计师，图标设计是我们刚入门就必须学会的必备技能之一，它是用户界面中绝对不可或缺的元素。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。随着扁平化设计风格的普及，图标的风格越来越简约，看似简单的图形，实际要准确的表达含义，也是需要注意很多细节的，在如今大同小异的图标中，如何让你设计出的图标具有说服力也是一门学问，今天就给大家全面的剖析一下图标的知识，让你做出的图标有理有据。
1、图标的定义及分类
2、图标的设计规范
3、图标的性格走向
4、图标的评判标准
5、总结
图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本搭配相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。
在数字设计领域，图标作为网页或者UI界面中的象形图和表意文字而存在，是确保界面可用性的基础设施，也是达成人机交互这一目标的有效途径。
释意性图标是用来解释和阐明特定功能或者内容类别的视觉标记。它并不是一定被点击可交互的UI元素，在很多时候只是有辅助解释其含义的文案。在不搭配文本的情况下用户会借助这些图标来获取信息。不过有时候图标表达的含义可能还不够完整或者清晰，所以会将图标和文案搭配起来一起使用，这样可以大大降低误读的可能性，释意性图标一共可以分为以下三类：
2-1-1纯图标：
例如火球买手APP中的店家“特定标签”，以及图文展示下的“观看数量图标”与“收藏图标”，它们并不需要用文字去解释，用户也知道它表达的是什么。
2-1-2图文结合：
例如造作APP中的“购物车图标”与“收货地址图标”，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。
2-1-3纯图标（图标内含文字）：
例如开眼APP中视频封面左上角“开眼精选图标”，它把图标与重要文字结合在一起展示给用户，看起来不仅十分具有个性，而且用户对其理解性也非常强。
交互图标的最大意义在于可以引导用户进行交互行为，是在产品中不可或缺的组成部分。它们可以在用户不同的操作手势下帮助用户执行不同的交互过程，这种类型图标也是APP中最常见的，常见的交互性图标如：搜索、底部标签、返回、点赞、收藏、扫一扫等。
装饰性图标仅仅是用来提升整个界面的视觉体验，它并不具备任何功能性。这类图标往往是为了迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极，最为大家所熟悉的就是滴滴出行APP中的“小车图标”。
图标基于基础样式（线、面、线面结合）+表现手法（颜色、透明度、投影、叠加...）划分，一共可以分为20种类型，每种类型的展示方式也都各有不同。
线性图标通过线来塑造轮廓，在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。
面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。
线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。
这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，用户可通过对现实事物的联想，快速领会图标表达的意图。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰，所以现在拟物化的图标很少运用在APP界面之内。
相较于拟物风格不会有太多复杂的视觉元素，层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉，在界面设计中，一般在面积比较大的区域我们会使用加入轻质感的图标。
合理的遵循图标规范可以有利于设计师之间合作使用，指导设计师如何规范的去设计图标，以确保企业所有产品图标风格的一致性和可用性达到统一，同时也是为了后续产品更新迭代有可参考的地方。
为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。这些尺寸并不是固定的，在设计中也会存在特殊的尺寸，例如谷歌在台式机上设计图标，当鼠标和键盘是主要输入方法时，就会使用密集布局，基础网格就会缩小到20。
下面就以常用的24x24为大家展示：
网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。
*在使用常规图标时避免一部分在出血位。
*在使用多个元素的图标时，避免图标拥挤我们可以让其部分出现在出血位，确保它们之间有足够的空间。
keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。
在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：
当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。
在设计一整套系统化的图标时，我们一定要注意图标的像素大小，要运用相同的网格尺寸设计相同线条粗细的图标，包括曲线，角度以及内部和外部笔划。这样图标看起来才更统一，也有利于后期图标的迭代更新。
当然，描边像素的粗细并不是绝对的，如果我们要做一些密集型的图标时，可以考虑适当的缩小线的像素大小。如下，我们设定的系统图标线条粗细为3px，当你用3px作用于指纹图标上时就会显得非常拥挤，并且在视觉上比其余图标更重，这时我们就可以把它的线条像素降级，设定为2px。
我们在用矢量工具绘制图标时，要仔细看好图标的网格尺寸和图标结构尺寸，避免产生小数位。
曲率简单来讲就是图标中带有圆角的边角度数，只要是带有圆角的矩形就都会有一定的曲率。在图标中曲率的呈现方式有两种：外曲、内曲。
外曲与内曲并不一定同时存在，在特定情况下内部结构可以是直角（无曲率）。如下图：当内部结构都是圆角时会发现整个图标稍显臃肿，这时我们可以把部分内部圆角直接变为直角（也可以改变曲率大小），改变后就会发现图标的整体结构会显得更加协调。需要注意的是如果一个图标做了这样的处理，在同等情况下的图标都要做一样的处理，不然图标会显得非常杂乱，不统一。
根据像素的网格线来设置两条对角线，会让你的图标看起来更清晰。在倾斜的角度选择上，不要出现7.8°、14.2°这样的奇怪数值。我们可以将15°的增量用于倾斜角度（也可以采用其他有规律的角度方案），这样会使得整体的图形变化显得更加规律，也能够满足不同图形的角度需求。
在做很多图标时都会用断点的缺口来打破“全包边图标”的沉闷感，使图标具有透气性，如果想给图标添加断点，那么要保证断点的形态保持一致。
确保图标内每个细节和元素都有足够的空间，图标的相邻元素之间的空间在整个图标中不应太小，我们可以定义最小间隙以避免轮廓“粘住”，在24px尺寸下的间距不得小于1px。
如果在做图标时牵涉到了透视需求，那么就一定要保证图标的透视角度一致。
非中心对称图形物理对齐时视觉上会有偏离感，多个不同形状的图标视觉重心并不在一条水平线上，需要微调才能保证平衡感。
在图形的处理上，不要留有多余的节点，干掉多余的节点，保持图形的整洁。
ICON命名要求较为严格，涉及到我们切图给开发，所以我们命名争取做对，且需严格遵守规则，正确的命名原则：类型_位置_功能_状态_大小
每个App应该有自己独特的产品气质，同样图标性格也应当与产品气质保持一致。图标性格一共分为了4个走向：粗旷（粗直）、活泼（粗圆）、商务（细直）、精致（细圆）。
图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为直角。
粗旷类图标让人看起来非常饱满、刚正，它更多适用于男性、潮流、有格调类型等产品中。例如VSCO，它的底部标签栏图标全部采用了粗线条的直角设计。
图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为圆角。
活泼类图标让人看起来十分容易接近，能让人感受到温暖、舒适，它更多适用于电商、社交、母婴、二次元、娱乐、直播、美食等产品中。例如闲鱼，不管是在LOGO字体的处理还是APP内部的图标处理，都是采用了线条较粗的圆角设计。
图标结构特点：线条较细、拐角为直角。
商务类图标让人看起来十分规矩、严谨、值得信赖，它更多适用于新闻、政府、商务、工具等产品中。例如工具类的思维导图APP，它的可操作按钮都是商务类的图标。因为这类图标的特性，所以目前我们很少在移动端上看到它，它更多适用于PC端的后台界面中。
图标结构特点：线条较细、拐角为圆角。
精致类图标让人看起来非常干净、柔和、显得高级感，它更多适用于旅游、品、艺术、领域垂直等产品中。例如airbnb，在APP应用中大部分都采用了精致类图标。
当图标设计完后，我们应该如何去评判一个图标的好坏？很多设计师并没有完整的评判体系，其实我们可以从这五个维度对图标进行评判：识别性、图标气质、协调性、一致性、品牌调性。
图标最主要的用途就是辅助用户理解信息，特别是对于当图标单独存在时，一定不能让用户产生疑虑。要想图标达到高识别，我们可以从这2个方向入手：大众认知隐喻、真实世界映射。
在互联网普及的今天，许多界面的隐喻图标已被广大用户熟知认可，对于这类隐喻图标用户不用思考身体就已做出反应，我们在设计图标时可以从隐喻图标中添加修改部分元素，从而形成新的图标，这样既能保证图标的识别性，也能做出差异化。
选择真实世界中的物品映射，能使人下意识对图标的作用有近似预期，降低学习成本，提高识别度。
每个App应该有自己独特的产品气质，而我们所做的图标就是要跟随产品的气质。例如当你要做一款二次元产品，你的图标气质就应该偏活泼、可爱、萌、青春，而不是刚硬、严谨、规矩。
一致性是图标的基础，我们在绘制整套图标时要确保它们的基础属性全部一致，细节统一，图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性，就要从以下七个方向去评判：尺寸大小、图形角度、拐角（曲率）、描边、间距、透视、颜色。
3-1 尺寸大小：网格大小是否统一、是否遵守图标的keyline规则。
3-2 图形角度：是否遵循设定的角度规范（15°的增量用于倾斜角度）
3-3 拐角（曲率）：拐角的曲率是否统一，如果图形太多且复杂，那么我们可以根据图标的特性去设定曲率的规则，例如可以设定当边角像素在1-2px时内外曲率为2px；当边角像素在3px时内外曲为2px，内曲为1px；当边角像素大于或等于4px时，外曲为2px，内部则为直角。
3-4 描边：描边大小是否一致。
3-5 间距：是否遵守间距规范。
3-6 透视：透视是否一致，避免在同一套图标中出现正视图/侧视图混杂的情况。
3-7颜色：在图标的配色上要保持一致的规律，采用相同的颜色是比较常见的配色方式。如果采用不同色相的配色方式。也需要保持整体的配色协调，避免出现饱和度、明度反差过大的配色。
一致性代表的是图标的基础，而协调性则代表图标的整体状态，协调性的呈现状态是验证一致性是否合理的标准，当协调性存在问题时，我们就要反过来查看一致性存在的误区并给予修改。在图标的协调性上我们主要审视这三点：视觉大小、饱满度、透析感。
视觉大小对标的是一致性的尺寸大小与描边大小，当你发现图标视觉大小不对等时，你就要回过去查看你的网格与keyline是否运用正确，确保正确后再查看你的图标是否按照keyline的规范绘制以及描边大小是否一致。（同样尺寸下的图标，从光感上来看描边粗的图标视觉偏大）
饱满度对标的一致性的间距，当你发现图标不够饱满时，你就要去查看你设定的间距值是否偏大，是否合理。
透析感简单来说就是留白区域。透析感对标的也是一致性的间距，当元素的描边过大时，我们就要合理的设定间距的最小值，不然整个图标就显得非常臃肿。
品牌调性是我们经常提到的纬度，我们打开很多APP都会发现他们的图标设计都非常普通，没有任何特色，过于大众化，虽然都做了一些形式上的改变，但总是与品牌缺乏联动性。其实我们可以结合品牌调性，在图标上做更多的联动、创新。
色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。
当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的logo印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO。
我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。
品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，就把音符作为首页图标。
如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备引导含义，必须配合文字一起出现，这样才能让用户能易理解。
图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。
如果品牌中含有吉祥物，我们可以提取吉祥物的外形，把它用于产品的图标中。例如盒马，它就把盒马的吉祥物做了风格化的处理，放于APP的首页标签。
设计师对自己做出的所有设计都必须要有理论支撑，图标也不例外，一套优秀的图标是设计师不断沉淀的结果。看完本文章后，如果大家想要去练习图标，建议找大厂的图标放在keyline里临摹，真的会让你收获不少。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
全新的2021已经到来，在这个适合展望未来的时候，淘宝也迎来了品牌形象的升级，一个万象更新的淘宝正在向我们走来。
全新的2021已经到来，在这个适合展望未来的时候，淘宝也迎来了品牌形象的升级，一个万象更新的淘宝正在向我们走来。
“淘宝直播很有趣味”，“淘宝人生很新潮”，“淘宝更好逛了”越来越多的用户在感受淘宝的新变化。新淘宝，让用户在“淘好物”过程中更能感受到“逛”的乐趣，从产品、直播等多场景多维度带给用户全新体验。作为淘宝的镜子，我们的品牌也伴随着产品的升级，在设计层面表达了全新内核。
在新淘宝的大背景下，设计的挑战在于如何将抽象的心智具象表达。此次品牌设计将围绕“连接”“开放”“有趣”三大设计理念透过字体传达淘宝的品牌新内核。
连笔&连接
在新的字体中将有粘连但又不够流畅的笔画结构，让它们“一气呵成”起来，通过连笔来表达“连接”，它寓意了新淘宝要更好地连接商业、用户和内容。
空隙&开放
“通透”是新的字体比较直观的感觉，让字体本身结构上有“呼吸”的空间，它代表了新淘宝对外能够提供充足的空间，同时也将生态体系打开，从而吸收更多的资源共赢共创。
弧度&有趣
新的字体在弯折笔画的连接处做了弧度处理，让整个字体看起来更加有活力，它要展现的是新淘宝将产出更加丰富多样的内容，让消费者能体验到更多趣味且好逛。
很荣幸本次升级邀请到了国内著名的字体设计厂商方正字库与知名品牌设计公司MetaDesign一起联合完成我们的LOGO设计，整个过程中都提供了非常专业的指导。
全新“淘宝”品牌标识，充分融合了中华传统书法文化和现代的设计语言、设计手法，呈现出多元、丰富、有趣的品牌面貌。
全新升级的“淘宝”特别注入了自然书写的笔势，将写意融入设计之中。在设计上借鉴了行书的技法，在字体的笔势相承之处运用连笔书写，线条流畅自如，笔画之间气息贯注、流动和谐。
连笔
字体部件的设计突出了笔画的血脉与气势，字体起笔处注入能量，转折时意气相聚，呈现出蓄势待发的姿态，末尾的钩画收笔果断，整体给人一种势如破竹、一气呵成的视觉感受。
蓄势
“淘宝”横画起笔处采取直切手法，如逆锋蓄势，运笔时线条微弧上扬，收笔处笔画轻提，笔势流丽、焕发风采。
横画上扬
新“淘宝”的设计细节精微生动，通过适当的减细、避让，字体笔画结构紧密得当，布白停匀、筋骨相谐，穿插避让恰到好处。
避让
两个单字点画的笔形浑圆一致、遥相呼应，形成左右顾盼的姿态，文字之间脉络贯通，构成一个有机的整体。
呼应
中英文字标互相呼应；英文字标需要足够简约才能满足LOGO以中文为主，英文为辅的传播需求。
优化LOGO的笔划及布白，提高LOGO在数字端上小尺寸下的可识别度。
当淘宝的中文字标设计逐渐成型，我们希望英文字标能承载相同的设计理念。
‘T’的横画呼应中文的横划特征:微弧上扬，以流畅的圆角收笔。
‘a’维持双层结构,更能与相邻的‘o’更能区分，保持高的视别度;顶部的拱形弧线与淘字的‘勹’部笔势互相呼应。
开放’o’字的内白，平衡笔划粗细的变化；确保外轮廓的弧线图滑流畅，使造形更丰富生动。
升级后的英文字标彰显中文字标的设计精髓，与时并进。
新淘宝，新品牌，新形象。为了能够让用户对于品牌有更具体的认知，此次品牌升级还创造了淘宝自己的超级符号，结合业务丰富的场景，让视觉语言更具专属性和多样性，让用户更好的感知到，一个更连接用户、更开放平台、更充满趣味的新淘宝正在走来。
文章来源：UI中国 作者：AlibabaDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
