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倍圖則為：[e-mail]，3倍圖則為：[e-mail];

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