一、前言

• 本文内容和使用人群？
  本文是为没有原型设计软件基础的读者而设计的入门指南。以建立一个拥有输入和链接功能的简单界面为例，介绍墨刀最基本的用法。
  有软件基础，想学习如状态转换，滚动图片不同链接处理，鼠标悬停效果的读者，请阅读“系列学习·用墨刀做原型设计（二）进阶”。
• 开发环境？

1. 操作系统： Windows 10 X64
2. 原型设计工具软件：墨刀V0.7.8

二、安装 墨刀V0.7.8

• 1.下载墨刀
  下载地址：墨刀
  可选择macOS端和Windows端
• 2. 安装
     下载后的墨刀类似绿色版软件，可直接打开。

三、创建一个简单界面

• 创建项目：

在创建项目项目界面选择选择网页/电视，点击创建。

创建.png

• 简单功能设计

• 拖入内置组件：
  拖入一个矩形，双击矩形，在矩形里输入任意文字。
  选中矩形时，可以在右下角选择矩形内文字的字体颜色和大小，也可以设置矩形的填充颜色和大小

  
  
  矩形.png
  
  

  类似的，拖入一个输入框，并在期中输入文字。

• 设置链接：
  单机矩形，选中矩形左边的闪电图标，将其拖放至：页面2“。这样就完成了链接。
  

  链接.png

• 简单的版面设计

• 上传图片
  在墨刀里上传图片非常方便，复制图片后可以在设计界面里点粘贴传入图片。

  
  
  传入图片.png
• 用组件装饰
  选中组建后，可以在右下角选择填充颜色，轮廓颜色。可以在右上角选择颜色的透明度。
  墨刀组件有矩形，矩形，圆形，线条等几何图形，于是我们可以用它们做出想要的版面设计。

image.png

（上例中我使用了矩形和线条）

• 查看效果

点击右上角的运行按钮，或使用快捷键ctrl+p，可以预览界面效果。

image.png

（在上例中，因为我们给内含”搜索“文字的矩形设置了链接，所以点击它会跳转至页面2.）
做到这一步，我们就完成了一个有基本功能和版本的网页原型设计。

四、导出

点击上方的下载，可以选择不同的导出方式。
在免费版本中，如果想要导出的文件拥有预览中的功能，需要选择**离线演示包（HTML）

image.png

猜测各位读者正在感叹，制作一个网页原型也太简单了。
如果有兴趣，不妨阅读进系列学习（二）进阶篇的教程