最全的图标设计指南，设计师必备

8月 17, 2022 发表于: 视觉设计. 评论

今天是是一篇关于各种图标设计指南和技巧对的分享，包括图标风格、图标功能、图标设计技巧、图标设计教程、图标网站素材推荐。

目录：图标风格：线性图标、面性图标、双色线面、渐变色图标、毛玻璃、不透明、轻拟物/微扁平 图标功能：应用图标、金刚区图标、功能图标、标签栏图标 图标设计技巧视觉一致：像素对齐、识别度、线面统─、描边统一、断点技巧 图标设计教程：毛玻璃 图标网站素材推荐：flaticon、iconfont、iconsdb、icons8、iconfinder、thenounproject

一、图标风格

1.1 线性图标

线性图标特点简洁、干练、识别度较高，视觉降噪，无更多干扰性适用于APP标签栏、功能模块及后台系统侧边栏等

1.2 面性图标

面性图标更能强化产品本身特性，视觉更丰富饱满，吸引用户注意力适用于APP标签栏、金刚区及后台系统侧边栏等

1.3 双色线面图标

双色图标的两种色调一般是运用品牌色进行制作，突出图标特性的同时，又能强调品牌调性适用于APP金刚区及功能区等

1.4 渐变色图标

渐变色图标的色彩更能吸引用户注意力，主色调运用品牌色，结合不透明图标等更具设计感适用于APP金刚区及功能区等

1.5 毛玻璃

毛玻璃图标是近两年比较流行的风格，很多APP金刚区及个人中心都采用了毛玻璃/磨砂玻璃图标适用于APP金刚区及功能区等

1.6 不透明图标

不透明图标为某部分调整不透明度得到有层次感的图标，更年轻、简约适用于APP标签栏、功能模块

1.7 轻拟物/微扁平

轻拟物图标介于扁平与立体图标之间，有一点质感又不是很立体，更大程度的还原事物本身适用于游戏、外卖、IP衍生等APP金刚区及功能区等

二、图标功能

2.1 应用图标

通俗的说为APP产品的logo，也叫启动图标，应用于桌面图标,ios应用商店等多个地方。该图标简洁易理解，能够明确表达产品定位及核心功能，有名称首字、全称、IP、首字母、及符号等多种格式构成

2.2 金刚区图标

金刚区图标作为APP产品的重中之重，用户点击、提升转化率的关键，在风格、表意、品牌感、设计感等多个方面应反复斟酌细化

2.3 功能图标

功能图标为了提升用户可读性，图标相对于文字识别度极高，用户反应时间短，同时也能提升版面简洁性及设计感，有更多留白，增加呼吸感

2.4 标签栏图标

APP底部用于切换页面的图标，有线性、面性及其他形式，分为点击态/选中态，未点击态/未选中状态，图标颜色为品牌色或品牌色与辅助色结合

三、图标设计技巧

3.1 视觉一致

根据米勒-莱尔错觉，在做设计图时，不能单纯的靠软件自带的左对齐、右对齐等方式达到物理对齐，尽可能的调整元素，使之视觉对齐

3.2 像素对齐

ps这类位图软件作图时，容易造成图标模糊，解决办法:使用直接选择工具选中虚掉的两个锚点ctrl+t，再按键盘的上下左右键调整下位置，图标就会变得清晰

3.3 识别度

图标是弱化实物的表现结果，需简洁明了，易识别，画图标时，应去掉冗余的元素，用基本的形状保留最基础的部分，让图标更易理解

3.4 线面统一

在整组图标中，利用一致性自检图标是否符合整体调性。包含图标颜色、线性/面性图标、描边粗细、大小、形状等多方面

3.5 描边粗细统一

在整组图标中，利用一致性自检图标是否符合整体调性。包含图标颜色、线性/面性图标、描边粗细、大小、形状等多方面

3.6 断点技巧1

图标由几个元素组成时，断点优先选择在连接处，让整个图标看起来更自然和谐

3.7 断点技巧2

分析图标复杂度，复杂度较低的部分，通过断点来增加图标复杂度，以达到更高的平衡感

3.8 断点技巧3

针对对称图标，避免在对称处(正中间)断点，会显得比较死板，稍微不对称更柔和自然

四、毛玻璃图标设计教程

4.1 拆分图层并绘制基本图形

由矩形、圆、钢笔工具绘制基本图形。山和太阳(左边的两个形状）命名图层1;大矩形(第3个形状)命名为图层2;最右边矩形命名为图层3

4.2 填充颜色和叠放

图层1色值(FFFFFF)，图层2色值(FFECE7)，图层3色值(FC7856-FFBAA9)同时进行位置叠放

4.3 复制图层

复制图层3(渐变背景层)，放于图层2(大矩形)的上面

4.4 高斯模糊并剪切蒙版

把刚复制的图层进行高斯模糊（模糊值20，不透明度90%，仅做参考)，左图把刚刚高斯模糊的图层跟图层2（浅橙色的大矩形)进行剪切蒙版，如右图

4.5 调整图层颜色及投影/合并图层

调整图层1(山和太阳)色值为FFF3FO，并添加投影把调整好的图层1(山和太阳)与图层2，3(图标背景)叠放合并，得到右图

4.6 添加细节

为了使图标细节更丰富，更有质感，对比度更强，增加了1px的描边。图层2(大矩形)渐变描边色值:FFE8E3-FFD3C7。图层3(小矩形)渐变描边色值:FC7856-FFB9A8

4.7 整套效果图添加细节

按照上述步骤，可作出整套毛玻璃图标

五、设计师必备图标网站

作者 | 陈亚
来源 | 站酷（chenya.zcool.com.cn）

赞助商链接