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

如题所述

设计师在交付设计稿时,往往需要根据网页和移动端不同的界面开发需求,独立制作各个参数的切割图(也就是切图),标注大小和间距,然后以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设计做好基础~

温馨提示:答案为网友推荐,仅供参考
相似回答