第五章App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)

App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)知識(shí)要點(diǎn)01App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析02App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析03墨刀原型工具概述04項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)第一部分App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析在智能手機(jī)、移動(dòng)終端鋪天蓋地的今天，各個(gè)行業(yè)和領(lǐng)域的信息化需求越來越強(qiáng)烈，而我們的課堂教學(xué)模式和教務(wù)管理模式也在進(jìn)行著一場(chǎng)大變革。傳統(tǒng)教學(xué)法形式單一，一般都是教師站在講臺(tái)上講，學(xué)生在下面被動(dòng)地接受知識(shí)。長期采用這種灌輸式的教學(xué)，會(huì)產(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é)的深度融合。App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析第二部分App移動(dòng)端“教學(xué)助手”產(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)平臺(tái)等。2.運(yùn)行環(huán)境：安卓移動(dòng)端。App移動(dòng)端“教學(xué)助手”軟件規(guī)劃學(xué)習(xí)平臺(tái)：文字圖片視頻多媒體在線學(xué)習(xí)。資源平臺(tái)：統(tǒng)一標(biāo)準(zhǔn)、整合資源、共享網(wǎng)絡(luò)服務(wù)。教務(wù)平臺(tái)：教學(xué)資料管理、考務(wù)、學(xué)生管理等。資訊平臺(tái)：政策速讀、新聞事件、熱點(diǎn)話題、行業(yè)動(dòng)態(tài)等構(gòu)建全方位信息平臺(tái)。交流平臺(tái)：先鋒論壇，發(fā)布學(xué)習(xí)心得，在線評(píng)論互動(dòng)。4.需求分析注冊(cè)登錄：用戶可以通過手機(jī)號(hào)驗(yàn)證碼或者用戶名密碼進(jìn)行登錄；忘記密碼：如果用戶忘記密碼可以通過手機(jī)號(hào)+驗(yàn)證碼的方式重置密碼；首頁分類：首頁會(huì)展示一些相應(yīng)的新聞及學(xué)術(shù)專題，每個(gè)專題都有不同的分類；新聞資訊：App中會(huì)實(shí)時(shí)更新一些大賽、培訓(xùn)、會(huì)議等相關(guān)新聞，方便用戶了解最新的資訊；點(diǎn)贊評(píng)論：遇到喜歡的視頻或者文章可以點(diǎn)贊；學(xué)習(xí)模塊：用戶在學(xué)習(xí)模塊可以搜索相關(guān)課程的書籍、視頻、音頻進(jìn)行學(xué)習(xí)；教學(xué)管理：用戶可以在App上對(duì)教學(xué)計(jì)劃、教研活動(dòng)、教學(xué)組織及教學(xué)質(zhì)量等環(huán)節(jié)進(jìn)行查看和管理；我的資料：我的資料會(huì)展示用戶的頭像、昵稱、性別、生日、實(shí)名認(rèn)證、手機(jī)號(hào)綁定等；App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)項(xiàng)目背景分析第三部分墨刀原型工具概述墨刀工作界面示意圖，墨刀原型工具添加頁面墨刀原型工具調(diào)整頁面順序展開、折疊頁面墨刀原型工具刪除頁面刪除頁面找回墨刀原型工具設(shè)置頁面橫屏設(shè)置頁面背景顏色墨刀原型工具修改頁面名稱墨刀原型工具墨刀原型工具設(shè)置頁面高度墨刀原型工具添加組件內(nèi)置組件你可以快速拖拽使用我們?yōu)槟銉?nèi)置的基礎(chǔ)組件以及平臺(tái)組件（ios、MaterialDesign、AntDesign、WeUI...）。我的組件你可以將需要復(fù)用的組件或組合選中，鼠標(biāo)右鍵添加到「我的組件」當(dāng)中，便于之后直接拖拽使用。圖標(biāo)你可以通過搜索或分類查找的方式選用圖標(biāo)庫中的開源圖標(biāo)，并且可以自由設(shè)置圖標(biāo)的默認(rèn)顏色及尺寸。母版如果你需要在多個(gè)頁面或位置用到同一組件，且需要它們可以被批量修改，那你可以先將它設(shè)置為「母版」。比如同一個(gè)文字組件，可以在多個(gè)頁面中復(fù)用，并且可以通過修改母版達(dá)到批量修改的效果。墨刀原型工具顯示、隱藏組件墨刀原型工具我的組件管理我的組件墨刀原型工具選中被蓋住的組件組件的重命名與組件顏色修改墨刀原型工具組合、打散組件鎖定、解鎖組件墨刀原型工具顯示、隱藏交互鏈接添加/刪除參考線（紅線）墨刀原型工具一屏線隱藏一屏線修改文字外觀墨刀原型工具選中文字組件后，可以在編輯區(qū)右側(cè)的外觀設(shè)置面板中點(diǎn)為它設(shè)置字號(hào)、顏色、字體。注：目前除已提供字體外，不支持上傳自己下載的字體使用。

