iOS 切圖尺寸規(guī)則

目前iPhone有10種型號(hào)，5種屏幕尺寸，再加上6plus的“降采樣”（Downsampling）（1080-1920），還有iPhone6和6+上的放大模式（1125-2001）和默認(rèn)模式（1242-2208），是不是感覺(jué)好恐怖？但是不用怕，我分享一套超簡(jiǎn)單的適配方法，看完你都不信有這么簡(jiǎn)單~

美工交付給開(kāi)發(fā)的資料有:
　　1、??標(biāo)注圖（以640為寬度尺寸為基準(zhǔn)標(biāo)注）
　　2、??2x切圖（以640為寬度尺寸為基準(zhǔn)切圖）
　　3、??3x切圖（以1280為寬度尺寸為基準(zhǔn)切圖）

開(kāi)發(fā)看到這份標(biāo)注圖，可以自己用上面的數(shù)字，乘以1.5得出3X的數(shù)字。

?

1.為什么3x切圖要以1280來(lái)為寬度？
　　其實(shí)iPhone6+的尺寸1242*2208作為3X，怎么算都又難記又不能整除，我們直接640*2得到1280跟1242相差也沒(méi)幾十個(gè)像素，最重要的是不虛邊啊，放在真機(jī)上看（處女座除外）看不出差別的。

2.為什么只設(shè)寬度？
　　為了保持長(zhǎng)寬比例。iPhone的這幾個(gè)尺寸不是正好的，寬度放大后高度總差那么幾個(gè)像素，這不要緊，千萬(wàn)別去改高度，手機(jī)屏幕是可以上下滑動(dòng)的嘛。不可以滑動(dòng)必須保證一屏顯示的除外，手動(dòng)去調(diào)整好了。

3.為什么開(kāi)發(fā)不是乘以2而是乘以1.5來(lái)算尺寸和字號(hào)？

因?yàn)榇笃潦謾C(jī)就是要顯示更多內(nèi)容而存在的。純等比放大界面看起來(lái)傻大傻大的，實(shí)驗(yàn)證明1.5倍是正好的.

?

APP 切圖命名規(guī)則:

基本上 App 的切圖可分為下面幾大類：

背景、按鈕、圖示、圖片、照片、TabBar icon 等。

為了讓切圖便於管理，通常會(huì)依圖片性質(zhì)命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。當(dāng)圖檔要做給 Retina 螢?zāi)皇褂脮r(shí)，只要在副檔名前加上「@2x」就可以了。如bg-xxx@2x.png、btn-xxx@2x.png?、icon-xxx@2x.png。在命名時(shí) bg-xxx.png 中間的 – 可以改為 _ 。

iOS HIG 上寫著 Desktop icon 檔案命名使用 -，如果切圖只給 iOS 使用，可以和 iOS 采用相同的命名方式。請(qǐng)注意 Android 不支援 – 的命名方式，如果圖檔要運(yùn)用在 Android 上，請(qǐng)把所有的 – 改成 _ 底線。最好不要把數(shù)字或符號(hào)當(dāng)成檔名的開(kāi)頭，如?3-icon.png 、+abc.png之類。

?

背景
bg-xxx.png，從整個(gè)頁(yè)面的大底圖、某個(gè) TableView 的字段底圖、Navigation Bar 的底圖都可算在背景范圍內(nèi)。

?

頁(yè)面背景
要留意整個(gè)畫(huà)面的高度，大多數(shù)的頁(yè)面需要扣除狀態(tài)列和 Navigation Bar 高度，如果畫(huà)面上有 Tab Bar 的話，底圖尺寸會(huì)更小。

TableView 字段底圖
運(yùn)用在列表。列表字段內(nèi)容可能包含縮圖、說(shuō)明文字、箭頭等。為了美感或是加快開(kāi)發(fā)效率，有時(shí)會(huì)將縮圖和箭頭等直接做在底圖上，遇到這種情形請(qǐng)先向 RD 討論確認(rèn)單一字段內(nèi)擁有哪些元素、又有哪些元素要直接做在底圖上。

?

