多媒体人机交互技术.docx

1、第五章 多媒体人机交互技术 课前索引人机交互（Human Computer Interaction）是研究人与计算机之间的交互技术。由于计算机的应用越来越广泛，功能越来越强，计算机能处理和表现越来越多的信息。目前，计算机能够处理图形、图像、动画、视频、语音、音乐、文字等不同的媒体，但缺乏仿生的眼睛和耳朵，也没有从外部世界收集信息所需的触觉、味觉和嗅觉。计算机没有语言能力，没有四肢，没有建立各种各样信息表达形式的能力，所以，我们目前仍然以键盘和鼠标为主要输入工具，输入输出严重不平衡，这就限制了人和计算机之间的信息沟通。不能充分利用人的认知资源，人们长期追求的以自然的方法和计算机交流的理想仍然无法

2、实现，许多新的计算机应用技术无法普及。因此，人和计算机之间的交互显得日益重要。 5.1 多媒体人机交互技术概述人机交互技术是计算机应用的核心技术，以用户为中心是人机交互界面设计的核心思想，人机界面作为人与计算机通信的途径，其效果好坏直接影响到用户使用计算机的效率以及软、硬件功能的发挥，现有的人机交互技术已落后于计算机软、硬件的发展，成为信息产业急待解决的问题，美国将软件、人机交互、网络和高性能的计算机并列为 21 世纪信息技术计划的基础研究内容，我国“ 973”计划也将人机交互技术与虚拟现实的真实感作为科技攻关的关键问题。5.1.1 人机交互技术的概念及发展历程人机交互系统是实现人与计算机之间

3、通信的软、硬件系统的总称，包括人机交互硬件和人机交互软件两方面，前者有：键盘、鼠标、显示器、打印机等硬件设备；后者又分为系统软件（如鼠标、打印机驱动程序等）和应用软件通常是指人机交互界面。人机交互技术（Human-Computer Interaction）就是研究人与计算机之间相互通信的技术，人机界面（HCI, Human Computer Interface）是实现人与计算机信息交互的平台，通常是指人机交互软件界面。多媒体人机交互技术是指人们通过各种媒体与计算机进行通信的技术，它含盖了：文字、图形、图像、动画、声音、视频等多种信息的交互。现有的人机交互方式有：看、听、说和操作，人可以通过操作

4、键盘、鼠标、跟踪球、操纵杆、光笔、手写板、触摸屏、数字化仪、扫描仪、话筒、摄像头等输入设备向计算机输入信息；计算机也可以通过显示器、打印机、绘图仪、音箱、耳机、立体眼镜、头盔显示器等输出设备向人反馈供信息。随着计算机技术、多媒体技术、虚拟现实技术以及网络技术的发展，人机交互的内容与形式日益丰富，交互的方法也层出不穷，不断向人机交互技术提出新的、更高的要求。人机交互技术随着交互设备和软件技术的发展也在不断进步，回顾人机交互技术的发展历程，它大致经历了手工操作、命令行界面（CLI，Command Line Interface）和图形用户界面（GUI，Graphic User Interface）三

5、个阶段。1手工操作阶段自从 1946 年世界上第一台数字电子计算机 ENIAC 在美国宾西法尼亚大学诞生以来，早期计算机程序和数据的输入是采用穿孔卡片或穿孔纸带进行的，计算机的状态用指示灯来显示，计算结果由打印机打印输出。穿孔卡片或纸带上的程序和数据是人们用手工将二进制机器码输入穿孔机，再交由阅读机读入计算机的，这时的人机交互是相当原始的，程序输入错了也没法修改，只能将纸带报废，输出界面也很不直观，更谈不上实时交互。2命令行界面到了上个世纪 50 年代中期，出现了终端显示器，这时显示器和键盘是一体的，在内部缓冲寄存器的支持下，构成了字符显示终端，它显然比穿孔卡片或穿孔纸带使用起来方便得多，由于

