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

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

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

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

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

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

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

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

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

9、. FLEX彈性布局移動端卡片式布局的制作方法? 簡述移動端網(wǎng)站卡片式布局的特點? 說出移動端和 PC 端卡片式布局設(shè)計與制作的差異? 了解改變元素排列順序?qū)ㄆ婷嬷夭贾玫姆椒? 了解改變元素縮放設(shè)置對卡片版面重布置的方法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)格選項的設(shè)置方法? 能熟練運用? 記住基本網(wǎng)

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

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

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

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

14、nsform 3D動畫的制作方法? 簡述 X、 Y、Z 軸的定義? 記住 X、 Y、Z 軸的旋轉(zhuǎn)效果121制作 3D旋轉(zhuǎn)木?歸納說出 transform的 3D 平移設(shè)置方法馬特效?歸納說出 transform的 3D 縮放設(shè)置方法? 熟練運用?歸納說出 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)魔方特效的制作方法?了解六個平面組成的六面體與ZYX旋轉(zhuǎn)角度的關(guān)系? 了解 translate Z 設(shè)置對平面之間距離變化的影響? 了解讓魔方旋轉(zhuǎn)的 transform 設(shè)置方法1. banner 動效制作的基礎(chǔ)知識?了解 banner 滾屏動效的用途1. banner動效制作?說出典型banner 動效案例?熟練運用jQuery?簡述典型 banner 動效實現(xiàn)的原理制作24banner2. banner 動效的制作方法輪 播 特banner 動效效果圖制作效?利用 HTML5以及 jQuery實現(xiàn) banner 動效3.JS 動效案例制作制作

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

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

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