备课笔记-思政APP低保真原型制作-墨刀.doc

编号23-01【移动APP交互设计开发的制作】 编号23-01 学习任务三、思政APP低保真原型制作-墨刀 一、课程说明与要求 1.课程说明 本阶段课程分为三个部分，第一部分为墨刀APP原型页面搭建，介绍墨刀工具根据实际项目导入原型图素材搭建各个页面；第二部分为墨刀工具状态功能详解，介绍墨刀组件状态功能的详细使用操作；第三部分为墨刀低保真功能讲解，介绍实际产品交互效果的制作；通过对墨刀工具低保真交互效果的制作，学生可以全面、深入地掌握墨刀原型工具的制作低保真原型交互的方法。 2.工具材料准备说明 本课的作业作品实践需要同学们提前准备一些工具和材料，教师提供软件下载链接。 工具材料 下载链接 备注 浏览器 每台电脑安装 墨刀 https://modao.cc/brand 浏览器联网登录使用 思政案例 在线导入 二、学情分析与课程导入 1.学情分析 本课程为思政案例效果实际操作课程。在学习思政案例交互设计的同时，需要学生在学习过程中，深刻理解各个组件交互使用的效果，并队实际的原型交互案例进行操作感受。同时要不断思考墨刀工具对实际交互设计可以实现的程度，这是非常重要的。针对学生目前对原型交互设计工具有了深刻的了解，也为以后实际工作使用原型工具打下基础。同时通过引导教学、案例实践等教学方式增强学生对课程知识的吸收以及后续新功能的设计能力。 2.课程导入 我们之前学习了墨刀组件素材属性设置，以及组件交互事件使用。那么，在经过前期知识认知后，我们可以根据思政案例的交互设计效果自己动手进行相应交互效果的制作，那么要制作一个低保真的交互效果，首先需要搭建一个逼真的页面原型图，才能在制作交互效果时更加类似实际的APP交互操作。本节课将通过导入原型素材搭建页面，以及通过案例对交互功能进行设计分析与制作。 三、理论知识讲解 （一）墨刀APP原型页面搭建 在墨刀工具中选择新建然后根据项目需要的设备尺寸进行选择，这里墨刀提供了一些市面上常见的手机屏幕尺寸可以直接使用，之后再运行预览时就会出现真机的样式进行预览。 【注意自定义的尺寸是没有真机样式的边框的】 将原型素材导入墨刀工具中可以直接将素材拖入到画布区，松开鼠标即可实现图片素材导入，也可以将图片上传到素材广场中，然后把一个基础图片组件拖入画布中，然后在组件属性中进行替换从素材广场中选择也可实现图片的创建。 编号23-02 编号23-02 结合原型工具的组件，图标等素材将APP的基础页面搭建出来 （二）墨刀工具状态功能详解 ………………………………………………………………【重点】 在设计产品原型时，我们可能需要用到交互动画，状态功能就是在墨刀里用于设计交互动画效果的功能，类似PPT的动画功能、Axure的动态面板功能： 状态指一个组件在不同时间点所呈现的位置、大小、颜色等属性的变化。所谓状态，就好比一棵树在四季也就是不同时间点，所呈现出来的形态、颜色的变化。 编号23-03 编号23-03 状态基本操作，新建状态与复制状态，点击右上方的小圆圈，就可以打开状态设置面板。打开面板后可以看到有一个状态1，同时可以新建一个状态2，新建的状态是空的没有任何组件，如果我们想要在不同的状态中放置不同的组件那就可以选择新建状态。也可以选择状态1点击复制状态，复制出来的状态他的内容和状态1是一模一样的，如果给复制的状态中的组件调整大小位置等属性的修改，然后在状态1中添加一个点击交互效果，设置动效为神奇移动，就可以出现交互动画效果，而所谓神奇移动就是，不同状态间同一个组件的平滑过渡效果， 状态有很多那么就需要对每个状态进行重命名操作，点击某个状态然后拖动它就可以调整他的顺序。 修改了某个状态里的组件，同步修改其他状态里的组件的样式，选中修改后的组件，右键找到“添加/替换到其他状态”。 编号23-04 编号23-04 删除某个状态里的组件，对其他状态里的组件没有影响，如果想从所有的状态中删除这个组件，选中组件后右键选择从所有状态中删除即可。 页面状态与组件状态区别 页面状态：基于页面设计，效果跟随页面，交互动画无法直接复用到其它页面。 组件状态：基于组件设计，效果跟随组件，交互动画能以复制组件的方式应用到其它页面。 动态组件的添加有两种方式： 一种是选中组件在右侧面板中点击，添加组件状态，就可以为选中的组件添加组件状态。 另一种方式将组件右键添加到我的组件中，然后在我的组件中找到组件然后点击编辑就可以为该组件添加状态。 如果这个多态组件需要在多个地方用到时，并且在修改需要同步修改时，可以将制作好的多态组件转换为母版，就可以在不同页面中复用同一个组件的状态，并且在对母版进行修改编辑后，其他使用到该母版的地方也会同步进行修改。 编号23-05 编号23-05 墨刀低保真功能讲解 ………