6、有输入缓冲器，所以输入的错误可以及时修改，终端显示器的输出也比打印机的速度要快得多，而且便于连续使用。后来随着汇编语言和一些高级语言如 FORTRAN、COBOL、LISP、PASCAL 和 BASIC 等语言的出现，为了便于操作和控制作业，逐步发展出了交互式命令语言及其有关标准，当时的终端分为批处理终端和交互终端，在批处理终端上一次提交的是整个作业计算机按照指令顺序执行，而在交互终端上人们可以每次向计算机输入一行命令或数据，计算机逐条解释执行，并在显示器上输出结果。为了便于输入数据，人们还编制了文本菜单程序，用户可以在计算机的提示下通过问答的方式输入数据，第一次实现了人机交互，这一时期的人机

7、界面被称作命令行界面，可以看作是第一代真正的人机界面。它的操作由熟练的操作员通过键盘输入来进行，输出的也只能是静态字符，交互的方式单一、自然性差、效率低。3图形用户界面图形用户界面的出现使人机交互技术向前迈进了一大步，普通的用户不须要懂计算机，更不须要记住烦琐的操作命令，所有图形用户界面下的应用程序界面标准是统一的，操作是相同的，用户只须轻点鼠标就可以完成所有操作，非常简单、易于掌握，极大地推动了计算机的普及应用。图形用户界面起源于上个世纪 60 年代，1963 年美国麻省理工学院（ MIT）的 Sutherland 发明了 Sketchpad 技术，并首次引入了菜单、瓦片式层叠窗口及图标，并

8、采用光笔进行绘图操作，同年美国斯坦福（Standford）研究所的 Engelbart 发明了鼠标器，到了 70 年代美国施乐（Xerox）公司的 Alto 计算机首次使用了位图显示技术，开发出了可重叠菜单、弹出式菜单和滚动条，成为了日后图形用户界面的基本要素。1984 年美国苹果（Apple ）电脑公司在此基础上开发出了Macintosh 计算机，成为世界上第一台图形用户界面计算机，Macintosh 风格也成了图形用户界面的标准，它以窗口（Windows）、图标（Icon）、菜单（Menu）和指点装置（Pointing device）为基础形成了所谓 WIMP 界面，1986 年美国微软（

9、Microsoft）公司推出了 Windows 视窗操作系统，以后版本不断更新，成为风靡全球的图形用户界面操作系统。WIMP 界面是第二代人机界面，输入采用鼠标，输出可以是二维的图形或图像，与第一代人机界面命令行界面（CLI 界面）相比，其交互的自然性和效率都大为改观，但它们都属于单通道人机交互界面，不具备使用多种媒体以及三维交互的能力。现在的人机交互技术向网络化、多媒体、多通道和智能用户界面方向发展，为新一代人机交互界面的开发提出了新的课题。5.1.2 人机交互技术的主要研究内容人机交互技术与认知心理学、人机工程学、多媒体技术以及虚拟现实技术密不可分，其中认知心理学和人机工程学是人机交互技术

10、的理论基础，而多媒体技术和虚拟现实技术为人机交互技术提供了更丰富的表现手段和更高的要求。1认知心理学认知心理学（Cognitive Psychology）起源于上个世纪 50 年代，到 70 年代在西方已成为心理学的一个主要研究方向。它研究人的认识过程，如注意、知觉、表象、记忆、思维和语言等，从心理学的观点研究人机交互的原理。该领域通过视觉、听觉等手段接受和理解来自周围环境的信息和感知过程，以及通过人脑进行记忆、思维、推理、学习和解决问题等人的心理活动的认识过程。认知心理学是人机交互界面设计的依据，人的认知过程包括人的感官（视觉、听觉和触觉）是如何接受信息的，人又是如何处理信息、理解信息、记忆

11、信息以及如何进行推理，只有了解了这些，才能进行界面设计。一个交互的计算机系统，要能很好地实现用户与计算机之间的人机交互，通常必须考虑三个元素：人的因素、交互设备及实现人机对话的软件。交互计算机系统的最终目标是让用户能方便自然地和计算机进行交互式操作，因此设计交互计算机系统时，必须把满足用户的使用要求作为重要依据。2人机工程学人机工程学（Ergonomics）是指用系统工程学的方法研究人体科学与环境科学相互作用、相互影响，从而进行优化设计以提高功效的一门综合科学。经典的人机工程学称为硬件人机工程，主要研究在系统设计时如何考虑人的体力、耐力和舒适度等人的因素，以使系统设计最优、工效最高。软件人机工

