App 切圖檔案命名方式


一個 App 通常會有很多張切圖,不管是 iPhone 需要 1x、2x 圖檔,Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔,檔名的命令方式就需要雙方統一格式方便大家作業。

補充:圖中出現的 AAA-1.png 之類命名方式是錯誤示範,早期不懂事,請用「圖片類型_分類_用途_狀態.png」這種方式命名。

基本上 App 的切圖可分為數大類:背景、按鈕、圖示、圖片、照片、TabBar icon 等。為了讓切圖便於管理,通常會依圖片性質命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。當圖檔要做給 Retina 螢幕使用時,只要在副檔名前加上「@2x」就可以了。如 bg-xxx@2x.pngbtn-xxx@2x.pngicon-xxx@2x.png。在命名時 bg-xxx.png 中間的 - 可以改為 _ 。

iOS HIG 上寫著 Desktop icon 檔案命名使用 -,如果切圖只給 iOS 使用,可以和 iOS 採用相同的命名方式。請注意 Android 不支援 - 的命名方式,如果圖檔要運用在 Android 上,請把所有的 - 改成 _ 底線。最好不要把數字或符號當成檔名的開頭,如 3-icon.png+abc.png 之類。以下由「微波效應」這個(年代久遠)的 iPhone App 為範例。

背景
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,我會在命名時多一層區隔,註明這張圖是用在什麼地方,比如 icon-side-setup.png,從檔名就能大概猜出這張 icon 圖應該是用在 Side Menu 。以上命名方式是我慣用的,每位 UI 習慣的命名方式都不太一樣,沒有標準格式。總而言之,檔名這回事也是 RD 說好就好,不確定要怎麼做的話,就去問他們吧。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close