第 1 章 绪 论

主要介绍以下几个方面的内容：

1.人机交互的概念

2.人机交互与其他相关学科的关系

3.人机交互的研究内容

4.人机交互的发展历史及趋势

几个概念：

1.人机交互

• 主要包括人到计算机和计算机到人的信息交换两部分。

2.人机界面

3.交互设计

人机交互技术与认知心理学、人机工程学、多媒体技术和虚拟现实技术密切相关。

• 其中，认知心理学与人机工程学是人机交互技术的理论基础，而多媒体技术和虚

拟现实技术与人机交互技术相互交叉和渗透

4.多通道和多媒体的区别

多通道和多媒体都蕴含了多种通信通道的使用，区别在于系统内部信息所处的抽象层

次的不同。

多通道系统力求对语义的理解。它对用户的原始输入在较高的层次上进行解释、分

析和综合，提取语义内容，达到对用户的某种理解。然后，从较高的表现层次上传达给用户

最恰当的反馈，它侧重于信息的理解和解释。

多媒体系统则侧重于信息的表现，表现为在计算机的控制下产生、操纵、表现、存

储和传送—些独立的信息，这些信息至少是通过一种连续或离散媒体进行编码的。

5.什么是虚拟现实？

虚拟现实（Virtual Reality，VR）就是借助于计算机技术及硬件设备，建立高度真实

感的虚拟环境，使人们通过视觉、听觉、触觉、味觉、嗅觉等感官在其中看、听、触、闻起

来像真实的，以产生身临其境的感觉的一种技术。

6.虚拟现实技术的特点：真实感、沉浸感和交互性。

7.虚拟现实和人机交互的关系

虚拟现实中的交互是虚拟现实核心研究内容之一，但人机交互并不是虚拟现实的全

部，复杂场景的建模、绘制等技术，也是虚拟现实非常重要的研究内容。虚拟现实为人机交
互的研究提供了很好的契机和媒介，但并不是唯一的媒介，手机、PDA、笔记本电脑等移动

设备，也需要更方便、快捷、人性化的交互手段。

人机交互的研究内容：1- 8

人机交互的研究内容十分广泛，涵盖了建模、设计、评估等理论和方法以及在 Web、

移动计算、虚拟现实等方面的应用研究与开发，主要包括：

1.人机交互界面表示模型与设计方法（Model and Methodology）

2.可用性分析与评估（Usability and Evaluation）

3. 多通道交互技术（Multi-Modal）

4. 认知与智能用户界面（Recognition and Intelligent User Interface）

5.群件

群件是指帮助群组协同工作的计算机支持的协作环境，主要涉及个人或群组间的信

息传递、群组中的信息共享、业务过程自动化与协调，以及人和过程之间的交互活动等,比

如电子邮件、文档管理和工作应用

6. Web 设计（Web-Interaction）

7. 移动界面设计（Mobile and Ubicomp）

人机交互的发展历史及趋势：

1．语言命令交互阶段

2.图形用户界面（GUI）交互阶段

3.网络用户界面

4. 自然和谐的人机交互阶段（多通道界面）

图形用户界面的优缺点

优点：与命令行界面相比，图形用户界面的人机交互自然性和效率都有较大的提高。经

常使用的命令大都通过鼠标来实现，鼠标驱动的人机界面使得初学者易于使用。

缺点：重复性的菜单选择会给有经验的用户造成不方便，他们有时倾向使用命令键而

不是选择菜单，且在输入信息时用户只能使用手这一种输入通道。另外，图形用户界面需要

占用较多的屏幕空间，并且难以表达和支持非空间性的抽象信息的交互。

发展趋势：集成化、网络化、智能化、标准化

认知心理学与人机工程学

认知的过程

感知：视觉感知（80%）、听觉感知、触觉
认知：什么是经验认知和思维认知？

几个名词：视角、视敏度、视错觉

认知涉及到多个特定类型的过程，包括：

 感知和识别

 注意

 记忆

 问题解决

 语言处理

 由人的注意特点，在设计人机交互界面时应做到：

