授課教師：XXX項(xiàng)目六

標(biāo)注與切圖授課班級(jí)：XXXUtwisienimadminimveniam,quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquipexeacommodoconsequat.Loremipsumdolorsitamet,consectetueradipiscingCONTENTSOrderNow01課程目標(biāo)及計(jì)劃Utwisienimadminimveniam,quisnostrud02頁(yè)面標(biāo)注Utwisienimadminimveniam,quisnostrud03頁(yè)面切圖Utwisienimadminimveniam,quisnostrud04作業(yè)評(píng)析與排版Utwisienimadminimveniam,quisnostrudUtwisienimadminimveniam,quisnostrudexercitationullamcorpernibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.PARTONE課程目標(biāo)及計(jì)劃一、學(xué)習(xí)目標(biāo)及計(jì)劃本章介紹：清晰有效的設(shè)計(jì)方案不僅是UI設(shè)計(jì)師重要的輸出物之一，更加直接影響到工程師對(duì)設(shè)計(jì)效果的還原度。本章對(duì)UI頁(yè)面的標(biāo)注、UI頁(yè)面的切圖以及UI頁(yè)面的命名等基礎(chǔ)知識(shí)及相關(guān)規(guī)則進(jìn)行系統(tǒng)講解與演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)UI設(shè)計(jì)輸出有一個(gè)基本的認(rèn)識(shí)，并快速掌握相關(guān)UI的輸出。Utwisienimadminimveniam,quisnostrudexercitationullamcorpernibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.PARTTWO頁(yè)面標(biāo)注標(biāo)注原因標(biāo)注內(nèi)容標(biāo)注規(guī)則標(biāo)注神器課堂案例-標(biāo)注旅游類App登錄頁(yè)一、UI頁(yè)面標(biāo)注設(shè)計(jì)師進(jìn)行UI頁(yè)面標(biāo)注，具有還原設(shè)計(jì)、協(xié)助開(kāi)發(fā)的作用。1.標(biāo)注原因頁(yè)面中的標(biāo)注內(nèi)容通常包括文字、按鈕、圖標(biāo)、圖片、間距以及分割線等。2.標(biāo)注內(nèi)容1.屬性進(jìn)行UI頁(yè)面中的內(nèi)容標(biāo)注時(shí)，需要標(biāo)注出尺寸、顏色、透明度等等屬性。2.位置進(jìn)行UI頁(yè)面中的內(nèi)容標(biāo)注時(shí)，需要注意將位置標(biāo)注清楚。位置需要標(biāo)注出相對(duì)位置和絕對(duì)位置。相對(duì)位置指的是元素與元素之間的距離，而絕對(duì)位置指的是元素與頁(yè)面之間的距離。3.標(biāo)注規(guī)則1.PxCookPxCook，又名像素大廚，是一款可以進(jìn)行自動(dòng)標(biāo)注并生成切圖的軟件。自2.0.0版本開(kāi)始，該軟件便可以支持PSD文件的文字，顏色，距離自動(dòng)智能識(shí)別。4.標(biāo)注神器2.藍(lán)湖藍(lán)湖是一款產(chǎn)品設(shè)計(jì)協(xié)作平臺(tái)，它可以支持Sketch、Photoshop、AdobeXD文件導(dǎo)入生成標(biāo)注，并支持Axure

文件生成在線需求文檔，能夠?qū)a(chǎn)品、設(shè)計(jì)、研發(fā)工作流程無(wú)縫銜接。4.標(biāo)注神器PxCook軟件標(biāo)注頁(yè)面。效果圖5.課堂案例-標(biāo)注UI設(shè)App引導(dǎo)頁(yè)“UI社”APP項(xiàng)目“首頁(yè)”標(biāo)注“首頁(yè)”中部圖標(biāo)的標(biāo)注5.課堂案例-標(biāo)注UI設(shè)App首頁(yè)Utwisienimadminimveniam,quisnostrudexercitationullamcorpernibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.PARTTHREE頁(yè)面切圖切圖目的切圖類型切圖規(guī)則切圖方法大小優(yōu)化課堂案例-制作旅游類App登錄頁(yè)切圖一、UI頁(yè)面切圖減小文件包的容量，提升產(chǎn)品運(yùn)行效率。產(chǎn)品適應(yīng)多種屏幕分辨率，提高組件復(fù)用性。組件和尺寸規(guī)范標(biāo)準(zhǔn)的統(tǒng)一化。1.切圖目的（1）圖標(biāo)類型應(yīng)用圖標(biāo)：只需要提供直角的圖標(biāo)切圖，系統(tǒng)會(huì)自動(dòng)生成圓角效果。微信裁剪圖標(biāo)微信上線圖標(biāo)2.切圖類型功能圖標(biāo):功能圖標(biāo)切圖需要適配不同的屏幕從而提供不同尺寸的切圖。適用于@2x的48px×48px功能圖標(biāo)到@3x應(yīng)放大1.5倍為72px×72px2.切圖類型(2)圖片類型圖片類型切圖是指啟動(dòng)頁(yè)、新手引導(dǎo)頁(yè)、默認(rèn)提示、Banner等需要完整切圖的圖片。全屏切圖局部切圖2.切圖類型(3)動(dòng)效元素動(dòng)效元素切圖是指在App中加載動(dòng)效所需要的切圖元素。開(kāi)眼App2.切圖類型(4)彈性控件彈性控件是指按鈕、輸入框等切圖過(guò)程中可以對(duì)其進(jìn)行瘦身壓縮的元素。彈性控件的壓縮切圖示意圖2.切圖類型（1）圖標(biāo)輸出多個(gè)平臺(tái)尺寸在開(kāi)發(fā)中由于各機(jī)型的屏幕分辨率不同，需要針對(duì)不同機(jī)型進(jìn)行適配。因此圖標(biāo)在切圖的時(shí)候需要輸出@2x和@3x的切圖。例如一個(gè)圖標(biāo)切圖@2x尺寸是48px，那么@3x尺寸是72px。圖標(biāo)輸出多個(gè)平臺(tái)尺寸示意圖3.切圖規(guī)則（2）切圖資源尺寸須為偶數(shù)單數(shù)切圖會(huì)導(dǎo)致切圖元素邊緣模糊，造成開(kāi)發(fā)出來(lái)的APP界面效果與原設(shè)計(jì)效果差距甚遠(yuǎn)。偶數(shù)和單數(shù)切圖示意圖3.切圖規(guī)則（3）點(diǎn)擊區(qū)域不能小于44ptiOS規(guī)定點(diǎn)擊區(qū)域?yàn)?4pt，在@2x中就是88px。點(diǎn)擊區(qū)域尺寸示意圖3.切圖規(guī)則（4）按鈕需要輸出相關(guān)狀態(tài)在切圖過(guò)程中，針對(duì)按鈕不僅要輸出默認(rèn)狀態(tài)的切圖，更要輸出按鈕的其他狀態(tài)，比如點(diǎn)擊狀態(tài)以及禁用狀態(tài)狀態(tài)。按鈕狀態(tài)3.切圖規(guī)則·方案一：軟件自帶切圖（PS、AI、Sketch、figma、mastergo）·方案二：使用切圖工具（藍(lán)湖、draw9patch.bat）·方案三：使用插件工具（cutterman、SketchMeasure）4.切圖方法（1）點(diǎn)九切圖/平鋪切圖彈性控件通過(guò)壓縮，可以極大地減小圖片的大小提升用戶在使用app中的加載速度。在iOS中這種切圖方式叫做平鋪切圖，在Android中這種切圖方式叫做點(diǎn)九切圖法。5.大小優(yōu)化圖7-26橫向拉伸示意圖

