2021 图标设计规范大全

 

 

   写在前面的：在UI设计相关的项目开发过程中，图标设计必不可少，图标设计相关的网络教程及文章也铺天盖地，质量参差不齐，以抖音、B站为例，集中在技巧和设计居多。许多新入行的设计师容易陷入一个误区，单纯追求图标设计的美观性，殊不知在整个UI设计过程中，完成度、功能性、易用性、交付规范的优先级都远高于美观性。一些教程在工作中也并非实用，所以今天给大家带来的是，从实际工作、基础设计原则、输出制作规范的角度出发，分享真正落地于设计的UI图标设计规范，一篇彻底掌握图标从设计到产出到交付的完整流程；

 

（本文致力将图标设计的相关注意事项，全面、细致、通俗、实用、完整的呈现出来，书写时间有限，一定有不足之处，欢迎读者批评指正补充！）

 

阅读时长约45分钟，可以点击收藏或关注，随时回来阅读

 

 

阅读目录：

 

一 、概念篇

二 、规范篇

三 、原则篇

四 、制作篇

五 、输出篇

六 、后记篇

七 、网址篇

 

一 、概念篇：

 

1. ▲ 图标的定义

 

(1) 众所周知，设计师的核心工作内容之一，既是将信息通过专业的设计技巧进而高效传递出来，精准传达给用户，通常我们所理解的图标设计的含义，就是将某个文字图形化处理，做成更加符合人类阅读，识别，降低用户理解成本，提高整体界面美观度的一种处理办法；

 

(2) 文字图形化处理的好处有很多，就像音乐一样，它不分国界、不分种族、不分年龄，能够被更多不同层次的人们所更容易接受和认识；

 

通过合适的图标，用户能够更精确获得信息，图标设计虽小，但却蕴含着很多知识点，比个例子，世界上用户量最多、点击量最高的图标之一，Facebook的点赞图标，距今已经诞生十周年，当年的开发团队，花了数百小时之久，最终打磨出来这一伟大的设计；

 

(3) 针对不同的产品，不同的功能模块的图标设计也都是不同的，通过对这些图标类型进行归纳总结，以及针对不同的使用场景进行设计规范的梳理和总结，将来我们在做设计时才能更加得心应手。

 

2. ▲ 图标设计在UI中的重要性

 

(1) 站在心理学、脑科学角度来看，人类对于图像的理解、接受、记忆程度都远胜过纯文字。因为左脑负责理性，右脑负责感性，图片在某种程度来上讲属于右脑的范畴，而且据科学家研究，右脑处理图像的速度是左脑处理文字速度的60万倍，所以图像比文字更容易让人记住，因此，无论是icon设计、按钮设计、标志设计、导向标识，图形（图标）永远是设计中的一项重要课题。

 

(2) 图标的好处或者说重要性体现的点还有很多，比如快速理解、看到“购物车”就知道其含义是等待购买，非常形象。在比如容易国际化，语言不通也不会有太大的障碍，也更容易形成统一的品牌形象，最重要的是，图形更具有美感，尤其是进来比较流行的动态图标，好看、好用。一个不错的动态图标就能立马提升整个产品的格调。

 

3. ▲ 图标的分类（常见的分类，点关注，后续出完整详细的图标风格分类篇）

 

(1) 按照制作风格分类

    ① 线性

    

        1) 单色

        2) 双色

        3) 渐变

        4) 一笔成型

        5) 断点形

    

    ② 面性

        

        1) 色块单色

        2) 渐变色块

        3) 透明叠加

    

    ③ 线+面

    

        1) 混合色彩

        2) 色块偏移

 

(2) 按照流行趋势分类（排列顺序并非严格按照时间线）

 

    ① 剪影图标（单形图标）

    

    ② 扁平化2D

    

    ③ 2.5D 伪扁平化

    

    ④ 拟物化（写实）-

    /*比较具有代表性的如：锤子手机（配图9：锤子手机UI图标）*/

    

    ⑤ 像素图标

    

    1) 早期的游戏里面常用这种图标，现今在复古风格上面运用较多

     

    ⑥ 玻璃拟态（毛玻璃、磨砂玻璃）

     

    ⑦ 新拟态

     

    ⑧ 轻质感

     

    ⑨ 卡通插画

     

    ⑩ 动态图标

     

    ⑪ 不透明度图标

 

 

