人机交互--拼图游戏实验报告.doc
人机交互实验报告题 目 趣味拼图游戏界面的设计与 实现 学 院 专 业 姓 名 学 号 班 级 二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截图：3.3.3操作：点击开始按钮后，图片将随机乱序排列，小朋友点击小图片按钮，图片便会往相邻的空格子移动。3.3.4界面设计的交互思想及交互原则：格子的大小 是经过实验的，此大小既清楚又使图片显得漂亮，布局也是经过调试很多次代码找到的效果好的布局。该功能加了声音特效，点击按钮会发出趣味声音，增强趣味性。3.3.5主要代码：public void mousePressed(MouseEvent arg0) / 方格的鼠标事件，因为用到了MyCanvas中的一些方法，因此没有在card类中处理鼠标事件click1 = new AePlayWave("didi.wav");click2 = new AePlayWave("sheep.wav");Card button = (Card) arg0.getSource();int x1 = button.getBounds().x;/ 得到所单击方格的坐标int y1 = button.getBounds().y;int x2 = cardNull.getBounds().x;/ 得到空方格的坐标int y2 = cardNull.getBounds().y;if (x1 = x2 && y1 - y2 = 100) / 进行比较，如果满足条件则进行交换click1.start();button.move("UP", 100); else if (x1 = x2 && y1 - y2 = -100) click1.start();button.move("DOWN", 100); else if (x1 - x2 = 100 & y1 = y2) click1.start();button.move("LEFT", 100); else if (x1 - x2 = -100 && y1 = y2) click1.start();button.move("RIGHT", 100); else click2.start();return;cardNull.setLocation(x1, y1);this.repaint();if (this.isFinish() / 进行是否完成的判断/ 播放音乐success = new AePlayWave("success.wav");success.start();JOptionPane.showMessageDialog(this, "拼图完成，太棒了！");for (int i = 0; i < 8; i+)cardi.removeMouseListener(this);/ 如果已完成，撤消鼠标事件，鼠标单击方格不在起作用hasAddActionListener = false;3.4设置界面3.4.1功能：通过设置，小朋友可以选择自己喜欢的卡通人物，目前只用了三个卡通人物，还可以添加更多。3.4.2截图：3.4.3操作：通过点击下拉列表的项目，选择喜欢的卡通人物拼图。3.4.4主要代码：public void actionPerformed(ActionEvent arg0) / 对三个按钮事件的处理JButton button = (JButton) arg0.getSource();if (button = start) myPanel.Start(); else if (button = preview) if (button.getText() = "预览") container.remove(myPanel);container.add(panelPreview);panelPreview.updateUI();container.repaint();button.setLabel("返回"); else container.remove(panelPreview);container.add(myPanel);container.repaint();button.setLabel("预览"); else if (button = set) / 修改所选图片Choice pic = new Choice();pic.add("喜羊羊");pic.add("美羊羊");pic.add("懒羊羊");int i = JOptionPane.showConfirmDialog(this, pic, "选择图片",JOptionPane.OK_CANCEL_OPTION);if (i = JOptionPane.YES_OPTION) MyPanel.pictureID = pic.getSelectedIndex() + 1;myPanel.reLoadPictrue();Icon icon = new ImageIcon("pictrue/pic_" + MyPanel.pictureID+ ".jpg");JLabel label = new JLabel(icon);label.setBounds(0, 0, 300, 300);panelPreview.removeAll();panelPreview.add(label);panelPreview.repaint();3.5完成界面：3.5.1功能：拼图完成进行提示。3.5.2截图：3.5.3操作：点击确定回主界面。3.5.4主要代码：public boolean isFinish() / 判断是否拼合成功 for (int i = 0; i < 8; i+) int x = cardi.getBounds().x;int y = cardi.getBounds().y;if (y / 100 * 3 + x / 100 != i)return false;return true;3.5.5界面设计的设计思想及交互原则：该界面是完成拼图后的提示对话框，为了使增加趣味，配了对应的音效。4. 总结4.1 交互界面设计的主要思想：软件界面人机交互的输入输出设计：成功的人机交互软件界面离不开人机交互过程中输入与输出界面的优秀设计。一致性原则：人机交互界面的一致性主要体现在输入输出时,交互输入输出界面效果的一致性,具体就是指软件系统内部具有相似的界面外观、布局、相似的人机交互方式以及相似的信息显示格式等。屏幕窗口：屏幕窗口的设计是人机交互界面设计必须重点考虑的内容之一,要在屏幕窗口上对各区域的分布进行合理设计,按信息的重要性与清晰程度进行科学安排,使窗口界面清爽大气。界面效果：界面效果是人机交互界面最终效果的具体体现。单调的文本和黑白色容易导致用户快速疲劳;有颜色、图像等媒体的界面可以增加视觉上的感染力,减少疲劳感;图形更具有直观、形象、信息量大的优点。因此,使用多媒体来表示、比喻某些实体或操作,可使用户的操作及其观感更直接、可见和逼真,增强软件系统的可理解性和易学易用性。4.2设计体会：通过本次课程设计，更深入了解到界面设计是在一个系统中是至关重要的，不同的人群，有着不同的需求。在做面向儿童的系统时，我要综合考虑儿童的需求，然后进行界面设计。设计过程中，不仅要考虑系统的功能，而且要考虑界面色彩的搭配，图片的选取，音效的设置，布局的管理，操作的简洁性，总之就是考虑用户的一切需求，才能着实现系统。由此看出，需求分析在系统中也是至关重要的。而系统完成后交给用户使用，首当其冲的便是界面，所以，在对功能进行需求分析的同时，也要对界面进行详细的设计，这样才能交给用户一个满意的系统。9
