141
| Date post: | 18-Jan-2023 |
| Category: |
Documents |
| Upload: | khangminh22 |
| View: | 0 times |
| Download: | 0 times |
主讲教师金鑫
jinxinctbueducn2019年秋季
人机交互的软件工程方法mdashmdash 人机交互基础知识
人工智能学院 人机交互的软件工程
教学目标
提供一系列交互设计的方法论
熟悉人机交互基础知识
搭建人机交互学科的整体框架
了解交互应用开发注意事项和可用技术方法
介绍人机交互形式化理论和方法
学习ldquo以用户为中心rdquo的设计 思想
评估交互软件的功能
使用主流的交互设计工具提高设计效率
2
人工智能学院 人机交互的软件工程
课程教材
主要教材 辅助教材
3
人工智能学院 人机交互的软件工程
教学实践用书
4
人工智能学院 人机交互的软件工程
课程考核
平时成绩
（课堂提问书面作业）
期中测试
期末考试
5
人工智能学院 人机交互的软件工程
内容安排（1）
基础篇 第1章 人机交互概述
第2章 人机交互基础知识
第3章 交互设计目标与原则
第4章 交互设计过程
设计篇 第5章 交互式系统需求
第6章 交互式系统设计
第7章 可视化设计
第8章 交互设计模型与理论
第9章 以用户为中心的设计
6
人工智能学院 人机交互的软件工程
内容安排（2）
评估篇 第10章 评估的基础知识
第11章 评估之观察用户
第12章 评估之询问用户和专家
第13章 评估之用户测试
7
第1章 人机交互概述
8
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
教学目标
提供一系列交互设计的方法论
熟悉人机交互基础知识
搭建人机交互学科的整体框架
了解交互应用开发注意事项和可用技术方法
介绍人机交互形式化理论和方法
学习ldquo以用户为中心rdquo的设计 思想
评估交互软件的功能
使用主流的交互设计工具提高设计效率
2
人工智能学院 人机交互的软件工程
课程教材
主要教材 辅助教材
3
人工智能学院 人机交互的软件工程
教学实践用书
4
人工智能学院 人机交互的软件工程
课程考核
平时成绩
（课堂提问书面作业）
期中测试
期末考试
5
人工智能学院 人机交互的软件工程
内容安排（1）
基础篇 第1章 人机交互概述
第2章 人机交互基础知识
第3章 交互设计目标与原则
第4章 交互设计过程
设计篇 第5章 交互式系统需求
第6章 交互式系统设计
第7章 可视化设计
第8章 交互设计模型与理论
第9章 以用户为中心的设计
6
人工智能学院 人机交互的软件工程
内容安排（2）
评估篇 第10章 评估的基础知识
第11章 评估之观察用户
第12章 评估之询问用户和专家
第13章 评估之用户测试
7
第1章 人机交互概述
8
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
课程教材
主要教材 辅助教材
3
人工智能学院 人机交互的软件工程
教学实践用书
4
人工智能学院 人机交互的软件工程
课程考核
平时成绩
（课堂提问书面作业）
期中测试
期末考试
5
人工智能学院 人机交互的软件工程
内容安排（1）
基础篇 第1章 人机交互概述
第2章 人机交互基础知识
第3章 交互设计目标与原则
第4章 交互设计过程
设计篇 第5章 交互式系统需求
第6章 交互式系统设计
第7章 可视化设计
第8章 交互设计模型与理论
第9章 以用户为中心的设计
6
人工智能学院 人机交互的软件工程
内容安排（2）
评估篇 第10章 评估的基础知识
第11章 评估之观察用户
第12章 评估之询问用户和专家
第13章 评估之用户测试
7
第1章 人机交互概述
8
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
教学实践用书
4
人工智能学院 人机交互的软件工程
课程考核
平时成绩
（课堂提问书面作业）
期中测试
期末考试
5
人工智能学院 人机交互的软件工程
内容安排（1）
基础篇 第1章 人机交互概述
第2章 人机交互基础知识
第3章 交互设计目标与原则
第4章 交互设计过程
设计篇 第5章 交互式系统需求
第6章 交互式系统设计
第7章 可视化设计
第8章 交互设计模型与理论
第9章 以用户为中心的设计
6
人工智能学院 人机交互的软件工程
内容安排（2）
评估篇 第10章 评估的基础知识
第11章 评估之观察用户
第12章 评估之询问用户和专家
第13章 评估之用户测试
7
第1章 人机交互概述
8
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
课程考核
平时成绩
（课堂提问书面作业）
期中测试
期末考试
5
人工智能学院 人机交互的软件工程
内容安排（1）
基础篇 第1章 人机交互概述
第2章 人机交互基础知识
第3章 交互设计目标与原则
第4章 交互设计过程
设计篇 第5章 交互式系统需求
第6章 交互式系统设计
第7章 可视化设计
第8章 交互设计模型与理论
第9章 以用户为中心的设计
6
人工智能学院 人机交互的软件工程
内容安排（2）
评估篇 第10章 评估的基础知识
第11章 评估之观察用户
第12章 评估之询问用户和专家
第13章 评估之用户测试
7
第1章 人机交互概述
8
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
内容安排（1）
基础篇 第1章 人机交互概述
第2章 人机交互基础知识
第3章 交互设计目标与原则
第4章 交互设计过程
设计篇 第5章 交互式系统需求
第6章 交互式系统设计
第7章 可视化设计
第8章 交互设计模型与理论
第9章 以用户为中心的设计
6
人工智能学院 人机交互的软件工程
内容安排（2）
评估篇 第10章 评估的基础知识
第11章 评估之观察用户
第12章 评估之询问用户和专家
第13章 评估之用户测试
7
第1章 人机交互概述
8
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
内容安排（2）
评估篇 第10章 评估的基础知识
第11章 评估之观察用户
第12章 评估之询问用户和专家
第13章 评估之用户测试
7
第1章 人机交互概述
8
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
第1章 人机交互概述
8
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互的概念
人机交互（Human-Computer InteractionHCI）是关于设计评价和实现供人们使用的交 互式计算机系统且围绕这些方面的主要现象进行研究的科学（ACM SIGCHI1992第6页）
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互的概念
广义上讲人机交互以实现自然高效和谐的人机关系为目的与之相关的理论和技术都在其研究范畴是计算机科学设计学心理学认知科学社会学等学科的交叉学科研究开发新的人机交互设备技术和理论以实现无处不在计算ubiquitous computing环境下的以用户为中心的交互式计算机系统使其能够增强人的创造力解放人类的大脑改善人与人之间的交流与协作
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互的概念
狭义上讲人机交互主要是研究人与计算机之间的信息交换它主要包括人到计算机和计算机到人的信息交换两部分人们如何借助键盘鼠标操纵杆眼动跟踪器位置跟踪器数据手套压力笔等设备用手脚声音姿势或身体的动作眼睛甚至脑电波等向计算机传递信息计算机如何通过打印机绘图仪显示器头盔式显示器（HMD）自由立体显示器VR眼镜音箱力反馈等输出设备给人提供信息
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
Human程序的最终用户组织中的其他人
Computer程序运行的机器
Interaction用户告诉计算机他们想要什么计算机进行运算并反馈运算结果
The System
The User
Input Output
控制信息
显示信息
人机交互(HCI Human-Computer Interaction)
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互的目标
通过以下方式提高生产力并降低费用 安全
系统是否可以防止危险 例如 核电站航空工程
功能 系统可以做多少事情
效率 完成任务需要多少资源
可用性愉快度 系统有多容易学习和使用
但是 高功能（许多方式做同样的事情）实际上可以降低可用性
造成混乱
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
目标 用户想要达到的状态
在电话里与某人交谈 保存文件
可视化 提示
控制需要可见 良好的映射效果 建议功能
用户界面应该帮助用户始终了解 系统的当前状态 可以做什么操作 Windows 关机并更新
例如 将光标放在屏幕上的某个点上时应该清楚如果单击鼠标会发生什么
反馈 当发生任何变化时它应该是可见的
当您删除文件时系统不应该只是说ldquo准备好rdquo 汽车---转向和车轮
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互中的五个关键思想
可见性 技术术语指对象的属性 可以对对象执行的一组操作和过程
ldquo感知可承受性rdquo是典型用户认为可以对对象做的事情 是应该拉门还是推门 这个图标是什么意思
为了提高可见性反馈我们需要 选择具有良好感知能力的物体 设计UI以产生更好的感知能力
任务 用户想要执行的操作
打电话给某人 保存文件
目标产生任务任务产生目标
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
设计时要考虑的因素
需要考虑到
用户是谁
正在开展哪些活动
在哪里进行互动
需要优化用户与产品的互动
这样他们就能满足用户的活动和需求
16
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
交互设计（Interaction DesignID）
17
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 学术学科之间的关系
学术学科为ID做出贡献 心理学
社会科学
计算机科学
工程
人体工程学
情报
18
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
IDHCI和其他领域之间的关系 - 设计实践
有助于ID的设计实践 平面设计
产品设计
艺术家设计
工业设计
电影业
19
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
IDHCI和其他领域 - 跨学科领域之间的关系
与交互设计相关的跨学科领域
HCI 普适计算
人为因素
认知工程
认知人体工程学
计算机支持的合作工作
信息系统
20
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
在多学科团队中工作
许多来自不同背景的人参与其中
看待和谈论事物的不同观点和方式
优点 产生了更多的想法和设计
缺点 难以沟通并推进正在创建的设计
21
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互与其他学科的关系
人机交互与认知心理学人机工程学多媒体技术和虚拟现实与增强现实技术密切相关其中认知心理学与人机工程学是人机交互技术的理论基础而多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
认知心理学（Cognitive Psychology）
研究人们如何获得外部世界信息信息在人脑内如何表示并转化为知识知识怎样存储又如何用来指导人们的注意和行为
涉及心理活动的全部过程mdashmdash从感觉到知觉识别注意学习记忆概念的形成思维表象回忆语言情绪和发展过程
信息加工心理学是现代认知心理学的主流用计算机信息处理过程来类比人的认知过程
了解认知心理学原理可以指导人们进行人机交互界面设计可用性用户心理用户行为
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机工程学（Ergonomics）
人机工程学是运用生理学心理学和医学等有关知识研究人机器环境相互间的合理关系以保证人们安全健康舒适地工作从而提高整个系统工效的交叉学科
早期人机工程学是最活跃最主要的分支 硬件人机工程学对人体能力人体限制及其他与设计相关的人体特性信息的应用以满足设
计分析测试与评价标准化以及系统控制的要求
软件人机工程学（Software Ergonomics）研究软件和软件界面侧重于运用和扩充软件工程的理论和原理对软件人
机界面进行分析描述设计和评估
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
多媒体技术
多媒体技术是指将文本声音图形图像视频等集成在一起的技术
动画音频视频等动态媒体大大丰富了计算机表现信息的形式拓宽了计算机输出的带宽提高了用户接受信息的效率
多媒体带来的信息冗余性可消除人机通信过程中的歧义性及噪声
目前多媒体技术的研究基本上限于信息的存储和传输方面媒体理解和推理研究较少
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
虚拟现实技术Virtual Reality VR
虚拟现实就是借助于计算机技术及硬件设备建立高度真实感的虚拟环境使人们通过视觉听觉触觉味觉嗅觉等感官在其中看听触闻起来像真实的以产生身临其境的感觉的一种技术
沉浸感（immersion） 交互性（interaction） 构想性（imagination）
自然和谐的交互方式是虚拟现实技术的一个重要研究内容其目的是使人能以声音动作表情等自然方式与虚拟世界中的对象进行交互 最终要的三维交互
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
虚拟现实技术
三维交互设备
如立体眼镜WorkBench头盔式显示器CAVE柱形或球形立体显示器立体音频输出设备
位置跟踪器眼动跟踪器三维扫描设备三维鼠标三维跟踪球三维游戏杆数据手套
触觉和力反馈装置可穿戴计算机等
复杂场景的建模实时高度真实感绘制等技术也是虚拟现实非常重要的研究内容
虚拟现实为人机交互的研究提供了很好的契机和媒介
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
增强现实技术 Augmented Reality AR 增强现实技术融合了虚拟环境与
真实环境其在交互性与可视化方法方面开辟了一个崭新的领域而虚拟现实使用虚拟环境取代了真实环境
增强现实是把虚拟的信息立体化在人的周围环境中再现出来虚实结合能够达到以假乱真的地步完全给人逼真的感觉
在增强现实环境中交互是实时的
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
HCI的发展历史
人机交互的发展过程也是人适应计算机到计算机不断地适应人的发展过程它经历了几个阶段
图形用户界面 自然和谐的交互命令行
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互的三个阶段
30
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
HCI的发展历史
语言命令交互阶段 计算机语言经历了由最初的机器语言而后是汇编语言直至高级语言的发展
过程这个过程也可以看作早期的人机交互的一个发展过程
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
HCI的发展历史
图形用户界面（GUI）交互阶段 图形用户界面（Graphical User InterfaceGUI）的出现使人机交互方式发
生了巨大变化GUI 的主要特点是桌面隐喻WIMP技术直接操纵和ldquo所见即所得rdquo
与命令行界面相比图形用户界面的人机交互自然性和效率都有较大的提高图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）
图形用户界面给有经验的用户造成不方便他们有时倾向使用命令键而不是选择菜单且在输入信息时用户只能使用手这一种输入通道
图形用户界面需要占用较多的屏幕空间并且难以表达和支持非空间性的抽象信息的交互
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
HCI的发展历史
自然和谐的人机交互阶段
随着虚拟现实移动计算无处不在计算等技术的飞速发展自然和谐的人机交互方式得到了一定的发展基于语音手写体姿势视线跟踪表情等输入手段的多通道交互是其主要特点其目的是使人能以声音动作表情等自然方式进行交互操作
笔式交互设备
语音交互设备视觉交互设
备 虚拟环境中的交互设备触觉交互设备
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
HCI的发展历史
34
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互的痛点
35
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互与软件工程
人们习惯将软件工程与人机交互视为两个相互独立的学科
实际上人机交互对软件工程技术的发展具有非常大的促进作用
36
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人机交互与软件工程
二者相互区别又相互影响
二者结合才能开发出高可用软件产品
37
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
第2章 人机交互基础知识
38
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
糟糕的设计
底部行上的电梯控件和标签看起来都一样因此很容易错误地推动标签而不是控制按钮
人们不会对顶行的标签和按钮犯同样的错误 为什么
wwwbaddesignscom
39
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
为什么这台自动售货机如此糟糕
需要先按下按钮才能激活
通常在选择之前插入钞票
违反众所周知的惯例
wwwbaddesignscom
40
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人性化的设计
弹珠电话应答机（Bishop1995） 基于日常物品的行为方式
简单直观使用愉快
只需要一步操作即可执行核心任务
41
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
好的和坏的设计
为什么TiVo遥控器的设计要比标准遥控器好得多
bull 花生形状适合手握
bull 逻辑布局和颜色编码清晰独特的按钮
bull 易于定位的按钮
42
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
好的和坏的设计
复杂 简单
43
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
问题提出
哪种方式与智能电视互动最佳 为什么
通过遥控器使用网格键盘按键
使用遥控器上的触摸板在两个字母数字行上滑动
使用遥控或智能扬声器控制语音
44
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
用户体验
产品如何表现并被现实世界中的人们使用
产品如何表现并被现实世界中的人们使用
人们对它的感受以及使用它看着它握住它打开或关闭它时的快乐和满足感
ldquo每个人使用的产品都有用户体验报纸番茄酱瓶斜倚扶手椅羊毛衫rdquo（Garrett2010）
ldquo最终用户与公司服务及其产品互动的所有方面（尼尔森和诺曼2014年）
无法设计用户体验 - 只能为用户体验设计
45
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
定义用户体验
用户如何看待产品例如智能手表是否被视为光滑或厚实以及他们对它的情绪反应例如人们在使用它时是否有积极的体验
(Hornbaeligk and Hertzum 2017)
Hassenzahlrsquos (2010)的用户体验模型
务实用户实现目标是多么简单实用和明显
感受对用户的交互是多么令人回味和刺激
46
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
为什么iPod用户会如此成功
从一开始就提供优质的用户体验
简洁优雅独特的品牌令人愉悦必须有时尚单品吸引人的名字酷
47
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
交互设计的核心特征
用户应参与整个项目的开发
需要确定具体的可用性和用户体验目标明确记录并在项目开始时达成一致
迭代核心活动
48
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
为什么
帮助设计师
了解如何设计符合人们想要需要和可能需要的交互式产品
欣赏一种尺寸不适合所有人（例如青少年与成年人非常不同）
确定他们可能对特定用户组的任何不正确的假设（例如并非所有老年人都想要或需要大字体）
注意人们的敏感性和能力
49
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
可访问性和包容性
可访问性尽可能多的人可以访问交互式产品的程度
重点是残疾人例如那些使用Android操作系统或苹果配音
包容性制作适合尽可能多的人的产品和服务
例如为所有人设计并为所有人提供的智能手机无论他们的残疾教育年龄或收入如何
50
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
残疾人
是否有人残疾随着年龄的增长而变化或者从事故中恢复
损害的严重程度和影响可以在一天中或在不同的环境条件下变化
可能导致残疾因为技术被设计为需要某种类型的交互这对于有缺陷的人是不可能的
51
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
了解残疾
残疾可分类为 感觉障碍（如视力丧失或听力丧失）
身体受损（中风或脊髓损伤后失去对身体一个或多个部位的功能）
认知（包括因年老而导致的学习障碍或记忆认知功能丧失）
每种类型都可以根据能力进一步定义 例如某人可能只有散光色盲或没有光感
损害可能分为
永久性（例如长期轮椅使用者）
临时（即事故或生病后）
情境（例如嘈杂的环境意味着一个人听不到）
52
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
假肢可以被设计成超越功能性（并且通常是丑陋的）到期望和时尚
人们现在提到ldquo戴上轮子rdquo而不是ldquo使用轮椅rdquo
冷静对待残疾
53
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
文化差异
5212015 versus 2152015
哪些应该用于国际服务和在线表格
为什么某些产品如智能手机被世界各地的人们普遍接受而来自不同文化的人对网站的反应却不同
54
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
可用性目标
有效使用
高效使用
使用安全
有很好的效用
简单易学
容易记住如何使用
55
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
可用性和用户体验目标
选择传达一个人的感受情感等术语可以帮助设计师理解用户体验的多面性
可用性目标与用户体验目标有何不同
这两种目标之间是否存在权衡 （例如产品既有趣又安全）
衡量可用性与用户体验目标的难易程度如何
56
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
用户体验目标
理想的方面Satisfying Helpful FunEnjoyable Motivating ProvocativeEngaging Challenging SurprisingPleasurable Enhancing sociability RewardingExciting Supporting creativity Emotionally fulfillingEntertaining Cognitively stimulating Experiencing flow
负面的方面Boring UnpleasantFrustrating PatronizingMaking one feel guilty Making one feel stupidAnnoying CutesyChildish Gimmicky
57
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
设计原则
考虑设计的不同方面的通用抽象
交互设计的注意事项和注意事项
在界面上提供什么以及不提供什么
源于基于理论的知识经验和常识的混合
58
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
可见性 - 界面不友好
这是电梯的控制面板
它是如何工作的
按下您想要的地板按钮
什么都没发生按任何其他按钮
依然没有你需要做什么
关于做什么并不明显wwwbaddesignscom
59
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
可见性 - 改善的界面
有了这个电梯你需要将你的房卡插入插槽之后按下按钮让电梯工作
你会如何让这个动作更加明显
bull使读卡器更加明显
bull提供听觉信息说明该做什么（哪种语言）
bull在读卡器旁边提供一个大标签当有人进入时会闪烁
bull使相关部件可见
bull明确做必须做的事情
wwwbaddesignscom
60
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
如果我穿着黑色怎么办
不可见的自动控制会使其使用起来更加困难
61
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
反馈
将信息发回给用户告知已完成的工作
包括声音突出显示动画和这些的组合
例如单击屏幕按钮时它会提供声音或红色
高亮反馈
例如单击屏幕按钮时它会提供声音或红色高
亮反馈
ldquoccclichhkrdquo
62
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
约束
限制可执行的操作
有助于防止用户选择不正确的选项
可以设计物理对象来约束事物（例如只有一
种方法可以将密钥插入锁中）
63
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
逻辑或模棱两可的设计
你在哪里插上鼠标
你在哪里插入键盘
在顶部或底部连接器
颜色编码的图标有帮
助吗wwwbaddesignscom
64
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
如何更加有效地设计
(A)提供图标和连接器之间的直接相邻映射
(B)提供将连接器与标签相关联的颜色编码
wwwbaddesignscom
65
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
一致性
设计接口具有类似的操作并为类似的任务使用类似的元素（例如总是使用Ctrl键加上命令的第一个初始值进行操作Ctrl + cCtrl + sCtrl + o）
主要好处是一致的界面更容易学习和使用
66
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
当一致性崩溃时
如果有多个命令以同一个字母开头会发生什么
（例如保存拼写选择样式）
您必须找到其他首字母或键组合从而破坏一致
性规则（例如Ctrl + sCtrl + SpCtrl + shift +
l）
增加用户的学习负担使他们更容易出错
67
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
内部和外部一致性
内部一致性是指设计操作以在应用程序中表现相同
使用复杂的接口很难实现
外部一致性是指跨应用程序和设备设计操作接口等
很少这种情况基于不同的设计师的偏好
68
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
键盘数字布局
外部不一致的情况
1 2 34 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a)电话遥控器 (b)计算器计算机键盘
69
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
隐喻启示提供线索
指对象的一个属性允许人们知道如何使用它
（例如鼠标按钮表示可以按动门把手指示可
以拉动）
Norman（1988）用这个术语来讨论日常物品的
设计
从那以后在交互设计中普及讨论如何设计界面
对象（例如滚动条可以上下移动图标点击）
70
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
ldquo隐喻启示rdquo必须提供什么样的交互设计
接口是虚拟的没有像物理对象那样的可供操作
诺曼认为从ldquo真正的rdquo隐含属性方面谈论接口是没有意义的
相反界面被更好地概念化为ldquo感知rdquo来提供操作
学习界面中动作和效果之间任意映射的约定
有些映射比其他映射更好
71
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
活动
虚拟含义
这些屏幕对象如何提供
如果您是新手用户怎么办
你知道怎么处理他们吗
72
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
交互范型（Form）
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
命令行交互
用户通过在屏幕某个位置上键入特定命令的方式来执行任务
ldquo基于字符的界面（Character-based Interface）
优点 专家用户能够快速完成任务
较GUI节约系统资源
可动态配置可操作选项
键盘操作较鼠标操作更加精确
支持用户自定义命令
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
缺点
命令语言的掌握对用户的记忆能力提出较高要求
基于回忆的方式（recall memory） 没有GUI基于识别的方式（recognition memory）容易使用
键盘操作出错频率较高
要求用户记忆指令的表示方式
与可用性理论所强调的ldquo不应要求用户了解计算机底层的实现细节rdquo相违背
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
菜单驱动界面
以一组层次化菜单的方式提供用户可用的功能选项一
个或多个选项的选择可以改变界面的状态
通过鼠标数字键字母键或者方向键进行选择
(d) (e)
(a) (b) (c)
(a) (b) (c)13
13
(d) (e)13
13
13
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
优点 基于识别机制对记忆的需求较低
具有自解释性
容易纠错
适合新手用户若提供了较好的快捷键功能则对于专家用户同样适用
缺点 导航方式不够灵活
当菜单规模较大时导航效率不高
占用屏幕空间不适合小型显示设备 为节省空间通常组织为下拉菜单或弹出式菜单
对专家用户而言使用效率不高
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
（1）现代的菜单形式 （2）网页上的菜单
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
基于表格的界面
显示给用户的是一个表格里面有一些需要用户填写的空格
优点 简化数据输入 只需识别无需学习 特别适合于日常文书处
理等需要键入大量数据的工作
缺点 占用大量屏幕空间
导致业务流程较形式
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
直接操纵
Ben Shneiderman1982 用户通过在可视化对象上面进行某些操作来达到执行
任务的目的
展现了真实世界的一种扩展
对象和操作一直可见
迅速且伴有直观的显示结果的增量操作
增量操作可以方便地逆转
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
直接操纵的三个阶段
自由阶段mdashmdash指用户执行操作前的屏幕视图
捕获阶段mdashmdash在用户动作（点击点击拖拽等）执行过程中屏幕的显示情况
终止阶段mdashmdash用户动作执行后屏幕的显示情况
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
优点
将任务概念可视化用户可以非常方便地辨别他们
容易学习适合新手用户
基于识别对记忆的要求不高可减少错误发生
支持空间线索鼓励用户对界面进行探索
可实现对用户操作的快速反馈具有较高的用户主观满意度
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
缺点
实现起来比较困难
对专家用户而言效率不高
不适合小屏幕显示设备
对图形显示性能的需求较高
不具备自解释性可能误导用户
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
问答界面Wizard
通过询问用户一系列问题实现人与计算机的交互 Web问卷是典型的采用问答方式进行组织的应用
应允许用户方便地取消其中一个界面的选项
优点 对记忆的要求较低
每个界面具有自解释性
将任务流程以简单的线性表示
适合新手用户
缺点 要求从用户端获得有效输入
要求用户熟悉界面控制
纠错过程可能比较乏味
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
隐喻（Metaphor）界面
本质 在用户已有知识的基础上建立一组新的知识实现界面视觉提示和系
统功能之间的知觉联系进而帮助用户从新手用户转变为专家用户
优点 直观生动
无需学习
局限性 不具有可扩展性
不同用户对同一事物可能产生不同的联想
紧紧地将我们的理念和物理世界束缚在一起
寻找恰当的隐喻可能存在困难
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
桌面隐喻
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
自然语言交互
自然语言的模糊性
The boy hit the dog with the stick 她说她不知道
受限于理解技术当前只能够使用受限的语言与计算机进行交流
Q还是自然语言吗
Video
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
交互形式小结
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
理解用户
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
信息处理模型
作用
研究人对外界信息的接收存储集成检索和使用可预测人执行特定任务的效率如可推算人需要多长时间来感知和响应某个刺激（又称ldquo反应时间rdquo）信息过载会出现怎样的瓶颈现象等
信息处理机Lindsay和Norman 没有考虑到注意和记忆的重要性
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
扩展的信息处理机模型
Barber对其进行了扩展
注意和记忆功能与信息处理过程的各个阶段存在交互
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人脑中的记忆结构
三个阶段Atkinson和Shiffrin 感觉记忆
短时记忆
长时记忆
三个阶段之间可以进行信息交换
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人类处理机模型
最著名的信息处理模型
Card等1983 包含三个交互式组件
感知处理器
信息将被输出到声音存储和视觉存储区域
认知处理器 输入将被输出到工作记忆
动作处理器 执行动作
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
存在的问题
把认知过程描述为一系列处理步骤
仅关注单个人和单个任务的执行过程 忽视了复杂操作执行中人与人之间及任务与任务之间的互动
忽视了环境和其他人可能带来的影响
外部认知模型分布式认知模型
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
认知心理学
兴起于20世纪50年代中期
关注人的高级心理过程如记忆思维语言感知和问题解决能力等
神经元网络已经成为新一代人工智能领域最热门的研究课题之一
对HCI的贡献
有助于理解人与计算机的交互过程同时也可对用户行为进行预测
人对于外界的感知有80来自于视觉获取的信息
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
格式塔（Gestalt）心理学
研究人是如何感知一个良好组织的模式的而不是将其视为一系列相互独立的部分 事物的整体区别于部分的组合
ldquoGestaltrdquo 德语ldquo完形（configuration）rdquo或ldquo型式（pattern）rdquo
格式塔心理学又称完形心理学
表明 用户在感知事物的时候总是尽可能将其视为一个ldquo好rdquo的型式
相近性原则相似性原则连续性原则完整性和闭合性原则
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
相近性原则
空间上比较靠近的物体容易被视为整体
设计界面时应按照相关性对组件进行分组
如下图你看到了什么
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
相似性原则
人们习惯将看上去相似的物体看成一个整体
功能相近的组件应该使用相同或相近的表现形式
这一次呢O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O X X X X X X X X X X O
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
连续性原则
共线或具有相同方向的物体会被组合在一起
将组件对齐更有助于增强用户的主观感知效果
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
完整和闭合性原则
人们倾向于忽视轮廓的间隙而将其视作一个完整的整体
页面上的空白可帮助实现分组
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
对称性原则
相互对称且能够组合为有意义单元的物体会被组合在一起
相近性对称性
[ ][ ][ ]
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
前景amp背景
前景和背景在某些情况下可以互换
ldquo整体区别于局部rdquo
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
格式塔心理学反例
让重点更突出
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
人的认知特性
感觉记忆 又称瞬时记忆
在人脑中持续约为1秒钟
帮助我们把相继出现的一组图片组合成一个连续的图像序列产生动态的影像信息
短时记忆 感觉记忆经编码后形成
又称工作记忆约保持30秒 储存的是当前正在使用的信息是信息加工系统的核
心可理解为计算机的内存
短时记忆的存储能力约为7plusmn2个信息单元
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
STM测试
3 12 6 20 9 4 0 1 19 8 98 13 84 猫 房子 纸 笑 人 红色 是的 数字 阴影 下雨
植物 灯泡 巧克力 收音机 一 硬币 直升机
t k s y r q x p a z l b m e
862583621360936 通过将信息组合成一个个有意义的单位可以帮助我们记住复杂的信息
86-25-8362 1360-936
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
游戏
从第一个人开始说
ldquo我去超市买了一条鱼rdquo（或者别的任何东西）
下一个人继续说ldquo我去市场买了一条鱼还买了一个面包rdquo
不断继续每次每个人都在列表里增加某个物品
当第一次有某个人出错时记下能够成功记住的物品数目
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
7plusmn2理论 vs 交互式系统设计
影响
菜单中最多只能有7个选项
工具栏上只能显示7个图标
helliphellip 事实
浏览菜单和工具栏基于人的识别功能 人们识别事物的能力要远胜于回忆事物的能力
界面设计时要尽可能减小对用户的记忆需求同时可考虑通过将信息放置于一定的上下文中来减少信息单元的数目
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
长时记忆
短时记忆-gt长时记忆
短时记忆中的信息经进一步加工后会变为长时记忆
只有与长时记忆区的信息具有某种联系的新信息才能够进入长时记忆
长时记忆的信息容量几乎是无限的
启发
注意使用线索来引导用户完成特定任务
在追求独特的创新设计时也应注重结合优秀的交互范型
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
遗忘
长时记忆中的信息有时是无法提取
不代表长时记忆区的信息丢失了
易出错
ldquo人为错误rdquo被定义为ldquo人未发挥自身所具备的功能而产生的失误它可能降低交互系统的功能rdquo
从表面上看是由于用户的误解误操作或一时大意
大部分交互问题都源于系统设计本身
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
视错觉
知觉感受的扭曲 前后景互换实际上就是视错觉的一种
白色三角的例子
视错觉是不可避免的
启示 对于物体的视觉感知与物体
所处的上下文密切相关
莱亚错觉 艾宾豪斯错觉
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
视觉感知amp上下文
你从图中看到了什么
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
提示一只面向你的动物
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
提示它的头在左侧能产奶
上下文信息有助于增强人们的视觉感知
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
字母顺序重要么
From Cambridge University
Olny srmat poelpe can raed tihs I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg The phaonmneal pweor of the hmuan mnid aoccdrnig to a rscheearch at Cmabrigde Uinervtisy it deosnt mttaer in waht oredr the ltteers in a wrod are t he olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rgh it pclae The rset can be a taotl mses and you can sitll raed it wouthit a porbelm Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef but the wrod as a wlohe Amzanig huh yaeh and I awlyas tghuhot slpeling was ipmorantt
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
中文呢
研表究明汉字的序顺并不定一能影阅响读比如当你看完这句话后才发这现里的字全是都乱的
117
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
交互设备
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
文本输入设备
键盘是最主要的文本输入设备
一般一次只能响应一个按键
新用户的击键速率大约为每秒钟1次而熟练用户则能达到每秒15次的敲击频率
按键较多的硬盘可营造一种专业化的印象 新手用户望而生畏
小键盘特别适合移动设备应用 功能也可能因此受到限制
QWERTY键盘
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
和弦键盘
能够同时响应多个按键 可实现快速数据输入
学习使用时间也较长
投影键盘
内置的红色激光发射器可以在任何物体表面投影出标准键盘的轮廓
红外线技术跟踪手指的动作
可减小键盘所占的物理空间
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
手写输入 比较自然
输入速度慢
语音输入 易受场景噪音影响
受识别效果影响输入效率仅为键盘输入的一半
光学字符识别 Optical character recognition简称OCR 让计算机直接ldquo阅读rdquo
实现了大批量历史数据的信息化
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
定位设备
WIMP系统的显著功能 允许在屏幕上通过指点物体实现对物体的操作或是完成某项功能
鼠标最常用的指点和定位设备 将鼠标拿离桌面再放到不同位置时屏幕光标并不会发生移动 节省空间但可能影响到新手用户的使用
触摸板最广泛的膝上型电脑鼠标 通过电容感应来获知手指移动情况对手指的热量并不敏感 手指在板上移动的距离与光标在屏幕上移动的距离之间的比率随
手指移动的速度而变化 优点
反应灵敏移动速度快
缺点 定位精度较低 手指出汗时会出现打滑不适合在潮湿多灰的环境
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
指点杆 操纵杆的变形
初学者较难上手
特点是定位准确
可通过手指的力度控制鼠标光标移动的速度
在火车等移动场景下也能够进行准确定位
触摸屏 通过手指或铁笔中断一个光线的阵列
较鼠标直观定位的速度很快
适合于在屏幕上选择菜单条目
定位精度较差在小范围选择比较困难
制造成本很高容易污损
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
尖笔光笔
较高的定位精度
在个人数字助理（PDA）中得到了普及
用户的手需要在设备间不断切换 交互效率下降
遮盖部分屏幕显示 设计界面时需要考虑用户手的摆放位置
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
图像输入设备
扫描仪 利用光电扫描将图像转换成像素数据
平板式扫描仪 使用最广泛
较好的扫描速度精度和图像质量使用简单
手持式扫描仪 扫描得到的图像是一个个长条
应用于CAD及大幅面工程图纸
滚筒式扫描仪 最精密的扫描仪器
图像以CMYK或RGB的形式记录
又被称为ldquo电子分色机rdquo
价格昂贵用于专业印刷排版领域
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
数码相机 不需要胶卷和暗房
CCD （电荷耦合元件Charge Coupled Device）芯片 色彩饱和度好图像较为锐利质感逼真
CMOS（互补金属氧化物导体Complementary Metal-Oxide Semiconductor）芯片 高感光度下的表现要好于CCD读取速度快成本低廉
特别适合高性能的单反相机
传真机 兼具图像输入和输出功能
热敏纸传真机（又称卷筒纸传真机）热转印式普通纸传真机激光式普通纸传真机（又称激光一体机）和喷墨式普通纸传真机
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
显示设备
光栅扫描阴极射线管（Cathode ray tube简称CRT）
优点 图像色彩丰富
高清晰度低成本
丰富的几何失真调整能力
缺点 辐射
高电压具有潜在的爆炸危险
占据较大空间
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
液晶显示器
原理 电压的变化会影响微小液晶泡的偏振从而阻碍部分光线射出
进而使得屏幕显示出现明暗差异
优点 低辐射低耗能
体积小质量轻
可视面积大不存在几何和线性失真
缺点 价格昂贵
侧面显示会失真
响应时间慢
使用寿命有限
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
等离子体显示器
原理 通过细小封闭的玻璃泡将水平方向与垂直方向隔离
当水平或垂直方向中任何一个方向输入高电压时玻璃泡中的惰性气体就会发光
优点 可视角度较液晶显示器大
更好的颜色质量和对比度
缺点 使用寿命也较短
易产生残留影像
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
发光二极管
原理 正向加压时发光二极管能发出单色且不连续的光
优点 耗电量小
反应时间快
使用寿命长
体积小
缺点 价格昂贵
使用寿命与散热性能的好坏密切相关
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
电子墨水
原理
电子墨水液体中悬浮着几百万个细小的微胶囊每个胶囊内部都是染料和颜色芯片的混合物通电时颜色芯片发生作用而改变颜色并且可以显示变化的图像
优点
易读性好低功耗成本低质量小
可以应用到纸上或布上产生和报纸一样的显示效果
具有较好的柔性可折叠
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
点字显示器
为盲人用户阅读文字提供了新的途径
字显示格+功能键
可更新的图像显示器正在开发中
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
虚拟环境下的交互设备
原理 计算机模拟产生三维空间的虚拟世界
提供用户视觉听觉触觉等感知器官的模拟体验
让用户如同身临其境一般实时地观察和操作三维空间内的事物
交互性是虚拟现实的基本特征之一 三维鼠标
6个自由度可以选择
数据手套
增强了使用的互动性和沉浸感
虚拟现实头盔
可模拟实现视觉听觉视觉触觉甚至味觉功能
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
交互框架
作用 提供理解或定义某种事物的一种结构
能够帮助人们结构化设计过程
认识设计过程中的主要问题
还有助于定义问题所涉及的领域
执行评估活动周期 EEC 最有影响力的框架
定义了活动的四个组成部分
目标(Goal) ne意图(Intention) 执行(Execution) 客观因素(World) 评估(Evaluation)
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
目标 vs 意图
单个目标可对应多个意图
举例删除文档中的部分内容的目标
意图1通过编辑菜单删除
意图2通过删除按钮删除
每个意图可包含一系列活动
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
EEC模型
从用户视角探讨人机界面问题
共有七个阶段 1-4执行阶段
5-7评估阶段
每个循环代表一个动作
夜晚看书的例子
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
执行隔阂 amp 评估隔阂
EEC模型可解释为什么有些界面的使用存在问题
执行隔阂 用户为达目标而制定的动作与系统允许的动作之间的差别
ldquo保存文件rdquo 举例
评估隔阂 系统状态的实际表现与用户预期之间的差别
意义
如何才能够使用户简单地确定哪些活动是被允许的
如何确定系统是否处于期望的运行状态等问题
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
扩展EEC模型
EEC模型不能描述人与系统通过界面进行的通信
四个构成部分+四个步骤(翻译过程) 系统内核语言
用户任务语言
输入输入语言
输出输出语言
执行阶段 定义执行表现
设计人员应保证从输
入到系统的翻译是容易的
评估阶段 观察
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
不好的映射关系
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
人工智能学院 人机交互的软件工程
小结
不同交互范型
用户特性
设备特性
人机交互框架