圖7-27縱向拉伸示意圖

圖7-28文字顯示區(qū)域示意圖制作“點(diǎn)9”切片圖是件非常麻煩的事情，此處向用戶推薦一個(gè)自動(dòng)生成“點(diǎn)9”切片的網(wǎng)站。http://romannurik.github.io/AndroidAssetStudio/nine-patches.html（2）TinyPNG運(yùn)用“TinyPng”的智能png和jpg在線壓縮工具，將較大的圖片切圖可以在不影響圖片質(zhì)量的情況下壓縮。/5.大小優(yōu)化效果圖6.課堂案例-制作旅游類App登錄頁(yè)切圖Utwisienimadminimveniam,quisnostrudexercitationullamcorpernibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.PARTFOUR頁(yè)面命名命名原因命名規(guī)則常用名稱課堂案例-命名旅游類App登錄頁(yè)切圖一、UI頁(yè)面命名從自身層面，制定圖標(biāo)命名規(guī)范方便整理、便于修改、體現(xiàn)專業(yè)。從團(tuán)隊(duì)層面，制定圖標(biāo)命名規(guī)范助力任務(wù)交接。從開(kāi)發(fā)層面，制定圖標(biāo)命名規(guī)范能夠極大節(jié)省程序開(kāi)發(fā)的時(shí)間成本。1.命名原因UI頁(yè)面中內(nèi)容的命名規(guī)則需要注意組成、符號(hào)以及格式三個(gè)方面。命名的組成，需要使用小寫(xiě)英文字母，不建議使用中文。命名符號(hào)，需要使用下劃線“_”來(lái)進(jìn)行單詞之間的連結(jié)。命名格式需要遵守“組件_類別_名稱_狀態(tài)@倍數(shù)”的格式進(jìn)行命名。格式2.命名規(guī)則UI頁(yè)面中內(nèi)容的命名全部由英文的小寫(xiě)字母組成，在這里我們將常用命名進(jìn)行了整理，幫助大家可以更好的進(jìn)行圖標(biāo)命名。3.常用名稱login_nav_icon_search@2x按UI命名規(guī)范命名的效果圖使用UI工具的標(biāo)注和切圖頁(yè)面，按照UI頁(yè)面命名規(guī)范對(duì)切圖效果進(jìn)行命名。效果圖4.課堂練習(xí)-標(biāo)注電商類App注冊(cè)登錄頁(yè)并切圖命名使用軟件標(biāo)注頁(yè)面，使用XD進(jìn)行切圖，按照UI頁(yè)面命名規(guī)范對(duì)切圖效果進(jìn)行命名。4.課堂練習(xí)-標(biāo)注UI設(shè)APP登錄頁(yè)并命名、切圖1.標(biāo)注及切圖登錄頁(yè)（UI設(shè)或其他登錄頁(yè)）2.新建兩個(gè)切圖文件夾，2倍率和3倍率，如圖：3.按規(guī)則命名登錄頁(yè)中圖標(biāo)、按鈕，并切圖導(dǎo)出。期末考核——過(guò)程性考核（1）使用AdobeXD軟件進(jìn)行界面的視覺(jué)設(shè)計(jì)、切圖、標(biāo)注（標(biāo)注需插件pxcook），界面尺寸可選擇iphone12即可，切圖導(dǎo)出2倍率，顏色模式RGB。（2）圖標(biāo)、圖片等素材可自行上網(wǎng)檢索下載免費(fèi)圖片，交互稿細(xì)節(jié)及文字表述可自行優(yōu)化更改。素材網(wǎng)站如：iconfont（圖標(biāo)），pexels（圖片）。（3）16周（12月17日）第二節(jié)課后完成測(cè)試，并提交至優(yōu)慕課。Utwisienimadminimv