12、程学研究软件和软件界面，侧重于运用和扩充软件工程的理论和原理，对人机界面软件进行分析、描述、设计和评估等。主要解决有关人类思维与信息处理的有关问题，包括设计理论、标准化、增强软件的可用性的方法等，使计算机与人的对话能满足人的思维模式与数据处理的要求，实现软件的高度可用性。从科学和技术的角度看，人机工程学是研究“ 人机环境”系统中这三要素之间的关系，为解决系统中人的效能、健康问题提供理论与方法的科学。人机工程学主要研究的内容有：人与机器之间的分工与配合；机器如何能更适合人的操作和使用，以提高工效、减轻人的劳动强度；工作环境对操作者的影响，如何改善工作环境；如何设计人机界面、信息传递的方式以及显示

13、方式等。3多媒体技术多媒体技术是指计算机处理多种信息如：文本、声音、图形、图像、动画和视频信息的技术。引入多媒体技术极大地丰富了计算机对信息的表现形式，同时也增加了人机交互的途径，在串行、字符信息和并行、联想信息方面扩展了人的信息处理能力。另一方面，多媒体技术为多通道人机交互提供了手段，使用多通道人机交互技术，可以提高计算机对信息的识别、理解能力，增加人机交互的效率，使交互更自然，界面更友好。4虚拟现实技术虚拟现实（Virtual Reality, VR）就是通过三维空间设备在计算机上营造一个虚拟环境，人可以通过视觉、听觉、触觉与虚拟世界进行交互，使人有身临其境的感觉。虚拟现实技术的特点是：真

14、实感、沉浸感和交互性，自然和谐的交互方式其研究的重要内容。虚拟现实交互设备有：三维鼠标、三维跟踪球、三维游戏杆、三维扫描仪、数据手套、数据衣、触觉和力学反馈装置、位置跟踪器、眼动跟踪器、立体眼镜、头盔式显示器、洞穴式显示器和大屏幕立体显示器等。虚拟现实交互设备极大地丰富了人机交互的手段，将传统的二维、静态的人机交互方式扩展到三维、实时的动态交互，这对人机交互技术提出了更高的要求。5.1.3 人机交互界面的创意设计“创意”在人机界面方面主要是屏幕设计。除了对计算机屏幕进行空间划分外，在时间轴上还要根据需要以音乐、解说和动画等形式加以表现。时间和空间统一起来构成一个完整的屏幕设计。1. 屏幕设计创

15、意一个屏幕含有背景、标题、描述(文字、图形和动画等) 、各种控制 (如跳转按钮等)等空间成分，以及与之同步的背景音乐和解说词等时间成分。屏幕设计创意是通过各种艺术表现手法和各种技术手段表现一个与主题相适应、为主题服务的意境。它包括表现样式、风格追求和对信息内容的合理布局等等。当创意作用于屏幕的设计与制作时，将信息内容的本来意义与创意设计出来的各种形象、符号、图标、字体及正文进行刻意的编排，在整个屏幕的视觉审美结构上达成有机融合，能够进一步增强屏幕的直观感染力和耐人寻味的可视性。一个屏幕载有各种媒体信息，图文并茂，有多层结构，并具有动态特性，其信息指向也是多向的。在进行设计时，通过直观的图形、图

16、像、文字、概念、色彩等各种造型要素及信息菜单、信息正文所构成的总体感性印象及心理感受来传达信息内容。各构成要素就是传达特定信息的载体，将这些构成要素按照视觉运动的法则精心地编排组合使它们在组合中有主有次、有轻有重、有大有小、有疏有密、有曲有直，从而使这些要素和谐地出现在一个屏幕上，使其相辅相成，成为具有活力的有机体，以发挥最有效的诉求效果，更好地传达信息。2. 屏幕创意设计原则屏幕创意设计包括文字排列方向、字群聚散组合、字体大小风格的选择、图片的分布及色彩与空白的经营。从狭义的概念上讲，所研究的是各种视觉元素的位置、面积、大小的排列组合和视觉流程问题；从广义上讲，它更多的是研究各种视觉元素通过

