項(xiàng)目5 移動(dòng)端“教學(xué)助手”App產(chǎn)品交互設(shè)計(jì)開發(fā)-備課筆記

項(xiàng)目五：移動(dòng)端“教學(xué)助手”App產(chǎn)品交互設(shè)計(jì)開發(fā)一、課程說明與要求1.課程性質(zhì)與考核方式說明教師首先自我介紹。然后說明本課為考查課，平時(shí)成績和期末成績各占總成績的50%，平時(shí)成績主要通過平時(shí)作業(yè)（作品）的形式評定，還要兼顧考核出勤、學(xué)習(xí)態(tài)度、課堂表現(xiàn)等因素；期末考試是在課程的最后兩次課采取限時(shí)命題創(chuàng)作的形式，全面考核課程知識的綜合運(yùn)用。2.課程說明《數(shù)字媒體交互設(shè)計(jì)》共分為網(wǎng)頁交互設(shè)計(jì)、App交互設(shè)計(jì)、VR交互設(shè)計(jì)三方面的內(nèi)容。本課程是以理論為基礎(chǔ)的實(shí)踐導(dǎo)向型課程,所傳達(dá)的課程內(nèi)容圍繞“以人為本”的設(shè)計(jì)原則，重點(diǎn)講述人機(jī)交互的基本概念和重要意義以及發(fā)展歷程、軟件系統(tǒng)的人機(jī)交互設(shè)計(jì)原則和方法、網(wǎng)絡(luò)系統(tǒng)的人機(jī)交互設(shè)計(jì)原則和方法、移動(dòng)端應(yīng)用人機(jī)交互技術(shù)、人機(jī)交互開發(fā)工具與環(huán)境等理論內(nèi)容；簡要介紹人機(jī)交互的認(rèn)知心理學(xué)、計(jì)算機(jī)硬件的人機(jī)交互設(shè)計(jì)、人機(jī)交互技術(shù)的發(fā)展趨勢,并培養(yǎng)學(xué)生利用交互設(shè)計(jì)工具制作做實(shí)際交互作品原型的能力。3.組織簽到及建立班級課程微信群組織學(xué)生使用學(xué)習(xí)通進(jìn)行簽到。然后使用微信面對面建群，說明本群作為課程的相關(guān)通知發(fā)布、知識答疑和作品交流使用，同時(shí)歡迎同學(xué)們及時(shí)在群里反饋對課程教學(xué)方面的意見和學(xué)習(xí)感想，提醒老師及時(shí)調(diào)整適合同學(xué)們的授課方式。4.工具材料準(zhǔn)備說明本課的實(shí)踐技能訓(xùn)練階段，需要同學(xué)在手機(jī)或者是計(jì)算機(jī)中下載好行業(yè)需求分析文檔，教師將所需準(zhǔn)備資料發(fā)到微信群中。資料類型與名稱備注行業(yè)需求分析報(bào)告文檔每個(gè)小組一份二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對象為藝術(shù)專業(yè)學(xué)生，是在藝術(shù)專業(yè)中設(shè)立的一門邏輯思維較強(qiáng)的設(shè)計(jì)類課程，需要學(xué)生在學(xué)習(xí)過程中，對美術(shù)設(shè)計(jì)與邏輯設(shè)計(jì)內(nèi)容進(jìn)行一定程度上的融通。作為一門實(shí)踐性較強(qiáng)的課程，針對學(xué)生對當(dāng)前市場應(yīng)用需求普遍認(rèn)知不強(qiáng)，或有較多偏差的情況，強(qiáng)調(diào)進(jìn)行引導(dǎo)教學(xué)，融入市場多元化理念。另一方面，學(xué)生對未來的市場應(yīng)用有信心，對所選擇的專業(yè)感興趣，獲取知識的主動(dòng)性較強(qiáng)。2.課程導(dǎo)入本項(xiàng)目主要通過移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)講解，了解使用原型設(shè)計(jì)工具墨刀軟件來進(jìn)行移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)的流程與方法，通過本項(xiàng)目的學(xué)習(xí)，讀者可以掌握使用墨刀進(jìn)行原型交互設(shè)計(jì)時(shí)墨刀工具的使用方法，并且本案例中可以在學(xué)習(xí)項(xiàng)目制作的同時(shí)，也在制作中了解教學(xué)服務(wù)的建設(shè)，通過本項(xiàng)目的學(xué)習(xí)讀者可以在以后的原型設(shè)計(jì)工作中得心應(yīng)手，從而達(dá)到適配自己崗位的能力。三、理論知識講解（一）移動(dòng)端“教學(xué)助手”App產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析在智能手機(jī)、移動(dòng)終端鋪天蓋地的今天，各個(gè)行業(yè)和領(lǐng)域的信息化需求越來越強(qiáng)烈，而我們的課堂教學(xué)模式和教務(wù)管理模式也在進(jìn)行著一場大變革。傳統(tǒng)教學(xué)法形式單一，一般都是教師站在講臺上講，學(xué)生在下面被動(dòng)地接受知識。長期采用這種灌輸式的教學(xué)，會產(chǎn)生學(xué)生不主動(dòng)，學(xué)習(xí)興趣不高、課堂效果不佳等問題。如何激發(fā)學(xué)生的天性，把快樂帶進(jìn)課堂，讓學(xué)習(xí)變得有趣、高效？“互聯(lián)網(wǎng)＋”背景下的教學(xué)，要求我們用新技術(shù)、新媒體、新方法，探索個(gè)性化學(xué)習(xí)新模式。由此應(yīng)運(yùn)而生的“教學(xué)助手”軟件，不僅提高了課堂教學(xué)質(zhì)量和效果，而且促進(jìn)了信息技術(shù)與教育教學(xué)的深度融合。（二）移動(dòng)端“教學(xué)助手”App產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目需求分析App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目是一款教學(xué)服務(wù)管理軟件，旨在通過信息化手段，提供了學(xué)院部門管理、智慧教學(xué)、教務(wù)管理、課程及資源管理、學(xué)習(xí)管理、新聞資訊等功能。主要從目標(biāo)用戶、軟件規(guī)劃、功能需求等方面進(jìn)行需求分析。1.目標(biāo)用戶適用于學(xué)校、管理層、廣大師生、培訓(xùn)平臺等。2.運(yùn)行環(huán)境：安卓移動(dòng)端。App移動(dòng)端“教學(xué)助手”軟件規(guī)劃學(xué)習(xí)平臺：文字圖片視頻多媒體在線學(xué)習(xí)。資源平臺：統(tǒng)一標(biāo)準(zhǔn)、整合資源、共享網(wǎng)絡(luò)服務(wù)。教務(wù)平臺：教學(xué)資料管理、考務(wù)、學(xué)生管理等。資訊平臺：政策速讀、新聞事件、熱點(diǎn)話題、行業(yè)動(dòng)態(tài)等構(gòu)建全方位信息平臺。交流平臺：先鋒論壇，發(fā)布學(xué)習(xí)心得，在線評論互動(dòng)。4.需求分析注冊登錄：用戶可以通過手機(jī)號驗(yàn)證碼或者用戶名密碼進(jìn)行登錄；忘記密碼：如果用戶忘記密碼可以通過手機(jī)號+驗(yàn)證碼的方式重置密碼；首頁分類：首頁會展示一些相應(yīng)的新聞及學(xué)術(shù)專題，每個(gè)專題都有不同的分類；新聞資訊：App中會實(shí)時(shí)更新一些大賽、培訓(xùn)、會議等相關(guān)新聞，方便用戶了解最新的資訊；點(diǎn)贊評論：遇到喜歡的視頻或者文章可以點(diǎn)贊；學(xué)習(xí)模塊：用戶在學(xué)習(xí)模塊可以搜索相關(guān)課程的書籍、視頻、音頻進(jìn)行學(xué)習(xí)；教學(xué)管理：用戶可以在App上對教學(xué)計(jì)劃、教研活動(dòng)、教學(xué)組織及教學(xué)質(zhì)量等環(huán)節(jié)進(jìn)行查看和管理；我的資料：我的資料會展示用戶的頭像、昵稱、性別、生日、實(shí)名認(rèn)證、手機(jī)號綁定等。（三）墨刀概述1.墨刀工作界面介紹墨刀工作界面是墨刀的主要操作區(qū)，認(rèn)識墨刀工作界面可以幫助我們更好地掌握墨刀使用方法。墨刀工作界面由七部分組成，分別是功能區(qū)、工具欄、頁面欄、圖層欄、元件欄、設(shè)置欄、工作區(qū)，墨刀工作界面示意圖，如圖5-1所示。以下是各個(gè)部分的細(xì)節(jié)功能介紹。功能區(qū)工功能區(qū)工具欄頁面欄圖層欄元件欄工作區(qū)設(shè)置欄2.墨刀元件介紹（1）輪播圖組件內(nèi)置組件中新增輪播圖組件，自帶自動(dòng)輪播和左滑右滑功能，操作更加智能便捷。添加輪播圖：從內(nèi)置組件中拖出輪播圖組件，如圖5-22所示。右側(cè)設(shè)置面板上自動(dòng)出現(xiàn)圖片占位，鼠標(biāo)懸浮于上，可以選擇從“本地上傳”或者是從“素材庫中”上傳，如圖5-23所示。（2）網(wǎng)頁組件在內(nèi)置組件庫中選擇“網(wǎng)頁”，拖入頁面畫板中，如圖5-26所示。可以添加音頻、視頻或者地圖URL。3.我的組件“我的組件“在編輯區(qū)右側(cè)的元件欄中，它可以用于放置個(gè)人保存的組件，如圖5-38所示?？梢詫⒖赡軙?fù)用的組件或組合添加到“我的組件“當(dāng)中，便于制作時(shí)直接拖拽使用。4.圖標(biāo)（1）添加圖標(biāo)圖標(biāo)在編輯區(qū)右側(cè)的組件素材區(qū)域，打開圖標(biāo)面板后，可以通過搜索或分類查找的方式選用圖標(biāo)庫中的開源圖標(biāo)?？梢栽趫D標(biāo)面板設(shè)置圖標(biāo)的默認(rèn)顏色及尺寸。（2）下載圖標(biāo)墨刀中提供內(nèi)置的圖標(biāo)下載功能，下載格式為svg/png，目前支持三倍倍數(shù)導(dǎo)出，具體操作方式如下：在頁面編輯區(qū)，選中需要下載的圖標(biāo)后，點(diǎn)擊右下角的“導(dǎo)出圖標(biāo)”即可保存svg/png格式的圖標(biāo)到本地。如需批量下載svg圖標(biāo)，可按住shift，鼠標(biāo)左鍵點(diǎn)選，多選完成后，點(diǎn)擊“導(dǎo)出圖標(biāo)”即可。5.母版在畫原型時(shí)或許面臨這樣的問題：同一個(gè)組件（組合）在多個(gè)頁面多處都用到，但是當(dāng)后期需要修改時(shí)，想一次性修改所有這樣的組件。此時(shí)就可以利用墨刀的“母版”進(jìn)行同步修改。墨刀支持將任何組件，無論是靜態(tài)還是動(dòng)態(tài)的，轉(zhuǎn)化成母版（master）。母版的特點(diǎn)是具備“繼承性”：只要改動(dòng)母版（master），那么它所有的實(shí)例（instance）都能同步更新改動(dòng)。（四）項(xiàng)目實(shí)施——移動(dòng)端“教學(xué)助手”App產(chǎn)品交互設(shè)計(jì)開發(fā)1.“教學(xué)助手”——底部導(dǎo)航功能制作本案例設(shè)計(jì)制作使用App切換底部導(dǎo)航欄時(shí)，底部導(dǎo)航欄選中切換效果的制作。切換底部導(dǎo)航欄效果原理就是：利用墨刀“組件狀態(tài)”，通過“新建交互”來切換狀態(tài)，并根據(jù)相應(yīng)的頁面進(jìn)行底部導(dǎo)航欄組件狀態(tài)切換來實(shí)現(xiàn)。底部導(dǎo)航欄切換的效果。 2.“教學(xué)助手”——TAB切換功能制作本案例設(shè)計(jì)制作TAB標(biāo)簽切換的效果，在講解具體操作前，先看一下TAB切換的運(yùn)行效果，運(yùn)行時(shí)可以看到，TAB標(biāo)簽會變色，TAB標(biāo)簽下的指示條也會跟著移動(dòng)，下邊內(nèi)容也跟著切換。案例實(shí)現(xiàn)原理就是利用墨刀工具的狀態(tài)切換功能，設(shè)置神奇移動(dòng)效果來實(shí)現(xiàn)的。3.“教學(xué)助手”——點(diǎn)贊效果制作本案例設(shè)計(jì)制作點(diǎn)贊的效果，在講解具體操作前，先看一下點(diǎn)贊的運(yùn)行效果，在點(diǎn)擊點(diǎn)贊愛心的時(shí)候會變成紅色愛心，并跳動(dòng)一下，在此點(diǎn)擊就會取消點(diǎn)贊效果。案例實(shí)現(xiàn)原理是利用墨刀工具的狀態(tài)切換功能，設(shè)置元件的動(dòng)效來實(shí)現(xiàn)。4.“教學(xué)助手”——圖片左右滾動(dòng)效果制作本案例設(shè)計(jì)制作左右滾動(dòng)的效果為當(dāng)一行無法一次全部顯示內(nèi)容時(shí)，可以通過鼠標(biāo)左右滑動(dòng)來顯示未顯示的內(nèi)容。案例實(shí)現(xiàn)原理是利用墨刀工具的多態(tài)組件來實(shí)現(xiàn)效果。四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)設(shè)計(jì)并制作“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)項(xiàng)目五、課堂總結(jié)本章介紹了關(guān)于墨刀原型設(shè)計(jì)工具的相關(guān)基礎(chǔ)知識，包括軟件的基礎(chǔ)使用方法和面板及工具的使用方式方法。其中，著重介紹了軟件中的狀態(tài)功能，墨刀中的狀態(tài)功能是整個(gè)軟件中非常重要的部分，可以幫助讀者制作很多交互效果，想要使用墨刀軟件制原型，必須對狀態(tài)功能的用法熟練掌握才行。六、課后思考本項(xiàng)目中主