1.信息的显示应醒目，以便执行任务时使用，可使用动画图形、彩色、下划线，对

条目及不同的信息进行排序，在条目之间使用间隔符等。

2.避免在界面上安排过多的信息。尤其要谨慎使用色彩、声音和图像，人们倾向于

使用过多的这类表示，而导致界面混杂，分散用户的注意力，让用户反感。

3.朴实的界面更容易使用。

 由人的感知和识别特点，在设计人机交互界面时应做到：1）2）3）4）5）

1. 在结合不同的媒体时，应确保用户能够理解它们表示的复合信息。在结合使用

声音和动画时，需要仔细协调，合理安排它们的调用次序。

2.用户应能不费力地区别图标或其他图形表示的不同含义。

3.文字应清晰易读，且不受背景干扰

4.声音应足够响亮而且可辨识，以便用户理解它们的含义。用户应能够理解输出的

语音及其含义。

5. 在虚拟环境中使用触觉反馈时，用户应能识别各种触觉表示的含义。

 考虑人的记忆特点，进行交互设计时应该注意的问题有：1）2）3）

1.应考虑用户的记忆能力，勿使用过于复杂的任务执行步骤。

2.由于用户长于“识别”而短于“回忆”，所以在设计界面时，应使用菜单、图标，

且它们的位置应保持一致。

3.为用户提供多种电子信息（如文件、邮件、图像）的编码方式，并且通过颜色、

标志、时间戳、图标等，帮助用户记住它们的存放位置。

 从方便用户阅读、说话和聆听的角度，在人机界面设计时应注意：1）2）3）

1.尽量减少语音菜单、命令的数目。研究表明：人们很难掌握超过三四个语音选项
 的菜单的使用方法，人们也很难记住含有多个部分的语音指令。

2.应重视人工合成语音的语调，因为合成语音要比自然语音难以理解。

3.应允许使用和自由放大文字，同时不影响格式，以方便难以阅读小字体的用户。

 情感计算

计算机系统的设计应当像人类一样能够识别和表达感情，这被称为“情感计算”。

情感计算主要研究通过各种传感器获取由人的情感所引起的生理及行为特征信号，

建立“情感模型”，从而训练感知、识别和理解人类情感的能力，并能针对用户的情

感做出智能、灵敏、友好反应的个人计算系统，缩短人机之间的距离，营造真正和

谐的人机环境。

 概念模型及对概念模型的认知

概念模型：指的是一种用户能够理解的系统描述，它使用一组集成的构思和概念，

描述系统做什么、如何运作、外观如何等。

例如一个旅游公司想要构建一个无线信息系统，目的是帮助游客在陌生的城市寻找

目的地。设计这个系统要做的第一步就是考虑系统与游客交互的概念模型。

首先，搞清楚游客们想要知道什么？通常，游客想要了解的信息五花八门，例如，

如何从 A 到达 B？邮局在哪里？哪里有好的餐馆等等。

然后考虑如何支持游客的这种“问讯”活动。例如，让游客直接向系统提问，就像

通常的向人问路一般，这是不是一个好方法？或者，游客是否习惯于向机器输入指令询

问问题的方式？又或者，游客会不会更喜欢提供了各种表格、地图和办事指南等信息且

允许用户从容自由地检索的系统？

 思维模型

在认知心理学中，思维模型被认为是外部世界的某些因素在人脑中的反映，掌

握和运用思维模型使得人们能够进行推测和推理。思维模型牵涉到两个过程—“构

建”和“运用”过程，人们既可能进行有意识的思维处理，也可能进行无意识的思

维处理。

用户思维模型：人们在学习和使用系统的过程中，积累了有关如何使用系统的

知识，而且在一定程度上，也积累了有关系统如何工作的知识。

 信息处理模型

在认知心理学中,人们把大脑视为一个信息处理机，信息通过一系列有序的处理阶段

