人机交互与界面设计 第1章ppt课件.ppt
《人机交互与界面设计 第1章ppt课件.ppt》由会员分享,可在线阅读,更多相关《人机交互与界面设计 第1章ppt课件.ppt(134页珍藏版)》请在三一办公上搜索。
1、人机交互与界面设计,交互,设计,任课教师:范艳芳邮箱:,教学目标,掌握人机交互及界面设计的基础知识具备初步进行Web系统前端开发的能力能够在Web系统开发过程中遵循界面设计相关原则,2022/11/17,2,学生作品1,2022/11/17,3,学生作品2,2022/11/17,4,学生作品3,2022/11/17,5,课程安排,课时安排:讲课22学时,上机10学时课程性质:专业任选课考核方式:总评成绩=考试成绩70%+ 实验成绩20%+平时成绩10%考试方式:开卷上机安排:12,13,15,16,17(周四8-9节,计算中心B机房)教材:Web程序设计(第3版)(吉根林等主编)参考资料:人机
2、交互基础教程(第2版)(孟祥旭等编著)、软件人机界面设计(陈启安主编)等,2022/11/17,6,课件邮箱,Email: 密码: 20132013,2022/11/17,7,课程内容,第 1 章 人机交互基础第 2 章 Web应用基础 第 3 章 浏览器端交互程序设计第 4 章 服务器端交互程序设计,2022/11/17,8,第1章 人机交互基础,学习要点:理解人机交互、人机界面的基本概念了解人机交互与其他学科的关系以及人机交互的研究内容掌握人机交互发展的三个阶段掌握Web界面的设计原则理解Web界面要素的设计,2022/11/17,9,目 录,1.1 人机交互基础知识 1.2 界面设计,2
3、022/11/17,10,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,11,1.1.1 人机交互的概念,人机交互(Human-Computer Interaction,HCI)是关于设计、评价和实现供人们使用的交互式系统,且围绕这些方面的主要现象进行研究的学科。狭义的人机交互技术主要研究人与计算机之间的信息交换,主要包括人到计算机和计算机到人的信息交换两部分。,2022/11/17,12,输入信息,输出信息,键盘、鼠标、操纵杆、数据服装、眼动
4、跟踪器、数据手套、压力笔,以及手、脚、声音、姿势或身体的动作等。,打印机、绘图仪、显示器、音箱等,1.1.1 人机交互的概念,人机交互与人机界面人机交互是指人与计算机系统之间的信息交换,它是人与计算机之间各种符号和动作的双向信息交换;人机界面(又称用户界面或使用者界面)是指人与计算机系统之间的通信媒介或手段,它是人机双向信息交换的支持软件和硬件;人机交互致力于人与计算机的协调,旨在消融这两个智能系统间的通讯和对话界线,使得人与机器的信息交流便捷而通畅。人机交互是通过人机界面实现的,在界面开发过程中,有时把它们作为同义词使用。,2022/11/17,13,1.1.1 人机交互的概念,人机交互与人
5、机界面从信息传递的角度来看,用户界面的任务是为人类的感觉和效应通道与计算机的感知和输出机制提供通信接口。从信息转换的角度来看,用户界面的作用是实现“用户认知空间”与“计算机信息处理空间”间信息的双向映射。,2022/11/17,14,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,15,1.1.2 人机交互与其他学科的关系,人机交互与认知心理学、人机工程学、多媒体技术和虚拟现实与增强现实技术密切相关。认知心理学与人机工程学是人机交互技术的理论基础
6、;多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透。,2022/11/17,16,1.1.2 人机交互与其他学科的关系,认知心理学研究人们如何获得外部世界信息,信息在人脑内如何表示并转化为知识,知识怎样存储又如何用来指导人们的注意和行为。将人看作是一个信息加工的系统,认知就是信息加工,包括感觉输入的编码、贮存和提取的全过程。涉及心理活动的全过程-从感觉到知觉、识别、注意、学习、记忆、概念的形成、思维、表象、回忆、语言、情绪发展和过程。了解认知心理学原理可以指导人们进行人机交互界面设计。,2022/11/17,17,注意是认知过程的一部分,通常是指选择性注意,即有选择的加工某些刺激
7、而忽视其他刺激的倾向。如:侧耳倾听某人说话,忽略其他人的交谈。,1.1.2 人机交互与其他学科的关系,人机工程学把人机环境系统作为研究的基本对象,运用生理学、心理学和其它有关学科知识,根据人和机器的条件和特点,合理分配人和机器承担的操作职能,并使之相互适应,从而为人创造出舒适和安全的工作环境,使工效达到最优的一门综合性学科。,2022/11/17,18,1.1.2 人机交互与其他学科的关系,多媒体技术是利用计算机对文本、图形、图像、声音、动画、视频等多种信息集成在一起的技术。 动画、音频、视频等动态媒体,大大丰富了计算机表现信息的形式,提高了用户接受信息的效率。多媒体带来的信息冗余性还可以消除
8、人机通信过程中的歧义性。多通道人机交互研究的兴起,将进一步提高计算机的信息识别、理解能力,提高人机交互的效率和用户友好性,将人机交互技术和用户界面设计引向更高的境界。,2022/11/17,19,视线、语音、表情、动作、眼神等,1.1.2 人机交互与其他学科的关系,虚拟现实技术虚拟现实技术是借助于计算机技术及硬件设备,建立具有高度真实感的虚拟环境,使人们通过视觉、听觉、触觉、味觉、嗅觉等感官在其中看、听、触、闻起来像真实的,以产生身临其境的感觉的一种技术。自然和谐的交互方式是虚拟现实技术的一个重要研究内容,其目的是使人能以声音、动作、表情等自然方式与虚拟世界中的对象进行交互。,2022/11/
9、17,20,1.1.2 人机交互与其他学科的关系,增强现实技术把原本在现实世界的一定时间空间范围内很难体验到的实体信息(视觉信息,声音,味道,触觉等),通过科学技术模拟仿真后再叠加到现实世界被人类感官所感知,从而达到超越现实的感官体验,这种技术叫做增强现实技术,简称AR技术。,2022/11/17,21,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,22,1.1.3 人机交互研究内容,人机交互界面表示模型与设计方法(Model and Meth
10、odology)一个交互界面的好坏,直接影响到软件开发的成败。友好人机交互界面的开发离不开好的交互模型与设计方法。因此,研究人机交互界面的表示模型与设计方法,是人机交互的重要研究内容之一。可用性分析与评估(Usability and Evaluation)可用性是交互式IT产品/系统的重要质量指标,指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度,即用户能否用产品完成他的任务,效率如何,主观感受怎样,实际上是从用户角度所看到的产品质量,是产品竞争力的核心。人机交互系统的可用性分析与评估的研究主要涉及到支持可用性的设计原则和可用性的评估方法等。,2022/11/17,23,1.1
11、.3 人机交互研究内容,多通道交互技术(Multi-Channel)在多通道交互中,用户可以使用语音、手势、眼神、表情等自然的交互方式与计算机系统进行通信。多通道交互主要研究多通道交互界面的表示模型、多通道交互界面的评估方法以及多通道信息的融合等。其中,多通道信息整合是多通道用户界面研究的重点和难点。认知与智能用户界面(Intelligent User Interface,IUI)智能用户界面的最终目标是使人机交互和人人交互一样自然、方便。上下文感知、眼动跟踪、手势识别、三维输入、语音识别、表情识别、手写识别、自然语言理解等都是认知与智能用户界面需要解决的重要问题。,2022/11/17,24
12、,1.1.3 人机交互研究内容,移动界面设计(Mobile and Ubicomp)移动计算(Mobile Computing)、普适计算(Ubiquitous Computing)等对人机交互技术提出了更高的要求,面向移动应用的界面设计问题已成为人机交互技术研究的一个重要应用领域。针对移动设备的便携性、位置不固定性和计算能力有限性以及无线网络的低带宽高延迟等诸多的限制,研究移动界面的设计方法,移动界面可用性与评估原则,移动界面导航技术,以及移动界面的实现技术和开发工具,是当前的人机交互技术的研究热点之一。,2022/11/17,25,1.1.3 人机交互研究内容,群件(Groupware)群
13、件是指帮助群组协同工作的计算机支持的协作环境,主要涉及个人或群组间的信息传递、群组中的信息共享、业务过程自动化与协调,以及人和过程之间的交互活动等。目前与人机交互技术相关的研究主要包括:群件系统的体系结构、计算机支持交流与共享信息的方式、交流中的决策支持工具、应用程序共享以及同步实现方法等内容。Web设计(Web-Interaction)重点研究Web界面的信息交互模型和结构,Web界面设计的基本思想和原则,Web界面设计的工具和技术,以及Web界面设计的可用性分析与评估方法等内容。,2022/11/17,26,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科
14、的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,27,1.1.4 人机交互的发展历史,人机交互的发展过程,是人适应计算机到计算机不断地适应人的发展过程。它经历了几个阶段:,图形用户界面,自然和谐的交互,命令行,2022/11/17,28,1.1.4 人机交互的发展历史,语言命令交互阶段计算机语言经历了由最初的机器语言,而后是汇编语言,直至高级语言的发展过程。这个过程也可以看作早期的人机交互的一个发展过程。机器语言和汇编语言对使用者提出了较高的要求,且使用时效率低下,容易出错。高级语言使用人们比较习惯的符号形式描述计算过程,降低
15、了对人的要求。命令行界面可以看作是第一代人机界面。输入信息为数据和命令信息,输出信息以字符为主。,2022/11/17,29,1.1.4 人机交互的发展历史,图形用户界面(GUI)交互阶段图形用户界面(Graphical User Interface,GUI)的出现,使人机交互方式发生了巨大变化。GUI 的主要特点是桌面隐喻、WIMP(Window,Icon,Menu,Pointing Device)技术、直接操纵和“所见即所得(WYSIWYGWhat You See Is What You Get)”。与命令行界面相比,图形用户界面的人机交互自然性和效率都有较大的提高。,2022/11/17
16、,30,指用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。,人机交互领域最普遍的电脑互动界面:包括视窗、图标、菜单、定位设备。,指可以把操作的对象、属性、关系显式地表示出来,用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。,在WYSIWYG交互界面中,其所显示的用户交互行为与应用程序最终产生的结果是一致的。,1.1.4 人机交互的发展历史,自然和谐的人机交互阶段随着虚拟现实、移动计算、普适计算等技术的飞速发展,自然和谐的人机交互方式得到了一定的发展。基于语音、手写体、姿势、视线跟踪、表情等输入手段的多通道交互是其主要特点,其目的是使人能以声音、
17、动作、表情等自然方式进行交互操作。,笔式交互设备,语音交互设备,视觉交互设备,虚拟环境中的交互设备,触觉交互设备,2022/11/17,31,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,32,1.1.5 人机交互的应用,制造业在制造业领域,人机交互技术已用于产品设计、装配仿真等各个环节,利用立体投影系统等各种交互设备,构建产品的虚拟仿真平台。,2022/11/17,33,法国标志雪铁龙公司的工业仿真系统平台,可进行汽车设计的检视、虚拟装配与协
18、同项目的检测等等。,1.1.5 人机交互的应用,教育科研已有一些科研机构研发出沉浸式的虚拟世界,通过和谐自然的交互操作手段,让学习者在虚拟世界自如地探索未知世界。,2022/11/17,34,图示为一个沉浸式协同环境,可以支持儿童建造一个虚拟花园,并通过佩戴立体眼镜沉浸在一个虚拟场景中,进行播种、浇水、调整光照以及观察植物的生长等。,1.1.5 人机交互的应用,军事军事战略战术演练和培训领域是刺激交互技术发展的源动力。使用计算机仿真技术不仅降低成本而且可方便地改变环境和条件,适用于特殊,危险等环境。,2022/11/17,35,F-35战斗机是第一种在座舱里取消了平视显示器(HUD)的量产战斗
19、机,F-35的飞行员将在其头盔综合显示器(HMD)面罩上的虚拟平板显示器上读取所有数据。,F-35战斗机,F-35的头盔显示器,1.1.5 人机交互的应用,生活生物特征识别技术得到广泛应用。指纹识别和人脸表情识别技术广泛应用于人们日常生活的通信过程或者安全保护。,2022/11/17,36,1.1.5 人机交互的应用,生活苹果iPhone等智能机采用多种交互技术Multi-Touch屏幕凭借电场感应手指的触碰内置方向感应器对动作做出反应,当屏幕方向转变时,方向感应器会自动做出反应并改变显示方式通过距离感应器感应距离,当电话靠近耳边时,自动关闭屏幕以节省电力并防止意外触碰通过环境光线感应器自动调
20、节屏幕亮度根据输入的拼音或笔画建议并预测可能输入的单词或词组通过语音控制功能直接拨打电话或播放音乐,2022/11/17,37,1.1.5 人机交互的应用,文化娱乐在影视制作领域,动作捕捉设备已经得到了广泛应用。如图展示了“加勒比海盗3”制作过程中,运动捕捉实验室场景和最终合成的影片效果。,2022/11/17,38,1.1.5 人机交互的应用,体育运动捕捉系统在体育训练中可以帮助教练员从不同的视角观察和监控运动员的技术动作,并大量地获取某类技术动作的运动参数及生理生化指标等数据,并统计出其运动规律,为科学训练提供标准规范的技术指导。,2022/11/17,39,曲棍球训练系统,小结,人机交互
21、是人与计算机系统之间的双向信息交换;人机界面是人与计算机系统之间的通信媒介或手段。人机交互以认知心理学、人机工程学为基础,与多媒体技术和虚拟、增强现实技术密切相关。人机交互经历了语言命令交互阶段、图形用户界面交互,目前正向着和谐自然的人机交互方向发展。,2022/11/17,40,目 录,1.1 人机交互基础知识 1.2 界面设计,2022/11/17,41,2022/11/17,42,1.2 界面设计,1.2.1 界面设计原则1.2.2 Web界面设计问题的提出1.2.3 Web界面设计原则1.2.4 Web界面要素设计,1.2.1 界面设计原则,命令行界面可以看作是第一代人机界面,其中人被
22、看成操作员,机器只做出被动的反应,人用手操作键盘,输入数据和命令信息,通过视觉通道获取信息,界面输出只能为静态的文本字符。图形界面可看作是第二代人机界面,是基于图形方式的人机界面。由于引入了图标、按钮和滚动条技术,大大减少了键盘输入,提高了交互效率。多通道用户界面则进一步综合采用视觉、语音、手势等新的交互通道、设备和交互技术,使用户利用多个通道以自然、并行、协作的方式进行人机对话,通过整合来自多个通道的、精确的或不精确的输入来捕捉用户的交互意图,提高人机交互的自然性和高效性。,2022/11/17,43,1.2.1 界面设计原则,图形用户界面的主要思想桌面隐喻桌面隐喻是指在用户界面中用人们熟悉
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 人机交互与界面设计 第1章ppt课件 人机交互 界面设计 ppt 课件
链接地址:https://www.31ppt.com/p-1384766.html