人机交互基础教程第5章界面设计.ppt

人机交互基础教程第5章界面设计.ppt

《人机交互基础教程第5章界面设计.ppt》由会员分享，可在线阅读，更多相关《人机交互基础教程第5章界面设计.ppt（120页珍藏版）》请在冰豆网上搜索。

人机交互基础教程第5章界面设计主要内容界面设计原则理解用户以用户为中心的设计流程站在用户的立场任务分析以用户为中心的界面设计5.1界面设计原则人机交互界面设计所要解决的问题是如何设计人机交互系统，以便有效地帮助用户完成任务。

以用户为中心的设计中，用户是首先被考虑的因素。

一个成功的交互系统必须能够满足用户的需要。

5.1界面设计原则设计开发人员和管理人员更多关注用户应该如何执行任务，而不是用户以何种偏好执行任务用户的偏好是由用户的经验、能力和使用环境决定的对软件的使用习惯和倾向。

了解用户偏好对界面设计的过程相当重要。

5.1界面设计原则根据表现形式，用户界面可以分为：

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

命令行交互界面操作系统MS-DOS是文本命令行交互界面。

例如，需要将所有扩展名为“.AAA”的文件替换为扩展名为“.BBB”，如果在“我的电脑”或“WINDOWS资源管理器”中，需要一个一个地去查找、改名，操作的局限性是显而易见的。

利用命令rename,使用通配符“*”或“？

”，就可以方便地更改一组文件名或扩展名。

命令行交互界面不同的操作系统要用不同的命令进入命令行界面。

在Win9x/Me的开始菜单中的运行程序中键入”command”命令，可进入命令行界面。

在Win2000/NT的开始菜单中的运行程序中键入“cmd”命令，可进入命令行界面。

文本菜单在菜单方式下用户必须在有限的一组选项中进行识别和选择，更多的是响应而不是发出命令。

用户不必记忆功能命令，缩短了用户的培训时间，减少用户的击键次数，错误处理能力也有了显著提高。

在这种界面中，人还是被看成操作员，机器做出被动的反应，人只能使用手这一交互通道用键盘输入选择信息，通过视觉通道获取信息，界面输出只能为静态的文本字符。

命令行界面概念模型中国最早的网游出现在1992-1996年，以侠客行为代表的文字网络游戏（Mud，多角色世界MutipleUserDimension）游戏开始盛行。

图形界面可看作是第二代人机界面，是基于图形方式的人机界面。

由于引入了图标、按钮和滚动条技术，大大减少了键盘输入，提高了交互效率。

基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及。

图形用户界面又称为WIMP界面，由窗口（windows）、图标（icons）、菜单（menu）、指点设备（pointingdevice）四位一体，形成桌面（desktop）。

图形用户界面是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。

图形用户界面的发展历史。

19731973年4月，XeroxPARC（施乐公司帕洛阿尔托研究中心）研发出了第一台使用Alto操作系统的个人电脑，Alto首次将所有的元素都集中到现代图形用户界面中，它相当小，但却有着强大的处理图像信息和分享信息的能力，拥有“所见即所得”的文档编辑器，内置了大量的字体和文字格式。

另外，XeroxPARC还开发了一种名为Smalltalk的程序语言和环境，它拥有自己的GUI环境（包括了弹出菜单、视窗、图标）。

19811981年6月，Xerox推出了Star，Star于1977年开始研发，它延续了Alto的概念，在硬件上做了一些升级，384KB内存（可扩展到1.5M），1024*768的黑白分辨率，两个按键的鼠标（原来是3个按键），最重要的是拥有桌面软件，支持多语言，能够连接文件服务器、邮件服务器和打印服务器。

可惜的是，XeroxStar是一个完全封闭的系统，不允许人们应用系统之外的其它程序语言和开发环境，这也意味着它不支持第三方软件。

Amiga公司开发的Amiga操作系统一经发布就引领时代，它包括了高色彩图形、立体声、多任务运行等特点，这使得它是一款极好的适合多媒体应用和游戏的机器。

