提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
今天这篇攻略教会你,iOS 和 Android 常用的切图规则及命名规范,帮你轻松搞定 UI 设计切图。
打开某乎,搜索「切图」,能得到海量关于「切图」的干货教程、问题回答等内容。
应聘 UI 设计师时,“会不会「切图」”也是一个高频出现的面试问题。
对「切图」的深入理解与灵活运用,是 UI 设计师的必备技能。
那么什么才是真正的「切图」呢?
设计师在交付设计稿的时候,往往需要根据网页端、移动端不同的界面开发需求,单独制作各个参数的切图,并标注好尺寸和间距,再交付给开发完成 html+css 布局的静态页面。
「切图」通俗意义上就是指将一个设计稿切成便于制作成页面的一张张图片。
合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。今天这篇攻略教会你,iOS 和 Android 常用的切图规则及命名规范,帮你轻松搞定 UI 设计切图。
设计图: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
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册