设计干货|UI 设计必备超全切图规范 |
您所在的位置:网站首页 › ui设计启动页规范 › 设计干货|UI 设计必备超全切图规范 |
今天这篇攻略教会你,iOS 和 Android 常用的切图规则及命名规范,帮你轻松搞定 UI 设计切图。 打开某乎,搜索「切图」,能得到海量关于「切图」的干货教程、问题回答等内容。 应聘 UI 设计师时,“会不会「切图」”也是一个高频出现的面试问题。 对「切图」的深入理解与灵活运用,是 UI 设计师的必备技能。 那么什么才是真正的「切图」呢? 设计师在交付设计稿的时候,往往需要根据网页端、移动端不同的界面开发需求,单独制作各个参数的切图,并标注好尺寸和间距,再交付给开发完成 html+css 布局的静态页面。 「切图」通俗意义上就是指将一个设计稿切成便于制作成页面的一张张图片。 合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。今天这篇攻略教会你,iOS 和 Android 常用的切图规则及命名规范,帮你轻松搞定 UI 设计切图。 iOS 切图尺寸规则设计图:1242 x 2208 三倍图:按 1242 x 2208 来切 二倍图:按 750 x1334 来切 一倍图:在二倍图的基础上压缩成 50% iOS 启动图:图标按照最大 1024 x 1024 来设计,之后按照比例缩小到每个尺寸。提交没有高光和阴影的直角方形图即可。 规范的切图命名会让开发更容易找到其所需要的文件,让设计师与开发之间的交付流程更顺畅,可以说,规范的切图命名是一个设计师的基本修养。一般来说切图命名可以遵循以下规则: MasterGo 提供了多种设备预设,在切图时能大大节省你的时间,让交付更轻松。 MasterGo 「切图」功能支持预设切图参数,支持 Android、iOS、Flutter 设备的尺寸、倍率、前后缀、格式等不同类型的切图导出。 设计师无需单独制作不同参数类型的切图,在 MasterGo 上,一图满足多设备、多尺寸使用需求,实现高效交付。 iOS 预设 ![]() Flutter 预设 ![]() Android 预设 以上就是 MasterGo 对 UI 设计切图提供的解决方案和规范解读,希望对正在路上的设计师有所帮助。欢迎来 MasterGo.com 尝试体验! Powered by Froala Editor |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |