1、交互界面設(shè)計(jì)課程標(biāo)準(zhǔn)【課程名稱】交互界面設(shè)計(jì)。【適用專業(yè)】中等職業(yè)學(xué)校美術(shù)設(shè)計(jì)與制作專業(yè)。1. 前言1.1課程性質(zhì)本課程是中等職業(yè)學(xué)校美術(shù)設(shè)計(jì)與制作專業(yè)多媒體設(shè)計(jì)與制作方向的一門專業(yè)技能課程。其功能是使學(xué)生了解交互界面設(shè)計(jì)與制作的基本理念，掌握交互界面設(shè)計(jì)與制作所需要的基礎(chǔ)知識(shí)和方法，具備交互界面設(shè)計(jì)的基本技能。本課程是計(jì)算機(jī)輔助設(shè)計(jì)、UI 界面設(shè)計(jì)等課程的后續(xù)課程，也是學(xué)生學(xué)習(xí)其他后續(xù)課程的基礎(chǔ)。1.2設(shè)計(jì)思路本課程的總體設(shè)計(jì)思路是遵循任務(wù)引領(lǐng)、做學(xué)一體的原則，參照教育部1+X WEB前端開發(fā)證書（初級(jí)）職業(yè)標(biāo)準(zhǔn)的相關(guān)內(nèi)容，根據(jù)美術(shù)設(shè)計(jì)與制作專業(yè)工作任務(wù)與職業(yè)能力分析，以交互界面設(shè)計(jì)與制作的

2、相關(guān)工作任務(wù)要求為依據(jù)設(shè)置。課程內(nèi)容的選取圍繞交互界面設(shè)計(jì)與制作應(yīng)具備的職業(yè)能力要求，同時(shí)充分考慮本專業(yè)中職學(xué)生對(duì)本課程相關(guān)理論知識(shí)的需要，并融入教育部1+X WEB前端開發(fā)證書（初級(jí)）職業(yè)標(biāo)準(zhǔn)的相關(guān)考核內(nèi)容與要求。課程內(nèi)容的組織以交互界面設(shè)計(jì)的步驟流程和方法為主線，包括響應(yīng)式交互網(wǎng)站制作、CSS動(dòng)效制作、 JS 動(dòng)效制作等3 個(gè)學(xué)習(xí)任務(wù)。以任務(wù)為引領(lǐng)，通過任務(wù)整合相關(guān)知識(shí)、技能與態(tài)度。本課程建議教學(xué)課時(shí)數(shù)為144 學(xué)時(shí)。2. 課程目標(biāo)通過本課程的學(xué)習(xí)，學(xué)生能具備交互界面設(shè)計(jì)與制作的基礎(chǔ)知識(shí)，掌握交互界面設(shè)計(jì)與制作的基本方法和技能，達(dá)到教育部1+X WEB前端開發(fā)證書（初級(jí)）職業(yè)標(biāo)準(zhǔn)的相關(guān)要求

3、，具體達(dá)成以下職業(yè)素養(yǎng)和職業(yè)能力目標(biāo)。職業(yè)素養(yǎng)目標(biāo)：逐漸養(yǎng)成認(rèn)真負(fù)責(zé)、嚴(yán)謹(jǐn)細(xì)致、靜心專注、精益求精的職業(yè)態(tài)度；樹立科學(xué)健康的審美觀，積極向上的審美情趣，在學(xué)習(xí)和實(shí)踐中不斷加強(qiáng)藝術(shù)修養(yǎng)和信息化素養(yǎng)；養(yǎng)成良好的團(tuán)隊(duì)合作意識(shí)，積極參與團(tuán)隊(duì)學(xué)習(xí)與實(shí)踐，主動(dòng)協(xié)助同伴完成任務(wù)，提高人際溝通能力；在進(jìn)行交互界面設(shè)計(jì)的過程中，嚴(yán)格遵守各個(gè)實(shí)訓(xùn)室的使用規(guī)定和計(jì)算機(jī)的操作規(guī)范，養(yǎng)成良好的職業(yè)習(xí)慣和科學(xué)的工作態(tài)度。職業(yè)能力目標(biāo)：? 能利用互聯(lián)網(wǎng)資源、搜索完成交互設(shè)計(jì)需求分析報(bào)告? 能依據(jù)需求分析報(bào)告要求，正確使用響應(yīng)式頁面制作工具? 能通過 CSS盒模型技術(shù)完成頁面元素的布局控制? 能依據(jù)交互設(shè)計(jì)的要求完成CSS交

4、互動(dòng)畫效果創(chuàng)建117?能根據(jù)交互設(shè)計(jì)的要求運(yùn)用前端框架jQuery 技術(shù)完成交互設(shè)計(jì)?能根據(jù)交互設(shè)計(jì)的要求制作有交互特征的HTML5網(wǎng)頁? 能根據(jù)交互設(shè)計(jì)的要求科學(xué)有序地完成設(shè)計(jì)流程和各個(gè)制作步驟? 能結(jié)合設(shè)計(jì)稿，流暢清晰地陳述設(shè)計(jì)理念? 能根據(jù)自主學(xué)習(xí)和研究性學(xué)習(xí)需要，運(yùn)用信息化手段收集和處理信息3. 課程內(nèi)容和要求學(xué)習(xí)任務(wù)技能與學(xué)習(xí)要求知識(shí)與學(xué)習(xí)要求1. 交互界面制作需1. 交互界面設(shè)計(jì)的定義和要素求分析? 簡述交互界面設(shè)計(jì)的定義? 能針對(duì)交互作品? 簡述交互界面設(shè)計(jì)發(fā)展過程中各階段的使用場景調(diào)研分呈現(xiàn)樣式析其交互界面設(shè)?記住交互界面設(shè)計(jì)的要素計(jì)特征? 簡述交互界面設(shè)計(jì)的種類? 能通過優(yōu)秀

5、交互2. 交互界面設(shè)計(jì)的方法界面案例調(diào)研，?簡述交互界面設(shè)計(jì)與產(chǎn)品形象的關(guān)系歸納分析不同終?列舉交互呈現(xiàn)的方式端交互界面設(shè)計(jì)?列舉不同終端交互設(shè)計(jì)的特征的特征3. 盒模型的原理與組成? 了解盒模型的概念? 簡述盒模型邊框、 內(nèi)邊距、外邊距、 背景、1. 響應(yīng)式2.盒模型布局設(shè)計(jì)寬與高的含義交互網(wǎng)站4.與制作盒模型屬性的設(shè)置方法制作?能熟練根據(jù)盒模?了解多元素運(yùn)用盒模型時(shí)外間距的相互型原理對(duì)網(wǎng)站的關(guān)系頁頭、頁腳、導(dǎo)?了解內(nèi)間距在控制內(nèi)聯(lián)元素布局時(shí)的作航菜單、 banner用進(jìn)行制作?了解盒模型長、寬尺寸在包含邊框、內(nèi)、?能熟練根據(jù)盒模外邊距后的計(jì)算方法型原理制作卡片5.盒模型制作卡片式布局的方法

6、式布局?記住盒模型絕對(duì)定位、相對(duì)定位的設(shè)置方?能熟練根據(jù)盒模法型原理制作 TAB?簡述盒模型設(shè)置絕對(duì)定位、相對(duì)定位對(duì)文布局檔流的影響?記住盒模型定位的設(shè)置方法6. 盒模型制作 TAB切換式布局的方法?了解錨點(diǎn)的含義參考學(xué)時(shí)6101183. 移動(dòng)端響應(yīng)式布局設(shè)計(jì)與制作? 能熟練運(yùn)用響應(yīng)式布局知識(shí)進(jìn)行移動(dòng)端自適應(yīng)網(wǎng)頁的制作? 能熟練運(yùn)用瀏覽器開發(fā)者工具對(duì)制作的網(wǎng)頁進(jìn)行查看與調(diào)試4. FLEX 彈性布局設(shè)計(jì)與使用? 能熟練根據(jù)FLEX 彈性布局原理對(duì)移動(dòng)端網(wǎng)站的頁腳進(jìn)行制作? 能熟練根據(jù)FLEX 彈性布局原理對(duì)移動(dòng)端網(wǎng)站的導(dǎo)航菜單進(jìn)行制作? 能熟練根據(jù)FLEX 彈性布局原理對(duì)移動(dòng)端網(wǎng)站的卡片式布局進(jìn)

7、行制作? 簡述盒模型溢出隱藏的作用? 記住盒模型顯示與隱藏的設(shè)置方法7. 移動(dòng)端響應(yīng)式布局的基本要求與方法? 記住移動(dòng)端、 平板、 PC端網(wǎng)站的邊界尺寸? 記住設(shè)置 media實(shí)現(xiàn)屏幕范圍辨識(shí)的方法? 記住設(shè)置 Meta 標(biāo)簽實(shí)現(xiàn)移動(dòng)設(shè)備辨識(shí)的方法? 了解子元素設(shè)置百分比的參照關(guān)系4? 記住元素設(shè)置百分比的方法8. 瀏覽器開發(fā)者工具使用的基本要求與方法? 了解瀏覽器開發(fā)者工具查看元素的方法? 了解瀏覽器開發(fā)者工具修改元素代碼與屬性的方法? 記住瀏覽器開發(fā)者工具網(wǎng)頁視圖（WebView）切換的方法9. FLEX 容器的概念與屬性? 了解 flex 容器的概念? 說出容器的主軸與交叉軸的區(qū)別? 了

8、解容器的起點(diǎn)位置與結(jié)束位置10. FLEX 容器項(xiàng)目元素的設(shè)置方法? 簡述子元素縮放的設(shè)置方法? 簡述項(xiàng)目排列順序的含義? 簡述 FLEX 容器的水平、垂直布局的設(shè)置方法? 簡述容器內(nèi)項(xiàng)目元素的對(duì)齊屬性、分布屬性的設(shè)置方法1611. FLEX彈性布局移動(dòng)端網(wǎng)站頁腳的制作方法? 簡述移動(dòng)端網(wǎng)站頁腳的特點(diǎn)? 說出移動(dòng)端和 PC 端頁腳設(shè)計(jì)與制作的差異? 了解元素的 self 屬性設(shè)置實(shí)現(xiàn)單獨(dú)改變特定元素的方法12. FLEX彈性布局移動(dòng)端導(dǎo)航菜單的制作方法? 簡述移動(dòng)端網(wǎng)站導(dǎo)航菜單的特點(diǎn)? 識(shí)別移動(dòng)端和 PC 端導(dǎo)航菜單設(shè)計(jì)與制作的差異119? 了解改變?cè)貦M、豎排列方向?qū)崿F(xiàn)導(dǎo)航菜單切換的方法13

9、. FLEX彈性布局移動(dòng)端卡片式布局的制作方法? 簡述移動(dòng)端網(wǎng)站卡片式布局的特點(diǎn)? 說出移動(dòng)端和 PC 端卡片式布局設(shè)計(jì)與制作的差異? 了解改變?cè)嘏帕许樞驅(qū)ㄆ婷嬷夭贾玫姆椒? 了解改變?cè)乜s放設(shè)置對(duì)卡片版面重布置的方法14. bootstrap前端框架的基本概念? 簡述 Bootstrap 的獲取與配置的方法? 了解 Bootstrap CSS 的排版定義規(guī)則15. Bootstrap網(wǎng)格系統(tǒng)制作響應(yīng)式模塊的方法?了解 Bootstrap網(wǎng)格系統(tǒng)的概念5. Bootstrap前端框? 了解 Bootstrap 網(wǎng)格系統(tǒng)的工作原理架應(yīng)用? 了解網(wǎng)格選項(xiàng)的設(shè)置方法? 能熟練運(yùn)用? 記住基本網(wǎng)

10、格的結(jié)構(gòu)Bootstrap網(wǎng)格? 記住響應(yīng)式列重置的方法系統(tǒng)制作響應(yīng)式? 記住偏移列的設(shè)置方法模塊? 記住列排序的設(shè)置方法? 能熟練運(yùn)用16. Bootstrap制作響應(yīng)式導(dǎo)航欄的方法Bootstrap制作20?記住默認(rèn)導(dǎo)航欄的設(shè)置方法響應(yīng)式導(dǎo)航欄? 記住響應(yīng)式導(dǎo)航欄的設(shè)置方法? 能熟練運(yùn)用? 記住導(dǎo)航欄中表單、按鈕、文本、鏈接的Bootstrap制作設(shè)置方法卡片式布局? 記住組件對(duì)齊方式、固定到頂部、固定到? 能熟練運(yùn)用底部、靜態(tài)、反色的設(shè)置方法Bootstrap制作17. Bootstrap制作卡片式布局的方法banner? 了解 Bootstrap 縮略圖式卡片的制作方法? 了解 Boo

11、tstrap 多媒體對(duì)象卡片的制作方法18. Bootstrap制作 banner 的方法? 了解輪播（ Carousel ）插件的導(dǎo)入方法1201. 鼠標(biāo)交互動(dòng)效制作? 能熟練運(yùn)用 CSS 技術(shù)制作鼠標(biāo)交互效果? 能熟練設(shè)置 transition 屬性制作過渡動(dòng)畫2.CSS3animation動(dòng)畫制作2.CSS 動(dòng)? 熟練運(yùn)用效制作animation屬性制作單屬性變化動(dòng)畫? 熟練運(yùn)用 animation 屬性制作多屬性變化動(dòng)畫3.transform變 形動(dòng)畫制作? 熟練運(yùn)用 transform 屬性制作 2D形變動(dòng)畫? 熟練運(yùn)用 transform 屬性? 了解輪播（ Carousel ）插

12、件的使用方法? 了解輪播（ Carousel ）插件選項(xiàng)與屬性的設(shè)置方法? 了解輪播（ Carousel ）插件的事件動(dòng)作設(shè)置方法1. 鼠標(biāo)交互動(dòng)效的基本概念? 了解 CSS簡單動(dòng)畫的實(shí)現(xiàn)原理?記住 transition屬性的設(shè)置方法? 記住 hover 選擇器的使用方法? 說出鼠標(biāo)的滑入、滑出、懸停、點(diǎn)擊、釋放、雙擊等動(dòng)作的含義?識(shí)別元素的初始狀態(tài)、激活狀態(tài)、過程狀8態(tài)、結(jié)束狀態(tài)、失效狀態(tài)的含義2.鼠標(biāo)交互動(dòng)效的制作方法? 記住 CSS基本選擇器的使用方法? 了解 CSS高級(jí)選擇器的使用方法? 記住 CSS 臨近、后代選擇器的使用方法? 了解觸發(fā)元素中包含 a 標(biāo)簽的處理方法3. CSS3

13、animation幀動(dòng)畫的基本概念? 簡述幀動(dòng)畫的概念? 了解幀動(dòng)畫時(shí)間軸的概念? 簡述動(dòng)畫起始狀態(tài)、結(jié)束狀態(tài)設(shè)置的必要性4. CSS3 animation 幀動(dòng)畫的制作方法16? 記住 animation 動(dòng)畫的設(shè)置步驟? 記住 keyframe 的定義方法? 記住 animation 的時(shí)間、次數(shù)、速度曲線、延遲、播放時(shí)間、結(jié)束狀態(tài)、播放狀態(tài)等屬性的設(shè)置方法5. transform 2D動(dòng)畫的制作方法? 記住 transform 的平移設(shè)置方法? 記住 transform 的縮放設(shè)置方法? 記住 transform 的旋轉(zhuǎn)設(shè)置方法16? 記住 transform 的傾斜設(shè)置方法6. tra

14、nsform 3D動(dòng)畫的制作方法? 簡述 X、 Y、Z 軸的定義? 記住 X、 Y、Z 軸的旋轉(zhuǎn)效果121制作 3D旋轉(zhuǎn)木?歸納說出 transform的 3D 平移設(shè)置方法馬特效?歸納說出 transform的 3D 縮放設(shè)置方法? 熟練運(yùn)用?歸納說出 transform的 3D 旋轉(zhuǎn)設(shè)置方法transform 屬性?歸納說出 transform的 3D 傾斜設(shè)置方法制作 3D旋轉(zhuǎn)魔?歸納說出 transform的 3D 透視視圖設(shè)置方特效方法?舉例說明 transform 3D 視距的含義7. 3D 旋轉(zhuǎn)木馬特效的制作方法? 說出旋轉(zhuǎn)木馬頂視圖的含義? 了解半徑和圖片寬度之間的角度關(guān)系?

15、了解每旋轉(zhuǎn)一張圖與角度變化的關(guān)系8. 3D 旋轉(zhuǎn)魔方特效的制作方法?了解六個(gè)平面組成的六面體與ZYX旋轉(zhuǎn)角度的關(guān)系? 了解 translate Z 設(shè)置對(duì)平面之間距離變化的影響? 了解讓魔方旋轉(zhuǎn)的 transform 設(shè)置方法1. banner 動(dòng)效制作的基礎(chǔ)知識(shí)?了解 banner 滾屏動(dòng)效的用途1. banner動(dòng)效制作?說出典型banner 動(dòng)效案例?熟練運(yùn)用jQuery?簡述典型 banner 動(dòng)效實(shí)現(xiàn)的原理制作24banner2. banner 動(dòng)效的制作方法輪 播 特banner 動(dòng)效效果圖制作效?利用 HTML5以及 jQuery實(shí)現(xiàn) banner 動(dòng)效3.JS 動(dòng)效案例制作制作

16、3.購物車動(dòng)效制作的基本知識(shí)? 了解購物車在電子商務(wù)網(wǎng)站中的用途2. 購物車動(dòng)效制作?說出典型的購物車交互案例?能 運(yùn) 用jQuery?簡述典型的購物車交互邏輯流程元素操作技術(shù)制244.購物車動(dòng)效的制作方法作購物車的動(dòng)效?購物車效果圖制作?利用 HTML5以及 jQuery實(shí)現(xiàn)購物車動(dòng)效案例制作總課時(shí)1444.教學(xué)活動(dòng)設(shè)計(jì)參考教學(xué)活動(dòng)名稱教學(xué)活動(dòng)設(shè)計(jì)1221. 教師布置任務(wù)： 自選一上海知名產(chǎn)品， 對(duì)其同類產(chǎn)品進(jìn)行調(diào)研分析，完成交互設(shè)計(jì)需求分析報(bào)告。（ 1）了解調(diào)研產(chǎn)品的風(fēng)格特征、用戶畫像。（ 2）調(diào)研同類產(chǎn)品交互場景中的品牌特征。教學(xué)活動(dòng)一：（ 3）交互設(shè)計(jì)合理，并針對(duì)不同終端進(jìn)行交互設(shè)計(jì)分

17、析。上海 Style 2.教師舉例分析：產(chǎn)品介紹包含的要素有標(biāo)題、種類、圖片、文產(chǎn)品介紹交互字介紹、價(jià)格、用戶體驗(yàn)、購買、收藏等。需求分析3.學(xué)生通過網(wǎng)絡(luò)、書籍參查等方法，完成作業(yè)。4. 學(xué)生調(diào)研成果匯報(bào)：學(xué)生介紹自己的分析報(bào)告。學(xué)生將自己的分析成果，以恰當(dāng)?shù)男问娇谑鰠R報(bào)。5. 教師總結(jié)評(píng)價(jià)：教師依據(jù)資料的完整程度、分析的邏輯性、個(gè)人見解的呈現(xiàn)、排版的合理性和表述的效果進(jìn)行打分1. 教師布置任務(wù)： 教師以天貓為例， 介紹我國電子商務(wù)發(fā)展歷史，以及全球領(lǐng)先的情況，布置“為上海優(yōu)品設(shè)計(jì)購物車”的任務(wù)。2. 教師示范講解：教師示范講解標(biāo)志設(shè)計(jì)的要領(lǐng)，強(qiáng)調(diào)重點(diǎn)和難點(diǎn)。教學(xué)活動(dòng)二：3.教師組織同學(xué)們討論

18、總結(jié)出購物車設(shè)計(jì)的推進(jìn)流程，引導(dǎo)學(xué)習(xí)上海優(yōu)品 購購物車交互設(shè)計(jì)分析方法和思考方法。物車設(shè)計(jì)4.學(xué)生分組嘗試：學(xué)生以4 5 人為小組進(jìn)行討論，選定產(chǎn)品，利用課后進(jìn)行查證調(diào)研后，每人繪制 1 個(gè)購物車頁面的設(shè)計(jì)草圖，并最終選出一個(gè)，以規(guī)范HTML5的形式表現(xiàn)。5. 作品上傳平臺(tái)，教師組織評(píng)價(jià)：學(xué)生互評(píng)，社團(tuán)師生參與評(píng)價(jià)，教師綜合點(diǎn)評(píng)設(shè)計(jì)成果、設(shè)計(jì)過程合理性及團(tuán)隊(duì)合作5. 實(shí)施建議5.1教材編寫建議（ 1）以本課程標(biāo)準(zhǔn)為依據(jù)編寫教材。（ 2）教材應(yīng)該充分體現(xiàn)以崗位為目標(biāo)，以任務(wù)為引領(lǐng)的課程設(shè)計(jì)思路。（ 3）教材編寫應(yīng)打破傳統(tǒng)的學(xué)科界線和教學(xué)方法，把基礎(chǔ)學(xué)科的訓(xùn)練項(xiàng)目分解到具體的工作任務(wù)中去， 真正體現(xiàn)“在做中學(xué)， 在做中會(huì)”的理念， 使學(xué)習(xí)目標(biāo)明確， 更具實(shí)用性。（ 4）教材編寫應(yīng)注意到本學(xué)科的快速發(fā)展和變化，在教學(xué)內(nèi)容和教學(xué)手段上都注意到前瞻性。爭取將本學(xué)科的新知識(shí)、新技術(shù)、新材料、新發(fā)展融入教材中。（ 5）教材應(yīng)力求文字簡練，指令明確。要充分考慮美術(shù)設(shè)計(jì)作為視覺藝術(shù)的特點(diǎn)，配備適量的直觀圖片和代碼資料或者提供相應(yīng)的網(wǎng)絡(luò)鏈接。（ 4）各學(xué)校可依據(jù)具體的