UI 界面設(shè)計課程標準-美術(shù)設(shè)計與制作專業(yè)

UI界面設(shè)計課程標準【課程名稱】UI【適用專業(yè)】中等職業(yè)學(xué)校美術(shù)設(shè)計與制作專業(yè)。前言課程性質(zhì)本課程是中等職業(yè)學(xué)校美術(shù)設(shè)計與制作專業(yè)多媒體設(shè)計與制作方向的一門專業(yè)技能課UIUI具備UI界面設(shè)計的基本技能。本課程是美術(shù)繪畫基礎(chǔ)、美術(shù)設(shè)計基礎(chǔ)、計算機輔助設(shè)計等課程的后續(xù)課程，為學(xué)生學(xué)習(xí)其他后續(xù)課程奠定扎實基礎(chǔ)。設(shè)計思路本課程的總體設(shè)計思路是遵循任務(wù)引領(lǐng)、做學(xué)一體的原則，參照ACAA高級交互設(shè)計師職業(yè)標準的相關(guān)內(nèi)容，根據(jù)美術(shù)設(shè)計與制作專業(yè)的工作任務(wù)和職業(yè)能力分析，以UI界面設(shè)計的相關(guān)工作任務(wù)要求為依據(jù)設(shè)置。課程內(nèi)容的選取圍繞UI界面設(shè)計應(yīng)具備的職業(yè)能力要求，同時充分考慮本專業(yè)中職學(xué)生對本課程相關(guān)理論知識的需要，并融入ACAA高級交互設(shè)計師職業(yè)標準的相關(guān)考核內(nèi)容與要求。課程內(nèi)容的組織以UI界面設(shè)計的步驟流程和方法為主線，包括App圖標設(shè)計與制作、APP界面設(shè)計、網(wǎng)頁界面設(shè)計等3個學(xué)習(xí)任務(wù)。以任務(wù)為引領(lǐng)，通過任務(wù)整合相關(guān)知識、技能與態(tài)度。本課程建議教學(xué)課時數(shù)為144學(xué)時。課程目標UIUI和技能，達到ACAA力目標。職業(yè)素養(yǎng)目標：UI界面設(shè)計的過程中，嚴格遵守實訓(xùn)室設(shè)備的使用規(guī)定和設(shè)備操作規(guī)范，養(yǎng)成良好的職業(yè)習(xí)慣和嚴謹?shù)墓ぷ鲬B(tài)度。職業(yè)能力目標：能設(shè)計并制作APP能按需求合理設(shè)計APP能按需求合理設(shè)計網(wǎng)頁界面110能按規(guī)范標注或創(chuàng)建相關(guān)項目信息，并完成文檔設(shè)置能運用設(shè)計原則優(yōu)化和調(diào)整相應(yīng)結(jié)構(gòu)布局能辨識不同圖標的指代含義能根據(jù)目標關(guān)鍵詞選擇適合的形狀、文字、圖形組合完成簡單的圖標設(shè)計的圖標、按鈕文件能熟練運用位圖或矢量圖形軟件進行設(shè)計與制作繪制能根據(jù)企業(yè)網(wǎng)站特點設(shè)計制作網(wǎng)站效果圖能根據(jù)自主學(xué)習(xí)和研究性學(xué)習(xí)需要，運用信息化手段收集和處理信息課程內(nèi)容和要求學(xué)習(xí)任務(wù) 技能與學(xué)習(xí)要求 知識與學(xué)習(xí)要求APP說出圖標的概念及作用舉例說明APPAPPAPP歸納說明APP

參考學(xué)時1.APP圖標設(shè)計與制作

App計像素化圖標能按照主題需要設(shè)計擬物化圖標計扁平化圖標能用草圖的形式設(shè)計并繪制APP圖標App作像素化圖標能按照草圖設(shè)計制作擬物化圖標

APP的關(guān)聯(lián)歸納說明增加圖標可識別性的方法歸納說明提高APP24APP歸納說明像素化圖標的特征及作用歸納說明擬物化圖標的特征及作用歸納說明扁平化圖標的特征及作用App說出需要設(shè)計的APP說出選擇APP歸納說明用草圖的形式繪制APP點歸納說明高保真APP常見的APP舉例說明常用的手機屏幕尺寸歸納說明顯示分辨率的概念 22說出手機屏幕與分辨率的關(guān)系說出在圖形軟件中設(shè)置圖標尺寸的方法1112.APP面設(shè)計

