备课笔记-App低保真原型工具特点-墨刀

编号21-01【移动APP交互设计开发的制作】编号21-01学习任务一、App低保真工具-墨刀一、课程说明与要求1.课程说明墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。本阶段课程分为三个部分，第一部分为墨刀的工作范畴，介绍墨刀工具制作原型的优势；第二部分为App原型设计策略，介绍产品快速实现原型设计三步走——战略；第三部分为墨刀工具的在线访问，演示了如何在浏览器中访问墨刀并编辑原型项目；通过全方面对比分析墨刀工具制作原型的优势以及访问墨刀，学生可以全面地理解墨刀原型工具的优势，为以后使用墨刀制作原型提供条件。2.工具材料准备说明本课的作业作品实践需要同学们提前准备一些工具和材料，教师提供软件下载链接。工具材料下载链接备注浏览器每台电脑安装墨刀https://modao.cc/brand浏览器联网登录使用思政案例在线导入二、学情分析与课程导入1.学情分析本课程为软件认知课程，墨刀原型工具与其他原型工具的在使用时侧重点还是有区别的，偏重于抽快速、简洁设计制作交互效果。需要学生在学习过程中，结合实际的APP交互原型选择使用墨刀工具制作原型。在学习原型设计工具的同时，要不断思考如何选择符合要求的工具进行原型交互制作，思考如何快速实现交互原型效果，这是非常重要的。2.课程导入我们之前学习了APP交互设计流程开发前期的相关知识。那么，在经过前期思考规划、梳理交互流程后，我们需要根据具体的项目要求来选择原型设计工具进行使用，在交互效果要求不高的项目中使用墨刀是最合适的选择，从而体现墨刀工具相对于其他交互工具的优势，提高工作效率。本节课将全面展开对墨刀在交互设计工具中的优势进行剖析讲述。三、理论知识讲解（一）墨刀的工作范畴1.墨刀特点下面对墨刀功能介绍：1.操作简单简单拖拽和设置，即可将想法、创意变成产品原型。2.演示真机设备边框、沉浸感全屏、离线模式等多种演示模式，项目演示效果逼真。3.团队协作编号21-02编号21-02与同事共同编辑原型，效率提升；一键分享发送给别人，分享便捷；还可在原型上打点、评论，收集反馈意见，高效协作。4.交互简单简单拖拽就可实现页面跳转，还可通过交互面板实现复杂交互，多种手势和转场效果，可以实现一个媲美真实产品体验的原型。5.自动标注及切图将Sketch设计稿墨刀插件上传至墨刀，将项目链接分享给开发人员，无需登录可直接获取到每个元素宽高、间距、字体颜色等信息，支持一键下载多倍率切图。6.素材库内置丰富的行业素材库，也可创建自己的素材库、共享团队组件库，高频素材直接复用。7.免费版支持产品设计、工作流、原型预览、Sketch标注插件、移动端演示，可免费创建3个项目，每个项目20个页面，以及总共50MB素材容量。8.个人专业版享受免费版所有功能，可以创建不限数量的项目及页面，支持文件导出。9.企业版享受专业版所有功能，支持添加企业成员，进行成员协作及管理，共享企业自定义素材库。方便进行成员管理、项目管理及数据管理。2.墨刀适用范围适用平台浏览器注册使用，Windows、Mac桌面客户端，同时支持iOS、Android端预览；适用企业墨刀为企业级用户提供权限控制、项目管理及基础项目数据统计等功能。编号21-03编号21-033.墨刀能干什么……………………【重点】墨刀能干什么原型设计1.支持HTML、PNG、APK、IPA多格式离线文件下载，还可以下载多倍率图片，满足不同分辨率需求；2.支持创建iPhone/iPad、Android、平板、watches、PC各平台设备的原型，也可以自定义设备尺寸；3.提供iOS、Android等平台的常用组件及大量精美图标，同时还可以自定义自己的个性化组件，方便项目之间自由切换、使用；4.通过拖拽创建链接及交互动效，提供丰富的页面切换方式、交互手势及动画，简单操作即可创作；5.通过二维码、链接分享，可以在网页、移动端、墨刀预览助手app中快速查看产品demo的演示效果。开发标注1.使用Sketch插件上传设计文件，墨刀标注会自动生成设计标注信息及全平台样式代码，可以精准还原标注信息，并提供每个元素的CSS、Swift、Android样式代码；2.提供了业内完善的颜色解决方案。除了展示常规设计文件的全局颜色，还会自动生成当前页的页面颜色，还可以手动吸取颜色，随心定制你的个人色板；3.只需设计师导入Sketch切图，即可自动生成多倍率切图文件。可以一键下载全部切图，也可以根据实际需要，下载独立的元素切图；4.除了支持元素在各平台之间的颜色、分辨率换算，还支持手动设置HTML的字体大小单位（rem/em）。4.墨刀相比Axure的优势墨刀相比Axure的优势（1）组件墨刀的组件十分丰富，有很多成熟的组件，比如键盘、菜单、开关、导航、通知等等。而Axure的自带的组件都是比较基础的，如果需要复杂的组件需要去下载。（2）交互墨刀的交互是非常方便的，只需要点击组件左侧的图标类似闪电一样的控件，将其拖拽至想要跳转的页面就可以，并且在拖拽完成后，会在右端自动跳转出事件功能，可以简便的设置交互的条件和效果。而Axure要做交互，则需要设置各种条件，或者输入各种用例，通过条件，动态面板状态，隐藏，切换等功能才能形成交互效果。总结编号21-04编号21-04墨刀由于其组件简便的使用方法，在用户需求复杂度不高的时候能更加完整直观地展示原型效果，而且相比Axure，其简约的界面设计，以及丰富的功能使得墨刀的上手度不难，对于新手来说，即时没有丰富的经验也可以轻松驾驭软件，完成简单的原型设计。5.低保真到高保真低保真（lo-fi）原型设计是将高级设计概念转换为有形的、可测试物的简便快捷方法。它首要的也是最重要的作用是——检查和测试产品功能，而不是产品的视觉外观。以下是低保真原型的基本特征：视觉设计：仅呈现最终产品的一部分视觉属性（例如元素的形状，基本视觉层次等）。内容：仅包含内容的关键元素。交互性：原型可以由真人模拟。在测试期间，熟悉页面流程的设计师就相当于一个“计算机”，实时手动呈现设计页面。此外，也可以给线框图制作交互效果，这种称为“交互线框图”。6.墨刀的低保真设计可点击的线框图：线框图是产品页面的可视化表示形式，设计人员可以使用它来排列页面元素。线框可以作为低保真原型的基础。可点击的线框是最简单的交互式原型-即连接起静态线框页面：与纸质原型一样，可点击线框图通常看起来不像成品，但它们确实比纸质原型具有一个显着的优势-它们在测试期间不需要单独的人员跟进编号21-05编号21-05【此阶段主要让同学了解墨刀原型工具的优势以及工作范畴】（二）App原型设计策略1.选择原型设计工具……【思政融入（用内外因辩证关系，培养学生分析客观事实方法）】「外因」三【分析】分析并掌握各个原型设计工具特性；分析工具在行业中的口碑好评度；筛选符合设计需求的工具；「内需」三【权衡】工具是否方便后续优化及产品版本迭代；衡量是否有助于企业团队协作沟通；权衡工具的学习成本及其它便捷服务；2.用好原型设计工具及时了解原型设计工具「新功能」动态；灵活运用原型设计工具的「优势」；加入原型设计工具社群「参与问题探讨」和交流；解锁掌握产品原型设计工具的「技能技巧」；3.做好原型设计的【重点概要】尽量做全面，高质量交互原型设计稿；把产品页面关系逻辑．在原型设计稿中展示清楚；邀请企业团队协作一起参与原型设计；做好原型设计的【注意事项】明确需求．先脑图梳理,再下手原型设计；将创意想法需求．要快速转化成原型设计稿；忌讳产品原型设计流程繁琐，不要画蛇添足.按需所设；.编号21-06编号21-06墨刀应用场景应用场景适用人员功能描述原型设计&产品评审适用产品、设计师及运营团队、CEO、产品vp（产品副总监）、开发工程师等角色。可以在任何页面、区域添加红点，打点讨论，聚焦问题；支持HTML、移动端离线文件模式，无网络也能顺利评审；支持全局、产品细节不被遗漏。设计稿交互管理适用于产品经理、设计师团队、开发等角色；可用墨刀上传和管理团队的设计稿，并在线协同进行交互设计。创建交互快捷方便，工作流功能让设计稿间的跳转关系一目了然，可添加批注，不易疏漏。市场营销收集项目反馈适用销售、市场、营销、客户及投资人；因墨刀良好的交互展示特性，乙方公司销售人员会使用墨刀向甲方公司介绍软件产品，在后期软件开发的过程中甲方也是通过墨刀评论功能提出需求变更。App产品说明书适用于面向非互联网用墨刀可以很放方便的制作APP使用的说明书，指导用户上手使用。面向服务行业等人群，制作「产品说明书，一步步操作一目了然。远程用研适用于产品经理、用户产品调研等角色可以直接将原型发给用户观察用户的操作行为，降低产品开发质险。目前已经被多家企业用于可行性测试、焦点小组等用户研究环节中。其他应用场景适用于商业路演、制作游戏、h5等场景产品运营将第划的H5活动，用墨刀把活动页面原型及跳转效果展示出来给设计、技术开发，大学生论文答辩项目演示等场景都可以用墨刀演示。【本阶段主要让学生了解原型工具如何更好的选择使用，从而提高工作】（三）工具的在线访问……………………【重点】1.访问墨刀官网编号21-07编号21-07在线创建模板点击右上方的创建应用，可以选择不同的模板和设备类型，填写应用名称之后即可完成应用的创建，，然后我们可以随时编辑应用或者与他人共同编辑和分享应用。在线编辑云端分享点击我们创建的对应应用进行编辑，看到下图，其分为菜单栏、组件栏、编辑栏和预览排列栏几个部分。最左边是一些基础的组件，可以创建一些需要绘制的组件，在右边靠近有一个悬浮的组件栏，在这里选择需要的组件，拖拽到中间编辑栏中进行设计；中间顶部编辑栏里可以对选取的组件进行编辑包括对齐排序等操作；右上边是预览排列，右边对组件进行属性设置和添加交互的面板，这是最终看到的页面的基本排列。组件使用如图，把右边组件栏中的一些组件拉到这个中间的编辑栏，通过双击对应的组件进行文字或者颜色的编辑：页面管理对于页面的管理，我们可以在最右边的页面管理栏进行新建或者复制页面，这样我们的原型也可以在编号21-08不同页面之间跳转，如下图所示是一个原型部分页面树图：编号21-08页面跳转如果要进行页面之间的跳转，可以点击组件，然后拉动组件旁边的超链接的样式图标到相应页面即可执行进行页面跳转功能，如下图所示：导出下载图片或者安装包点击页面上方的下载图标，具体如下图所示：编号21-09编号21-09运行分享应用点击页面上方的运行图标即可运行编辑的应用，而后在运行页面右方通过分享图标可以生成分享链接，如下图所示：四、实践技能训练（一）布置训练任务任务1：加入墨刀工具交流社群了解墨刀最新动态。任务2：搜集墨刀案例，分析墨刀工具原型交互特点。（二）实战项目案例通过在线访问墨刀案例，了解墨刀工具在线编辑以及导出分享操作。……【难点】教师重点指导：墨刀在原型设计中优势，以及墨刀使用的场景操作。【学生初次进行设计实践，教师应多引导，帮助学生形成依据实际项目要求进行选择最好原型工具的能力，提高设计效率】五、课堂总结今天，我们主要结合在线墨刀原型工具的使用优势以及使用场景等相关介绍，也针对相关具体操作做了一些练习，想必同学们通过练习对墨刀的选择使用，以及在线编辑有了一定了解。希望同学们课后继续对