人机交互与界面设计-第1章

《人机交互与界面设计》人机交互与界面设计交互设计任课教师：范艳芳邮箱：[e-mail]《人机交互与界面设计》教学目标掌握人机交互及界面设计的基础知识具备初步进行Web系统前端开发的能力能够在Web系统开发过程中遵循界面设计相关原则2020/2/142《人机交互与界面设计》学生作品12020/2/143《人机交互与界面设计》学生作品22020/2/144《人机交互与界面设计》学生作品32020/2/145《人机交互与界面设计》课程安排课时安排：讲课22学时，上机10学时课程性质：专业任选课考核方式：总评成绩=考试成绩×70%+实验成绩×20%+平时成绩×10%考试方式：开卷上机安排：12,13,15,16,17(周四8-9节，计算中心B机房)教材：《Web程序设计（第3版）》（吉根林等主编）参考资料：《人机交互基础教程（第2版）》（孟祥旭等编著）、《软件人机界面设计》（陈启安主编）等2020/2/146《人机交互与界面设计》课件邮箱Email:[e-mail]密码:201320132020/2/147《人机交互与界面设计》课程内容第1章人机交互基础第2章Web应用基础第3章浏览器端交互程序设计第4章服务器端交互程序设计2020/2/148《人机交互与界面设计》第1章人机交互基础学习要点：理解人机交互、人机界面的基本概念了解人机交互与其他学科的关系以及人机交互的研究内容掌握人机交互发展的三个阶段掌握Web界面的设计原则理解Web界面要素的设计2020/2/149《人机交互与界面设计》目录1.1人机交互基础知识1.2界面设计2020/2/1410《人机交互与界面设计》1.1人机交互基础知识1.1.1人机交互的概念1.1.2人机交互与其他学科的关系1.1.3人机交互的研究内容1.1.4人机交互的发展历史1.1.5人机交互的应用2020/2/1411《人机交互与界面设计》1.1.1人机交互的概念人机交互（Human-ComputerInteraction，HCI）是关于设计、评价和实现供人们使用的交互式系统，且围绕这些方面的主要现象进行研究的学科。狭义的人机交互技术主要研究人与计算机之间的信息交换，主要包括人到计算机和计算机到人的信息交换两部分。2020/2/1412输入信息输出信息键盘、鼠标、操纵杆、数据服装、眼动跟踪器、数据手套、压力笔，以及手、脚、声音、姿势或身体的动作等。打印机、绘图仪、显示器、音箱等《人机交互与界面设计》1.1.1人机交互的概念人机交互与人机界面人机交互是指人与计算机系统之间的信息交换，它是人与计算机之间各种符号和动作的双向信息交换；人机界面（又称用户界面或使用者界面）是指人与计算机系统之间的通信媒介或手段，它是人机双向信息交换的支持软件和硬件；人机交互致力于人与计算机的协调，旨在消融这两个智能系统间的通讯和对话界线，使得人与机器的信息交流便捷而通畅。人机交互是通过人机界面实现的，在界面开发过程中，有时把它们作为同义词使用。2020/2/1413《人机交互与界面设计》1.1.1人机交互的概念人机交互与人机界面从信息传递的角度来看，用户界面的任务是为人类的感觉和效应通道与计算机的感知和输出机制提供通信接口。从信息转换的角度来看，用户界面的作用是实现“用户认知空间”与“计算机信息处理空间”间信息的双向映射。2020/2/1414《人机交互与界面设计》1.1人机交互基础知识1.1.1人机交互的概念1.1.2人机交互与其他学科的关系1.1.3人机交互的研究内容1.1.4人机交互的发展历史1.1.5人机交互的应用2020/2/1415《人机交互与界面设计》1.1.2人机交互与其他学科的关系人机交互与认知心理学、人机工程学、多媒体技术和虚拟现实与增强现实技术密切相关。认知心理学与人机工程学是人机交互技术的理论基础；多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透。2020/2/1416多媒体技术虚拟和增强现实技术人机交互技术认知心理学人机工程学《人机交互与界面设计》1.1.2人机交互与其他学科的关系认知心理学研究人们如何获得外部世界信息，信息在人脑内如何表示并转化为知识，知识怎样存储又如何用来指导人们的注意和行为。将人看作是一个信息加工的系统，认知就是信息加工，包括感觉输入的编码、贮存和提取的全过程。涉及心理活动的全过程---从感觉到知觉、识别、注意、学习、记忆、概念的形成、思维、表象、回忆、语言、情绪发展和过程。了解认知心理学原理可以指导人们进行人机交互界面设计。2020/2/1417注意是认知过程的一部分，通常是指选择性注意，即有选择的加工某些刺激而忽视其他刺激的倾向。如：侧耳倾听某人说话，忽略其他人的交谈。《人机交互与界面设计》1.1.2人机交互与其他学科的关系人机工程学把人—机—环境系统作为研究的基本对象，运用生理学、心理学和其它有关学科知识，根据人和机器的条件和特点，合理分配人和机器承担的操作职能，并使之相互适应，从而为人创造出舒适和安全的工作环境，使工效达到最优的一门综合性学科。2020/2/1418《人机交互与界面设计》1.1.2人机交互与其他学科的关系多媒体技术是利用计算机对文本、图形、图像、声音、动画、视频等多种信息集成在一起的技术。动画、音频、视频等动态媒体，大大丰富了计算机表现信息的形式，提高了用户接受信息的效率。多媒体带来的信息冗余性还可以消除人机通信过程中的歧义性。多通道人机交互研究的兴起，将进一步提高计算机的信息识别、理解能力，提高人机交互的效率和用户友好性，将人机交互技术和用户界面设计引向更高的境界。2020/2/1419视线、语音、表情、动作、眼神等《人机交互与界面设计》1.1.2人机交互与其他学科的关系虚拟现实技术虚拟现实技术是借助于计算机技术及硬件设备，建立具有高度真实感的虚拟环境，使人们通过视觉、听觉、触觉、味觉、嗅觉等感官在其中看、听、触、闻起来像真实的，以产生身临其境的感觉的一种技术。自然和谐的交互方式是虚拟现实技术的一个重要研究内容，其目的是使人能以声音、动作、表情等自然方式与虚拟世界中的对象进行交互。2020/2/1420《人机交互与界面设计》1.1.2人机交互与其他学科的关系增强现实技术把原本在现实世界的一定时间空间范围内很难体验到的实体信息(视觉信息,声音,味道,触觉等),通过科学技术模拟仿真后再叠加到现实世界被人类感官所感知,从而达到超越现实的感官体验,这种技术叫做增强现实技术,简称AR技术。2020/2/1421《人机交互与界面设计》1.1人机交互基础知识1.1.1人机交互的概念1.1.2人机交互与其他学科的关系1.1.3人机交互的研究内容1.1.4人机交互的发展历史1.1.5人机交互的应用2020/2/1422《人机交互与界面设计》1.1.3人机交互研究内容人机交互界面表示模型与设计方法（ModelandMethodology）一个交互界面的好坏，直接影响到软件开发的成败。友好人机交互界面的开发离不开好的交互模型与设计方法。因此，研究人机交互界面的表示模型与设计方法，是人机交互的重要研究内容之一。可用性分析与评估（UsabilityandEvaluation）可用性是交互式IT产品/系统的重要质量指标，指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品竞争力的核心。人机交互系统的可用性分析与评估的研究主要涉及到支持可用性的设计原则和可用性的评估方法等。2020/2/1423《人机交互与界面设计》1.1.3人机交互研究内容多通道交互技术（Multi-Channel）在多通道交互中，用户可以使用语音、手势、眼神、表情等自然的交互方式与计算机系统进行通信。多通道交互主要研究多通道交互界面的表示模型、多通道交互界面的评估方法以及多通道信息的融合等。其中，多通道信息整合是多通道用户界面研究的重点和难点。认知与智能用户界面（IntelligentUserInterface，IUI）智能用户界面的最终目标是使人机交互和人－人交互一样自然、方便。上下文感知、眼动跟踪、手势识别、三维输入、语音识别、表情识别、手写识别、自然语言理解等都是认知与智能用户界面需要解决的重要问题。2020/2/1424《人机交互与界面设计》1.1.3人机交互研究内容移动界面设计（MobileandUbicomp）移动计算（MobileComputing）、普适计算（UbiquitousComputing）等对人机交互技术提出了更高的要求，面向移动应用的界面设计问题已成为人机交互技术研究的一个重要应用领域。针对移动设备的便携性、位置不固定性和计算能力有限性以及无线网络的低带宽高延迟等诸多的限制，研究移动界面的设计方法，移动界面可用性与评估原则，移动界面导航技术，以及移动界面的实现技术和开发工具，是当前的人机交互技术的研究热点之一。2020/2/1425《人机交互与界面设计》1.1.3人机交互研究内容群件（Groupware）群件是指帮助群组协同工作的计算机支持的协作环境，主要涉及个人或群组间的信息传递、群组中的信息共享、业务过程自动化与协调，以及人和过程之间的交互活动等。目前与人机交互技术相关的研究主要包括：群件系统的体系结构、计算机支持交流与共享信息的方式、交流中的决策支持工具、应用程序共享以及同步实现方法等内容。Web设计（Web-Interaction）重点研究Web界面的信息交互模型和结构，Web界面设计的基本思想和原则，Web界面设计的工具和技术，以及Web界面设计的可用性分析与评估方法等内容。2020/2/1426《人机交互与界面设计》1.1人机交互基础知识1.1.1人机交互的概念1.1.2人机交互与其他学科的关系1.1.3人机交互的研究内容1.1.4人机交互的发展历史1.1.5人机交互的应用2020/2/1427《人机交互与界面设计》1.1.4人机交互的发展历史人机交互的发展过程，是人适应计算机到计算机不断地适应人的发展过程。它经历了几个阶段：图形用户界面自然和谐的交互命令行2020/2/1428《人机交互与界面设计》1.1.4人机交互的发展历史语言命令交互阶段计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。这个过程也可以看作早期的人机交互的一个发展过程。机器语言和汇编语言对使用者提出了较高的要求，且使用时效率低下，容易出错。高级语言使用人们比较习惯的符号形式描述计算过程，降低了对人的要求。命令行界面可以看作是第一代人机界面。输入信息为数据和命令信息，输出信息以字符为主。2020/2/1429《人机交互与界面设计》1.1.4人机交互的发展历史图形用户界面（GUI）交互阶段图形用户界面（GraphicalUserInterface，GUI）的出现，使人机交互方式发生了巨大变化。GUI的主要特点是桌面隐喻、WIMP(Window,Icon,Menu,PointingDevice)技术、直接操纵和“所见即所得(WYSIWYG—WhatYouSeeIsWhatYouGet)”。与命令行界面相比，图形用户界面的人机交互自然性和效率都有较大的提高。2020/2/1430指用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。人机交互领域最普遍的电脑互动界面：包括视窗、图标、菜单、定位设备。指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。在WYSIWYG交互界面中，其所显示的用户交互行为与应用程序最终产生的结果是一致的。《人机交互与界面设计》1.1.4人机交互的发展历史自然和谐的人机交互阶段随着虚拟现实、移动计算、普适计算等技术的飞速发展，自然和谐的人机交互方式得到了一定的