UI界面設計與制作電子教案

教案編號:6課題:第6章UI設計輸出課時:8課時授課類型:講授+實訓項目目標:●掌握App頁面標注●掌握App頁面切圖●掌握App頁面命名項目重點:●App頁面標注●App頁面切圖●App頁面命名項目難點:App頁面標注、切圖、命名規(guī)則項目技能點：App頁面標注、切圖、命名項目教學技巧：1.知識講解2.案例實訓項目過程：（一）課前準備1.授課前準備準備好教學用具和教學設備2.板書課題：第6章UI設計輸出項目目標:●掌握App頁面標注●掌握App頁面切圖●掌握App頁面命名3.課程引入通過課堂案例效果展示App頁面的標注、切圖、命名標注切圖命名（二）課程內(nèi)容UI頁面標注作為UI設計輸出中的重要環(huán)節(jié)，具有還原設計、協(xié)助開發(fā)的作用。下面分別從標注原因、標注內(nèi)容、標注規(guī)則以及標注神器這四個方面進行UI頁面標注的講解。6.1.1標注原因標注可以更好的讓開發(fā)還原設計。6.1.2標注內(nèi)容標注內(nèi)容通常為文字、按鈕、圖標、圖片6間距以及分割線，如圖所示。標注內(nèi)容示意圖1.文字的標注文字通常標注字體、字號、字重、顏色以及透明度，如圖所示。文字標注示意圖2.圖標的標注圖標標注的尺寸，應包含空白點擊像素，即實際切圖尺寸，如圖所示。圖標標注示意圖3.按鈕的標注按鈕中重復出現(xiàn)的元素，只需標注其中之一，如圖所示。按鈕標注示意圖4.間距的標注間距通常以8倍數(shù)和4倍數(shù)為基準進行設計，如圖所示。間距標注示意圖5.投影的標注投影的標注通常為顏色、透明度、位置以及效果，如圖所示。投影標注示意圖6.1.3標注規(guī)則1.屬性尺寸、顏色、透明度等2.位置相對位置（元素之間）絕對位置（頁面）6.1.4標注神器1.PxCook2.SketchMeasure3.藍湖6.1.5課堂案例——標注旅游類App登錄頁【案例設計要求】1.運用PxCook標注旅游類App登錄頁，效果如圖所示。2.符合頁面標注規(guī)則?！景咐龑W習目標】學習使用軟件PxCook標注旅游類App登錄頁。效果圖【案例知識要點】學習下載并使用PxCook軟件標注頁面。1.軟件安裝（1）使用瀏覽器打開PxCook官網(wǎng)，單擊頁面中的“立即下載”按鈕，如圖所示。在彈出的對話框中設置下載路徑，如圖所示，單擊“下載”按鈕，下載應用程序，效果如圖所示。（2）雙擊應用程序，彈出對話框，如圖所示，在對話框中單擊“運行”按鈕。彈出對話框，如圖所示，在對話框中單擊“下一步”按鈕。彈出對話框，如圖所示，在對話框中勾選“我同意此協(xié)議”選項，單擊“下一步”按鈕。彈出對話框，如圖所示，在對話框中勾選“創(chuàng)建桌面快捷方式”選項，單擊“下一步”按鈕。（3）彈出對話框，如圖所示，在對話框中單擊“安裝”按鈕，安裝應用程序。安裝完成后，如圖所示，單擊“完成”按鈕。2.圖標標注（1）啟動Pxcook軟件，如圖所示。選擇“項目>新建項目”命令，彈出“創(chuàng)建項目”對話框，設置如圖所示，單擊“創(chuàng)建本地項目按鈕”，新建項目。（2）選擇云盤中的“Ch05>制作旅游類App>制作旅游類App登錄頁>效果>5.6.2-制作旅游類App登錄頁”文件，將其拖曳到Pxcook項目圖像窗口中，如圖所示，效果如圖所示。雙擊畫板，效果如圖所示。（3）放大視圖，選擇“區(qū)域標注”工具，在需要標注的圖標上繪制標注區(qū)域，如圖所示。使用相同的方法標注其他圖標，如圖所示。3.文字標注（1）選中需要標注的文字，如圖所示。在屬性欄中進行設置，如圖所示。單擊“智能標注”工具下拉列表中的“生成文本樣式標注”工具，標注文字，如圖所示。使用相同的方法標注其他文字，如圖所示。4.按鈕標注（1）單擊“顏色標注”工具，將鼠標指針放置在按鈕中需要標注顏色的位置，如圖所示，單擊鼠標，標注按鈕顏色。（2）單擊“距離標注”工具，在需要測量的位置單擊鼠標，如圖所示，拖曳鼠標指針到需要測量的位置，如圖所示，單擊鼠標，生成按鈕高度的距離標注。使用相同的方法，標注按鈕寬度的距離，如圖所示。5.間距標注（1）單擊“距離標注”工具，在需要測量的位置單擊鼠標，如圖所示，拖曳鼠標指針到需要測量的位置，如圖所示，單擊鼠標，生成圖標到文字之間的距離標注。（2）使用相同的方法，標注其他距離，效果如圖所示。旅游類App登錄頁標注完成。UI頁面命名作為UI設計輸出中的重要環(huán)節(jié)，具有減小容量、適配頁面的作用。下面分別從切圖目的、切圖類型、切圖規(guī)則、切圖方法以及大小優(yōu)化這五個方面進行UI頁面命名的講解。6.2.1切圖目的減小文件包容量，增加運行效率。適應多種屏幕分辨率。提高組件復用性。組件和尺寸規(guī)范標準統(tǒng)一化。6.2.2切圖類型1.圖標類型應用圖標應用圖標切圖只需要提供直角的圖標切圖，系統(tǒng)會自動生成圓角效果，如圖所示。微信裁剪圖標微信上線圖標功能圖標功能圖標切圖需要適配不同的屏幕從而提供不同尺寸的切圖，如圖所示。適用于@2x的48px×48px功能圖標到@3x應放大1.5倍為72px×72px2.圖片類型圖片類型切圖是指啟動頁、新手引導頁、默認提示、Banner等需要完整切圖的圖片。全屏切圖全屏切圖適用于背景豐富的引導頁、閃屏頁及活動頁，如圖所示?！半p11”、國慶、“雙12”的閃屏頁局部切圖局部切圖適用于背景為純色的引導頁、閃屏頁及空頁面等，如圖所示。1號店、閑魚、螞蟻財富的閃屏頁3.動效元素動效元素切圖是指在App中加載動效所需要的切圖元素，如圖所示。開眼App4.彈性控件彈性控件是指按鈕、輸入框等切圖過程中可以對其進行瘦身壓縮的元素，如圖所示。彈性控件的壓縮切圖示意圖6.2.3切圖規(guī)則1.圖標輸出多個平臺尺寸在開發(fā)中由于各機型的屏幕分辨率不同，需要針對不同機型進行適配。因此圖標在切圖的時候需要輸出@2x和@3x的切圖。例如一個圖標切圖@2x尺寸是48px，那么@3x尺寸是72px，如圖所示。圖標輸出多個平臺尺寸示意圖2.切圖資源尺寸須為偶數(shù)單數(shù)切圖會導致切圖元素邊緣模糊，造成開發(fā)出來的APP界面效果與原設計效果差距甚遠，如圖所示。單數(shù)和偶數(shù)切圖示意圖3.點擊區(qū)域不能小于44ptiOS規(guī)定點擊區(qū)域為44pt，在@2x中就是88px。4.按鈕需要輸出相關狀態(tài)在切圖過程中，針對按鈕不僅要輸出默認狀態(tài)的切圖，更要輸出按鈕的其他狀態(tài)，比如點擊狀態(tài)以及禁用狀態(tài)狀態(tài)，如圖所示。按鈕狀態(tài)6.2.4切圖方法方案一：軟件自帶切圖（PS、AI、Sketch）方案二：使用切圖工具（藍湖、draw9patch.bat）方案三：使用插件工具（cutterman、SketchMeasure）6.2.5大小優(yōu)化1.點九切圖/平鋪切圖彈性控件通過壓縮，可以極大地見效圖片的大小提升用戶在使用App中的加載速度。在iOS中這種切圖方式叫做平鋪切圖，在Android中這種切圖方式叫做點九切圖法，如圖所示。切圖優(yōu)化制作點九的軟件是Draw9patch，該軟件不僅可以制作點九圖還可以預覽切圖后的開發(fā)，如圖所示。設計師也可以在PS中用鉛筆工具繪制點就圖。Draw9patch2.TinyPNG運用TinyPng的智能png和jpg在線壓縮工具，將較大的圖片切圖可以在不影響圖片質(zhì)量的情況下壓縮，如圖所示。6.2.6課堂案例——制作旅游類App登錄頁切圖【案例設計要求】1.在Photoshop中安裝插件Cutterman，運用Cutterman為旅游類App登錄頁切圖，效果如圖所示。2.符合切圖規(guī)則?！景咐龑W習目標】學習安裝插件Cutterman的方法，并進行切圖。效果圖【案例知識要點】學習下載并使用Cutterman插件。（1）使用瀏覽器打開Cutterman官網(wǎng)的下載頁面，單擊頁面中的“下載”按鈕，如圖所示。在彈出的對話框中設置下載路徑，如圖所示，單擊“下載”按鈕，下載插件并解壓壓縮包，效果如圖所示。（2）雙擊應用程序，彈出對話框，如圖所示，在對話框中單擊“安裝”按鈕，即可安裝插件，如圖所示。（3）啟動Potoshop軟件，按Ctrl+O組合鍵，打開打開云盤中的“Ch05>制作旅游類App>制作旅游類App登錄頁>效果>5.6.2-制作旅游類App登錄頁”文件，如圖所示。（4）選擇“窗口>擴展功能>Cutterman-切圖神器”命令，彈出“屬性”面板，在面板中設置輸出文件的路徑為“Ch06>制作旅游類App注冊登錄頁切圖”，其他選項的設置如圖所示。（5）在“圖層”控制面板中展開“導航欄”圖層組，選中“返回”圖層，按住Shift鍵的同時，單擊“關閉”圖層，同時選取，如圖所示。在“Cutterman-切圖神器”控制面板中，設置“固定尺寸”選項為48像素×48像素，如圖所示。單擊“導出選中圖層”按鈕，輸出切圖文件，效果如圖所示。（6）展開“密碼”圖層組，單擊“顯示”圖層左側(cè)的空白圖標，顯示圖層，按住Shift鍵的同時，選中需要的圖層，如圖所示。展開“選擇控件”圖層組，單擊“未填充”圖層組左側(cè)的空白圖標，顯示圖層組，按住Shift鍵的同時，選中需要的圖層，如圖所示。分別單擊“導出選中圖層”按鈕，輸出切圖文件，效果如圖所示。（7）在“Cutterman-切圖神器”控制面板中，取消設置“固定尺寸”選項，如圖所示。展開“登錄按鈕”圖層組，單擊“登錄（正常狀態(tài)）”圖層左側(cè)的空白圖標，顯示圖層組，按住Shift鍵的同時，選中需要的圖層組，如圖所示。展開“其他登錄方式”圖層組，按住Shift鍵的同時，選中需要的圖層，如圖所示，分別單擊“導出選中圖層”按鈕，輸出切圖文件，效果如圖所示。旅游類App登錄頁切圖制作完成。UI頁面命名作為UI設計輸出中的重要環(huán)節(jié)，具有便于整理、加強效率的作用。下面分別從命名原因、命名規(guī)則以及常用名稱這三個方面進行UI頁面命名的講解。6.3.1命名原因自身層面：方便整理、便于修改、體現(xiàn)專業(yè)團隊層面：助于任務交接開發(fā)層面：極大節(jié)省程序開發(fā)的時間成本6.3.2命名規(guī)則使用小寫英文字母，不建議中文符號使用下劃線“_”遵守格式：組件_類別_名稱_狀態(tài)@倍數(shù)6.3.3常用名稱常用名稱如圖所示。常用名稱6.3.4課堂案例——命名旅游類App登錄頁切圖1.對旅游類App注冊登錄頁的切圖進行命名,效果如圖所示。2.符合UI命名規(guī)則?！景咐O計要求】選擇一個切圖進行命名，效果如圖所示?！景咐龑W習目標】學習針對切圖效果進行命名。效果圖【案例知識要點】按照UI頁面命名規(guī)范對切圖效果進行命名。（1）UI頁面命名應遵守格式為：組件_類別_名稱_狀態(tài)@倍數(shù)。下面以圖標“返回”的二倍狀態(tài)為例。（2）其組件為導航欄，即nav；類別為圖標，即icon；名稱為返回，即return；狀態(tài)為默認，即default；倍數(shù)為2，即@2x。因此，圖標命名為nav_icon_return_default@2x，效果如圖所示。使用相同的方法命名其他圖標，效果如圖所示。圖6-圖6-【案例設計要求】1.運用PxCook為電商類App注冊登錄頁標注進行標注,如圖所示。2.在Photoshop中安裝插件Cutterman，為電商類App注冊登錄頁進行切圖。3.為電商類App注冊登錄頁切圖進行命名?！景咐龑W習目標】學習針對頁面效果進行標注、切圖和命名。效果圖【案例知識