UI界面設(shè)計

2018最強(qiáng)手機(jī)APP切圖規(guī)范指南和切片要求

11662

關(guān)于手機(jī)APP切圖的干貨，25學(xué)堂已經(jīng)分享了很多，但是不是很全面，同時也沒有把一些APP切圖需要注意點(diǎn)分享給大家，于是，學(xué)堂君想在今天把前輩切片的經(jīng)驗分享出來。

之前25學(xué)堂分享的APP切圖干貨：

1、小白自學(xué)APP切圖：APP切圖工具Cutterman的參數(shù)設(shè)置

2、APP切圖教程分享：iOS的切片資源命名規(guī)范

3、手機(jī)APP切圖、界面優(yōu)化和標(biāo)注的那些設(shè)計知識點(diǎn)

4、手機(jī)APP界面切圖命名和文件整理規(guī)范【簡單版】

5、移動APP設(shè)計之PS切圖插件大匯總，值得收藏

如今最新的iphone手機(jī)是iphone X和iphone X plus? 這手機(jī)尺寸是1125*2436px

跟iphone 8 的放大模式尺寸1125*2001px 是高了435px。如下圖所示：

iPhone-X-適配

所以，切片是@3x就可以滿足iphone x 最新手機(jī)的尺寸要求了。

所以，APPUI設(shè)計師需要給出的APP切片資源有3套：

1、??標(biāo)注圖（以750為寬度尺寸為基準(zhǔn)標(biāo)注）

2、??2x切圖（以750為寬度尺寸為基準(zhǔn)切圖）

3、??3x切圖（以1242為寬度尺寸為基準(zhǔn)切圖）

手機(jī)APP的切片要求：

1、?切圖資源尺寸必須為雙數(shù)

如果是單數(shù)切圖的話，手機(jī)系統(tǒng)就會自動拉伸切圖，從而導(dǎo)致切圖元素邊緣模糊，造成開發(fā)出來的APP界面效果與原設(shè)計效果差距甚遠(yuǎn)。

2、如果設(shè)計稿是按標(biāo)準(zhǔn)分辨率1242X2208設(shè)計，圖片資源尺寸則是@3倍圖尺寸，將整個設(shè)計圖壓縮成750X1334，圖片資源尺寸則是@2倍圖尺寸，在二倍圖的基礎(chǔ)上壓縮成50%，圖片資源尺寸則是1倍圖尺寸；當(dāng)然，你也可以按照@2x圖 750*1334px的尺寸來設(shè)計。然后再去適配@3x倍圖的設(shè)備。

3、產(chǎn)品效果圖獨(dú)立切片，即是每張效果圖獨(dú)立建立一個文件夾（命名以效果圖名稱為準(zhǔn)），文件夾內(nèi)容包含1倍圖文件、2倍圖文件、3倍圖文件和標(biāo)識文件

4、圖片命名要求語義化，格式為png；

5、圖片資源需要備有1倍圖、2倍圖、3倍圖，3倍圖命名規(guī)則為：添加后綴@3x；2倍圖命名規(guī)則為：添加后綴@2x；例如：1倍圖：abg.png，2倍圖則為：abc@2x.png，3倍圖則為：abc@3x.png;

6、字體:IOS默認(rèn)字體—— 英文? HelveticalNeue?? 中文黑體；字體大小采用點(diǎn)pt，設(shè)計稿以相對單位px，字體大小需要進(jìn)行轉(zhuǎn)化，轉(zhuǎn)化公式為：px*72/96=pt（eg：12px*72/96=9pt），字體顏色只需給出rgb值（eg：color：rgb（255，255，255））；

7、頁面純色背景需標(biāo)出rgb值，如果有透明度則需標(biāo)出rgba值，其他特殊背景直接切圖；

8、頁面的圖標(biāo)、色塊、按鈕的高度都必須是4的倍數(shù)，最小像素不能低于44px，如不夠可以添加補(bǔ)白；

9、頁面外邊距留白為10px；可點(diǎn)擊部件應(yīng)當(dāng)注意其點(diǎn)擊區(qū)域不小于88px

10、啟動圖標(biāo)1024*1024,png格式，不能透明底，透明的部分補(bǔ)白色。

11、為了提升APP使用速度，盡量降低圖片文件大小

圖片在線壓縮工具有：手機(jī)APP設(shè)計必備圖片壓縮神器-TinyPNG和設(shè)計師最愛的無損圖片壓縮工具—ImageOptim

12、使用APP切圖 ps插件Cutterman——一鍵切圖，真正解放雙手

uisdc-tool-201701058