1.图标设计原则

1. 含义准确

我们都知道功能图标的第一原则就是含义准确，让用户第一眼看到就能明白它的含义。另外功能图标要具有普适性，符合所有用户的使用习惯。不要试图去改变用户积累下来的记忆。比如微信底部的Tab栏，多年来都没有改变过。由于微信的用户群非常庞大且复杂，没有人敢去改变用户多年积累下来的认知记忆。从审美角度来说可能还有很大的提升空间，但用户会认为熟悉的才是最好的。

心形图标在用户心中代表的更多是点赞。当好友在微信朋友圈发照片或更新状态时，用户点击心形图标来表达他们的点赞。

2.可预测性

可预见性是指人们对事物发展的预测和预见性，而人们对功能性图标的可预见性的强弱取决于用户对图标的认知。当我们将绘制的图标放入页面时，我们要考虑用户能否快速找到这个图标？当用户找到图标时，是否会快速明白图标代表什么意思？在点击图标之前，用户能否大致预测到点击图标后界面的大致风格或内容？

从上图可以明显看出这是一个音乐应用程序，因为它包含音乐符号和播放符号！

当然，这组图标也很好识别，一眼望去，都是购物APP，因为都有购物车！这就是图标的可预测性。

3. 团结

3.1 尺寸统一

主流的图标尺寸有16x16、24x24、32x32、48x48、64x64、96x96、、、、、……

3.2 偶数规则

偶数原则已经成为网络设计中不成文的规定。图标设计中主要有两种意见，4的倍数还是8的倍数？4和8的斗争不仅体现在图标尺寸的规范上，也体现在桑格系统的规范上。那么如何根据有力的证据来决定是使用4的倍数还是8的倍数？换句话说，我们应该使用iOS的规范还是iOS的规范？

3.3 iOS 规范 4 的倍数

官方推荐的最小点击区域是44px×44px。

为什么iOS规范是4的倍数呢？因为苹果改变了游戏规则。以前我们一起玩的时候都是用px物理像素来定义尺寸。突然苹果推出了屏幕，改变了普通屏幕的物理尺寸。在不同的屏幕上（普通屏幕vs屏幕），CSS像素所呈现的尺寸（物理尺寸）是一致的，但不同之处在于1个CSS像素对应的物理像素个数不一致。

在普通屏幕上，1个CSS像素对应1个物理像素（1：1）。

在屏幕上，1个CSS像素对应4个物理像素（1：4）。

3.4、标准8点网格

创建一个 8 点网格，所有元素大小均为 8 的倍数。有些屏幕很难适应此系统，例如一开始的 375×667 尺寸，但解决方法很简单。保持内边距和间距 ( & ) 大小一致并遵循规则，剩余空间可以用块状元素填充。如果某些元素的大小是奇数，也没关系，只要它们使整个元素遵循规则即可。

3.5 数字 8 的分析

加减法：2+2+2+2=8 2+3+3=8 2+6=8 3+5=8 4+4=8

乘除法：2×4=8

幂：2的3次方是8

比例关系：2/8=1/4 3/8 4/8=1/2 5/8 6/8=3/4

3.6. 黄金螺旋/斐波那契数列

斐波那契数列是数字 1、1、2、3、5、8… 的序列。

从数学上来说，斐波那契数列是递归定义的：

F0=1

F1=1

Fn=F(n-1)+F(n-2)

（n>=2，n∈N*）

为什么和蚂蚁都以8个点为单位网格呢？按照我上面说的一些数学方法的推理，1/2/3/5/8这些数字在斐波那契数列中占比很大。比如2+6=8，可以进一步分解为1+3+1+3=8，但2:6=1:3；同样，2×4=8，但2:4=1:2。细分解中的数字都符合斐波那契数列，而符合斐波那契数列就意味着符合黄金分割。突然觉得8这个数字和娱乐圈里的影视明星很像，他们家境好，条件好，所以自带光环。

最终的结论是：8的倍数为主，4的倍数为辅；除非你设计的APP只需要适配iOS系统，否则使用4的倍数就可以了。当需要同时适配iOS系统和系统，没必要分别设计两套界面适配iOS和时，选择8的倍数才是最好的选择。

3.7. 颜色均匀性

在前期设计图标的时候，尽量不要使用超过4种颜色，最好根据对应的行业背景来搭配每个图标的颜色，运用色彩心理学，比如食品餐饮可以用红色，食品用橙色来表示甜味，绿色代表食物，多指健康的绿色产品！

3.8. 统一风格

样式的问题在之前的文章中已经讨论过了，这里就不再赘述了。“在直角图标和圆角图标的基础上，添加合适的图标样式；最好不要两种样式一起添加，容易混淆，不够简洁，主次不分。”

在整个产品或系统中，可以适当使用2~3个不同风格的图标来区分。

3.9 图标设计规范

圆角规格

外圆角半径 - 线厚 = 内圆角半径

外角半径尺寸

圆角半径约为整个图标尺寸的十分之一

3.10. 图标的物理和视觉平衡

