人机交互课件第5章.界面设计.ppt

人机交互课件第5章.界面设计.ppt

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

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

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

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

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

5.1界面设计原则1.1.命令行和文本菜单技术命令行和文本菜单技术命令行真正意义上的人机交互开始于联机终端的出现。

用户输入文本命令，系统也以静态文本的形式表示对命令的响应。

这种人机界面称为命令行界面。

命令行界面概念模型文本菜单文本菜单字符界面下的菜单方式：

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

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

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

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

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

比较成熟的商品化系统有Apple的Macintosh、IBM的PM（PresentationManager）、Microsoft的Windows和运行于Unix环境的X-Window、OpenLook和OSF/Motif等。

WIMP界面概念模型22图形用户界面图形用户界面WIMP界面可看作是第二代人机界面，是基于图形方式的人机界面。

在WIMP界面中，人被称为用户，人机通过对话进行工作。

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

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

22图形用户界面图形用户界面同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失几个工作之间的联系，通过菜单可以执行控制型和对话型任务。

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

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

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

图形具有一定的文化和语言独立性，可以提高搜索目标的效率。

图形用户界面中的图例可以代表对象、动作、属性或其他概念。

隐喻的表现方法:

静态图标动画视频隐喻的分类：

直接隐喻：

隐喻本身就带有操纵的对象q如Word绘图工具中的图标，每种图标分别代表不同的图形绘制操作。

工具隐喻：

代表所使用的工具q如用磁盘图标隐喻存盘操作、用打印机图标隐喻打印操作等，这种隐喻设计简单、形象直观，应用也最为普遍。

过程隐喻：

其通过描述操作的过程来暗示该操作q如Word中的撤销和恢复图标。

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

隐喻的主要缺点：

需要占用屏幕空间难以表达和支持比较抽象的信息。

2.所见即所得（所见即所得（WYSIWYGWYSIWYG）在WYSIWYG交互界面中显示的用户交互行为与应用程序最终产生的结果是一致的。

非WYSIWYG的编辑器，用户只能看到文本的控制代码，对于最后的输出结果缺乏直观的认识。

WYSIWYG的一些弊端：

如果屏幕的空间或颜色的配置方案与硬件设备所提供的配置不一样，在两者之间就很难产生正确的匹配。

3.直接操纵直接操纵（directanipulation）（directanipulation）直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。

直接操纵的对象是命令、数据或是对数据的某种操作。

直接操纵的特性直接操纵的特性1.直接操纵的对象是动作或数据的形象隐喻形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象或感知其内容。

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

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

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

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

6.不具备命令语言界面的某些优点.例如从用户界面设计者角度看，设计图形比较繁琐，需进行大量的测试和实验.7.表示复杂语义、抽象语义比较困难。

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

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

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

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

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

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

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

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

q

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

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

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

q（4）若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。

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

图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。

设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标5.1.25.1.2设计图形用户界面的原则设计图形用户界面的原则设计图标时须遵守的原则和方法：

（1）图标的图形应该和目标的外形相似。

尽量避免过于抽象。

（2）可在图标中附加上简要的文本标注，使用户明确图标的含义。

（3）设计图标应尽可能简单，符合常规的表达习惯，保持图标含义的前后连贯。

5.1.25.1.2设计图形用户界面的原则设计图形用户界面的原则4.按钮的设计按钮的设计设计按钮应该具有交互性，应该有3到6种状态效果：

q点击时的状态q鼠标放在上面但未点击的状态q点击前鼠标未放在上面时的状态q点击后鼠标未放在上面时的状态q不能点击时的状态q独立自动变化的状态按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。

属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。

5.1.25.1.2设计图形用户界面的原则设计图形用户界面的原则5.屏幕布局的设计屏幕布局的设计设计屏幕布局（Layout）时应该使各功能区重点突出,应遵循如下几条原则：

q

（1）平衡原则v注意屏幕上下左右平衡。

q

（2）预期原则v对屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的操作结果可以预期。

q（3）经济原则v在提供足够信息量的同时要注意简明、清晰。

q（4）顺序原则v对象显示的顺序应按需要排列。

q（5）规则化v画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。

5.1.25.1.2设计图形用户界面的原则设计图形用户界面的原则6.菜单界面的设计菜单界面的设计菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。

菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：

命令项、菜单项和窗口项。

菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。

5.1.25.1.2设计图形用户界面的原则设计图形用户界面的原则菜单的结构单一菜单q单一菜单是在几个选项中做出选择，可以有两个或多个选项，用户可以选中其中一个或确定多个选择。

线状序列菜单q把一组相关联的菜单组合在一起，用户清楚地知道如何向前选择和目前在菜单中所处的位置，并且可以重返以前所作的选择。

树状结构菜单q树状菜单是把选项划分为若干类，类似的选项组成一组，最后形成一个树状结构。

网状结构菜单q网状结构菜单允许用户在父辈菜单与子菜单之间切换，而不必重新回到父辈菜单然后再转到子菜单。

设计菜单界面时应注意的一般性原则：

按照系统的功能组织菜单，合理分类，并力求简短，前后一致合理组织菜单界面的结构与层次。

按一定的规则对菜单项进行排序。

菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始。

常用选项要设置快捷键。

充分利用菜单选项的使能与禁止、可见与隐藏属性。

使用弹出式菜单。

5.1.25.1.2设计图形用户界面的原则设计图形用户界面的原则7.填表输入界面的设计填表输入界面的设计在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。

填表输入界面有以下的特点：

q有明确的提示，使用户可以不需要学习、训练，也不必记忆有关的语义、语法规则。

q填表输入界面充分地利用了屏幕空间。

q在填表输入方式中，可以充分利用上下文信息，帮助用户完成输入。

5.1.25.1.2设计图形用户界面的原则设计图形用户界面的原则在设计填表输入界面时应遵循的原则一致性q保证前后用词、语法一致。

有含义的表格标题q采用有含义的表格标题，栏目标题要为用户所熟悉。

使用易于理解的指导性说明文字q采用易于理解的说明性文字，并力求简短。

如果确实需要较多的信息，应为初学者提供一组求助信息。

栏目按逻辑分组排序q表格布局要直观，栏目按操作逻辑分组排序。

5.1.25.1.2设计图形用户界面的原则设计图形用户界面的原则表格的组织结构和用户任务相一致q把相关的输入字段组织安排在一起，并按照使用频率、重要性、功能关系或使用顺序来进行表格的排序和分组。

光标移动方便q需要一种简单直观的机制来移动光标，如使用Tab键或箭头键。

出错提示q系统应提示输入数据的允许范围和输入方法，对不可接受的值给出出错信息。

提供帮助q界面应该在响应处提供帮助信息，以解决新用户在不熟悉的情况下的输入。

表格显示应美观、清楚，避免过分拥挤。

用户的含义简单的说，用户是使用某种产品的人，其包含两层含义：

1）用户是人类的一部分；2）用户是产品的使用者。

产品的设计只有以用户为中心，才能得到更多用户