《人机交互技术》实验一docx.docx

1、人机交互技术实验一docx人机交互技术 实验报告软件 091 班王晶092543实验一图形用户界面的设计实验目的和要求1)熟悉图形用户界面的设计原则2)利用一种设计工具完成图形化的用户界面设计 预备知识图形用户界面又称为 WIMP界面，由窗口(windows)、图标(icons)、菜单(menu)指点设备(pointing device)四位一体，形成桌面(desktop)，如图所示。图形用户界面是当前用户界面的主流，广泛应用于各档台式微机和图形工作 站。图形用户界面的共同特点是以窗口管理系统为核心， 使用键盘和鼠标器作为输入设备。窗口管理系统除了基于可重叠多窗口管理技术外， 广泛采用的另一核

2、心技术是事件驱动(event-driven)技术。WIMP界面可看作是第二代人机界面，是基于图形方式的人机界面。在WIMP界面中，人被称为用户，人机通过对话进行工作。用户只能使用手这一种 交互通道输入信息，通过视觉通道获取信息。在 WIMP界面中，界面的输出可 以为静态或动态的二维图形或图像等信息。这种方式能同时输出不同种类的信息，用户也可以在几个工作环境中切换而 不丢失几个工作之间的联系，通过菜单可以执行控制型和对话型任务。 由于引入 了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。基于鼠标和 图形用户界面的交互技术极大地推动了计算机技术的普及。(1)图形用户界面的三个重要思想1

3、)桌面隐喻 (desktop metaphor) 指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理 的能力。 隐喻的表现方法 :静态图标、动画、视频2)所见即所得 (What You See Is What You Get，WYSIWYG) 显示的用户交互行为与应用程序最终产生的结果是一致的。3)直接操纵 (direct manipulation) 直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠 标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。 直接操纵的对象是命令、数据或是对数据的某种操作。(2)设计图形用户界面的原则1) 一般性原则

4、：界面要具有一致性、常用操作要有快捷方式、提供简单的 错误处理、 对操作人员的重要操作要有信息反馈、 操作可逆、设计良好的联机帮 助、合理划分并高效地使用显示屏、 保证信息显示方式与数据输入方式的协调一 致2) 颜色的使用： 颜色是一种有效的强化手段，同时具有美学价值。使用颜 色时应注意如下几点：限制同时显示的颜色数；画面中活动对象的颜色应鲜明， 而非活动对象应暗淡；尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等， 除非作对比时用； 若用颜色表示某种信息或对象属性，要使用户理解这种表示， 并尽量采用通用的表示规则。3)图标的设计： 图标是可视地表示实体信息的简洁、抽象的符号。图标设计 是方寸

5、艺术， 需要在很小的范围内表现出图标的内涵。 设计图标时应该着重考虑 视觉冲击力， 要使用简单的颜色， 利用眼睛对色彩和网点的空间混合效果， 做出 精彩图标 。4)按钮的设计： 设计按钮应该具有交互性， 应该有 3 到 6 种状态效果 (点击 时的状态、 鼠标放在上面但未点击的状态、 点击前鼠标未放在上面时的状态、 点 击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态 )，按钮应具备简洁的图示效果， 应能够让使用者产生功能上的关联反应。 属于一个群 组的按钮应该风格统一，功能差异大的按钮应该有所区别。5)屏幕布局的设计： 设计屏幕布局(Layout)时应该使各功能区重点突出 ，

6、应遵循如下几条原则：平衡原则、预期原则、经济原则、顺序原则、规则化6） 菜单界面的设计： 菜单在图形界面的应用程序中使用得非常普遍，是软 件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。 菜单中 的选项在功能上与按钮相当， 一般具有下列一种或几种类型的选项： 命令项、 菜 单项和窗口项。 菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、 网状结构菜单等，其中树状结构菜单是最常见的结构。设计菜单界面时应注意的一般性原则： 功能组织菜单， 合理分类， 并力求简 短，前后一致； 合理组织菜单界面的结构与层次； 按一定的规则对菜单项进行排 序；菜单选项的标题要力求文字简短、 含义明

