如何设计好小图标
小图标（程序内功能图标）的设计方法和注意事项，帮助设计师更好更快地掌握小图标设计的要领。
优秀的小图标应该满足哪些标准？
1.识别性：表意准确清晰，识别率高，不易造成误解；
2.可视性：保持设计的简单、现代、友好，在特定显示面积和显示环境下清晰可辨；
3.一致性：一套统一的设计语言、一致的细节处理；
4.设计感：造型、比例考究，有对比、有节奏感；
5.品牌感：将品牌基因注入到小图标的设计中，更能加深印象;
6.精确性：对以上各点的精确控制。
一、小图标首先要确保“易识别”
1.图标的传达含义功能必须放在首位。设计师们有时会过于注重形式，忽略了本身的功能，会导致图标难以识别。如下图，如果没有文字注释，你能看出来这画的是什么吗？
2.从实物中提取造型是我们做小图标的常用手法。但是我们在选取参照物时，要注意选取一个更通用的形象，而不能随意选取参照对象。如下图所示，同样是设计一个闹钟图标，左图是随便拿了一款电子闹钟作为参照，右图则是遵从了辨识度更高的通用型闹钟形象。
3.用户对图标的理解往往基于以前的经验，些图标已经在在用户心中享有普遍共识。在考虑图标形象时，要尊从大家的普遍认知，便于被快速的感知。
很多比较抽象的概念是无法绘制出来的，比如 PC 时代就用软盘来指代“保存”，一直延续到现在，尽管很多人没见过软盘，但是都知道这个图标表示保存。如下图所示，左图尝试做了些创新，可能比较有趣，但是引起误读风险也会很大。
4.对于更多复杂或抽象的功能来说，图形化的表达具有局限性，所以他们应该添加文本标签，或只使用文本标签来展示。以Airbnb 的 “故事” icon 来举个例子，他们选用了一个很有意思的小树叶，当没有文案说明的时候，想必一千个用户心里会有一千个哈姆雷特。
UserTesting（一家为开发者提供测试用户的创业公司）进行了一系列关于是否是要标签的测试，结果发现：
•对于带有标签的图标，88% 的情况下，用户轻点图标时可以准确地预测接下来会发生什么。
•对于没有标签的图标，这个数字下降到 60%。对于那些特殊的图标，这个数字只有 34%。
二、小图标造型——“简约而不简单”
小图标显示面积很有限，为了确保在特定的显示环境下依然清晰可辨，需要保持图标造型的简单、现代、友好。
1. 保持图标的简约和示意，不多不少刚刚好
图标设计理念的本质是简化形态-简化图标是出于降低学习曲线的需要。在大多数情况中，设计图标无需过度发挥创意,但也不能过于简单而降低识别度。如下图所示，过渡简化的图标如果没有文字标注已经无法判断他究竟是什么了，而过多的细节则会让小图标在实际使用场景中无法辨认。
如下图所示，绘制线性图标时，要保持图标的简洁可识别，千万不要使用双重描边。
2. 巧妙地造型往往都是由简单的图形组合而成
在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔。这会让你的图标更加规范，对图形结构理解更加深刻，后期更改形状更加方便。
3. 简化的图标依然需要适当保留细节
做图标是在做减法，但是如果你减去的部分影响到了图标的表意，就该思考如何才能保证图标整体简约概括的又能保留这些细节了。如下图，同样是表示 “抓紧扶好”，最右简单粗暴的处理已经完全表现不出这一感觉了，反而左边两个方案，简单的形状就很好展现出了“紧握”的细节。
三、从整体到细节，处处强调的“一致性”
设计师要尽可能让各异的小图标们尽可能形成风格、细节一致的一整套，但是也不能单纯为了统一而不顾识别度，更多的时候需要我们权衡利弊，找到两者之间的平衡。如下图所示，不管图标设计成风格迥异的，还是风格一致的，配合上文案都是可用的，但是各有优缺点。
1. 视觉大小统一
绝大多数小图标都是不规则的形状，所以不要简单地统一物理尺寸，而忽略视觉大小的统一。在进行图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。
比如：圆要略大于方形，长方形的要比正方形的略高或略宽。
2. 设计语言一致
细节上审美统一让你的设计看起来是一个整体。一套小图标不仅相互之间要保持统一，还应该和应用保持一致的风格。作为专业视觉设计师的你，在时间充足的情况下，千万不要去网上随便下载几个图标直接用，不管是面、线、抑或线面结合，都要确保风格一致。如下图，左图是 Spotify 早先的版本的 icon，线、面混杂，粗细不一。右图分别是后续版本修改后的图标（上），以及设计师 iconwerk 给出的优化方案（下）。
3. 细节上的一致
细节上审美统一会让你的设计看起来更像是一个整体。比如说都是圆形或者方形的角，圆角半径的具体尺寸（2像素、4像素、等等），一致的线的粗细（2像素、4像素、粗细搭配等），颜色填充样式一致等等。
四、让小图标更具“设计感”的几种常见方法
1.增加层次感
通过将两个面的衔接处挖空，就可以营造出层次感，可以让小图标不会像一张纸片那么单薄。如下图（右）尝试加了一些缺口，不仅增加了层次感，更方法丰富了icon的细节、增强了辨识度。
通过颜色深浅的不同，同样也可以营造出层次感，但由于稍显复杂，但这样的做法一般并不适用于Tab、工具栏等位置。如下图（右）色彩与层次都较为丰富，就更适合展示在界面更醒目的位置，比如作为项目分类入口。
2.增强对比
造型上可以不拘泥于全部使用同样的圆角或直角，不妨将两种性格对比强烈的形状组合一下，可能会产生不错的化学反应。如下图，都是 icon 中大量采用了圆润大圆角（或圆弧）与锋利直角的对比，不仅造型上有新意，还更具现代气息。
下图（左）主体采用粗线条，细节采用细线条，线条粗细的对比丰富了小图标的细节。
下图（右）通过高度对比的颜色，突出部分细节，而且更让图标具有层次感。
3.点线面混搭
icon设计大可不必拘泥于单纯的线性，或平面。不仅可以线面结合，还可以加入渐变，投影等各种效果。但是要把握好度，不要一味追求形式而忽略的icon的识别度和使用场景。
4.赋予小图标以动态趋势
如下图，适当微调了四肢的外轮廓就让原本比较呆板的小人拥有个动态趋势，更富细节、也更有趣了。
5.使用一些特殊的、有趣表现形式
比如，你可以让所有的图标都是一笔画出来的。
也可以采用特别的形状作为基本元素。
线条略向外膨胀或采用大圆角，可作出圆滚滚的可爱风。
可以尝试的思路或风格远不止上面提到的这些，更多可能还等待你去发掘。
五、将品牌基因融入小图标设计的几种方法
互联网产品同质化也相当严重，品牌塑造，品牌调性，品牌宣传，品牌的价值越来越被看重。作为一款产品中出镜率相当高的图标，也可以成为品宣的一部分。
比如将图标和产品 logo 结合，增加品牌曝光率；或者通过图标调性传达产品调性，在用户心智中塑造产品独有的特点。给小图标注入品牌基因关键是品牌特征的提取，其次则是对品牌特征的灵活运用，而对品牌特征的运用程度把控是使整个图标协调的重点。下面举几种常见的例子：
1. 提取特定形状
通过 对logo 或品牌元素提取特定形状，这个形状是固定的、具象的，例如圆形，三角形、甚至是logo本身等等。
2. 吸取品牌色
这招是最简单直接的方法，直接吸取品牌色作为视觉基因，以此来进行图标设计。
3. 抓取品牌风格特点
遵循logo或品牌风格，从中抓取其中一两个比较显著的特点，合理运用都小icon的设计中。例如网易云音乐的图标，是抓取logo上圆润的风格特点；小密圈则是抓取断线的风格特点。
从 iwork 的 logo 中，我们提取出两个特点：“断” 是指整个 logo 有刻意断开的地方；“层” 是指 logo 有不同的透明度，形成前后关系。而右侧一组小图标就是根据这两点设计的。
4. 从品牌中提炼基本元素
通过对 logo 或品牌元素提炼出特定形状或基本元素，合理运用到小 icon 的设计中。
举个例子：仔细观察，你会发现其实整个 logo 的每一笔开头都有一个共同的特征，如下图，而这个共同的特征就是我们要找的品牌基因。经过提炼我们可以得到我们要的基本元素：一个特别的矩形（三个小圆角，一个大圆角），然后可以围绕它延展出一整套小 icon。
再举个例子：天气图标很常见，但做得有特点就很难了。如果我从原品牌图标上提取了一个基因符号：“花瓣”。怎么把花瓣元素和天气图标完美结合？下图就给出了不错的解决方案。
六、精确控制以上诸多标准，合理利用各种方法
以上提到的各个标准并不是必要充分条件，要合理控制，平衡好他们的关系：
有些时候 “识别性” 与 “统一性” 之间的矛盾也是无法调和的，我们应该回到设计目标本身，权衡是“识别性”更重要，还是 “统一性” 更重要；
对比，层次，节奏感，同时全部做到似乎很难，时刻背负着这些标准去做设计只能让你在设计时畏手畏脚，无从下手，不如多在练习中寻找感觉；
不要盲目追求品牌感或特殊性，也并非所有涉及需求都需要你做到这些，要根据实际项目而定，有时的确是需要你设计出一套没有个性，易识别的小图标。
小图标毕竟展示面积有限，还确保造型简约，不宜杂糅太多手法；但不要局限在这些方法里，要勇于去做一些新尝试。
部分内容资料参考：
著名 icon 设计师的个人站和 Twitter
用品牌基因法做图标设计，高级UI设计师才会的手法！（升级篇）
http://www.uisdc.com/brand-gene-icon-design-pro
文章内还整合了网上了多篇文章内容，并根据我个人理解予以了修改，如有原作者觉得我的引用不合适，可以私信我。
纸上得来终觉浅，绝知此事要躬行。只有去大量的实践与练习才能真正掌握这些理论和方法！
