干货—ios app从设计到输出切图标注

CSS/设计
520
0
0
2022-05-01
标签   App设计

一.设计常用尺寸

PS设计常用尺寸750x1334,如果使用Sketch建议375*667,如果用的是PS画图标的时候一定要是矢量图,方便后续的修改和切图。

干货—ios app从设计到输出切图标注

二.ios常用屏幕尺寸

干货—ios app从设计到输出切图标注

干货—ios app从设计到输出切图标注

三.切图

1.切图最好都是偶数,要放大看,是否对齐到每个像素的边界,那样就不用担心虚边的问题了。

干货—ios app从设计到输出切图标注

2.切图输出web格式的png24位或jpg,不确定的情况下可以和开发沟通。

3.同一模块内的切图大小需保持一致

干货—ios app从设计到输出切图标注

4.为了减小包的大小,所有切图尽量压缩后在给开发(如果你懒得压,可以把这个网站链接给开发哥哥,让他们自己压https://tinypng.com/)

干货—ios app从设计到输出切图标注

5.ios只需要切2套图就可以,分别为:@2x和@3x,@2x的切图可以用750x1334这个尺寸出,@3x的切图可以用1080x1920这个尺寸切。

干货—ios app从设计到输出切图标注

切图尺寸:功能型切图最小可点击范围是88px*88px,示意型图标为48*48点当然也不能完全限制。如果界面整体比例不合适,或者影响视觉设计,也不必过分强求~

四.标注

个人使用的是Mark man这个软件,也算是一款比较好用的设计稿标注工具,支持 Win / Mac。有免费版和收费版,免费版也是足够用的。

干货—ios app从设计到输出切图标注

ios标注的时候使用的颜色值为RGB(android使用的是十六进制颜色值)~

五 . 图标尺寸

29*29、40*40、58*58、76*76、80*80、120*120、152*152、167*167

180*180、1024*1024。

干货—ios app从设计到输出切图标注

切记ios所有图标均为直角。系统会自动处理为圆角。如果你直接输入圆角切图,会出bug。

六.App store商店所需图片尺寸

理论上需要640*960 640*1336 750*1334 1242*2208,这些尺寸。

也可以和开发沟通,现在我们app只需提供1242*2208最大尺寸和640*960最小尺寸,如果你们的app还兼容ipad还需提供2048*2732这个尺寸的商店图。