7、确， 并且最好以关键词开始； 常用 选项要设置快捷键； 充分利用菜单选项的使能与禁止、 可见与隐藏属性； 使用弹 出式菜单 。7） 填表输入界面的设计： 在处理大量相关数据的场合下，需要输入一系列 的数据，这时填表输入界面是最理想的数据输入界面。 在设计填表输入界面时应 遵循的原则： 一致性；有含义的表格标题； 使用易于理解的指导性说明文字； 栏 目按逻辑分组排序； 表格的组织结构和用户任务相一致； 光标移动方便； 出错提 示；提供帮助；表格显示应美观、清楚，避免过分拥挤。三 实验内容与步骤（一） 实验内容：利用常用的设计工具 （VC/VB/Delphi/PB 等） 完成一个通用图形用户界面设

8、 计，要遵循界面设计的一般原则 （一致性、快捷方式、 提供错误处理 ） ，注意颜色 的使用，学会使用图标、按钮、屏幕布局、菜单和对话框的设计（二）实验步骤 1设计多个对话框，完成填表输入界面的设计，合理使用图标、按钮、颜 色；2设计不同形式的菜单，完成对不同对话框的调用； 3提供简单的错误处理、联机帮助四、实验相关：实验工具： Myeclipse语言： Java 实验内容：打开，关闭，保存，查找文件五、实验代码：import java.io.*;import java.awt.*;import java.awt.event.*;import javax.swing.*;import javax

