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  

 

ios移動端切圖及前端規範