备课笔记-墨刀原型工具-基本操作流程

编号22-01【移动APP交互设计开发的制作】编号22-01学习任务二、墨刀原型工具——基本操作流程.一、课程说明与要求1.课程说明本阶段课程分为五个部分，第一部分为墨刀原型工具概述，介绍墨刀工具的工作界面；第二部分为工具基础操作，介绍墨刀组件样式属性的操作；第三部分为墨刀组件素材，演示了墨刀常用组件功能使用；第四部分为交互效果，介绍了墨刀使用交互的效果；第五部分为演示分享与项目管理，介绍了墨刀设计完成时演示与分享的操作；通过对墨刀工具基础功能的讲解，学生可以全面、深入地理解墨刀原型工具的制作原型交互的方法。2.工具材料准备说明本课的作业作品实践需要同学们提前准备一些工具和材料，教师提供软件下载链接。工具材料下载链接备注浏览器每台电脑安装墨刀https://modao.cc/brand浏览器联网登录使用思政案例在线导入二、学情分析与课程导入1.学情分析本课程为软件实际操作课程。在学习原型设计工具的同时，需要学生在学习过程中，熟练掌握墨刀组件使用的特性，结合实际的原型交互案例进行操作感受。要不断思考组件与实际交互效果实现的有机结合，这是非常重要的。针对学生目前对原型交互设计领域有了初步认识，也为学习墨刀原型软件打下了良好基础。同时通过引导教学、案例实践等教学方式增强学生对课程知识的吸收。2.课程导入我们之前学习了墨刀在原型交互设计的优势，以及如何在线访问与编辑原型项目。那么，在经过前期知识认知后，我们可以根据将来实际项目的需要进行工具选择，相比之下，在交互精度要求不高的情况下，墨刀工具将是最好的选择，而墨刀实现原型提交，就需要对墨刀的组件素材，交互效果等操作来进行深入了解，才能在原型制作时快速使用符合项目需要的交互方式。本节课将全面展开对墨刀在交互设计中的工具基础操作，组件素材，交互效果添加的深入剖析与讲解。三、理论知识讲解（一）墨刀原型工具概述1.墨刀首页介绍墨刀首页左侧有“新建”、“动态”、“项目”和“素材广场”四个菜单。编号22-02编号22-02“新建”菜单，点击后可以新建原型。选择不同的模板和设备类型，填写应用名称之后即可完成应用的创建。然后可以随时编辑应用或者与他人共同编辑和分享应用。“动态”菜单，点击后可以查看最近使用墨刀的修改。“项目”菜单，点击后可以查看该账户下的所有项目。在项目右边的更多按钮[…]。可以对项目编辑、预览、设为星标、删除、复制副本、以及重命名等操作。“素材广场”菜单，点击可以查看设计好的原型图和图标等素材，进行导入使用。2.页面栏页面栏：可以完成有关页面的所有操作，如新建页面、删除页面和查找页面等。添加页面在编辑区左侧的页面列表区域，你可以点击顶部的「新建页面」为原型添加新页面。可以修改页面名称，创建子级页面等等方便管理页面。编号22-03编号22-03调整页面顺序鼠标悬浮在页面上直接往上或往下拖拽即可调整页面顺序。注：IE浏览器不支持页面拖动，建议使用谷歌浏览器/墨刀客户端展开、折叠页面选中一个多级页面的父页面，点击页面左上角的小三角形按钮即可展开、折叠页面。删除页面选中具体页面，点击「更多」图标，即可删除页面。删除页面找回误删或删除的页面可以在页面列表左下角的页面回收站中找回。注：页面删除14天后将会被系统自动清空，如误删页面请你及时在页面回收站中找回。设置页面横屏选中画布时，你可以在右侧的外观设置面板中设置页面画布为横屏或者竖屏。需要注意的是，只有手机项目才可以设置横竖屏，网页尺寸项目默认横屏，无竖屏选项。设置页面背景颜色选中整个页面画布，即可在右侧的外观设置面板中设置画布背景颜色。编号22-04编号22-04修改页面名称在页面列表双击某个页面的页面名称，即可修改它的页面名称。【此阶段主要让同学了解墨刀原型工具的首页和页面栏的操作】（二）墨刀工具基础操作组件区域在编辑区右侧的组件区域，有「内置组件」、「我的组件」、「图标」及「母版」素材，你可以点击打开对应的素材面板，添加你需要的组件。内置组件你可以快速拖拽使用我们为你内置的基础组件以及平台组件（ios、MaterialDesign、AntDesign、WeUI...）。我的组件你可以将需要复用的组件或组合选中，鼠标右键添加到「我的组件」当中，便于之后直接拖拽使用。图标你可以通过搜索或分类查找的方式选用图标库中的开源图标，并且可以自由设置图标的默认颜色及尺寸。母版如果你需要在多个页面或位置用到同一组件，且需要它们可以被批量修改，那你可以先将它设置为「母版」。比如同一个文字组件，可以在多个页面中复用，并且可以通过修改母版达到批量修改的效果。显示、隐藏组件选中组件，可以在编辑区右侧的外观设置面板中点击「小眼睛」图标设置显示或隐藏组件。注：隐藏组件后需要在左侧元素栏选中元素后才可以显示组件。你也可以使用快捷方式操作：显示与隐藏组件快捷键Ctrl+Shift+H（hide）。我的组件是你手动创建的组件素材库，添加到此区域的组件将会默认添加进个人帐号中，只需登录即可随时使用这些素材。我的组件中包含静态组件以及动态组件。动态组件即包含状态动画的组件，可用来制作下拉菜单等动态组件。创建“我的组件”有2种方式：1选中组件，右键弹出面板，选择“创建我的组件”。2可以选中元素后，在我的组件菜单栏中选择“新建组件”，给组件设置名称即可。编号22-05编号22-05「编辑」组件，添加状态，即可为组件添加动画，转为动态。管理我的组件点击管理按钮，即可对组件进行批量删除、转移文件夹、置入画板等操作。选中被盖住的组件如果组件被盖住了，可以在要选择的组件位置点击鼠标右键，然后在弹出的面板中点击「选择图层」，选择组件。同时，你可以在编辑区左侧的元素列表中直接选中组件。重命名组件选中组件后，可以在右侧的外观设置面板中双击组件名称修改组件命名。修改组件颜色选中组件后，可以在页面编辑区右侧的外观设置面板中修改组件颜色。组合打散组件多选组件后，可以在编辑区的顶部工具栏中对它们进行打散和组合。锁定、解锁组件选中组件后，可以在页面编辑区顶部工具栏或者右侧的外观设置面板中点击「小锁」图标来锁定或解锁组件。使用、隐藏一屏线（蓝色虚线）一屏线的作用页面编辑区的蓝色虚线可以理解为「一屏线」，这条线能让你在设计页面时了解当前页面在处在第一屏（不滚动）时能呈现那些页面内容。隐藏一屏线一屏线可以和网格一起隐藏。不选中页面画布中的任何组件，在编辑区右侧的外观设置面板中取消网格勾选即可。【本阶段主要让学生了解原型工具如何更好的选择使用，从而提高工作】（三）组件素材……………………【重点】编号22-06编号22-06墨刀原型工具修改文字外观选中文字组件后，可以在编辑区右侧的外观设置面板中点为它设置字号、颜色、字体。注：目前除已提供字体外，不支持上传自己下载的字体使用。修改批注颜色选中批注组件后，在编辑区右侧的外观设置面板中可以修改它的颜色。矩形设置圆角选中矩形后，可以在编辑区右侧的外观设置面板中为它设置圆角（四个圆角可以单独设置）。从内置组件中拖入一个图片组件，即可在右侧的外观设置面板中为图片组件插入图片。本地/素材库上传图片或者将本地图片直接拖入页面注：目前插入图片支持gif图，gif图上传大小上限为2M。图片裁切双击图片即可矩形裁切，也可点击右侧圆形裁切拉伸图片：上传图片后双击裁切图片，裁切后再进行拉伸图片即可。墨刀原型内图片支持下载，下载格式为png，目前支持三倍倍数导出。具体操作如下：页面编辑区下载图片：选中需要下载的图片组件，点击右下角的「导出图片」即可保存图片到本地。如需批量下载页面内图片，可按住shift，鼠标左键点选，多选完成后，点击「导出图片」即可。标注模式下载图片：在项目运行预览区或通过分享链接查看，点击顶栏「标注」模式，选中需要下载的图片，点击「导出图片」即可保存图片到本地。标注模式下不支持批量下载图片。链接区域（热区）链接区域（热区）可以为页面画布中的某个特定区域添加跳转（比如一张图片的局部），链接区域组编号22-07件在基础组件当中，添加到页面画布后可以调整区域大小。编号22-07聊天气泡聊天气泡组件在内置组件当中。添加到页面画布后可以在外观设置面板中改变气泡指向的方向。设置轮播图组件：滑动方向、滑动顺序、自动轮播和点击轮播、设置指示点样式。添加图标图标在编辑区右侧的组件素材区域，打开图标面板后，你可以通过搜索或分类查找的方式选用图标库中的开源图标。你可以在图标面板底部设置图标的默认颜色及尺寸。下载图标墨刀中提供内置的图标下载功能，下载格式为svg/png，目前支持三倍倍数导出，具体操作方式如下：使用母版步骤：选中组件——右键“转换为母版”——命名。在该项目创建的所有母版都会存放在“母版库“中。编辑母版鼠标悬浮在母版缩略图上方，点击“…”—“编辑”，即可进入修改母版。修改完成后，它在该项目里所有的应用实例都会同步更新修改。我的素材组件你可以在这里新建、复制、移动、删除组件，新建和删除组件文件夹，也可以将组件置入画板。支持按住Shift或command/ctrl键多选。图片有一个好的图片库相当于一个井然有序的图书馆，可以快捷高效的取用所需素材。要先创建文件夹，再添加图片，甚至是对图片添加标签，对每张图片都分门别类。保存自定义图片，以重复使用在墨刀素材模式下，你可以将任何图片创建为“我的图片”，收录到“我的”-“我的图片”中，之后便直接从“我的”中拿出来使用即可。添加文件夹、添加标签创建文件夹后，你可以直接拖拽图片到空白区域，或者点击「添加图片」，就可以上传图片。目前支持上传PNG/JPEG/JPG/GIF格式。选中图片，可以接着添加标签、删除、下载或者移动到其他文件夹，也可以将其置入到画板。在“图片标签”，即可通过选择“标签”快速查看相关图片。点击“管理”，即可删除某个标签。可以按照名称、大小、创建时间，以列表或横排形式排序。更快的找到所需。批量删除按shift或command/ctrl可以多选组件，也可以直接点击全选，执行删除，可以直接对文件夹进行删除。（四）交互效果………………【重点】交互效果编号22-08编号22-08页面状态的作用页面状态可以用来实现页面内整体的交互动画。举个例子：使用页面状态切换，我们可以让页面中一个图片（组件）的位置、大小、颜色发生改变。页面状态切换和页面切换的区别，上图的状态切换会有组件平滑移动的效果，我们可以称之为神奇移动。页面切换则没有这种平滑移动的效果，会是生硬的切换，页面状态设置与添加设置面板的右边有几个按钮，点击第一个圆形按钮后就可以设置页面状态了。点击状态面板中的「新建」或「复制」按钮即可新建状态。默认显示状态当我们打开一个页面时，页面最开始呈现的样子（状态），就是页面的默认显示状态，可以通过鼠标拖拽调整页面状态顺序。默认状态就像动画的第一帧（第一个画面）。我们可以给默认显示页面状态的组件（元素）添加链接，让默认状态跳转到其它状态，产生动画效果。动态组件连接其它页面动态组件要连接其它页面，需要在动态组件编辑区内，为相应状态内的元素添加事件跳转至其他页面。其它方式使用状态动态组件的作用编号22-09编号22-09动态组件和页面状态一样可以用来实现页面内的交互动画。可以让页面中一个组件的位置、大小、颜色发生改变，也可以设置显示隐藏。动态组件和页面状态的动画效果实际上都是用状态实现的。两者的区别在于：1）页面状态做的动画效果会影响整个页面内的组件，动态组件做的动画效果只会影响动态组件内部的组件。2）页面状态基于项目页面完成，不太方便保存复用，动态组件与项目页面是分离的，可以保存到组件库中作为组件素材复用。由于以上两点差异，在做交互动效的时候优先选择用动态组件来实现。网页组件：添加音频、添加地图、添加视频。全局事件又叫页面全局事件，它是基于整个页面画板的交互事件，使用它可以实现类似滑动切换页面，并使页面切换之类的效果，因为它基于整个页面画板，因此使用时不需要选中某个组件。固定顶栏/固定底部导航选中画布后，画布左侧有上下两个固定滑块。如需固定顶栏和底部导航，可以拖拽固定滑块，覆盖顶栏和底部导航的区域。设置好后，如果是长页面，运行时会有固定顶栏和底部导航的效果。长页面滚动选中页面画布后，鼠标悬浮在页面画布底部，按住向下拖拽即可调整页面高度（拉长页面）。长页面在运行时会以滚动的形式展示。定时跳转选中画布后，在链接设置面板中可以为页面或状态设置定时跳转的效果。自动旋转选中组件后，在编辑区右侧外观设置面板中的「动效」中可以为组件设置自动旋转。（五）项目分享和项目管理………………【重点】1.演示分享项目做好后如需分享给其他人查看，只需复制分享链接发给对方。具体操作方式有两种：1.在项目编辑区点击「分享」项目，复制分享面板中的分享链接发给对方即可。2.在项目管理页选中项目，点击「分享」，复制分享弹窗中的分享链接发给对方即可。下载有下载PNG、PDF、apk安装包、以及HTML文件等真机模式：运行后显示/隐藏手机边框编号22-10编号22-10「PRD」模式简单来说：在编辑区，放置在设备框（画板）外面的元素也可以在运行预览时显示出来。「长页面」模式在项目中，会遇到制作的页面高度超过「一屏」的情况。同时还需要理解在墨刀中，如果页面长度超过「一屏」，那么在运行的时候是可以上下滚动实现全页面的预览，但是上下滚动不利于了解页面全局分布。2.项目管理复制项目/创建项目副本选中项目后点击「更多」-「创建副本」即可复制项目。找回删除项目删除的项目可以点击页面左侧的「回收站」图标找回。批量移动项目在文件夹中选择项目后，点击左上角的小圆圈（多选项目按钮）即可多选项目，多选完成后点击右上角的「移动」按钮即可批量移动项目。合并项目把几个项目的页面合并成一个，可以通过「移动页面」功能来实现：在项目A中选择所需页面，点击页面右侧的「更多」-「移动到」按钮，在弹出的面板中选择需要移入的空间-文件夹-项目B，就可以将项目A的页面转移（合并）到项目B中了。四、实践技能训练（一）布置