iOS app 切图
iOS 切圖尺寸規(guī)則
目前iPhone有10種型號,5種屏幕尺寸,再加上6plus的“降采樣”(Downsampling)(1080-1920),還有iPhone6和6+上的放大模式(1125-2001)和默認(rèn)模式(1242-2208),是不是感覺好恐怖?但是不用怕,我分享一套超簡單的適配方法,看完你都不信有這么簡單~
美工交付給開發(fā)的資料有:
1、??標(biāo)注圖(以640為寬度尺寸為基準(zhǔn)標(biāo)注)
2、??2x切圖(以640為寬度尺寸為基準(zhǔn)切圖)
3、??3x切圖(以1280為寬度尺寸為基準(zhǔn)切圖)
開發(fā)看到這份標(biāo)注圖,可以自己用上面的數(shù)字,乘以1.5得出3X的數(shù)字。
?
1.為什么3x切圖要以1280來為寬度?
其實iPhone6+的尺寸1242*2208作為3X,怎么算都又難記又不能整除,我們直接640*2得到1280跟1242相差也沒幾十個像素,最重要的是不虛邊啊,放在真機上看(處女座除外)看不出差別的。
2.為什么只設(shè)寬度?
為了保持長寬比例。iPhone的這幾個尺寸不是正好的,寬度放大后高度總差那么幾個像素,這不要緊,千萬別去改高度,手機屏幕是可以上下滑動的嘛。不可以滑動必須保證一屏顯示的除外,手動去調(diào)整好了。
3.為什么開發(fā)不是乘以2而是乘以1.5來算尺寸和字號?
因為大屏手機就是要顯示更多內(nèi)容而存在的。純等比放大界面看起來傻大傻大的,實驗證明1.5倍是正好的.
?
APP 切圖命名規(guī)則:
基本上 App 的切圖可分為下面幾大類:
背景、按鈕、圖示、圖片、照片、TabBar icon 等。
為了讓切圖便於管理,通常會依圖片性質(zhì)命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。當(dāng)圖檔要做給 Retina 螢?zāi)皇褂脮r,只要在副檔名前加上「@2x」就可以了。如bg-xxx@2x.png、btn-xxx@2x.png?、icon-xxx@2x.png。在命名時 bg-xxx.png 中間的 – 可以改為 _ 。
iOS HIG 上寫著 Desktop icon 檔案命名使用 -,如果切圖只給 iOS 使用,可以和 iOS 采用相同的命名方式。請注意 Android 不支援 – 的命名方式,如果圖檔要運用在 Android 上,請把所有的 – 改成 _ 底線。最好不要把數(shù)字或符號當(dāng)成檔名的開頭,如?3-icon.png 、+abc.png之類。
?
背景
bg-xxx.png,從整個頁面的大底圖、某個 TableView 的字段底圖、Navigation Bar 的底圖都可算在背景范圍內(nèi)。
?
頁面背景
要留意整個畫面的高度,大多數(shù)的頁面需要扣除狀態(tài)列和 Navigation Bar 高度,如果畫面上有 Tab Bar 的話,底圖尺寸會更小。
TableView 字段底圖
運用在列表。列表字段內(nèi)容可能包含縮圖、說明文字、箭頭等。為了美感或是加快開發(fā)效率,有時會將縮圖和箭頭等直接做在底圖上,遇到這種情形請先向 RD 討論確認(rèn)單一字段內(nèi)擁有哪些元素、又有哪些元素要直接做在底圖上。
?
按鈕底圖
按鈕有很多種不同的作法,有的是將整個按鈕連帶文字一起切圖,有的運用在內(nèi)建按鈕上、底圖和文字是分開的。在這邊指的是底圖和文字分開的按鈕,這種作法優(yōu)點在于按鈕可隨文字長度自行加長縮短,底圖也會自行延展,不需將 App 內(nèi)所有的按鈕都切圖出來。
按鈕的切圖常以 btn-xxx.png 來命名 。App 里的按鈕擁有 4 種屬性,分別為一般、點擊、不能點擊、選中。但不追求精致與完整度的話,只出一般屬性按鈕圖檔就可以了,在 iOS 上 RD 能在使用者點擊按鈕時將原圖檔變暗做為點擊提示。
(Android App 按鈕就一定要 2 張圖,一般狀態(tài)、點擊狀態(tài)。)
?
一般(normal):btn-xxx-n.png,最基本的按鈕外觀。
點擊(highlight):btn-xxx-h.png,使用者觸摸螢?zāi)慌龅桨粹o,為了告知使用者有點擊到而出現(xiàn)的回應(yīng)提示。
不能點擊(disabled):btn-xxx-d.png,代表App有這功能但使用者無法使用。例如如安裝在iPod上的App有播打電話功能時。既然不能被點擊干脆直接隱藏的作法也是有的。要直接將按鈕隱藏或是以不能被點擊的狀態(tài)呈現(xiàn)需視情況決定。
選中(selected):btn-xxx-s.png,選中出現(xiàn)在有復(fù)數(shù)選項時,但通常不會把按鈕拿去做復(fù)數(shù)選項控件,這種按鈕狀態(tài)出現(xiàn)的機會不高。
此外,圖示、圖片、照片我也習(xí)慣有固定的命名方式。主要是讓 RD 能夠快速套圖,并沒有硬性規(guī)定該如何將圖檔分類命名。
圖示:icon-xxx.png。
圖片:pic-xxx.png 或是 img-xxx.png。
照片:pho-xxx.png。
PS.如果是流水號的話,要從 0 開始編號喔!
TabBar 上的 icon 作法較特殊,雖然它是 icon,但我不會以 icon-xxx.png 來命名。為了和其他 icon 作區(qū)隔,我會使用 tab-xxx.png 來表示。(App:App Store)
若使用 iOS 內(nèi)建的 TabBar,則 icon 尺寸、制圖方式都需依照規(guī)范。在 iOS5 之后 TabBar 可以變更 底圖和 icon 圖,不受黑底白 icon 的限制。TabBar 可分成三層:底圖層、選中時的高光層、icon層。(App:Find my friends)
底圖層、高光層會因為 TabBar 個數(shù)不同而自動延伸,高度為 49px。icon 需依 Guideline 制作 30x30px。加上選中時 icon 會改變,因此 TabBar 的切圖共有 4 個部份:底圖、選中時的高光、一般情況下的 icon、被選中時的 icon。
?
APP各模塊命名規(guī)范:
?
?
?
?
?
?
以上為逍遙樂根據(jù)網(wǎng)絡(luò)現(xiàn)有資料進(jìn)行整理歸納,版權(quán)不歸逍遙樂所有!逍遙樂在歸納時做了刪減修正添加處理!
轉(zhuǎn)載于:https://www.cnblogs.com/Flysouler-1001/p/4979929.html
總結(jié)
以上是生活随笔為你收集整理的iOS app 切图的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: shell脚本:批量检查并更改MySQL
- 下一篇: 正则验证js大全