作扁平化圖標1.App界面草圖設(shè)計能設(shè)計APP界面能設(shè)計APP欄能設(shè)計APP

iOSAndroid像素尺寸6.常用的圖標格式舉例說明常用圖標的格式JPEG、GIF、PNG7.像素化圖標的制作方法舉例說明制作像素化圖標常用的工具及用途說出像素網(wǎng)格在制作過程中起到的作用2D2.5D8.擬物化圖標的制作方法舉例說明制作擬物化圖標常用的工具及用途歸納說明塑造擬物化圖標材質(zhì)效果的方法歸納說明塑造擬物化圖標高光的方法歸納說明塑造擬物化圖標投影的方法歸納說明塑造擬物化圖標反光的方法歸納說明塑造擬物化圖標鏡面效果的方法用途舉例說明環(huán)境色在擬物化圖標制作中起到的作用9.扁平化圖標的制作方法用途影的方法歸納說明塑造扁平化圖標長陰影的方法化圖標立體感的方法APP說出手機APPUIUI說出不同設(shè)備對應(yīng)的分辨率22舉例說明常用的手機操作系統(tǒng)的特點說出不同的結(jié)構(gòu)化布局設(shè)計方式iOS和Android112欄 區(qū)別說明iOS和Android系統(tǒng)的狀態(tài)欄導(dǎo)航欄標題欄搜索欄工具欄的界面特色彩的情感特征了解色彩的情感與用戶體驗之間的關(guān)系舉例說明不同色系在APP的情感特征APP歸納說明扁平化風(fēng)格APP歸納說明寫實風(fēng)格APP歸納說明插畫風(fēng)格APP5.APP舉例說明歡迎界面中常見的類型以及常見的表現(xiàn)元素6.APP舉例說明導(dǎo)航欄中常見的元素7.APP舉例說明屏幕欄中包含的元素歸納說明屏幕欄中標題欄狀態(tài)欄和控制欄的特征與作用歡迎界面中文字及圖文搭配的要求舉例說明歡迎界面中文字的制作要點舉例說明歡迎界面中圖文搭配的要點App作軟件完成APP作軟件完成APP航欄的制作作軟件完成APP

常用工具的使用方法鍵列舉圖層樣式及其特點列舉常見濾鏡及其效果特點22說出明蒙版制作的方法說出參考線的設(shè)置方法說出對齊和分布的區(qū)別導(dǎo)航欄的制作要求舉例說明導(dǎo)航欄上圖標的制作要點舉例說明讓導(dǎo)航欄顯眼的方法屏幕欄的制作方法舉例說明屏幕欄中各個功能元素的布局要113計站首界面能綜合運用圖形圖像設(shè)計軟件設(shè)計制作網(wǎng)站首界面的布局圖頁的圖文排版網(wǎng)頁 2.網(wǎng)頁表單設(shè)計界面設(shè)計 能設(shè)計表單中簽、輸入框、按鈕的草圖作網(wǎng)頁表單網(wǎng)頁導(dǎo)航菜單設(shè)計的草圖能綜合運用圖形圖作導(dǎo)航菜單設(shè)計

