我們都知道一套完整的 App 通常會有很多張切圖,不管是 iPhone 需要 1x、2x、3x 圖檔,Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔,檔名的命令方式就需要雙方統一格式方便大家作業。所以,制定一套非常有效而方便的APP切圖命名規範非常有用的。

下面就跟隨小編來詳細瞭解APP切圖命名的流程和命名規範。

ios切圖尺寸規則

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

美術交付給開發的資料有
1、  標註圖(以640爲寬度尺寸爲基準標註)
2、  2x切圖(以640爲寬度尺寸爲基準切圖)
3、  3x切圖(以1280爲寬度尺寸爲基準切圖)

開發看到這份標註圖,可以自己用上面的數字,乘以1.5得出3X的數字。

APP切圖詳細規範終極指南

 

1.爲什麼3x切圖要以1280來爲寬度?
其實iPhone6+的尺寸1242*2208作爲3X,怎麼算都又難記又不能整除,我們直接640*2得到1280跟1242相差也沒幾十個像素,最重要的是不虛邊啊,放在真機上看(處女座除外)看不出差別的。
2.爲什麼只設寬度?
爲了保持長寬比例。iPhone的這幾個尺寸不是正好的,寬度放大後高度總差那麼幾個像素,這不要緊,千萬別去改高度,手機屏幕是可以上下滑動的嘛。不可以滑動必須保證一屏顯示的除外,手動去調整好了。
3.爲什麼開發不是乘以2而是乘以1.5來算尺寸和字號?因爲大屏手機就是要顯示更多內容而存在的。純等比放大界面看起來傻大傻大的,實驗證明1.5倍是正好的。

Android切圖尺寸規則

px(像素)是我們UI設計師在PS裏使用的(不解釋),同時也是手機屏幕上所顯示的(也不解釋)
dp是開發寫layout的時候使用的尺寸單位,sp是開發寫layout時關於字體的字號單位,且dp與sp總爲1:1關係。

Android支持四種不同的dpi模式:ldpi mdpi hdpi xhdpi xxhdpi

一般地,手機分辨率與所運行的dpi模式是匹配的,例如hvga(320×480像素)的手機屏幕一般在3.5英寸左右,運行在mdpi模式下(也有例外,稍後解釋)(這個是ROM控制的,app不能改變)。當運行在mdpi下時,1dp=1px:也就是說設計師在PS裏定義一個item高48px,開發就會定義該item高48dp;Photoshop中14px大的字體,開發會定義爲14sp。

對於一部wvga(480×800)手機(G7、N1、NS),一般是運行在hdpi模式下。當運行在hdpi模式下時,1dp=1.5px:也就是說設計師在PS裏定義一個item高72px,開發就會定義該item高48dp;Photoshop中21px大的字體,開發會定義爲14sp。

所以,當你的app需要適配多個dpi模式的時候(例如同時適配mdpi與hdpi),若你在wvga下做設計,你需要將你的各數值都爲3的倍數,並在切圖標註時將所有的數字除以3乘以2換算成dp,這樣開發的同一套layout就能用在兩個不同的dpi模式下,而不是寫兩套layout。

mdpi與hdpi是2:3的關係
mdpi與xhdpi是1:2的關係
ldpi與mdpi是3:4的關係

Galaxy Nexus 是720P屏幕,就是運行在xhdpi下的。

再補充一種例外,有些比較山寨的Pad有可能是7英寸屏幕,分辨率爲wvga(480×800)運行在mdpi下,所以一部wvga手機是320x533dp,一部wvga平板是480x800dp,可以顯示的內容會多很多。

從2013年開始ldpi mdpi hdpi相繼退出了歷史舞臺!以1280*720的720P主要機型佔據了主流,即xhdpi。

2015年預計將會是1080P的天下了,因爲從14年下半年到2015年推出的android手機均爲1080P,可以預見未來的趨勢!

以下是當前android主要機型規範:

手機常見分辨率:

4:3
VGA     640*480 (Video Graphics Array)
QVGA  320*240 (Quarter VGA)
HVGA  480*320 (Half-size VGA)
SVGA  800*600 (Super VGA)

5:3
WVGA  800*480 (Wide VGA)