19951995年8月24日，微软发布了Windows95，对图形用户界面进行了重新设计，首次在每一个窗口上都添加了小小的关闭按钮。

设计团队为图标和图形设计了各种状态（启用，禁用，选定，停止等），著名的“开始”按钮也首次出现。

这对于微软操作系统本身和统一的图形用户界面而言，都是一个巨大的进步。

20002000年1月5日，苹果公司宣布他们设计出了全新的Aqua界面，并将用于公司新推出的MacOSX操作系统中。

在此界面中，默认的32x32和48x48的图标被更大的128x128平滑的半透明图标取代。

Dock上放置了常用的程序图标，鼠标经过时会显示程序名称。

当窗口最小化后，在Dock上显示的不是程序图标，而是程序窗口的缩略图。

Aqua界面最大的变化是涉及到了渐变、背景样式、动画和透明度的应用，有着更好的用户体验。

20012001年10月25日，微软也不甘示弱，发布了拥有全新用户界面的WindowsXP，该界面支持更换皮肤，用户可以改变整个界面的外观和感觉，默认图标为48x48，支持数百万种颜色。

20072007年1月30日，经过了漫长的等待，微软终于揭开了WindowsVista的神秘面纱。

这款操作系统是微软为了应对其竞争对手而发布的，包含了很多3D效果和动画。

自Windows98以来，微软一直试图改善其桌面，在WindowsVista中，微软用了桌面小工具取代了活动桌面。

微软于2012年发布Windows8的变化几乎是颠覆性的。

系统界面上，Windows8采用全新的ModernUI界面，各种程序以动态方块的样式呈现；操作上，大幅改变以往的操作逻辑，提供更佳的屏幕触控支持，同时启动速度更快、占用内存更少。

Windows10是微软独立发布的最后一个Windows版本，下一代Windows将作为更新形式出现。

Windows10发布了7个发行版本，分别面向不同用户和设备。

2015年7月29日起，Windows10推送全面开启，Windows7、Windows8.1用户可以免费升级到Windows10。

WIMP界面概念模型2图形用户界面在WIMP界面中，人被称为用户，人机通过对话进行工作。

用户只能使用手这一种交互通道输入信息，通过视觉通道获取信息。

在WIMP界面中，界面的输出可以为静态或动态的二维图形或图像等信息。

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

5.1.1图形用户界面的主要思想1桌面隐喻桌面隐喻（desktopmetaphor）2所见即所得（所见即所得（WhatYouSeeIsWhatYouGet，WYSIWYG）3直接操纵直接操纵（directmanipulation）1.桌面隐喻桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。

从认知心理学上讲，在日常生活中,人们往往参照对熟知的、有形体的、具体的事物的感知经验来认知、思维、经历和理解那些无形的、难以定义的抽象概念,并根据不同的熟知概念之间的结构关系,以隐喻性的思维方式完成对目标域抽象概念结构关系的构建和理解。

图例可以代表对象、动作、属性等概念尽管文本表示某些抽象概念有时比用图例表示要好,但好的图例比文本更易于辨识；与文本相比，图例占据较少的屏幕空间1.桌面隐喻-图例表示的优点优点：

图例还可以独立于语言-因其具有一定的文化和语言独立性，可以提高目标搜索的效率隐喻的表现方法静态图标流行的图形用户操作系统大多采用，如画有磁盘的图标表示存盘操作；打印机表示打印。

直观易懂，单击图标即可动画隐喻分类直接隐喻：

隐喻本身就带有操纵的对象。

如Word绘图工具中的图标，代表图形绘制操作工具隐喻：

磁盘图标（隐喻存盘操作），打印机图标（隐喻打印操作）简单形象直观，最普遍过程隐喻：

通过描述操作的过程来暗示该操作，如Word中撤销和恢复图标1.桌面隐喻图形用户界面设计中，隐喻一直非常流行，如文件夹及垃圾箱。

