人机交互基础教程第6章

第6章人机交互界面表示模型与实现重点大学计算机专业系列教材人机交互界面表示模型界面描述语言窗口系统用户界面管理系统6.1.1行为模型分析人员获取用户需求后，结合领域专家的意见和指导，获取系统中需要完成的任务，对任务的主要因素进行详细地分析，如任务的层次、发生条件、完成的方法以及它们之间的关系等等。下面就从模型的基本原理、实例、局限性等几个方面详细介绍四种常见的行为模型。GOMS（

Goal,Operator,Method,Selection）目标操作方法和选择行为模型是在交互系统中用来分析用户复杂性的建模技术，用于建立用户行为模型。它采用“分而治之”的思想，将一个任务进行多层次的细化，通过目标

(Goal)、操作(Operator)、方法

(Method)以及选择规则

(Selectionrule)四个元素来描述用户行为。目标目标就是用户执行任务最终想要得到的结果。操作操作是任务分析到最底层时的行为，是用户为了完成任务所必须执行的基本动作。方法方法是描述如何完成目标的过程。一个方法本质上来说是一个内部算法，用来确定子目标序列及完成目标所需要的操作。关闭窗口行为描述实例选择规则选择规则是用户要遵守的判定规则，以确定在特定环境下所使用的方法。当有多个方法可供选择时，GOMS中并不认为这是一个随机的选择，而是尽量预测可能会使用哪个方法。LOTOS（LanguageOfTemporalOrderingSpecification）时序关系说明语言是一种作为国际标准的形式描述语言，它提供了一种通用的形式语义，可保证描述不存在二义性，便于分析和一致性测试理论的研究。其基本思想是用一套形式化和严格的表示法来刻画系统外部可见行为之间的时序关系，系统由一系列进程组成，两个以上的进程在执行同一个外部可见的行为时会发生交互，进行数据交换、信息传递、协调同步等操作。下面给出LOTOS模型中定义的基本算符：

