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

《人机交互技术》实验一《人机交互技术》试验报告

软件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、使用联机关心:

风格设计分析:针对用户年轻,更加偏好颜色丰富,但是针对于此软件要求的功能应符合操作简洁。则主要用鼠标点击操作就可以便利的查看文件。虽然要追求界面的时尚和华丽,但是界面过于明丽,简单导致用户视觉疲惫。则轻松的淡蓝色为主配色,灰色系为主。

用户导航显示:简洁明白,文字描述要明白,通过文字和图标协作示意,用户看到按钮,可以快速的明白此按钮功能。布局应当满意用户习惯,结合广阔软件按钮布局方式。

为了保持界面在设计过程中,要求各个界面的风格的统一,先做出表格,列出界面制作统一的原则和规范。

THE END
1.程序员作图工具和技巧,你get了么?我最常用的思维导图软件是XMind,使用方便、主题丰富: 但一般我不会直接在 XMind 中去写思维导图,而是先编写好 Markdown 文档,然后直接在 XMind 中导入文档就能自动根据标题、列表等元素自动生成思维导图了: 我之前的前端、Java、全栈学习路线的思维导图都是用这种方法生成的,自己一个个编辑真的要累死。 https://xie.infoq.cn/article/9da8fc6e9090c946ab746e158
2.界面原型设计工具怎么布局界面界面原型设计工具如何画界面原型图摘要:设计一款软件时,软件界面的设计是很重要的,一般设计初期会使用原型设计工具来进行界面原型设计,并绘制界面原型图。界面原型设计工具布局界面时,主要考虑界面区域的划分、功能区域的规划和作业区的分类;绘制界面原型图则先画好草图,然后通过原型设计工具绘制即可。下面一起来了解一下界面原型设计工具如何画界面原型图吧https://www.maigoo.com/goomai/265856.html
3.用户体验至上:9款软件界面设计工具分享软件设计工具即时设计——可实时在线编辑的专业设计工具 https://ad.js.design/online/ui/?source=csdn&plan=xy805即时设计作为一款专业的在线合作UI设计软件,可以实现视觉效果、互动效果、体验效果的一站式成型,为您的目标用户创造流畅的体验。 轻松绘制原型:借助即时设计社区设计资源和原型模板,开始敏捷高效的工作。与产品经理一https://blog.csdn.net/2301_79599164/article/details/140926262
4.5分钟轻松上手即时设计交互功能即时设计是由国内设计师团队自研的一款协作式 UI 设计工具,全中文操控界面,省去了使用国外复杂设计工具的”水土不服",同时拥有强大的设计功能,集原型、设计、UI\UX、开发交付于一体,可一站式完成产设研无需切换工具,而且支持矢量图性编辑和高保真交互原型。即时设计可导入 Figma、Sketch、XD 等文件,无缝衔接以往工作https://js.design/special/article/instant-design-software.html
5.最全无代码NoCode和低代码LowBildr构建交互式网站的强大方式。界面就像一个设计工具(例如Figma)而不是标准的网站建设 uibakery:使用其可视化构建器构建前端UI组件,并导出格式良好的Angular代 BubbleVisual Web app builder。空间中的领导者。您可以使用Zeroqode的模板开始或使用他们的如何构建教程 https://www.tanmer.com/blog/707
6.软件开发整体方案详解系统各功能之间的界面包括覆盖范围,模块间功能调用涉及到的系统模块及方法,全局数据格式,系统性能要求等。 第五章 系统详细设计 5.1 系统结构设计及子系统划分 对系统的组成及逻辑结构进行设计前确认。 划分系统功能模块或子系统(如果有或者有必要,特别是大型的软件系统)。 https://www.yjbys.com/edu/J2EE/199522.html
7.《优化》优秀教学设计(通用12篇)《优化》优秀教学设计 9 授课题目: Windows优化大师 教学内容: Windows优化大师的使用方法 教学目标: 1、了解系统优化的目的以及目前已有的优化手段; 2、掌握系统优化工具的使用方法以及不同场合不同对象优化时的手段。教学重点:Windows优化大师的使用方法 https://www.ruiwen.com/doc/1231348547.html
8.《界面设计》复习资料19.Sketch自带根据官方规范设计的IOS和Material Design组件库。20.Sketch专门为网页、移动端设计提供优化和支持。21.Sketch是一款能同时满足交互和视觉设计需求的工具。22.使用Sketch自带的Symbol可以很容易地在高、低保真原型图中进行切换。23.Sketch 对于团队说是一款效率很高的设计工具,意味着能快速推进团队创意到具体方https://www.wjx.cn/xz/260641939.aspx
9.ps学习计划精品文本工具使用方法:点击工具栏中的文本工具图标,选中画布上某一位置,直接输入文本。Ctrl+Enter可以完成输入。可以设置文字大小、字体、颜色、排列等多种参数。 二、PS常用技巧 在使用Photoshop进行设计时,有些技巧会让我们的工作更加高效和便捷。 Ctrl+J:复制图层。选中某个图层,按下Ctrl+J即可复制该图层。 https://www.jy135.com/xuexijihua/1974348.html
10.软件开发实习报告(通用10篇)1)帮助界面的实现,使得学生掌握实验平台的使用方法; 2)实验类别的在线远程更新,用户下载量的统计; 3)UI(用户界面)的调整; 四、任务完成情况 经过两个多月的不断学习和努力,实习项目大部分都顺利的完成了; 首先是天气预报的项目,从百度api获取所查询的城市的天气数据,对其进行解析,在展示到界面上的同时保存最近搜https://www.oh100.com/a/202302/6168148.html
11.ps学习计划在今天这个多媒体时代,图像处理软件成为了设计师必备的一项工具。而其中Photoshop是最被广泛使用的一种,据统计全球有超过90%的设计从业者使用Photoshop。相信很多设计学习者都有一个共同的疑问,如何学习学好Photoshop?这就要求我们需要有一个合理的学习计划。 https://www.unjs.com/fanwenwang/gongzuojihuafanwen/xuexijihua/20230908070023_7539347.html
12.axure是什么软件详细介绍axure原型工具axure软件介绍 Axure RP,简称Axure,Axure(发音:Ack-sure)是一款专业的快速原型设计工具,主要用于创建交互式的、高保真度的原型,以及进行用户体验设计和界面设计。帮助设计师和?产品经理快速创建和共享原型,以便团队成员之间进行沟通和反馈。Axure提供了丰富的交互组件和功能,如可交互的按钮、链接、表单元素等,使用户能https://www.bnocode.com/article/what-is-axure-soft.html
13.基于MatlabGUI的模拟带通滤波器的设计AET也有许多公司开发了相关的滤波器设计软件,如 AnsoftDesigner,Filterlab等,但是它们大多数使用起来不容易上手,而且价格比较昂贵。Matlab中的图形界面编程环境GUIDE为用户开发软件界面提供了强有力的工具。在图形界面编程环境GUIDE下,设计好滤波器的设计工具界面后,对界面上各个控件的回调函数进行编写就能设计出交互式滤波器的http://www.chinaaet.com/article/60501
14.普通物理学(一)课程教学大纲使学生掌握库仑定律、电场强度、电势的定义及计算方法,理解静电场高斯定律、环路定理,掌握电场力做功。 第十章 静电场中的导体和电介质 1.教学内容 导体的静电感应、电介质的极化、电容、电容器、电场能量。 2.教学要点 使学生掌握导体静电平衡条件,理解电解质的极化,掌握电容器及其组合的计算方法,掌握电场能量的计算https://physics.suda.edu.cn/6f/8f/c1873a28559/page.htm
15.Aegisub先进的字幕编辑器软件下载您可以通过使用Lua语言来编写宏或导出滤镜来扩展程序的功能。Aegisub本身也内置了一些现成的脚本,便于您更快捷地生成属于您自己的卡拉OK字幕效果。 Aegisub 软件使用方法 1、在本站下载安装Aegisub软件。 2、安装完成后,打开软件界面如图: 3、首先设置字体的颜色、大小、字体、边框、阴影等属性,尽量不要使用中文。 https://huajiakeji.com/software/2020-05/3283.html
16.AltiumDesigner20电路设计与仿真从入门到精通Altium Designer 20作为新一代的板卡级设计软件,以Windows的界面风格为主,同时,Altium Designer 20独一无二的DXP技术集成平台也为设计系统提供了所有工具和编辑器的兼容环境,友好的界面环境及智能化的性能为电路设计者提供了优质的服务。 Altium Designer 20有什么特点?如何安装Altium Designer 20?PCB的总体设计流程有哪https://www.epubit.com/bookDetails?id=UBbf365ac27387
17.Axure中的格式刷使用方法Axure中的格式刷使用方法 大家好,我是小溜,相信很多小伙伴都不知道Axure中怎么使用格式刷,那么为了能给大家带来帮助,下面小溜就来给大家分享下方法,希望本文内容能够给大家带来帮助。 溜溜自学网还有超多“Axure RP”视频课程,欢迎大家点击查看 工具/软件https://zixue.3d66.com/article/details_139687.html
18.BIM软件使用指南:快速入门功能介绍与最佳实践BIM免费教程BIM(Building Information Modeling)是一种基于数字化建模的技术和过程,它提供了一种综合的、协调的建筑设计、施工和运维的方法。BIM软件是实现BIM技术的关键工具,它能够帮助建筑设计师、工程师和施工人员更好地协同工作,提高项目质量和效率。本文将详细介绍BIM软件的使用指南,包括快速入门、功能介绍和最佳实践。 https://m.tuituisoft.com/bim/62162.html
19.7000字超多神器!腾讯设计师也在用的高效设计工具优设网随着云计算的发展,界面设计工具也在逐步走向云端化。设计从本地转向云端,不再依赖于本地硬件的性能,云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制,只要有网络,设计师可以随时随地的工作,临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。 设计文件的共享从传送本地文件给对方,变成发送链https://www.uisdc.com/design-tools
20.MasterGo我们知道 Sketch 和Figma 都是国际流行的设计工具,但 Sketch 仅有 Mac 版,Figma 也因美国制裁禁止大疆使用的事件闹得沸沸扬扬。加上定价都很高,使得这两者都难以适合国人。 MasterGo 是一款能替代 Sketch、Figma、AdobeXD 甚至是 PS 的国产免费 UI / UX 矢量设计工具!它提供了产品界面设计、交互原型制作、网页/https://www.iplaysoft.com/mastergo.html
21.python做232通讯python做通讯软件图2.4 新建工程方法2 图2.5 基本配置 图2.6 工程界面 图2.7 新建一个Py文件 输入文件名之后,然后我们回车,即可在工程目录下创建一个py文件,这里示例的是“mainsample.py”文件,如图2.8所示。 图2.8 程序主界面 3 软件界面设计 3.1 打开设计工具 若您还未配置工具,请点击访问参考 https://blog.51cto.com/u_16213637/7378498
22.共有13款界面原型设计工具开源软件菰☆淚共有13款界面原型设计工具开源软件软件过滤:排序:收录时间|浏览数界面原型图绘制工具PencilPencil 是一款开源的原型图绘制工具,手绘风格的,就像自己在纸上画的那样。Pencil 还可以用来绘制各种架构图和流程图,同时还提供 Firefox 的插件(点击这里安装)。更多Pencil信https://www.cnblogs.com/xly1208/p/3464666.html