《人机交互》实验报告
实验一 图形用户界面的设计
一 实验目的和要求
1) 熟悉图形用户界面的设计原则
2)利用一种设计工具完成图形化的用户界面设计
二 预备知识
图形用户界面又称为WIMP界面，由窗口(windows)、图标(icons)、菜单(menu)、指点设备(pointing device)四位一体，形成桌面(desktop) ，如图所示。
图形用户界面是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(event-driven)技术。
WIMP界面可看作是第二代人机界面，是基于图形方式的人机界面。在WIMP界面中，人被称为用户，人机通过对话进行工作。用户只能使用手这一种交互通道输入信息，通过视觉通道获取信息。在WIMP界面中，界面的输出可以为静态或动态的二维图形或图像等信息。
这种方式能同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失几个工作之间的联系，通过菜单可以执行控制型和对话型任务。由于引入了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及。
(1)图形用户界面的三个重要思想
1）桌面隐喻(desktop metaphor)
指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。 隐喻的表现方法:静态图标、动画、视频
2）所见即所得(What You See Is What You Get，WYSIWYG)
显示的用户交互行为与应用程序最终产生的结果是一致的。
3）直接操纵(direct manipulation)
直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。
(2)设计图形用户界面的原则
1) 一般性原则：界面要具有一致性、常用操作要有快捷方式、提供简单的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机帮助、合理划分并高效地使用显示屏、保证信息显示方式与数据输入方式的协调一致
2) 颜色的使用：颜色是一种有效的强化手段，同时具有美学价值。使用颜色时应注意如下几点：限制同时显示的颜色数；画面中活动对象的颜色应鲜明，而非活动对象应暗淡；尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用； 若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。
3)图标的设计：图标是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标 。
4） 按钮的设计：设计按钮应该具有交互性，应该有3到6种状态效果(点击时的状态、鼠标放在上面但未点击的状态、点击前鼠标未放在上面时的状态、点击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态)，按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。
5） 屏幕布局的设计：设计屏幕布局(Layout)时应该使各功能区重点突出 ,应遵循如下几条原则：平衡原则、预期原则、经济原则、顺序原则、规则化
6） 菜单界面的设计：菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。 菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：命令项、菜单项和窗口项。 菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。
设计菜单界面时应注意的一般性原则：功能组织菜单，合理分类，并力求简短，前后一致；合理组织菜单界面的结构与层次；按一定的规则对菜单项进行排序；菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始；常用选项要设置快捷键；充分利用菜单选项的使能与禁止、可见与隐藏属性；使用弹出式菜单 。
7） 填表输入界面的设计：在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。在设计填表输入界面时应遵循的原则：一致性；有含义的表格标题；使用易于理解的指导性说明文字；栏目按逻辑分组排序；表格的组织结构和用户任务相一致；光标移动方便；出错提示；提供帮助；表格显示应美观、清楚，避免过分拥挤。
实验报告成绩： 指导教师审核（签名）： 年 月 日
一实验内容与步骤
(一) 实验内容：
利用常用的设计工具(VC/VB/Delphi/PB等)完成一个通用图形用户界面设计，要遵循界面设计的一般原则(一致性、快捷方式、提供错误处理)，注意颜色的使用，学会使用图标、按钮、屏幕布局、菜单和对话框的设计
(二)实验步骤
1．设计多个对话框，完成填表输入界面的设计，合理使用图标、按钮、颜色；
2．设计不同形式的菜单，完成对不同对话框的调用；
3．提供简单的错误处理、联机帮助
(三)实验截图
第二篇：人机交互实验报告
学 生 实 验 报 告
（理工类）
课程名称： 人机交互技术 专业班级： 12软件工程(Z)
学生学号： XXX 学生姓名：
所属院部： 软件工程学院 指导教师：
20XX ——20XX学年 第 2 学期
金陵科技学院教务处制
实验报告书写要求
实验报告原则上要求学生手写，要求书写工整。若因课程特点需打印的，要遵照以下字体、字号、间距等的具体要求。纸张一律采用A4的纸张。
实验报告书写说明
实验报告中一至四项内容为必填项，包括实验目的和要求；实验仪器和设备；实验内容与过程；实验结果与分析。各院部可根据学科特点和实验具体要求增加项目。
填写注意事项
（1）细致观察，及时、准确、如实记录。
（2）准确说明，层次清晰。
（3）尽量采用专用术语来说明事物。
（4）外文、符号、公式要准确，应使用统一规定的名词和符号。
（5）应独立完成实验报告的书写，严禁抄袭、复印，一经发现，以零分论处。
实验报告批改说明
实验报告的批改要及时、认真、仔细，一律用红色笔批改。实验报告的批改成绩采用百分制，具体评分标准由各院部自行制定。
实验报告装订要求
实验批改完毕后，任课老师将每门课程的每个实验项目的实验报告以自然班为单位、按学号升序排列，装订成册，并附上一份该门课程的实验大纲。
实验项目名称：图形用户界面设计 实验学时： 8
同组学生姓名： 全班同学 实验地点： A205
实验日期： 20XX/03/26 实验成绩：
批改教师： 批改时间：
一、实验目的和要求
1、实验目的
1) 熟悉图形用户界面的设计原则
2)利用一种设计工具完成图形化的用户界面设计
2、实验要求
（1）记录系统分析及层次结构设计的过程，调试程序要记录调试过程中出现的问题及解决办法；
（2）编写程序要规范、正确，上机调试过程和结果要有记录，不断积累编程及调试经验；
（3）做完实验后给出本实验的实验报告。
二、实验仪器和设备
奔腾以上计算机，Windows XP 、Eclipse
三、实验过程
利用常用的设计工具完成一个简单的绘图软件，要遵循界面设计的一般原则，注意颜色的使用，用户能够利用鼠标绘制直线或圆、矩形等简单的图形，跟踪用户的鼠标移动，实现橡皮筋效果。
主要步骤：
(1) 熟悉开发环境
在本次实验中，我主要用到的工具是Eclipse,但是要用Eclispe必须要有jdk的支持，我首先下载了1.7版本的jdk,然后进行安装并配置了classpath和path环境变量，最后下载到eclipse工具，我就可以进行开发了！
(2) 分析所要实现的功能
根据老师的要求，我要实现的功能有二：
1. 根据鼠标的移动绘制直线
2. 根据鼠标移动绘制圆
在我看来虽然是两个功能，但是实现原理都差不多，主要用到了swing组件和监听器的知识，即在鼠标按下的时候触发监听器记录下鼠标点击位置的坐标，然后在鼠标拖动的过程中触发鼠标拖动监听器记录鼠标拖动到的位置，然后用背景色在原来的位置再绘制一遍图形，也就是覆盖原来的图形，接着在鼠标拖动到的位置处用区别于背景色的颜色再绘制图形，基本上原理就是这样！
(3) 编程实现
首先我写了一个继承JFrame的类Draw类，该类中初始化了窗口中的控件，还包含了一个内部类CDraw类，它继承了Canvas类，内部类中主要设置了监听器用于监听鼠标点击、拖动等事件，当事件被触发事将会记录位置或者绘制图形，具体代码如下：
import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;
importjava.awt.GridLayout;
import java.awt.Point;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.ButtonGroup;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
public classDrawextends JFrame {
privatestatic JRadioButton RBDrawLine,RBDrawRound;
privateint isLine=1;//判断是画直线还是画圆 1代表画直线
publicvoid initView(){
this.setBackground(Color.black);
this.setTitle("画图工具");
this.setLayout(new BorderLayout());
JPanel panel=new JPanel();
RBDrawLine = new JRadioButton("直线",true);
RBDrawRound = new JRadioButton("圆");
ButtonGroup bg = new ButtonGroup(); //按钮组
bg.add(RBDrawLine); //加入按钮组
bg.add(RBDrawRound);
panel.add(RBDrawLine);
panel.add(RBDrawRound);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setSize(600, 400);
this.setVisible(true);
this.add(new Button(),BorderLayout.NORTH);
this.add(panel,BorderLayout.NORTH);
MDrawLine();
judgeRB();
this.setVisible(true);
}
publicvoid judgeRB(){
if(RBDrawLine.isSelected()){
isLine=1;
}else{
isLine=0;
}
}
public void MDrawLine() {
this.getContentPane().add(new CDraw());
}
class CDraw extends Canvas implements MouseListener,MouseMotionListener{
privatestaticfinallongserialVersionUID = 1L;
Point start,end,lastEnd;
public CDraw(){
this.setBackground(Color.magenta);
start=end=lastEnd=null;
this.addMouseListener(this);
this.addMouseMotionListener(this);
}
@Override
publicvoid mouseReleased(MouseEvent e) { //鼠标释放事件
// TODO Auto-generated method stub
end=new Point(e.getX(),e.getY());
repaint();
}
@Override
publicvoid mousePressed(MouseEvent e) { //鼠标按下事件
// TODO Auto-generated method stub
start=new Point(e.getX(),e.getY());
}
@Override
publicvoid mouseExited(MouseEvent e) {
// TODO Auto-generated method stub
}
@Override
publicvoid mouseEntered(MouseEvent e) {
// TODO Auto-generated method stub
}
@Override
publicvoid mouseClicked(MouseEvent e) {
// TODO Auto-generated method stub
}
@Override
publicvoid mouseMoved(MouseEvent e) {
// TODO Auto-generated method stub
}
@Override
publicvoid mouseDragged(MouseEvent e) {
// TODO Auto-generated method stub
lastEnd=end;
//lastStart=start;
end=new Point(e.getX(),e.getY());
repaint();
}
publicvoid paint(Graphics g){
judgeRB();
if(isLine==1){
if(start!=null && lastEnd!=null){
g.setColor(this.getBackground());
g.drawLine(start.x, start.y, lastEnd.x, lastEnd.y);
g.setColor(Color.blue);
g.drawLine(start.x, start.y, end.x, end.y);
}
}else{
if(start !=null && lastEnd!=null){
g.setColor(this.getBackground());
int LDX=Math.abs(lastEnd.x-start.x);
int LDY=Math.abs(lastEnd.y-start.y);
int r1=(int) Math.sqrt(LDX*LDX+LDY*LDY);
g.drawOval(start.x, start.y, r1+r1, r1+r1);
g.setColor(Color.blue);
int DX=Math.abs(end.x-start.x);
int DY=Math.abs(end.y-start.y);
int r2=(int) Math.sqrt(DX*DX+DY*DY);
g.drawOval(start.x, start.y, r2+r2, r2+r2);
}
}
}
publicvoid update(Graphics g){
paint(g);
}
}
}
做完了第一步，基本上就差不多了，接下来再写个测试类进行测试一下就OK啦！具体代码如下：
publicclass Test {
publicstaticvoid main(String args[]){
Draw dr = new Draw();//新建对象
dr.initView();//执行初始化
}
}
四、实验结果与分析
1.我们运行程序可以看到如下界面，界面上部有两个按钮，我们可以通过来回切换按钮来确定是绘制直线还是圆
2、默然情况下直线的checkbox处于选中状态我们可以绘制直线了，还可以实现橡皮筋效果哦
3. 最后我们再来画个圆吧
五、讨论、思考
图形界面程序基于一个无穷的消息循环。直到退出消息时，程序才终止。而控制台程序是一个简单的直线型结构，运行到最后一段代码就停止。
在本次实验中，我主要复习了监听器和swing组件的知识，并体会到了人机交互对程序设计的重要性！