【人机交互技术】知识总结

大家好，欢迎来到IT知识分享网。

人机交互

人机交互（Human-Computer Interaction，HCI）是关于设计、评价和实现供人们使用的交互式计算机系统，且围绕这些方面的主要现象进行研究的科学。

绪论

研究内容

人机交互界面表示模型与设计方法

可用性分析与评估

多通道交互技术

多通道信息整合

认知与智能用户界面

群件：帮助群组协同工作的计算机支持的协作环境

Web设计：信息交互模型和结构，设计的基本原则和思想，工具和技术，可用性分析与评估方法

移动界面设计：

HCI的发展历史：

命令行–>图形用户界面（GUI）–>自然和谐的交互

GUI的主要特点是：桌面隐喻、WIMP技术、直接操纵、“所见即所得”

GUI依赖菜单选择和交互小组件

HCI的应用：广泛

感知和认知基础

人的感知

视觉感知：

受到外部刺激接受信息阶段和解释信息阶段

1.大小、深度、相对距离

2.亮度与色彩

3.视错觉（尺寸、细胞、轮廓、不可能、扭曲、运动）

4.阅读

（颜色模型：RGB、CMKY系统、HSV色相、饱和度、色明度）

听觉感知：

人可以辨认的语音频率范围是260~5600Hz

触觉：

力觉感知：一般是指皮肤深层的肌肉、肌腱和关节运动感受到的力量感和方向感。例如用户感受到的物体重力、方向力和阻力等。

内部感觉：

指反应机体内部状态和内部变化的感觉，包括体位感觉、深度感觉、内脏感觉等。

认知过程与交互设计原则

1.认知涉及多个特定类型的过程：感知和识别、注意、记忆、语言处理、问题解决

2.注意作为认知过程的一部分，通常是指选择性注意，即有选择的加工某些刺激而忽视其他刺激。

注意的两个特征：指向性和集中性

注意的功能：选择、保持、对活动的调节和监督

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

❑信息的显示应醒目，以便执行任务时使用，可使用动画图形、彩色、下划线，对条目及不同的信息进行排序，在条目之间使用间隔符等。

❑避免在界面上安排过多的信息。尤其要谨慎使用色彩、声音和图像，人们倾向于使用过多的这类表示，而导致界面混杂，分散用户的注意力，让用户反感。

❑朴实的界面更容易使用。

3.记忆：

三个环节：识记、保持、再认和回忆

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

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

❑由于用户长于“识别”而短于“回忆”，所以在设计界面时，应使用菜单、图标，且它们的位置应保持一致。

❑为用户提供多种电子信息（如文件、邮件、图像）的编码方式，并且通过颜色、标志、时间戳、图标等，帮助用户记住它们的存放位置。

4.问题解决：

5.语言处理：

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

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

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

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

影响认知的因素：

情感、个体的差异（人机交互设计应充分考虑个体的差异

❑当进行任何一种交互形式设计时，应该考虑我们的决定是否会对目标用户中的一部分带来不方便。

❑现有的强调图形界面的交互设计实际上排除了那些有视力缺陷的人，因此系统应考虑提供其他的感知通道。）

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

概念模型：指的是一种用户能够理解的系统描述，它使用一组集成的构思和概念，描述系统做什么、如何运作、外观如何等。

设计概念模型的关键阶段：

1.了解用户在执行日常任务时做什么。

2.选择交互方式，并决定采用何种交互形式（是使用菜单系统，还是使用语音输入，或命令式的系统）。有关交互方式的决策与有关交互形式的决策是不相同的。前者是更高层次的抽象，它关心的是要支持的用户活动的本质，而后者关心的是特殊的界面类型。

三个相互联系的概念模型：

1.设想的模型，说明系统如何运作。

2.系统映像——系统实际上如何运作。

3.用户模型——用户如何理解系统的运作。

认知概念模型：

✓思维模型（有易于理解的系统映像，易于理解直观的反馈信息；正确的信息类型和信息层次）

