人机交互--设计原则

设计原则种类
• 有效性 有用 有效性/有用
有效性描述了设计是有用的
• 有效性的目标保证了一个设计必须完成用户提 供的所需要的功能
2011-3-29
13
有效性/可用性
• 效用
– 效用原则是指用户使用系统能实际做什么
• 安全性
– 一个具有高度安全性的设计比一个具有高度风 险的设计要更有用
• 恢复
– 通过在交互设计中适当过加入撤销功能 实现和稳定的错误恢复功能来实现
2011-3-29
17
效率/可用性
• 简洁性
– 渐进披露 – 向用户展示仅仅用户需要的
2011-3-29
18
效率/可用性
• 简洁性
– 约束 – 限制某一特定设计中的活动，从而保证 设计的简洁
• 设计简洁的控制
– 物理约束 » 路径 – 物理路径约束到指定方向和位置的运动 » 轴 –物理轴限制了用户沿轴旋转的运动 » 屏障 –屏障提供了空间上的约束，它将用户的运动 限制在界面上的某个区域
2011-3-29
43
其他感知原则－比例
• 黄金分割 – 黄金分割就是两个参数之间，如 果高和宽度的比，必须是0.618
2011-3-29
44
其他感知原则－比例
• 黄金分割
2011-3-29
45
其他感知原则－比例
• Fibonacci 数序列，每一个数是后面两个数的 和
– 数的关系类似与黄金分割
2011-3-29
5
设计原则框架
• 框架包括:
– 可用性目标
• 在框架中有两个主要的可用性目标：可理解性和 可学习性.
– 设计原则分类
• 设计框架将设计原则分为两个主要的类别：效率 性原则和有效性原则
– 设计规则描述的形式
• 框架使用格式“通过。。。原则，可以促 进。。。”来描述不同的原则
• 熟悉记忆的原则可以提升可用性
2011-3-29
36
感知格式塔原则
• 良好的连续性原则– 我们期望看事情要比较平 滑，连续的表现，而不要有陡峭的变化
2011-3-29
37
感知格式塔原则
• 区域原则 – 将具有很小区域的对象视为图形 而不是背景（最小化原则）
2011-3-29
38
感知格式塔原则
• 对称原则– 对称区域往往被看成从中间位置 完整的图
2011-3-29
6
设计原则框架
2011-3-29
7
设计原则框架
• 功能性
– 系统必须具有足够的功能来完成某个具体的事务
• 显示过滤
– 系统功能经过显示过滤（界面）后易于理解
• 可理解性障碍
– 如果功能显示易于理解，那么就不存在可理解性障碍，这 取决于界面设计中效率/可用性的程度用户必须了解输入 的语言需要什么，以及输出的语言表达什么
2011-3-29 28
感知格式塔原则
• 图形和背景: 基本假设
– 我们感知环境由于对象和他们的背景的不同而不 同
The Rubin Face/Vase Illusion
Mac Logo
2011-3-29
29
感知格式塔原则
• 格式塔原则理解:
– Proximity相近性 – Similarity相似性 – Common Fate共同性 – Closure封闭型 – Good Continuity好的连续性 – Area区域性 – Symmetry对称性 – Surroundedness环绕性 – Prägnanz简洁
2011-3-29
47
其他感知原则屏幕复杂度
• 计算复杂度的公式
C, 以bit表示的系统的复杂度 N, 所有组件的总数(高度或宽度) m, 组件的分类数目 pn, nth类组件出现的概率(以该类组件出现的频率为基础)
2011-3-29 48
其他感知原则屏幕复杂度
• 为了计算屏幕复杂性的度量，要做下面的工 作：:
2011-3-29
9
可学习性
高可用性的界面更易于学习
• 设计的可学习性是基于可理解性的，如果您 不能理解他，您就不能学习他
2011-3-29
10
理解性与可学习性
• 可学习性和可理解性是递归的，我们从 影响可学习性的可理解性开始，反过来 增加可理解性
2011-3-29
Comprehensibility/Learnability Feedback Loop
21
效率/可用性
• 可预测性 –预测性是指人的期待和提前确 定事情发生结果的能力
– 一致性和正确性
• 一致性加强了我们的联想，因此增加了记忆 和预测结果和过程的能力 • 在我们争取一致性以前，我们首先要确保正 确性
2011-3-29
22
效率/可用性
• 可预测性
– 一般性
• 帮助我们使用我们先前的经验并将它应用到类似 的情况 允许用户通过以往的经验带来的直觉对事件进行 判断，同时使用一般性原则可以创建惯例 熟悉的菜单名字和选择帮助我们容易定位目标和 功能 屏幕中区域的价值是不等价的
•
平移
反射
旋转
2011-3-29
39
感知格式塔原则
• 环绕原则 –一个被保卫的区域被看作图，包围 图的看作背景
2011-3-29
40
感知格式塔原则
• 简洁原则 – 我们倾向与使用最简单、最稳定 或最完整解释来认识事物
共同性原则的视觉冲突
环绕性原则的视wenku.baidu.com冲突
2011-3-29
41
其他感知原则 –刺激强度
(Norman, 1998, 74)
2011-3-29
25
效率/可用性
渐进披露原则和简洁性原则应该和可见性原则联合作用
• 可见性
– 超负荷
• 仅仅用可见性原则，而不考虑渐进披露使用能导 致可视化超负载 直接操纵界面需要高可见性，因为他们依据用户 的动作来界定即时的视觉反馈
– 反馈
•
2011-3-29
• 可学习性障碍
– 如果界面易于列节那么它就易于学习，他们具有比较直接 的意义
• 有效性/可用性
– 如果用户能够学习如何使用界面，并能够很好的使用功能， 那么界面就具有很好的可用性
2011-3-29 8
可理解性
易于理解的界面设计将具有很好的效率和有效性
• 如果一个用户不理解界面，他就不能使用
• 设计的可理解性强烈的依赖于界面如何向他 的用户表达功能
2011-3-29
19
效率/可用性
• 简洁性约束
– 心理约束 » 惯例 – 通过使用可学习的行为来影响用户的行动映 射–映射 能够影响用户对动作和结果之间关系的认 知 » 符号- 通过定义和解释界面元素的含意，符号可以 影响我们与界面进行交互的方式
2011-3-29
20
效率/可用性
• 可记忆性 – 具有高可记忆性的界面将容易学 习和使用
32
感知格式塔原则
• 相似性原则 –具有相似的特点如大小、形状、 颜色等的对象应该分配一组
Rows of Similar Objects
Columns of Similar Objects
Grouped Columns
2011-3-29
33
感知格式塔原则
• Macromedia’s Dreamweaver属性面板
计算机不应该给您的工作带来不便或者有害于工作
(Raskin, 2000)
2011-3-29
14
效率/可用性
• 灵活性
– 灵活的工具可以被应用于多个环境并且应用 不同的需求
• 定制
– 如果人们能根据用户的个人喜好定制界面 一个工具将有非常大的灵活性
• 稳定性
– 稳定的系统是可靠的系统 – 能够持续稳定运行的系统比经常崩溃的系统 更加有用
1. 使用矩形包围屏幕中的每个元素 2. 计算屏幕中元素的数目及列的数目（垂直方向 的对齐点） 3. 计算元素的数目及行的数目（水平方向上的对 齐点）
2011-3-29
49
其他感知原则－屏幕复杂度
2011-3-29
50
其他感知原则－屏幕复杂度
设计原则
• • • • • • • • • • • 交互设计原则 可理解性 可学习性 有效性/有用性 效用/可用性 分组 刺激强度 比例 屏幕复杂性 分辨率/关闭 可用性目标
1
2011-3-29
交互设计原则
• 如何为复杂的交互系统建立一流的解决方案 • 哪些创造出功能强大又符合审美的伟大的设 计的交互设计师是如何成功的
26
效率/可用性
• 可见性
– 识别/回忆
• 识别和回忆可见性的原则基于这样的实事，人们 识别比回忆更好一些 人们需要能够在复杂的信息环境中确定自己的位 置
– 定位
•
2011-3-29
27
分组
• 低层次原则 – 用于关于屏幕控制菜单和布局 的决策
使用视觉暗示支持界面的逻辑结构
• 感知格式塔原则
– 格式塔心理学建立在感知环境作为整体的一 部分的基础上，即使是感知环境并没有表示 出整体的信息 – 格式塔心理学的核心是为不完整的视觉信息 找最简单的解决方法 – 格式塔心理学试图解释分组中的各种元素
11
交互设计原则
• 有效性/有用
– Utility效用 – Safety安全 – Flexibility 灵活 – Stability稳定
• 效率/可用性
– Simplicity简单 – Memorability可记忆 – Predictability可预测 – Visibility可见性
2011-3-29 12
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, …
2011-3-29
46
其他感知原则－屏幕复杂度
• 由Tullis提出的的复杂性评估标准可用于计算 计算设计相对的复杂度和困难度
– 复杂度的度量使用信息理论 (Shannon & Weaver, 1949)
• 我们首先感觉到是刺激的强度然后才是行为的 含义
2011-3-29
42
其他感知原则–比例
• 比例可以用来表示逻辑的层次
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
23
– 惯例
•
– 熟悉度
•
– 布局，布局，布局
2011-3-29
•
效率/可用性
• 可预见性
– 模式
• 模式建立认知模型的稳定性，因为他们改变了对 象运行方式
2011-3-29
24
效率/可用性
• 可见性
– 可见性的原则使用户了解系统所有的功能和组 件，包括用户所有的动作和回馈
同时显示所有的组件会导致界面混乱，不显示所有的组件会丢 失某些功能.
2011-3-29 15
效率/可用性
效率描述了设计的可用性 • 效率 – 高效率目标规定设计应该能使以快捷、容易且 不必经过非常复杂的而无关的过程来完成任务
计算机不应该浪费您的时间也不应该需要您做 更多的工作
2011-3-29
16
效率/可用性
• 简洁性
– 如果事情是简单的，它就会变的非常容易理解， 因此易于学习和记忆 – Ockham’s Razor 设计者只包留下必须的元素 – 80/20 Rule – 80/20原则隐含了应用程序中的 80％应用使用20％的功能 – 满足度， 结合了相互矛盾的两个方面，是寻 找满足用户需求的最优化设计方案，还是只设 计一个用户够用的方案
– 影响记忆性的有很多因素:
• • • • 位置，如果某个特定的对象放在固定的位置，它 将容易记住 逻辑分组，通常我们会对事务按照逻辑进行分组， 这使得他们容易记忆 惯例，如果设计中使用常规的对象和符号，它们 将容易记忆 冗余，如果我们使用多种感知通道对信息编码， 人们将会依据个人的情况进行选择
2011-3-29
2011-3-29
2
交互设计原则
2011-3-29
3
交互设计原则
设计原则用来指导设计行为
•设计原则不规定具体的结果他们在一具体的设 计项目的场景中起作用 •设计原则指导交互设计师并且帮助他们对设计 问题作出决策
2011-3-29
4
隔阂与原则Gulfs and Principles
• 设计原则用来确定执行阶段和评估阶段存在 差距 • 执行阶段的差距关系到原则的有效性 • 评估阶段的差距关系到设计原则的效率
2011-3-29 30
感知格式塔原则
• 相近性原则 – 功能比较相近的元素应该放在 一起
Equidistant
Horizontal Proximity
Vertical Proximity
2011-3-29
31
感知格式塔原则
• 相近性原则 - Adobe PhotoShop属性对话框
2011-3-29
– 我们的眼睛可以挑出所有的文本框，因为他们有 共同的蓝区域和白区域
2011-3-29
34
感知格式塔原则
• 共同性原则 – 对象要移到一起，使得看上 去有关系
未对起的下拉菜单
对起的下拉菜单
2011-3-29
35
感知格式塔原则
• 封闭性原则 – 设计过程中即使对像形状上有 间隙也把它视为完整的 ][ [ ][ ][ ][ ][ ]