APP内图标经验小总结

表现形式

（1）面型图标：完整色块填充；

（2）线性图标：最理想是2px，最通用是3px，4px一般通用，尽量避免1px；

（3）线+面图标：这种表现形式能比较好的做出立体感；

（4）MEB风格：近年在追波比较流行的风格，通过点、线、高光和颜色来表现，比较萌可爱；

PS:通常情况下线越小图标细节越多，会越精致，但表现力也会相应减弱；

APP内icon的使用规范（@2x）

（1）顶部栏icon：一般情况下，图标的高度不超过顶部栏高度的一半。以iPhone 6的尺寸为例，顶部栏高度为88px，icon最好不超过顶部栏的一半，因此一般icon的高度控制在32-36 px左右。

（2）内容区域icon：按钮icon、纯展示icon

按钮icon常用尺寸：48x48px、64x64px；

纯展示icon常用尺寸：24x24px、32x32px；

（3）底部导航栏icon：icon+文字、纯icon

icon+文字：icon（44px）与文字（20px）间距一般控制在14 px左右；

纯icon常用尺寸：48px；

PS：一般情况下，我会保持icon高度与文字的高度一致。

测试可行性

（1）可行性—单色模式：把icon变单色，icon的含义不变，那么它是一个可行的icon；如果含义变得很弱甚至影响用户识别，那么还需继续修改；因为带色彩的icon会进一步提高识别性；

（2）可识别性：观察新用户在使用产品的过程中，是否对icon的表达的意思有疑惑，用户过多的思考这个图标是啥意思是否能清晰理解icon所传达的意思；

（3）可记忆性：告诉用户一组图标所代表的含义，几个星期后再询问他们是否记得这组icon的含义。

PS：icon的作用是表达信息和传递信息，简洁易懂好看的icon才是王道。

小tips

（1）在PS中开启“像素网格对齐”功能：编辑-首选项-常规-勾选“将矢量工具与变化和像素网格对齐”，作用是避免绘制icon的时候出现虚边，解决了图形模糊的问题，尤其是将画布放大N倍的时候，精度可以达到像素级；

（2）矩形工具----对齐边缘：用矩形工具绘制形状的时候，将画布放大N倍后，还是会有虚边，勾选了对齐像素的选项之后，边缘就清晰了，不会再出现虚边；

（3）绘制icon的时候，我会尽量保持icon左右上下留白2px。举个栗子：绘制32px的icon时，如图：

欢迎你来~