切圖輸出類型

1.桌面圖標(biāo)切圖輸出

app的桌面圖標(biāo)會(huì)被運(yùn)用在很多不同的地方展示，比如手機(jī)桌面、APP store、手機(jī)的設(shè)置列表，所以app桌面圖標(biāo)需要很多個(gè)不同尺寸的切圖輸出。兩個(gè)平臺(tái)對(duì)相應(yīng)桌面圖標(biāo)設(shè)計(jì)輸出尺寸也不盡相同，在輸出的時(shí)候要把雙平臺(tái)的這些尺寸全部輸出切圖。桌面圖標(biāo)切圖只需要提供直角的圖標(biāo)切圖即可，手機(jī)系統(tǒng)會(huì)自動(dòng)生成圓角效果。

2.系統(tǒng)圖標(biāo)切圖輸出

一套圖適配雙平臺(tái)：

ios平臺(tái)（iphone 6plus版本除外）和安卓平臺(tái)公用44*44px切圖素材，即可實(shí)現(xiàn)一套切圖適配兩個(gè)平臺(tái)的開發(fā)。

適配大屏幕：

為了適配iphone 6plus、iphone 7plus單獨(dú)切一套比原有44*44px切圖大1.5倍的切圖，即66*66px大小的切圖。(UI設(shè)計(jì)的適配問題會(huì)在后邊單獨(dú)的文章中詳細(xì)講解）

3.圖片類切圖輸出

圖片類切圖主要是指啟動(dòng)頁、新手引導(dǎo)頁、默認(rèn)提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的大小尺寸以便于工程師開發(fā)使用。另外一般這些切圖的文件較大在切圖過程中需要控制切圖文件的大小。（后邊文章會(huì)詳細(xì)講解如何壓縮切圖大小的方法）

全屏切圖類

局部切圖類

空白頁提示案例圖

4.動(dòng)效元素切圖輸出

動(dòng)效元素切圖一般是指在app中加載動(dòng)效所需要的切圖元素，比如qq的下拉加載動(dòng)效就是由若干張切圖連續(xù)播放形成的動(dòng)畫效果。這些圖片按照序號(hào)排序播放我們頁把他們叫做序列切圖。序列切圖是在做UI設(shè)計(jì)的過程中必然會(huì)遇到的問題，這種切圖要求要保證動(dòng)效播放時(shí)的流暢自然，是需要設(shè)計(jì)師仔細(xì)斟酌的。

序列圖切圖

序列圖實(shí)現(xiàn)效果

5.可拉伸元素切圖輸出

可拉伸元素一般是指按鈕、輸入框等切圖過程中可以對(duì)切圖進(jìn)行瘦身壓縮的元素。這些元素通過瘦身壓縮可以極大地見效圖片的大小提升用戶在使用app中的加載速度。在ios中這種切圖方式叫做平鋪切圖，在安卓中這種切圖方式叫做點(diǎn)九切圖法。

橫向拉伸切圖

豎向拉伸切圖

6.無需切圖的部分

再設(shè)計(jì)切圖輸出中很多元素是不需要輸出的，直接使用系統(tǒng)原生的設(shè)計(jì)元素修改參數(shù)即可。作為設(shè)計(jì)師需要知道哪些元素是需要切圖，哪些元素是使用系統(tǒng)自帶的避免不必要的切圖。比如文字、卡片背景、線條和一些標(biāo)準(zhǔn)的集合圖形是不需要提供切圖的。例如搜索框只需要在標(biāo)注中表明尺寸大小、圓角大小、描邊粗細(xì)、色值即可，工程師會(huì)根據(jù)設(shè)計(jì)效果通過代碼實(shí)現(xiàn)這種效果。

最新評(píng)論