为什么我们在同样大小的区域内绘制正方形、圆形、三角形，符合统一的物理尺寸规范，但在视觉上却看起来很不平衡呢？解决这个问题的一个好办法就是用标准化的方式绘制图标。

正方形18dp*18dp；圆形直径20dp尺寸规格

垂直矩形 20dp*16dp；水平矩形 16dp*20dp

按照系统图标规范绘制的图标可以达到视觉平衡

打破规则

当视觉平衡与物理平衡发生冲突时，我们应该优先考虑视觉平衡。上图是微信的界面图标，仔细观察会发现通讯录图标已经超出了物理尺寸，但整个图标在界面中可以达到视觉平衡。所以我们在绘制过程中可以打破常规。这也是每个优秀设计师应该具备的素质。

3.11 图标网格系统

在主流的图标绘制中，线性图标的粗细一般为 1px、2px、3px，因此我们在建立图标网格系统时，一般会采用 8 的倍数。而从上面对 8 的分析中我们得知，8 的倍数对于 1px、2px、3px 的粗细来说，是非常适合的。

对于双倍尺寸图像，图标绘制尺寸为 48*48px；对于单倍尺寸图像，图标绘制尺寸为 24*24px。

呼吸空间

在绘制图标的时候我们不仅要确定图标的大小，还要考虑图标的内呼吸，也就是所谓的正负形。图标的负空间也是有规律的，内呼吸是以2px为基准来绘制的。

通过字体粗细感受线性图标的厚度

字体粗细由细到粗，会给人一种由轻盈到沉稳的感觉，无论是中文字还是西文字，文字越细，可读性越强，文字越粗，可视性越高。

通过列出线性图标的粗细，有1px、2px、3px、4px四种，可以看出图标粗细变化的视觉感受也是不一样的，具体粗细根据界面内容而定，最好的办法是通过对比来验证哪种粗细更适合当前界面。关于在2x尺寸时使用3px，在3x尺寸时就会变成4.5px，而且还会有0.5px的问题，这个技术已经实现了，当然最好使用svg矢量格式sketch导出svg图标，比如上图心形图标的弧线肯定存在小数点问题，所以使用svg矢量格式是最好的选择。

3.11. 如何绘制 0.5px 边缘

我对比了几种在高清屏上绘制0.5px的方法——直接设置宽高为0.5px、设置盒子垂直偏移为0.5px、使用线性渐变、使用方法：(0.5)、使用SVG。最后我发现SVG的方法兼容性和效果最好，所以如果比例为1，那么就可以使用SVG绘制0.5px，如果比例不为1，那么就直接绘制1px即可。

欲了解更多详情，请参阅链接：

如何绘制 0.5px 边缘

3.12 图标网格系统

iOS 界面底部导航栏的系统图标标准尺寸为 44*44px，所以我们以 44*44px 作为标准尺寸自定义系统图标网格。我们将应用图标内圆提取出来并按比例缩小为 44px，并添加 44px 的方形边框，这样就得到了系统图标的基本网格。

基本网格

制定系统图标网格的理论基础：

系统图标的形状有很多种，但在它们看似复杂的形状背后，我们可以将系统图标归纳为四种基本类型：圆形图标、方形图标、横长图标和竖长图标。我们都知道，如果按照图标的实际尺寸来设计，就会存在图标视觉尺寸不一致的问题，那么我们应该如何解决这个问题呢？这个问题就是我们需要开发系统图标网格系统的原因。

3.12.1 首先我们对比一下正方形和圆形在实际大小下的视觉大小，发现当实际大小为140*140px时，正方形看上去比圆形要大一些。

3.12.2 为了证明尺寸的正确性，下图给出了辅助线和数值。

3.12.3 为了让它们看起来大小一致，我们将正方形缩小50px，可以看到缩小之后正方形与圆形的视觉大小基本一致。

3.12.4 然后我们将上面的两个图重叠起来

左图（140px 正方形与 140px 圆形）中，圆形完全包含在正方形内，并且正方形超出圆形 4a 个面积，这就是造成视觉误差的原因。

右图（140px 正方形+140px 圆形），正方形超出圆形 4 个 a 面积，圆形超出正方形 4 个 b 面积，两者面积相互抵消，虽然大小不同，但面积相近sketch导出svg图标，因此圆形和正方形在视觉上是平衡的。

由此我们得出一个结论：

两个图形的视觉大小是否一致，是由两个图形的面积是否相同决定的，也就是说，只要两个图形的面积基本相同，就能保证两张图片的视觉大小基本一致。

接下来我们先自定义圆形图标的网格，由于系统图标最大尺寸为 44*44px，而圆形有天然的收缩，所以我们会让圆形充满整个网格，当充满整个网格时，就是圆形在固定尺寸范围内的最大视觉尺寸。这样，其他三个图形（正方形、横长条、竖长条）只需要适当缩小尺寸，就能和圆形图标保持视觉上的一致。

圆形图标网格：