二 、规范篇：

 

1. ▲ 标注规范

 

(1) 标注主要是一些尺寸、文字、间距、颜色、圆角等

 

(2) 标志可以使用的工具例如PxCook或者PS里面的插件都是可以的

 

(3) 最好能在四周预留出几个像素点让图标和其他图标视觉保持一致，且更好的适配不同的手机、设备；就像做平面设计“留天留底”概念是一样的；

 

(4) 由于未来上线肯能涉及到的设备太多，尤其是安卓设备，因此一个图标需要设计许多种不同的大小（可以与产品、开发沟通确认，这里我就不在一一列举，更多尺寸相关可以关注尺寸网：uiedu.top）

 

(5) 关于特殊控件，例如、列表、button、要提前考虑或者与团队沟通，是否有其他状态，例如选中状态、鼠标移上时状态、点击状态等等，如果你不标注清楚，开发有可能会默认为没有这些效果；

 

 

2. ▲ 常规尺寸规范

 

(1) 大小尺寸

 

① 注：尺寸都是4的倍数

 

② PC端常用尺寸：16×16、24×24、32×32三种尺寸。（因为屏幕分辨率的不同，没有规定最小的操作热区，但是谷歌浏览器规定文字最小值为12px，12px其实已经渐渐成为大家所默认的图标操作热区的最小值了，具体给多少的话，这里建议使用16×16的，做成矢量的，后面做比例放大即可）；

 

 

③ 移动端常见尺寸：12×12、16×16、 24×24 、 32×32 、 48×48；这里建议是以48px作为常规图标的设计尺寸。

 

④ 其他常见尺寸：48×48 、 64×64 、 96×96 、 128×128 、 256×256 、 512×512

 

⑤ APP Store上架图图标尺寸最大为1024，B端比较小的图标为16；

 

⑥ 通常我们只需要选个通用的尺寸来绘制，剩下的就交给开发工程师，开发人员根据倍数调整可能需要的尺寸即可，也无需一遍有一遍的去绘制不同大小的相同图标了。其他更多的尺寸对应平台要求的规范来就可以了；

 

 

(2) 安全区域

 

① 安全区域的概念就是显示的图标的重要内容应该处于一个安全的区间内，防止被遮挡、易误触或者被平台规则裁剪。

 

② iOS的网格大小要求是4的倍数，最小点击区域是44pt，安卓要求网格是8的倍数，最小操作热区为48dp。同时要考虑不同倍图下的适配问题（@2x要求4的倍数，被2整除，用来适配@1x；@3x要求12的倍数，分别被2、3、4整除，适配@1x、@2x）

 

3. ▲ 辅助文字及间距规范

 

(1) 根据亲密性原则，辅助文字和图标的间距一般会比图标和界面的间距更近，这样会更加有序，高效展示；

 

4. ▲ 细节规范

 

(1) 为了配合标题字体，可以局部调亮图片，或者局部调亮图片（这在任何设计里面都适用，素材图片的处理也很重要）

 

(2) 细节统一，这里的细节指的是：风格、描边、端点、圆角、直角、斜角、角度、投影、渐变、外发光、阴影等等参数。

 

5. ▲ 颜色规范

 

(1) 图片边缘避免和白色背景融合，解决方法：可以在边缘增加颜色或细微的投影效果等..

 

(1) 遵守四色原则。什么叫四色原则呢，这里解释一下，假如我们需要做一个金刚区，那么金刚区的图标色彩就可以根据其业务属性来选择使用哪种颜色。比如，科技风选择蓝色。食物相关的选择橙色等。但是一个模块色彩最好不要超过四种颜色。

 

6. ▲ 动效规范

 

(1) 动效固然好看切吸引人眼球，未来也一定会成为主流，但现阶段如果实现起来成本过高，或者比较复杂难以落地，以及受网速硬件设备影响体验等等因素。都应当酌情考虑使用，一帮情况下我们都要遵循简单实用的原则来进行设计，不要本末倒置，过度设计，UI设计在大多数场景下，依然是效率、实用之上。

 

