《交互數(shù)字內(nèi)容設(shè)計》課件-第十章 交互界面設(shè)計輸出

第十章交互界面設(shè)計輸出APPUI設(shè)計師需要給出的APP切片資源有3套：1、標(biāo)注圖（以750為寬度尺寸為基準(zhǔn)標(biāo)注）2、2x切圖（以750為寬度尺寸為基準(zhǔn)切圖）3、3x切圖（以1242為寬度尺寸為基準(zhǔn)切圖）

1242*2208pxiphone6plus設(shè)計版尺寸10.1切圖設(shè)計切圖的原則能夠滿足工程師設(shè)計效果圖的高保真還原1.切圖資源尺寸必須為雙數(shù)10.1.1切圖基本規(guī)范2.圖標(biāo)切圖輸出應(yīng)根據(jù)標(biāo)準(zhǔn)尺寸輸出并且考慮到手機(jī)適配在切圖資源輸出中圖標(biāo)切圖輸出是至關(guān)重要的部分。因為在開發(fā)中由于各機(jī)型的屏幕分辨率不同，需要針對一些大屏機(jī)型進(jìn)行適配。為了適配大分辨率手機(jī)（例如iphone7plus）圖標(biāo)在切圖的時候需要輸出@2x和@3x的切圖，其中@2x的切圖可以滿足雙平臺大部分機(jī)型的適配要求，@3x是用來適配iphone手機(jī)的各種plus版本的手機(jī)，@3x是@2x尺寸的1.5倍，例如一個圖標(biāo)切圖@2x尺寸是44px，那么@3x尺寸是66px。Tinypng網(wǎng)址：

/3.為了提升APP使用速度，盡量降低圖片文件大小在切圖資源輸出中圖標(biāo)切圖輸出是很重要的部分，比如新手引導(dǎo)頁、啟動頁面、默認(rèn)圖、廣告圖等。圖片切圖一般情況下文件大小都是相對較大，不利于用戶在使用app過程中加載頁面。因此圖片切圖要盡量壓縮圖片文件的大小。4.可點擊部件應(yīng)當(dāng)注意其點擊區(qū)域不小于88px44px的點擊區(qū)域數(shù)值是在iphone3（320×480px）普通顯示屏下制定出來的，在手機(jī)分辨率大幅提升的現(xiàn)在，這個數(shù)據(jù)自然要與時俱進(jìn)。在iphone7（750*1334px）的Retina顯示屏下44px點擊區(qū)域就變?yōu)榱?8px。但無論是320*480px尺寸下的44px還是在750*1334px尺寸下的88px，換算成物理尺寸后大致是在7mm-9mm之間。5.可點擊部件要把相關(guān)狀態(tài)都切圖輸出，比如正常狀態(tài)、點擊狀態(tài)。在切圖過程中不僅要輸出正常狀態(tài)的切圖，更要注意不要遺漏其他狀態(tài)的切圖。這個也是設(shè)計師經(jīng)常會出現(xiàn)的失誤，比如在按鈕切圖的過程中可能會忽略點擊切圖的狀態(tài)。所以設(shè)計師在做設(shè)計圖是最好盡量把頁面中會出現(xiàn)的各種狀態(tài)展示出來，避免后期切圖的時候遺漏狀態(tài)。10.1.2.切圖輸出類型1.桌面圖標(biāo)切圖輸出app的桌面圖標(biāo)會被運(yùn)用在很多不同的地方展示，比如手機(jī)桌面、APPstore、手機(jī)的設(shè)置列表，所以app桌面圖標(biāo)需要很多個不同尺寸的切圖輸出。兩個平臺對相應(yīng)桌面圖標(biāo)設(shè)計輸出尺寸也不盡相同，在輸出的時候要把雙平臺的這些尺寸全部輸出切圖。桌面圖標(biāo)切圖只需要提供直角的圖標(biāo)切圖即可，手機(jī)系統(tǒng)會自動生成圓角效果。

2.圖片類切圖輸出圖片類切圖主要是指啟動頁、新手引導(dǎo)頁、默認(rèn)提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的大小尺寸以便于工程師開發(fā)使用。另外一般這些切圖的文件較大在切圖過程中需要控制切圖文件的大小。3.動效元素切圖輸出動效元素切圖一般是指在app中加載動效所需要的切圖元素，比如qq的下拉加載動效就是由若干張切圖連續(xù)播放形成的動畫效果。這些圖片按照序號排序播放我們頁把他們叫做序列切圖。序列切圖是在做UI設(shè)計的過程中必然會遇到的問題，這種切圖要求要保證動效播放時的流暢自然，是需要設(shè)計師仔細(xì)斟酌的。

