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

1、界面设计原则理解用户设计流程任务分析以用户为中心的界面设计第5章 界面设计命令行界面可以看作是第一代人机界面，其中人被看成操作员，机器只做出被动的反应，人用手操作键盘，输入数据和命令信息，通过视觉通道获取信息，界面输出只能为静态的文本字符。图形界面可看作是第二代人机界面，是基于图形方式的人机界面。由于引入了图标、按钮和滚动条技术，大大减少了键盘输入，提高了交互效率。多通道用户界面则进一步综合采用视觉、语音、手势等新的交互通道、设备和交互技术，使用户利用多个通道以自然、并行、协作的方式进行人机对话，通过整合来自多个通道的、精确的或不精确的输入来捕捉用户的交互意图，提高人机交互的自然性和高效性。5

2、.1 界面设计原则 1.1.命令行和文本菜单技术命令行和文本菜单技术 命令行 真正意义上的人机交互开始于联机终端的出现。用户输入文本命令，系统也以静态文本的形式表示对命令的响应。这种人机界面称为命令行界面。命令行界面概念模型命令行交互界面命令行交互界面操作系统MS-DOS是文本命令行交互界面。例如，需要将所有扩展名为“.AAA”的文件替换为扩展名为“.BBB”，如果在“我的电脑”或“WINDOWS资源管理器”中，需要一个一个地去查找、改名，操作的局限性是显而易见的。利用命令rename drive:path filename1 filename2或ren drive:path filename

3、1 filename2，使用通配符“*”或“？”，就可以方便地更改一组文件名或扩展名。命令行交互界面命令行交互界面不同的操作系统要用不同的命令进入命令行界面。在Win9x/Me的开始菜单中的运行程序中键入“command”命令，可进入命令行界面。在Win2000/NT的开始菜单中的运行程序中键入“cmd”命令，可进入命令行界面。批处理文件（也称为批处理程序或脚本）。批处理文件是无格式的文本文件，包含一条或多条命令，文件扩展名为 bat或cmd。文本菜单文本菜单 字符界面下的菜单方式：在菜单方式下用户必须在有限的一组选项中进行识别和选择，更多的是响应而不是发出命令。用户不必记忆功能命令，缩短了用

4、户的培训时间，减少用户的击键次数，错误处理能力也有了显著提高。在这种界面中，人还是被看成操作员，机器做出被动的反应，人只能使用手这一交互通道用键盘输入选择信息，通过视觉通道获取信息，界面输出只能为静态的文本字符。2 2 图形用户界面图形用户界面 图形用户界面又称为WIMP界面，由窗口(windows)、图标(icons)、菜单(menu)、指点设备(pointing device)四位一体，形成桌面(desktop)，如图所示。图形用户界面是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。比较成熟的商品化系统有Apple的Macintosh、IBM的PM(Presentation Ma

5、nager)、Microsoft的Windows和运行于Unix环境的X-Window、OpenLook和OSF/Motif等。WIMP界面概念模型 2 2 图形用户界面图形用户界面图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(event-driven)技术。2 2 图形用户界面图形用户界面WIMP界面可看作是第二代人机界面，是基于图形方式的人机界面。在WIMP界面中，人被称为用户，人机通过对话进行工作。用户只能使用手这一种交互通道输入信息，通过视觉通道获取信息。在WIMP界面中，界面的

6、输出可以为静态或动态的二维图形或图像等信息。2 2 图形用户界面图形用户界面同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失几个工作之间的联系，通过菜单可以执行控制型和对话型任务。由于引入了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及。5.1.1 5.1.1 图形用户界面的主要思想图形用户界面的主要思想图形用户界面的三个重要思想 1 桌面隐喻桌面隐喻(desktop metaphor)2 所见即所得（所见即所得（What You See Is What You Get，WYSIWYG）3 直接操纵直接操纵(

7、direct manipulation)1.桌面隐喻桌面隐喻(desktop metaphor)(desktop metaphor)桌面隐喻是指在用户界面中用人们熟悉的图例清楚地表示计算机可以处理的能力。图形具有一定的文化和语言独立性，可以提高搜索目标的效率。图形用户界面中的图例可以代表对象、动作、属性或其他概念。隐喻的表现方法:静态图标动画视频 隐喻的分类：直接隐喻：隐喻本身就带有操纵的对象q如Word绘图工具中的图标，每种图标分别代表不同的图形绘制操作。工具隐喻：代表所使用的工具q如用磁盘图标隐喻存盘操作、用打印机图标隐喻打印操作等，这种隐喻设计简单、形象直观，应用也最为普遍。过程隐喻：其