(2) 一切交互行为都需要考虑到动作所导致的两个状态，即“正常状态”和“异常状态”。例如，进度条动画，我们需要考虑进度完成的反馈和进度失败的反馈，并将它表明出来，或者输出到规范中。

 

(3) 这一条原则更适用于“交互设计”或“用户体验”，但在做动效时其实也同样适用，即：“行为前有预知”、“行为中有记录”、“行为后有撤销”。这句话是什么意思呢，我举一个设计师比较熟悉的一个交互例子，我们平时使用的Photoshop（这里指CC以上版本）。假如我们想要使用某工具，当鼠标移动到该工具上面时会弹出下拉菜单，里面会有相应的提示，当使用工具的时候，历史记录面板里面可以找到相应的操作，且可以随时撤回，这会让用户使用起来更加有安全感。

 

三 、原则篇：

 

1. ▲ 易读、易认、易识别原则

 

(1) 图标设计的终极目的实际上是用户获取信息的途径和人机交互的渠道，如果图标过于复杂，那么会增加用户识别、学习成本，这是不可取的；

 

(2) 符号化，越简单越好，图标严格意义上来讲属于LOGO，属于标志设计。我们需要从中找到表意清晰的内容，使之具象图形抽象化，同时还能够让人识别出来意思，如果同时能传递出寓意那就是非常优秀的图标（LOGO）设计了。

 

(3) 表达含义要清晰，容易识别。例如下图的设计，如果没有文字的说明，就很难快速的识别出来，或者容易产生歧义，使用户看不准其中的寓意。

 

(4) 一套UI设计项目中，不能保证所有的图标都能够做到以上3条，为了更好的提成产品的体验，因此一切识别性不是非常强的图标，都可以结合文字的组合设计，且有数据证明，图标配文字的方式比单纯图标的方式的点击率要高54%。

 

(5) 行业有一个“5秒设计原则”，这个是个什么意思呢，0.1秒就是用户感知体验时间，如果能在一瞬间0.1秒，看懂其含义那么这就是能够满足该原则的图标。你可以利用该理论去测试，比如拿到设计好的图标找同事或朋友来测试，如果超过5秒没能识别图标表达的含义，可能就要考虑优化你的图标设计了。举例，下面的图标你能5秒内看懂其中的寓意吗？

 

2. ▲ 类型一致原则

(1) 前面说过，图标有许多类型，正常情况下，同一套图标应该保持相同的类型，例如一旦使用了单色、线性图标，那么后续就不要设计其他类型的图标了（特殊状态除外）；

 

3. ▲ 风格一致

(1) 每一套图标除了有不同类型以外，还拥有自己的风格，哪怕是同一种类型的图标，比如线性，可能有一些风格上差别，举个简单的例子，线性图标有一个红色小点缀、或者是有一个小缺口，那么这些都是影响风格的设计，如果一个图标有缺口，那么尽可能让整套图标都拥有一个小缺口。换而言之，让整套图标都保持一样的风格；

 

4. ▲ 简约之上原则

(1) 要避免细节过于繁琐，不凸显最主要的特征，花里胡哨、虚头巴脑的设计。

 

5. ▲ 统一性原则

 

(1) 同一套图标，除了风格要保持一致，其余所有属性，按道理来讲，也应该全部保持一致，例如：描边、填充色、圆角半径、圆形、视觉面积、大小、主辅色、正负形、还有边框及其他样式；

 

(2) 大小一致，这里更多指的是让图标的视觉大小保持一致，而不是通常我们理解的宽高属性一致，至于原因，其实这里面涉及到一个比较晦涩难讲的概念，需要我们了解几何图形的视觉差等概念。所以只要记住需要保持一致的是“视觉一致”。而并非一切都以“数值一致”为准；

 

6. ▲ 像素对齐原则

 

