如何系统的学习UI图标2我们都知道功能图标的第一原则就是表意要准确，要让用户第一时间看到他的时候就可以理解其含义。并且，

来源：水手哥学设计

一、图标设计原则

1、表意准确

我们都知道功能图标的第一原则就是表意要准确，要让用户第一时间看到他的时候就可以理解其含义。并且，功能图标还得具有通用性，符合所有的用户的使用习惯，不要试图去改变用户日积月累沉淀下来的记忆。比如说，微信底部的Tab栏，已经很多年没换过了，由于微信用户群体非常庞大且复杂，牵一发而动全身，谁都不敢随便的改变用户多年积累的认知记忆。可能从美观角度还有很大发挥的空间，但是用户更多的会认为，熟悉的就是最好的。

而爱心图标在用户的认知里更多的是喜欢，当朋友在微信朋友圈发了照片或更新动态，点击爱心来表达自己的喜欢。

2、可预见性

预见性是指人对事物发展的预判和前瞻，而人对功能图标预见性的强弱取决于用户对该图标的认知强弱，当我们把绘制好的图标放入页面时我们要考虑用户是否可以很快的找到该图标？当用户找到该图标时，用户是否会很快的理解图标代表什么意思？当用户在点击图标前是否已经大约预测到点击该图标后的界面大体样式或内容？

从上图可以明显看出这是属于音乐类型的应用，因为它里面有音乐符号和播放符号！

当然这一组图标也很好去辨别，一看都是属于购物类型的应用，因为它里面有个购物车！这就是图标的可预见性。

3、统一性

3.1 大小的统一

图标的主流尺寸有16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 192x192, 256x256, 512x512，1024x1024…

3.2 偶数规则

偶数原则在线上设计中已经是一个不成文的规定了。在图标设计中主要就是两种声音，4的倍数和8的倍数？4、8之间的争斗不仅体现在图标尺寸的规范上也体现在珊格系统的规范制定中。那么怎么根据强有力的依据去决定到底是用4的倍数还是8的倍数呢？换言之就是到底用ios的规范还是用Material design的规范?

3.3 ios的规范4的倍数

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

为什么ios的规范4的倍数？因为苹果改变了游戏的规则，以前大家一起玩耍的时候都用px物理像素(physical pixel)来定义大小的尺寸，突然苹果推出retina屏幕改变了普通屏幕的物理尺寸。在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。

在普通屏幕下，1个css像素对应 1个物理像素(1:1)。

在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。

3.4、 Material design的规范8点网格

Material design建立8点为一个单位的网格，所有的元素尺寸都是8的倍数。有些屏幕会很难调整适应这个系统，比如iPhone6开始的375×667的尺寸，但是解决方法也很简单。保持填充和空隙（padding & margin）的尺寸统一遵循规则，剩余的空间可以用块状的元素来填充。有一些元素的尺寸是奇数的也没关系，只要他们能让整体遵守这套规则就好。

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、黄金螺旋线/斐波那契数列

斐波那契数列（FibonacciSequence）数列是这样一个数列1、1、2、3、5、8…

在数学上，斐波那契数列是以递归的方法来定义：

F0=1

F1=1

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

(n>=2，n∈N*)

为什么谷歌的Material design和Ant design都把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、图标的物理平衡和视觉平衡

为什么我们再同样的大小区域去绘制正方形、圆形、三角形，虽然符合了统一的物理大小规范，但是从视觉上看上去却很不均衡？关于这一点Material design给出了很好的解决办法规范化的去绘制图标。

正方形18dp*18dp ; 圆形直径20dp大小的规范

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

通过Google系统图标规范绘制出来的图标可以达到视觉平衡

打破规则

当视觉平衡和物理平衡发生冲突时，我们应该优先选择视觉平衡。上图中是微信的界面图标，仔细观察我们发现通讯录的图标已经超出物理规定的大小，但是整个图标在界面中是可以达到视觉平衡的。所以我们在绘制的过程中可以打破规则。这也是每个优秀的设计师应该具备的。

3.11、图标网格系统

在主流的图标绘制中，线性图标的粗细大小有1px、2px、3px。所以我们在建立图标网格系统是使用了8的倍数，上面已经通过对数字8拆解中得知8的倍数非常适合1px、2px、3px粗细大小的。

在二倍图下使用48*48px的尺寸大小，在一倍图下使用了24*24px的尺寸大小来绘制图标。

空间的呼吸感

在绘制图标时，我们不但要确定图标的大小，还要考虑图标的内呼吸感，就是所谓的正负形，图标的负空间也有规则，Material design内呼吸感以2px为基准进行绘制的。

通过字体字重感受线性图标粗细

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

通过列举线性图标的粗细大小有1px、2px、3px、4px。可以看到图标粗细变化给人的视觉感受也是不一样的，具体使用多大取决于界面内容，最好的方法就是通过对比来验证那个粗细更适合当前界面。关于2倍尺寸下使用3px,在3倍尺寸下会变成4.5px,会出现0.5px的问题。这方面的技术已经可以实现了，当然最好使用svg矢量格式。比如上图的爱心图标，弧线肯定是存在小数点问题，所以使用svg矢量格式是最好的选择。

3.11、怎么画一条0.5px的边

比较了在高清屏上画0.5px的几种方法——可以通过直接设置宽高border为0.5px、设置box-shadow的垂直方向的偏移量为0.5px、借助线性渐变linear-gradient、使用transform: scaleY(0.5)的方法，使用SVG的方法。最后发现SVG的方法兼容性和效果都是最好的，所以在viewport是1的情况下，可以使用SVG画0.5px，而如果viewport的缩放比例不是1的话，那么直接画1px即可。