8、通过描述操作的过程来暗示该操作q如Word中的撤销和恢复图标。晦涩的隐喻不仅不能增加可用性，反而会弄巧成拙。隐喻的主要缺点：需要占用屏幕空间难以表达和支持比较抽象的信息。2.所见即所得（所见即所得（WYSIWYGWYSIWYG）在WYSIWYG交互界面中显示的用户交互行为与应用程序最终产生的结果是一致的。非WYSIWYG的编辑器，用户只能看到文本的控制代码，对于最后的输出结果缺乏直观的认识。WYSIWYG的一些弊端：如果屏幕的空间或颜色的配置方案与硬件设备所提供的配置不一样，在两者之间就很难产生正确的匹配。3.直接操纵直接操纵(direct anipulation)(direct anipul

9、ation)直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。直接操纵的特性直接操纵的特性 1.直接操纵的对象是动作或数据的形象隐喻形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象或感知其内容。2.用指点和选择代替键盘输入用指点和选择代替键盘输入有两个优点，一是操作简便，速度快捷；二是不用记忆复杂的命令，对于非专业用户尤为重要。3.操作结果立即可见操作结果立即可见，用户可以及时修正操作，逐步往正确的方向前进。4.支持逆向操作用户在使用系统的过程中，

10、不可避免地会出现一些操作错误，通过逆向操作，用户可以很方便地恢复到出现错误之前的状态。直接操纵的特性直接操纵的特性5.借助物理的、空间的或形象的表示，而不是单纯的文字或数字的表示。6.不具备命令语言界面的某些优点.例如从用户界面设计者角度看，设计图形比较繁琐，需进行大量的测试和实验.7.表示复杂语义、抽象语义比较困难。5.1.2 设计图形用户界面的原则设计图形用户界面的原则 1.一般性原则一般性原则(1)界面要具有一致性q在同一用户界面中，所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。(2)常用操作要有快捷方式q为常用操作设计快捷方式，不仅会提高用户的工作效率，还使界面在功能

11、实现上简洁而高效。(3)提供必要的错误处理功能 q在出现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理功能(4)对操作人员的重要操作要有信息反馈q提供信息反馈。对操作人员的重要操作要有信息反馈。5.1.2 设计图形用户界面的原则设计图形用户界面的原则1.一般性原则一般性原则 (5)操作可逆q对大多数动作应允许恢复(UNDO)，对用户出错采取比较宽容的态度(6)设计良好的联机帮助q人机界面应该提供上下文敏感的求助系统，让用户及时获得帮助，尽量用简短的动词和动词短语提示命令。(7)合理划分并高效地使用显示屏q只显示与上下文有关的信息，允许用户对可视环境进行维护，如放大、缩小窗口；用

12、窗口分隔不同种类的信息，只显示有意义的出错信息 5.1.2 设计图形用户界面的原则设计图形用户界面的原则2.颜色的使用颜色的使用 颜色是一种有效的强化手段，同时具有美学价值。使用颜色时应注意如下几点：q(1)限制同时显示的颜色数.q(2)画面中活动对象的颜色应鲜明，而非活动对象应暗淡。q(3)尽量避免不相容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用。q(4)若用颜色表示某种信息或对象属性，要使用户理解这种表示，并尽量采用通用的表示规则。3.图标的设计图标的设计 图标是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术，需要在很小的范围内表现出图标的内涵。设计图标时应该着重考虑视觉

13、冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标5.1.2 5.1.2 设计图形用户界面的原则设计图形用户界面的原则设计图标时须遵守的原则和方法：（1）图标的图形应该和目标的外形相似。尽量避免过于抽象。（2）可在图标中附加上简要的文本标注，使用户明确图标的含义。（3）设计图标应尽可能简单，符合常规的表达习惯，保持图标含义的前后连贯。5.1.2 5.1.2 设计图形用户界面的原则设计图形用户界面的原则4.按钮的设计按钮的设计设计按钮应该具有交互性，应该有3到6种状态效果：q点击时的状态q鼠标放在上面但未点击的状态q点击前鼠标未放在上面时的状态q点击后鼠标未放在上面时的状

