2、令行界面图形界面多通道用户界面5.1界面设计原则命令行界面可以看作是第一代人机界面,其中人被看成操作员,机器只做出被动的反应,人用手操作键盘,输入数据和命令信息,通过视觉通道获取信息,界面输出只能为静态的文本字符。命令行交互界面操作系统MS-DOS是文本命令行交互界面。例如,需要将所有扩展名为“.AAA”的文件替换为扩展名为“.BBB”,如果在“我的电脑”或“WINDOWS资源管理器”中,需要一个一个地去查找、改名,操作的局限性是显而易见的。利用命令rename,使用通配符“*”或“?”,就可以方便地更改一组文件名或扩展名。命令行交互界面不同的操作系统要用不同的命令进入命令行界面。
4、戏(Mud,多角色世界MutipleUserDimension)游戏开始盛行。图形界面可看作是第二代人机界面,是基于图形方式的人机界面。由于引入了图标、按钮和滚动条技术,大大减少了键盘输入,提高了交互效率。基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及。图形用户界面又称为WIMP界面,由窗口(windows)、图标(icons)、菜单(menu)、指点设备(pointingdevice)四位一体,形成桌面(desktop)。图形用户界面是当前用户界面的主流,广泛应用于各档台式微机和图形工作站。图形用户界面的发展历史。19731973年4月,XeroxPARC
6、个按键),最重要的是拥有桌面软件,支持多语言,能够连接文件服务器、邮件服务器和打印服务器。可惜的是,XeroxStar是一个完全封闭的系统,不允许人们应用系统之外的其它程序语言和开发环境,这也意味着它不支持第三方软件。Amiga公司开发的Amiga操作系统一经发布就引领时代,它包括了高色彩图形、立体声、多任务运行等特点,这使得它是一款极好的适合多媒体应用和游戏的机器。19951995年8月24日,微软发布了Windows95,对图形用户界面进行了重新设计,首次在每一个窗口上都添加了小小的关闭按钮。设计团队为图标和图形设计了各种状态(启用,禁用,选定,停止等),著名的“开始”按钮
7、也首次出现。这对于微软操作系统本身和统一的图形用户界面而言,都是一个巨大的进步。20002000年1月5日,苹果公司宣布他们设计出了全新的Aqua界面,并将用于公司新推出的MacOSX操作系统中。在此界面中,默认的32x32和48x48的图标被更大的128x128平滑的半透明图标取代。Dock上放置了常用的程序图标,鼠标经过时会显示程序名称。当窗口最小化后,在Dock上显示的不是程序图标,而是程序窗口的缩略图。Aqua界面最大的变化是涉及到了渐变、背景样式、动画和透明度的应用,有着更好的用户体验。20012001年10月25日,微软也不甘示弱,发布了拥有全新用户界面的W
8、indowsXP,该界面支持更换皮肤,用户可以改变整个界面的外观和感觉,默认图标为48x48,支持数百万种颜色。20072007年1月30日,经过了漫长的等待,微软终于揭开了WindowsVista的神秘面纱。这款操作系统是微软为了应对其竞争对手而发布的,包含了很多3D效果和动画。自Windows98以来,微软一直试图改善其桌面,在WindowsVista中,微软用了桌面小工具取代了活动桌面。微软于2012年发布Windows8的变化几乎是颠覆性的。系统界面上,Windows8采用全新的ModernUI界面,各种程序以动态方块的样式呈现;操作上,大幅改变以往的操作逻辑,
9、提供更佳的屏幕触控支持,同时启动速度更快、占用内存更少。Windows10是微软独立发布的最后一个Windows版本,下一代Windows将作为更新形式出现。Windows10发布了7个发行版本,分别面向不同用户和设备。2015年7月29日起,Windows10推送全面开启,Windows7、Windows8.1用户可以免费升级到Windows10。WIMP界面概念模型2图形用户界面在WIMP界面中,人被称为用户,人机通过对话进行工作。用户只能使用手这一种交互通道输入信息,通过视觉通道获取信息。在WIMP界面中,界面的输出可以为静态或动态的二维图形或图像等信息。5.1界
10、面设计原则多通道用户界面则进一步综合采用视觉、语音、手势等新的交互通道、设备和交互技术,使用户利用多个通道以自然、并行、协作的方式进行人机对话,通过整合来自多个通道的、精确的或不精确的输入来捕捉用户的交互意图,提高人机交互的自然性和高效性。5.1.1图形用户界面的主要思想1桌面隐喻桌面隐喻(desktopmetaphor)2所见即所得(所见即所得(WhatYouSeeIsWhatYouGet,WYSIWYG)3直接操纵直接操纵(directmanipulation)1.桌面隐喻桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。从
11、认知心理学上讲,在日常生活中,人们往往参照对熟知的、有形体的、具体的事物的感知经验来认知、思维、经历和理解那些无形的、难以定义的抽象概念,并根据不同的熟知概念之间的结构关系,以隐喻性的思维方式完成对目标域抽象概念结构关系的构建和理解。图例可以代表对象、动作、属性等概念尽管文本表示某些抽象概念有时比用图例表示要好,但好的图例比文本更易于辨识;与文本相比,图例占据较少的屏幕空间1.桌面隐喻-图例表示的优点优点:图例还可以独立于语言-因其具有一定的文化和语言独立性,可以提高目标搜索的效率隐喻的表现方法静态图标流行的图形用户操作系统大多采用,如画有磁盘的图标表示存盘操作;打印机表示打印。直
12、观易懂,单击图标即可动画隐喻分类直接隐喻:隐喻本身就带有操纵的对象。如Word绘图工具中的图标,代表图形绘制操作工具隐喻:磁盘图标(隐喻存盘操作),打印机图标(隐喻打印操作)简单形象直观,最普遍过程隐喻:通过描述操作的过程来暗示该操作,如Word中撤销和恢复图标1.桌面隐喻图形用户界面设计中,隐喻一直非常流行,如文件夹及垃圾箱。晦涩的隐喻不仅不能增加可用性,反而会弄巧成拙。隐喻的缺点:占用屏幕空间,难以表达和支持比较抽象的信息2.所见即所得在WYSIWYG交互界面中,其所显示的用户交互行为与应用程序最终产生的结果是一致的。大多数图形编辑软件和文本编辑器都具有该界面弊端:
13、屏幕空间或颜色的配置方案与硬件设备所提供的配置不一样,两者之间很难产生正确的匹配,如打印机的颜色域小于显示器的颜色域,打印质量往往较低3.直接操纵直接操纵是指可以把操作的对象、属性、关系显式地表示出来,用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作图形用户界面和人机交互过程极大地依赖于视觉和手动控制的参与,因此具有强烈的直接操纵特点直接操纵的特性1.直接操纵的对象是动作或数据的形象隐喻形象隐喻应该与其实际内容相近,使用户能通过屏幕上的隐喻直接想象或感知其内容。2.用指点和选择代替键盘输入用指点和选择代
14、替键盘输入有两个优点,一是操作简便,速度快捷;二是不用记忆复杂的命令,对于非专业用户尤为重要。3.操作结果立即可见操作结果立即可见,用户可以及时修正操作,逐步往正确的方向前进。4.支持逆向操作用户在使用系统的过程中,不可避免地会出现一些操作错误,通过逆向操作,用户可以很方便地恢复到出现错误之前的状态。直接操纵的特性5.借助物理的、空间的或形象的表示,而不是单纯的文字或数字的表示。有利于解决问题和进行学习6.不用过多为计算机语义和句法分心7.尊重用户的使用经验,易于理解和使用8.不具备命令语言界面的某些优点.例如从用户界面设计者角度看,设计图形比较繁琐,需进行大量的测试和实验.9.表示复杂
15、语义、抽象语义比较困难。间接操纵间接操纵在实践中,直接操纵并非对于屏幕上所有对象和操作都是切实可行的,因为:某些操作在图形化系统中可能很难概念化。系统的图形能力可能有局限性。窗口中用于放置操纵控件的空间也许存在限制。让人们学习并记住所有需要的操作也许很困难。当出现这些情况时,我们就会使用间接操纵。在间接操纵中,文本如下拉式或弹出式菜单取代了符号,并用键盘键入代替了定位指向。大多数的窗口系统都综合了直接和间接操纵。菜单可以通过指向菜单图标并进行选择(直接操纵)来访问。而菜单本身,是一些操作的名称列表(间接操纵)。当列表上的某个操作通过指向或者键盘选择之后,系统便开始执行相应的命令。哪种交互方式
16、最好?直接操纵,间接操纵,还是两者结合?5.1.2设计图形用户界面的原则1.一般性原则(1)界面要具有一致性q在同一用户界面中,所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。(2)常用操作要有快捷方式q为常用操作设计快捷方式,不仅会提高用户的工作效率,还使界面在功能实现上简洁而高效。(3)提供必要的错误处理功能q在出现错误时,系统应该能检测出错误,并且提供简单和容易理解的错误处理功能(4)对操作人员的重要操作要有信息反馈q提供信息反馈。对操作人员的重要操作要有信息反馈。5.1.2设计图形用户界面的原则(5)操作可逆q对大多数动作应允许恢复(UNDO),对
17、用户出错采取比较宽容的态度(6)设计良好的联机帮助q人机界面应该提供上下文敏感的求助系统,让用户及时获得帮助,尽量用简短的动词和动词短语提示命令。(7)合理划分并高效地使用显示屏q只显示与上下文有关的信息,允许用户对可视环境进行维护,如放大、缩小窗口;用窗口分隔不同种类的信息,只显示有意义的信息5.1.2设计图形用户界面的原则2.颜色的使用颜色是一种有效的强化手段,同时具有美学价值。使用颜色时应注意如下几点:q(1)限制同时显示的颜色数.q(2)画面中活动对象的颜色应鲜明,而非活动对象应暗淡。q(3)尽量避免不相容的颜色放在一起,如黄与蓝,红与绿等,除非作对比时用。3.图标的设计图标
18、是可视地表示实体信息的简洁、抽象的符号。图标设计是方寸艺术,需要在很小的范围内表现出图标的内涵。设计图标时应该着重考虑视觉冲击力,要使用简单的颜色,利用眼睛对色彩和网点的空间混合效果,做出精彩图标5.1.2设计图形用户界面的原则设计图标时须遵守的原则和方法:(1)图标的图形应该和目标的外形相似。尽量避免过于抽象。(2)可在图标中附加上简要的文本标注,使用户明确图标的含义。(3)设计图标应尽可能简单,符合常规的表达习惯,保持图标含义的前后连贯。5.1.2设计图形用户界面的原则4.按钮的设计设计按钮应该具有交互性,应该有3到6种状态效果:q点击时的状态q鼠标放在上面但未点击的状态q点击前鼠标未
19、放在上面时的状态q点击后鼠标未放在上面时的状态q不能点击时的状态q独立自动变化的状态属于一个群组的按钮应该风格统一,功能差异大的按钮应该有所区别。5.1.2设计图形用户界面的原则5.屏幕布局的设计设计屏幕布局(Layout)时应该使各功能区重点突出,应遵循如下几条原则:q(1)平衡原则v注意屏幕上下左右平衡。q(2)预期原则v对屏幕上所有对象,如窗口、按钮、菜单等处理应一致化,使对象的操作结果可以预期。q(3)经济原则v在提供足够信息量的同时要注意简明、清晰。q(4)顺序原则v对象显示的顺序应按需要排列。q(5)规则化v画面应对称,显示命令、对话及提示行在一个应用系统的
22、据,这时填表输入界面是最理想的数据输入界面。填表输入界面有以下的特点:q有明确的提示,使用户可以不需要学习、训练,也不必记忆有关的语义、语法规则。q填表输入界面充分地利用了屏幕空间。q在填表输入方式中,可以充分利用上下文信息,帮助用户完成输入。5.1.2设计图形用户界面的原则图片在设计填表输入界面时应遵循的原则一致性q保证前后用词、语法一致。有含义的表格标题q采用有含义的表格标题,栏目标题要为用户所熟悉。使用易于理解的指导性说明文字q采用易于理解的说明性文字,并力求简短。如果确实需要较多的信息,应为初学者提供一组求助信息。栏目按逻辑分组排序q表格布局要直观,栏目按操作逻
24、计只有以用户为中心,才能得到更多用户的青睐。5.2理解用户5.2.1用户的含义衡量一个以用户为中心的设计的好坏,关键点是强调产品的最终使用者与产品之间的交互质量它包括三方面特性:产品在特定使用环境下为特定用户用于特定用途时所具有的1有效性(Effectiveness)、2效率(Efficiency)和3用户主观满意度(Satisfaction)。延伸开来,还包括对特定用户而言,产品的易学程度、对用户的吸引程度、用户在体验产品前后时的整体心理感受等。5.2理解用户5.2.1用户的含义以用户为中心的设计,其宗旨就是:在软件开发过程中要紧紧围绕用户,在系统设计和测试过程中,要有用户的参
25、与,以便及时获得用户的反馈信息,根据用户的需求和反馈信息,不断改进,直到满足了用户的需求。5.2.2用户体验用户体验(UserExperience,UX)通常是指用户在使用产品或系统时的全面体验和满意度。用户体验多半与交互设计有关5.2.2用户体验用户体验主要有下列四个元素组成:品牌(Branding)使用性(Usability)功能性(Functionality)内容(Content)四个元素单独作用都不会带来好的用户体验,综合考虑,一致作用则会带来良好的结果5.2.2用户体验实际操作中的用户体验建设,更多是一种“迭代”式的开发过程:按照某种原则体系设计功能、版面、操作流
27、,也缺少计算机系统基本知识的用户。生疏型用户:他们更常使用计算机系统,因而对计算机的性能及操作使用,已经有一定程度的理解和经验。但他们往往对新使用的计算机系统缺乏了解,不太熟悉,因此对新系统而言,他们仍旧是生疏用户。5.2.3用户的区别1.用户的分类熟练型用户:这类用户一般是专业技术人员,他们对需要计算机完成的工作任务有清楚地了解,对计算机系统也有相当多的知识和经验,并且能熟练地操作、使用。专家型用户:对需要计算机完成的工作任务和计算机系统都很精通的,通常是计算机专业用户,称为专家型用户。5.2.3用户的区别1.用户的分类不同的用户会有不同的经验、能力和要求:偶然和生疏型用户要
28、求系统给出更多的支持和帮助;熟练型和专家型用户要求系统运行效率高、能灵活使用计算机和领域经验对易于学习和易于使用的影响5.2.4用户交互分析在理解用户的基础上,需要针对软件的功能和目标用户,全面分析用户的交互内容,主要包括:产品策略分析、用户分析、用户交互特性分析1.产品策略分析确定产品的设计方向和预期目标,特别要了解用户对设计产品的期望同类产品的竞争特点,用户使用同类产品的交互体验:正面的和负面的体验,从而得出产品交互设计的策略2.用户分析深入而明确地了解产品的目标用户。确定目标用户群就可以了解到目标用户群体区别于一般人群的具体特征,年龄区间、文化背景、职业特征、计算
29、机使用经验、同类产品使用经验、爱好在此基础上,找到“典型”用户。3.用户交互特性分析与用户交流的基础上,了解目标用户群体的分类情况及比例关系,对用户特性进行不断的细化,根据用户需求的分布情况,可以进行一些交互挖掘,如:问卷、投票、采访、直接用户观察等。得出准确、具体的用户特征,从而可以有的放矢设计5.3设计流程5.3.1用户的观察和分析通过观察用户是如何理解内容和组织信息,可以帮助人们交互设计更合理的组织信息。主要的方法有:情境访谈(ContextualInterviews)焦点小组(FocusGroups)单独访谈(IndividualInterviews)5.3设
30、计流程5.3.1用户的观察和分析情境访谈(ContextualInterviews)走进用户的现实环境,尽量了解你的用户的工作方式、生活环境等情况。焦点小组(FocusGroups)组织一组用户进行讨论,让你更了解用户的理解、想法、态度和需求。单独访谈(IndividualInterviews)一对一的用户讨论,让你了解某个用户是如何工作,使你知道用户的感受、想要什么及其经历等。5.3.2设计对用户的观察和分析为设计提供了丰富的背景素材,应对这些素材进行系统分析常用的素材分析方法是对象模型化,即将用户分析的结果按照讨论的对象进行分类整理,并且以各种图示的方法描述其属性、行
31、为和关系。5.3.2设计对象抽象模型可以逐步转化为不同具体程度的用户视图。比较抽象的视图有利于进行逻辑分析,称为低真视图(Low-fidelityPrototype);比较具体的视图更接近于人机界面的最终表达,称为高真视图(High-fidelityPrototype)。5.3.2设计随着设计理念和思路发展,设计师会继续收集用户反馈的信息用户直接参与或向其展示产品的原型随着原型的发展,用户可能被邀请“漫步”其中,提出整体上是否满足用户的需要对意见、反馈样本进行分析评估,把得到的结果推展到设计思想,以进行下一轮的设计和评估。不停迭代,直至满意为止随着产品进入实施阶段,设计师对
34、言。5.4任务分析一、什么是模型?模型是对现实世界的形状或状态的抽象模拟和简化。二、为什么要建模?最简单的理由:为了能够更好地理解正在开发的系统。通过建模,可以达到四个目的:1、有助于按照需求对系统进行可视化的分析2、能够系统的分析结构或行为3、给出构造系统的模板4、对做出的决策进行文档化UML2.0共有10种图示,分别为组合结构图、用例图、类图、序列图、对象图、协作图、状态图、活动图、组件图和部署图,它们分别用以表现不同的视图。在任务分析中使用UML工具,可以清晰地表达一个交互任务诸多方面的内容,包括交互中的使用行为、交互顺序、协作关系、工序约束等。5.4任务分析5.4
35、.1使用行为分析使用行为分析就是要理解系统中每个参与者及其所需完成的任务,就是分析系统所涉及的问题领域和系统运行的主要任务,分析使用该系统主要功能部分的是哪些人,谁将需要该系统的支持以完成其工作。使用行为分析一般使用例图描述,它从参与者的角度出发来描述一个系统的功能,主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求。图书管理系统为例参与者:读者图书管理员图书管理系统的管理员分别就使用行为进行分析实例-读者请求服务用例实例-图书管理员处理借书、还书的用例实例-系统管理员进行系统维护用例5.4.2顺序分析每个使用行为都是由若干步骤组成的,这些步骤可以使用顺序图(时序图)进
37、后,图书管理员才能去书库取书。读者必须先在系统中办理借阅,才能取书。读者必须先借书才能还书。5.4.5用户任务一览表当所有任务分析完毕,就可以用一览表的形式描述系统中的所有用户及其可能需要完成的所有任务。任务读者图书馆管理员系统管理员书籍信息查询、读者信息查询借书还书书籍预定增加、删除或更新书目增加、删除书籍增加、删除或更新读者帐户信息5.4.6任务金字塔任务金字塔描述了不同层次的任务之间的关系。任何一个任务都可能包括若干子任务,从而构成金字塔状的结构。以读者查询图书为例5.4.7故事讲述和情节分析通过描述实际的任务场景可以非常直观的进行任务描述,便于与用户的交流,并可以帮助分
38、析设计者和真正用户之间对任务的不同理解。5.4.7故事讲述和情节分析故事讲述(storytelling)可以是真实的案例,也可以是虚构的情节,甚至可以是对理想场景的虚构,关键是使这些故事能够典型的反映交互任务,具有充分的代表性。书中P93,一个学生借书的过程描述图书馆里系统的交互故事。5.4.7故事讲述和情节分析情节分析(scenarioanalysis)是对故事所反映的交互任务的理性分析,分离出故事中所描述的角色、目标、环境、步骤、策略、感情等诸方面的因素。角色:读者、管理员目标:完成书籍的借阅或预定步骤:查询书籍,浏览图书信息,确定要借阅的书籍;在系统中办理借阅,并等
39、待从借书处取书。策略:如果图书在馆,则借阅;否则,可以预定图书。5.5以用户为中心的界面设计Gould、Boies和Lewis于1991年提出了以用户为中心设计的四个重要原则。及早以用户为中心:综合设计:及早并持续性地进行测试:反复式设计:5.5以用户为中心的界面设计及早以用户为中心:设计人员应当在设计过程的早期就致力于了解用户的需要。综合设计:设计的所有方面应当齐头并进发展,而不是顺次发展,使产品的内部设计与用户界面的需要始终保持一致。5.5以用户为中心的界面设计及早并持续性地进行测试:当前对软件测试的唯一可行的方法是根据经验总结出的方法,即:若实际用户认为设计是可
40、行的,它就是可行的。通过在开发的全过程引入可用性测试,可以使用户有机会在产品推出之前就设计提供反馈意见。5.5以用户为中心的界面设计反复式设计:大问题往往会掩盖小问题的存在。设计人员和开发人员应当在整个测试过程中反复对设计进行修改。5.5以用户为中心的界面设计以用户为中心的设计方法有很多种,包括图形用户界面设计与评估(GraphicalUserInterfaceDesignandEvaluation,GUIDE)以用户为中心的逻辑交互设计(LogicalUser-CentredInteractionDesign,LUCID)5.5以用户为中心的界面设计用于交
41、互优化的结构化用户界面设计(StructuredUser-InterfaceDesignforInteractionOptimisation,STUDIO)以使用为中心的设计(Usage-CenteredDesign)OVID设计OVID设计IBM公司采用的OVID方法,通过对用户、目标和任务的分析,系统指导人机交互界面设计,以达到用户满意的设计要求OVID中涉及三个模型,模型之间相互关联:设计者模型编程者模型用户概念模型OVID设计三模型设计者模型:就是用对象、对象之间的关系等概念来表达目标用户意图的概念模型编程者模型:广泛应用于面向对象的开发方法中,用于表示和实现构成系统的类用户概念模型:表示用户对系统的理解,依赖于用户的交互经验实际开发中,需求分析,设计者从用户获得对系统的理解,融合到设计者模型中,确保界面设计能反映用户意图OVID设计OVID方法的关键是确定交互中涉及的对象,并把