修改批注顏色墨刀原型工具矩形設(shè)置圓角插入圖片墨刀原型工具圖片裁切圖片拉伸下載圖片墨刀原型工具標(biāo)注模式下載圖片選中需要下載的圖片組件，點(diǎn)擊右下角的「導(dǎo)出圖片」即可保存圖片到本地。如需批量下載頁面內(nèi)圖片，可按住shift，鼠標(biāo)左鍵點(diǎn)選，多選完成后，點(diǎn)擊「導(dǎo)出圖片」即可。鏈接區(qū)域墨刀原型工具聊天氣泡墨刀原型工具輪播圖墨刀原型工具調(diào)整輪播圖順序墨刀原型工具設(shè)定滾動(dòng)橫向/縱向滾動(dòng)自動(dòng)輪播/點(diǎn)擊輪播墨刀原型工具設(shè)置指示點(diǎn)及指示點(diǎn)顏色我的組件墨刀原型工具添加圖標(biāo)墨刀原型工具下載圖標(biāo)母版墨刀原型工具新建母版編輯母版素材庫墨刀原型工具墨刀原型工具墨刀原型工具墨刀原型工具批量管理墨刀原型工具批量刪除墨刀原型工具高效搜索墨刀原型工具替換圖片墨刀原型工具企業(yè)素材墨刀原型工具在頁面下使用狀態(tài)墨刀原型工具頁面狀態(tài)設(shè)置與添加頁面狀態(tài)設(shè)置與添加墨刀原型工具動(dòng)態(tài)組件連接其它頁面墨刀原型工具添加音頻墨刀原型工具添加音頻墨刀原型工具添加地圖墨刀原型工具添加地圖/tools/poimarker?type=0&marker=coord:39.96554,116.26719;title:成都;addr:北京市海淀區(qū)復(fù)興路32號(hào)院&key=YOUR_KEY&referer=myapp其中紅色的字體部分需要換成自己的騰訊地圖創(chuàng)建的key墨刀原型工具添加視頻選擇通用代碼：<iframeframeborder="0"width="640"height="498"src="/iframe/player.html?vid=w0021e4ijb4&tiny=0&auto=0"allowfullscreen></iframe>墨刀原型工具固定頂欄/固定底部導(dǎo)航長頁面滾動(dòng)墨刀原型工具定時(shí)跳轉(zhuǎn)自動(dòng)旋轉(zhuǎn)分享項(xiàng)目墨刀原型工具分享項(xiàng)目墨刀原型工具分享鏈接給別人默認(rèn)顯示某個(gè)頁面分享鏈接打開后需要默認(rèn)顯示某個(gè)頁面可以這么操作：1、在編輯區(qū)頂欄點(diǎn)擊「分享」，復(fù)制分享鏈接2、在瀏覽器中打開分享鏈接3、切換到想要讓別人查看那個(gè)的頁面，復(fù)制該頁面在瀏覽器中顯示的鏈接（此鏈接就是頁面的分享鏈接）。手機(jī)微信掃碼打開演示墨刀原型工具下載PNG電腦端離線演示墨刀原型工具下載/安裝APK墨刀原型工具安裝到手機(jī)桌面（Android）墨刀原型工具安裝到手機(jī)桌面（iOS）墨刀原型工具顯示、隱藏手機(jī)邊框墨刀原型工具設(shè)備框消失「PRD」模式墨刀原型工具在頁面編輯區(qū)外放置產(chǎn)品迭代記錄表格、產(chǎn)品流程圖等設(shè)置允許查看「PRD」模式「PRD」模式墨刀原型工具分享查看PRD如果在分享設(shè)置中，允許查看「PRD」的模式，那么導(dǎo)出html時(shí)，可以將畫板外的PRD內(nèi)容一起導(dǎo)出的；如果導(dǎo)出png格式的文件，暫時(shí)還不支持「PRD」內(nèi)容一起導(dǎo)出。如何導(dǎo)出「PRD」模式的內(nèi)容「長頁面」模式墨刀原型工具「設(shè)備框」模式第四部分項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)1、“教學(xué)助手”-底部導(dǎo)航功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)本案例設(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)航欄切換的效果，如圖1、“教學(xué)助手”-底部導(dǎo)航功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)制作步驟1.元件基礎(chǔ)樣式設(shè)置使用元件庫中的元件，進(jìn)行底部導(dǎo)航欄的制作，如圖5-79所示。根據(jù)需要使用自己的導(dǎo)航欄圖片，如圖選中底部導(dǎo)航欄組件，在右側(cè)的“外觀”面板中，點(diǎn)擊“添加組件狀態(tài)”。如圖1、“教學(xué)助手”-底部導(dǎo)航功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)進(jìn)入組件狀態(tài)編輯頁面后，鼠標(biāo)懸浮在狀態(tài)1上，點(diǎn)擊后邊的“復(fù)制狀態(tài)”按鈕，如圖本案例中底部導(dǎo)航欄時(shí)五個(gè)按鈕的狀態(tài)切換，點(diǎn)擊復(fù)制狀態(tài)1，復(fù)制五個(gè)的狀態(tài)。然后需要修改每個(gè)狀態(tài)的名稱，方便后續(xù)對(duì)狀態(tài)的選擇，如圖1、“教學(xué)助手”-底部導(dǎo)航功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)接下來修改“學(xué)習(xí)”狀態(tài)中的，“首頁”和“學(xué)習(xí)”的圖標(biāo)樣式。如圖修改完成后的學(xué)習(xí)狀態(tài)，導(dǎo)航欄樣式。如圖1、“教學(xué)助手”-底部導(dǎo)航功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)因?yàn)槭醉搶?dǎo)航菜單選中樣式只需要在首頁狀態(tài)中進(jìn)行選中，而其他四個(gè)狀態(tài)都不選中，所以需要對(duì)其他四個(gè)狀態(tài)的首頁菜單都進(jìn)行修改，可以點(diǎn)擊首頁圖標(biāo)和文本，鼠標(biāo)“右鍵”，在下拉列表找到“添加/替換到其他狀態(tài)”，選中其他三個(gè)狀態(tài)即可，如圖按照相同的方法，修改其他三個(gè)狀態(tài)的導(dǎo)航欄樣式。最終狀態(tài)如圖1、“教學(xué)助手”-底部導(dǎo)航功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)元件交互效果制作接下來，進(jìn)行交互事件的添加，給每個(gè)狀態(tài)的導(dǎo)航欄按鈕，覆蓋一個(gè)“鏈接區(qū)域”元件，。導(dǎo)航欄菜單按鈕添加“鏈接區(qū)域”元件后的樣式，如圖點(diǎn)擊導(dǎo)航欄多態(tài)組件，鼠標(biāo)“右鍵”，在下拉列表找到“轉(zhuǎn)換為動(dòng)態(tài)面板”，命名為“底部導(dǎo)航欄copy”，如圖所示。轉(zhuǎn)換為母版后動(dòng)態(tài)組件的樣式和交互鏈接有繼承性，稍后設(shè)置連接就不需要重復(fù)設(shè)置了。1、“教學(xué)助手”-底部導(dǎo)航功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)雙擊進(jìn)入導(dǎo)航欄母版編輯頁面后，選中首頁的鏈接區(qū)域，鼠標(biāo)拖動(dòng)“閃電”按鈕，。鏈接到“首頁”頁面，同樣的后邊四個(gè)“鏈接區(qū)域”，也鏈接到相應(yīng)的頁面，進(jìn)行交互跳轉(zhuǎn)功能，狀態(tài)1鏈接完成的效果如圖所示。同樣的方法，可以進(jìn)行其他狀態(tài)的交互鏈接。把設(shè)置好的“導(dǎo)航欄”母版，放在每個(gè)頁面的下方，并且設(shè)置“運(yùn)行時(shí)固定在頁面底部”，如圖1、“教學(xué)助手”-底部導(dǎo)航功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)每個(gè)頁面設(shè)置完成后，點(diǎn)擊有上角的“運(yùn)行”按鈕，進(jìn)行預(yù)覽查看設(shè)置的交互效果，點(diǎn)擊下方的導(dǎo)航欄菜單時(shí)，會(huì)根據(jù)顯示不同的頁面而進(jìn)行導(dǎo)航欄上的高亮選擇，如圖2、“教學(xué)助手”-TAB切換功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)本案例設(shè)計(jì)制作TAB標(biāo)簽切換的效果，在講解具體操作前，先看一下TAB切換的運(yùn)行效果，運(yùn)行時(shí)可以看到，TAB標(biāo)簽會(huì)變色，TAB標(biāo)簽下的指示條也會(huì)跟著移動(dòng)，下邊內(nèi)容也跟著切換。如圖所示。案例實(shí)現(xiàn)原理就是利用墨刀工具的狀態(tài)切換功能，設(shè)置神奇移動(dòng)效果來實(shí)現(xiàn)的。2、“教學(xué)助手”-TAB切換功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)制作步驟1.元件基礎(chǔ)樣式設(shè)置首先在墨刀編輯區(qū)中，對(duì)“新聞資訊”頁面進(jìn)行搭建，如圖所示。選中“新聞資訊”頁面后，點(diǎn)擊右側(cè)元件欄中的“狀態(tài)”按鈕，如圖2、“教學(xué)助手”-TAB切換功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)打開頁面狀態(tài)設(shè)置面板后，點(diǎn)擊“新聞資訊”頁面后邊的復(fù)制按鈕，復(fù)制一個(gè)新的頁面狀態(tài)，并改名為“智慧教學(xué)”頁面，如圖添加“智慧教學(xué)”頁面后，因?yàn)檫@個(gè)頁面是復(fù)制的“新聞資訊”，所以需要把展示“智慧教學(xué)”的內(nèi)容修改一下。修改后的“智慧教學(xué)”頁面，如圖2、“教學(xué)助手”-TAB切換功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)接著修改TAB標(biāo)簽切換的樣式，在“智慧教學(xué)”頁面中把“智慧教學(xué)”文本設(shè)置為藍(lán)色選中樣式，把“新聞資訊”文本設(shè)置為灰色不選中樣式，把文本下邊的指示條，移動(dòng)到“智慧教學(xué)”文本下。如圖頁面設(shè)置完成后，分別在“新聞資訊”頁面和“智慧教學(xué)”頁面中，兩個(gè)文本上放入一個(gè)“鏈接區(qū)域”，設(shè)置尺寸覆蓋文本點(diǎn)擊的區(qū)域用來制作做交互效果。2、“教學(xué)助手”-TAB切換功能制作項(xiàng)目實(shí)施-App移動(dòng)端“教學(xué)助手”產(chǎn)品交互設(shè)計(jì)開發(fā)元件交互效果設(shè)置接下來添加交互效果，在“新聞資訊”頁面選中“智慧教學(xué)”鏈接區(qū)域，拖動(dòng)交互按鈕到，頁面狀態(tài)面板的“智慧教學(xué)”上，如圖同樣在“智慧教學(xué)”頁面中，選擇“新聞資訊”連接區(qū)域，拖動(dòng)交互按鈕到“新聞資訊”上。如圖在右側(cè)的“事件”面板中，可以看到交互事件的詳細(xì)設(shè)置。如圖