✓信息处理模型（输入或刺激–>编码–>比较–>响应选择–>响应执行–>输出或响应）

✓外部认知模型（1.使用基于外部认知的方法进行交互设计时，总体原则是要在界面上提供外部表示，以减轻用户的记忆和计算负担。2.设计人员需要开发不同类型的可视化信息，以便用户解决某个问题，扩充和增强认知能力。）

✓分布式认知模型

（在进行分布式认知分析时，通常需要考查：

❑分布式问题的解决方法，包括协议解决方式

❑语言及非语言行为的任务，包括说了什么、眼神和眨眼等暗示什么、什么是没有说 出来的

❑使用的各种协调机制，如规则、规程

❑协作活动在进行过程中将用到的各种通信路径

❑如何共享和访问信息）

交互设备

输入设备

文本输入设备

键盘、手写、语音

图像输入设备

扫描仪（性能指标：分辨率、扫描速度）、摄像头（衡量的关键因素：感光元器件、像素数、解析度、视频速度、镜头）

三维信息输入设备

三维扫描仪（接触式、非接触式）、动作捕捉设备（机械式、电磁式、光学式）

指点输入设备

完成一些定位和选择物体的交互任务。物体可能处于一维、二维、三维或更高维的空间中，而选择与定位的方式可以是直接选择，或通过操作屏幕上的光标来完成。

鼠标（机械式（半光学）、光电式）、光笔、控制杆、触摸板、触摸屏（电阻、电容感应、红外线、表面声波）、手写液晶屏、眼动跟踪系统

输出设备

显示器（光栅扫描型显示器：位图显示技术、屏幕坐标系）

分类：

阴极射线管（CRT）显示器、液晶显示器、等离子显示器

主要指标：

扫描方式、刷新频率、点距、分辨率、最大亮度、对比度

数字纸

打印机（针式、喷墨、三维）

语音交互设备

耳麦、声卡（声音合成设备）

交互技术

人机交互输入模式

请求模式、采样模式（优点：这种模式对连续的信息流输入比较方便，也可同时处理多个输入设备的输入信息。缺点：当应用程序的处理时间较长时，可能会失掉某些输入信息）、事件模式（输入设备和程序并行工作。输入设备把数据保存到一个输入队列，也称为事件队列，所有的输入数据都保存起来，不会遗失。应用程序随时可以检查这个事件队列，处理队列中的事件，或删除队列中的事件）

基本交互技术

定位、笔划、定值、选择、字符串

二维图形交互技术

几何约束、引力场、拖动、橡皮筋技术、操作柄技术

三维图形交互技术

直接操作（深度感、半透明三维光标）、三维Widgets（几何形状表示其用途、适当选择Widget控制的自由度）、三视图输入

自然交互技术

多点触控技术：

多点触控技术由硬件和软件两部分组成。

多点触控软件技术： 触点检测和定位、手指触点跟踪、触摸手势识别

触点检测和定位：

图像预处理过程包括：灰度变换、平滑去噪、去除背景、图像分割等。

手势识别技术

手势分为：控制、对话、通信、操作手势

按手势输入设备分为两类：数据手套、摄像机

◦ 手势分割

 三类分割方法：一是基于直方图的分割，即阈值法；二是基于局部区域信息的分割；三是基于颜色等物理特征的分割方法。

◦ 特征提取和选择

 常用的手势特征有：轮廓、边缘、图像矩、图像特征向量以及区域直方图特征等。

◦ 手势识别

 模板匹配技术：它将待识别手势的特征参数与预先存储的模板特征参数进行匹配，通过测量两者之间的相似度来完成识别任务。

 统计分析技术：通过统计样本特征向量来确定分类器的基于概率统计理论的分类方法。

 神经网络技术：该技术具有自组织和自学习能力，具有分布性特点，能有效的抗噪声和处理不完整模式以及具有模式推广能力。

表情识别技术

人脸图像的获取与预处理、表情特征提取和表情分类。

语音交互技术

语音特征提取、声学模型

眼动跟踪技术

眼动测量方法

