图标适配大小_【经验】图标怎么切最合适？-CSDN博客

本文链接：https://blog.csdn.net/weixin_36255517/article/details/112636272

【摘要】切图相关经验分享

【作者】白金

关于图标切题

在日常开发过程中，最需要也是最常切图的元素就是图标。但图标的不规则形状也同时考验着切图的方式。好的切图能够让界面的还原图提升一个档次，而不好的切图则会在视觉上造成模糊，图像残缺等效果。对于功能性图标，会存在触摸区域的概念，如果对图形触摸区域的概念没有准确的认知，那么一般情况下我们会沿着图标边缘进行切图。

边缘切图的方式可以解决一部分图标切图的困扰，它不需要有太多注意的地方，只需沿着图标外轮廓切出矩形区域即可。对于非功能性图标（纯展示引导用），可以采取此类切图方式。而当图标尺寸不为正方形时，运用此办法会切出一个长宽比不为1:1的矩形区域，会在开发编码时带来额外的适配工作。

为解决此类问题，我们在切图时将图标尺寸进行统一，长宽比设定为1:1，且图片尺寸大小设定为偶数。在此之前，可以先了解一下图标绘制所使用的标准画板。

关于图标安全区域

实际上，每一个图标都是在特定正方形网格的画板上进行设计的，所以，只要是一枚图标，就有着以正方形画布作为载体的安全区域，用于规范图标的尺寸，使其看起来更具统一性。而我们日常使用的图标格式为svg，如果用矢量图形软件打开，也可以发现其图标周围是存在一个透明区域的安全区。

在绘制草图时，我们也会用一个方形的格子对图标进行占位，确保图标设计时不超出界定的区域。而到了功能性图标，我们引入的触摸区域的概念，一定程度上和安全区域比较类似。当然，有时候考虑到触摸的识别便利性，也会适当大于图标的安全本身。苹果官方对图标所提供的能够准确点击的最小安全区域为88*88px，因此考虑到安全区域和触摸区域两方面的影响，我们在切图时，只要设定一个统一的长宽比为1:1的区域，再用透明区域进行填充，那么输出的图标尺寸就会保持一致性。