14、态q不能点击时的状态q独立自动变化的状态按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别。5.1.2 5.1.2 设计图形用户界面的原则设计图形用户界面的原则5.屏幕布局的设计屏幕布局的设计设计屏幕布局(Layout)时应该使各功能区重点突出,应遵循如下几条原则：q(1)平衡原则v注意屏幕上下左右平衡。q(2)预期原则v对屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的操作结果可以预期。q(3)经济原则v在提供足够信息量的同时要注意简明、清晰。q(4)顺序原则v对象显示的顺序应按需要排列。q(5)规则化v画面应

15、对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。5.1.2 5.1.2 设计图形用户界面的原则设计图形用户界面的原则6.菜单界面的设计菜单界面的设计 菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：命令项、菜单项和窗口项。菜单的结构一般有单一菜单、线状序列菜单、树状结构菜单、网状结构菜单等，其中树状结构菜单是最常见的结构。5.1.2 5.1.2 设计图形用户界面的原则设计图形用户界面的原则菜单的结构单一菜单q单一菜单是在几个选项中做出选择，可以有两个或多

16、个选项，用户可以选中其中一个或确定多个选择。线状序列菜单q把一组相关联的菜单组合在一起，用户清楚地知道如何向前选择和目前在菜单中所处的位置，并且可以重返以前所作的选择。树状结构菜单q树状菜单是把选项划分为若干类，类似的选项组成一组，最后形成一个树状结构。网状结构菜单q网状结构菜单允许用户在父辈菜单与子菜单之间切换，而不必重新回到父辈菜单然后再转到子菜单。设计菜单界面时应注意的一般性原则：按照系统的功能组织菜单，合理分类，并力求简短，前后一致合理组织菜单界面的结构与层次。按一定的规则对菜单项进行排序。菜单选项的标题要力求文字简短、含义明确，并且最好以关键词开始。常用选项要设置快捷键。充分利用菜单

17、选项的使能与禁止、可见与隐藏属性。使用弹出式菜单。5.1.2 5.1.2 设计图形用户界面的原则设计图形用户界面的原则7.填表输入界面的设计填表输入界面的设计 在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据输入界面。填表输入界面有以下的特点：q有明确的提示，使用户可以不需要学习、训练，也不必记忆有关的语义、语法规则。q填表输入界面充分地利用了屏幕空间。q在填表输入方式中，可以充分利用上下文信息，帮助用户完成输入。5.1.2 5.1.2 设计图形用户界面的原则设计图形用户界面的原则在设计填表输入界面时应遵循的原则 一致性q保证前后用词、语法一致。有含义的表格标题

18、q采用有含义的表格标题，栏目标题要为用户所熟悉。使用易于理解的指导性说明文字q采用易于理解的说明性文字，并力求简短。如果确实需要较多的信息，应为初学者提供一组求助信息。栏目按逻辑分组排序q表格布局要直观，栏目按操作逻辑分组排序。5.1.2 5.1.2 设计图形用户界面的原则设计图形用户界面的原则表格的组织结构和用户任务相一致q把相关的输入字段组织安排在一起，并按照使用频率、重要性、功能关系或使用顺序来进行表格的排序和分组。光标移动方便q需要一种简单直观的机制来移动光标，如使用Tab键或箭头键。出错提示q系统应提示输入数据的允许范围和输入方法，对不可接受的值给出出错信息。提供帮助q界面应该在响应

19、处提供帮助信息，以解决新用户在不熟悉的情况下的输入。表格显示应美观、清楚，避免过分拥挤。用户的含义简单的说，用户是使用某种产品的人，其包含两层含义：1）用户是人类的一部分；2）用户是产品的使用者。产品的设计只有以用户为中心，才能得到更多用户的青睐。衡量一个以用户为中心的设计的好坏，关键点是强调产品的最终使用者与产品之间的交互质量，它包括三方面特性：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（Effectiveness）、效率（Efficiency）和用户主观满意度（Satisfaction）。延伸开来，还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后时

20、的整体心理感受等。5.2 理解用户用户体验（User Experience，UX）通常是指用户在使用产品或系统时的全面体验和满意度。用户体验主要有下列四个元素组成：u品牌（Branding）u使用性（Usability）u功能性（Functionality）u内容（Content）用户体验影响用户体验的因素影响用户体验的因素现有技术上的限制，使得设计人员必须优先在相对固定的UI框架内进行设计。设计的创新，在用户的接受程度上也存在一定的风险开发进度表，也会给这样一种具有艺术性的工作带来压力设计人员很容易认为他们了解用户需要，但实际情况常常不是这样偶然型用户：既没有计算机应用领域的专业知识，也缺少