进、出大脑。在这些阶段中，大脑需要对思维表示（包括映像、思维模式、规则和
 其他形式的知识）进行各种处理（如比较和匹配）。

 外部认知模型

1.人们需要同各种外部表示交互：书本、报纸、网页、多媒体、地图、图表等。

2.人们还开发了众多的工具来帮助认知，例如笔、计算器、计算机等。

3.外部表示与物理工具相结合大大增强了人们的认知能力,没有了它们，很难想象人

们如何进行日常生活。

 外部认知是要解释人们在与不同外部表示相交互时涉及的认知过程。其主要目的是

要详细说明在不同的认知活动、认知过程中使用不同表示的好处，主要包括：

 将信息、知识表面化以减轻记忆负担。

 设计有利于人的信息表示及处理工具，减轻计算负担。

 标注和认知追踪。

 分布式认知模型

分布式认知法描述的是认知系统中发生了什么，它通常描述人员之间的交互，人们

使用的物品及工作环境。

分布式认知的主要目的是要从信息传播媒介的角度来描述交互。也就是说，它考虑

的是信息如何表示，信息在流经不同个人以及使用不同物体时是如何重新表示的。这类

信息的转变也称为“表示状态的转变”。

交互设备

• 文本输入设备:键盘输入、手写、语音

• 图像输入设备：扫描仪、摄像头、运动捕捉

• 指点输入设备:鼠标、触摸板、控制杆、光笔、触摸屏、手写液晶屏

• 显示设备： CRT、液晶-等离子显示器、数字纸

• 输出设备：打印机、三维打印机

• 语音交互设备：耳麦、声音合成设备-声卡

虚拟现实系统中的交互设备

• 1）三维空间定位设备

空间跟踪定位器 数据手套 三维鼠标 触觉和力反馈器

• 2）沉浸感显示设备：

立体视觉、立体显示系统（头盔式显示器）

交互技术
人机交互输入模式：请求模式、采样模式、事件模式

基本交互技术：定位、笔划、定值、选择、字符串输入

图形交互技术：几何约束、引力场、拖动、橡皮筋技术、操作柄技术、三维交互技术、

多通道交互技术

多通道用户界面

• 定义

• 达到的目标：

• （1）交互的自然性

 （2）交互的高效性

 （3）与传统的用户界面特别是广泛流行的 WIMP/GUI 兼容。

多通道用户界面的基本特点

使用多个感觉和效应通道

允许非精确的交互

三维和直接操纵

交互的双向性

交互的隐含性

多通道交互技术

• 眼动跟踪

• 手势识别

• 三维输入

• 语音识别

• 表情识别

• 手写识别

• 数字墨水

界面设计

• 可以按照不同标准分类

• 命令行和文本菜单技术

• 图形用户界面（ WIMP 界面）

图形用户界面的主要思想：

• 1）桌面隐喻（直接、工具和过程）
；2）所见即所得；3）直接操纵
图形用户界面的特性

设计图形用户界面的原则

1. 一般性原则

2.颜色的使用

3.图标的设计

4.按钮的设计

5.屏幕布局的设计

6.菜单界面的设计

7.填表输入界面的设计

人机交互界面的表示模型

• 三种模型：

• （1）行为模型：GOMS，UAN 及 LOTOS 模型

• GOMS 模型描述任务的分解过程， LOTOS 模型给出子任务之间的约束关系，

UAN 模型给出原子任务的形式化描述

• （2）结构模型：状态转换网络（STN）和产生式规则 。

• （3）表现模型

• GOMS：目标 (Goal)、操作 (Operator)、方法 (Method) 以及选择规则

(Selection)

• LOTOS 算符

• LOTOS 与 GOMS 的结合，可以清楚地了解整个目标层次及各目标之间的约束关系

• UAN 模型的基本思想

结构模型

• 产生式规则

• 状态转换网络-State Transit Network

• 行为模型和结构模型的转换

窗口系统

• 窗口系统结构：

• 1）在各个应用程序内部实现和管理多任务