17、搭配协调所构成的格调，强调美的韵味设计，使使用者在接受屏幕信息的过程中，能感受到设计者对美的追求及对信息内容的主题思想、立场倾向和风格特点的把握与理解，从而强化信息主题的有效传达。进行屏幕界面的创意设计时，必须遵循以下几条构成原则：（1）内容与形式表现必须统一，形式表现必须服从内容要求。如在造型上各构成要素规格化的设计样式要统一。（2）要充分考虑各构成要素之间的视觉流程，能自然而有序地达到信息诉求重点的位置，突出主题。（3）注意保持屏幕界面在视觉上的相对均衡感，使其在形式结构上得到正确的配置。（4）注 意 屏 幕 设 计 中 的 空 白 处 理 ， 空 白 的 处 理 对 提 高 网 页 的

18、视 觉 效 果 有 极 为 重 要 的 意 义。对空白的正确规划，不仅能使屏幕设计流畅明快，疏密有序，布局清晰，而且在视觉上有强烈的集中效果，有利于突出诉求重点。（5）注重整体的对比因素，设计中各构成要素在组合时，要注意其结构形态的轻重、大小、虚实、多少等对比因素，加强视觉力度，以强化屏幕界面的整体吸引力。（6）注 意 提 高 屏 幕 界 面 信 息 内 容 的 视 读 性 。 设 计 中 要 注 意 主 要 信 息 内 容 易 读 的 视 觉 效 果。对信息文字的字体形态、大小变化及字距行间的排列及字的高度宽度作出适当的处理，使其集中紧凑，流动有序而不松散杂乱。（7）创造一定的韵律感。反映在

19、页面设计中就是利用有力的线条、形体及色彩形成一种有节奏性的律动感，能引导人的视觉以一种流畅而有停顿的方式运动，使人能够抑扬起落地浏览整个屏幕界面，阅读时感到轻松而又富于韵味。3. 屏幕创意设计表现手法屏幕创意设计表现手法是指调整所涉及的一切视觉构成元素以突出设计者所表现内容的方法。视觉构成元素包括视觉流程、点线面的关系、形状间的组合、对比与统一、节奏与韵律、装饰与趣味等等。（1）视觉流程视 觉 流 程 是 指 人 们 在 阅 读 一 种 信 息 载 体 时 ， 视 线 总 有 一 种 自 然 的 流 动 习 惯 ， 通 常 都 是 从 左 到 右 ， 由上到 下 ， 由 左 上 方 沿 着 弧

20、 形 线 向 右 下 方 流 动 的 过 程 (如 图 5-2 所 示 )。 其 注 意 值 随 着 下 移 逐 渐 递 减 。 在 此 流 动线 上 的 任 何 点 ， 都 会 比 流 动 线 外 的 任 何 点 明 显 。 故 在 设 计 屏 幕 界 面 时 应 能 巧 妙 运 用 视 觉 流 程 对 视 觉进 行导 向 作 用 ， 对 不 同 性 质 的 信 息 作 有 序 处 理 ， 从 而 引 导 人 们 的 视 线 按 照 设 计 意 图 更 有 效 地 接 受 信 息 。（2）点线面的关系屏幕界面的三大要素文字、图形、色彩的抽象就是点、线、面。它们彼此交织，互相烘托。一个图标、一

21、个小三角、一个小饰花都可以抽象成一个点。由于点在画面的空间中具有一种张力作用，当空间中有两个同等大的点时，其张力作用就表现在连接这两点的视线上，在心理上产生吸引和连接的效果。当画面中的两点大小不同时，人的注意力首先会集中在较大的一方，而向较小的一方转移。点的形态、大小、位置的不同，都会产生不同的视觉联想和感受。它可以在视觉上产生心理张力，引导视觉流向，而且起着活跃、平衡、稳定、丰富画面的作用。线具有较强的感情性格，如直线给人的感觉是稳定而静止，而曲线给人的感觉是具有速度、动力或弹力。线的粗细不同，曲直形态不同，方向不同，都会产生不同的视觉感受和联想。面的形状丰富多变。规则轮廓线的面较严肃，无规