(1) 为了应对几何图形视觉差这一现象，我们在绘制图标时，往往会利用栅格系统来作为参考去设计图标，这套系统大致是：有方、圆、横、竖、的框在大框内，同时面积相当。（IOS官方定义了一套标签栏图标的尺寸规范的栅格系统，也是为了让图标的视觉大小看起来一致，栅格系统这个怎么绘制也是一个知识点，以后可以单独细讲）有了这套参考，就可以更方便去确定设计主体的重心方向和轮廓，能够让我们做出来的图标尺寸更加的标准，达到视觉一致。

 

(2) 我们已知像素px是屏显和位图中的最小单位，一个像素点只能显示一个颜色。既然如此，锯齿现象肯定是无法避免的，随着如今技术的发展，像素点密度降低了，分辨率越来越高了，看起来好像是没有了锯齿，实际上还是有的，包括一种“子像素渲染”技术，这个技术就是Photoshop中的所谓“矢量”工具，他能够在显示器重让我们觉得平滑的圆，且放大缩小的时候会自动进行计算，但是如果一直强行放大视图，就可以发现它的周围充满了饱和度比较低的其他色彩方块。或者我们可以称其为羽化现象。（在讲课的时候我经常会把它称之为“虚拟的矢量图”也是一个道理）。

这个概念跟我们做图标有什么关系呢，因为UI中的元素对于精细和准确度的要求特别高,而且工具的图标也特别小,如果我们没有满足像素对齐,那就有可能导致元素边缘的模糊。

 

(3) 我们在使用Illustrator进行绘制时，可以通过网格的设置显示，以及对齐到点的设置，来查看和保证像素点对齐；

 

(4) 现在设备的显示精度和分辨率越来越高，但这不意味我们可以无视像素对齐的规律，像素对齐是一个专业的UI设计师对于极致追求的体现，也是大厂UI设计师的基本操作。

 

7. ▲ 偶数原则

 

(1) 这个原因很简单，为了适配，便于计算，且方便做对齐，例如：卡片长度为80px；图标做卡片的居中，如果是偶数就可以居中，如果是奇数就难以做到居中；

 

四 、制作篇：

 

1. ▲ 标准的制作方法

(1) 堆叠法

(2) 切割法

(3) 同层运算

(4) 优先使用矢量制图工具

(5) 尽量不实用钢笔工具

(6) 尽可能使用精准的数值

 

2. ▲ 制作图标的流程

(1) 先造型

(2) 后颜色

(3) 在加样式

 

3. ▲ 做“U”不做“V”

 

 

 

(1) 这里的“U”指的是圆润，“V”指的是尖锐。在设计图标时，大多数情况尽可能做的带有圆润一些，使之看起来更加友善，和谐并与硬件设备造型相互统一。当然这并非绝对，在非特定环境下这么做大概率不会出错，话说回来，我们做设计也无对错之分，只有是否协调。其实留意观察身边的大部分工业设计产品，例如手机、电脑、平板、桌子等等这些常见的物品，大多是带有圆角而并非尖角（这里面也有考虑到使用舒适及安全因素）

 

4. ▲ 制作图标的工具

 

(1) 大量完整套图建议优先使用Ai；

 

(2) 少部分单独需求图标可以使用PS；

 

(3) 造型简单且少量也可以使用SK、XD、Axuer等交互类工具顺手做好；

 

(4) 理论上用哪一个工具都可以，只要高效更加省力且能满足需求就行，做造型最强的依然是AI这个工具。

 

五 、输出篇：

 

1. ▲ 图标设计的命名规范

 

(1) 这里的命名实际上没有任何规范，每个企业都有自己的命名习惯，例如有的叫页尾、有的叫页脚、有的叫地脚、或者是bottom、一般能够让团队成员看懂即可，或者也可以参考团队内前设计师的命名规范，一般跟着WEB前端开发命名规范走是不会错的（可以私信我领取CSS开发命名规范）

 

(2) 标准的格式推荐：模块_类别_功能_状态.png；名称用英文小写和数字；举例：登录页面的启动图标login_icon_logo_nor@2x.png（这里的2x指的是倍数，统一用下划线）

 

