人机交互web界面
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
认知与智能用户界面（Intelligent User Interface，IUI）
智能用户界面的最终目标是使人机交互和人－人交互一样自然、方便。 上下文感知、眼动跟踪、手势识别、三维输入、语音识别、表情识别、 手写识别、自然语言理解等都是认知与智能用户界面需要解决的重要 问题。
《人机交互与界面设计》
将人看作是一个信息加工的系统，认知就是信息加工， 包括感觉输注性入意注的意是编，认码即知有过、选程贮择的存的一和加部提工分某，取些通的刺常全激是过而指程忽选视择。
涉及心理活其动他的刺全激过的倾程向--。-如从：感侧觉耳到倾知听某觉人、说识话别，、注意、 学习、记忆忽、略概其念他的人的形交成谈、。思维、表象、回忆、语言、 情绪发展和过程。
人机交互界面表示模型与设计方法（Model and Methodology）
一个交互界面的好坏，直接影响到软件开发的成败。友好人机交互界面 的开发离不开好的交互模型与设计方法。因此，研究人机交互界面的表 示模型与设计方法，是人机交互的重要研究内容之一。
可用性分析与评估（Usability and Evaluation）
7
课程内容
第 1 章 人机交互基础 第 2 章 Web应用基础 第 3 章 浏览器端交互程序设计 第 4 章 服务器端交互程序设计
《人机交互与界面设计》
2020/5/18
8
第1章 人机交互基础
学习要点：
理解人机交互、人机界面的基本概念 了解人机交互与其他学科的关系以及人机交互的研
究内容 掌握人机交互发展的三个阶段 掌握Web界面的设计原则 理解Web界面要素的设计
《人机交互与界面设计》
2020/5/18
27
1.1.4 人机交互的发展历史
人机交互的发展过程，是人适应计算机到计算机不断 地适应人的发展过程。它经历了几个阶段：
命令行
图形用户界面
自然和谐的交互
《人机交互与界面设计》
2020/5/18
28
1.1.4 人机交互的发展历史
语言命令交互阶段
计算机语言经历了由最初的机器语言，而后是汇编语言，直至 高级语言的发展过程。这个过程也可以看作早期的人机交互的 一个发展过程。
针对移动设备的便携性、位置不固定性和计算能力有限性以及无线网 络的低带宽高延迟等诸多的限制，研究移动界面的设计方法，移动界 面可用性与评估原则，移动界面导航技术，以及移动界面的实现技术 和开发工具，是当前的人机交互技术的研究热点之一。
《人机交互与界面设计》
2020/5/18
25
1.1.3 人机交互研究内容
图形用户界面（GUI）交互阶段
图形用户界面（Graphical User Interface，GUI）的出现，使人机
交互方式发生了巨大变化。GUI 的主要特点是桌面隐喻、
WIMP(Window,Icon,Menu,Pointing Device)技术、直接操纵和“所见
即所得(WYSIWYG—What You See Is What You Get)”。
2020/5/18
24
1.1.3 人机交互研究内容
移动界面设计（Mobile and Ubicomp）
移动计算（Mobile Computing）、普适计算（Ubiquitous Computing） 等对人机交互技术提出了更高的要求，面向移动应用的界面设计问题 已成为人机交互技术研究的一个重要应用领域。
打印机、绘图仪、显示器、音箱等 输出信息
输入信息
键盘、鼠标、操纵杆、数据服装、眼动跟踪
器、数据手套、压力笔，以及手、脚、声音、 姿势或身体的动作等。
《人机交互与界面设计》
2020/5/18
12
1.1.1 人机交互的概念
人机交互与人机界面
人机交互是指人与计算机系统之间的信息交换，它是人与计算 机之间各种符号和动作的双向信息交换；
群件（Groupware）
群件是指帮助群组协同工作的计算机支持的协作环境，主要涉及个人 或群组间的信息传递、群组中的信息共享、业务过程自动化与协调， 以及人和过程之间的交互活动等。
目前与人机交互技术相关的研究主要包括：群件系统的体系结构、计 算机支持交流与共享信息的方式、交流中的决策支持工具、应用程序 共享以及同步实现方法等内容。
《人机交互与界面设计》
2020/5/18
21
1.1 人机交互基础知识
1.1.1 人机交互的概念 1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2020/5/18
22
1.1.3 人机交互研究内容
人机交互与应用
《人机交互与界面设计》
教学目标
掌握人机交互及界面设计的基础知识 具备初步进行Web系统前端开发的能力 能够在Web系统开发过程中遵循界面设计相关原则
《人机交互与界面设计》
2020/5/18
2
学生作品1
《人机交互与界面设计》
2020/5/18
3
学生作品2
《人机交互与界面设计》
可用性是交互式IT产品/系统的重要质量指标，指的是产品对用户来说 有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品 完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到 的产品质量，是产品竞争力的核心。
人机交互系统的可用性分析与评估的研究主要涉及到支持可用性的设计 原则和可用性的评估方法等。
《人机交互与界面设计》
2020/5/18
13
1.1.1 人机交互的概念
人机交互与人机界面
从信息传递的角度来看，用户界面的任务是为人类的感觉和效 应通道与计算机的感知和输出机制提供通信接口。
从信息转换的角度来看，用户界面的作用是实现“用户认知空 间”与“计算机信息处理空间”间信息的双向映射。
《人机交互与界面设计》
《人机交互与界面设计》
2020/5/18
11
1.1.1 人机交互的概念
人机交互（Human-Computer Interaction，HCI）是关于设计、 评价和实现供人们使用的交互式系统，且围绕这些方面的主要现 象进行研究的学科。
狭义的人机交互技术主要研究人与计算机之间的信息交换，主要 包括人到计算机和计算机到人的信息交换两部分。
与 的在命 提WY令高S行。IW人动界Y机界G面交面交相互：单互比领包、界，域括定面最视位图中普窗设形，遍、备其用的图。户电标界脑、面互菜关的指系人可显机以式把交地操互表作自示的然出对性来象，和、用效属光率性笔都、、有较大
《人机交互与界面设计》
2020/5/18
18
1.1.2 人机交互与其他学科的关系
多媒体技术
是利用计算机对文本、图形、图像、声音、动画、视频等多种信息集成 在一起的技术。
动画、音频、视频等动态媒体，大大丰富了计算机表现信息的形式，提 高了用户接受信息的效率。
多媒体带来的信息冗余性还可以消除人机通信过程中的歧义性。 多通道人机交互研究的兴起，将进一步提高计算机的信息识别、理解能
力，提高人机交互的效率和用户友好性，将人机交互技术和用户界面设 计引向更高的视境线界、。语音、表情、动作、眼神等
《人机交互与界面设计》
2020/5/18
19
1.1.2 人机交互与其他学科的关系
虚拟现实技术
虚拟现实技术是借助于计算机技术及硬件设备，建立具有高度 真实感的虚拟环境，使人们通过视觉、听觉、触觉、味觉、嗅 觉等感官在其中看、听、触、闻起来像真实的，以产生身临其 境的感觉的一种技术。
认知心理学与人机工程学是人机交互技术的理论基础；
多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉 和渗透。
多媒体技术
人机交互技术
虚拟和增强 现实技术
认知心理学 《人机交互与界面设计》
人机工程学
2020/5/18
16
1.1.2 人机交互与其他学科的关系
认知心理学
研究人们如何获得外部世界信息，信息在人脑内如何表 示并转化为知识，知识怎样存储又如何用来指导人们的 注意和行为。
人机界面（又称用户界面或使用者界面）是指人与计算机系统 之间的通信媒介或手段，它是人机双向信息交换的支持软件和 硬件；
人机交互致力于人与计算机的协调，旨在消融这两个智能系统 间的通讯和对话界线，使得人与机器的信息交流便捷而通畅。
人机交互是通过人机界面实现的，在界面开发过程中，有时把
它们作为同义词使用。
机器语言和汇编语言对使用者提出了较高的要求，且使用时效 率低下，容易出错。高级语言使用人们比较习惯的符号形式描 述计算过程，降低了对人的要求。
命令行界面可以看作是第一代人机界面。输入信息为数据和命 令信息，输出信息以字符为主。
《人机交互与界面设计》
2020/5/18
29
1.1.4 人机交互的发展历史指用户界面中用人们熟悉的桌 面上的图例清楚地表示计算机 可以处理的能力。
自然和谐的交互方式是虚拟现实技术的一个重要研究内容，其 目的是使人能以声音、动作、表情等自然方式与虚拟世界中的 对象进行交互。
《人机交互与界面设计》
2020/5/18
20
1.1.2 人机交互与其他学科的关系
增强现实技术
把原本在现实世界的一定时间空间范围内很难体验到的实体信息 (视觉信息,声音,味道,触觉等),通过科学技术模拟仿真后再叠加 到现实世界被人类感官所感知,从而达到超越现实的感官体验,这 种技术叫做增强现实技术,简称AR技术。
了解认知心理学原理可以指导人们进行人机交互界面设 计。
《人机交互与界面设计》
2020/5/18
17
1.1.2 人机交互与其他学科的关系
人机工程学
把人—机—环境系统作为研究的基本对象，运用生理学、心理学和其它 有关学科知识，根据人和机器的条件和特点，合理分配人和机器承担的 操作职能，并使之相互适应，从而为人创造出舒适和安全的工作环境， 使工效达到最优的一门综合性学科。
《人机交互与界面设计》
2020/5/18
9
目录
1.1 人机交互基础知识 1.2 界面设计
《人机交互与界面设计》
2020/5/18
10
1.1 人机交互基础知识
1.1.1 人机交互的概念 1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2020/5/18
23
1.1.3 人机交互研究内容
多通道交互技术（Multi-Channel）
在多通道交互中，用户可以使用语音、手势、眼神、表情等自然的交 互方式与计算机系统进行通信。多通道交互主要研究多通道交互界面 的表示模型、多通道交互界面的评估方法以及多通道信息的融合等。 其中，多通道信息整合是多通道用户界面研究的重点和难点。
2020/5/18
14
1.1 人机交互基础知识
1.1.1 人机交互的概念 1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2020/5/18
15
1.1.2 人机交互与其他学科的关系
人机交互与认知心理学、人机工程学、多媒体技术和 虚拟现实与增强现实技术密切相关。
2020/5/18
4
学生作品3
《人机交互与界面设计》
2020/5/18
5
课程安排
课时安排：讲课22学时，上机10学时
课程性质：专业任选课
考核方式：总评成绩=考试成绩×70%+ 实验成绩 ×20%+平时成绩×10%
考试方式：开卷
上机安排：12,13,15,16,17(周四8-9节，计算中心B 机房)
Web设计（Web-Interaction）
重点研究Web界面的信息交互模型和结构，Web界面设计的基本思想和 原则，Web界面设计的工具和技术，以及Web界面设计的可用性分析与 评估方法等内容。
《人机交互与界面设计》
2020/5/18
பைடு நூலகம்26
1.1 人机交互基础知识
1.1.1 人机交互的概念 1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
教材：《Web程序设计（第3版）》（吉根林等主编）
参考资料：《人机交互基础教程（第2版）》（孟祥 旭等编著）、《软件人机界面设计》（陈启安主编） 等
《人机交互与界面设计》
2020/5/18
6
课件邮箱
Email: rjjh13@163.com 密码: 20132013
《人机交互与界面设计》
2020/5/18
智能用户界面的最终目标是使人机交互和人－人交互一样自然、方便。 上下文感知、眼动跟踪、手势识别、三维输入、语音识别、表情识别、 手写识别、自然语言理解等都是认知与智能用户界面需要解决的重要 问题。
《人机交互与界面设计》
将人看作是一个信息加工的系统，认知就是信息加工， 包括感觉输注性入意注的意是编，认码即知有过、选程贮择的存的一和加部提工分某，取些通的刺常全激是过而指程忽选视择。
涉及心理活其动他的刺全激过的倾程向--。-如从：感侧觉耳到倾知听某觉人、说识话别，、注意、 学习、记忆忽、略概其念他的人的形交成谈、。思维、表象、回忆、语言、 情绪发展和过程。
人机交互界面表示模型与设计方法（Model and Methodology）
一个交互界面的好坏，直接影响到软件开发的成败。友好人机交互界面 的开发离不开好的交互模型与设计方法。因此，研究人机交互界面的表 示模型与设计方法，是人机交互的重要研究内容之一。
可用性分析与评估（Usability and Evaluation）
7
课程内容
第 1 章 人机交互基础 第 2 章 Web应用基础 第 3 章 浏览器端交互程序设计 第 4 章 服务器端交互程序设计
《人机交互与界面设计》
2020/5/18
8
第1章 人机交互基础
学习要点：
理解人机交互、人机界面的基本概念 了解人机交互与其他学科的关系以及人机交互的研
究内容 掌握人机交互发展的三个阶段 掌握Web界面的设计原则 理解Web界面要素的设计
《人机交互与界面设计》
2020/5/18
27
1.1.4 人机交互的发展历史
人机交互的发展过程，是人适应计算机到计算机不断 地适应人的发展过程。它经历了几个阶段：
命令行
图形用户界面
自然和谐的交互
《人机交互与界面设计》
2020/5/18
28
1.1.4 人机交互的发展历史
语言命令交互阶段
计算机语言经历了由最初的机器语言，而后是汇编语言，直至 高级语言的发展过程。这个过程也可以看作早期的人机交互的 一个发展过程。
针对移动设备的便携性、位置不固定性和计算能力有限性以及无线网 络的低带宽高延迟等诸多的限制，研究移动界面的设计方法，移动界 面可用性与评估原则，移动界面导航技术，以及移动界面的实现技术 和开发工具，是当前的人机交互技术的研究热点之一。
《人机交互与界面设计》
2020/5/18
25
1.1.3 人机交互研究内容
图形用户界面（GUI）交互阶段
图形用户界面（Graphical User Interface，GUI）的出现，使人机
交互方式发生了巨大变化。GUI 的主要特点是桌面隐喻、
WIMP(Window,Icon,Menu,Pointing Device)技术、直接操纵和“所见
即所得(WYSIWYG—What You See Is What You Get)”。
2020/5/18
24
1.1.3 人机交互研究内容
移动界面设计（Mobile and Ubicomp）
移动计算（Mobile Computing）、普适计算（Ubiquitous Computing） 等对人机交互技术提出了更高的要求，面向移动应用的界面设计问题 已成为人机交互技术研究的一个重要应用领域。
打印机、绘图仪、显示器、音箱等 输出信息
输入信息
键盘、鼠标、操纵杆、数据服装、眼动跟踪
器、数据手套、压力笔，以及手、脚、声音、 姿势或身体的动作等。
《人机交互与界面设计》
2020/5/18
12
1.1.1 人机交互的概念
人机交互与人机界面
人机交互是指人与计算机系统之间的信息交换，它是人与计算 机之间各种符号和动作的双向信息交换；
群件（Groupware）
群件是指帮助群组协同工作的计算机支持的协作环境，主要涉及个人 或群组间的信息传递、群组中的信息共享、业务过程自动化与协调， 以及人和过程之间的交互活动等。
目前与人机交互技术相关的研究主要包括：群件系统的体系结构、计 算机支持交流与共享信息的方式、交流中的决策支持工具、应用程序 共享以及同步实现方法等内容。
《人机交互与界面设计》
2020/5/18
21
1.1 人机交互基础知识
1.1.1 人机交互的概念 1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2020/5/18
22
1.1.3 人机交互研究内容
人机交互与应用
《人机交互与界面设计》
教学目标
掌握人机交互及界面设计的基础知识 具备初步进行Web系统前端开发的能力 能够在Web系统开发过程中遵循界面设计相关原则
《人机交互与界面设计》
2020/5/18
2
学生作品1
《人机交互与界面设计》
2020/5/18
3
学生作品2
《人机交互与界面设计》
可用性是交互式IT产品/系统的重要质量指标，指的是产品对用户来说 有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品 完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到 的产品质量，是产品竞争力的核心。
人机交互系统的可用性分析与评估的研究主要涉及到支持可用性的设计 原则和可用性的评估方法等。
《人机交互与界面设计》
2020/5/18
13
1.1.1 人机交互的概念
人机交互与人机界面
从信息传递的角度来看，用户界面的任务是为人类的感觉和效 应通道与计算机的感知和输出机制提供通信接口。
从信息转换的角度来看，用户界面的作用是实现“用户认知空 间”与“计算机信息处理空间”间信息的双向映射。
《人机交互与界面设计》
《人机交互与界面设计》
2020/5/18
11
1.1.1 人机交互的概念
人机交互（Human-Computer Interaction，HCI）是关于设计、 评价和实现供人们使用的交互式系统，且围绕这些方面的主要现 象进行研究的学科。
狭义的人机交互技术主要研究人与计算机之间的信息交换，主要 包括人到计算机和计算机到人的信息交换两部分。
与 的在命 提WY令高S行。IW人动界Y机界G面交面交相互：单互比领包、界，域括定面最视位图中普窗设形，遍、备其用的图。户电标界脑、面互菜关的指系人可显机以式把交地操互表作自示的然出对性来象，和、用效属光率性笔都、、有较大
《人机交互与界面设计》
2020/5/18
18
1.1.2 人机交互与其他学科的关系
多媒体技术
是利用计算机对文本、图形、图像、声音、动画、视频等多种信息集成 在一起的技术。
动画、音频、视频等动态媒体，大大丰富了计算机表现信息的形式，提 高了用户接受信息的效率。
多媒体带来的信息冗余性还可以消除人机通信过程中的歧义性。 多通道人机交互研究的兴起，将进一步提高计算机的信息识别、理解能
力，提高人机交互的效率和用户友好性，将人机交互技术和用户界面设 计引向更高的视境线界、。语音、表情、动作、眼神等
《人机交互与界面设计》
2020/5/18
19
1.1.2 人机交互与其他学科的关系
虚拟现实技术
虚拟现实技术是借助于计算机技术及硬件设备，建立具有高度 真实感的虚拟环境，使人们通过视觉、听觉、触觉、味觉、嗅 觉等感官在其中看、听、触、闻起来像真实的，以产生身临其 境的感觉的一种技术。
认知心理学与人机工程学是人机交互技术的理论基础；
多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉 和渗透。
多媒体技术
人机交互技术
虚拟和增强 现实技术
认知心理学 《人机交互与界面设计》
人机工程学
2020/5/18
16
1.1.2 人机交互与其他学科的关系
认知心理学
研究人们如何获得外部世界信息，信息在人脑内如何表 示并转化为知识，知识怎样存储又如何用来指导人们的 注意和行为。
人机界面（又称用户界面或使用者界面）是指人与计算机系统 之间的通信媒介或手段，它是人机双向信息交换的支持软件和 硬件；
人机交互致力于人与计算机的协调，旨在消融这两个智能系统 间的通讯和对话界线，使得人与机器的信息交流便捷而通畅。
人机交互是通过人机界面实现的，在界面开发过程中，有时把
它们作为同义词使用。
机器语言和汇编语言对使用者提出了较高的要求，且使用时效 率低下，容易出错。高级语言使用人们比较习惯的符号形式描 述计算过程，降低了对人的要求。
命令行界面可以看作是第一代人机界面。输入信息为数据和命 令信息，输出信息以字符为主。
《人机交互与界面设计》
2020/5/18
29
1.1.4 人机交互的发展历史指用户界面中用人们熟悉的桌 面上的图例清楚地表示计算机 可以处理的能力。
自然和谐的交互方式是虚拟现实技术的一个重要研究内容，其 目的是使人能以声音、动作、表情等自然方式与虚拟世界中的 对象进行交互。
《人机交互与界面设计》
2020/5/18
20
1.1.2 人机交互与其他学科的关系
增强现实技术
把原本在现实世界的一定时间空间范围内很难体验到的实体信息 (视觉信息,声音,味道,触觉等),通过科学技术模拟仿真后再叠加 到现实世界被人类感官所感知,从而达到超越现实的感官体验,这 种技术叫做增强现实技术,简称AR技术。
了解认知心理学原理可以指导人们进行人机交互界面设 计。
《人机交互与界面设计》
2020/5/18
17
1.1.2 人机交互与其他学科的关系
人机工程学
把人—机—环境系统作为研究的基本对象，运用生理学、心理学和其它 有关学科知识，根据人和机器的条件和特点，合理分配人和机器承担的 操作职能，并使之相互适应，从而为人创造出舒适和安全的工作环境， 使工效达到最优的一门综合性学科。
《人机交互与界面设计》
2020/5/18
9
目录
1.1 人机交互基础知识 1.2 界面设计
《人机交互与界面设计》
2020/5/18
10
1.1 人机交互基础知识
1.1.1 人机交互的概念 1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2020/5/18
23
1.1.3 人机交互研究内容
多通道交互技术（Multi-Channel）
在多通道交互中，用户可以使用语音、手势、眼神、表情等自然的交 互方式与计算机系统进行通信。多通道交互主要研究多通道交互界面 的表示模型、多通道交互界面的评估方法以及多通道信息的融合等。 其中，多通道信息整合是多通道用户界面研究的重点和难点。
2020/5/18
14
1.1 人机交互基础知识
1.1.1 人机交互的概念 1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2020/5/18
15
1.1.2 人机交互与其他学科的关系
人机交互与认知心理学、人机工程学、多媒体技术和 虚拟现实与增强现实技术密切相关。
2020/5/18
4
学生作品3
《人机交互与界面设计》
2020/5/18
5
课程安排
课时安排：讲课22学时，上机10学时
课程性质：专业任选课
考核方式：总评成绩=考试成绩×70%+ 实验成绩 ×20%+平时成绩×10%
考试方式：开卷
上机安排：12,13,15,16,17(周四8-9节，计算中心B 机房)
Web设计（Web-Interaction）
重点研究Web界面的信息交互模型和结构，Web界面设计的基本思想和 原则，Web界面设计的工具和技术，以及Web界面设计的可用性分析与 评估方法等内容。
《人机交互与界面设计》
2020/5/18
பைடு நூலகம்26
1.1 人机交互基础知识
1.1.1 人机交互的概念 1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
教材：《Web程序设计（第3版）》（吉根林等主编）
参考资料：《人机交互基础教程（第2版）》（孟祥 旭等编著）、《软件人机界面设计》（陈启安主编） 等
《人机交互与界面设计》
2020/5/18
6
课件邮箱
Email: rjjh13@163.com 密码: 20132013
《人机交互与界面设计》
2020/5/18