按鈕底圖
按鈕有很多種不同的作法，有的是將整個(gè)按鈕連帶文字一起切圖，有的運(yùn)用在內(nèi)建按鈕上、底圖和文字是分開(kāi)的。在這邊指的是底圖和文字分開(kāi)的按鈕，這種作法優(yōu)點(diǎn)在于按鈕可隨文字長(zhǎng)度自行加長(zhǎng)縮短，底圖也會(huì)自行延展，不需將 App 內(nèi)所有的按鈕都切圖出來(lái)。

按鈕的切圖常以 btn-xxx.png 來(lái)命名 。App 里的按鈕擁有 4 種屬性，分別為一般、點(diǎn)擊、不能點(diǎn)擊、選中。但不追求精致與完整度的話，只出一般屬性按鈕圖檔就可以了，在 iOS 上 RD 能在使用者點(diǎn)擊按鈕時(shí)將原圖檔變暗做為點(diǎn)擊提示。

（Android App 按鈕就一定要 2 張圖，一般狀態(tài)、點(diǎn)擊狀態(tài)。）

?

一般（normal）：btn-xxx-n.png，最基本的按鈕外觀。

點(diǎn)擊（highlight）：btn-xxx-h.png，使用者觸摸螢?zāi)慌龅桨粹o，為了告知使用者有點(diǎn)擊到而出現(xiàn)的回應(yīng)提示。

不能點(diǎn)擊(disabled)：btn-xxx-d.png，代表App有這功能但使用者無(wú)法使用。例如如安裝在iPod上的App有播打電話功能時(shí)。既然不能被點(diǎn)擊干脆直接隱藏的作法也是有的。要直接將按鈕隱藏或是以不能被點(diǎn)擊的狀態(tài)呈現(xiàn)需視情況決定。

選中(selected)：btn-xxx-s.png，選中出現(xiàn)在有復(fù)數(shù)選項(xiàng)時(shí)，但通常不會(huì)把按鈕拿去做復(fù)數(shù)選項(xiàng)控件，這種按鈕狀態(tài)出現(xiàn)的機(jī)會(huì)不高。

此外，圖示、圖片、照片我也習(xí)慣有固定的命名方式。主要是讓 RD 能夠快速套圖，并沒(méi)有硬性規(guī)定該如何將圖檔分類命名。

圖示：icon-xxx.png。

圖片：pic-xxx.png 或是 img-xxx.png。
照片：pho-xxx.png。

PS.如果是流水號(hào)的話，要從 0 開(kāi)始編號(hào)喔！

TabBar 上的 icon 作法較特殊，雖然它是 icon，但我不會(huì)以 icon-xxx.png 來(lái)命名。為了和其他 icon 作區(qū)隔，我會(huì)使用 tab-xxx.png 來(lái)表示。（App：App Store）

若使用 iOS 內(nèi)建的 TabBar，則 icon 尺寸、制圖方式都需依照規(guī)范。在 iOS5 之后 TabBar 可以變更 底圖和 icon 圖，不受黑底白 icon 的限制。TabBar 可分成三層：底圖層、選中時(shí)的高光層、icon層。（App：Find my friends）

底圖層、高光層會(huì)因?yàn)?TabBar 個(gè)數(shù)不同而自動(dòng)延伸，高度為 49px。icon 需依 Guideline 制作 30x30px。加上選中時(shí) icon 會(huì)改變，因此 TabBar 的切圖共有 4 個(gè)部份：底圖、選中時(shí)的高光、一般情況下的 icon、被選中時(shí)的 icon。

?

APP各模塊命名規(guī)范：

?

?

?

?

?

?

以上為逍遙樂(lè)根據(jù)網(wǎng)絡(luò)現(xiàn)有資料進(jìn)行整理歸納，版權(quán)不歸逍遙樂(lè)所有！逍遙樂(lè)在歸納時(shí)做了刪減修正添加處理！

轉(zhuǎn)載于:https://www.cnblogs.com/Flysouler-1001/p/4979929.html

總結(jié)

以上是生活随笔為你收集整理的iOS app 切图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。