《人机交互技术》实验一《人机交互技术》试验报告
软件091班
王晶
092543
试验一图形用户界面的设计
一试验目的和要求
1)熟识图形用户界面的设计原则
2)利用一种设计工具完成图形化的用户界面设计
二预备学问
图形用户界面又称为WIMP界面,由窗口(windows)、图标(icons)、菜单(menu)、教导设备(pointingdevice)四位一体,形成桌面(desktop),如图所示。
图形用户界面是当前用户界面的主流,广泛应用于各档台式微机和图形工作站。图形用户界面的共同特点是以窗口管理系统为核心,使用键盘和鼠标器作为输入设备。窗口管理系统除了基于可重叠多窗口管理技术外,广泛采纳的另一核心技术是大事驱动(event-driven)技术。
WIMP界面可看作是其次代人机界面,是基于图形方式的人机界面。在WIMP界面中,人被称为用户,人机通过对话进行工作。用户只能使用手这一种交互通道输入信息,通过视觉通道猎取信息。在WIMP界面中,界面的输出可以为静态或动态的二维图形或图像等信息。
这种方式能同时输出不同种类的信息,用户也可以在几个工作环境中切换而不丢失几个工作之间的联系,通过菜单可以执行掌握型和对话型任务。由于引入了图标、按钮和滚动条技术,大大削减键盘输入,提高了交互效率。基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及。
(1)图形用户界面的三个重要思想
1)桌面隐喻(desktopmetaphor)
指在用户界面中用人们熟识的桌面上的图例清晰地表示计算机可以处理的力量。隐喻的表现方法:静态图标、动画、视频
2)所见即所得(WhatYouSeeIsWhatYouGet,WYSIWYG)
显示的用户交互行为与应用程序最终产生的结果是全都的。
3)直接操纵(directmanipulation)
直接操纵是指可以把操作的对象、属性、关系显式地表示出来,用光笔、鼠标、触摸屏或数据手套等教导设备直接从屏幕上猎取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。
(2)设计图形用户界面的原则
1)一般性原则:界面要具有全都性、常用操作要有快捷方式、供应简洁的错误处理、对操作人员的重要操作要有信息反馈、操作可逆、设计良好的联机关心、合理划分并高效地使用显示屏、保证信息显示方式与数据输入方式的协调全都
2)颜色的使用:颜色是一种有效的强化手段,同时具有美学价值。使用颜色时应留意如下几点:限制同时显示的颜色数;画面中活动对象的颜色应鲜亮,而非活动对象应暗淡;尽量避开不相容的颜色放在一起,如黄与蓝,红与绿等,除非作对比时用;若用颜色表示某种信息或对象属性,要使用户理解这种表示,并尽量采纳通用的表示规章。
3)图标的设计:图标是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术,需要在很小的范围内表现出图标的内涵。设计图标时应当着重考虑视觉冲击力,要使用简洁的颜色,利用眼睛对颜色和网点的空间混合效果,做出精彩图标。
4)按钮的设计:设计按钮应当具有交互性,应当有3到6种状态效果(点击时的状态、鼠标放在上面但未点击的状态、点击前鼠标未放在上面时的状态、点击后鼠标未放在上面时的状态、不能点击时的状态、独立自动变化的状态),按钮应具备简洁的图示效果,应能够让使用者产生功能上的关联反应。属于一个群组的按钮应当风格统一,功能差异大的按钮应当有所区分。
5)屏幕布局的设计:设计屏幕布局(Layout)时应当使各功能区重点突出,
应遵循如下几条原则:平衡原则、预期原则、经济原则、挨次原则、规章化6)菜单界面的设计:菜单在图形界面的应用程序中使用得特别普遍,是软件界面设计的一个重要组成方面,描述了一个软件的大致功能和风格。菜单中的选项在功能上与按钮相当,一般具有下列一种或几种类型的选项:命令项、菜单项和窗口项。菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等,其中树状结构菜单是最常见的结构。
设计菜单界面时应留意的一般性原则:功能组织菜单,合理分类,并力求简短,前后全都;合理组织菜单界面的结构与层次;按肯定的规章对菜单项进行排序;菜单选项的标题要力求文字简短、含义明确,并且最好以关键词开头;常用选项要设置快捷键;充分利用菜单选项的使能与禁止、可见与隐蔽属性;使用弹出式菜单。
三试验内容与步骤
(一)试验内容:
利用常用的设计工具(VC/VB/Delphi/PB等)完成一个通用图形用户界面设计,要遵循界面设计的一般原则(全都性、快捷方式、供应错误处理),留意颜色的使用,学会使用图标、按钮、屏幕布局、菜单和对话框的设计
(二)试验步骤
1.设计多个对话框,完成填表输入界面的设计,合理使用图标、按钮、颜色;
2.设计不同形式的菜单,完成对不同对话框的调用;
3.供应简洁的错误处理、联机关心
试验工具:Myeclipse
语言:Java
试验内容:打开,关闭,保存,查找文件
五、试验代码:
importjava.io.*;
importjava.awt.*;
importjava.awt.event.*;
importjavax.swing.*;
importjavax.swing.filechooser.*;
publicclassJFileChooserDemoextendsJFrame{
publicJFileChooserDemo(){
super("使用JFileChooser");
finalJTextAreata=newJTextArea(5,20);
ta.setMargin(newInsets(5,5,5,5));
ta.setEditable(false);
JScrollPanesp=newJScrollPane(ta);
finalJFileChooserfc=newJFileChooser();
JButtonopenBtn=newJButton("打开文件...");
openBtn.addActionListener(newActionListener(){publicvoidactionPerformed(ActionEvente){
intreturnVal=fc.showOpenDialog(
JFileChooserDemo.this);
if(returnVal==JFileChooser.APPROVE_OPTION){Filefile=fc.getSelectedFile();
ta.append("打开:"+file.getName()+".\n");
}elseta.append("取消打开命令.\n");
}
});
JButtonsaveBtn=newJButton("保存文件...");saveBtn.addActionListener(newActionListener(){publicvoidactionPerformed(ActionEvente){
intreturnVal=fc.showSaveDialog(
ta.append("Saving:"+file.getName()+".\n");
}elseta.append("取消保存命令。\n");
JPanelbuttonPanel=newJPanel();
buttonPanel.add(openBtn);
buttonPanel.add(saveBtn);
openBtn.setNextFocusableComponent(saveBtn);saveBtn.setNextFocusableComponent(openBtn);Containerc=getContentPane();
c.add(buttonPanel,BorderLayout.NORTH);
c.add(sp,BorderLayout.CENTER);
publicstaticvoidmain(Stringargs){
JFrameframe=newJFileChooserDemo();
frame.setDefaultCloseOperation(EXIT_ON_CLOSE);frame.pack();
frame.setVisible(true);
六、试验结果:
七、试验思想:
使用JFileChooser类
JFileChooser类供应对文件的打开、关闭等文件操作的标准对话框。
JFileChooser类继承于JComponent类,其构造方法有:
JFileChooser()构造一个指向用户缺省名目的JFileChooser对象。
JFileChooser(FilecurrentDirectory)构造一个以给定File为路径的JFileChooser对象。
构造JFileChooser对象后,要利用该类的方法showOpenDialog()或showSaveDialog()来显示文件打开或文件关闭对话框。它们的格式为:
publicintshowOpenDialog(Componentparent)throwsHeadlessException
publicintshowSaveDialog(Componentparent)throwsHeadlessException
它们的参数都是包含对话框容器的对象。返回值为下面几种状况:
JFileChooser.CANCEL_OPTION表示选择了“撤消”按钮。
JFileChooser.APPROVE_OPTION表示选择了“打开”或“保存”按钮。
JFileChooser.ERROR_OPTION表示消失错误。
在打开或关闭文件对话框中作出选择后,可用JFileChooser类的方法getSelectedFile()返回选取的文件名(File类的对象)。
八、试验总结:
1、设计原则:
使用图形界面GUI(GraphicsUserInterface)
图形界面—用多种媒体显示信息,用直观、便利的GUI标准组件来接收命令。掌握权在用户
界面与操作的风格全都性宽容(容错)性简洁与美观并重2、界面构成:
3、使用嵌套面板:
4、使用Choice下拉选单:
5、使用Scrollbar滚动条:
5、使用联机关心:
风格设计分析:针对用户年轻,更加偏好颜色丰富,但是针对于此软件要求的功能应符合操作简洁。则主要用鼠标点击操作就可以便利的查看文件。虽然要追求界面的时尚和华丽,但是界面过于明丽,简单导致用户视觉疲惫。则轻松的淡蓝色为主配色,灰色系为主。
用户导航显示:简洁明白,文字描述要明白,通过文字和图标协作示意,用户看到按钮,可以快速的明白此按钮功能。布局应当满意用户习惯,结合广阔软件按钮布局方式。
为了保持界面在设计过程中,要求各个界面的风格的统一,先做出表格,列出界面制作统一的原则和规范。