9、.swing.filechooser.*;public class JFileChooserDemo extends JFrame public JFileChooserDemo() super( 使用 JFileChooser);final JTextArea ta = new JTextArea(5,20); ta.setMargin(new Insets(5,5,5,5);ta.setEditable(false);JScrollPane sp = new JScrollPane(ta); final JFileChooser fc = new JFileChooser();JButto

10、n openBtn = new JButton( 打开文件 .);openBtn.addActionListener(new ActionListener()public void actionPerformed(ActionEvent e) int returnV al = fc.showOpenDialog(JFileChooserDemo.this);if (returnV al = JFileChooser.APPROVE_OPTION) File file = fc.getSelectedFile();ta.append(打开：+ file.getName() + .n); else

11、 ta.append(”取消打开命令.n););JButton saveBtn = new JButton( 保存文件 .); saveBtn.addActionListener(new ActionListener()public void actionPerformed(ActionEvent e)int returnVal = fc.showSaveDialog(JFileChooserDemo.this);if (returnV al = JFileChooser.APPROVE_OPTION)File file = fc.getSelectedFile();ta.append(Sav

12、ing: + file.getName() + .n); else ta.append( 取消保存命令。 n););JPanel buttonPanel = new JPanel();buttonPanel.add(openBtn); buttonPanel.add(saveBtn);openBtn.setNextFocusableComponent(saveBtn); saveBtn.setNextFocusableComponent(openBtn);Container c = getContentPane();c.add(buttonPanel, BorderLayout.NORTH);

13、c.add(sp, BorderLayout.CENTER);public static void main(String args) JFrame frame = new JFileChooserDemo();frame.setDefaultCloseOperation(EXIT_ON_CLOSE); frame.pack();frame.setVisible(true);六、实验结果：名祢倉本地砒盘鬧萱看:大小顷目类型繼改日期a 2 8=此处为运行程序后 的第一个界面。点击“打开文件”之后, 出现的界面，有下拉菜 单，和相应的工具栏。Java口 messages 口 music 口 pho

14、tospictures 口 PPt 口丸三 rH*ira夹夹夹夹夹夹夹主201210/18. 201Z9/23 仃. 2012/1 C/21 201；/10/21 2012122., 2012/7/21 1, 201Z/10/24.文件名：Dr.COLI带认证喜户端nk文件类型：所有丈件第一个菜单按钮为“向 上一级”，即返回功能第二个菜单按钮为“显 示桌面”按钮，点击后 会出现桌面中的相应文 件。第三个菜单按钮为“创 建新文件夹”快捷方式, 点击后会相应生成新建 文件夹。第四个菜单按钮为“列 表”按钮，将文件以列 表形式列出。口 Desktop賣看名称大小顷目类型瀏曰期详细E文件类型：斫有文件

15、在菜单界面中另一个按 钮为“保存文件”按钮。咚存HD&sktop 回同叵麗匡( Desktop保存:尢小顷目类型 低为日期库 awia lenovo 计Ml 网缩快捱方式12-10-11件件性2012/10/222012/10/24.“文件型型:傑存 职消点击“保存文件”按钮 后，进入保存文件界面， 可选择相应的保存位七、 实验思想：使用 JFileChooser 类JFileChooser类提供对文件的打开、关闭等文件操作的标准对话框。JFileChooser 类继承于JComponent类，其构造方法有：JFileChooser。 构造一个指向用户缺省目录的 JFileChooser 对象

16、。JFileChooser(File curren tDirectory) 构造一个以给定 File 为路径的 JFileChooser对象。构造 JFileChooser 对象后，要利用该类的方法 showOpenDialog()或 showSaveDialog()来显示文件打开或文件关闭对话框。它们的格式为：public int showOpe nDialog(Comp onent pare nt)throws HeadlessExcepti onpublic int showSaveDialog(Comp onent pare nt)throws HeadlessExcepti on它们

17、的参数都是包含对话框容器的对象。返回值为下面几种情况：JFileChooser.CANCEL_OPTION 表示选择了“撤消”按钮。JFileChooser.APPROVE_OPTION表示选择了 “打开”或“保存”按钮。JFileChooser.ERROR_OPTION 表示出现错误。在打开或关闭文件对话框中作出选择后，可用JFileChooser 类的方法getSelectedFile() 返回选取的文件名(File类的对象)。八、 实验总结：1、设计原则:使用图形界面 GUI (Graphics User In terface)图形界面一用多种媒体显示信息，用直观、方便的 GUI标准组件

18、来接收命令。控制权在用户界面与操作的风格一致性宽容(容错)性简洁与美观并重4、使用Choice下拉选单:面板1面板2面板35、使用Scrollbar 滚动条:5、使用联机帮助:Scrollbar 滚动条联机帮助八、实验总结:风格设计分析：针对用户年轻，更加偏好色彩丰富， 但是针对于此软件要求的功能应符合操作简单。则主要用鼠标点击操作就可以方便的查看文件。 虽然要追求界面的时尚和华丽，但是界面过于艳丽，容易导致用户视觉疲劳。则轻松的淡蓝色为主配色，灰色系为主。用户导航显示： 简单明了，文字描述要明了，通过文字和图标配合示意， 用户看到按钮,可以快速的明白此按钮功能。布局应该满足用户习惯，结合广大

19、软件按钮布局方式。为了保持界面在设计过程中， 要求各个界面的风格的统一， 先做出表格，列出界面制作统一的原则和规范。框体颜色外边框输入框按钮主界面线条，淡色，50%灰色，淡色，30%线条，淡色，50%灰白色，80%子界面线条，淡色，50%灰色，淡色，30%线条，淡色，50%灰白色，80%文字部分标题文字输入框文字采单文字帮助文字字体TrueTypeTrueTypeTrueTypeTrueType大小五号五号五号五号颜色黑色灰色，50%黑色黑色九、对自已设计界面的可用性评估:在进入界面开始，会有导航，由于主要面对的用户群是广大的学生， 都有一定电脑操作 基础的人群，设计的这个界面简洁，按钮文字很清楚的描述了所带的功能， 用户会比较快的 时间内掌握如何使用。此界面清爽，颜色柔和，并且增加了一些小工具结合良好的界面， 估计用户对这款软件会比较满意。此界面按钮和字体设计比较大， 排版也很清晰，在很好满足功能的同时尽可能划分不同功能的区域于固定位置，这样可以避免由于界面过于繁杂和密集导致用户产生疲劳感， 而且各种功能的实现基本都是通过主界面的导航实现的， 这样可以使用户方便简捷的操作， 从而让用户得到较好的用户体验。