• 2）在操作系统核心集中处理多任务管理
 • 3）由独立的管理程序进行管理

交互系统的软件结构

• MVC 模型（模型层、视图层、控制层）优缺点

MVC 把一个应用的输入、处理、输出流程按照模型 (model)、视图（View）和控

制（Controller）的方式进行分离，形成模型层、视图层、控制层三个层次。

优点：

 可以为一个模型在运行时同时建立和使用多个视图

 视图与控制器的可接插性，允许更换视图和控制器对象，而且可以根据需求动态地

打开或关闭、甚至在运行期间进行对象替换

 模型的可移植性，因为模型是独立于视图的，所以可以把一个模型独立地移植到新

的平台工作

缺点：

 增加了系统结构和实现的复杂性。

 对于简单的界面，严格遵循 MVC，使模型、视图与控制器分离，会增加结构

的复杂性，并可能产生过多的更新操作，降低运行效率

 视图与控制器间的过于紧密的连接。

 视图与控制器是相互分离、但又确实联系紧密的部件，视图没有控制器的存

在，其应用是很有限的

 视图对模型数据的低效率访问。

 依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据

• Struts 结构

在 struts 中，模型分为两个部分：系统的内部状态、可以改变状态的操作（事务

逻辑）。内部状态通常由一组 ActinForm JavaBean 表示。

 Struts 是开放源代码的软件，开发者能更深入的了解其内部实现机制。

 Struts 的优点主要集中体现在两个方面：

 Taglib：Taglib 是 Struts 的标记库，灵活使用，能大大提高开发效率。

 页面导航：通过一个配置文件，可把握整个系统各部分之间的联系描述出来，

这对于后期的维护很有好处。

 Struts 已逐步越来越多运用于商业软件，是一种非常优秀的 J2EE MVC 实现方式。

对话的独立性的优点
 • 可移植性

• 可重用性

• 界面的多样性

• 定制界面

• 应用和界面的关系

• 交互系统中包含三个主要元素

• 应用层、表现层、对话控制

• 对话控制的表示方法：1）2) 3)

• 应用层的表示方法

Web 界面设计

• 超文本标记语言 HTML 、超文本传输协议 HTTP

HTML 的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过

这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整

体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，

图形、动画、声音、表格、链接等。

超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-

响应协议，它通常运行在 TCP 之上。它指定了客户端可能发送给服务器什么样的

消息以及得到什么样的响应。请求和响应消息的头以 ASCII 形式给出；而消息内

容则具有一个类似 MIME 的格式。这个简单模型是早期 Web 成功的有功之臣，因

为它使开发和部署非常地直截了当。

• Web 信息交互模型

• Web 界面设计基本原则：1）2）3）4）5）6）

• （1）显示一致性原则

• （2）以用户我主导原则

• （3）易用性原则

• （4）鼠标与键盘一致性原则

• （5）系统响应时间原则

• （6）出错信息和警告原则

• （7）信息显示原则

• Web 网站设计的 3C 原则：简洁、一致性、对比度

Web 界面规划

• Web 界面概要设计

• Web 界面设计要素

• Web 界面布局

• Web 界面的色彩

• Web 界面的字体

• Web 界面的动画与多媒体

• Web 界面的导航

Web 界面设计技术与工具

• 超文本标记语言 HTML

• 客户端脚本语言 JavaScript

• JavaApplet

• 服务器端脚本语言

• 页面编辑器 、辅助工具

• Web 界面设计新技术

• Web 3D 图形技术

• 语音 Web 技术

交互设计指南（1-6）

• 1）操作入口明确

• 2) 可及

• 3）适时帮助

• 4）简洁清晰，通俗易懂

• 5）突出重点，一目了然

• 6）标签明晰，有效

交互设计指南（7-12）

• 7）避免迷路

• 8）深广度平衡

• 9）一次点击
 • 10）别让我思考

• 11）减少记忆负担

• 12) 避免出错

移动界面设计

