ios移动端切图及前端规范

移动端IOS知识普及：IOS标准分辨率：1242px * 2208px 

 

切片要求：

1、    设计稿是按标准分辨率1242X2208设计，图片资源尺寸则是3倍图尺寸，将整个设计图压缩成750X1334，图片资源尺寸则是2倍图尺寸，在二倍图的基础上压缩成50%，图片资源尺寸则是1倍图尺寸；

2、产品效果图独立切片，即是每张效果图独立建立一个文件夹（命名以效果图名称为准），文件夹内容包含1倍图文件、2倍图文件、                                     3倍图文件和标识文件

3、图片命名要求语义化，格式为png；

4、图片资源需要备有1倍图、2倍图、3倍图，3倍图命名规则为：添加后缀@3x；2倍图命名规则为：添加后缀@2x；例如：1倍图：abg.png，2倍图则为：[email protected]，3倍图则为：[email protected];

5、字体:IOS默认字体—— 英文  HelveticalNeue   中文 黑体；字体大小采用点pt，设计稿以相对单位px，字体大小需要进行转化，转化公式为：px*72/96=pt（eg：12px*72/96=9pt），字体颜色只需给出rgb值（eg：color：rgb（255，255，255））；

6、页面纯色背景需标出rgb值，如果有透明度则需标出rgba值，其他特殊背景直接切图；

7、页面的图标、色块、按钮的高度都必须是4的倍数，最小像素不能低于44px，如不够可以添加补白；

8、页面外边距留白为10px；

9.启动图标1024*1024,png格式，不能透明底，透明的部分补白色。

 

IOS切图规范：

设计图：1242X2208

三倍图：按1242X2208来切  iphone plus

二倍图：将整个设计图压缩成750X1334 按750X1334切

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

 

Ios启动图

1. 图标按照最大1024*1024来设计，之后按照比例缩小到每个尺寸，再进行调整，提交没有高光和阴影的直角方形图即可；
2. 29*29
3. 58*58
4. 40*40
5. 80*80  

 

转载于:https://www.cnblogs.com/hanbingljw/p/4330033.html