设计干货｜UI 设计必备超全切图规范

打开某乎，搜索「切图」，能得到海量关于「切图」的干货教程、问题回答等内容。

应聘 UI 设计师时，“会不会「切图」”也是一个高频出现的面试问题。

对「切图」的深入理解与灵活运用，是 UI 设计师的必备技能

那么什么才是真正的「切图」呢？

设计师在交付设计稿的时候，往往需要根据网页端、移动端不同的界面开发需求，单独制作各个参数的切图，并标注好尺寸和间距，再交付给开发完成 html+css 布局的静态页面。

「切图」通俗意义上就是指将一个设计稿切成便于制作成页面的一张张图片。

合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。今天这篇攻略教会你，iOS 和 Android 常用的切图规则及命名规范，帮你轻松搞定 UI 设计切图。

iOS 切图尺寸规则

设计图：1242 x 2208

三倍图：按 1242 x 2208 来切

二倍图：按 750 x1334 来切

一倍图：在二倍图的基础上压缩成 50%

iOS 启动图：图标按照最大 1024 x 1024 来设计，之后按照比例缩小到每个尺寸。提交没有高光和阴影的直角方形图即可。

Android 切图尺寸规则

切图命名规则

规范的切图命名会让开发更容易找到其所需要的文件，让设计师与开发之间的交付流程更顺畅，可以说，规范的切图命名是一个设计师的基本修养。一般来说切图命名可以遵循以下规则：

MasterGo 切图

MasterGo 提供了多种设备预设，在切图时能大大节省你的时间，让交付更轻松。

MasterGo 「切图」功能支持预设切图参数，支持 Android、iOS、Flutter 设备的尺寸、倍率、前后缀、格式等不同类型的切图导出。

设计师无需单独制作不同参数类型的切图，在 MasterGo 上，一图满足多设备、多尺寸使用需求，实现高效交付。

iOS 预设

Flutter 预设

Android 预设

以上就是 MasterGo 对 UI 设计切图提供的解决方案和规范解读，希望对正在路上的设计师有所帮助。欢迎来 MasterGo.com 尝试体验！