21、计算机系统基本知识的用户。生疏型用户：他们更常使用计算机系统，因而对计算机的性能及操作使用，已经有一定程度的理解和经验。但他们往往对新使用的计算机系统缺乏了解，不太熟悉，因此对新系统而言，他们仍旧是生疏用户。熟练型用户：这类用户一般是专业技术人员，他们对需要计算机完成的工作任务有清楚地了解，对计算机系统也有相当多的知识和经验，并且能熟练地操作、使用。专家型用户：对需要计算机完成的工作任务和计算机系统都很精通的，通常是计算机专业用户，称为专家型用户。用户分类计算机和领域经验对易于学习和易于使用的影响用户交互分析用户交互分析产品策略分析 确定产品的设计方向和预期目标，特别是要了解用户对设计产品的期

22、望是什么；同类型产品的竞争特点，用户使用同类型产品时的交互体验。用户分析 深入而明确的了解产品的目标用户，如年龄、文化背景、职业、计算机使用经验等等。用户交互特性分析 根据用户需求分布，通过交互挖掘，得出准确、具体的用户特征，从而可以进行有的放矢地设计。用户的观察和分析情境访谈（Contextual Interviews）u走进用户的现实环境，尽量了解你的用户的工作方式、生活环境等情况。焦点小组（Focus Groups）u组织一组用户进行讨论，让你更了解用户的理解、想法、态度和需求。单独访谈（Individual Interviews）u一对一的用户讨论，让你了解某个用户是如何工作，使你知道

23、用户的感受、想要什么及其经历等。5.3 设计流程设计常用的素材分析方法是对象模型化，即将用户分析的结果按照讨论的对象进行分类整理，并且以各种图示的方法描述其属性、行为和关系。对象抽象模型可以逐步转化为不同具体程度的用户视图。比较抽象的视图有利于进行逻辑分析，称为低真视图（Low-fidelity Prototype）；比较具体的视图更接近于人机界面的最终表达，称为高真视图（High-fidelity Prototype）。实施随着产品进入实施阶段，设计师对高真设计原型进行最后的调整，并且撰写产品的设计风格标准（Style Guide），产品各个部分风格的一致性由该标准保证。产品实施或投入市场后

24、，面向用户的设计并没有结束，而是要进一步的搜集用户的评价和建议，以利于下一代产品的开发和研制。任务分析是交互设计至关重要的环节，在以用户为中心的设计中，关心的是如何从用户那里理解和获取用户的思维模式，进行充分、直观的表达，并用于交互设计。描述用户行为的工具有很多，目前经常提到的是通用标识语言UML（Unified Markup Language）。5.4 任务分析UML 2.0共有10种图示，分别为组合结构图、用例图、类图、序列图、对象图、协作图、状态图、活动图、组件图和部署图，它们分别用以表现不同的视图。在任务分析中使用UML工具，可以清晰地表达一个交互任务诸多方面的内容，包括交互中的使用行

25、为、交互顺序、协作关系、工序约束等等。使用行为分析就是要理解系统中每个参与者及其所需完成的任务，即分析系统所涉及的问题领域和系统运行的主要任务，分析使用该系统主要功能部分的是哪些人，谁将需要该系统的支持以完成其工作。使用行为分析一般使用用例图描述，它从参与者的角度出发来描述一个系统的功能，主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求。5.4.1 使用行为分析读者请求服务用例图书馆管理系统图书管理员处理借书、还书的用例图书馆管理系统系统管理员进行系统维护的用图书馆管理系统每个使用行为都是由若干步骤组成的，这些步骤可以使用顺序图进行描述。顺序图描述了完成一个任务的典型步骤；它可以按照

26、交互任务发生的时间顺序，把用例表达的需求转化为进一步、更加正式层次的精细表达；用例常常被细化为一个或更多的顺序图。5.4.2 顺序分析协作图着重显示了某个用户行为中各个系统元素之间的关系，而不再重点强调各个步骤的时间顺序。5.4.3 协作关系分析用户完成任务的步骤又被称为工序，某些工序之间的顺序是由一些逻辑关系的。工序约束陈述是工序分析的最直接的方法。本案例中可能存在如下工序约束：系统管理员必须先增加借阅者信息，读者才能登陆。系统管理员必须先增加书籍信息，读者才能查阅。读者借阅信息生成后，图书管理员图书管理员才能去书库取书。读者必须先在系统中办理借阅，才能取书。读者必须先借书才能还书。5.4.

