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

App移動端“教學(xué)助手”產(chǎn)品交互設(shè)計開發(fā)知識要點01App移動端“教學(xué)助手”產(chǎn)品交互設(shè)計開發(fā)項目背景分析02App移動端“教學(xué)助手”產(chǎn)品交互設(shè)計開發(fā)項目背景分析03墨刀原型工具概述04項目實施-App移動端“教學(xué)助手”產(chǎn)品交互設(shè)計開發(fā)第一部分App移動端“教學(xué)助手”產(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é)的深度融合。App移動端“教學(xué)助手”產(chǎn)品交互設(shè)計開發(fā)項目背景分析第二部分App移動端“教學(xué)助手”產(chǎn)品交互設(shè)計開發(fā)項目需求分析App移動端“教學(xué)助手”產(chǎn)品交互設(shè)計開發(fā)項目是一款教學(xué)服務(wù)管理軟件，旨在通過信息化手段，提供了學(xué)院部門管理、智慧教學(xué)、教務(wù)管理、課程及資源管理、學(xué)習(xí)管理、新聞資訊等功能。主要從目標(biāo)用戶、軟件規(guī)劃、功能需求等方面進行需求分析。1.目標(biāo)用戶適用于學(xué)校、管理層、廣大師生、培訓(xùn)平臺等。2.運行環(huán)境：安卓移動端。App移動端“教學(xué)助手”軟件規(guī)劃學(xué)習(xí)平臺：文字圖片視頻多媒體在線學(xué)習(xí)。資源平臺：統(tǒng)一標(biāo)準(zhǔn)、整合資源、共享網(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é)進行查看和管理；我的資料：我的資料會展示用戶的頭像、昵稱、性別、生日、實名認(rèn)證、手機號綁定等；App移動端“教學(xué)助手”產(chǎn)品交互設(shè)計開發(fā)項目背景分析第三部分墨刀原型工具概述墨刀工作界面示意圖，墨刀原型工具添加頁面墨刀原型工具調(diào)整頁面順序展開、折疊頁面墨刀原型工具刪除頁面刪除頁面找回墨刀原型工具設(shè)置頁面橫屏設(shè)置頁面背景顏色墨刀原型工具修改頁面名稱墨刀原型工具墨刀原型工具設(shè)置頁面高度墨刀原型工具添加組件內(nèi)置組件你可以快速拖拽使用我們?yōu)槟銉?nèi)置的基礎(chǔ)組件以及平臺組件（ios、MaterialDesign、AntDesign、WeUI...）。我的組件你可以將需要復(fù)用的組件或組合選中，鼠標(biāo)右鍵添加到「我的組件」當(dāng)中，便于之后直接拖拽使用。圖標(biāo)你可以通過搜索或分類查找的方式選用圖標(biāo)庫中的開源圖標(biāo)，并且可以自由設(shè)置圖標(biāo)的默認(rèn)顏色及尺寸。母版如果你需要在多個頁面或位置用到同一組件，且需要它們可以被批量修改，那你可以先將它設(shè)置為「母版」。比如同一個文字組件，可以在多個頁面中復(fù)用，并且可以通過修改母版達到批量修改的效果。墨刀原型工具顯示、隱藏組件墨刀原型工具我的組件管理我的組件墨刀原型工具選中被蓋住的組件組件的重命名與組件顏色修改墨刀原型工具組合、打散組件鎖定、解鎖組件墨刀原型工具顯示、隱藏交互鏈接添加/刪除參考線（紅線）墨刀原型工具一屏線隱藏一屏線修改文字外觀墨刀原型工具選中文字組件后，可以在編輯區(qū)右側(cè)的外觀設(shè)置面板中點為它設(shè)置字號、顏色、字體。注：目前除已提供字體外，不支持上傳自己下載的字體使用。

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