16:9
FWVGA 854*480 (Full Wide VGA)
HD        1920*1080 High Definition
QHD     960*540
720p    1280*720  標清
1080p  1920*1080 高清

手機:
小米1             854*480(FWVGA)
小米2             1280*720

小米4             1920*1080

分辨率對應DPI
"HVGA    mdpi"

"WVGA   hdpi "
"FWVGA hdpi "
"QHD      hdpi "
"720P     xhdpi"
"1080P   xxhdpi "

 

 APP切圖命名規則

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

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

爲了讓切圖便於管理,通常會依圖片性質命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。當圖檔要做給 Retina 螢幕使用時,只要在副檔名前加上「@2x」就可以了。如[email protected][email protected] 、[email protected]。在命名時 bg-xxx.png 中間的 – 可以改爲 _ 。

iOS HIG 上寫著 Desktop icon 檔案命名使用 -,如果切圖只給 iOS 使用,可以和 iOS 採用相同的命名方式。請注意 Android 不支援 – 的命名方式,如果圖檔要運用在 Android 上,請把所有的 – 改成 _ 底線。最好不要把數字或符號當成檔名的開頭,如 3-icon.png 、+abc.png之類。
APP切圖詳細規範終極指南

 

背景
bg-xxx.png,從整個頁面的大底圖、某個 TableView 的字段底圖、Navigation Bar 的底圖都可算在背景範圍內。
APP切圖詳細規範終極指南

 

頁面背景
要留意整個畫面的高度,大多數的頁面需要扣除狀態列和 Navigation Bar 高度,如果畫面上有 Tab Bar 的話,底圖尺寸會更小。
APP切圖詳細規範終極指南

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

 

按鈕底圖
按鈕有很多種不同的作法,有的是將整個按鈕連帶文字一起切圖,有的運用在內建按鈕上、底圖和文字是分開的。在這邊指的是底圖和文字分開的按鈕,這種作法優點在於按鈕可隨文字長度自行加長縮短,底圖也會自行延展,不需將 App 內所有的按鈕都切圖出來。
APP切圖詳細規範終極指南

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

(Android App 按鈕就一定要 2 張圖,一般狀態、點擊狀態。)

 

一般(normal):btn-xxx-n.png,最基本的按鈕外觀。
APP切圖詳細規範終極指南

點擊(highlight):btn-xxx-h.png,使用者觸摸螢幕碰到按鈕,爲了告知使用者有點擊到而出現的迴應提示。
APP切圖詳細規範終極指南

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

選中(selected):btn-xxx-s.png,選中出現在有複數選項時,但通常不會把按鈕拿去做複數選項控件,這種按鈕狀態出現的機會不高。

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

圖示:icon-xxx.png。
APP切圖詳細規範終極指南

圖片:pic-xxx.png 或是 img-xxx.png。
照片:pho-xxx.png。
APP切圖詳細規範終極指南

PS.如果是流水號的話,要從 0 開始編號喔!

TabBar 上的 icon 作法較特殊,雖然它是 icon,但我不會以 icon-xxx.png 來命名。爲了和其他 icon 作區隔,我會使用 tab-xxx.png 來表示。(App:App Store)
APP切圖詳細規範終極指南

若使用 iOS 內建的 TabBar,則 icon 尺寸、製圖方式都需依照規範。在 iOS5 之後 TabBar 可以變更 底圖和 icon 圖,不受黑底白 icon 的限制。TabBar 可分成三層:底圖層、選中時的高光層、icon層。(App:Find my friends)
APP切圖詳細規範終極指南

底圖層、高光層會因爲 TabBar 個數不同而自動延伸,高度爲 49px。icon 需依 Guideline 製作 30x30px。加上選中時 icon 會改變,因此 TabBar 的切圖共有 4 個部份:底圖、選中時的高光、一般情況下的 icon、被選中時的 icon。

IOS機Android切圖標註與命名規範

APP切圖詳細規範終極指南

APP各模塊命名規範:

APP切圖詳細規範終極指南

APP切圖詳細規範終極指南

 

APP切圖詳細規範終極指南

 

APP切圖詳細規範終極指南

 

APP切圖詳細規範終極指南

 

APP切圖詳細規範終極指南

 

APP切圖詳細規範終極指南

 

APP切圖詳細規範終極指南