第五章8-使用Ps進行App界面設(shè)計的輔助工具介紹-備課筆記

編號28編號28-01學(xué)習(xí)任務(wù)八、App界面設(shè)計的輔助工具介紹一、課程說明與要求1.課程說明本次課主要講解App界面設(shè)計的輔助工具介紹，包括切圖插件、尺寸標注插件及圖片優(yōu)化等三方面的內(nèi)容，當(dāng)界面設(shè)計定稿之后，UI設(shè)計師需要對設(shè)計稿進行切片并標注，以文件夾的形式提交到原型設(shè)計師受眾提供給開發(fā)工程師或原型設(shè)計師，便于和開發(fā)人員進行交接，在實際工作中，不清楚該怎么切圖和標注的時候多和開發(fā)人員溝通交流，良好的溝通才是解決問題的方法。在項目管理中，最重要的一個環(huán)節(jié)就是溝通，通過溝通不斷的調(diào)動相關(guān)人員的創(chuàng)造性及主動性，發(fā)揮溝通的協(xié)調(diào)功能，也是構(gòu)建和諧團隊的重要手段，這樣可以提高制作人員的工作效率，更好的促進團隊的持續(xù)、健康、平穩(wěn)發(fā)展；……………【思政融入（溝通協(xié)調(diào)重要性，提升團隊凝聚力）】2.工具材料準備說明本課的作業(yè)作品實踐需要同學(xué)們提前準備軟件和素材文件，教師將以下界面設(shè)計輔助工具介紹的需準備軟件素材發(fā)到微信群中。工具材料備注cutterman每臺電腦安裝pxcook每臺電腦安裝切圖及標注素材案例每人下載二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對象為藝術(shù)專業(yè)學(xué)生，學(xué)生沒有接觸過關(guān)于標注等插件的使用方法，以及在交互設(shè)計方面應(yīng)用的知識，普遍認知不強，為此我們強調(diào)進行引導(dǎo)教學(xué)，融入市場多元化理念。另一方面，學(xué)生對新興的事物接受比較快，對所選擇的專業(yè)感興趣，獲取知識的主動性較強。2.課程導(dǎo)入我們講設(shè)計稿的切圖和尺寸標注，那么ios、Android平臺如何切圖，切圖需要切幾套，哪些需要切圖編號28-0編號28-02三、理論知識講解（一）PS-一鍵切圖………【重點】1.文件整理命名項目名稱+設(shè)計師名字+日期文件夾包括：切圖，標注圖，效果圖2.切圖插件（Cutterman）打開PS>“窗口”菜單下>“擴展功能”里的“Cutterman切圖神器”，打開面板；這里主要講針對App移動端的一些導(dǎo)出功能。插件特點：●支持iOS平臺●支持Android平臺●支持多個圖層合并導(dǎo)出，也可以逐一導(dǎo)出●按固定尺寸導(dǎo)出●利用圖層蒙版進行切圖導(dǎo)出編號28編號28-033.頁面切圖（1）以750x1334px作為設(shè)計稿標準尺寸：●便于向上和向下適配●設(shè)計Android版本只需做小的設(shè)計調(diào)整，提升設(shè)計效率編號28編號28-04●從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小，最方便適配?！翊笃聊粫r代依然以小尺寸作為設(shè)計尺寸，會限制設(shè)計師的設(shè)計視角。

