如何系统的学习功能图标设计

03、统一性

03_01、大小的统一

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

03_02、偶数规则

元素周期表中相邻的两元素，原子序数为偶数的，其在地壳中的平均含量常大于奇数元素的含量。对于同一元素而言，质量数为偶数的同位素，在地壳中的平均含量大于相邻奇数同位素的平均含量。这是人们根据分析的实际数据，经验归纳而得出的元素和同位素在地壳中的分布规则之一，称为偶数规则。在UI界面设计对于偶数原则基本保持一致态度。

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

03_03、ios的规范4的倍数

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

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

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

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

03_04、Material design的规范8点网格

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

03_05、数字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

03_06、黄金螺旋线/斐波那契数列

斐波那契数列（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的倍数是做好的选择。

03_07、颜色统一

图标在选取颜色的时候尽量不要超过4种颜色，且每个图标的配色需要根据对应的行业背景进行配色，利用色彩心理学比如红色可使用在美食餐饮上，橙色用在美食上多指甜美，绿的代表食物多指健康绿色产品等

03_08、风格统一

风格已经《如何系统的学习功能图标？》在归纳的很全了，直角图标和圆角图标基础上适当添加一种符合的图标风格；最好不要出现两种风格相加，很容易乱，也不够简洁，主次不明。

在整个产品或者系统中，可以适当使用2到3种风格不同的图标就行差异化对待。

03_09、图标设计规范

圆角规范

外圆角半径-线的粗细=内圆角半径

外圆角半径大小

圆角半径是整个图标大小的十分之一左右

03_10、图标的物理平衡和视觉平衡

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