ios移動端切圖及前端規範

移動端IOS知識普及：IOS標準分辨率：1242px * 2208px 

 

切片要求：

一、    設計稿是按標準分辨率1242X2208設計，圖片資源尺寸則是3倍圖尺寸，將整個設計圖壓縮成750X1334，圖片資源尺寸則是2倍圖尺寸，在二倍圖的基礎上壓縮成50%，圖片資源尺寸則是1倍圖尺寸；

二、產品效果圖獨立切片，便是每張效果圖獨立創建一個文件夾（命名以效果圖名稱爲準），文件夾內容包含1倍圖文件、2倍圖文件、                                     3倍圖文件和標識文件

三、圖片命名要求語義化，格式爲png；

四、圖片資源須要備有1倍圖、2倍圖、3倍圖，3倍圖命名規則爲：添加後綴@3x；2倍圖命名規則爲：添加後綴@2x；例如：1倍圖：abg.png，2倍圖則爲：abc@2x.png，3倍圖則爲：abc@3x.png;

五、字體:IOS默認字體—— 英文  HelveticalNeue   中文 黑體；字體大小採用點pt，設計稿以相對單位px，字體大小須要進行轉化，轉化公式爲：px*72/96=pt（eg：12px*72/96=9pt）， 字體顏色只需給出rgb值（eg：color：rgb（255，255，255））；

六、頁面純色背景需標出rgb值，若是有透明度則需標出rgba值，其餘特殊背景直接切圖；

七、頁面的圖標、色塊、按鈕的高度都必須是4的倍數，最小像素不能低於44px，如不夠能夠添加補白；

八、頁面外邊距留白爲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 

 

 

 

轉自：http://www.cnblogs.com/hanbingljw/p/4330033.html