22、则轮廓线的面较活泼。圆弧形或曲线形柔和而圆满，富于人情味。而正三角形蕴含着稳定和永恒。（3）形状间的组合屏幕界面是以文字、图形、色彩的组合来传达信息的。文字、图形、色彩在设计中以点、线、面的形式，在平面上构成了各种各样的形状，称其为“形”。形与形之间具有多种组合，如分离、接触、覆叠、联合等等。这些形的组合使屏幕界面更加丰富、富于变化、且具有层次感。（4）对比与统一对比是屏幕界面取得强烈效果的最重要的手段。彩度上的艳与灰、亮度上的黑与白、浓与淡、面积上的大与小、运动上的动与静、数量上的多与少、质量上的疏与密等都是对比。在视觉设计中，对比强烈的注视率就高。统一是高层次上的协调，协调是对比的对立。协

23、调和对比的屏幕界面多了，都会使人疲劳。任何视觉设计既要有对比上的差异性，又要有调和上的共同性。只有使对比与协调相统一，才能使屏幕界面既生动活泼，又流畅自然。（5）节奏与韵律节奏和韵律运用在屏幕界面设计上，是指各种造型构成要素的点、线、面所形成的一种自然秩序，规律节奏的美。其表现手法有反复、连缀、转换、渐变、特异等。在自然界中美的形式规律有两种：一是秩序美，二是特异美。秩序性是形式美规律的重要因素。如同构的排列、形象的重复、方向的一致、或色彩的统一等均具有构成的同一性，这些方面都发挥着协调统一的作用。特异是对规律的突破。在屏幕界面设计中，如果出现局部或小部分与整体编排秩序不符，往往更能引起用户的

24、关注，突出了设计的内容。一种特异的形象往往会吸引视觉流向，成为视觉注意的中心。（6）装饰与趣味屏幕界面的装饰是指造型和色彩点缀、各类外框线、跳跃的点等等。屏幕界面的装饰是一种美化。美化了的屏幕界面能够提高传达信息的效率。趣味是一种活泼性的视觉语言。增加屏幕界面的趣味性能使信息添翼，使界面更新奇且耐人寻味。5.2?图形用户界面随着计算机技术的发展，特别是鼠标器的发明、图标的使用以及可重叠菜单、弹出式菜单和滚动条的开发成功，到了 20 世纪 80 年代诞生了图形用户界面（GUI ），即所谓 WIMP 界面以窗口（Windows）、图标（Icon ）、菜单（Menu）和指点装置（Pointing d

25、evice），为基础的交互界面，首先是美国苹果（Apple）电脑公司开发出了世界上第一台图形用户界面计算机-Macintosh计算机， Macintosh 风格也成了图形用户界面的标准，接着美国微软（Microsoft）公司推出了Windows 视窗操作系统，并迅速成为风靡全球的图形用户界面操作系统，到了 20 世纪 90 年代基于图形用户界面的软件已经超过了字符界面下的软件，图形用户界面已经成为计算机人机交互技术的主导方式，图形用户界面极大地方便了广大非计算机专业人士使用计算机，其操作非常简单、易于掌握，极大地推动了计算机的普及应用。5.2.1 图形用户界面的特点1. 桌面隐喻（deskto

26、p metaphor）桌面隐喻是指用图例表示计算机可以进行的操作。图形用户界面中的图例具有一定的含义，可以表示对象、动作或属性等。图例可以是静态图标也可以是动画或视频。隐喻的方法有三种，一种是直接隐喻，即隐喻的本身为操作对象，如画笔绘图工具中的直线和圆图标，分别代表画直线和画圆操作；第二种为工具隐喻，如用打印机图标表示打印操作，这种隐喻使用最多；第三种为过程隐喻，通过描述过程来暗示该操作，如 Word 中的撤消和恢复图标。在图形用户界面中，大量使用隐喻，隐喻与用文字表达相比，具有直观、形象生动的优点，但是隐喻需要占用一定的屏幕空间，并且很难表示一些抽象的概念。2. 所见即所得（What You

27、 See Is What You Get, WYSIWYG）所见即所得技术表示界面中显示的格式即为最终输出的结果。目前大多数编辑软件都具有所见即所得界面，例如，预览时所见到的与最终输出的一致。所见即所得技术是将编辑界面中的格式控制符直接显示输出。但有时屏幕上的配色方案与打印机的配色方案不尽相同，使得打印输出有所差别。3. 直接操纵（Direct Manipulation）直接操纵是指把操作的对象、属性和关系显式地表示出来，用鼠标、光笔、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵具有以下特性：（1）用物理动作或图标代替了复杂的操作，这种图标与其实际内容应该是相近的