27、4 工序约束陈述当所有任务分析完毕，就可以用一览表的形式描述系统中的所有用户及其可能需要完成的所有任务。5.4.5 用户任务一览表任务读者图书馆管理员系统管理员书籍信息查询、读者信息查询借书还书书籍预定增加、删除或更新书目增加、删除书籍增加、删除或更新读者帐户信息任务金字塔描述了不同层次的任务之间的关系。任何一个任务都可能包括若干子任务，从而构成金字塔状的结构。以读者查询图书为例5.4.6 任务金字塔通过描述实际的任务场景可以非常直观的进行任务描述，便于与用户的交流，并可以帮助分析设计者和真正用户之间对任务的不同理解。故事讲述（story telling）可以是真实的案例，也可以是虚构的情节，

28、甚至可以是对理想场景的虚构，关键是使这些故事能够典型的反映交互任务，具有充分的代表性。情节分析（scenario analysis）是对故事所反映的交互任务的理性分析，分离出故事中所描述的角色、目标、环境、步骤、策略、感情等诸方面的因素。5.4.7 故事讲述和情节分析Gould、Boies和Lewis于1991年提出了以用户为中心设计的四个重要原则。及早以用户为中心：设计人员应当在设计过程的早期就致力于了解用户的需要。综合设计：设计的所有方面应当齐头并进发展，而不是顺次发展，使产品的内部设计与用户界面的需要始终保持一致。及早并持续性地进行测试：当前对软件测试的唯一可行的方法是根据经验总结出的方

29、法，即若实际用户认为设计是可行的，它就是可行的。通过在开发的全过程引入可用性测试，可以使用户有机会在产品推出之前就设计提供反馈意见。反复式设计：大问题往往会掩盖小问题的存在。设计人员和开发人员应当在整个测试过程中反复对设计进行修改。5.5 以用户为中心的界面设计以用户为中心的设计方法有很多种，包括图形用户界面设计与评估（Graphical User Interface Design and Evaluation，GUIDE）以用户为中心的逻辑交互设计（Logical User-Centred Interaction Design，LUCID）用于交互优化的结构化用户界面设计（Structure

30、d User-Interface Design for Interaction Optimisation，STUDIO）以使用为中心的设计（Usage-Centered Design）OVID设计对象建模分析是将系统和用户任务分析的结果转化为用户界面设计的第一步；建模是将系统任务的某些概念及其关系用图的方式直观综合地表达出来；分析则是将系统的对象抽象为类，列出对象或类的属性、行为、以及对象间的关系。5.5.1 对象建模分析视图抽象设计通过组合概念模型中的对象和对象操作，提供系统运行的方法和方式，为具体的设计提供指导，并要为系统的不同实施方案提供灵活的界面选择。在线机票订购例子中完成上述交互的视

31、图可能包括：用户查询航班视图，航班信息列表视图，用户选中的某个具体航班的信息视图，订购信息填写视图，支付视图，交易成功反馈和出票视图等。5.5.2 视图抽象设计针对特定的操作系统或交互方式，对抽象的视图设计做进一步的具体设计，产生视图的概要设计。实际设计中，这些视图通常是用铅笔画在纸上，这样做速度快，而且修改起来也比较方便。查询条件航班号起飞城市到达城市起飞时间到达时间全票票价剩余票额CA1100济南北京17：3519：1050020订票操作员B保存操作员B打印操作员B上一页操作员B下一页操作员B新查询操作员B结果中查询操作员B5.5.3 概要设计任何一个人机交互系统的界面都可能包括若干状态，

32、用户在不同界面状态下根据自己完成任务需要进行不同的操作；很多交互任务需要从一个状态转化为另一个状态，这就要考虑用户完成任务所需的信息和功能，并将不同交互视图之间的联系和状态转换关系整理清楚。5.5.4 视图的关联设计确定各个视图的具体内容和大致布局，并在每个视图上明确体现与其他视图的关系，保证系统的整体性和和谐性。然后可以借助具体的开发工具进行界面的实际设计。浏览器交互方式下，Web界面视图的整体性主要通过下列几点保证：u使用相同的界面风格，包括颜色、字体、布局、行距，间距，导航条等；u使用相同的识别标志，如公司LOGO，底纹图案，版权和联系方式等；u系统视图结构清晰，在每个界面上明确表示当前视图与整体系统的关系；u使用一致的术语，特别是在不同语言的版本之间保持信息翻译的一致。5.5.5 视图的全面设计视图的全面设计