16 人机对话设计

北京邮电大学物流工程中心
苏志远
17
出色的图形界面设计
• 成功的用户界面（GUI）
–最重要的，出色的图形用户界面（GUI）应该是非
常带有直觉特征的。实现这些的一个方式是尽可能
的采用现实世界中的抽象（暗示、隐喻）。
–出色的用户图形界面的另一个重要特征是速度， 更专业一点说，是响应速度。
北京邮电大学物流工程中心
北京邮电大学物流工程中心 苏志远
24
出色的图形界面设计
• 提供声音反馈
–声音反馈是有用的，尤其是在你需要警告用户一 个严重问题产生的地方，例如进一步的操作将导致
数据的丢失或程序出错。允许用户取消声音反馈，
除非错误不得不通知。 如：条码扫描器程序
北京邮电大学物流工程中心
苏志远
25
出色的图形界面设计
北京邮电大学物流工程中心
苏志远
19
出色的图形界面设计
• 对人的理解
– 程序必须反映用户的视角和行为。要充分理解用 户开发者首先要理解人，因为我们都具有共同的 特征。人类通过辨别比通过记忆学习起来更容易。 要经常试着提供一个数据列表给用户，而非让用 户凭记忆自己输入数据。普通人能记住2000到
3000单词，但却可以认出50000单词
北京邮电大学物流工程中心 苏志远
4
2. 人机对话的方法
⑴
⑵ ⑶ ⑷
菜单式
填表法 回答法 提问法
苏志远
5
北京邮电大学物流工程中心
⑴ 菜单式
系统在屏幕上显示各种可供选
择的内容，用户根据提示用键盘
或鼠标做出简单选择性回答。 一般在功能调度模块或程序中
作简单的功能项目选择。
北京邮电大学物流工程中心 苏志远
北京邮电大学物流工程中心
苏志远
22
出色的图形界面设计
• 同常见软件保持一致性的设计
–出色的用户界面在程序中将实现同用户以前用过 的其它成功软件一致的动作。写商用程序软件的时 候应该尽可能的给用户提供这种一致性。
北京邮电大学物流工程中心
苏志远
23
出色的图形界面设计
• 提供可视反馈
–如果你曾有过傻傻的瞪着自己电脑上显示的沙漏 等着一个操作结束的时候，就会明白没有可视化的 反馈信息有多糟糕。 –你的用户非常希望知道一个操作会花费多长的时 间以便准备好足够的耐心。 –作为最一般的规则，当一个操作超过7～10秒的时 候，大多数用户希望看到一个带有进度条的消息对 话框。时间的长短要根据用户类型和应用程序的特 点来调整。
北京邮电大学物流工程中心
苏志远
21
出色的图形界面设计
• 清楚一致的设计
–用户中最常见的抱怨是某个术语表述的不清楚或
不一致。 如：在程序发布之后，一个屏幕上可能
写着“项目”，而下一屏却写着“产品”，而第三
屏又变成了“货物”，可是其实这三个术语是指的 同一个东西。这种一致性的缺乏导致用户非常迷惑 并产生操作失误。
6
常用的方式
◎ 下拉式
◎ 弹出式 ◎ 级联式
◎ 平铺式
北京邮电大学物流工程中心 苏志远
7
⑵ 填表法
将要输入的项目先显示在屏幕上,
用户根据项目输入相应的数据。 类似填表,屏幕上显示的表格应尽量 与操作人员手中的原始数据记录格式对
应。
北京邮电大学物流工程中心 苏志远
8
⑶ 回答法
程序运行到一定阶段,屏
北京邮电大学物流工程中心
苏志远
28
出色的图形界面设计
• 注意表达模式 (整体风格)
–把所有界面的各个方面连起来的一个重点是界面 的外观和风格。外观和风格必须一致。用户使用一 个窗体或对话框过后，在此基础上，他们希望在使 用下一个窗体或控件时用同样的感受。
北京邮电大学物流工程中心
苏志远
29
出色的图形界面设计
道的东西。这个古老的问题在软件开发的多个领域
发生，例如测试、文档编写等等。设计界面时这样
会更有害，因为用户在使用产品的时候会立刻感到 一点不熟、无所适从。这个错误是最应努力避免的。
北京邮电大学物流工程中心
苏志远
15
出色的图形界面设计
• 不由用户控制
–在业务变化越来越快的今天，用户界面的弹性将
成为适应改变的关键方法。
北京邮电大学物流工程中心
苏志远
网络设计
• 设计的内容
–将各个子系统用局域网或广域网连接起来； –设计整个系统与外部的连接。
北京邮电大学物流工程中心
苏志远
32
网络设计
• 设计步骤
–首先，根据用户的要求选择网络结构；
–安排网络和设备的分布； –选择网络设备； –设计网络布线和配件； –划定网络节点的级别、管理方式、数据读写权限 并选定相应软件系统；
等)
⑹ 市场和国内情况 ⑺ 经济、技术条件等方面的限制
北京邮电大学物流工程中心 苏志远
36
• 有模式和无模式对话框
–当我们需要用户的输入时，我们常常就需要用有 模式对话框 ，因为很多人同一时间只在一个窗口 内工作。
–对不确定完成时限的任务无模式对话框是一种更 好的选择，但有个提示：在同一时刻，要使用户的 无模式对话框保持在3个以内。
北京邮电大学物流工程中心
苏志远
30
出色的图形界面设计
控件使用说明 图四 控件 Menu Bar Pull-Down Menu Cascading Menu Pop-up Menu Push-button Check Box Radio Button List Box Drop-down Box 范围内应用的数量 最多十个子项 最多十二个子项 最多五个子项, 一层级联 最多十个子项 每个对话框中最多六个 每组最多 10～12 个 每组最多六个 表中最多 50 行, 显示 8～10 行 控件类型 Static action Static action Static action Static action Static action Static set/select value Static set/select value Dynamic set/select value
北京邮电大学物流工程中心
苏志远
20
出色的图形界面设计
• 留意不同的视角
– 很多设计者在设计图标或程序整个行为的时候会 不自觉的陷入视角陷阱。最近我看到一个图标， 它用于在一个会计系统中指明汇总。为了标示这 个功能，设计者花了很多心思在画一个把桂圆组 合到一起的图标。不幸的是，这个系统的用户对 这个图标的喻意更本就没有一点概念，虽然它从 设计者的视角来看是非常直观的。 – 注意标准图标的使用
北京邮电大学物流工程中心 苏志远
27
出色的图形界面设计
• 提供键盘支持
–键盘是用户桌面上常见的固定设备，为用户输入 文本和数据提供了一个有效手段。在介绍图形用户 界面程序时，我们常常假定用户把鼠标作为主要的 交互设备。而用鼠标操作程序对于录入员或常用用 户来讲是非常费时和低效的。 –加速建可以给用户提供一种非常有效的操作方式 来访问窗口中的指定菜单项和控件。加速建应该易 于使用并限制在一到两个键（如F3或者Ctrl-P）。
苏志远
18
成功的图形用户界面要素
1. 2. 3. 4. 5. 6. 对人的理解 留意不同的视角 清楚一致的设计 同常见软件保持一致 性的设计 提供可视反馈 提供声音反馈 7. 8. 9. 10. 保持文字内容清楚 提供操作路径跟踪 提供键盘支持 注意表达模式（风格统 一） 11. 有模式和无模式对话框 12. 控件约定
清楚,提出配置方案是“物理”的而不是“逻辑”
的。
(型号、数量、安装地点等)
北京邮电大学物流工程中心
苏志远
35
2.选择的依据
⑴ 功能要求(处理方式、联网、汉字要求)
⑵ 容量要求(内存、外存的容量)
⑶ 性能要求(用户提出的时间性、精确度，确定运行速度、字长及有关
指标)
⑷ 外部设备配置要求
⑸ 通信和网络要求(终端数目、地理分布、通信量、通信速度、通信线路
List 控件中一次显示一个选项，下拉框中不 Dynamic set/select single value 超过 20 项
Combination List 控件中按标准格式一次显示一个选项， Dynamic set/select single value; Box add value to list 下拉框中不超过 20 项 Spin Button Slider 最多十个子项 依赖于显示的数据 Static set/select value Static set/select value in range
北京邮电大学物流工程中心
苏志远
33
计算机系统的选择
1. 方法
2. 选择的依据
北京邮电大学物流工程中心
苏志远
34
1.方法
在总体规划阶段,根据对企业的初步调查分析, 提出计算机系统的初步配置方案(主要是逻辑配置, 强调系统对计算机的功能要求,不涉及具体的型号), 但经过系统分析和设计之后,对计算机的要求已经
…。
http://wenku.baidu.com/view/7d27e17ca26925c52cc5bf9c.html
北京邮电大学物流工程中心
苏志远
13
不成功的图形用户界面
• 忽略了用户
•
•
不由用户控制
顶层有太多的功能特性
北京邮电大学物流工程中心
苏志远
14
出色的图形界面设计
• 忽略了用户
–开发者常常只设计他们自己知道的，而非用户知
• 保持文字内容清楚
–开发者常常通过增加大量词汇来尽力使文字反馈 内容清楚。但事与愿违，他们最后使消息更不清楚 了。
–简化文本标签、用户错误信息和一行的帮助信息 上的词汇是一项挑战。
–文字反馈的任务可以交给科普作家，通常他们可 以高效的处理。
北京邮电大学物流工程中心
苏志远
26
出色的图形界面设计
• 提供操作路径跟踪
–允许用户用各种方式甚至是你自己都想不到的方
式使用程序，有点令人心里不安，但这会让你作为 开发者很有成就感，同时赋予用户更大的权利。
北京邮电大学物流工程中心
苏志远
16
出色的图形界面设计
• 顶层有太多的功能特性
–应该只选择常用和易用的功能，避免把所有的东 西都放到第一屏或者在工具条上放不常用的按钮。 多做一点分析，看看那些功能可以放到隐藏的面板 而非前面板。
北京邮电大学物流工程中心
苏志远
11
⑴ 图形界面的优点
①容易学习使用; ②具有高度的图形功能直观生动;
③多个视窗并用,同时显示多样信息,并
可对同样的信息提百度文库多种不同角度的 表达方式。
北京邮电大学物流工程中心 苏志远
12
⑵ 设计原则
1. 2. 易用性； 整体性；
3.
4. 5. 6.
合理性；
美观与协调性； 独特性； 安全性；
–如果你的用户曾经说过象这样的话：“我也不知道怎么就 到这个窗口了，可是我在这里了，我也不知道怎么才能退 回去。”那么就是你没有提供一个可跟踪的路径，或者说， 在这种情况下，是一个可重复的操作路径。提供一个可重 复的操作路径说着容易做来难。应该从设计简洁的启动你 指定的功能的菜单结构开始着手。 –你也要指明你菜单结构的展开位置，避免超过两级的级联 菜单。为每个对话框提供描述性的标题可以非常有用的提 醒用户是哪个菜单项或按钮被按下后把他们带到当前窗口 的。
1. 人机对话设计的原则 2. 人机对话的方法
3. 图形用户界面设计
北京邮电大学物流工程中心 苏志远
3
1. 人机对话设计的原则 安全 舒适 高效 正确
⑴ 对话要清楚、简单，用词要符合用 户观点和习惯； ⑵ 对话要适应不同操作水平的用户， 便于维护和修改； ⑶ 错误信息设计要有建设性； ⑷ 关键操作要有强调和警告。
• 物流信息系统 • 第十三讲
Logistics Information System
人机对话设计
北京邮电大学物流工程中心
苏志远
知识回顾
• 代码设计的原则有哪些？
• 输入、输出设计的内容和形式有哪些
北京邮电大学物流工程中心
苏志远
人机对话设计
人与计算机进行信息交流。输入、输出都是人机
对话。通过屏幕、键盘等设备与计算机进行信息交换， 控制系统的运行。
幕上显示问题,等待用户回答。 回答方式也应在屏幕上提示,
让用户简单地回答。
北京邮电大学物流工程中心 苏志远
9
⑷ 提问法
这种方式主要用于用户查询。
例： 要查询某学生的基本情况，屏 幕上提示：“输入学号”，用户回
答，之后屏幕上显示有关内容。
北京邮电大学物流工程中心 苏志远
10
3.图形用户界面设计
⑴ 图形界面的优点 ⑵ 设计原则