圆形图标在系统图标中出现的频率非常高，比如微信中的发现图标，视频应用中的视频播放图标等。圆形本身就具有很强的视觉收缩性，所以我们在自定义圆形图标的网格时，为了保持与其他图形图标的视觉一致性，我们在基础网格中填满整个44*44px的网格，以保证圆形图标的视觉张力。如下图

方形图标：

方形图标在各类应用中经常见到，比如知识分享应用知乎的首页图标就是典型的方形图标。方形图标在实际尺寸上比圆形图标多了四个尖角，所以为了和原型统一，我们将方形缩小了 3px。缩小之后，方形的面积和拱门的面积基本一致，如下图

左边是方形网格，右边是与圆形网格重叠对比

长横图标：

长横图标也是我们经常遇到的典型图标造型，比如天猫APP首页菜单里的会员图标就是一个非常典型的长横图标。山歌的制作原理和正方形是一样的，我们将圆形和长横重叠在一起，然后适当降低高度，直到圆形和长横的面积基本一致。如下图

左侧为横向长格，右侧为与圆形格重叠对比

垂直图标：

竖长图标其实和横长图标是一样的，只是将角度旋转了90度而已。舒服图标出现的概率也很高，比如饿了么App里的订单图标。

左侧是垂直网格，右侧是与圆形网格重叠对比

特殊图标：

所谓异形图标，就是不能简单概括为几何图形的图标。比如我的图标是一个上小下大的人形，我们可以将这样的图形作为我们的基础网格。然后我们再根据图标的实际情况，适当调整图标大小。

左边是不规则网格，右边是与圆形网格重叠对比

通过上面的分析，我们得出了最终的iOS系统图标网格体系。下图是尺寸规范分析。

由此产生的iOS网格系统摘要：

最后我们来看看iOS系统图标网格系统的实际案例效果。

腾讯视频图标：

知乎ICON：

花瓣图标：

4. 层次清晰

Icon具有可点击性，可识别性。可点击性有三种状态：点击前、点击中、点击后。主流的底部标签栏在点击前会使用线性图标，点击中和点击后会使用扁平化图标。也会使用颜色进行区分。

5.延展性

图标应该具有较高的可扩展性，好的图标可以直接作为应用图标或者Logo，也可以通过点线面动效作为下拉加载动画。

2.图标的功能分类

图标按照功能还可以细分为操作图标、警告图标、内容图标、设备图标、文件图标、编辑图标、导航图标、通知图标、社交图标、开关图标等等。为什么我们在设计图标的时候很少做这样系统的区分呢？主要原因可能是我们做的C端产品中图标的种类和数量都比较少，而当我们接触到B端产品的时候，与B端产品业务复杂度对应的图标数量也相应增多，为了更好地管理图标，需要进行更加细致的设置和分类。

2.1 图标命名标准

为什么要用英文来规范图标的命名？因为我们使用的整个系统都是基于英文开发的，设计师业务的下游主要是前端工程师。如果不能规范每个图标的命名，肯定会增加前端的工作量。如何提高协作效率也应该是设计师用户体验的范畴。英文不好的人打开谷歌翻译也没问题。

图片名称以模块为前缀，如：.png

模块：

登录页面 (login) () need a (need) need b () () () me (me)

类别：

导航栏 (nav) 菜单栏 (tab) 按钮 (btn) 图标 (icon) 背景图片 (bg) 默认图片 (def)

功能：

菜单 (menu) 返回 (back) 关闭 (close) 编辑 (eidt) 消息 () 删除 ()

状态：

已选择 () 不可点击 () 已按下 () 正常 ()

2.2. 图标制作与发布

在app产品中，以美团app为例，整个产品中的图标使用了多种风格。首页金刚区域的图标是首页流量分发的重要分支，视觉设计应该更加丰富多彩，吸引用户的注意力，而标签栏中的导航图标和内页的功能图标则需要设计得更加简洁。我们在绘制图标的时候，首页金刚区域我们单独绘制了一套复杂的图标，其他系统需要绘制线面两种风格才能更好的适配页面。为了以后系统更好的使用，我们根据系统需求来制作图标。

以心形图标为例，我们采用了线面两套图标，关于图标的配色，可以添加黑、白、灰+原色，可以有橙色代表警告/绿色代表成功/红色代表删除等，后期复制添加也非常方便。

创建图标库和颜色库，每次有新图标和新颜色，只需要添加一个就可以管理产品中的图标库。

2.3 团队合作

目前团队协作按照图标功能进行分类，并上传至插件工艺，方便其他团队成员共同使用。

设计_前端开发的下游

为了方便前端开发工作，我们需要按照上述规范命名自己的图标。前端开发主流做法是将图标转成字体，上传到团队共享的图标网站，将图标输出为svg矢量格式，以便前端开发工程师直接调用。国内主流平台是如果制作图标，导出svg格式，在软件中重新安装1024大小进行绘制，上传到项目中。所有路径都需要扩展成面图标。多色图标不支持后期修改颜色，单色图标后期可以支持自定义图标颜色。

相关文章

如有侵权请联系删除！