软件学院人机交互原理及应用第一次实验报告

引言

人机交互，是一门研究系统与用户之间的交互关系的学问。系统可以使各种各样的机器，也可以是计算机化的系统和软件（摘自百度百科）。初次接触人机交互，我们需要了解什么是人机交互，了解设计人机交互方式的工具。万丈高楼平地起，对人机交互拥有更好的认识后才能真正地去学习人机交互。第一次试验，我们将通过熟悉墨刀这个工具，将网页豆瓣转化为草图。

工具：墨刀

过程

第一步：创建项目

打开墨刀网站并登录后，墨刀的界面很整洁，点击右上角 创建项目（1）.png
豆瓣是一个网页，所以我们创建Web项目 创建项目（2）.png
项目的一些属性，这些都可以后面再调整，所以我们直接创建就可以了 创建项目（3）.png
创建好后是这样的界面 创建项目（4）.png

第二步：了解页面

左侧是页面栏，我们可以迅速地移动到同一个网站不同的页面。同时有几个快速组件，从上到下依次为文本框，矩形，圆形，直线，图片，链接区域，都是编辑网页常用的组件。

了解页面（1）.png

右侧是组件栏，在这里我们对可以添加组件，并且对组件的外观互动进行调整。一个网站就是由一个个组件完成与人的交互的。

了解页面（2）.png
上方是项目操作栏，可以对项目进行保存撤销下载分享标注等操作。当我们设计好一个页面想要进行试运行的时候则点击“运行”进行测试。
了解页面（3）.png

第三步：了解组件

在组件箱里面有许多组件 了解组件.png

网站用的较多的就是文字，图片，按钮，输入框。豆瓣作为提供内容的社区网站主要还是通过文字与用户进行交互；输入框是从用户获取信息的一个好方法；图片是一个网站想要好看必不可少的部分；按钮则是为用户提供一个交互的指引，当我们有交互的需求时，使用按钮组件能够让用户更好地找到交互的位置。至于其他的组件，在编辑一个帅气的网站偶尔能够用得上，能够熟练用好每一个组件，发挥组件的作用是设计一个好网站的必备技能。

第四步：开始设计

开始设计（1）.png
我们利用文字，图片组件一个个将网站的原型画作草图。 开始设计（2）.png
开始设计（3）.png

在画草图的过程中，我们发现网站上可能会有一些内容类似的组件，比如在介绍专栏的时候，都是由一张封面、书名、来源组成，一个项目要编辑三个组件的话操作太麻烦。为了简化这个过程我们可以使用组合功能。

我在组件栏中找到文字，图片，评分三个组件，调整好它们的相对位置和字体大小，用鼠标将它们圈起来。 开始设计（4）.png
点击项目栏上的“组合”。 开始设计（5）.png
这样就可以轻松地对同类型的项目进行复制了 开始设计（6）.png

再利用“对齐”调整一下多个组件之间的位置

开始设计（7）.png

利用上面的小技巧，画完草图上的上百个组件也是很快的。

第五步：建立网页交互

一个一个网页建好以后它们还是孤立的，需要我们建立交互。浏览网页能够从一个页面跳转到另一个页面，互联网才是五彩缤纷的。合理将不同内容放置在多个网页也可以使整个网站变得整洁。现在我们用简单的超链接跳转来建立一个网页交互。

编辑组件栏里面有一个闪电标志，通过这个标志可以建立交互。我们选择交互方式（单击），行为（跳转页面），然后再选择要跳转的页面。 建立交互（1）.png
墨刀有一个简单地跳转页面的方法，选中组件后旁边的闪电标志，将其拖动到要跳转的页面即可。 建立交互（2）.png

总结

万事开头难，这只是一次简单的尝试。学习一门课程先从借鉴他人开始，并且有自己的思考，最重要的是动手去实践。