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

编号23-01

【移动APP交互设计开发的制作】

学习任务三、思政APP低保真原型制作-墨刀

一、课程说明与要求

1.课程说明

本阶段课程分为三个部分，第一部分为墨刀APP原型页面搭建，介绍墨刀工具根据实际项目导入原型

图素材搭建各个页面；第二部分为墨刀工具状态功能详解，介绍墨刀组件状态功能的详细使用操作；第三

部分为墨刀低保真功能讲解，介绍实际产品交互效果的制作；通过对墨刀工具低保真交互效果的制作，学

生可以全面、深入地掌握墨刀原型工具的制作低保真原型交互的方法。

2.工具材料准备说明

本课的作业作品实践需要同学们提前准备一些工具和材料，教师提供软件下载链接。

工具材料下载链接备注

浏览器每台电脑安装

墨刀https://modao.cc/brand浏览器联网登录使用

思政案例在线导入

二、学情分析与课程导入

1.学情分析

本课程为思政案例效果实际操作课程。在学习思政案例交互设计的同时，需要学生在学习过程中，深

刻理解各个组件交互使用的效果，并队实际的原型交互案例进行操作感受。同时要不断思考墨刀工具对实

际交互设计可以实现的程度，这是非常重要的。针对学生目前对原型交互设计工具有了深刻的了解，也为

以后实际工作使用原型工具打下基础。同时通过引导教学、案例实践等教学方式增强学生对课程知识的吸

收以及后续新功能的设计能力。

2.课程导入

我们之前学习了墨刀组件素材属性设置，以及组件交互事件使用。那么，在经过前期知识认知后，我

们可以根据思政案例的交互设计效果自己动手进行相应交互效果的制作，那么要制作一个低保真的交互效

果，首先需要搭建一个逼真的页面原型图，才能在制作交互效果时更加类似实际的APP交互操作。本节

将通过导入原型素材搭建页面，以及通过案例对交互功能进行设计分析与制作。

三、理论知识讲解

（一）墨刀APP原型页面搭建

在墨刀工具中选择新建然后根据项目需要的设备尺寸进行选择，这里墨刀提供了一些市面上常见的手

机屏幕尺寸可以直接使用，之后再运行预览时就会出现真机的样式进行预览。

编号23-02

【注意自定义的尺寸是没有真机样式的边框的】

将原型素材导入墨刀工具中可以直接将素材拖入到画布区，松开鼠标即可实现图片素材导入，也可以

将图片上传到素材广场中，然后把一个基础图片组件拖入画布中，然后在组件属性中进行替换从素材广场

中选择也可实现图片的创建。

结合原型工具的组件，图标等素材将APP的基础页面搭建出来

编号23-03

（二）墨刀工具状态功能详解………………【重点】

在设计产品原型时，我们可能需要用到交互动画，状态功能就是在墨刀里用于设计交互动画效果的功

能，类似PPT的动画功能、Axure的动态面板功能：

状态指一个组件在不同时间点所呈现的位置、大小、颜色等属性的变化。所谓状态，就好比一棵树在

四季也就是不同时间点，所呈现出来的形态、颜色的变化。

状态基本操作，新建状态与复制状态，点击右上方的小圆圈，就可以打开状态设置面板。打开面板后

可以看到有一个状态1，同时可以新建一个状态2，新建的状态是空的没有任何组件，如果我们想要在不同

的状态中放置不同的组件那就可以选择新建状态。也可以选择状态1点击复制状态，复制出来的状态他的

内容和状态1是一模一样的，如果给复制的状态中的组件调整大小位置等属性的修改，然后在状态1中添

加一个点击交互效果，设置