●設(shè)計安卓版本時只需做最小的設(shè)計調(diào)整，提升設(shè)計效率。（3）哪些需要切圖只要是無法用代碼來實現(xiàn)和表達出來的，就需要切圖（比如圖標、圖片）（4）切圖需要幾套●ios版本在實際工作中，iOS只需要切2套圖就可以，分別為：@2x和@3x●Android版本一般情況下，我們提供2套切圖資源就可以滿足原型設(shè)計師或者開發(fā)工程師的適配，分別是XHDPI、XXHDPI2套切圖資源。編號28編號28-05（5）切圖的命名在圖片的命名中盡量不要有中文、特殊符號以及空格，使用下劃線進行連接。在命名中很多可以是縮寫，開發(fā)人員一般也是按照這樣來分類。4.頁面切圖注意事項（1）同一模塊內(nèi)，切圖大小應(yīng)保持一致（2）切圖輸出大小必須保持為偶數(shù)（3）為了減小包的大小，切圖盡量壓縮后再提交給開發(fā)人員編號28編號28-06（二）尺寸標注插件………【難點】當(dāng)界面設(shè)計定稿之后，我們需要對界面進行標注給原型設(shè)計師或者開發(fā)工程師，便于原型設(shè)計和開發(fā)工程師在還原界面的時候進行參考。1、常用插件（1）Markman是一款基于AdobeAiR平臺的一款標注工貝，需要先安裝Adobeair，支持Windows和mac平臺。（2）AssistorPS獨立于Photoshop，可以提高切圖標記的效率及速度，參考線輔助，圓角大小，按固定間隔復(fù)制圖層功能還是很好用的。（3）Pxcook它是基于AdobeAiR的跨平臺桌面應(yīng)用程序，是一款切圖標注設(shè)計工具軟件。優(yōu)點是將標注、切圖這兩項集成在一個軟件內(nèi)完成，支持Windows和Mac雙平臺。編號28-編號28-07（1）界面介紹軟件的標注分為設(shè)計模式和開發(fā)模式：●設(shè)計模式，主要是設(shè)計師來進行智能標注和手動標注，我們建議只標注出交互設(shè)計師需要特殊注意的部分就可以了，這樣可以大大減少我們的工作量，同時也不會影響設(shè)計圖的整體性，便于觀看?！耖_發(fā)模式，主要用于交互設(shè)計師通過點選的方式直接查看設(shè)計稿中各個元素的尺寸，間距，以及樣式等等。同時，PxCook也為開發(fā)設(shè)計師自動生成了對應(yīng)平臺的代碼，可以大大加快工程師的開發(fā)效率。（2）標注功能尺寸標注文本樣式標注區(qū)域標注元素內(nèi)部間距標注矢量圖層樣式編號28編號28-08（3）標注數(shù)值的修改所有尺寸數(shù)值都可手動更改，自由度非常高。（4）單位換算Px即Web或PC標注單位。Dp即作為Android的標準單位。Pt作為iOS的標準單位。3、頁面標注需要標注的內(nèi)容：（1）文字：字體大小、字體顏色（2）圖標：大小、區(qū)域（3）布局控件屬性：控件寬高、填充顏色、圓角大?。?）間距：控件之間的距離、左右邊距（5）段落文字：字體大小、字體顏色、行距注：標注顏色格式是使用16進制，還是RGB，需要和開發(fā)工程師商量，按照開發(fā)習(xí)慣，一般采用16編號28編號28-09【互動參與討論，頁面標注的內(nèi)容，教師做總結(jié)】（三）圖片壓縮優(yōu)化TinyPNG下載APP安裝時，除了網(wǎng)絡(luò)環(huán)境，影響加載速率和用戶體驗的最關(guān)鍵因素就是文件大小了。減小文件大小的方法有很多，大多數(shù)的壓縮方式，圖片會變得模糊不清，目前提供壓縮圖片壓縮技術(shù)的平臺很多，TinyPNG是目前壓縮速度和壓率最好的。使用時只需要打開網(wǎng)站，把要壓的圖片上傳，等待壓縮完成后下載就可以。編號28編號28-10（一）布置訓(xùn)練任務(wù)任務(wù)1：從提供的案例作品進行不同平臺的切圖任務(wù)2：熟悉切圖的命名方法及常用控件的命名（二）實戰(zhàn)項目案例……………【重點】從提供的案例中進行標注操作，加深對標注方法的理解教師重點指導(dǎo)：pxcook軟件的基本操作；標注的要點及注意事項?！緦嵱?xùn)指導(dǎo)：學(xué)生初次接觸標注插件及App切圖的方法，并進行設(shè)計制作實踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生分析軟件操作時的要點，指導(dǎo)學(xué)生完成設(shè)計稿首頁的尺寸標注】五、課堂總結(jié)今天，我們主要學(xué)習(xí)并了解使用PS插件進行切圖以及尺寸標注的方法，也結(jié)合相關(guān)理論知識做了一些練習(xí)，想必同學(xué)們通過練習(xí)對不同平臺的切圖和命名方法有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對設(shè)計完成的作品進行切圖和標注方面的操作練習(xí)，這樣有助于你們對知識點的更深入的理解，便于和原型設(shè)計開發(fā)人員進