笔交互技术

联机手写识别：

预处理、特征抽取、特征匹配和判别分析

脱机手写识别

界面设计

界面设计原则

 命令行界面可以看作是第一代人机界面，其中人被看成操作员，机器只做出被动的反应，人用手操作键盘，输入数据和命令信息，通过视觉通道获取信息，界面输出只能为静态的文本字符。

 图形界面可看作是第二代人机界面，是基于图形方式的人机界面。由于引入了图标、按钮和滚动条技术，大大减少了键盘输入，提高了交互效率。

 多通道用户界面则进一步综合采用视觉、语音、手势等新的交互通道、设备和交互技术，使用户利用多个通道以自然、并行、协作的方式进行人机对话，通过整合来自多个通道的、精确的或不精确的输入来捕捉用户的交互意图，提高人机交互的自然性和高效性。

1.命令行和文本菜单技术

2.图形用户界面

 桌面隐喻

◦ 桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。

所见即所得

◦ 在WYSIWYG交互界面中，其所显示的用户交互行为与应用程序最终产生的结果是一致的。

直接操纵

◦ 直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。

设计图形用户界面的原则

1.一般性原则

界面要具有一致性，菜单选择、命令输入、数据显示等风格一致

常用操作要有快捷方式

提供必要的错误处理功能

对操作人员的重要操作要有信息反馈

操作可逆

设计良好的联机帮助

合理划分并高效的使用显示屏

2.颜色的使用

3.图标的设计

简洁、不过于抽象、视觉冲击、

4.按钮的设计

点击时、放在上面点或不点，不能点

5.屏幕布局的设计

平衡、预期、经济、顺序、规则化

6.菜单界面的设计

7.填表输入界面的设计

一致性、表格的组织结构和用户任务相一致、

设计流程：

用户的观察与分析

实施

以用户为中心的界面设计

四个原则：及早以用户为中心、综合设计、及早并持续性的进行测试、反复式设计

人机交互界面表示模型与实现

人机交互界面表示模型：

行为模型、结构模型、表现模型

行为模型：

1. GOMS（ Goal, Operator, Method, Selection ）

目标操作方法和选择行为模型是在交互系统中用来分析用户复杂性的建模技术，用于建立用户行为模型。它采用“分而治之”的思想，将一个任务进行多层次的细化，通过目标 (Goal)、操作(Operator)、方法 (Method) 以及选择规则 (Selection rule) 四个元素来描述用户行为。

选择规则

选择规则是用户要遵守的判定规则，以确定在特定环境下所使用的方法。当有多个方法可供选择时，GOMS中并不认为这是一个随机的选择，而是尽量预测可能会使用哪个方法

局限性：

 GOMS没有清楚的描述错误处理的过程，假设用户完全按一种正确的方式进行人机交互，因此只针对那些不犯任何错误的专家用户。

 GOMS对于任务之间的关系描述过于简单,只有顺序和选择。事实上任务之间的关系还有很多种，另外选择关系通过非形式化的附加规则描述，实现起来也比较困难。

 GOMS把所有的任务都看作是面向操作目标的，而忽略了一些任务所要解决的问题本质以及用户间的个体差异，它的建立不是基于现有的认知心理学，无法代表真正的认知过程

2. LOTOS（Language Of Temporal Ordering Specification）

时序关系说明语言是一种作为国际标准的形式描述语言，它提供了一种通用的形式语义，可保证描述不存在二义性，便于分析和一致性测试理论的研究。

其基本思想是用一套形式化和严格的表示法来刻画系统外部可见行为之间的时序关系，系统由一系列进程组成，两个以上的进程在执行同一个外部可见的行为时会发生交互，进行数据交换、信息传递、协调同步等操作。

⚫ 下面给出LOTOS模型中定义的基本算符：

• T1 ||| T2（交替Interleaving）：T1和T2两个任务相互独立执行，可按任意顺序执行，但永远不会同步。