橫向拉伸只需在可拉伸區(qū)域內(nèi)做黑色標(biāo)記即可，外圍投影標(biāo)記黑色線即可橫向豎向拉伸只需在可拉伸區(qū)域內(nèi)做黑色標(biāo)記即可，外圍投影標(biāo)記黑色線即可4.可拉伸元素切圖輸出可拉伸元素一般是指按鈕、輸入框等切圖過程中可以對切圖進(jìn)行瘦身壓縮的元素。這些元素通過瘦身壓縮可以極大地減小圖片的大小提升用戶在使用app中的加載速度。5.無需切圖的部分在設(shè)計切圖輸出中很多元素是不需要輸出的，直接使用系統(tǒng)原生的設(shè)計元素修改參數(shù)即可。作為設(shè)計師需要知道哪些元素是需要切圖，哪些元素是使用系統(tǒng)自帶的避免不必要的切圖。比如文字、卡片背景、線條和一些標(biāo)準(zhǔn)的集合圖形是不需要提供切圖的。例如搜索框只需要在標(biāo)注中表明尺寸大小、圓角大小、描邊粗細(xì)、色值即可，工程師會根據(jù)設(shè)計效果通過代碼實現(xiàn)這種效果。10.1.3UI界面切圖命名規(guī)范

關(guān)于UI界面的切圖命名的規(guī)范，關(guān)鍵是在于團(tuán)隊能夠有一個統(tǒng)一的規(guī)則。規(guī)范的命名方式可以提高開發(fā)人員的開發(fā)效率和整個開發(fā)團(tuán)隊的友好合作。

命名規(guī)則模塊_類別_功能_狀態(tài).png舉個栗子：nav_button_search_default.png釋義為：導(dǎo)航_按鈕_搜索_默認(rèn).png2.常用命名（1）常用界面（2）系統(tǒng)控件

（3）功能命名

（4）常見狀態(tài)

10.1.4

注意事項在切圖文件和切圖命名中，應(yīng)注意以下幾點：（1）不要出現(xiàn)大寫，字母必須為小寫；（2）不要有中文、特殊符號和空格；（3）同類切圖，尺寸大小應(yīng)保持一致；（4）App安裝包的大小與切圖內(nèi)容有關(guān)，切圖完后，要壓縮圖片的大小。（5）icon圖標(biāo)一定要用png格式.10.1.5切圖工具Cutterman10.2標(biāo)注App標(biāo)注可以讓工程師及時了解界面開發(fā)元素的尺寸大小，Android和iOS標(biāo)注的規(guī)范存在一定的差異性，特別要重點關(guān)注App設(shè)計稿的標(biāo)注單位。10.2.1iOS系統(tǒng)與Android系統(tǒng)界面標(biāo)注的區(qū)別1.iOS標(biāo)注（1）采用750*1334px設(shè)計稿進(jìn)行標(biāo)注；（2）距離和字號用pt/px為單位；2.Android標(biāo)注（1）采用720*1280px設(shè)計稿進(jìn)行標(biāo)注；（2）距離用dp，字號用sp為單位；10.2.2標(biāo)注規(guī)范1.文字標(biāo)注文字屬性，只需要標(biāo)注顏色、字號、間距、位置等最基本的要素2.圖標(biāo)標(biāo)注圖標(biāo)屬性，需要標(biāo)注圖標(biāo)大小、位置、間隔、邊距等最基本元素3.段落標(biāo)注段落屬性，需要標(biāo)注字體大小、字體顏色、行間距、字間距等。4.布局控件控件屬性，需要標(biāo)注控件寬高、背景色、透明度、描邊、圓角大小等

5.位置標(biāo)注元素屬性，需要標(biāo)注元素寬高、顏色、方位間距、側(cè)邊距以及與其他元素之間的相對距離等10.2.3注意事項（1）同類標(biāo)注屬性，標(biāo)注的方向、大小、字號應(yīng)保持一致；（2）圖標(biāo)標(biāo)注，有些圖標(biāo)需要加引導(dǎo)框，才能進(jìn)行標(biāo)注；（3）頁面中相同元素，無需重復(fù)標(biāo)注。10.2.4標(biāo)注工具PxCook（像素大廚）1．原則上圖片都使用png格式。2．動畫則使用多張png格式圖片，使用程序進(jìn)行輪換顯示。圖片文件名規(guī)范：文件名_x.png,其中x代表序號。3．對于需要進(jìn)行適配的圖片（要進(jìn)行拉伸的）。提供一張最小尺寸的圖片，由開發(fā)人員制作成.9.png格式的。4．對于同一個區(qū)域在不同狀態(tài)下有不同顯示的情況下，需要提供不