web切图怎么做_【设计教程】UI设计切图你了解多少？

要想了解UI设计切图是怎么回事？UI设计师为什么要切图？

首先要了解一下项目工作流

切图是设计师在完成视觉设计，设计稿定稿后，将视觉稿切成一张张小块图片给前端工程师实现页面的工作流程。为了适应不同手机的分辨率，我们需要切几套图片尺寸给前端，有人会说那不是很麻烦吗？一点都不麻烦，后面会有工具介绍。

为什么要将图片切成一小块一小块呢？这样是为了减少文件包容量，

提高页面运行效率。说到文件包 有人会说，app在手机上我怎么看得到文件啊，图片格式大小命名我都想看，像网页一样右键审查元素就可以看到代码。

可是手机端怎么看呢？这里就要讲到一个专业名词“拆包”，下载“PP助手”

这里我搜索一个app“500px”，点击下载。

点击下载管理，再点击搜索按钮打开所在文件夹。

ipa格式改为zip，解压，打开payload文件右键显示包内容。

是不是很惊喜？想要的都在这里，不会命名的可以参考，当然切图有专门的命名公式。

切图命名公式

通用切图命名格式：控件_类别_功能_状态@倍率.png

例：tab_ic