• T1 [] T2（选择Choice）：需要在T1，T2中选择一个执行，一旦选择某一个后，必须执行它直到结束，在这中间另一个再无执行机会。任务如何来选择，并没有给出一定的形式化描述。

• T1 | [a1,…,an] | T2（同步Synchronization）：任务T1，T2必须在动作（a1,……，an）处保持同步。

• T1 [> T2（禁止Deactivation）：一旦T2任务被执行，T1便无效（不活动）。

• T1 >> T2（允许Enabling）：当T1成功结束后才允许T2执行。

LOTOS与GOMS的结合：

 LOTOS模型很好的描述了任务之间的时序约束关系，这些时序约束关系能更好的描述GOMS中子目标之间的关系。

 用GOMS模型描述任务的分解过程，而用LOTOS给出子任务之间的约束关系，这样就可以增加两种表示模型的表示能力。

3 UAN（User Action Notion）

用户行为标注是一种简单的符号语言，着眼于用户和界面两个交互实体的描述，主要描述用户的行为序列以及在执行任务时所用的界面。UAN模型的标识符主要有两种：用户动作标识符和条件选择标识符。

结构模型：

产生式规则、状态转移网络

表现模型

逻辑组织结构、面板内部的事件分发及响应方式、面板间的关系

界面描述语言

用户界面标记语言UIML、扩展界面标记语言XIML、XML用户界面语言XUL

窗口系统

MVC

MVC把一个应用的输入、处理、输出流程按照模型 (model)、视图（View）和控制（Controller）的方式进行分离，形成模型层、视图层、控制层三个层次。

用户界面管理系统

对话独立性

可移植性、可重用性、界面的多样性、定制界面、

UIMS的表示方法

表现层、对话控制、应用层的表示方法

Web界面设计

一般的Web界面设计应该遵循如下基本原则：

⚫ 以用户为中心

要求把用户放在第一位。设计时既要考虑用户的共性，同时也要考虑他们之间的差异性。

⚫ 一致性

Web界面设计还必须考虑内容和形式的一致性。其次，Web界面自身的风格也要一致性，保持统一的整体形象。

⚫ 简洁与明确

Web界面设计是设计的一种，要求简练、明确。

⚫ 体现特色

只有丰富特色、内容翔实的网页才能使浏览者驻足阅读。特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动浏览者。

⚫ 兼顾不同的浏览器

⚫ 明确的导航设计

网站首页导航应尽量展现整个网站的架构和内容，要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。

Web界面要素设计：

界面规划、文化与语言、以用户为中心、一致性、简洁与明确、体现特色、兼顾不同的浏览器、明确的导航设计、内容，风格与布局，色彩设计

文本设计：

 文本不要太多，以免转移浏览者注意力。

 要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。

 选择的字体应和整个界面应融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。

 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。

 通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。

 应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。

多媒体元素设计

Web界面设计技术

HTML：

HTML是用来表示网上信息的符号标记语言，是一个跨平台语言，能在Windows、Macintosh和Unix平台上工作。HTML已经成为了Web文档信息的标准方法，是构成Web界面的主要工具。

HTML语言的标记元素通常分为如下几类：基本标记元素、图形标记元素、表格标记元素、表单标记元素。

JavaScript：

JavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。

基本特点： JavaScript是一种脚本编写语言；是基于对象的语言；简单性；安全性；动态性；跨平台性。

服务器端脚本语言：

目前流行的三大服务器端脚本语言是ASP、PHP、JSP。对于Web服务器来说，提供一个接口使其它应用程序能够与之相连成为一种常用的方法。通过这个接口，定制的可执行程序能够接收来自客户端的信息，包括通过点击超链接或在浏览器中键入统一资源定位符（URL）所提出的界面请求的细节。应用程序对客户端的请求能够生成相应的响应，而不是从服务器磁盘上读取文本或标记文件。

AJAX技术

AJAX（Asynchronous JavaScript and XML）全称为“异步JavaScript和XML”，是一种创建交互式Web界面应用的开发技术，是一种新的架构模式。AJAX尝试建立桌面应用程序的功能和交互性与不断更新的 Web 应用程序之间的桥梁。在 Web 应用程序中可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件。

基本流程：创建XMLHttpRequest类，发送请求，响应处理，用文本字符串的方式返回服务器的响应，以XMLDocument对象方式返回服务器的响应。

WebGL技术

WebGL技术是一种在Web技术的基础上实现在网页上绘制和渲染复杂的三维立体图形且用户可以与之交互的技术。其基本目标是建立网页上的3D复杂图形。

基本特征包括交互性、三维、简洁性、高度真实感等。通过WebGL技术的帮助，开发人员可以开发出具有三维效果的用户界面，用户可以在浏览器中运行三维的交互应用，而不需要安装任何的插件。

WebGL网页的软件结构：

WebGL页面包含三种语言：HTML5、JavaScript和GLSL ES。通常GLSL ES是（以字符串的形式）在JavaScript中编写的，实际上WebGL程序也只需要用到HTML文件和JavaScript文件。

移动界面设计

移动设备及交互方式

交互方式：

输入方式：键盘、手写、语音识别、多点触控、其他感知信息输入

输出方式：显示屏幕、声音输出

移动设备特别是掌上设备的自身特点使其在作为移动应用的开发目标平台，存在诸多限制：

◦ 资源相对匮乏

◦ 移动设备的种类繁多

◦ 连接方式复杂

重点移动界面设计原则：

◦ 简单直观

◦ 个性化设计

◦ 易于检索

◦ 界面风格一致

◦ 避免不必要的文本输入

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

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

◦ 文本信息应当本地化

移动界面要素设计

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

◦ 菜单

◦ 按钮

◦ 多选列表

◦ 文字显示

◦ 数据输入

◦ 图标与图像

◦ 报警提示

◦ 移动多媒体

◦ 导航设计

移动开发平台与工具

移动开发平台技术

开发移动应用是一项复杂的任务，不仅需要考虑各种复杂的网络连接方式，还要考虑各种不同的硬件设备甚至不同型号的设备之间的差异，还要与现有的应用体系尽可能的集成，因此选择适当的开发平台也很重要。

下面介绍目前常用的几种移动应用开发的体系结构

1）Android 操作系统

2）iOS 操作系统

3）Windows Phone 操作系统

4）BlackBerry 操作系统

5）其他操作系统

移动设计原则

 布局结构清晰

清晰的布局结构是对一个应用是否可用的基本要求，功能布局层次鲜明，使得新用户通过低成本的学习快速记忆掌握应用的功能布局，能够在短时间内完成既定的任务。

 内容清晰

保持图标的简约以及文字的可读尺寸，切忌因为过于追求特效与视觉美感，忽略最基本的可读性。

 适合的灰度与色彩对比度

为不同的环境模式提供相应的对比度设计，以减少用户的阅读疲劳，其中仍需保持内容的可读性。

 声音事件的反馈

设计不应局限于视觉体验，在enable操作后触发的声音，会让用户确信每一步操作的正确，以及填充某些环境下视觉设计的死角。

 适合的环境元素参与

更多具有感情色彩的元素参与，将赋予界面更多的灵性。将weather的元素加入reader不是一件很温馨的事情么？

手机交互设计原则

考虑屏幕尺寸和分辨率、视觉重点自上而下、界面简洁、任务拆分、避免输入、一致性、考虑使用情景、考虑操作方式、考虑界面反馈、

移动浏览标准协议

采用J2ME等技术开发的应用软件需要运行程序的用户终端上进行安装和配置，同时也对终端的性能具有一定的要求。移动应用的开发还有一种模式，就是类似于Web应用的开发，用户端仅需支持一定的移动浏览标准协议，通过移动浏览器，就可以通过网络访问移动应用服务器，获取信息或完成某些操作。

移动浏览标准协议

1）WAP

2）WML与WMLScript

3）XHTML Basic 与XHTML MP

移动界面开发工具

1. Android开发工具
2. iOS开发工具
3. Windows Phone开发工具