• 移动界面的输入方式：三种

键盘输入

笔输入（手写输入）

语音识别

• 移动界面设计的限制因素：

• 1）资源相对匮乏

• 2）移动设备的种类繁多

• 3）连接方式复杂

• 移动界面设计原则

1 ）简单直观

2） 个性化设计

3） 易于检索

4） 采用一致的界面风格

5）避免不必要的文本输入

6）根据用户的要求使服务个性化

7） 最大限度地避免用户出错

8） 文本信息应当本地化

• 移动界面要素设计

移动界面也包含很多种类的设计要素，主要界面设计元素有：

菜单

按钮

多选列表

文字显示

数据输入

图标与图像

报警提示
 移动多媒体

导航设计

• 移动界面设计技术与工具

.Net 精简框架

J2ME 架构

BREW

目前来说主流的 App 开发方式有三种：Native App 、Web App、Hybird App

移动浏览标准：WAP，WML，XHTML Basic 与 XHTML MP

移动界面设计原则

• 简单直观

• 个性化设计

• 易于检索

• 采用一致的界面风格

• 避免不必要的文本输入

• 根据用户的要求使服务个性化

• 最大限度地避免用户出错

• 文本信息应当本地化

移动界面设计相关问题

一 实用的移动设备界面设计技巧：

• 1）布局 ；

• 2） 顺序与规模；

• 3） 重要性的层次结构 ；

• 4） 轻量级设计；

• 5） 重要的内容；

• 6）简单的导航；

• 7）不要使用表格；

• 8）平台监测

二 移动界面设计工具

三 减少空间占用

四 Flow 大局观
五 为了阳光而设计，设计原则

移动界面设计相关问题

六 移动界面隐喻设计

为什么需要隐喻设计？

1.导航缺失

2.缺乏物理力学反馈

隐喻设计内容

1.拟物化视觉外观与听觉反馈

2.即时反馈

3.流动式动画

七 手机交互设计原则

• 1）考虑屏幕尺寸和分辨率

• 2）视觉重点自上而下

• 3）界面简洁：途径

• 4）任务拆分

• 5） 避免输入

• 6）一致性

• 7）考虑使用情境

• 8）考虑操作方式

• 9）考虑界面反馈

可用性分析与评估

可用性定义

可用性是指特定的用户在特定的环境下使用产品并达到特定目标的效力、效率

和满意的程度。

可用性的五个方面：

有效性、效率、吸引力、容错能力、易于学习

两种设计理念

系统为中心的设计

用户为中心的设计

可用性工程
 • 了解用户

• 竞争性分析

• 设定可用性目标

• 用户参与的设计

• 迭代设计

• 产品发布后的工作

支持可用性的设计原则

1. 可学习性

可预见性、同步性、熟悉性、通用性、一致性

2.灵活性

可定制性、对话主动性、多线程、可互换性、可替换性

3.鲁棒性

可观察性、可恢复性、响应性、任务规范性

可用性评估

• 遵循的原则

• 评估方法：

• 用户模型

• 启发式评估

• 认知性遍历

• 用户测试

• 用户问卷调查

复习提纲

1.人机交互技术研究什么？

2.什么是人机工程学？对界面设计需要注意什么？

3.什么是视错觉？视角的概念以及常见物体的视角。视觉、听觉、触觉

4.最新的三维交互设备，包括 3D 打印、运动捕捉、三维扫描仪、裸眼 3Ｄ

5.多通道用户界面和技术：眼动跟踪、语音识别、表情识别、汉字识别、手势识别、虚拟现

6.人机交互输入模式、图形交互的方式

7.图形用户界面的布局原则 ？三个重要思想
8.人机交互界面的表示模型：行为模型、结构模型、表现模型

9.Web 界面布局、设计原则、发展新趋势（3D 和语音)、交互设计指南 12 条

10.移动界面设计局限性、设计原则、设计技巧

11.可用性分析：定义、五个方面、三个设计原则（可学习性、灵活性、鲁棒性）