設計切圖的原則

設計切圖輸出的目的是跟下遊的工西也程師團隊協同工作，那麼(me)在團隊協作過(guò)程中首先應要場該保證切圖輸出能(néng)夠滿足工程師設計效果圖的高保真們木還(hái)原的需求。其次切圖輸出應子對該盡可能(néng)的降低工程師的開(kāi)發(fā)厭微工作量，避免因切圖輸出而導緻的不必要的店年工作量。最後(hòu)輸出的切圖應當盡可能(néng)的壓縮大小，以數志降低APP的總大小，提升用戶使用時(shí)的加載速度拍在。所以切圖輸出應當做到切圖精準、便與協同和壓縮大紙不小。

1.切圖資源尺寸必須爲雙數

衆所周知智能(néng)手機的屏幕大小都(dōu)是雙工亮數值，比如iphone 7的屏幕分辨率是750都金*1334px。切圖資源尺寸必須爲雙數是爲了保證切圖資源在工程師開文在(kāi)發(fā)時(shí)是高清顯示。因爲1px是智能(néng)離見手機能(néng)夠識别的最小單位，換句話報區說(shuō)就(jiù)是1像素不能(néng)在智能(né路街ng)手機被(bèi)分爲兩(liǎng)份。所以如果是單數切圖的話手機系統慢錢就(jiù)會(huì)自動拉伸切圖從而導緻切圖元素邊緣模糊，進(j外務ìn)而造成(chéng)開(kā歌明i)發(fā)出來的APP界面(miàn)效果與原設計效果差距甚遠。章體

2.圖标切圖輸出應根據标準尺寸輸出爸對并且考慮到手機适配（主要是iPhone 6plus的适配）

在切圖資源輸出中圖标切圖輸出身年是至關重要的部分。因爲在開(kāi)發(fā)中由于各會木機型的屏幕分辨率不同，需要針對(duì)一些大屏機型進(城個jìn)行适配。爲了适配大分辨率手機（例如iphone 7笑件plus）圖标在切圖的時(shí)候需要輸出@2x和@3x的切圖，其妹資中@2x的切圖可以滿足雙平台大部分機型的适配要求，兒上@3x是用來适配iphone手西南機的各種(zhǒng)plus版本的手機（後(hòu)邊會(huì明水)有文章專門講解關于适配的問題）。@3x照業是@2x尺寸的1.5倍，例如一個圖标切圖@2x尺寸是44px，那麼(me)@些個3x尺寸是66px。

3.爲了提升APP使用速度，盡量降低圖片文件大小

在切圖資源輸出中圖标切圖輸出是很重要的部分，比如新手引導頁、啓動頁面件筆(miàn)、默認圖、廣告圖等。鄉紙圖片切圖一般情況下文件大小都(dōu)是相對(duì)較大，不利于用戶在使用a朋愛pp過(guò)程中加載頁面(miàn)。因此圖片切圖吧家要盡量壓縮圖片文件的大小（文加壓拍自縮的方法在文章後(hòu)面(miàn)有詳細講解）。

4.可點擊部件應當注意其點擊區域不小于88px

44px的點擊區域數值是在iphone 3 （320×480p能湖x）普通顯示屏下制定出來的，在手機分辨率大幅提升的現在，這(zhè)個數據自然空影要與時(shí)俱進(jìn)。在iphon弟醫e7 （750*1334px）的Retina舊市 顯示屏下44px點擊區域就(jiù)變爲了88px。但無好做論是320*480px尺寸下的44px還(hái)是在750*1334快多px尺寸下的88px，換算成(ch林白éng)物理尺寸後(hòu)大緻是在7m工請m-9mm之間。早在人機工程學(xué)的研究中曾得出結論西暗，認爲人類舒适的觸擊範圍需在7-9mm的大小。所以在ios官方的空多通間尺寸也經(jīng)常出現88px的數值，比如菜單欄的高度便是88知訊px。

5.可點擊部件要把相關狀态都(dōu)切圖輸出，比如正常算志狀态、點擊狀态。

在切圖過(guò)程中不僅要輸出正常狀态綠技的切圖，更要注意不要遺漏其他狀态的切圖站國。這(zhè)個也是設計師經(jīng)常會(月熱huì)出現的失誤，比如在按鈕切圖的過(guò)程中可能(néng吧都)會(huì)忽略點擊切圖的狀态。所以設計師在做設計科但圖是最好(hǎo)盡量把頁面(miàn)中會(hu關女ì)出現的各種(zhǒng)狀态展示出來，避免後(hòu)期切圖跳日的時(shí)候遺漏狀态。

切圖輸出類型

1.桌面(miàn)圖标切圖輸出

app的桌面(miàn)圖标會(動們huì)被(bèi)運用在很多不同的地方展示，比如手機桌面小少(miàn)、APP store、手機的機歌設置列表，所以app桌面(miàn)圖标需要很多個不同尺寸的切圖輸出。兩(li空亮ǎng)個平台對(duì)相應桌面(miàn)圖标設計輸出尺寸也不盡相同費議，在輸出的時(shí)候要把雙又腦平台的這(zhè)些尺寸全部輸出切圖。桌面(miàn)圖标切圖隻需要提問好供直角的圖标切圖即可，手機系統會(huì)自動生成(chéng)圓角效果。