(3) 假设你接触的是比较大型的项目，那么有可能只是负责其中某一个内容模块，可能还有专门的管理公共组件的人员，那么这种情况下，就会分成两种切图，通用型切图和各自模块特有的切图。原则就是含义能清晰表达，且不重复就可以了，否则代码调用的时候会出问题（另外需要注意：命名中不要有空格，分割号最好使用“_”，不要用“-”；因为html里面已经有“-”了，所以有时调用的时候也会出错，这是个人经验的总结）

 

(4) 补充：许多新人设计师对于命名是没有概念的，随意的使用没有任何含义的字母来代替，这是一个不好的工作习惯，尽量不要养成。统一、规范的命名更方便后期的整理，以及后期代码兄弟的使用，况且整齐规范的命名也显得我们更加专业！

 

2. ▲ 关于交付规范

 

(1) 交付的格式和形式有很多种，不同的团队所需要的内容也有不同，具体可以和前端沟通沟通确定下来。如果是位图尽量使用.png文件，如果是矢量图尽量使用.svg格式文件，如果在线图标库交付，那么直接上传至在线平台即可。

 

(2) 关于交付位图要注意的：

 

    ① Ios原生标签栏切图需要 @1x/ @2x/ @3x/ 三种倍率的切图文件

     

    ② Android原生标签切图需要@1.5x/ @2x/ @3x/ @4x/ 四种倍率的切图文件（最终视项目真实需求来确定）

     

    ③ WEB项目一般也是根据需求来定，看是否做多端口适配，如果单独网页1倍的就行了。常见的还有@2x，因为@2x向下适配@1x、向上适配@3x，不会产生太大的图片失真现象。（如果前端要求做其他倍率的尺寸，沟通确定即可）

 

(3) 关于交付.svg格式需要注意：

 

    ① Svg不支持描边、不支持渐变颜色填充，所以输出后，上线效果和设计稿有可能出现不一致的情况，解决方法就是用“转曲”的方法。在Ai里叫扩展，在Sketch里叫轮廓化。

     

    ② 如果在Sketch里面导出的话，没有画板导出时图标的文件尺寸不好调一致，可以在图标下面制作一个透明的方形，固定尺寸，与你的图标一并导出即可。

 

 

六 、后记：

 

总结，图标的设计整体应当保持简洁、易认、易识别。作用是正确引导用户高效使用产品，设计的不好会对用户产生不必要的干扰，还会产生阻断性的影响，特别是在实际应用中，我们先分析清楚体验的场景在决定是否做图标设计来。

 

以上就是我帮大家总结的图标设计规范全部知识点了，包括个人在真实工作中所遇到的问题及经验总结，如果您想了解更多内容，请给我点个关注，我之后会继续发布该领域工作的更多相关文章。

 

 

 

七 、网址推荐 

 

最最后附上推荐给大家常用（精选）的图标网站

 

1. EVA Icons  ：https://akveo.github.io/eva-icons/#/

Eva Icons是一个免费开源的精美图标库，适合于设计Web、iOS、Android产品，目前包含了480多个开源图标，设计师下载素材包即可使用，免费设计师寻找优质ICON素材的烦恼。

 

 

2. Fearher  ：https://feathericons.com/

Feather 是一个简单漂亮的开源图标库，强调功能、一致性和简单性。

 

 

3. REMIXICON  ：https://remixicon.com/

Remix Icon 是一套面向设计师和开发者的开源图标库。图标风格为中性风格，适用于各种用户群体的项目。与拼凑混搭的图标库不同，Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的，并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。图标以24×24网格为基准，分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目。

 

 

4. Heroicons  ：https://heroicons.dev/

Heroicons是由Tailwind CSS的创建者构建的另一个很棒的开源图标库。它具有超过165个具有填充和轮廓样式的独立图标，但每个元素也提供深色和白色版本，图标的外观非常优质且制作精良。

这些图标的入门非常简单，他们还提供了Figma中的库。如果你想包含所有的图标，你可以从公共资源库中下载所有的SVG文件。

 

 

5. 阿里巴巴矢量图标库  ：https://www.iconfont.cn/

这个应该没有设计师不知道，国内功能很强大且图标内容很丰富的图标库,除了提供矢量图标下载、在线存储、格式转换等基础功能外，现在还支持团队配合使用，前端图标直接调用，代码一键生成复制，超级方便。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具