如期而至，这是标签栏控件总结的第二期。这一期真是掏空职业经验，希望对你的工作有所帮助。
这一期我们来聊一聊标签栏中的关键元素——图标。
图标其实存在于界面中的许多地方，但因为这一期主要分析标签栏，所以我会借标签栏中较主流的图标样式，总结一套图标制作与落地方法。这些方法在图标制作过程中都是相通的，大家可以举一反三。
1. 图标样式
图标具体样式风格的定义是非常主观的，网络上也流传着许多的教程教大家如何设计五花八门的图标，所以在这里我就不再赘述了。我主要来总结一下基础的标签栏图标一般有哪些样式变化。
我调研了诸多的应用程序，发现主流的 APP 标签栏样式变化，大致分为以下五种。其中占比最多的是「由线型转面型」。
调研的应用程序中，所有使用到线性图标的应用程序，都将描边粗细限制在 1pt-2pt 之间。
2. 图标视觉大小
上一期我们讲到，iOS 定义了一套标签栏图标的尺寸规范。
iOS 在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。
那么为什么 iOS 会根据不同的图标形状给出不同的图标尺寸呢？因为 50px×50px 的正方形比 50px×50px 的圆形面积更大，所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小，正方形要做适当的面积收缩处理。（矩形同理）
于是我们看到许多平台都推出了图标辅助网格规范 ¹。其实如果遵从「面积相等」原理，理论上所有的图标网格都应该由下面这一套推理公式得出（以Material Design 标准图标网格为例）：
但实际情况是，不同平台的图标辅助网格规范建议尺寸都有一定的差异。原因就在于，虽然有时候我们参考「面积相等」原则对图标视觉尺寸进行了规范，但项目落地后发现视觉上可能还是有一些不协调，所以最终设计师还是会凭借自己的主观判断再进行微调。
记住：好的设计作品是理性的设计理论与设计师本身感性的碰撞结果，二者缺一不可。
3. 图标输出尺寸
iOS 规定标签栏图标的输出尺寸统一为 31pt×28pt；Material Design 规定标签栏图标的输出尺寸统一为 24dp×24dp。
但我们发现，在借助了图标网格解决了图标视觉大小的问题之后，每一个不同形状的图标，尺寸其实是不同的。为了方便前端落地，我们在输出切图文件时，要保持每一个图标文件的输出尺寸是相同的。该怎么办呢？
于是我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素，正好也帮助我们规避了图标落地后，切图边缘像素可能被截断的现象发生，所以我们称这个区域为「安全边距」。
对于安全边距的规定：Material Design 全平台规定图标的安全间距统一 2dp；iOS 则根据不同的图标使用场景给出的不同的图标网格和图标安全间距 2。
标签栏的图标一般分为静态图标和动态图标两种。
静态图标的实现方法相对容易，可以与前端沟通确定本次项目交付的标签栏图标文件是采用位图还是矢量图。如果是位图建议交付 .png 格式文件；如果是矢量图建议交付 .svg 格式文件。
使用位图时请注意以下两点：
不同项目环境输出的切图套数不同
请注意：这里我所提到的倍率全都是「绝对倍率」，这个概念非常关键。
「绝对倍率」指的是：以上所有的倍率都是针对 @1x 设计稿下的输出倍率尺寸。而当你使用 @2x 作图时，为了保证「绝对倍率」不变，你的切图输出倍率就应该设置为 @0.5x/@1x/@1.5x 。
如果你在 @2x下作图，却依然保持输出 @1x/@2x/@3x 的切图，那你输出的文件尺寸最终其实是 @2x/@4x/@6x。
有一点绕的话，我们以 Sketch 导出位图切图为例：
所以如果你日常使用的是 Sketch，也是用 Sketch 原生导出工具，那你的切图预设应该根据你的作图尺寸而定，见下表：
如果你日常使用的是 PS，用 Cutterman 切图，那么 Cutterman 会自动识别你当前的画板，然后根据它的宽（横屏情况下是高）来设定它的基准分辨率。那么你在任何情况下输出 @1x/@2x/@3x 的切图，其实都是「绝对倍率」，不用像 Sketch 当中一样换算。前提是「设置当前画布为：Auto（自动识别）」。
假设你在 @2x 下作图，执意不管不顾「绝对倍率」，又忘了交代前端人员手动处理切图尺寸的话，那你所有的切图尺寸实际都是设计稿所需图标尺寸的2倍。就算前端小哥帮你手动处理了切图尺寸，每一张切图所包含的像素信息，都比项目真实所需的要多很多，完全就是在徒增所需切图文件的大小。
注意切图文件大小
切记，公司的线上项目中，用户从服务器下载的每一单位的流量都是要公司花钱的，所以许多项目管理者都是很在意控制线上文件大小的。于是压缩切图是 UI 必备的技能之一。
虽然图标的文件大小一般只有几 KB，但是项目大了难免积少成多，所以在真实项目中，不管任何切图我都会手动压缩一次。
这里推荐一个压缩 .png 文件大小，但几乎不会产生失真的免费网站 tinypng³（是我曾经深爱的一位前端小哥推荐给我的，在此表示感谢）。
位图切图会面临交付的倍率图过多、容易失真、文件大小难控制等问题，但对于矢量图，这些问题都得到了解决。目前.svg矢量图落地也在项目中越来越流行了。UI 可以在 Sketch 或 Ai 中制作。
一般与前端人员对接有在线图标库对接与本地文件对接两种。
在线矢量图标库有很多，国内比较流行的是阿里巴巴矢量图标库-iconfont⁴；本地对接就是直接将文件发送给前端人员，他们会自行进行项目文件的管理与调用。
如果 .svg 切图输出后，与设计稿中样式不符，请注意排查以下三点：
svg 不支持渐变颜色填充；
为了提升用户体验和产品趣味性，动效微交互的标签栏图标也越来越流行了。
动效在前端落地的方法其实有很多：
所以综上所述，落地标签栏动态图标，目前最高效可行的还是 Lottie 动画。
Lottie 是 Airbnb 开源的一个跨平台动画库。表现层面它是一张图片，但实现的方式是通过代码，所以它是矢量的。很花式的动画也可以把文件大小做到非常小。
UI 与前端对接是通过交付一个 json 代码文件。
如果这是你第一次接触 Lottie，再好不过的体验方法就是玩一玩阿里提供的一站式动画平台：犸良动画 5。它最底层采用的技术就是 Lottie，只是被阿里二次封装了许多预设的动画效果，你可以自定义其中的元素与参数，然后试着导出你的第一个 json 文件。
接下来是简单粗暴的 UI 与前端对接实现 Lottie 动画落地的全步骤参考。在此之前，想要全方位了解 Lottie 的相关信息，请参阅 Lottie 官方说明文档 6。
步骤一：安装 Ae 和 bodymovin
制作 Lottie 动画，首先你必需两个工具：Ae 和 bodymovin 插件。
Ae 最低版本要求为 Ae CC2014。又因为据很多设计师反馈，目前 bodymovin 在汉化后的 Ae 中使用会出现诸多问题，所以后面的教程都是基于 Ae 英文版。如果你汉化了Ae，最好在需要制作 Lottie 动画时取消汉化。
然后获取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就适用于你当前的项目，因为前端使用的 bodymovin 解析包可能无法解析你用最新版 bodymovin 插件输出的 json 文件。
一旦确定使用 Lottie，前端人员会在 GitHub 查询 Lottie 相关文档的，所以 UI 只需要配合前端确定一下合适的 bodymovin 插件版本就可以了。最终走查时，一定要确保当前 bodymovin 输出的动画在项目所需要运行的所有环境中可运行，才说明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。
获取了 bodymovin 后，将 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 会自动识别插件安装到 Ae。
安装完成后，就可以在 AE 的「窗口-扩展」中看到 bodymovin 啦。
步骤二：将 Sketch 或 Ai 中的文件导入 Ae
如果你技术娴熟，当然也可以直接在 Ae 中绘制图案动画。但如果你还是习惯先在其他软件中绘制好基础图案，再到 Ae 中制作动画，那你需要了解如何将图案导入 Ae。
Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作图，可直接存储为 .ai 文件，再在 Ae 中打开。
如果你使用的是 Sketch，可以先导出为 .svg，再用 Ai 打开该 .svg 文件，转换存储格式为 .ai，最后到 Ae 中打开。
当然，Sketch 还有直接和 Ae 对接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同时安装 AEUX 插件，Sketch 负责传送，Ae 负责接收。具体的使用方法可以在官网教程中查看，我就不再赘述了。
步骤三：制作动效并输出
和静态图标同理，为了保证落地时图标视觉大小一致，一组动效图标输出的文件尺寸应该是相同的。所以在你制作动画之前需要确定合成文件的尺寸。Lottie 官方建议：因为 Lottie 输出的是矢量动画，所以建议以 @1x 输出动效，前端人员在任何屏幕上放大并不会失真。
在制作之前请务必详细阅读 Lottie 所支持的 Ae 参数文档10，以免辛苦做出的动效，前端无法解析。特别提醒：原生环境中 bodymovin 是不支持解析 Ae 表达式的。
完成制作动效后，就可以通过 bodymovin 导出动效了。
步骤四：预览与交付
导出完成后在你的目的地文件夹中将存在一个 .json 文档，如果你的动效中还使用了位图，系统还会自动生成一个 images 文件夹。这些都是你需要交付给与你对接的前端开发人员的文件。
.json 文件中记录的动效代码 UI 不需要过多关心，但是其中两个信息你是一定要了解的。它们是你与前端对接沟通和获悉文件信息的一些关键参数。
UI 自检动效或其他相关人员需要预览动效的时候，可以用 LottieFiles11，拖入 .json 文件即可预览。iOS 和 Android 还可以下载 LottieFiles APP，扫描预览页中的二维码即可在移动端预览。
整个制作图标的流程我已经全部整理出来了。首先要注意图标的规范，然后制作位图、矢量、动效图标时的注意点，我几乎把我在真实项目中踩过的坑都告诉大家了。剩下的创造性的环节就交给你了。
标签栏图标规范
静态图标
1. 位图图标
2. 矢量图
动态图标
1. Lottie的背景
2. Lottie如何上手
总结
文章来源：优设网 作者：UCD耍家
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标在设计中是一个最为基础的设计元素之一，对这部分知识花再多时间研究练习都是值得的，哪怕是工作多年的设计老手，也很难说自己把图标设计，做到出类拔萃了。所以不论是温故知新又或是学习精进，花上几分钟看看这篇超干的文章，定有收获。
本文会着重介绍图标基础规则，深入探讨图标的视觉重量和对齐问题。
一个界面中的图标通常可以近似地看成是一些基本形的组合：横向矩形、纵向矩形、倾斜矩形、圆形、三角形、正方形。模糊地看它们有相同的视觉重量，因为它们或多或少的变成了相同的斑点。
△ 图标的基本轮廓
根据图标的形状，将其嵌入到对应栅格中。例如，方形图标比三角形或细长的图标更紧凑些。
△ 图标在栅格中
△ 栅格中的基本图形
图标越紧凑，需要的空间就越少。图标锐利的边缘或小细节越多，它在画板上占据的空间就越大。
△ 图标示例，栅格中可以放不同异形的图标
△ 栅格中放更多细节的基本图形：方形，圆形，三角形
当心成为栅格的奴隶，栅格是用来辅助你而不是去限制你的。如果一个图标因为一些突出的元素而在视觉上有更好的效果，那就让它们突出。
为了使图标在非视网膜屏幕上清晰可见，请坚持使用像素网格并在线性图标上优先使用2px粗细的描边。2px居中对齐的描边通常会提供足够的粗细和清晰的轮廓
△ 2像素线型图标示例
△ 2像素线型图标示例
如果图标选择了1px的描边，则应该使用内描边或外描边而不是居中的。
△ 1像素外描边图标示例
△ 1像素外描边图标示例
1px的居中描边会使图标在放大到100%的情况下变的模糊，但如果放的更大会显的清晰。
△ 1像素居中描边线型图标示例
△ 1像素居中描边线型图标示例
根据像素网格去设置斜线的起点和终点。当斜线的角度为45°，30°和60°时会比不规则角度（像13.7°或81°）更清晰。如今仍有数百万人在使用低分辨率的屏幕设备，这就是为什么图标的清晰度仍然很重要的原因。
△ 矢量和位图图标示例
最好从复杂的图标开始去创建一个图标集。它将定义详细程度，并且对设计具有相同视觉重量的图标们有帮助。
△ 不同细节程度的图标示例
当图标的细节程度不一样时，细节越多的图标越能吸引用户的注意力，并且看起来视觉重量越大。
△ 细节不一致
在整个图标集中，图标内部相邻元素的间距不应太小或不一致。定义最小间距并在各处以同样的方式使用，以避免轮廓「粘连」。
△ 不一致的间隙
△ 间隙统一
对于线型图标，最好使最小间距和线条的粗细相等。线条要么清晰地分开，要么精确地连在一起，永远不要含糊不清。
△ 不一致的间隙
△ 间隙统一
在图标集中，可能会有些重复的细节。删掉它们，让用户的注意力集中在它们不同的地方，就像是数学里分数要约分（化简分数）一样。你看到的视觉干扰越少，你对它的理解就越清晰。
如果目标用户已经明白他或她使用的是什么，那就没必要一遍遍的重复。例如：避免使用基于信封的图标不会让人觉得这不是一个邮箱类app。（有点绕口，意思是：不用添加相关系列类的辅助图标也会让人知道这是一个邮箱类app）
这条规则也适用于图标周围的装饰（框架，背景）。如果这些对图标的识别性没帮助，则它们就会对图标识别产生阻碍。
不要将不同样式，不同角度地元素混合在同一个图标集中。一致的风格会对用户识别图标有所帮助并让用户明白这些图标有同等的重要性和状态。
△ 同一纬度的图标
△ 不同维度的图标
同样的原理也适用于线型图标和面型图标。如果你把它们混在一起，人们可能会认为它们有不同的重要性或状态。当然，除非你是故意的。例如，面型图标用于关键的指令，线型图标用于其他的指令。
△ 一组一致性图标
△ 一组不一致的图标
在界面中拥有两种不同的图标是很好的。线型图标用作不可点击或正常状态，面型图标用于点击状态。
8px网格和12列布局常用于许多界面，与基于十进制的尺寸相比更加灵活。12可以被2、3、4、6整除。因此24或48px的图标已成为了标准。如果需要更大的尺寸，可以对他们进行缩放。
完美主义不是我们的目标：没有人需要为了像素完美而去追求完美的线条。但是，这对于产品中最终呈现正确而不失真的图标是很重要的。记住图形中锚点数量达到最少并且相邻元素之间不要有间隙。
△ 矢量图标的调整与优化
还有那些烦人的「8.999px」或「100.001px」呢？如果锚点的位置很准确，图标的边缘看起来就会很清晰。此外，在合并形状时，也不会有出现多余锚点和间隙的风险。
△ 矢量图标的调整与优化
许多设计软件（例如sketch）生成的svg文件都带有不必要的文件——多余的编组，颜色图层和剪切蒙版。让我们看看，在sketch中，一切看起来似乎都不错。
△ sketch中的图标示例
在其它软件中打开这个SVG文件（例如Ai中），你会看到很多空图层，不必要的编组，有时还会有剪切蒙版。当前端开发人员将图标转换成图标字体或在网页上使用SVG文件的时候，这些都可能导致出现问题。
△ Ai中的图标示例
你可以删除这些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator编辑后生成的SVG文件（picture_new.svg）在文件查看器中预览的效果不一样。顺便说下，也可以在代码编辑器中删除这些垃圾图层。如果你知道SVG代码的样子，可以尝试下直接删除不必要的数据字符串。
当然，这些建议并不是不可打破的规则。如果你知道自己在做什么，请随时跳过它们。在我看来至少在两种情况下严肃的几何图标不是最好的选择。
空状态。如果你正在设计一个页面的空状态（缺省页）如「没有任务了」或「所有邮件已读」，那么最好是用情感化的图标来表现或者只用文字去说明。情感化图标会使用户感到快乐，而没有情感的几何图标不会增加任何交互价值。
吉祥物和插图。如果屏幕上你的界面中有吉祥物或者插图，这种图案应该是感性的。我不知道设计师是如何通过有限的形状选择和坚持使用网格去刻画一个角色的。
还有一件事。在一些特殊情况下最好问问自己是否真的需要图标。这是解决问题的最好方式吗？写点有意义的文字呢？要注意使用时的平衡，否则，可爱、时髦的图标将会让人感到沮丧，所有的努力都将是徒劳的。
文章来源：优设网 作者：彩云译设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近发现一些能提高图标细节和高级感的小技巧，今天与大家分享下这几种风格的设计思路，以及需要注意的点。
分享大纲：
顾名思义图标之间有纵深前后关系，通过这样去处理，可以让图标层次丰富，增加设计细节，打破枯燥无味的单色扁平图标。
通常大部分人设计一个图标就直接将图形画出来后，这样就完事了，没有继续深入下去。这样图标看着枯燥乏味，普通了一些。
如上图，将图标在接口处进行细节弱透明度处理，那么效果就完全不一样了。
这里需要注意，一般都是在图标的接口处进行层叠处理，从A到B的一个线性渐变。
下面来看看案例：
△ Atlassian的品牌图标系统
使用建议：运用在面形图标效果会更好些，或者线条粗一些的图标，一般运用在TabBar上面居多。
这种比较好用，将图标进行抽象放大化处理，变成一种图形方式。一般运用在卡片设计上面居多。
左侧卡片上面，图标直接使用描边效果。卡片里面虽然加了一些底纹图形，但是整体效果略显平庸了一些 。
重新将图标进行图形化处理，既能够表达当前含义，同时设计上细节和品质感有所提升。
其他思路延展示例：
当然还有一种类似的思路，可以将图标进行放大化，并进行色彩分割处理为背景，前景放图标和文案等。
如图，我将前面两个思路综合运用，图形化背景和层叠图标。这里的图形希望大家不要乱用，尽量使用图标的图形来演变。
图标通过弱渐变透明处理，其思路有点类似第一个。但是这个方法图标整体带透明度的范围更大。
先来直接看个案例：
这种图标给人比较新颖的时尚感，层次也丰富。
如何处理这种图标？
非常重要的一点，需要注意不识别度问题。如左侧图，图标和背景之间几乎融为一体，看不清主体元素。右侧处理刚好，能够识别出图标含义。
处理时候一定要注意透明度的关系，当然也与卡片背景色有关系。
关于图标设计三个小技巧，可多看几遍，思路比较简单直接。当然最重要的是灵活运用，也可以将三个思路都融合起来去设计图标。
本文只是抛砖引玉，这些图标处理的技法，并不是能适用所有场景。大家还是需要根据自己产品特征，找到合适的突破点去设计。
文章来源：优设网 作者：功夫UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标是 UI 设计中最基础也是很重要的部分，辅助人们更好的理解功能内容。随着扁平化设计风格的普及，图标的风格越来越简约，看似简单的图形，实际要准确的表达含义，也是需要注意一些方法的。以下是图标设计技巧的分享内容：
设计图标是一个艺术创作的过程，里面也有很多需要被关注而不可忽视技巧。要知道如何设计好图标，是对于 UI 设计师来说是不可或缺的重要技能。
在我设计图标的时候，我个人认为有以下7个规则：
一个图标一个非写实的表现。不需要担心图标不够真实，消除不必要的细节，用基本的形状只保留最基础的部分，让这个图标更容易被理解。
有时候图标会因为有更多细节而传达了更复杂的意思，这反而是样式问题！
在整个图标系统中，你的图标要保持同一种样式来确保图标完美协调。比如同样的形状，填充，描边粗细，尺寸等。要制定好可以被复用的栅格，规范和样式。
如果可以的话，尽可能重新设计这些图标，而不要混入其他不同风格的图标来使用。
设计「完美像素」的图标，特别是在图标非常小的时候。这样图标的描边就可以保持锐利，不会有模糊。注意半像素的情况出现，尽量避免小数点参数。
这也可以帮你保持图标的辨识度，在你等比缩放他们的时候保持清晰。
确保你的图标的所有形状有足够的空间。笔画和空间过于狭小会使图标更难被理解。
最少给2px的负空间
确保你的图标看起来是正确的，适当的调整元素的对齐来达到视觉上的平衡。
不要只关注参数，如果有需要就用上你的眼睛来衡量，轻微移动这些元素。
所有图标保持同样的尺寸，在图标周围定义一个可调整的内边距范围，尽量让元素设计在这个范围内。不要挤满所有元素。
当图标需要额外控件时可以超出这个内边距范围。
在设计阶段，你的图标可能看起来是完美的，但还是需要将图标放到实际的界面环境中，测试他们是不是完美，有没有可以调整的细节问题。
确保每个新增的图标和其他图标显示一致。
你在设计图标过程中，有用到以上的这些技巧吗？可以在评论区告诉我，你是怎么怎么设计图标的。
文章来源：优设网 作者：布莱恩臣
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天还是一篇非常干货的原创文章。
内容分为两点：
图标的基础特征
动手设计之前，咱们先对完整的图标集进行分析。
弄明白在画整体的系统图标集合时，各个图标得具备哪些特征，有哪些切入点，可以作为我们在实际绘制时候的依据。
先来看几组 iconfont 的案例，看不太清的同学可以戳图片放大。
围绕上面这些案例，咱们可以归纳出图标的几点设计原则。比如：
1. 设计图标需要考虑延续性，图标之间互相牵连影响
图标几乎不会以单个的形式出现，大多数都是以组归类。符号整体性与统一性，都是依靠单个 icon 的共性特征建立起来的。
比如 iconfont 中的这组icon，图标圆形的外轮廓，就保持了一致。其次用户头像的代表符号，也很好保持了延续性。
正是这种小特征，共同组成了图标库的整体特征。
2. 设计手法趋同、图形内容差异
第二点好理解，设计风格、手法要素需要统一，但是内容传达的差异必须要拉开，避免图形趋同导致功能混淆。
比如下面两个案例，由于过于相近，导致用户很难理解图标含义，是天气，还是设置按钮，这种情况我们在设计时需要极力避免。
总结来说，就是图标的共性往往体现在设计手法上，比如颜色、形状粗细、细节的一致性，这些都是设计风格的统一。
而图标的特性，往往体现在形状内容差异，形状会决定图标的信息传递含义。所以共性要趋同，特性要拉开，这个是设计图标集的基本原则。
3. 功能大于形式，图形能理解的情况下样式越简洁越好
不知道大家是否关注，曾经在设计圈风靡一时的MEB图标风格，产品圈却非常冷门，几乎没有产品在继续用这种风格作为功能性质图标。
△ 该作品来自于网络图片，仅作交流使用
因为虽然图标增加了小装饰后，显得有趣精致，但其实也增加了图标的识别难度以及识别效率，反而背离了图标的设计初衷。
所以对于系统功能图标而言，必要的简洁性，高效的识别率，才是关键。
图标的设计约束性
聊完了设计主张及基本的特征。接下来咱们开始剖析图标的设计细节，包括分析制定图标的系统设计规范，应该从哪些方面入手。
规范的第一点，就是图标的基础形状比例。这个比例，主要是约束长与宽，共包含了四个关系，分别为「正方形 : 横矩形 ：竖矩形 ：圆形」
这四个关系的约束，会让图标集里的所有图标大小，看起来是一致的、统一的。横矩形、竖矩形这两个比例，会决定整套图标的饱满程度，横竖比例越一致，图标整体越饱满。
这点大家可以自己斟酌，如果是泛娱乐型的产品，icon可以更饱满一些。如果是偏工具化产品，那么还是可以优先保障图标的识别度，饱满程度倒是其次。
圆润饱满型：
刚正工具型：
定了比例后，接下里就是对图标的细节刻画。对于线性图标而言，最重要的细节就是线条粗细；对于面性图标而言，最重要的就是正负形之间的间距。
所以这些核心元素，在图标的核心线条、核心区域部分，间距样式都应当保持统一。
通常在移动端@2x内，主流icon的粗细为3px，而4px大多数都是为功能性导航icon，细一点的图标通常看起来会更精致一些。
当然也有部分产品使用的是2px，比如新版的YouTube，其次还有些较为复杂的icon，单根粗细的线段不一定能满足其需求，所以还需要制定一条副线的粗细。
细节可以根据产品的调性来定，统一即可。
大比例跟基本元素确定后，也可以制定一些图标的个性化元素规范，比如图标的圆角大小、角度位置，等一些特殊的样式。
像这些个性化的规范，颗粒度可以Case By Case来定义，圆润还是方正，可以根据产品的视觉风格来定义就好。
这些规范样式定好，就可以充分的让图标集内的图标，从设计上是保持一致的，且具有特色感。
上面讲了关于图标的分析及规范。为了方便大家掌握，接下来咱们就来讲讲，具体动手做，流程是什么样的。这里我给个我的步骤作为参考：
第一步：绘制好图标基本网格
第一步，当然是确定好图标icon的大小，以及上面我提到的基本尺寸比例，四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」的约束，构建好基本骨骼。
我这里以图标容器大小为 56×56，预留8px安全间距，图标最大大小为 48×48。
由于视差关系，圆形在图标里面的尺寸是最大的，所以圆形的大小为48×48。因为我想图标饱满一些，所以正方形的大小我两边各减去2，为42×42。
然后再绘制出横矩形（48×36）与竖矩形（36×48），各线段之间的间距保持一致。
然后各个形状居中对齐，这样四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」定好后，基本的容器就制定好啦。
第二步：设定图标基本规范
接着制定好图标的基本规范，为了方便大家看得清，我这里设定图标的线条粗细为3px，圆角为6px，干净简洁一些，让它看起来更饱满。
角度、断点啥的，我这里就不定义了，因为只是示例给大家看，讲一下流程，所以尽可能简单一些。大家在做练习的时候，也可以尝试自己去定义一下。
第三步：绘制图标
好了后就可以开始绘制图标啦。我这里分别绘制十五个，作为示例
然后就是使用路径工具，根据创意去绘制完善图标了。绘制的过程中，也可以不断调整，让图标看起来更协调，更饱满，更容易识别。
花了十五分钟左右，简单的十五个图标草稿就画好了，接下来咱们开始调整细节。
第四步：整体性调整
所有的图标绘制好了后，咱们就可以整体性的开始打磨细节，把图标形状的一些折角处、大小样式调整一致，让图标的节奏更清晰，整体样式更统一。
这样一组精致的系统icon就绘制好啦。
接着咱们也可以加点特色风格进行尝试，比如填充一个颜色。
当然细看的话，图标部分细节还是有点糙，其实还可以再调调，但这个主要做示例用，大家自己在做练习的时候，可别像我一样偷懒嗷
上面讲了很多方法经验，文末给大家来点实际的。
我珍藏了很多较为不错的大厂图标集合库，日常在画图标没灵感的时候，就会打开看看这些，参考一下。
文件都是矢量格式的，编辑方便，还很全面。今天拿出来送大家白嫖了
文章来源：优设网 作者：UX小学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近遇到一个同学，说做了很多稿图标的方案最终还是没有确定下来，但眼看着产品马上就要上线了，该怎么办。经过一轮沟通，发现他陷入几个新手设计师在画图标比较容易犯的问题：
从以上这几个问题，我们进行深入思考，会发现其实这些只是表面上的问题，实际上是在说什么呢？
基于以上这个案例，分享下我在日常设计中常用的一些方法，希望可以帮助遇到相同问题的小伙伴们进行一些答疑，从而帮助你们打破壁垒，高效成长。
下面发改分成 3 个部分来进行阐述：思考维度的锻炼；图形的设计方法；系统化方案呈现
当我们要设计一个图标的时候最容易入手的就是图标的表意，从表意延伸到图形的设计，然后再加以不同的设计手法（线、面、线面等等）。
1. 图标的表意
图标的表意方式，大概可以拆分为以下几种：具有普识性的图标、可进行表意延伸的图标、通过组合的图标、抽象的需要关联的图标。
2. 普识型图标
即我们在现实生活中常见且具有常识性性的图标，例如：删除、添加、放大、搜索、笔记本、手机、眼睛、礼物等等。这类的图标重点在于形体的打磨上需要多花一些时间，从不同的角度进行尝试，比如以删除为例子，同样的造型但可以有不同的设计表现。
3. 表意延伸的图标
即一个事物可以被延伸为一个或者多个图形表现的图标，例如：点赞、浏览、设置、收藏、评论、事件等等。例如点赞-延伸为你很棒用大拇指来表达，游戏延伸为游戏手柄、设置-延伸为机械操作用齿轮来表达，评论延伸为对话使用对话框来表达，浏览-延伸为用眼睛的图标表达。
除此之外延伸表意的图标可以有多种设计方式，例如以事件为案例。
4. 组合型图标
主要是指该类图标的表意需要通过 2 个以上的图形进行组合才能更加准确进行表现，例如：群、群聊、好友、添加联系人、情侣、转账、红包。
5. 创造类图标
特指认识中没有，因为产品需要被二次创造出来的图标，一般在一些新生业务中会常出现，这类图标初期往往需要伴随文字一同出现。例如：微信的朋友圈、视频号、小程序、手机系统的 Wi-Fi、蓝牙等类型等图标。
常规的图标表现方法（线形、线面、面形、插图、叠色等等）我们基本都了解，但作为设计师更应该知道潮流趋势，清楚现在流行什么类型的设计，这样才能让你作出更加出彩的设计。
这里分享几种目前最流行的图标设计类型：
1. 磨砂质感图标
磨砂质感图标作为 2020 年底最流行的图标，已经在不少 APP 中看得了相关的设计，从设计方法上并不难，重点还是在于是否有需要和应用场景。
2. 插图+磨砂质感
图标使用小插图的方式进行绘制，然后再结合高斯模糊的视觉表现手法，整体让图标更具有层次感和通透感。
3. 3D 质感图标
3D 作为这 2 年最流行的设计趋势，自然也牵动着设计师的心。但 3D 的打磨相对会比较耗费时间，不过仍然是值得一试的设计方式之一，目前在 APP 的设计中比较少见到应用，或许会成为 2021 的趋势之一。
4. 3D 磨砂质感图标
基于 3D 与毛玻璃图标的结合，整体的表现结合了这 2 种风格的特点，既保留了毛玻璃图标的通透，同时也具有 3D 的空间感。
5. 流光溢彩的图标
算是属于渐变类型的一种，但颜色和细节的跨度相比常规的渐变图标更加丰富，整体让人感觉具有流光的效果，更加具有未来感。不过从目前来说，更适合作为独立的应用 APP 设计，作为常规的图标设计需要一定的接受度。
想要了解设计的方法之前，我们得了解有哪些类型的图标，具体大家可以查看我之前撰写过的文章，里面有详细的分析了图标的设计类型。除此之外，这里还可以分享下我日常中设计图标使用的方法。
这个专题也有超详细的分类和教程 → https://www.uisdc.com/zt/icon-drawing-guide
1. 表意+基础形
基础形体使用普适性较高的图标造型，在图标的亮点或者点缀处通过表意关联进行创意设计，从而让图标获得新的感受，但又具有较高的识别性。案例：例如我们以日历图标为案例，可以比较直观的使用日历的普识图形，然后通过日期的方式来进行强调赋予图标生命力，然后再叠加上颜色和质感，并且增加一点小趣味的折角设计。
2. 关联延展
基于实际场景的认识来进行图形关联延展，并且进行一定的美感升级及图形的优化，延展出最终的图标设计，这种方法可以大大提高大家对于图标的识别度。案例：设计一个快速聊天表意的图标，聊天我们常规使用气泡，快速我们可以关联为闪电，然后把气泡和闪电进行结合。
3. 组合升级创意
利用一些正负形的创意方法，使用 A、B 图形的进行有机融合或剪切，使其获得新的图标造型，让整体的图标感受更具有创意点。案例：例如我们尝试画一个具有宇宙感受的游戏图标，可以通过手柄和星球的有机结合让整体的图标带有游戏和星球的意思，整体提升了表达的创意。
方案的呈现属于设计的一部分，虽然不能起到决定性的作用，但好的呈现效果往往可以帮助我们得到更好的印象分，这里分享一下我在设计过程中尝试的一些方法。方案的大小或者输出的类型也决定着我们呈现方案的类型，下面根据不同的类型分享不同的呈现案例。
1. 纵横对比法
适用于需要大量尝试的时候，以穷举输出为典型案例，我们可以用最基础的图形为中心点，结合图形的表意和图形风格进行纵横的发散性扩展，例如横向为表意、纵向为图形风格，中间部分属于交叉部分。
案例模版
2. 单个图标创意思考
对于一些标志类或重要的图标，我们需要阐述我们的设计想法或者来源，这种呈现的方式就可以很直观且简洁的表现我们的思考。
案例模版
3. 整套输出
对于一整套的图标，我们需要在案例上呈现图形的设计规则，包括但不限于有：圆角、角度、组合规范、斜度等等。除了呈现图形之外，请补充上颜色的应用规则、颜色的表意等等。
案例模版
图标设计虽然是一个小内容但却很重要，反映着着整个页面的精致度，在 UI 界面来说是除界面排版之外最重要的一环，因此是很值得我们去研究的设计之一，建议在日常工作中多练习多看。
文章来源：优设网 作者：ID设计站
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每天努力的用心的去做设计，挺开心的，其中最开心的细节就是“思考自己的设计如何与别人的不一样”，让你的差异化产出得到认可后，这将是一件非常非常幸福的事情。
今天和大家分享一个前一阵子做的小案例，做的一个直播货币，名字叫星币。
思考过程如下：
其实“星币”可发散的空间很小，因为已经非常具象了，无非就是星星、和钱币。
我们可以看下大概的感觉：
但是如果按照上面的感觉做，那最后出来的效果一定很常规，这也就有了我接下来的思考。
我们仔细观察，一般参考中的星星都是非常规矩的，无非就是尖角圆角的区别：
要么就是胖瘦的区别：
所以这次我打算做一个不那么规矩的，有点跳远的感觉、又有点星火的感觉，所以我把星星的一个脚拉长：
然后再把两个胳膊往上抬一抬：
这样就好像是一个跳跃的小人一样，会相对来说活泼一些。
接下来为了让整体更加和谐，我在钱币周边挖了一个小口：
目的就是配合那只伸出来的脚，让整体感觉更加巧妙一点。
其实星币很容易联想到金黄色，如果按照这个设想来做，那就会比较普通，所以我选择让他和直播、社区的配色一致：
这样在颜色方面也就有点自己的调性了。
刚才不是说让这个星星看起来像个跳跃的小人嘛，那一般人都有表情的，所以我们完全可以再加上一个可爱的表情：
让整体更加生动形象。
当然，如果星币在面积小的场景下是看不清表情的，所以需要做成两种，一种是有表情的， 一种是没有表情的。最后，还可以再做个有质感的：
后来发现质感做的有点脏，于是又优化了一下质感，效果如下：
整个构思和执行的过程还是可以的的，也得到了大家的认可，不过很可惜的是，后来名字改了，改成了能量币，哈哈哈哈，通过能量，我又联想到了太阳，太阳能嘛，执行原理都是一样的，大概效果如下：
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天这个需求是直播间 pk 后，主播胜利与失败的两个状态设计，过程经历了很多次修改，现在来分享一下自己的感受。
其实最开始我有点天真了，以为这种状态直接画个圈圈，写个胜、败两个字，然后做下颜色区分就完事了：
但这根本行不通，看起来像是未完成的交互稿，一点设计感都没有。
于是我开始思考如何增加设计感了。
如何增加设计感？
其实无非就是给这个状态增加细节呗，尤其是这个胜利的状态，我想到麦穗、翅膀等元素，最后选用了翅膀的元素，绘制了一个样例如下：
但被说到这个结构是乱画的，哈哈，一下戳到了我的痛点，确实是胡乱画的，各种圆圈没什么逻辑。
于是后来仔细思考了一下，把圆圈分为三层：
效果如下：
然后最中间放主形象，两边放翅膀，顶部放皇冠，最终效果如下：
这样整体看起来结构就是清晰的。
我们可以看下结构清晰和不清晰的对比：
后面因为整体调性需要可爱一点，所以把翅膀改成了比较圆润的造型：
效果还算不错。
其实这个点是我经常和大家强调的，但有时候确实是当局者迷，自己也容易犯这样的错，比如最开始的那个效果，很明显中间暗部和周边亮部没有拉开层次：
所以在后面的取色上，会把中间暗部做的很深，形成鲜明对比：
这样层次才会更加明显，不然就会糊在一起。
最开始本来想用圆形来做失败的状态，但是后来发现有点太惨淡了，于是想着还是加点细节吧，怎么加呢？
这时候是需求方那边给的一点灵感，说失败不就是很颓的样子，就拿把翅膀下沉和胜利形成反差不就可以了，我感觉说的挺有道理，于是就尝试做了下：
确实还可以。
本来想着胜利用紫色、失败用蓝绿色：
但是发现蓝绿色多少还是会有点分散“胜利”的注意力，于是就在思考，失败是表达一种负向的情绪，那是不是可以用灰一点的颜色？
于是尝试了几个不一样的灰度：
最后选择最后最后那个几乎接近灰色的版本，干脆一点，对比强烈一点。
我们看下最终效果：
再看下过程稿吧：
调整了很对次，过程还是挺值得记录的，回头一看，很有成就感！
以上就是这个小需求过程中总结的一些知识点，后面还会加入一些微动效，增加氛围感。
希望可以给大家一点灵感和启发。
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天和大家聊一聊设计细节，每个提到的细节你们都能直接拿走，并且在项目中使用。
这个页面相信大家平时工作中都会做到，有很多图标放在一起，里面可能是一些常用菜单，这个设计有什么问题呢？相信看在这里的小伙伴，脑海里有无数答案？不统一，还是什么？我们来分析下。
首先从大家关心的统一性来说，没有任何问题，图形都是在规范的图标栅格里面，也非常的统一，那么问题出在哪里？
仔细观察，我们会发现「联系人」和「历史消息」的图标过于饱满，虽然他们尺寸一样，但是比「最近使用」这个图标要大很多，原因是什么呢？因为后面这两个图标从视觉来说他们的重量太重了，所以看起来会比较大。
所以今天我们在做设计时候，如遇图标瘦长或者圆形等不够饱满的情况，请酌情将图标撑满像素，来保证整体一致的视觉体量感。
如果图标较饱满的情况下，可使用微缩，来保证整体一致的视觉体量感。我们文中案例之所以出现这种情况，是因为没有定义出图形体量大小具体的绘制规则，所以导致图形过于饱满，看起来会显得视觉重量不一致。
所以我们第一步，对图形绘制规则进行优化，保证图形在页面中体感一致，我提供了 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com