晦涩的隐喻不仅不能增加可用性，反而会弄巧成拙。

隐喻的缺点：

占用屏幕空间，难以表达和支持比较抽象的信息2.所见即所得在WYSIWYG交互界面中，其所显示的用户交互行为与应用程序最终产生的结果是一致的。

大多数图形编辑软件和文本编辑器都具有该界面弊端：

屏幕空间或颜色的配置方案与硬件设备所提供的配置不一样，两者之间很难产生正确的匹配，如打印机的颜色域小于显示器的颜色域，打印质量往往较低3.直接操纵直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。

直接操纵的对象是命令、数据或是对数据的某种操作图形用户界面和人机交互过程极大地依赖于视觉和手动控制的参与，因此具有强烈的直接操纵特点直接操纵的特性1.直接操纵的对象是动作或数据的形象隐喻形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象或感知其内容。

2.用指点和选择代替键盘输入用指点和选择代替键盘输入有两个优点，一是操作简便，速度快捷；二是不用记忆复杂的命令，对于非专业用户尤为重要。

3.操作结果立即可见操作结果立即可见，用户可以及时修正操作，逐步往正确的方向前进。

4.支持逆向操作用户在使用系统的过程中，不可避免地会出现一些操作错误，通过逆向操作，用户可以很方便地恢复到出现错误之前的状态。

直接操纵的特性5.借助物理的、空间的或形象的表示，而不是单纯的文字或数字的表示。

有利于解决问题和进行学习6.不用过多为计算机语义和句法分心7.尊重用户的使用经验，易于理解和使用8.不具备命令语言界面的某些优点.例如从用户界面设计者角度看，设计图形比较繁琐，需进行大量的测试和实验.9.表示复杂语义、抽象语义比较困难。

间接操纵间接操纵在实践中，直接操纵并非对于屏幕上所有对象和操作都是切实可行的，因为：

某些操作在图形化系统中可能很难概念化。

系统的图形能力可能有局限性。

窗口中用于放置操纵控件的空间也许存在限制。

让人们学习并记住所有需要的操作也许很困难。

当出现这些情况时，我们就会使用间接操纵。

在间接操纵中，文本如下拉式或弹出式菜单取代了符号，并用键盘键入代替了定位指向。

大多数的窗口系统都综合了直接和间接操纵。

菜单可以通过指向菜单图标并进行选择（直接操纵）来访问。

而菜单本身，是一些操作的名称列表（间接操纵）。

当列表上的某个操作通过指向或者键盘选择之后，系统便开始执行相应的命令。

哪种交互方式最好？

直接操纵，间接操纵，还是两者结合？

5.1.2设计图形用户界面的原则1.一般性原则

（1）界面要具有一致性q在同一用户界面中，所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。

（2）常用操作要有快捷方式q为常用操作设计快捷方式，不仅会提高用户的工作效率，还使界面在功能实现上简洁而高效。

（3）提供必要的错误处理功能q在出现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理功能（4）对操作人员的重要操作要有信息反馈q提供信息反馈。

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

5.1.2设计图形用户界面的原则（5）操作可逆q对大多数动作应允许恢复（UNDO），对用户出错采取比较宽容的态度（6）设计良好的联机帮助q人机界面应该提供上下文敏感的求助系统，让用户及时获得帮助，尽量用简短的动词和动词短语提示命令。

（7）合理划分并高效地使用显示屏q只显示与上下文有关的信息，允许用户对可视环境进行维护，如放大、缩小窗口；用窗口分隔不同种类的信息，只显示有意义的信息5.1.2设计图形用户界面的原则2.颜色的使用颜色是一种有效的强化手段，同时具有美学价值。

使用颜色时应注意如下几点：

q

（1）限制同时显示的颜色数.q

（2）画面中活动对象的颜色应鲜明，而非活动对象应暗淡。

q（3）尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用。

3.图标的设计图标是可视地表示实体信息的简洁、抽象的符号。

图标