《软件人机界面设计教学课件作者陈启安软件人机界面设计第六章直接操纵和图形用户界面》由会员分享，可在线阅读，更多相关《软件人机界面设计教学课件作者陈启安软件人机界面设计第六章直接操纵和图形用户界面（39页珍藏版）》请在金锄头文库上搜索。
1、软件人机界面设计 第二版 陈启安,该幻灯片由作者提供 修订日期: 2008年3月19日,(c) 高教出版社出版, 2007-2008. 版权所有. 可以修改或复制本幻灯片为非商业用途，但作者名及本版权标识不可更改。,第六章 直接操纵和图形用户界面,第二篇 人机界面设计开发方法,学习目标,掌握直接操纵界面设计方法。 直接操纵界面设计的困难和解决方法？ 如何进行窗口设计？ 掌握图形用户界面设计方法。,第六章 直接操纵和图形用户界面,6.1 直接操纵的定义及其设计指南 6.2 直接操纵系统举例 6.3 窗口的设计 6.4 Windows图形用户界面的设计 6.5 图形用户界面案例分析,直接操纵的定义
2、及其设计指南,两个案例比较,直接操纵的定义及其设计指南,两个案例比较,直接操纵的定义及其设计指南,在功能和可靠性相同的软件系统中，有一些系统开始在竞争中占据优势。通常最吸引人的系统具有一个令人愉快的用户界面，这种界面对任务的目标和动作提供逼真的表示。这些系统易学易用，而且不易忘记。和勉强能接受或根本就是抵触的交互系统明显不同，某些对话式系统在用户中激发了巨大的热情。,直接操纵的定义、益处和问题,定义： 动作领域中的形象隐喻 显示目标和操作； 开发了类比推理； 快速、渐进以及逆向操作； 用指点和选择代替击键输入； 操作结果立即可见。 益处： 控制和显示兼容性； 语法较少，从而减少了差错率； 可防
3、止更多的差错； 易学、记忆持久； 鼓励进一步探索。 问题： 增加的系统资源； 动作繁琐， 宏方法薄弱； 命令的记载和追踪困难； 有视力障碍的用户使用困难。,直接操纵界面的一些指南,1使用易于理解的图标：图标的意义应该尽可能明确。 2避免令人迷惑的类比：图标应以预期的方式工作。 3不违反大众习惯：不同的用户群体可能对一个图标如何工作有不同的设想。 4为特有目的使用图标：图标不见得比键盘输入更快或更容易使用。 5仔细设计图标的交互：界面中单个图标的使用方式，不比与图标交互的整体设计重要。,直接操纵系统举例,显示编辑程序及文字处理器 在八十年代初期，整页显示编辑程序的用户曾大力提倡他们的系统，和当时
4、流行的行编辑程序相比，他们更喜欢前者。在过去的二十年中，所见即所得(WYSIWYG)文字处理程序已成为标准。,显示编辑的优点,1显示整页的文本：显示文本的20行至60行，让阅读者对每一个句子的上下文都有一个更清楚的了解。 2以最终打印时的格式显示文件：省去了各种各样的命令，也简化了文件的阅读和扫描。 3向用户显示可见的光标动作：看到屏幕上的箭头、下划线或闪烁框，操作者就可以很清楚应该注意并进行操作的部位。 4通过具体直观的工具控制光标的移动：箭头键或光标移动设备，诸如鼠标器、控制杆或图示板，为光标的移动提供了自然具体的物理机制。 5动作采用带标记的键钮：许多采用显示编辑的工作站具有标记上操作名
5、称的按键. 6立即显示一个动作的效果：当按下某键来移动光标或将文本移至居中时，其效果立即在屏幕上显示出来。 7提供快速的响应和显示：大多数显示编辑程序能高速运行，显示一整页文本不到一秒钟。 8提供易行的逆向动作：在用户输入文本时，只要后移光标并在原位重新键入就可以修改不正确的输入。,文字处理器的新方向,1集成。 2桌面排版软件。 3幻灯片软件。 4超级媒体环境。 5改进的宏能力。 6拼写检查程序。 7语法检查程序。 8文件汇编程序。 9程序结构树化显示。,VISICALC及其派生产品,第一个电子报表VISICALC是哈佛商学院的学生Bob Frankston的作品。每当他要作研究生商业课程中重
6、复的计算时，就感到沮丧。他和他的朋友Dan Bricklin，建立了一个“即时计算电子工作表(instantly calculating electronic worksheet)”。它可以在254行和63列的范围上进行计算并显示结果。 VISICALC的竞争产品很快就出现了，它们对用户界面作了引人注目的改进并扩展了所支持的任务，如LOTUS1-2-3、MS Excel。它们提供图表、三维显示、多窗口以及数据库性能的集成，使用命令菜单可方便地进行操作。,MS Excel,空间数据管理,在地理应用中，若以一种与现实模型类似的地图的形式描述空间，看起来会更自然些。 空间的数据管理系统的成功与否取决
7、于设计者在选取使用户感到自然、容易理解的图标、图表及数据布局的技巧。用控制杆移入、移出或在数据上移动的快感，甚至吸引了那些要求很快得到更多的功能和数据的急性子用户。,电视游戏,对很多人来说，游戏软件是最令人兴奋的、设计精良的并在商业上最成功的应用软件。,计算机辅助设计和制造,许多CAD系统采用直接操纵对话的方式，Auto CAD能支持三维设计,家庭自动化,在国际上，有许多公司已经了解到下一个大市场将是包含更多家用控制功能的器具。某些未来主义者和市场专家倡导语音控制和住宅机器人，但现实则更倾向于按钮、遥控器、电话键盘，特别是触摸屏幕，在这些应用中，提供具有丰富反馈的直接操纵控制是至关重要的。即使
8、是每年只用上一两次(如春、秋两季的夏时制调整)，这些操作必须是迅速而且容易记忆的。 通过直接操纵从触摸屏幕控制复杂的住宅设备，使我们以新的方式来思考住宅及其居住者。还要考虑一些新的问题。在设计这些系统时，虽然最初的设备是为健全者和富裕人士设计的，但我们也要考虑残疾人和老年人用户的利益，因为这些人可能是这一技术的最多的受益者。,窗口的设计,目前的软件大多使用窗口技术。许多计算机用户的普遍问题是要求快速地查询多种资源而同时最低限度的分散在任务上的注意力。一种折衷的办法是，利用9至27英寸显示器(大约640480至20482048象素)，向用户提供足够的信息，灵活的完成任务，同时减少窗口管理操作、注
9、意力分散以及头眼的移动，这种方法的实现是对设计者的挑战。,窗口内容及其动作,常见的窗口部件包括： 1标题 2窗框 3滚动条,窗口内容及其动作,窗口动作： 1打开动作 2打开的位置及大小 3关闭动作 4重定窗口大小的动作 5移动动作 6提前或激活,多窗口设计,一般来说，对多信息源的访问可以有下面的一些解决办法： 1多监视器 2快速翻转显示 3分割显示 4数目、大小和位置固定的“贴砖”式显示 5大小、位置和数目可变的“贴砖”式显示 6贴砖堆叠 7随意重叠 8阶梯状级联,任务联动的多窗口,常用的任务联动方式： 1同步卷动 2分层浏览 3直接选择 4二维浏览 5相关联窗口的打开 6相关联窗口的关闭 7
10、保存或打开窗口状态,任务联动的多窗口,在设计多窗口系统时，应注意以下几点： 1在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其它窗口来显示该窗口。 2在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS系统资源。 3关闭所有窗体。系统退出后要释放所占的所有系统资源，除非是需要后台运行的系统。 4尽量防止对系统的独占使用。,Windows图形用户界面的设计,一个优秀的用户界面是一个直观的、对用户透明的界面，用户在首次接触了这个软件后就觉得一目了然，不需要多少培训就可以方便地上手使用。对于Windows的开发人员，微软公司出版的窗口界面：应用设计
11、指南（The Windows Interface: An Application Design Guide(1992)是在微机平台上界面设计的公认标准。,Windows图形用户界面的特点,Windows图形用户界面的主要特点有： 1广泛使用窗口、图标、菜单、按钮、对话框等基本界面部件来表示应用目标。 2使用图形部件形象地表示感兴趣的目标，使系统完成的操作或命令能用逼真的模拟、比喻来表示，而且所有感兴趣的目标在GUI界面上被连续显示出来。 3有高度的交互性。 4支持鼠标类定位设备完成光标的移动和目标的选取。,Windows图形用户界面的特点,5提供了快速的、增量式的、可逆转的操纵，并且所有操纵过
12、程及效果是可观察到的。 6以一致方式完成对所有目标的显示和操纵。 7提供系统预验证功能，使得只有有效的交互才能发生效果。 8提供了对用户出错的保护机制和强有力的帮助机制。,图形用户界面设计的艺术原,将美的原则应用于界面设计可以加强界面的气氛、增加吸引力、突出重心、提高美感。在图形用户界面的设计过程中，需要遵循的艺术原则主要有：对比原则、协调原则、平衡原则和趣味原则。,对比原则,1大小的对比 2明暗的对比 3粗细的对比 4曲线与直线的对比 5水平线与垂直线 6质感的对比 7位置的对比 8多重对比,协调原则,1主与从 2动与静 3入与出 4统一与协调,平衡原则,界面是否平衡是非常重要的。 平衡并不
13、是对称。 中心也是平衡的一个方面。,趣味原则,1比例 2强调 3凝聚与扩散 4形态的意向 5变化率 6规律感 7导向 8空白区 9屏幕上的文字,在图形用户界面中使用图标,鉴于图标表示实体具有直观、形象、逼真等特点，所以在日常生活及工程技术中早就被广泛使用。图标除了作为表示实体的符号外，还可以作为可视按钮或菜单选择项，当被选中激活时，可以完成指定的功能。,图标的基本概念和工作原理,图标（icon）是一种“形象语言” 图标常用于绘图程序以表示工具或动作 对于抽象对象类，较难于采用和目标直接相似的符号来表示其实体与概念，这时可用隐喻的方法来抽象地表示。,图标设计的一般性原则,1以熟悉和能辨认的方式表
14、示对象或动作。 2不同的目标必须使用不同的图标表示，以避免引起混淆。 3设计图标应尽可能简单（三维的图标虽然醒目但也能使人分心），尽量符合常规的表达习惯，不同的图标之间应该有一定程度的区别。 4适当设置图标的尺寸 5鉴于用户的学习和记忆能力所限，为了避免引起混淆，一个系统的图标类型不宜过多（一般不超过20种）。 6使图标突出于背景，确保某一个被选择的图标能在别的未选择的图标中清晰可见。 7设计活动的画面 8增加详细的信息 9探索图标的组合应用，以创建新的对象或动作。,图标的编辑工具,图标编辑工具Icon Edit Pro 5.01的界面,在图形用户界面中使用图形,在软件的界面设计中，图形运用的
15、合适与否，关系着应用系统整体效果的好坏。图形在多媒体软件界面中的应用范围很广，如应用系统的背景图、烘托效果的装饰图、命令按钮的形状图形等。,图形用户界面案例分析,一致性问题 隐喻使用不当,习题六,6.1 说明直接操纵技术的目标及其本质。 6.2 除了本章介绍的窗口内容及动作外，你认为窗口还有哪些内容和动作？ 6.3 什么情况下需要使用任务联动的窗口？ 6.4 如何理解图标设计的四个层次，并说明之。 6.5 图6.38 是Apple 的QuickTime 4.0 Player中用来收藏用户多媒体文件的Favorites Drawer窗口。当有音、视频文件加入Favorites collection 时，程序会用一个图片来标志这个文件。声音文件用的是带有波形的图片，视频文件则用缩小后的第一个帧来代表这个文件。请分析并指出该隐喻的问题，最后提出改进的解决方案。,