28、，用户能通过屏幕上的图标想象或感知其内容。例如，用文件夹表示磁盘目录，用户可以双击打开它，也可以将它拖到废纸篓中而删除它。（2）用指点和选择操作代替键盘输入。其优点是操作简便、快捷，不用记忆烦琐的命令，尤其适用于非专业用户。（3）操作结果立竿见影，交互性强。用户可以立即看到操作结果，便于及时修改和更正。（4）支持逆向操作。用户在使用过程中，不可避免地会出现一些操作错误，有了直接操纵后，操作错误更加明显，因此系统必须提供逆向操作功能，即能方便地恢复到错误操作以前的状态。目前大多数直接操纵编辑软件都提供撤消和重做（Undo & Redo）功能，便于更正错误操作。5.2.2 图形用户界面的设计1.设

29、计原则（1）一致性原则，在同一用户界面中，所有的菜单、对话框及术语应保持同一风格。（2）提供快捷操作方式，对于常用操作要提供快捷操作方式，例如存盘、打开等操作设置快捷方式可以提高工作效率。（3）提供错误检测及错误处理机制，当出现操作错误时，系统应能检测出来，并保持操作前的状态，提醒用户改正错误。（4）提供信息反馈功能，对于重要的操作，系统应有提示信息，待用户确认后方可进行，这样可避免发生重大操作错误。例如，关闭还未保存的文件时，系统要提示是否要保存该文件。（5）提供逆向操作功能，允许用户撤消错误的操作，有的软件可以退回好几步，对错误的操作采取比较宽容的态度，有利于用户进行各种尝试，把全部精力都

30、用到创作中去，而不必为不满意的尝试而后悔不已。（6）提供联机帮助功能，即使是熟练的用户也不可能记住复杂软件的所有功能的使用，系统应该能够提供上下文关联的帮助系统，使用户可以及时获得帮助，便于掌握软件的使用。（7）对于图形用户界面的用户来说，屏幕的合理使用有为重要，要提供多窗口管理，如平铺、层叠窗口，对于每一个窗口要提供缩放功能。2色彩的运用色彩是屏幕设计的一个重要方面，运用的好能吸引用户的注意力、突出重点给用户以美的享受；运用不好则使用户眼花缭乱、分不清主次甚至看不清显示的内容。使用色彩应注意以下几点：（1）在一幅画面中使用的色彩种类不宜太多，最好不要超过 5 种，太多使人眼花缭乱，可用不同层

31、次和形状来配合颜色，以增加变化。（2）画面中重要的或活动的对象采用鲜艳的颜色，而不重要的或非活动的对象使用较暗淡的颜色。前景使用鲜艳的颜色，背静采用暗淡颜色。（3）当需要区分不同对象时，首先按亮度大小，然后在按颜色不同来区分。（4）在一个系统中，各种颜色的意义应该符合人们的习惯并保持一致，例如，红色表示错误，黄色表示警告。（5）避免使用不兼容的颜色配伍，如蓝/黄、红/ 绿、红/蓝、绿/蓝，这些色彩对比强烈的颜色组合，会在边界上产生颤抖或余像效应，影响观看。好的色彩搭配见下表：表 色彩搭配组 1 2 3 4 5 6 7 8前景色 白 黑 红 绿 蓝 青 品红 黄背景色蓝 白 黄 黑 白 蓝 黑 红黑 黄 白 蓝 黄 黑 白 蓝红 绿 黑 红 青 红 蓝 黑3.色彩的设计方式色彩和图像、文字一样是界面的一个元素，在界面设计中起着特殊的作用。色彩可以吸引人的注意力，影响人们的情绪，向人们传达特定的信息含义。色彩的适当配合可以给人以美感，使人振奋、愉快。在人机交互中，使用颜色有以下优点：（1）温和夺目，把用户注意力吸引到重要信息上。例如，制作一个色彩鲜明的标题将有助于和其他屏幕显示信息相区别，减少了搜索重要信息的时间。