更详细的请参考链接：

怎么画一条0.5px的边

https://segmentfault.com/a/1190000013998884

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的圆形），圆形完全被包含进了正方形里面，正方形超过了圆形4个a区域，正是造成视觉误差的原因。

右图（140px的正方形与140px的圆形），正方形超过了圆形4个a区域，而圆形也超过了正方形4个b区域，两个区域相互抵消。虽然他们的尺寸不同，但却有着相似的面积，所以圆形和正方形在视觉上达到了平衡。

由此我们得出一个定论：

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

下面我们首先定制圆形图标的栅格，因为系统图标的最大尺寸为44*44px，又因为圆形有天然的收缩性，所以我们将圆形撑满整个网格。在称满整个网格的情况下是圆形在固定尺寸内的最大视觉大小。这样其他的三种图形（正方形，横长形和竖长形）只需要适当缩小尺寸就可以和圆形图标保持视觉一致了。

圆形图标栅格：

在系统图标中圆形图标的出现频率非常之高，例如我们经常会用到的微信里的发现图标，视频app中的视频播放图标等。圆形本身是具有很强的视觉收缩性的所以我们在定制圆形图标的栅格时为了和其他图形的图标保持视觉一致。我们在基本栅格中撑满整个44*44px的网格来保证圆形图标的视觉张力。如下图

方形图标：

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

左侧是正方形栅格，右侧是与圆形栅格的重叠对比

横长形图标：

横长形图标也是经常遇到的典型的图标形状，例如，天猫app首页菜单中的会员图标，就是非常典型的横长形图标。那么制定山歌的原理跟正方形一样，我们将圆形和横长形重叠在一起，然后适当压低高度，直到圆形和横长形的面积基本相同。如下图

左侧是横长形栅格，右侧是与圆形栅格的重叠对比

竖长形图标：

竖长形图标跟横长形图标其实一样，只是吧角度旋转90 就可以了。舒畅图标出现的几率也非常高，比如饿了吗app中的订单图标。

左侧是竖长形栅格，右侧是与圆形栅格的重叠对比

异型图标：

所谓的异性图标就是不能被简单的归纳为几何图形的图标，例如我的图标是一个人形上边小下边大，那这样的图形我们就是用于我们的基本栅格就好。然后根据图标的实际情况适当的调整图标大小即可。

左侧是异形栅格，右侧是与圆形栅格的重叠对比

通过上边的分析我们就得出了最后的iOS系统图标栅格系统。下图是尺寸规格分析。

最终得出的iOS栅格系统汇总：

最后我们看下在运用iOS系统图标的栅格系统下的实际案例效果

腾讯视频ICON：

知乎ICON：

花瓣ICON：

4、层次明确

图标具有可点击性和标识性。可点击性就会有点击前、点击时、点击后三种状态，主流底部标签栏会在点击前使用线性图标，点击时和点击后使用面性图标；也有使用颜色来区分。

5、延展性

图标应该具有很强的延展性，好的图标可以直接当应用图标或者logo来使用。好的图标还可以通过点线面动效变化做下拉加载动画。

二、图标的功能分类

按图标功能还可以细分为动作图标、警示图标、内容图标、设备图标、文件图标、编辑图标、导航图标、通知图标、社交图标、切换图标等，为什么我们在设计图标的时候很少去系统的这样去区分，更多的原因可能我们做的C端产品，图标种类和数量相对较少，当我们接触到B端产品，由于B端产品的业务复杂程度对应的图标数量也随之增加，为了更好的管理图标需要更加详细的设置分类。

2.1、图标的命名规范

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

切图命名以模块为前缀，如：模块_类别_功能_状态.png

模块：

登陆页面（login）公共（common）需求a（need）需求b(demand) 发现（discover）消息（message）我（me）

类别：

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

功能：

菜单（menu）返回（back）关闭（close）编辑（eidt）消息（message）删除（delete）

状态：

选中（selected) 不可点（disabled) 按下（pressed) 正常（normal）

2.2、图标的制作上线

在app产品中，以美团app为例整个产品中图标使用了多种风格，首页金刚区图标作为首页流量分发的重要分支，在视觉设计要吸引用户的眼球做的更艳丽一点，而在标签栏导航图标和内页的功能图标需要设计的更加简洁。我们在绘制图标的时候首页金刚区复杂的图标单独绘制一套，其他系统需要绘制线面两种风格，为了更好的适配页面。方面以后更好的使用我们在Sketch中使用Symbol系统的制作图标。

以爱心图标为例，我们使用Symbol绘制线面两套图标，关于图标的配色可以添加黑白灰+主色，可以有警示的橙色/成功的绿色/删除的红色等，后续复制添加也很方便。

建立图标库和颜色库，每次有新增的图标和新增的颜色，只需再新增一个Symbol就可以很好的管理自己产品中的图标库了。

2.3、团队协作

目前团队协作按照图标功能分类上传到sketch的插件craft,方便团队其他成员一起使用。

设计的下游_前端开发

为了很好的方便前端开发工作，我们需要根据上面的规范进行命名自己的图标。前端开发主流做法就是把图标变成一个字体，上传到团队共享的icon网站，通过输出svg矢量格式的图标，让前端开发工程师直接调用。国内主流的平台是iconfont，如果sketch制作的图标，导出svg格式在illustrator软件里面重新安装1024的尺寸进行绘制，上传到项目中。所以的路径都需要扩展成面性图标，多色图标不支持后期代码修改颜色，单色图标后期可支持自定义图标颜色。

相关文章