APP切圖詳細規范終極指南


       我們都知道一套完整的 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倍是正好的。

 

移動端IOS知識普及:IOS標准分辨率:1242px * 2208px 

切片要求:

1、設計稿是按標准分辨率1242X2208設計,圖片資源尺寸則是3倍圖尺寸,將整個設計圖壓縮成750X1334,圖片資源尺寸則是2倍圖尺寸,在二倍圖的基礎上壓縮成50%,圖片資源尺寸則是1倍圖尺寸;

2、產品效果圖獨立切片,即是每張效果圖獨立建立一個文件夾(命名以效果圖名稱為准),文件夾內容包含1倍圖文件、2倍圖文件、3倍圖文件和標識文件

3、圖片命名要求語義化,格式為png;

4、圖片資源需要備有1倍圖、2倍圖、3倍圖,3倍圖命名規則為:添加后綴@3x;2倍圖命名規則為:添加后綴@2x;例如:1倍圖:abg.png,2倍圖則為:abc@2x.png,3倍圖則為:abc@3x.png;

5、 字體:IOS默認字體—— 英文  HelveticalNeue   中文 黑體;字體大小采用點pt,設計稿以相對單位px,字體大小需要進行轉化,轉化公式為:px*72/96=pt(eg:12px*72/96=9pt), 字體顏色只需給出rgb值(eg:color:rgb(255,255,255));

6、頁面純色背景需標出rgb值,如果有透明度則需標出rgba值,其他特殊背景直接切圖;

7、頁面的圖標、色塊、按鈕的高度都必須是4的倍數,最小像素不能低於44px,如不夠可以添加補白;

8、頁面外邊距留白為10px;

9.啟動圖標1024*1024,png格式,不能透明底,透明的部分補白色。

 

IOS切圖規范:

設計圖:1242X2208

三倍圖:按1242X2208來切  iphone plus

二倍圖:將整個設計圖壓縮成750X1334 按750X1334切

一倍圖:在二倍圖的基礎上壓縮成50%一倍圖 

Ios啟動圖:圖標按照最大1024*1024來設計,之后按照比例縮小到每個尺寸,再進行調整,提交沒有高光和陰影的直角方形圖即可;

 

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」就可以了。如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之類。
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切圖詳細規范終極指南

以上為冰冰根據網絡現有資料進行整理歸納,版權不歸冰冰所有!冰冰在歸納時做了刪減修正添加處理!

PS:在外企也好,合資也罷,職場中每個人都有自己的代號,不僅僅是Peter、Mary、Jack、Rose,還有各種PM、RD、QA、OP!這些英文縮寫都是什么意思?初入職場或者准備踏入職場的你是不是已經有點犯暈了?今天小編就來給大家科普一下那些聽起來神秘又高端的英文職位縮寫。

1.PM: Product Manager,產品經理,又稱品牌經理(Brand Manager)。產品從創意到上市,所有相關的研發、調研、生產、編預算、廣告、促銷活動等等,都由產品經理掌控。

2.RD: Research and Development engineer,研發工程師,對某種不存在的事物進行系統的研究和開發並具有一定經驗的專業工作者,或者對已經存在的事物進行改進以達到優化目的的專業工作者。

3.FE: FE有多種解釋,在實體經濟中,FE可以指Facility Engineer,廠務工程師,主要負責工廠的外圍的一些支持系統。在網絡經濟中,FE可以指Front-End Development,前端開發,新新職業。

4.QA: Qualtiy Assurance,品質保證。QA的主要職責就是質量保證工作。

5.OP: Operator,操作員,管理員。

看了解釋之后是不是清楚了很多?


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM