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

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