手机图标选择

手机图标格式的选择

随着智能机的普及，手机页面越来越被大家使用，不管是小程序页面，H5页面、还是APP页面，我个人都觉得都属于手机页面，只是功能的复杂程度不一样，面对的群体不一样而已。

界面上的结构有很多相同点，其中有一个元素是必不可少的，那就是图标，高级点我们会把图标和UI合并在一起，一般点的话，我们觉得图标就是ico图片，他就是一个图片。

对于图片大家已经熟悉不能在熟悉了，都知道一个原理，图片变小了，就会不清晰，面对于手机，图标图片就会存在变小的情况，太小了，变模糊，用起来体验度很差，可是我们去看APP 一些小程序的图标的时候人家又会很清晰，是不是很奇怪！

 

这个就是图标格式的选择

常规网页使用图片的格式有jpg、png、gif、如果图片在30px，宽度范围以上的图片，在显示是时候图片看起来还可以，起码清晰，能够勉强接受，如果再小就不行了，一小坨，如果图片信息在复杂点，直接就看不清，图标在手机页面上，一个是栏目导航部分，一个是底部浮动的菜单栏目部分，参考位置如淘宝京东手机版

这里图标采用的图片格式，png的图片，一些大的企业在设计的时候，都会设计不同的尺寸，程序进行调用，但是像类似我们这种的，我们统一只用一个图片，用百分比的尺寸进行控制，就会出现在以些小的手机上，图标就会变得模糊，如果是用线性得图标，感觉边框有重影，效果很不理想。

针对这种情况我试过很多办法，调整过很多图片的格式，针对不同的情况具体使用，

1.图片情况（如果设计师弄了很多版本的图片，问题不大，如果只用一个图片，根据百分比和rem 单位来控制的话，复杂的图片就会出现问题，）建议使用大图标，缺点缩小会变模糊。

2.图标字体库（比如阿里图标、Font Awesome、Bootstrap图标、前端框架自带的图标）调用的时候通过css 样式进行调用，操作方便，优点缩放矢量图标保障清晰，大小、颜色、阴影以及任何可以用CSS的样式，缺点受限于框架自带的图标，扩展性小，

3.svg 图标（可绘制格式的矢量图标，保障清晰，扩展性很强，样式多样化，效果绚丽）但是我不会写，我只能通过AI软件存储为svg 格式的图片，调用图片的方式进行调用，但是图片显示的效果很好（推荐使用）