iOS app 切圖

iOS 切圖尺寸規則

目前iPhone有10種型號，5種屏幕尺寸，再加上6plus的「降採樣」（Downsampling）（1080-1920），還有iPhone6和6+上的放大模式（1125-2001）和默認模式（1242-2208），是否是感受好恐怖？可是不用怕，我分享一套超簡單的適配方法，看完你都不信有這麼簡單~

美工交付給開發的資料有:
　　一、  標註圖（以640爲寬度尺寸爲基準標註）
　　二、  2x切圖（以640爲寬度尺寸爲基準切圖）
　　三、  3x切圖（以1280爲寬度尺寸爲基準切圖）

開發看到這份標註圖，能夠本身用上面的數字，乘以1.5得出3X的數字。

 

1.爲何3x切圖要以1280來爲寬度？
　　其實iPhone6+的尺寸1242*2208做爲3X，怎麼算都又難記又不能整除，咱們直接640*2獲得1280跟1242相差也沒幾十個像素，最重要的是不虛邊啊，放在真機上看（處女座除外）看不出差異的。

2.爲何只設寬度？
　　爲了保持長寬比例。iPhone的這幾個尺寸不是正好的，寬度放大後高度總差那麼幾個像素，這沒關係，千萬別去改高度，手機屏幕是能夠上下滑動的嘛。不能夠滑動必須保證一屏顯示的除外，手動去調整好了。

3.爲何開發不是乘以2而是乘以1.5來算尺寸和字號？

由於大屏手機就是要顯示更多內容而存在的。純等比放大界面看起來傻大傻大的，實驗證實1.5倍是正好的.

 

APP 切圖命名規則:

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

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

爲了讓切圖便於管理，一般會依圖片性質命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。當圖檔要作給 Retina 螢幕使用時，只要在副檔名前加上「@2x」就能夠了。如bg-xxx@2x.png、btn-xxx@2x.png 、icon-xxx@2x.png。在命名時 bg-xxx.png 中間的 – 能夠改成 _ 。

iOS HIG 上寫著 Desktop icon 檔案命名使用 -，若是切圖只給 iOS 使用，能夠和 iOS 採用相同的命名方式。請注意 Android 不支援 – 的命名方式，若是圖檔要運用在 Android 上，請把全部的 – 改爲 _ 底線。最好不要把數字或符號當成檔名的開頭，如 3-icon.png 、+abc.png之類。

 

背景
bg-xxx.png，從整個頁面的大底圖、某個 TableView 的字段底圖、Navigation Bar 的底圖均可算在背景範圍內。

 

頁面背景
要留意整個畫面的高度，大多數的頁面須要扣除狀態列和 Navigation Bar 高度，若是畫面上有 Tab Bar 的話，底圖尺寸會更小。

TableView 字段底圖
運用在列表。列表字段內容可能包含縮圖、說明文字、箭頭等。爲了美感或是加快開發效率，有時會將縮圖和箭頭等直接作在底圖上，遇到這種情形請先向 RD 討論確認單一字段內擁有哪些元素、又有哪些元素要直接作在底圖上。

 

按鈕底圖
按鈕有不少種不一樣的做法，有的是將整個按鈕連帶文字一塊兒切圖，有的運用在內建按鈕上、底圖和文字是分開的。在這邊指的是底圖和文字分開的按鈕，這種做法優勢在於按鈕可隨文字長度自行加長縮短，底圖也會自行延展，不需將 App 內全部的按鈕都切圖出來。

按鈕的切圖常以 btn-xxx.png 來命名 。App 裏的按鈕擁有 4 種屬性，分別爲通常、點擊、不能點擊、選中。但不追求精緻與完整度的話，只出通常屬性按鈕圖檔就能夠了，在 iOS 上 RD 能在使用者點擊按鈕時將原圖檔變暗作爲點擊提示。

（Android App 按鈕就必定要 2 張圖，通常狀態、點擊狀態。）

 

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

點擊（highlight）：btn-xxx-h.png，使用者觸摸螢幕碰到按鈕，爲了告知使用者有點擊到而出現的迴應提示。

不能點擊(disabled)：btn-xxx-d.png，表明App有這功能但使用者沒法使用。例如如安裝在iPod上的App有播打電話功能時。既然不能被點擊乾脆直接隱藏的做法也是有的。要直接將按鈕隱藏或是以不能被點擊的狀態呈現需視狀況決定。

選中(selected)：btn-xxx-s.png，選中出如今有複數選項時，但一般不會把按鈕拿去作複數選項控件，這種按鈕狀態出現的機會不高。

此外，圖示、圖片、照片我也習慣有固定的命名方式。主要是讓 RD 可以快速套圖，並無硬性規定該如何將圖檔分類命名。

圖示：icon-xxx.png。

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

PS.若是是流水號的話，要從 0 開始編號喔！

TabBar 上的 icon 做法較特殊，雖然它是 icon，但我不會以 icon-xxx.png 來命名。爲了和其餘 icon 做區隔，我會使用 tab-xxx.png 來表示。（App：App Store）

若使用 iOS 內建的 TabBar，則 icon 尺寸、製圖方式都需依照規範。在 iOS5 以後 TabBar 能夠變動 底圖和 icon 圖，不受黑底白 icon 的限制。TabBar 可分紅三層：底圖層、選中時的高光層、icon層。（App：Find my friends）

底圖層、高光層會由於 TabBar 個數不一樣而自動延伸，高度爲 49px。icon 需依 Guideline 製做 30x30px。加上選中時 icon 會改變，所以 TabBar 的切圖共有 4 個部份：底圖、選中時的高光、通常狀況下的 icon、被選中時的 icon。

 

APP各模塊命名規範：

 

 

 

 

 

 

以上爲逍遙樂根據網絡現有資料進行整理概括，版權不歸逍遙樂全部！逍遙樂在概括時作了刪減修正添加處理！