Question

UI设计中的切图规范是怎么样的？

Answer 1

设计师在交付设计稿时，往往需要根据网页和移动端不同的界面开发需求，独立制作各个参数的切割图（也就是切图），标注大小和间距，然后以html+css布局交付到静态页面。通俗意义上说，“切图”是指将设计切割成易于制作成页面的图像。适当而准确的切割可以最大限度地还原设计图纸，达到事半功倍的效果。本教程将教你iOS和Android的通用规则和命名约定，并将帮助你轻松浏览UI设计图。接下来我们就为大家分享UI设计切图规范规则，希望帮助到大家更好的进行UI设计！

UI设计中的切图规范：

iOS切图尺寸规则：

设计图：1242x2208

三倍图：按1242x2208来切

二倍图：按750x1334来切

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

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

Android切图尺寸规则

切图命名规则

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

MasterGo切图

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

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

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

iOS预设

Flutter预设

综上所述就是关于“UI设计中的切图规范是怎么样的？”内容的精彩讲述了，不知道大家是否学到了呢？不管怎么样，小编都希望大家能够好好学习起来，为自己的UI设计做好基础~