一、 实验目的
- 熟悉原型工具墨刀。
- 使用墨刀完成该网页的原型草图设计。
二、实验环境
- 操作系统：Windows 10 X64
- 原型制作工具：墨刀
三、实验过程
1. 选择适合自己操作系统的墨刀版本下载并安装。
2. 打开安装好的墨刀，新建项目，给项目取个项目名称，并选择“网页/电视”，默认大小为1440✖1024，点击创建即可。
3. 创建后，就能看到如下空白界面，可以简单的来熟悉一下墨刀的操作界面：左侧工具栏，有一些基础的文字形状等工具；右侧是属性栏，可以选中画布上的对象进行修改大小、颜色等属性；上方有免费的素材库可供使用。
4. 首先让我们先看一下这次要画的网页,因为这次主要是快速原型、交流需求，因此，我们对动态、图片、文字等等，不需要太精细。
5. 首先，我们先在左侧的工具区选中“矩形”并拉到画布上，并调整大为我们的版头大小，这个就是我们的最上面的那块版头，同理，再拉动一块矩形作为我们的底面
6. 接着我们还是在左侧的工具区最上面选中“文字”并拉到画布上，放置在我们的版头左下角，作为版头的导航栏文字，同样的操作重复8次，分对应8个标题导航。
7. 接着我们在右侧属性栏调整一下文字的大小和字体，使它看起来更舒适一点。
8. 下一步我们看到网页的正中间有一个轮播图片，墨刀这里有一个现成的素材库可以免费使用，点开右上角的“素材库”，就可以看到很多现成素材，这里我们点击"基础"中的“轮播图”，就可以在画布上生成一个轮播图
9. 在画布上能看到轮播图,我们调整一下大小，并放到合适的位置 :
10.然后我们观察到轮播图的左边和右边都是文字区，所以我们还是用到文字工具，辅助ctrl+Z进行快速制作。这里可以不用具体要求文字内容，我做了左边的文字，右边的就用“文字”两个字来代替。
11. 这时候我们会发现画布大小不够，这时候我们在画布底部能看到一个下拉条，我们可以拉动这个下拉条来适当拉伸画布长度。
12. 接下来就是网页上的绿色方框组成的文章区，我们还是拖动矩形工具到画布上，这时候双击我们的矩形进入编辑组件状态，进入后再点击我们的矩形，在右侧的属性栏找到“外观”，记得不要勾选“填充”而要勾选“描边”，然后点开颜色面板选择绿色
13. 重复这样的操作，完成5×4的矩形阵
14. 接着我们在矩形内填充一下文字，表示这些区域里存放文章
15. 最后我们用矩形做一个版尾就完成了草图的绘制。
16. 做完后也可以选择稍微完善下，比如把网页上轮播的图片保存下来放到我们的轮播图上或是把版头等。
四、实验总结
经过这次快速原型草图的实操，我们对网页原型的作用有个大致的了解，它能让我们对网页的功能需求有一个良好的定位，原型图能快速简单地让我们对整个网页有所了解，帮助沟通和测试。除了墨刀以外，还可以使用pencil project等工具来制作原型图，操作同样简单方便。