T1|||T2（交替Interleaving）：T1和T2两个任务相互独立执行，可按任意顺序执行，但永远不会同步。T1[]T2（选择Choice）：需要在T1，T2中选择一个执行，一旦选择某一个后，必须执行它直到结束，在这中间另一个再无执行机会。任务如何来选择，并没有给出一定的形式化描述。T1|[a1,...,an]|T2（同步Synchronization）：任务T1，T2必须在动作（a1,……，an）处保持同步。T1[>T2（禁止Deactivation）：一旦T2任务被执行，T1便无效（不活动）。T1>>T2（允许Enabling）：当T1成功结束后才允许T2执行。中国象棋LOTOS的图形描述UAN（UserActionNotion）用户行为标注是一种简单的符号语言，着眼于用户和界面两个交互实体的描述，主要描述用户的行为序列以及在执行任务时所用的界面。

UAN模型的标识符主要有两种：用户动作标识符和条件选择标识符。用户动作标识符在UAN的表示模型中有一些常用的已经预定义的符号，用来表示常见的用户界面的交互动作。如：move_mouse(x,y)移动鼠标至(x,y)；release_button(x,y)在(x,y)位置释放鼠标按钮；hightLight(icon)使icon高亮显示；de_highlight(icon)取消icon的高亮显示。条件选择标识符除了表示动作的符号，UAN模型还包含表示条件及选择的标识符，主要有以下几种：while(condition)TASK当条件condition为真时，循环执行任务TASK；if(condition)thenTASK如果条件condition满足，则执行任务TASK；iterationA*orA+表示迭代操作；

waiting

表示等待，可以等待一个条件满足，也可以等待任务中的一个操作执行。UAN表格表示形式UAN描述的任务“文件拖入垃圾箱”的单通道实例CTT（ConcurrentTaskTreeNotation）任务模型表示法是一种基于图形符号的，采用层次的树状结构来组织并表示任务模型的方法。任务种类和暂态关系的含义及其图形符号：任务分析是一个以人们的行为为出发点的分析过程，它分析人们完成任务的方法：他们要做的事、要起作用的事和想要知道的事。任务种类：抽象任务（AbstractTask），用户任务（UserTask），交互任务（InteractionTask），系统任务（ApplicationTask）。暂态关系符号：

Choice：t1[]t2[]…[]tn

Concurrent（IndependentConcurrency）：t1|||t2|||…|||tn带信息交换的Concurrent：t1|[]|t2|[]|…|[]|tnDisabling：t1[>t2Enabling：t1>>t2>>…>>tn带信息交换的Enabling：t1[]>>t2[]>>…[]>>tnIndependence：t1|=|t2单用户任务模型单用户任务模型在CTT中表示为一棵树。用户使用自动取款机的任务模型6.1.2结构模型形式化语言的描述――产生式规则：

ifconditionthenaction或

condition→action或

condition：action一般来说，组成界面描述的产生式规则很多，规则定义的顺序并不重要，只要与规则中的条件相匹配，就可以激活相应的动作。产生式规则系统可以是事件引导的，也可以是状态引导的，或者两者都有。状态转换网络状态转换网络（STN）的基本思想是定义一个具有一定数量的状态的转换机，称之为有限状态机（FSM），FSM从外部世界中接收到事件，并能使FSM从一个状态转换到另一个状态。两种最基本的状态转换网络：状态转换网络（StateDiagrams）扩展状态转换网络（StateCharts）状态转换网络符号简单状态转换网络带条件和动作的状态转换网络状态转换网络（StateDiagrams）基于鼠标画图工具状态转换网扩展状态转换网络（StateCharts）分层的状态图实例6.1.3行为模型和结构模型的转换一般来说行为模型主要对设计起指导作用，在此基础上，设计人员再进行结构模型（如状态转换网络等）的创建，这个过程很大程度上取决于设计人员的经验和对行为模型的理解。整体框架转换算法实例应用最高层目标状态转换“运行”目标状态转换“走棋”目标状态转换6.1.4表现模型表现模型(PM)描述了用户界面的表现形式，由层次性的交互对象组成。逻辑组织结构面板用户界面的图形显示面板用户界面的数据结构表示面板用户界面的绘制面板用户界面的逻辑组织结构面板内部的事件分发及响应方式控制面板用户界面交互的核心模块可以看作是一个事件处理中心，事件处理中心接收并解析用户动作，然后将结果表现给用户。事件处理中心对事件的响应的实现面板间的关系

JacobEisenstein创立了两种新的抽象描述来描述基于面板的用户界面表现模型。面板关系分类面板种类界面描述语言一般分为两类：命令式语言(ImperativeLanguage)和陈述式语言(DeclarativeLanguage)。命令式语言要求编程人员明确的指定如何执行任务，陈述性语言要求编程人员只需指定任务要做什么，陈述性语言要比命令式的语言更为抽象。下面介绍几种常见的陈述性语言。用户界面标记语言(UIML)语言的基本表示结构扩展界面标记语言(XIML)

XIML由组件(Components)、关系(Relations)和属性(Attributes)三部分构成。XML语言的基本表示结构

XML用户界面语言XUL

XUL提供了创建现代图形界面大多数元素的能力。能够满足特定设备的普遍需求，对开发者来说，也已经足够强大，能够创建复杂的界面。6.3.1窗口系统结构窗口系统一般有三种结构：在各个应用程序内部实现和管理多任务在操作系统核心集中处理多任务管理多任务的管理可由独立的管理程序进行管理，应用程序通过调用该管理程序提供的接口来实现对多任务的管理和设备的独立性操作6.3.2交互事件处理应用程序内部事件处理循环事件处理循环事件注册方式事件注册方式处理流程图6.3.3交互组件开发包一般的窗口系统，输入和显示是分离的，许多语言提供了用于开发交互系统的开发软件包，交互系统开发软件包在支持窗口管理的基础上增加了另一种抽象，它把输入和输出的行为结合起来。按钮交互对象行为AWT即抽象窗口工具包（AbstractWindowToolkit），是JavaAPI为Java程序提供的建立图形用户界面的基本工具集，AWT可用于JavaApplication和JavaApplet的图形用户界面的创建。

AWT类层次结构图如下：java.awt包中提供了许多图形操作的类：

Graphics类：提供了许多处理图形的方法，如绘制线条、各种矩形、各种椭圆、弧线和多边形等。

Color类：包含了操作颜色的方法和常量。

Font类：包含了操作字体的方法和常量。常用的AWT组件：Frame类文本框和文本区按钮和标签面板和画布布局设计选择型组件Component类的常用方法Dialog类1、文本框（TextField）单行文本框，可以向其中输入一行字符串或对其内容进行修改构造方法：publicTextField(Stringtext)publicTextField(intcolumns)publicTextField(Stringtext,intcolumns)

文本区（TextArea）多行文本框，或称文本区，同样用于显示文本字符串，用户也可以对其中的字符串进行编辑构造方法：publicTextArea(Stringtext)publicTextArea(introws,intcolumns)publicTextArea(Stringtext,intcows,

intcolumns)publicTextArea(Stringtext,intcows,

intcolumns,intscrollbars)

按钮（Button）用来响应用户的点击动作构造方法：publicButton()

publicButton(Stringlabel)

Button类常用方法：

publicStringgetLabel()publicvoidsetLabel(Stringlabel)publicStringgetActionCommand()publicvoidsetActionCommand

(Stringcommand)publicvoidaddActionListener

(ActionListenerlistenerAWT是Java最早出现的图形界面，但很快就被Swing所取代。Swing才是一种真正的图形开发。AWT在不同平台所出现的界面可能有所不同：因为每个OS都有自己的UI组件库，java调用不同系统的UI。注意AWT为重量级组件，相当消耗资源，且不同系统的组件可能不同。因为这个问题使得AWT开发的软件难以作到跨平台。更为要命的是：不同OS的组件库都存在BUG。必须多种平台进行测试，并且AWT的组件库并不丰富。为解决以上问题，SUN和IBM以及NETSCAPE联合开发出JAVA基础类包Swing：注意JAVA的基础类以Swing为核心。注意引用：javax.swing.*;javax表示JAVA的扩展。6.3.4交互框架桌面应用框架下拉菜单示例工具栏示例树形菜单示例状态栏示例标签页方式工作区示例多层应用架构MultilayeredArchitecture多层架构，一种设计模式，将应用软件的不同的任务分配到软件的不同层次中。Web应用软件的典型结构Web浏览器支持动态Web内容技术的引擎（CGI,PHP,JavaServlets）数据库三层应用架构6.3.5MVC模式和基于Struts的实现

MVC把一个应用的输入、处理、输出流程按照模型

(model)、视图（View）和控制（Controller）的方式进行分离，形成模型层、视图层、控制层三个层次。MVC模型MVC模式MVC(Model-View-Controller)模式架构模式设计模式将数据与数据的显示相分离降低开发复杂度可维护性灵活性可重用性模型（Model）应用的信息/数据操作数据的业务规则视图（View）用户界面的元素控制器（Controller）具体管理用户行为（如键盘或鼠标事件）与模型的通信过程Web应用软件中的MVC模式Model存储在数据库或XML文件中的数据基于用户的行为获取数据并转换为内容的业务规则ViewHTML页面Controller收集动态数据并生成HTML页面中的内容MVC架构模式的流程用户以某种操作方式与用户界面交互Controller处理来自用户界面的输入事件Controller将用户的操作通知Model，可能会修改Model数据的状态视图调用Model数据生成用户界面用户界面等待用户的进一步交互MVC是一个设计模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器。它们各自处理自己的任务。（1）MVC概述模型-视图-控制器（MVC）是80年代Smalltalk-80中出现的一种软件设计模式，现已经被广泛地使用。尽管它源于桌面程序（Desktop），但现在也被广泛地应用于B/S模式的Web程序开发中。（2）Model-View-Controller是软件系统的通用体系架构设计基于MVC架构模式的系统时，强调将一个复杂的应用系统分解为模型、视图和控制器三部分，它们分别对应于应用中的业务逻辑和数据、用户界面、用户请求处理和数据显示的同步。MVC是用来帮助控制应用系统中“变化”的一种设计模式。

MVC(ModelViewController)模型(model)－视图(view)－控制器(controller)

MVC本来是存在于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器。使用MVC

copyright:AppleInc.的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据你可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。MVC模式的目的是实现一种动态的程式设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式通过对复杂度的简化，使程序结构更加直观。软件系统通过对自身基本部份分离的同时也赋予了各个基本部分应有的功能。（视图View）-界面设计人员进行图形界面设计用于与用户的交互，通常用JSP来实现。（模型Model）-实现系统中的业务逻辑，通常可以用JavaBean或EJB来实现。程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。（控制器Controller）-负责转发请求，对请求进行处理。Controller层是Model与View之间沟通的桥梁，它可以分派用户的请求并选择恰当的视图以用于显示，同时它也可以解释用户的输入并将它们映射为模型层可执行的操作。Event(事件)导致Controller改变Model或View，或者同时改变两者。只要Controller改变了Models的数据或者属性，所有依赖的View都会自动更新。类似的，只要Controller改变了View，View会从潜在的Model中获取数据来刷新自己。视图视图(View)代表用户交互界面，对于Web应用来说，可以概括为HTML界面，但有可能为XHTML、XML和Applet。随着应用的复杂性和规模性，界面的处理也变得具有挑战性。一个应用可能有很多不同的视图，MVC设计模式对于视图的处理仅限于视图上数据的采集和处理，以及用户的请求，而不包括在视图上的业务流程的处理。业务流程的处理交予模型(Model)处理。比如一个订单的视图只接受来自模型的数据并显示给用户，以及将用户界面的输入数据和请求传递给控制和模型。

模型模型(Model)：就是业务流程/状态的处理以及业务规则的制定。业务流程的处理过程对其它层来说是黑箱操作，模型接受视图请求的数据，并返回最终的处理结果。业务模型的设计可以说是MVC最主要的核心。控制控制(Controller)可以理解为从用户接收请求,将模型与视图匹配在一起，共同完成用户的请求。划分控制层的作用也很明显，它清楚地告诉你，它就是一个分发器，选择什么样的模型，选择什么样的视图，可以完成什么样的用户请求。控制层并不做任何的数据处理。例如，用户点击一个连接，控制层接受请求后,并不处理业务信息，它只把用户的信息传递给模型，告诉模型做什么，选择符合要求的视图返回给用户。因此，一个模型可能对应多