點舉例說明制作立體效果屏幕欄的方法舉例說明制作金屬材質(zhì)效果屏幕欄的方法舉例說明制作扁平化效果屏幕欄的方法1.網(wǎng)站首界面的構(gòu)成元素列舉網(wǎng)站首界面的構(gòu)成元素2.網(wǎng)站首界面的設(shè)計要點舉例說明網(wǎng)站首界面的設(shè)計要點列舉網(wǎng)站的設(shè)計風(fēng)格列舉說明常見的網(wǎng)站配色方案203.網(wǎng)站界面的布局要點舉例說明網(wǎng)站界面的幾種布局模式4.網(wǎng)頁圖文編排的要點舉例說明網(wǎng)頁圖文排版的樣式及表現(xiàn)特征舉例說明網(wǎng)頁中圖片處理的表現(xiàn)形式舉例說明網(wǎng)頁中文字處理的標準網(wǎng)站表單的構(gòu)成元素列舉網(wǎng)站表單的構(gòu)成元素舉例說明網(wǎng)站表單中各元素的作用舉例說明標簽的表現(xiàn)形式舉例說明輸入框簽的表現(xiàn)形式10舉例說明輸入表單按鈕的表現(xiàn)形式網(wǎng)站表單的設(shè)計要點舉例說明網(wǎng)站表單的設(shè)計要點列舉網(wǎng)站表單的設(shè)計風(fēng)格列舉說明常見的表單配色方案網(wǎng)頁導(dǎo)航菜單的構(gòu)成元素列舉網(wǎng)頁導(dǎo)航菜單的構(gòu)成元素舉例說明網(wǎng)頁導(dǎo)航菜單的表現(xiàn)形式網(wǎng)頁導(dǎo)航菜單的設(shè)計要點 18舉例說明網(wǎng)頁導(dǎo)航菜單的設(shè)計要點列舉網(wǎng)頁導(dǎo)航菜單的設(shè)計風(fēng)格列舉說明常見的網(wǎng)頁導(dǎo)航菜單的配色方案超鏈接按鈕的設(shè)計要點6舉例說明超鏈接按鈕hoveractivelink、114接按鈕的草圖像設(shè)計軟件設(shè)計制作超鏈接按鈕

visited狀態(tài)下的狀態(tài)特征列舉超鏈接按鈕的樣式列舉說明常見的超鏈接按鈕的配色方案總課時 1444.教學(xué)活動設(shè)計參考教學(xué)活動名稱 教學(xué)活動設(shè)計教學(xué)活動一：圖標設(shè)計教學(xué)活動二：上海優(yōu)品網(wǎng)站效果圖制作

APP每組代表展示本組最佳作品，并配合PPT介紹選擇APP介紹圖標設(shè)計的創(chuàng)作思路。教師組織學(xué)生互評，組織票選最佳作品。有待改進的點，與學(xué)生一起歸納設(shè)計要點，并記錄于板書中。以及全球領(lǐng)先的情況，布置為“上海優(yōu)品”設(shè)計電子商務(wù)網(wǎng)站的任務(wù)。點和難點。析并得出適合自己的設(shè)計方案。學(xué)生分組嘗試：學(xué)生以4～5利用課后進行調(diào)研后，每人繪制1個電子商務(wù)網(wǎng)站效果圖的設(shè)計草圖，并最終選出一個，以規(guī)范的JPG教師綜合點評設(shè)計成果、設(shè)計過程合理性及團隊合作實施建議教材編寫建議以本課程標準為依據(jù)編寫教材。教材應(yīng)該充分體現(xiàn)以崗位為目標，以任務(wù)為引領(lǐng)的課程設(shè)計思路。教材編寫應(yīng)打破傳統(tǒng)的學(xué)科界線和教學(xué)方法，把基礎(chǔ)學(xué)科的訓(xùn)練項目分解到具體115前瞻性。爭取將本學(xué)科的新知識、新技術(shù)、新材料、新發(fā)展融入教材中。備適量的直觀圖片和視頻影像資料或者提供相應(yīng)的網(wǎng)絡(luò)鏈接。教學(xué)建議教學(xué)方法應(yīng)充分考慮課程演進中形式的多樣化（如案例教學(xué)、項目活動教學(xué)、臨摹教學(xué)等動學(xué)習(xí)的內(nèi)驅(qū)力，提升學(xué)生解決實際問題的能力與創(chuàng)新能力。定性的任務(wù)”情境中，真正實施“產(chǎn)——學(xué)——研——教”相結(jié)合的職業(yè)技能教學(xué)。切相關(guān)的設(shè)計任務(wù)。學(xué)習(xí)評價建議UI界面設(shè)計內(nèi)容進行實戰(zhàn)，作業(yè)以電腦繪制和手繪為形式，從中了解學(xué)生對UI界面設(shè)計知識掌握的10℅，60℅為考核成績，綜合以上進行評價，評價時應(yīng)側(cè)重考