備課筆記-墨刀原型工具-基本操作流程

編號22-01【移動APP交互設(shè)計開發(fā)的制作】編號22-01學(xué)習(xí)任務(wù)二、墨刀原型工具——基本操作流程.一、課程說明與要求1.課程說明本階段課程分為五個部分，第一部分為墨刀原型工具概述，介紹墨刀工具的工作界面；第二部分為工具基礎(chǔ)操作，介紹墨刀組件樣式屬性的操作；第三部分為墨刀組件素材，演示了墨刀常用組件功能使用；第四部分為交互效果，介紹了墨刀使用交互的效果；第五部分為演示分享與項(xiàng)目管理，介紹了墨刀設(shè)計完成時演示與分享的操作；通過對墨刀工具基礎(chǔ)功能的講解，學(xué)生可以全面、深入地理解墨刀原型工具的制作原型交互的方法。2.工具材料準(zhǔn)備說明本課的作業(yè)作品實(shí)踐需要同學(xué)們提前準(zhǔn)備一些工具和材料，教師提供軟件下載鏈接。工具材料下載鏈接備注瀏覽器每臺電腦安裝墨刀https://modao.cc/brand瀏覽器聯(lián)網(wǎng)登錄使用思政案例在線導(dǎo)入二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程為軟件實(shí)際操作課程。在學(xué)習(xí)原型設(shè)計工具的同時，需要學(xué)生在學(xué)習(xí)過程中，熟練掌握墨刀組件使用的特性，結(jié)合實(shí)際的原型交互案例進(jìn)行操作感受。要不斷思考組件與實(shí)際交互效果實(shí)現(xiàn)的有機(jī)結(jié)合，這是非常重要的。針對學(xué)生目前對原型交互設(shè)計領(lǐng)域有了初步認(rèn)識，也為學(xué)習(xí)墨刀原型軟件打下了良好基礎(chǔ)。同時通過引導(dǎo)教學(xué)、案例實(shí)踐等教學(xué)方式增強(qiáng)學(xué)生對課程知識的吸收。2.課程導(dǎo)入我們之前學(xué)習(xí)了墨刀在原型交互設(shè)計的優(yōu)勢，以及如何在線訪問與編輯原型項(xiàng)目。那么，在經(jīng)過前期知識認(rèn)知后，我們可以根據(jù)將來實(shí)際項(xiàng)目的需要進(jìn)行工具選擇，相比之下，在交互精度要求不高的情況下，墨刀工具將是最好的選擇，而墨刀實(shí)現(xiàn)原型提交，就需要對墨刀的組件素材，交互效果等操作來進(jìn)行深入了解，才能在原型制作時快速使用符合項(xiàng)目需要的交互方式。本節(jié)課將全面展開對墨刀在交互設(shè)計中的工具基礎(chǔ)操作，組件素材，交互效果添加的深入剖析與講解。三、理論知識講解（一）墨刀原型工具概述1.墨刀首頁介紹墨刀首頁左側(cè)有“新建”、“動態(tài)”、“項(xiàng)目”和“素材廣場”四個菜單。編號22-02編號22-02“新建”菜單，點(diǎn)擊后可以新建原型。選擇不同的模板和設(shè)備類型，填寫應(yīng)用名稱之后即可完成應(yīng)用的創(chuàng)建。然后可以隨時編輯應(yīng)用或者與他人共同編輯和分享應(yīng)用?！皠討B(tài)”菜單，點(diǎn)擊后可以查看最近使用墨刀的修改。“項(xiàng)目”菜單，點(diǎn)擊后可以查看該賬戶下的所有項(xiàng)目。在項(xiàng)目右邊的更多按鈕[…]?？梢詫?xiàng)目編輯、預(yù)覽、設(shè)為星標(biāo)、刪除、復(fù)制副本、以及重命名等操作?！八夭膹V場”菜單，點(diǎn)擊可以查看設(shè)計好的原型圖和圖標(biāo)等素材，進(jìn)行導(dǎo)入使用。2.頁面欄頁面欄：可以完成有關(guān)頁面的所有操作，如新建頁面、刪除頁面和查找頁面等。添加頁面在編輯區(qū)左側(cè)的頁面列表區(qū)域，你可以點(diǎn)擊頂部的「新建頁面」為原型添加新頁面?？梢孕薷捻撁婷Q，創(chuàng)建子級頁面等等方便管理頁面。編號22-03編號22-03調(diào)整頁面順序鼠標(biāo)懸浮在頁面上直接往上或往下拖拽即可調(diào)整頁面順序。注：IE瀏覽器不支持頁面拖動，建議使用谷歌瀏覽器/墨刀客戶端展開、折疊頁面選中一個多級頁面的父頁面，點(diǎn)擊頁面左上角的小三角形按鈕即可展開、折疊頁面。刪除頁面選中具體頁面，點(diǎn)擊「更多」圖標(biāo)，即可刪除頁面。刪除頁面找回誤刪或刪除的頁面可以在頁面列表左下角的頁面回收站中找回。注：頁面刪除14天后將會被系統(tǒng)自動清空，如誤刪頁面請你及時在頁面回收站中找回。設(shè)置頁面橫屏選中畫布時，你可以在右側(cè)的外觀設(shè)置面板中設(shè)置頁面畫布為橫屏或者豎屏。需要注意的是，只有手機(jī)項(xiàng)目才可以設(shè)置橫豎屏，網(wǎng)頁尺寸項(xiàng)目默認(rèn)橫屏，無豎屏選項(xiàng)。設(shè)置頁面背景顏色選中整個頁面畫布，即可在右側(cè)的外觀設(shè)置面板中設(shè)置畫布背景顏色。編號22-04編號22-04修改頁面名稱在頁面列表雙擊某個頁面的頁面名稱，即可修改它的頁面名稱?！敬穗A段主要讓同學(xué)了解墨刀原型工具的首頁和頁面欄的操作】（二）墨刀工具基礎(chǔ)操作組件區(qū)域在編輯區(qū)右側(cè)的組件區(qū)域，有「內(nèi)置組件」、「我的組件」、「圖標(biāo)」及「母版」素材，你可以點(diǎn)擊打開對應(yīng)的素材面板，添加你需要的組件。內(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ù)用，并且可以通過修改母版達(dá)到批量修改的效果。顯示、隱藏組件選中組件，可以在編輯區(qū)右側(cè)的外觀設(shè)置面板中點(diǎn)擊「小眼睛」圖標(biāo)設(shè)置顯示或隱藏組件。注：隱藏組件后需要在左側(cè)元素欄選中元素后才可以顯示組件。你也可以使用快捷方式操作：顯示與隱藏組件快捷鍵Ctrl+Shift+H（hide）。我的組件是你手動創(chuàng)建的組件素材庫，添加到此區(qū)域的組件將會默認(rèn)添加進(jìn)個人帳號中，只需登錄即可隨時使用這些素材。我的組件中包含靜態(tài)組件以及動態(tài)組件。動態(tài)組件即包含狀態(tài)動畫的組件，可用來制作下拉菜單等動態(tài)組件。創(chuàng)建“我的組件”有2種方式：1選中組件，右鍵彈出面板，選擇“創(chuàng)建我的組件”。2可以選中元素后，在我的組件菜單欄中選擇“新建組件”，給組件設(shè)置名稱即可。編號22-05編號22-05「編輯」組件，添加狀態(tài)，即可為組件添加動畫，轉(zhuǎn)為動態(tài)。管理我的組件點(diǎn)擊管理按鈕，即可對組件進(jìn)行批量刪除、轉(zhuǎn)移文件夾、置入畫板等操作。選中被蓋住的組件如果組件被蓋住了，可以在要選擇的組件位置點(diǎn)擊鼠標(biāo)右鍵，然后在彈出的面板中點(diǎn)擊「選擇圖層」，選擇組件。同時，你可以在編輯區(qū)左側(cè)的元素列表中直接選中組件。重命名組件選中組件后，可以在右側(cè)的外觀設(shè)置面板中雙擊組件名稱修改組件命名。修改組件顏色選中組件后，可以在頁面編輯區(qū)右側(cè)的外觀設(shè)置面板中修改組件顏色。組合打散組件多選組件后，可以在編輯區(qū)的頂部工具欄中對它們進(jìn)行打散和組合。鎖定、解鎖組件選中組件后，可以在頁面編輯區(qū)頂部工具欄或者右側(cè)的外觀設(shè)置面板中點(diǎn)擊「小鎖」圖標(biāo)來鎖定或解鎖組件。使用、隱藏一屏線（藍(lán)色虛線）一屏線的作用頁面編輯區(qū)的藍(lán)色虛線可以理解為「一屏線」，這條線能讓你在設(shè)計頁面時了解當(dāng)前頁面在處在第一屏（不滾動）時能呈現(xiàn)那些頁面內(nèi)容。隱藏一屏線一屏線可以和網(wǎng)格一起隱藏。不選中頁面畫布中的任何組件，在編輯區(qū)右側(cè)的外觀設(shè)置面板中取消網(wǎng)格勾選即可?！颈倦A段主要讓學(xué)生了解原型工具如何更好的選擇使用，從而提高工作】（三）組件素材……………………【重點(diǎn)】編號22-06編號22-06墨刀原型工具修改文字外觀選中文字組件后，可以在編輯區(qū)右側(cè)的外觀設(shè)置面板中點(diǎn)為它設(shè)置字號、顏色、字體。注：目前除已提供字體外，不支持上傳自己下載的字體使用。修改批注顏色選中批注組件后，在編輯區(qū)右側(cè)的外觀設(shè)置面板中可以修改它的顏色。矩形設(shè)置圓角選中矩形后，可以在編輯區(qū)右側(cè)的外觀設(shè)置面板中為它設(shè)置圓角（四個圓角可以單獨(dú)設(shè)置）。從內(nèi)置組件中拖入一個圖片組件，即可在右側(cè)的外觀設(shè)置面板中為圖片組件插入圖片。本地/素材庫上傳圖片或者將本地圖片直接拖入頁面注：目前插入圖片支持gif圖，gif圖上傳大小上限為2M。圖片裁切雙擊圖片即可矩形裁切，也可點(diǎn)擊右側(cè)圓形裁切拉伸圖片：上傳圖片后雙擊裁切圖片，裁切后再進(jìn)行拉伸圖片即可。墨刀原型內(nèi)圖片支持下載，下載格式為png，目前支持三倍倍數(shù)導(dǎo)出。具體操作如下：頁面編輯區(qū)下載圖片：選中需要下載的圖片組件，點(diǎn)擊右下角的「導(dǎo)出圖片」即可保存圖片到本地。如需批量下載頁面內(nèi)圖片，可按住shift，鼠標(biāo)左鍵點(diǎn)選，多選完成后，點(diǎn)擊「導(dǎo)出圖片」即可。標(biāo)注模式下載圖片：在項(xiàng)目運(yùn)行預(yù)覽區(qū)或通過分享鏈接查看，點(diǎn)擊頂欄「標(biāo)注」模式，選中需要下載的圖片，點(diǎn)擊「導(dǎo)出圖片」即可保存圖片到本地。標(biāo)注模式下不支持批量下載圖片。鏈接區(qū)域（熱區(qū)）鏈接區(qū)域（熱區(qū)）可以為頁面畫布中的某個特定區(qū)域添加跳轉(zhuǎn)（比如一張圖片的局部），鏈接區(qū)域組編號22-07件在基礎(chǔ)組件當(dāng)中，添加到頁面畫布后可以調(diào)整區(qū)域大小。編號22-07聊天氣泡聊天氣泡組件在內(nèi)置組件當(dāng)中。添加到頁面畫布后可以在外觀設(shè)置面板中改變氣泡指向的方向。設(shè)置輪播圖組件：滑動方向、滑動順序、自動輪播和點(diǎn)擊輪播、設(shè)置指示點(diǎn)樣式。添加圖標(biāo)圖標(biāo)在編輯區(qū)右側(cè)的組件素材區(qū)域，打開圖標(biāo)面板后，你可以通過搜索或分類查找的方式選用圖標(biāo)庫中的開源圖標(biāo)。你可以在圖標(biāo)面板底部設(shè)置圖標(biāo)的默認(rèn)顏色及尺寸。下載圖標(biāo)墨刀中提供內(nèi)置的圖標(biāo)下載功能，下載格式為svg/png，目前支持三倍倍數(shù)導(dǎo)出，具體操作方式如下：使用母版步驟：選中組件——右鍵“轉(zhuǎn)換為母版”——命名。在該項(xiàng)目創(chuàng)建的所有母版都會存放在“母版庫“中。編輯母版鼠標(biāo)懸浮在母版縮略圖上方，點(diǎn)擊“…”—“編輯”，即可進(jìn)入修改母版。修改完成后，它在該項(xiàng)目里所有的應(yīng)用實(shí)例都會同步更新修改。我的素材組件你可以在這里新建、復(fù)制、移動、刪除組件，新建和刪除組件文件夾，也可以將組件置入畫板。支持按住Shift或command/ctrl鍵多選。圖片有一個好的圖片庫相當(dāng)于一個井然有序的圖書館，可以快捷高效的取用所需素材。要先創(chuàng)建文件夾，再添加圖片，甚至是對圖片添加標(biāo)簽，對每張圖片都分門別類。保存自定義圖片，以重復(fù)使用在墨刀素材模式下，你可以將任何圖片創(chuàng)建為“我的圖片”，收錄到“我的”-“我的圖片”中，之后便直接從“我的”中拿出來使用即可。添加文件夾、添加標(biāo)簽創(chuàng)建文件夾后，你可以直接拖拽圖片到空白區(qū)域，或者點(diǎn)擊「添加圖片」，就可以上傳圖片。目前支持上傳PNG/JPEG/JPG/GIF格式。選中圖片，可以接著添加標(biāo)簽、刪除、下載或者移動到其他文件夾，也可以將其置入到畫板。在“圖片標(biāo)簽”，即可通過選擇“標(biāo)簽”快速查看相關(guān)圖片。點(diǎn)擊“管理”，即可刪除某個標(biāo)簽?？梢园凑彰Q、大小、創(chuàng)建時間，以列表或橫排形式排序。更快的找到所需。批量刪除按shift或command/ctrl可以多選組件，也可以直接點(diǎn)擊全選，執(zhí)行刪除，可以直接對文件夾進(jìn)行刪除。（四）交互效果………………【重點(diǎn)】交互效果編號22-08編號22-08頁面狀態(tài)的作用頁面狀態(tài)可以用來實(shí)現(xiàn)頁面內(nèi)整體的交互動畫。舉個例子：使用頁面狀態(tài)切換，我們可以讓頁面中一個圖片（組件）的位置、大小、顏色發(fā)生改變。頁面狀態(tài)切換和頁面切換的區(qū)別，上圖的狀態(tài)切換會有組件平滑移動的效果，我們可以稱之為神奇移動。頁面切換則沒有這種平滑移動的效果，會是生硬的切換，頁面狀態(tài)設(shè)置與添加設(shè)置面板的右邊有幾個按鈕，點(diǎn)擊第一個圓形按鈕后就可以設(shè)置頁面狀態(tài)了。點(diǎn)擊狀態(tài)面板中的「新建」或「復(fù)制」按鈕即可新建狀態(tài)。默認(rèn)顯示狀態(tài)當(dāng)我們打開一個頁面時，頁面最開始呈現(xiàn)的樣子（狀態(tài)），就是頁面的默認(rèn)顯示狀態(tài)，可以通過鼠標(biāo)拖拽調(diào)整頁面狀態(tài)順序。默認(rèn)狀態(tài)就像動畫的第一幀（第一個畫面）。我們可以給默認(rèn)顯示頁面狀態(tài)的組件（元素）添加鏈接，讓默認(rèn)狀態(tài)跳轉(zhuǎn)到其它狀態(tài)，產(chǎn)生動畫效果。動態(tài)組件連接其它頁面動態(tài)組件要連接其它頁面，需要在動態(tài)組件編輯區(qū)內(nèi)，為相應(yīng)狀態(tài)內(nèi)的元素添加事件跳轉(zhuǎn)至其他頁面。其它方式使用狀態(tài)動態(tài)組件的作用編號22-09編號22-09動態(tài)組件和頁面狀態(tài)一樣可以用來實(shí)現(xiàn)頁面內(nèi)的交互動畫。可以讓頁面中一個組件的位置、大小、顏色發(fā)生改變，也可以設(shè)置顯示隱藏。動態(tài)組件和頁面狀態(tài)的動畫效果實(shí)際上都是用狀態(tài)實(shí)現(xiàn)的。兩者的區(qū)別在于：1）頁面狀態(tài)做的動畫效果會影響整個頁面內(nèi)的組件，動態(tài)組件做的動畫效果只會影響動態(tài)組件內(nèi)部的組件。2）頁面狀態(tài)基于項(xiàng)目頁面完成，不太方便保存復(fù)用，動態(tài)組件與項(xiàng)目頁面是分離的，可以保存到組件庫中作為組件素材復(fù)用。由于以上兩點(diǎn)差異，在做交互動效的時候優(yōu)先選擇用動態(tài)組件來實(shí)現(xiàn)。網(wǎng)頁組件：添加音頻、添加地圖、添加視頻。全局事件又叫頁面全局事件，它是基于整個頁面畫板的交互事件，使用它可以實(shí)現(xiàn)類似滑動切換頁面，并使頁面切換之類的效果，因?yàn)樗谡麄€頁面畫板，因此使用時不需要選中某個組件。固定頂欄/固定底部導(dǎo)航選中畫布后，畫布左側(cè)有上下兩個固定滑塊。如需固定頂欄和底部導(dǎo)航，可以拖拽固定滑塊，覆蓋頂欄和底部導(dǎo)航的區(qū)域。設(shè)置好后，如果是長頁面，運(yùn)行時會有固定頂欄和底部導(dǎo)航的效果。長頁面滾動選中頁面畫布后，鼠標(biāo)懸浮在頁面畫布底部，按住向下拖拽即可調(diào)整頁面高度（拉長頁面）。長頁面在運(yùn)行時會以滾動的形式展示。定時跳轉(zhuǎn)選中畫布后，在鏈接設(shè)置面板中可以為頁面或狀態(tài)設(shè)置定時跳轉(zhuǎn)的效果。自動旋轉(zhuǎn)選中組件后，在編輯區(qū)右側(cè)外觀設(shè)置面板中的「動效」中可以為組件設(shè)置自動旋轉(zhuǎn)。（五）項(xiàng)目分享和項(xiàng)目管理………………【重點(diǎn)】1.演示分享項(xiàng)目做好后如需分享給其他人查看，只需復(fù)制分享鏈接發(fā)給對方。具體操作方式有兩種：1.在項(xiàng)目編輯區(qū)點(diǎn)擊「分享」項(xiàng)目，復(fù)制分享面板中的分享鏈接發(fā)給對方即可。2.在項(xiàng)目管理頁選中項(xiàng)目，點(diǎn)擊「分享」，復(fù)制分享彈窗中的分享鏈接發(fā)給對方即可。下載有下載PNG、PDF、apk安裝包、以及HTML文件等真機(jī)模式：運(yùn)行后顯示/隱藏手機(jī)邊框編號22-10編號22-10「PRD」模式簡單來說：在編輯區(qū)，放置在設(shè)備框（畫板）外面的元素也可以在運(yùn)行預(yù)覽時顯示出來?！搁L頁面」模式在項(xiàng)目中，會遇到制作的頁面高度超過「一屏」的情況。同時還需要理解在墨刀中，如果頁面長度超過「一屏」，那么在運(yùn)行的時候是可以上下滾動實(shí)現(xiàn)全頁面的預(yù)覽，但是上下滾動不利于了解頁面全局分布。2.項(xiàng)目管理復(fù)制項(xiàng)目/創(chuàng)建項(xiàng)目副本選中項(xiàng)目后點(diǎn)擊「更多」-「創(chuàng)建副本」即可復(fù)制項(xiàng)目。找回刪除項(xiàng)目刪除的項(xiàng)目可以點(diǎn)擊頁面左側(cè)的「回收站」圖標(biāo)找回。批量移動項(xiàng)目在文件夾中選擇項(xiàng)目后，點(diǎn)擊左上角的小圓圈（多選項(xiàng)目按鈕）即可多選項(xiàng)目，多選完成后點(diǎn)擊右上角的「移動」按鈕即可批量移動項(xiàng)目。合并項(xiàng)目把幾個項(xiàng)目的頁面合并成一個，可以通過「移動頁面」功能來實(shí)現(xiàn)：在項(xiàng)目A中選擇所需頁面，點(diǎn)擊頁面右側(cè)的「更多」-「移動到」按鈕，在彈出的面板中選擇需要移入的空間-文件夾-項(xiàng)目B，就可以將項(xiàng)目A的頁面轉(zhuǎn)移（合并）到項(xiàng)目B中了。四、實(shí)踐技能訓(xùn)練（一）布置