人机交互
实验报告
题目趣味拼图游戏界面的设计与
实现
学院
专业
姓名
学号
班级
二O一三年一月四日
1．设计内容
1.1趣味拼图：
趣味拼图
1.2面向对象：
儿童
1.3主要功能描述
该系统用Java语言实现，小朋友通过控制鼠标，实现方格的移动。
1.4人机交互设计：
考虑该系统面向小朋友，拼图的难度做的很低，而且操作简单，图片是采用卡通动画上的人物，简单并且能吸引小朋友。考虑到一直点击鼠标会有点枯燥，该系统增加了各种好玩的音效，当点击鼠标，系统会根据不同的情况配有不同的声音，增加了拼图游戏的趣味性。并且小朋友可以选择自己喜欢的模式进行拼图，考虑到面向对象为小朋友，界面很友好，图片的颜色采用了比较鲜艳的颜色，主角卡通，线条清晰，各部分特点明显，也降低了拼图的难度，又不失趣味性，界面的按钮也进行了卡通形象装点。
2. 系统结构
2.1系统主界面：
系统刚开始进去是没有打乱顺序的拼图状态。
2.2系统开始界面：
该界面为打乱谁许后的状态。
2.3系统预览界面：
该界面是为方便小朋友拼图过程中没有记清楚样子设计的，能随时查看。
2.4系统设置：
该功能可以实现选取图片，小朋友可以选择自己喜爱的图片进行拼图。
2.5编码：
后台编码用了Java语言，总共设计了4个类，没有用数据库。
3界面设计
3.1拼图界面
3.1.1界面功能：
拼图主界面，总览全图。
3.1.2截图：
3.1.3操作：
小朋友可以通过点击鼠标实现方块的移动。
3.1.4界面设计的交互思想及交互原则：
为方便拼图，刚开始进入界面是一个没有乱序的图片，小图片大小为
100*100的正方形，看上去比较舒服。考虑到面向对象为小朋友，图片的颜色采用了比较鲜艳的颜色，主角卡通，线条清晰，各部分特点明显。体现了交互性原则。
3.1.5主要代码：
private void init(){
container = this.getContentPane();
//按钮
start = new JButton("开始");
start.setBackground(Color.getHSBColor(0,111,1213));
start.setIcon(new ImageIcon("pictrue/start.png"));
start.addActionListener(this);
preview = new JButton("预览");
preview.setBackground(Color.getHSBColor(321, 102, 002));
preview.setIcon(new ImageIcon("pictrue/preview.png"));
preview.addActionListener(this);
set = new JButton("设置");
set.setBackground(Color.getHSBColor(1111,760,2222));
set.setIcon(new ImageIcon("pictrue/set.png"));
set.addActionListener(this);
//预览面板
panelPreview = new JPanel();
panelPreview.setLayout(null);
Icon icon = new ImageIcon("pictrue/pic_" + MyPanel.pictureID + ".jpg");
JLabel label = new JLabel(icon);
label.setBounds(0, 0, 300, 300);
panelPreview.add(label);
panelNorth = new JPanel();
panelNorth.setLayout(new GridLayout(1, 3));
panelNorth.add(start);
panelNorth.add(preview);
panelNorth.add(set);
myPanel = new MyPanel();
container.add(myPanel, BorderLayout.CENTER);
container.add(panelNorth, BorderLayout.SOUTH);
this.setTitle("拼图小游戏");
this.setLocation(300, 200);
this.setSize(308, 365);
this.setResizable(false);//不可改变窗口大小
this.setVisible(true);
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
}
3.2预览界面
3.2.1功能：
对整个图片整体观看，考虑到如果记不住图形的样子，可以按预览按钮，帮助定位个图片所在区域。
3.2.2截图：
3.2.3操作：
通过点击预览按钮，实现图片的整图预览，接着按钮变为返回字体。
3.2.4界面设计的交互思想及交互原则：
在拼图过程中通过预览，对图片的样子进行再记忆。
3.2.5主要代码：
见3.1.5. 。
3.3 开始界面
3.3.1界面功能：
图片乱序后，进行排列。
3.3.2截图：
