編號(hào)21-01【移動(dòng)APP交互設(shè)計(jì)開(kāi)發(fā)的制作】編號(hào)21-01學(xué)習(xí)任務(wù)一、App低保真工具-墨刀一、課程說(shuō)明與要求1.課程說(shuō)明墨刀是一款在線(xiàn)原型設(shè)計(jì)與協(xié)同工具，借助墨刀，產(chǎn)品經(jīng)理、設(shè)計(jì)師、開(kāi)發(fā)、銷(xiāo)售、運(yùn)營(yíng)及創(chuàng)業(yè)者等用戶(hù)群體，能夠搭建為產(chǎn)品原型，演示項(xiàng)目效果。墨刀同時(shí)也是協(xié)作平臺(tái)，項(xiàng)目成員可以協(xié)作編輯、審閱，不管是產(chǎn)品想法展示，還是向客戶(hù)收集產(chǎn)品反饋，向投資人進(jìn)行Demo展示，或是在團(tuán)隊(duì)內(nèi)部協(xié)作溝通、項(xiàng)目管理。本階段課程分為三個(gè)部分，第一部分為墨刀的工作范疇，介紹墨刀工具制作原型的優(yōu)勢(shì)；第二部分為App原型設(shè)計(jì)策略，介紹產(chǎn)品快速實(shí)現(xiàn)原型設(shè)計(jì)三步走——戰(zhàn)略；第三部分為墨刀工具的在線(xiàn)訪(fǎng)問(wèn)，演示了如何在瀏覽器中訪(fǎng)問(wèn)墨刀并編輯原型項(xiàng)目；通過(guò)全方面對(duì)比分析墨刀工具制作原型的優(yōu)勢(shì)以及訪(fǎng)問(wèn)墨刀，學(xué)生可以全面地理解墨刀原型工具的優(yōu)勢(shì)，為以后使用墨刀制作原型提供條件。2.工具材料準(zhǔn)備說(shuō)明本課的作業(yè)作品實(shí)踐需要同學(xué)們提前準(zhǔn)備一些工具和材料，教師提供軟件下載鏈接。工具材料下載鏈接備注瀏覽器每臺(tái)電腦安裝墨刀https://modao.cc/brand瀏覽器聯(lián)網(wǎng)登錄使用思政案例在線(xiàn)導(dǎo)入二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程為軟件認(rèn)知課程，墨刀原型工具與其他原型工具的在使用時(shí)側(cè)重點(diǎn)還是有區(qū)別的，偏重于抽快速、簡(jiǎn)潔設(shè)計(jì)制作交互效果。需要學(xué)生在學(xué)習(xí)過(guò)程中，結(jié)合實(shí)際的APP交互原型選擇使用墨刀工具制作原型。在學(xué)習(xí)原型設(shè)計(jì)工具的同時(shí)，要不斷思考如何選擇符合要求的工具進(jìn)行原型交互制作，思考如何快速實(shí)現(xiàn)交互原型效果，這是非常重要的。2.課程導(dǎo)入我們之前學(xué)習(xí)了APP交互設(shè)計(jì)流程開(kāi)發(fā)前期的相關(guān)知識(shí)。那么，在經(jīng)過(guò)前期思考規(guī)劃、梳理交互流程后，我們需要根據(jù)具體的項(xiàng)目要求來(lái)選擇原型設(shè)計(jì)工具進(jìn)行使用，在交互效果要求不高的項(xiàng)目中使用墨刀是最合適的選擇，從而體現(xiàn)墨刀工具相對(duì)于其他交互工具的優(yōu)勢(shì)，提高工作效率。本節(jié)課將全面展開(kāi)對(duì)墨刀在交互設(shè)計(jì)工具中的優(yōu)勢(shì)進(jìn)行剖析講述。三、理論知識(shí)講解（一）墨刀的工作范疇1.墨刀特點(diǎn)下面對(duì)墨刀功能介紹：1.操作簡(jiǎn)單簡(jiǎn)單拖拽和設(shè)置，即可將想法、創(chuàng)意變成產(chǎn)品原型。2.演示真機(jī)設(shè)備邊框、沉浸感全屏、離線(xiàn)模式等多種演示模式，項(xiàng)目演示效果逼真。3.團(tuán)隊(duì)協(xié)作編號(hào)21-02編號(hào)21-02與同事共同編輯原型，效率提升；一鍵分享發(fā)送給別人，分享便捷；還可在原型上打點(diǎn)、評(píng)論，收集反饋意見(jiàn)，高效協(xié)作。4.交互簡(jiǎn)單簡(jiǎn)單拖拽就可實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，還可通過(guò)交互面板實(shí)現(xiàn)復(fù)雜交互，多種手勢(shì)和轉(zhuǎn)場(chǎng)效果，可以實(shí)現(xiàn)一個(gè)媲美真實(shí)產(chǎn)品體驗(yàn)的原型。5.自動(dòng)標(biāo)注及切圖將Sketch設(shè)計(jì)稿墨刀插件上傳至墨刀，將項(xiàng)目鏈接分享給開(kāi)發(fā)人員，無(wú)需登錄可直接獲取到每個(gè)元素寬高、間距、字體顏色等信息，支持一鍵下載多倍率切圖。6.素材庫(kù)內(nèi)置豐富的行業(yè)素材庫(kù)，也可創(chuàng)建自己的素材庫(kù)、共享團(tuán)隊(duì)組件庫(kù)，高頻素材直接復(fù)用。7.免費(fèi)版支持產(chǎn)品設(shè)計(jì)、工作流、原型預(yù)覽、Sketch標(biāo)注插件、移動(dòng)端演示，可免費(fèi)創(chuàng)建3個(gè)項(xiàng)目，每個(gè)項(xiàng)目20個(gè)頁(yè)面，以及總共50MB素材容量。8.個(gè)人專(zhuān)業(yè)版享受免費(fèi)版所有功能，可以創(chuàng)建不限數(shù)量的項(xiàng)目及頁(yè)面，支持文件導(dǎo)出。9.企業(yè)版享受專(zhuān)業(yè)版所有功能，支持添加企業(yè)成員，進(jìn)行成員協(xié)作及管理，共享企業(yè)自定義素材庫(kù)。方便進(jìn)行成員管理、項(xiàng)目管理及數(shù)據(jù)管理。2.墨刀適用范圍適用平臺(tái)瀏覽器注冊(cè)使用，Windows、Mac桌面客戶(hù)端，同時(shí)支持iOS、Android端預(yù)覽；適用企業(yè)墨刀為企業(yè)級(jí)用戶(hù)提供權(quán)限控制、項(xiàng)目管理及基礎(chǔ)項(xiàng)目數(shù)據(jù)統(tǒng)計(jì)等功能。編號(hào)21-03編號(hào)21-033.墨刀能干什么……………………【重點(diǎn)】墨刀能干什么原型設(shè)計(jì)1.支持HTML、PNG、APK、IPA多格式離線(xiàn)文件下載，還可以下載多倍率圖片，滿(mǎn)足不同分辨率需求；2.支持創(chuàng)建iPhone/iPad、Android、平板、watches、PC各平臺(tái)設(shè)備的原型，也可以自定義設(shè)備尺寸；3.提供iOS、Android等平臺(tái)的常用組件及大量精美圖標(biāo)，同時(shí)還可以自定義自己的個(gè)性化組件，方便項(xiàng)目之間自由切換、使用；4.通過(guò)拖拽創(chuàng)建鏈接及交互動(dòng)效，提供豐富的頁(yè)面切換方式、交互手勢(shì)及動(dòng)畫(huà)，簡(jiǎn)單操作即可創(chuàng)作；5.通過(guò)二維碼、鏈接分享，可以在網(wǎng)頁(yè)、移動(dòng)端、墨刀預(yù)覽助手app中快速查看產(chǎn)品demo的演示效果。開(kāi)發(fā)標(biāo)注1.使用Sketch插件上傳設(shè)計(jì)文件，墨刀標(biāo)注會(huì)自動(dòng)生成設(shè)計(jì)標(biāo)注信息及全平臺(tái)樣式代碼，可以精準(zhǔn)還原標(biāo)注信息，并提供每個(gè)元素的CSS、Swift、Android樣式代碼；2.提供了業(yè)內(nèi)完善的顏色解決方案。除了展示常規(guī)設(shè)計(jì)文件的全局顏色，還會(huì)自動(dòng)生成當(dāng)前頁(yè)的頁(yè)面顏色，還可以手動(dòng)吸取顏色，隨心定制你的個(gè)人色板；3.只需設(shè)計(jì)師導(dǎo)入Sketch切圖，即可自動(dòng)生成多倍率切圖文件。可以一鍵下載全部切圖，也可以根據(jù)實(shí)際需要，下載獨(dú)立的元素切圖；4.除了支持元素在各平臺(tái)之間的顏色、分辨率換算，還支持手動(dòng)設(shè)置HTML的字體大小單位（rem/em）。4.墨刀相比Axure的優(yōu)勢(shì)墨刀相比Axure的優(yōu)勢(shì)（1）組件墨刀的組件十分豐富，有很多成熟的組件，比如鍵盤(pán)、菜單、開(kāi)關(guān)、導(dǎo)航、通知等等。而Axure的自帶的組件都是比較基礎(chǔ)的，如果需要復(fù)雜的組件需要去下載。（2）交互墨刀的交互是非常方便的，只需要點(diǎn)擊組件左側(cè)的圖標(biāo)類(lèi)似閃電一樣的控件，將其拖拽至想要跳轉(zhuǎn)的頁(yè)面就可以，并且在拖拽完成后，會(huì)在右端自動(dòng)跳轉(zhuǎn)出事件功能，可以簡(jiǎn)便的設(shè)置交互的條件和效果。而Axure要做交互，則需要設(shè)置各種條件，或者輸入各種用例，通過(guò)條件，動(dòng)態(tài)面板狀態(tài)，隱藏，切換等功能才能形成交互效果。總結(jié)編號(hào)21-04編號(hào)21-04墨刀由于其組件簡(jiǎn)便的使用方法，在用戶(hù)需求復(fù)雜度不高的時(shí)候能更加完整直觀(guān)地展示原型效果，而且相比Axure，其簡(jiǎn)約的界面設(shè)計(jì)，以及豐富的功能使得墨刀的上手度不難，對(duì)于新手來(lái)說(shuō)，即時(shí)沒(méi)有豐富的經(jīng)驗(yàn)也可以輕松駕馭軟件，完成簡(jiǎn)單的原型設(shè)計(jì)。5.低保真到高保真低保真（lo-fi）原型設(shè)計(jì)是將高級(jí)設(shè)計(jì)概念轉(zhuǎn)換為有形的、可測(cè)試物的簡(jiǎn)便快捷方法。它首要的也是最重要的作用是——檢查和測(cè)試產(chǎn)品功能，而不是產(chǎn)品的視覺(jué)外觀(guān)。以下是低保真原型的基本特征：視覺(jué)設(shè)計(jì)：僅呈現(xiàn)最終產(chǎn)品的一部分視覺(jué)屬性（例如元素的形狀，基本視覺(jué)層次等）。內(nèi)容：僅包含內(nèi)容的關(guān)鍵元素。交互性：原型可以由真人模擬。在測(cè)試期間，熟悉頁(yè)面流程的設(shè)計(jì)師就相當(dāng)于一個(gè)“計(jì)算機(jī)”，實(shí)時(shí)手動(dòng)呈現(xiàn)設(shè)計(jì)頁(yè)面。此外，也可以給線(xiàn)框圖制作交互效果，這種稱(chēng)為“交互線(xiàn)框圖”。6.墨刀的低保真設(shè)計(jì)可點(diǎn)擊的線(xiàn)框圖：線(xiàn)框圖是產(chǎn)品頁(yè)面的可視化表示形式，設(shè)計(jì)人員可以使用它來(lái)排列頁(yè)面元素。線(xiàn)框可以作為低保真原型的基礎(chǔ)。可點(diǎn)擊的線(xiàn)框是最簡(jiǎn)單的交互式原型-即連接起靜態(tài)線(xiàn)框頁(yè)面：與紙質(zhì)原型一樣，可點(diǎn)擊線(xiàn)框圖通常看起來(lái)不像成品，但它們確實(shí)比紙質(zhì)原型具有一個(gè)顯著的優(yōu)勢(shì)-它們?cè)跍y(cè)試期間不需要單獨(dú)的人員跟進(jìn)編號(hào)21-05編號(hào)21-05【此階段主要讓同學(xué)了解墨刀原型工具的優(yōu)勢(shì)以及工作范疇】（二）App原型設(shè)計(jì)策略1.選擇原型設(shè)計(jì)工具……【思政融入（用內(nèi)外因辯證關(guān)系，培養(yǎng)學(xué)生分析客觀(guān)事實(shí)方法）】「外因」三【分析】分析并掌握各個(gè)原型設(shè)計(jì)工具特性；分析工具在行業(yè)中的口碑好評(píng)度；篩選符合設(shè)計(jì)需求的工具；「內(nèi)需」三【權(quán)衡】工具是否方便后續(xù)優(yōu)化及產(chǎn)品版本迭代；衡量是否有助于企業(yè)團(tuán)隊(duì)協(xié)作溝通；權(quán)衡工具的學(xué)習(xí)成本及其它便捷服務(wù)；2.用好原型設(shè)計(jì)工具及時(shí)了解原型設(shè)計(jì)工具「新功能」動(dòng)態(tài)；靈活運(yùn)用原型設(shè)計(jì)工具的「優(yōu)勢(shì)」；加入原型設(shè)計(jì)工具社群「參與問(wèn)題探討」和交流；解鎖掌握產(chǎn)品原型設(shè)計(jì)工具的「技能技巧」；3.做好原型設(shè)計(jì)的【重點(diǎn)概要】盡量做全面，高質(zhì)量交互原型設(shè)計(jì)稿；把產(chǎn)品頁(yè)面關(guān)系邏輯．在原型設(shè)計(jì)稿中展示清楚；邀請(qǐng)企業(yè)團(tuán)隊(duì)協(xié)作一起參與原型設(shè)計(jì)；做好原型設(shè)計(jì)的【注意事項(xiàng)】明確需求．先腦圖梳理,再下手原型設(shè)計(jì)；將創(chuàng)意想法需求．要快速轉(zhuǎn)化成原型設(shè)計(jì)稿；忌諱產(chǎn)品原型設(shè)計(jì)流程繁瑣，不要畫(huà)蛇添足.按需所設(shè)；.編號(hào)21-06編號(hào)21-06墨刀應(yīng)用場(chǎng)景應(yīng)用場(chǎng)景適用人員功能描述原型設(shè)計(jì)&產(chǎn)品評(píng)審適用產(chǎn)品、設(shè)計(jì)師及運(yùn)營(yíng)團(tuán)隊(duì)、CEO、產(chǎn)品vp（產(chǎn)品副總監(jiān)）、開(kāi)發(fā)工程師等角色。可以在任何頁(yè)面、區(qū)域添加紅點(diǎn)，打點(diǎn)討論，聚焦問(wèn)題；支持HTML、移動(dòng)端離線(xiàn)文件模式，無(wú)網(wǎng)絡(luò)也能順利評(píng)審；支持全局、產(chǎn)品細(xì)節(jié)不被遺漏。設(shè)計(jì)稿交互管理適用于產(chǎn)品經(jīng)理、設(shè)計(jì)師團(tuán)隊(duì)、開(kāi)發(fā)等角色；可用墨刀上傳和管理團(tuán)隊(duì)的設(shè)計(jì)稿，并在線(xiàn)協(xié)同進(jìn)行交互設(shè)計(jì)。創(chuàng)建交互快捷方便，工作流功能讓設(shè)計(jì)稿間的跳轉(zhuǎn)關(guān)系一目了然，可添加批注，不易疏漏。市場(chǎng)營(yíng)銷(xiāo)收集項(xiàng)目反饋適用銷(xiāo)售、市場(chǎng)、營(yíng)銷(xiāo)、客戶(hù)及投資人；因墨刀良好的交互展示特性，乙方公司銷(xiāo)售人員會(huì)使用墨刀向甲方公司介紹軟件產(chǎn)品，在后期軟件開(kāi)發(fā)的過(guò)程中甲方也是通過(guò)墨刀評(píng)論功能提出需求變更。App產(chǎn)品說(shuō)明書(shū)適用于面向非互聯(lián)網(wǎng)用墨刀可以很放方便的制作APP使用的說(shuō)明書(shū)，指導(dǎo)用戶(hù)上手使用。面向服務(wù)行業(yè)等人群，制作「產(chǎn)品說(shuō)明書(shū)，一步步操作一目了然。遠(yuǎn)程用研適用于產(chǎn)品經(jīng)理、用戶(hù)產(chǎn)品調(diào)研等角色可以直接將原型發(fā)給用戶(hù)觀(guān)察用戶(hù)的操作行為，降低產(chǎn)品開(kāi)發(fā)質(zhì)險(xiǎn)。目前已經(jīng)被多家企業(yè)用于可行性測(cè)試、焦點(diǎn)小組等用戶(hù)研究環(huán)節(jié)中。其他應(yīng)用場(chǎng)景適用于商業(yè)路演、制作游戲、h5等場(chǎng)景產(chǎn)品運(yùn)營(yíng)將第劃的H5活動(dòng)，用墨刀把活動(dòng)頁(yè)面原型及跳轉(zhuǎn)效果展示出來(lái)給設(shè)計(jì)、技術(shù)開(kāi)發(fā)，大學(xué)生論文答辯項(xiàng)目演示等場(chǎng)景都可以用墨刀演示。【本階段主要讓學(xué)生了解原型工具如何更好的選擇使用，從而提高工作】（三）工具的在線(xiàn)訪(fǎng)問(wèn)……………………【重點(diǎn)】1.訪(fǎng)問(wèn)墨刀官網(wǎng)編號(hào)21-07編號(hào)21-07在線(xiàn)創(chuàng)建模板點(diǎn)擊右上方的創(chuàng)建應(yīng)用，可以選擇不同的模板和設(shè)備類(lèi)型，填寫(xiě)應(yīng)用名稱(chēng)之后即可完成應(yīng)用的創(chuàng)建，，然后我們可以隨時(shí)編輯應(yīng)用或者與他人共同編輯和分享應(yīng)用。在線(xiàn)編輯云端分享點(diǎn)擊我們創(chuàng)建的對(duì)應(yīng)應(yīng)用進(jìn)行編輯，看到下圖，其分為菜單欄、組件欄、編輯欄和預(yù)覽排列欄幾個(gè)部分。最左邊是一些基礎(chǔ)的組件，可以創(chuàng)建一些需要繪制的組件，在右邊靠近有一個(gè)懸浮的組件欄，在這里選擇需要的組件，拖拽到中間編輯欄中進(jìn)行設(shè)計(jì)；中間頂部編輯欄里可以對(duì)選取的組件進(jìn)行編輯包括對(duì)齊排序等操作；右上邊是預(yù)覽排列，右邊對(duì)組件進(jìn)行屬性設(shè)置和添加交互的面板，這是最終看到的頁(yè)面的基本排列。組件使用如圖，把右邊組件欄中的一些組件拉到這個(gè)中間的編輯欄，通過(guò)雙擊對(duì)應(yīng)的組件進(jìn)行文字或者顏色的編輯：頁(yè)面管理對(duì)于頁(yè)面的管理，我們可以在最右邊的頁(yè)面管理欄進(jìn)行新建或者復(fù)制頁(yè)面，這樣我們的原型也可以在編號(hào)21-08不同頁(yè)面之間跳轉(zhuǎn)，如下圖所示是一個(gè)原型部分頁(yè)面樹(shù)圖：編號(hào)21-08頁(yè)面跳轉(zhuǎn)如果要進(jìn)行頁(yè)面之間的跳轉(zhuǎn)，可以點(diǎn)擊組件，然后拉動(dòng)組件旁邊的超鏈接的樣式圖標(biāo)到相應(yīng)頁(yè)面即可執(zhí)行進(jìn)行頁(yè)面跳轉(zhuǎn)功能，如下圖所示：導(dǎo)出下載圖片或者安裝包點(diǎn)擊頁(yè)面上方的下載圖標(biāo)，具體如下圖所示：編號(hào)21-09編號(hào)21-09運(yùn)行分享應(yīng)用點(diǎn)擊頁(yè)面上方的運(yùn)行圖標(biāo)即可運(yùn)行編輯的應(yīng)用，而后在運(yùn)行頁(yè)面右方通過(guò)分享圖標(biāo)可以生成分享鏈接，如下圖所示：四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：加入墨刀工具交流社群了解墨刀最新動(dòng)態(tài)。任務(wù)2：搜集墨刀案例，分析墨刀工具原型交互特點(diǎn)。（二）實(shí)戰(zhàn)項(xiàng)目案例通過(guò)在線(xiàn)訪(fǎng)問(wèn)墨刀案例，了解墨刀工具在線(xiàn)編輯以及導(dǎo)出分享操作。……【難點(diǎn)】教師重點(diǎn)指導(dǎo)：墨刀在原型設(shè)計(jì)中優(yōu)勢(shì)，以及墨刀使用的場(chǎng)景操作。【學(xué)生初次進(jìn)行設(shè)計(jì)實(shí)踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生形成依據(jù)實(shí)際項(xiàng)目要求進(jìn)行選擇最好原型工具的能力，提高設(shè)計(jì)效率】五、課堂總結(jié)今天，我們主要結(jié)合在線(xiàn)墨刀原型工具的使用優(yōu)勢(shì)以及使用場(chǎng)景等相關(guān)介紹，也針對(duì)相關(guān)具體操作做了一些練習(xí)，想必同學(xué)們通過(guò)練習(xí)對(duì)墨刀的選擇使用，以及在線(xiàn)編輯有了一定了解。希望同學(xué)們課后繼續(xù)對(duì)