備課筆記-思政APP低保真原型制作-墨刀

編號(hào)23-01【移動(dòng)APP交互設(shè)計(jì)開發(fā)的制作】編號(hào)23-01學(xué)習(xí)任務(wù)三、思政APP低保真原型制作-墨刀一、課程說明與要求1.課程說明本階段課程分為三個(gè)部分，第一部分為墨刀APP原型頁面搭建，介紹墨刀工具根據(jù)實(shí)際項(xiàng)目導(dǎo)入原型圖素材搭建各個(gè)頁面；第二部分為墨刀工具狀態(tài)功能詳解，介紹墨刀組件狀態(tài)功能的詳細(xì)使用操作；第三部分為墨刀低保真功能講解，介紹實(shí)際產(chǎn)品交互效果的制作；通過對(duì)墨刀工具低保真交互效果的制作，學(xué)生可以全面、深入地掌握墨刀原型工具的制作低保真原型交互的方法。2.工具材料準(zhǔn)備說明本課的作業(yè)作品實(shí)踐需要同學(xué)們提前準(zhǔn)備一些工具和材料，教師提供軟件下載鏈接。工具材料下載鏈接備注瀏覽器每臺(tái)電腦安裝墨刀https://modao.cc/brand瀏覽器聯(lián)網(wǎng)登錄使用思政案例在線導(dǎo)入二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程為思政案例效果實(shí)際操作課程。在學(xué)習(xí)思政案例交互設(shè)計(jì)的同時(shí)，需要學(xué)生在學(xué)習(xí)過程中，深刻理解各個(gè)組件交互使用的效果，并隊(duì)實(shí)際的原型交互案例進(jìn)行操作感受。同時(shí)要不斷思考墨刀工具對(duì)實(shí)際交互設(shè)計(jì)可以實(shí)現(xiàn)的程度，這是非常重要的。針對(duì)學(xué)生目前對(duì)原型交互設(shè)計(jì)工具有了深刻的了解，也為以后實(shí)際工作使用原型工具打下基礎(chǔ)。同時(shí)通過引導(dǎo)教學(xué)、案例實(shí)踐等教學(xué)方式增強(qiáng)學(xué)生對(duì)課程知識(shí)的吸收以及后續(xù)新功能的設(shè)計(jì)能力。2.課程導(dǎo)入我們之前學(xué)習(xí)了墨刀組件素材屬性設(shè)置，以及組件交互事件使用。那么，在經(jīng)過前期知識(shí)認(rèn)知后，我們可以根據(jù)思政案例的交互設(shè)計(jì)效果自己動(dòng)手進(jìn)行相應(yīng)交互效果的制作，那么要制作一個(gè)低保真的交互效果，首先需要搭建一個(gè)逼真的頁面原型圖，才能在制作交互效果時(shí)更加類似實(shí)際的APP交互操作。本節(jié)課將通過導(dǎo)入原型素材搭建頁面，以及通過案例對(duì)交互功能進(jìn)行設(shè)計(jì)分析與制作。三、理論知識(shí)講解（一）墨刀APP原型頁面搭建在墨刀工具中選擇新建然后根據(jù)項(xiàng)目需要的設(shè)備尺寸進(jìn)行選擇，這里墨刀提供了一些市面上常見的手機(jī)屏幕尺寸可以直接使用，之后再運(yùn)行預(yù)覽時(shí)就會(huì)出現(xiàn)真機(jī)的樣式進(jìn)行預(yù)覽?！咀⒁庾远x的尺寸是沒有真機(jī)樣式的邊框的】將原型素材導(dǎo)入墨刀工具中可以直接將素材拖入到畫布區(qū)，松開鼠標(biāo)即可實(shí)現(xiàn)圖片素材導(dǎo)入，也可以將圖片上傳到素材廣場(chǎng)中，然后把一個(gè)基礎(chǔ)圖片組件拖入畫布中，然后在組件屬性中進(jìn)行替換從素材廣場(chǎng)中選擇也可實(shí)現(xiàn)圖片的創(chuàng)建。編號(hào)23-02編號(hào)23-02結(jié)合原型工具的組件，圖標(biāo)等素材將APP的基礎(chǔ)頁面搭建出來（二）墨刀工具狀態(tài)功能詳解………………【重點(diǎn)】在設(shè)計(jì)產(chǎn)品原型時(shí)，我們可能需要用到交互動(dòng)畫，狀態(tài)功能就是在墨刀里用于設(shè)計(jì)交互動(dòng)畫效果的功能，類似PPT的動(dòng)畫功能、Axure的動(dòng)態(tài)面板功能：狀態(tài)指一個(gè)組件在不同時(shí)間點(diǎn)所呈現(xiàn)的位置、大小、顏色等屬性的變化。所謂狀態(tài)，就好比一棵樹在四季也就是不同時(shí)間點(diǎn)，所呈現(xiàn)出來的形態(tài)、顏色的變化。編號(hào)23-03編號(hào)23-03狀態(tài)基本操作，新建狀態(tài)與復(fù)制狀態(tài)，點(diǎn)擊右上方的小圓圈，就可以打開狀態(tài)設(shè)置面板。打開面板后可以看到有一個(gè)狀態(tài)1，同時(shí)可以新建一個(gè)狀態(tài)2，新建的狀態(tài)是空的沒有任何組件，如果我們想要在不同的狀態(tài)中放置不同的組件那就可以選擇新建狀態(tài)。也可以選擇狀態(tài)1點(diǎn)擊復(fù)制狀態(tài)，復(fù)制出來的狀態(tài)他的內(nèi)容和狀態(tài)1是一模一樣的，如果給復(fù)制的狀態(tài)中的組件調(diào)整大小位置等屬性的修改，然后在狀態(tài)1中添加一個(gè)點(diǎn)擊交互效果，設(shè)置動(dòng)效為神奇移動(dòng)，就可以出現(xiàn)交互動(dòng)畫效果，而所謂神奇移動(dòng)就是，不同狀態(tài)間同一個(gè)組件的平滑過渡效果，狀態(tài)有很多那么就需要對(duì)每個(gè)狀態(tài)進(jìn)行重命名操作，點(diǎn)擊某個(gè)狀態(tài)然后拖動(dòng)它就可以調(diào)整他的順序。修改了某個(gè)狀態(tài)里的組件，同步修改其他狀態(tài)里的組件的樣式，選中修改后的組件，右鍵找到“添加/替換到其他狀態(tài)”。編號(hào)23-04編號(hào)23-04刪除某個(gè)狀態(tài)里的組件，對(duì)其他狀態(tài)里的組件沒有影響，如果想從所有的狀態(tài)中刪除這個(gè)組件，選中組件后右鍵選擇從所有狀態(tài)中刪除即可。頁面狀態(tài)與組件狀態(tài)區(qū)別頁面狀態(tài)：基于頁面設(shè)計(jì)，效果跟隨頁面，交互動(dòng)畫無法直接復(fù)用到其它頁面。組件狀態(tài)：基于組件設(shè)計(jì)，效果跟隨組件，交互動(dòng)畫能以復(fù)制組件的方式應(yīng)用到其它頁面。動(dòng)態(tài)組件的添加有兩種方式：一種是選中組件在右側(cè)面板中點(diǎn)擊，添加組件狀態(tài)，就可以為選中的組件添加組件狀態(tài)。另一種方式將組件右鍵添加到我的組件中，然后在我的組件中找到組件然后點(diǎn)擊編輯就可以為該組件添加狀態(tài)。如果這個(gè)多態(tài)組件需要在多個(gè)地方用到時(shí)，并且在修改需要同步修改時(shí)，可以將制作好的多態(tài)組件轉(zhuǎn)換為母版，就可以在不同頁面中復(fù)用同一個(gè)組件的狀態(tài)，并且在對(duì)母版進(jìn)行修改編輯后，其他使用到該母版的地方也會(huì)同步進(jìn)行修改。編號(hào)23-05編號(hào)23-05墨刀低保真功能講解………………【重點(diǎn)】【思政融入（采用實(shí)際思政素材，進(jìn)行效果實(shí)現(xiàn)，培養(yǎng)學(xué)生社會(huì)主義核心價(jià)值觀）】1.墨刀工具底部導(dǎo)航選擇底部導(dǎo)航欄的所有組件然后在右側(cè)的外觀面板中選擇添加組件狀態(tài)。進(jìn)入狀態(tài)編輯頁面，復(fù)制四個(gè)之前的狀態(tài)，修改每個(gè)狀態(tài)需要對(duì)應(yīng)的名稱，并把導(dǎo)航欄選中樣式進(jìn)行設(shè)置。高效率修改方法，那么可以選擇該組件右鍵后選擇添加、替換到其他狀態(tài)，可以選擇全部狀態(tài)，也可只給需要修改的狀態(tài)進(jìn)行替換。這些外觀都設(shè)置完成后，選中動(dòng)態(tài)組件右鍵，轉(zhuǎn)換成母版，轉(zhuǎn)化為母版后，動(dòng)態(tài)組件的樣式和跳轉(zhuǎn)連接會(huì)有繼承性，稍后設(shè)置交互鏈接，就不需要重復(fù)設(shè)置。設(shè)置完交互后，把母版放到頁面相應(yīng)位置即可進(jìn)行預(yù)覽查看效果。2.墨刀工具Tab切換tab切換的運(yùn)行效果，運(yùn)行時(shí)可以看到，tab標(biāo)簽會(huì)變色，tab標(biāo)簽下的指示條也會(huì)跟著移動(dòng)，下邊內(nèi)容也跟著切換，編號(hào)23-06編號(hào)23-06回到墨刀編輯區(qū)，先選中整個(gè)組件，在右側(cè)面板中的添加組件狀態(tài)，進(jìn)入組件狀態(tài)編輯界面，調(diào)整標(biāo)簽的顯示樣式以及指示條的位置，調(diào)整完之后給每個(gè)狀態(tài)的頁面添加交互效果，在狀態(tài)一中，把標(biāo)簽政策解讀鏈接到狀態(tài)2，在狀態(tài)2中把思政資訊鏈接到狀態(tài)1，設(shè)置完成后把組件調(diào)整顯示的位置，可以看運(yùn)行的效果。調(diào)整標(biāo)簽的顯示樣式以及指示條的位置，調(diào)整完之后給每個(gè)狀態(tài)的頁面添加交互效果，在狀態(tài)一中，把標(biāo)簽政策解讀鏈接到狀態(tài)2，在狀態(tài)2中把思政資訊鏈接到狀態(tài)1，設(shè)置完成后把組件調(diào)整顯示的位置，可以看運(yùn)行的效果。3.墨刀工具鍵盤彈出兩個(gè)狀態(tài)設(shè)置為一個(gè)鍵盤在顯示區(qū)域的底部之外，第二個(gè)狀態(tài)則把鍵盤放到底部以內(nèi)，設(shè)置完組件狀態(tài)后就可以給相應(yīng)的組件添加點(diǎn)擊交互效果。編號(hào)23-07編號(hào)23-07在輸入框添加交互事件，單擊時(shí)切換鍵盤組件的狀態(tài)，到顯示鍵盤的狀態(tài)，然后在狀態(tài)2中點(diǎn)擊空白上方的區(qū)域切換組件狀態(tài)達(dá)到隱藏鍵盤的效果，交互設(shè)置完成后就可以進(jìn)行運(yùn)行預(yù)覽查看點(diǎn)擊效果。4.點(diǎn)贊效果在狀態(tài)1中將愛心的動(dòng)效設(shè)置為跳動(dòng)。在狀態(tài)2中把愛心設(shè)置為紅色，并設(shè)置動(dòng)效為橡皮筋，添加完交互后即可進(jìn)行預(yù)覽。5.點(diǎn)擊彈窗效果當(dāng)點(diǎn)擊發(fā)表評(píng)論按鍵時(shí)也面出現(xiàn)一個(gè)發(fā)送成功的提示彈窗，然后等待200ms后自動(dòng)隱藏彈窗，添加完編號(hào)23-08交互后即可進(jìn)行預(yù)覽。編號(hào)23-086.其他交互效果實(shí)現(xiàn)--下拉菜單點(diǎn)擊加號(hào)出現(xiàn)下拉菜單，點(diǎn)擊其中的掃一掃跳轉(zhuǎn)頁面效果，添加完交互后即可進(jìn)行預(yù)覽。7.其他交互效果實(shí)現(xiàn)--左右滾動(dòng)當(dāng)一行無法一次全部顯示內(nèi)容時(shí)，可以通過鼠標(biāo)左右滑動(dòng)來顯示為顯示的內(nèi)容，實(shí)現(xiàn)步驟，首先先在頁面中選中超出頁面寬度的組件部分，然后在右側(cè)點(diǎn)擊添加組件狀態(tài)，這樣這個(gè)組件就變成了一個(gè)動(dòng)態(tài)組件，然后退出組件邊界頁面，把這個(gè)動(dòng)態(tài)組件放到頁面相應(yīng)位置，然后把組件的寬度調(diào)整為頁面中需要的寬度，這樣就可以運(yùn)行預(yù)覽左右滾動(dòng)的效果。編號(hào)23-09編號(hào)23-098.其他交互效果實(shí)現(xiàn)--圖片放大朋友圈圖片放大效果，為點(diǎn)擊朋友圈的小圖，然后把圖片放大，點(diǎn)擊放大的圖片回到朋友圈的小圖效果。操作實(shí)現(xiàn)，首先在頁面中放置一個(gè)黑色的矩形作為放大圖片的背景，然后給頁面添加一個(gè)狀態(tài)，即一個(gè)是朋友圈的小圖，一個(gè)是黑色矩形背景的大圖.狀態(tài)設(shè)置完成后，需要給兩個(gè)狀態(tài)添加交互鏈接，在小圖模式下，給需要放大的小圖添加交互效果過，跳轉(zhuǎn)頁面狀態(tài)到放大狀態(tài)，在放大狀態(tài)里給大圖添加交互，跳轉(zhuǎn)頁面狀態(tài)到默認(rèn)狀態(tài)即可實(shí)現(xiàn)圖片放大預(yù)覽的效果。設(shè)置完成點(diǎn)擊運(yùn)行預(yù)覽。四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：結(jié)合墨刀狀態(tài)功能使用方式，總結(jié)不同狀態(tài)使用效果。任務(wù)2：搜集墨刀相關(guān)優(yōu)秀案例，并使用墨刀進(jìn)行交互效果制作。（二）實(shí)戰(zhàn)項(xiàng)目案例運(yùn)用墨刀原型設(shè)計(jì)工具設(shè)計(jì)一個(gè)“微信掃一掃”交互效果……【難點(diǎn)】教師重點(diǎn)指導(dǎo)：墨刀組件素材使用、墨刀狀態(tài)功能合理運(yùn)用、墨刀交互事件應(yīng)用。【學(xué)生初次進(jìn)行設(shè)計(jì)實(shí)踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生墨刀原型交互效果設(shè)計(jì)制作，引導(dǎo)學(xué)生合理利用墨刀工具高效制作原型】五、課堂總結(jié)今天，我們主要結(jié)合墨刀進(jìn)行界面搭建以及狀態(tài)功能詳細(xì)介紹等方面進(jìn)行了講解，也針對(duì)相關(guān)具體交互需求進(jìn)行效果制作練習(xí)，想必同學(xué)們通過練習(xí)對(duì)墨刀組件以及交互事件的使用有了深入了解。希望同學(xué)們課后繼續(xù)搜集其他APP產(chǎn)品的交互功能，用所學(xué)到的知識(shí)，分析其中交互效果實(shí)現(xiàn)的方式，并有能力在墨刀工具進(jìn)行設(shè)計(jì)制作。提升對(duì)墨刀使用能力。六、課后思考前面我們講到了原型圖素材在墨刀進(jìn)行頁面搭建，狀態(tài)功