第五章4-App頁面設(shè)計視覺層次結(jié)構(gòu)和視覺引導(dǎo)-教案

序號：24課程數(shù)字媒體交互設(shè)計系部數(shù)字藝術(shù)系任課教師張靖瑤課題名稱：App產(chǎn)品交互設(shè)計開發(fā)制作：學(xué)習(xí)任務(wù)四App頁面設(shè)計視覺層次結(jié)構(gòu)和視覺引導(dǎo)內(nèi)容提要與時間分配：一、課程說明與要求1.課程說明（3分鐘）二、學(xué)情分析與課程導(dǎo)入（2分鐘）三、理論知識講解1.App頁面視覺層次結(jié)構(gòu)的構(gòu)建【思政融入】（17分鐘）………重點2.App界面設(shè)計的視覺引導(dǎo)和反饋（25分鐘）………難點四、實踐技能訓(xùn)練1.視覺層次構(gòu)建的分析方法（10分鐘）2.視覺引導(dǎo)的創(chuàng)意草稿設(shè)計（15分鐘）……重點五、課堂總結(jié)（3分鐘）六、課后思考（5分鐘）注：共計2學(xué)時教學(xué)方法：講授法+討論法+實訓(xùn)指導(dǎo)說明：教案按每個授課單元或根據(jù)授課特點按章節(jié)進(jìn)行設(shè)計。教學(xué)目的與要求1.了解視覺層次結(jié)構(gòu)的閱讀模式2.掌握App視覺層次結(jié)構(gòu)構(gòu)建的方法3.掌握視覺引導(dǎo)和反饋模式的應(yīng)用授課班級授課日期節(jié)次與難點教學(xué)重點教學(xué)重點：App視覺層次的構(gòu)建，要掌握視覺層級結(jié)構(gòu)的構(gòu)成元素：尺寸、顏色、字重及布局，通過依據(jù)重要性排列，來形成視覺關(guān)系，從而在整個設(shè)計中建立視覺層次，這樣便于更有效的傳達(dá)交互的信息和含義。教學(xué)難點：App視覺引導(dǎo)和反饋設(shè)計的模式及應(yīng)用場景，需要知道，如何讓我們的APP更加高效、快速的使用戶能夠自然、輕松的瀏覽到所需要的信息，比如：瀏覽順序、圖標(biāo)的標(biāo)識性、引導(dǎo)性等等；對于交互體驗，尤其要重視視覺反饋設(shè)計，通過用戶的操作，讓用戶知道操作的結(jié)果是什么，發(fā)生了什么；讓反饋設(shè)計可以恰當(dāng)、清晰、及時地傳達(dá)給用戶授課地點授課方式與授課方式：理論講授、互動討論、實訓(xùn)指導(dǎo)授課地點：參考資料使用教材及教材：《交互設(shè)計：設(shè)計思維與實踐》由芳，王建民編著，電子工業(yè)出版社資料：教學(xué)課件、案例及作業(yè)題復(fù)習(xí)思考1.反饋設(shè)計分幾個步驟來完成，讓反饋設(shè)計可以恰當(dāng)、清晰、及時地傳達(dá)給用戶2.模態(tài)反饋和非模態(tài)反饋的特點和使用場景習(xí)要點下次課預(yù)預(yù)習(xí)和思考App界面元素設(shè)計的構(gòu)成及UI設(shè)計組件的應(yīng)用學(xué)效果分析實施情況及教【此處內(nèi)容須為課后手寫，內(nèi)容參考如下】本次課按計劃實施教學(xué)，教學(xué)內(nèi)容充實，結(jié)合日常應(yīng)用講授理論知識，學(xué)生理解較好。通過作品分析訓(xùn)練，學(xué)生能很好地理解App視覺構(gòu)建及引導(dǎo)和反饋設(shè)計；通過實例引導(dǎo)學(xué)生對視覺層次中閱讀模式的理解，強(qiáng)化學(xué)生參與性和感受力。在實踐環(huán)節(jié)，通過有針對性地指導(dǎo)，學(xué)生能夠掌握視覺層次構(gòu)建的方法及視覺引導(dǎo)的元素設(shè)計。綜上，通過本次課的教學(xué)，學(xué)生對App的視覺層次的構(gòu)建和視覺層次的引導(dǎo)有了更深入的認(rèn)識，能從滿足需求設(shè)計的角度去認(rèn)識視覺層次及引導(dǎo)對App交互界面設(shè)計的作用并應(yīng)用到實際產(chǎn)品中，能將所學(xué)的知識完整表達(dá)、靈活運用到實踐中，達(dá)到了本課的教學(xué)目標(biāo)。教研室主任審核：