第六章人机交互界面的表示模型与实现

1、山东大学计算机学院山东大学计算机学院2目的n在界面设计的早期阶段，研究建立一种用户界面表示模型q利用形式化的设计语言来分析和表达用户任务以及用户和系统之间的交互情况；q使界面表示模型能方便地映射到实际的设计实现。 山东大学计算机学院3界面模型分类n任务分解和分析q能力模型（competence model）n描述用户的目的q行为模型（performance model）n预测和描述用户合法的交互行为序列n结构模型 constructional modelq系统组成模型山东大学计算机学院4本章主要内容 n掌握三种模型：q行为模型n主要从用户和任务的角度考虑如何来描述人机交互界面，将详细介绍GOM

2、S，UAN及LOTOS模型。q结构模型n主要从系统的角度来表示人机交互界面。重点介绍状态转换网络（STN-State Transition Network）和产生式规则 ( Production Rule )。q事件-对象模型n是一种面向对象的表示模型，它将人机交互活动归结为事件与对象的相互作用。n掌握如何由界面的行为表示模型转换到系统的结构模型。人机交互界面表示模型行为模型山东大学计算机学院6GOMS简介n1983年由Card, Morgan和Newell 提出的。n通过目标 (Goal)、操作 (Operator)、方法 (Method) 以及选择规则 (Selection) 四个元素来描

3、述用户的行为。nGOMS是在交互系统中用来分析建立用户行为的模型。它采用“分而治之”的思想，将一个任务进行多层次的细化。山东大学计算机学院7GOMS1.1.目标 GoalsGoals 目标就是用户执行任务最终想要得到的结果,它可以在不同的层次中进行定义。 eg:“编辑一篇文章”-“编辑文章”（高层）； “删除字符”（低层） 2. 操作 OperatorsOperators 操作是任务分析到最低层时的行为，是用户为了完成任务所必须执行的基本动作。 操作不能被分解，在GOMS模型中是原子动作。山东大学计算机学院8GOMS3. 方法 MethodsMethods 方法是描述如何完成目标的过程。一个方

4、法本质上来说是内部的算法，用来确定子目标序列及完成目标所需要的操作。关闭（最小化）窗口GOAL: ICONSIZE-WINDOW select GOAL: USE-CLOSE-METHOD MOVE-MOUSE-TO-WINDOW-HEADER POP-UP-MENU CLICK-OVER-CLOSE-OPTION GOAL: USE-L7-METHOD PRESS-L7-KEY山东大学计算机学院9GOMS4 4选择 SelectionSelectionn选择是用户要遵守的判定规则，以确定在特定环境下所要使用的方法。n当有多个方法可供选择时，GOMS中并不认为这是一个随机的选择，而是尽量来预测

5、会使用哪个方法,这需要根据特定用户、系统的状态、目标的细节来预测要选择哪种方法。n用户Sam: Rule 1: Use the CLOSE-METHOD unless another rule applies Rule 2: If the application is GAME, use L7-METHOD山东大学计算机学院10任务Editing的GOMS描述实例Task:EditingGOAL:EDIT-MANUSCRIPT GOAL:EDIT-UNIT-Task repeat until no more unit tasks GOAL:ACQUIRE-UNIT-TASK GET-NEXT-

6、PAGE if at end of manuscript GET-NEXT-TASK GOAL:EXECUTE-UNIT-TASK GOAL:LOCATE-LINE select:USE-QS-METHED USE-LF-METHOD GOAL:MODIFY-TEXT select:USE-S-METHOD USE-M-METHOD VERIFY-EDIT 子目标间关系：顺序关系，选择关系山东大学计算机学院11GOMS应用nGOMS是一种人机交互界面表示的理论模型，被称为最成熟的工程典范，该模型在计算机系统的评估方面也有广泛的应用。nGOMS can save money!q美国电话公司NYN

7、EX利用GOMS分析一套即将被采用的新的计算机系统的应用效果，结果发现效果不理想，放弃了使用新系统，为公司节约了数百万的资金。山东大学计算机学院12GOMS的局限性nGOMS没有清楚的描述错误处理的过程，假设用户完全按一种正确的方式进行人机交互，因此只针对那些不犯任何错误的专家用户。nGOMS对于任务之间的关系描述过于简单,只有顺序和选择.事实上任务之间的关系还有很多种（具体参见6.1.2节中LOTOS的介绍），另外选择关系通过非形式化的附加规则描述，实现起来也比较困难。nGOMS把所有的任务都看作是面向操作目标的，而忽略了一些任务所要解决的问题本质以及用户间的个体差异，它的建立不是基于现有的

8、认知心理学，无法代表真正的认知过程。 山东大学计算机学院13LOTOS简介 nLOTOS -Language Of Temporal Ordering Specification， T.Bolognesi, H.Brinskma, Introduction to the ISO Specification Language LOTOS”， 1987.n国际标准形式描述语言，无二义性，适于描述具有并发、交互、反馈和不确定性等特点的并发（concurrent）系统中的行为。n开始作为一种描述网络协议的语言，由于交互系统、特别是多通道交互系统有并发系统的特点，因此成为用来描述交互系统的行为模型。山东

9、大学计算机学院14LOTOS基本思想n系统的外部可见行为可以看作是由一个有时序关系的交互序列组成。n系统由一系列进程组成，进程同环境之间通过称为“关口”（gates）的交互点进行交互。n两个以上的进程在执行同一个外部可见的行为时会发生交互操作，进行数据交换、信息传递、协调同步等操作。n进程行为用“行为表达式”来描述，复杂的行为由简单的行为表达式通过表示时序关系的LOTOS算符组合而成。n在将LOTOS思想用于人机交互的行为模型时，用进程之间的约束关系来描述交互子任务之间的关系。 山东大学计算机学院15LOTOS算符LOTOS算符主要有以下几种：T1 | T2（交替Interleaving)T1

10、 T2（选择Choice)T1 | a1,.,an | T2（同步Synchronization)T1 T2 （禁止Deactivation)T1 T2（允许Enabling)山东大学计算机学院16LOTOS实例山东大学计算机学院17中国象棋的LOTOS任务分解实例山东大学计算机学院18LOTOS与GOMS的结合nLOTOS模型很好的描述了任务之间的时序约束关系，这些时序约束关系能更好的描述GOMS中子目标之间的关系。n用GOMS模型描述任务的分解过程，而用LOTOS给出子任务之间的约束关系，这样就可以增加两种表示模型的表示能力。 山东大学计算机学院19结合GOMS和LOTOS的中国象棋程序的

11、行为描述GOAL:中国象棋 : GOAL:运行 |: *GOAL:走棋 ACTION:自动记录棋谱 : GOAL:当前方走 : OPRATOR:拾取棋子 OPRATOR:放置棋子 GOAL:对弈方走 OPRATOR:拾取棋子 OPRATOR:放置棋子 *GOAL:打谱 : OPRATOR:加速 OPRATOR:减速 OPRATOR:暂停 OPRATOR:恢复 GOAL:退出山东大学计算机学院20总结nLOTOS与GOMS结合，可以清楚地了解整个目标层次及各目标之间的约束关系。但与GOMS同样存在无法描述目标异常结束的缺陷，同时当任务进行选择时用什么规则进行选择并未涉及。nLOTOS最大的优越性

12、在于可以构造一套现成的自动化工具，利用这些工具，可自动进行错误检测，但它过于形式化的记法比较晦涩难懂。nGOMS和LOTOS的结合可以很好地描述人机交互的较高级的任务，对于原子任务的形式化描述，上述模型并没有给出一个比较清晰的描述，下面讨论的UAN模型主要用于原子目标的描述。 山东大学计算机学院21UAN模型nUAN-User Action Notation, Hartson et al 1990.nUAN是一种简单的符号语言，主要描述用户的行为序列以及在执行任务时所用的界面物理对象。 n尽管UAN属于一种行为模型，但作为一种任务描述语言，它又涉及一定程度的系统行为的描述，因而它兼有行为模型和

13、结构模型的一些特点。山东大学计算机学院22UAN模型的基本思想n预定义一些标志符：q用户动作标志符q条件标志符n采用一种表格结构来表示任务n界面被分解成一些类似层次结构的异步任务，每个任务的实现都用表格来描述，用户动作的关联性和时序关系由表格的行列对齐关系和从上到下、从左到右的阅读顺序来确定。任务（任务（tasktask）：任务名称（）：任务名称（the name of taskthe name of task）用户行为界面反馈界面状态山东大学计算机学院23UAN预定义的动作标志符（部分）n用户动作标志符：qmove_mouse(x,y) 移动鼠标至(x,y)qrelease_button(x

14、,y)在(x,y)位置释放鼠标按钮；qhighlight(icon) 使icon高亮显示；qde_highlight(icon) 取消icon的高亮显示。 用户动作标志符：X，在某个图形对象上移动鼠标；， 按下鼠标；，释放鼠标；!, 使对象高亮显示； -!， 取消对象的高亮显示 Display,显示图形对象； Erase, 取消显示对象。山东大学计算机学院24UAN预定义的条件标志符（部分）nwhile(condition) TASKq当条件condition为真时，循环执行任务TASK；nif(condition) then TASKq如果条件condition满足，则执行任务TASK；ni

15、teration A* or A+ q表示迭代操作；nwaiting q表示等待，可以等待一个条件满足，也可以等待任务中的一个操作执行。 山东大学计算机学院25UAN实例-单通道交互任务：任务：把文件拖入垃圾箱把文件拖入垃圾箱用户行为界面反馈界面状态mouse_down(x,y) drag_icon(x,y) mouse_up(x,y) then highlight(icon)show_outline(icon)then highlight(bin) then hide(icon) show_bin_full()if intersect(icon,x,y)icon=selected if in

16、tersect(bin,x,y) if intersect(bin,x,y)山东大学计算机学院26UAN实例-多通道任务：任务：drag and drop a file to the recycle bindrag and drop a file to the recycle bin用户行为界面反馈界面状态2D鼠标语音then highlight(icon) show_outline(icon)then highlight(bin) then hide(icon)show_bin_full()if intersect(icon, x,y)icon=selected if intersect(b

17、in,x,y) if intersect(bin,x2,y2)mouse_down(x,y)drag_icon(x,y)mouse_up(x,y)PronounceMove_to+recycle_bin山东大学计算机学院27UAN实例-多通道任务：在桌面上把文件任务：在桌面上把文件A A拖入文件拖入文件B B用户行为界面反馈界面状态2D鼠标语音then highlight(iconA) show_outline(iconA)then highlight(folderB) then hide(iconA)if intersect(iconA, x,y)iconA=selected if inte

18、rsect(folderB,x,y) if intersect(folderB,x2,y2)mouse_down(x,y)drag_icon(x,y)mouse_up(x,y)PronounceMove_to+B山东大学计算机学院28UAN总结nUAN模型更接近于实现，界面状态和界面反馈用一般的程序语言描述，实现起来比较方便，当然这种描述由于接近于程序语言，因此设计时需要一定的编程基础nUAN模型在精确刻画各成分之间的各种平行和串行的时序关系方面尚显不足，任务之间的时序关系没有明确表示出来，当所描述的界面使用多种输入设备和有若干可选交互路径时，比较繁琐。 山东大学计算机学院29层次化的界面描述

19、方法人机交互界面表示模型结构模型界面表示的行为模型和结构模型n行为模型q行为模型是从用户任务和完成目标角度描述界面模型n描述任务或目标n为了完成任务或达到目标所进行的行为序列n结构模型q结构模型从系统组成角度，描述如何通过交互序列完成交互任务。着重描述系统的反应和行为。n从用户角度看，行为模型强调做什么，结构模型强调怎么做结构模型n产生式规则-Production Rulen状态转换网络-State Transition Network产生式规则 n又称为上下文无关文法，将人机交互对话看作是一种语言，运用基于语法的方法来描述交互对话。n产生式集合定义了用户与计算机交互所运用的语言。n产生式规则

20、的一般形式是：qif condition then actionn这些规则可以表示为不同的形式，如qcondition actionqcondition：action 产生式规则n系统不断用产生式规则来检测用户的输入是否与这些条件相匹配。若匹配则激活相应的动作，这些动作可以是执行应用程序的一个过程，也可以是直接改变某些系统状态的值。n一般来说，组成界面描述的产生式规则很多，所有的规则都是有效的，规则定义的顺序并不重要，只要与规则中的条件相匹配，就可以激活相应的动作。n产生式规则系统可以是q事件引导；q状态引导；q混合引导事件引导的系统 n用户在屏幕上绘制直线qSel-line start-li

21、ne qC-point start-line rest-line qC-point rest- line rest-line qD-point rest- line 事件引导的系统n产生式规则的条件和动作部分都以事件的方式进行表示。事件主要有三种类型：q用户事件（user event），Sel-line表示从菜单中选择line命令，C-point 和D-point表示用户在绘图平面上单击和双击鼠标。q内部事件，用于保持对话状态，如start-line 表示开始画线后的状态，rest- line表示选择了第一个点之后的状态。q系统响应事件，以尖括号表示可见或可听的系统响应，如，把菜单项line高

22、亮度显示，表示在屏幕上显示直线， 表示橡皮筋绘制方式打开，表示橡皮筋绘制方式关闭。 事件引导实现方法n保存内部事件序列n构造一个对话控制器，主要负责事件的产生和规则的匹配n规则的匹配算法影响系统的性能状态引导的系统n事件引导的系统中的内部事件，是事件还是状态？n在系统内存保存的不再是动态的随时进出的事件，而是一些表示系统的当前状态的属性，这些属性在不同的时刻有不同的值。状态定义nMouse:mouse-null, select-line, click-point, double-clicknLine-state:menu, start-line, rest-linenRubber-band:r

23、ubber-band-on, rubber-band-offnMenu:highlight-null, highlight-line, highlight-circlenDraw:draw-nothing, draw-line产生式规则nSelect-linemouse-null start-line highlight-linenClick-point start-linemouse-null rest-line rubber-band-onnClick-point rest- linemouse-null draw-linenDouble-click rest-linemouse-null

24、 menu draw-line rubber-band-off混合引导的系统n可以将两者结合起来，采用下面的形式：event: condition action 来描述一个产生式规则。n事件用来激活产生式规则，如果条件不满足，即当前系统内存中的状态和产生式的规则不匹配，则无法激活规则。n当状态改变时，产生式规则中的action本身也可以产生新的事件，从而可以激活另一条规则。 混合引导的系统 n系统有三个属性：qBold: off, onqItalic: off, onqUnderline:off, on混合引导系统的产生式nselect- bold:Bold = off Bold = onns

25、elect- bold:Bold = on Bold = offnselect-italic: Italic = off Italic = onnselect-italic: Italic = on Italic = offnselect-under:Underline = off Underline = onnselect-under:Underline = on Underline = off产生式规则总结n描述操作时序能力强，并发顺序均可n无法描述误操作n界面复杂时，状态、事件复杂，产生式过多，要求产生式匹配算法性能高状态转换网络n状态转换网络（STN）的基本思想是定义一个具有一定数量状

26、态的转换机，称之为有限状态机-Finite State Machine(FSM)。nFSM从外部世界中接收到事件，并能使FSM从一个状态转换到另一个状态。n这里介绍两种最基本的状态转换网络，状态转换网络（State Diagrams）和扩展状态转换网络(State Charts)，后者是前者的一个扩展。传统的状态转换网络n当发生一个外部或内部事件时，系统就会从一个状态转换到另外一个状态，这称为状态转换。q外部事件主要由用户操作外部输入设备来产生。q内部事件可以是系统产生的事件，如时钟事件，也可以是为了改变系统的状态和行为而产生的事件，如当一个任务完成后可以激活另一个任务等。n一个状态转换与一对

27、状态相关联。n一般的系统具有很多个状态，假设系统由n个状态组成，状态之间的转换最多可能有n*(n-1)个。n简单的三状态FSMq最多可能有6个状态转换带条件和动作的状态转换n选项条件(conditions)，表示导致状态的改变的条件；n选项动作(actions)，表示系统在改变状态时将执行什么动作。带条件的状态转换实例带条件的状态转换实例n基于鼠标的画图工具draw circle单击在圆周上rubber band单击在中心点highlight circle选择 circle Circle1MenuFinish Circle2draw line双击rubber band单击在第一点highlig

28、ht line选择 lineLine1Finish Line2传统状态转换模型的优缺点n状态转换网络的优点q比相应的文本解决方案更易于设计、理解、修改和文档化q它给出了对行为的精确的、甚至是格式化的定义。n存在着一定的局限性q最大的缺陷是需要定义出系统的所有状态，这对于小型的系统是没有问题的，但是在一个较大的系统中，系统会很快崩溃q状态的数目是呈指数级增长的，同时状态的增长直接导致了状态转换网络过于复杂、无法实际应用。 扩展状态转换网络弹出 graphics子菜单选择 graphics主菜单 graphics 子菜单弹出text 子菜单选择 text text 子菜单弹出 paint 子菜单选

29、择 paint p a i n t 子 菜 单山东大学计算机学院53带有取消功能的状态转换图弹出 graphics子菜单选择 graphics主菜单 graphics 子菜单弹出text 子菜单选择 text text 子菜单弹出 paint 子菜单选择 paint p a i n t 子 菜 单ESC正常完成正常完成正常完成ESCESC山东大学计算机学院54带有帮助功能的状态转换按下HELP按钮按下HELP按钮从菜单出发draw circle单击在圆周上rubber band单击在中心点Circle1Finish Circle2帮助子系统帮助子系统状态转换模型的优缺点n优点q具有良好的描述串

30、行和顺序行为的能力q比相应的文本解决方案更易于设计、理解、修改和文档化q它给出了对行为的精确的、甚至是格式化的定义n缺点q状态的爆发式增长问题q并发及其他行为的描述能力差q虽然是一个结构模型，但难以实现行为模型和结构模型的转换 转换算法 行为模型(G-U-L) 结构模型State ChartsGOMSUANLOTOS约束规则用户D o m a i n ExpertDesigner 模型转换整体框架山东大学计算机学院57模型转换整体框架 n整个框架分为三个部分：q行为模型使用G-U-L模型，在这一层将产生一个基本的预测性的行为模型。 q结构模型采用层次状态转换网络，它涉及到的元素有状态、转换、事

31、件、层次结构。不考虑状态转换网络在转换中条件和同步，可以简化转换工作。 q用户包含两种用户，领域专家和设计者。G-U-L模型的创建主要是由领域专家和设计者合作来完成的，然后通过模型转换算法转换成为结构模型，最后提供给设计者使用。 山东大学计算机学院58转换算法 n1.基本思想 n2.基本步骤 n3.实例应用 山东大学计算机学院591.基本思想 n采用G-U-L以层次化结构对任务进行建模，包括目标（包括循环属性）、行为、关系。n状态转换网络表示的是状态之间的转换，也采用层次化表示，涉及到的主要是状态、转换、事件、行为。n在G-U-L中体现的层次关系转换到状态转换网络中也体现出层次的关系，G-U-

32、L中的每个目标都对应一个状态转换网络。n如果一个目标下层有子目标，对子目标来说，它所对应的状态网络应该嵌套在上层目标对应的状态网络中。 山东大学计算机学院601.基本思想n在产生的状态转换网络中，有两类事件起作用：q一类是外部由用户激活的事件，如“按下鼠标” 事件、“点击键盘” 事件等；q另一类是内部由目标产生的内部事件，这里只定义了“目标正常结束”，表示目标正常结束时产生的事件。q在进行从G-U-L到状态的转换时，这些事件只是形式上的一个定义，没有具体的实现过程，如要在某一层出现的第i个外部事件用“外部事件i”来代替，而由某个目标Ti执行时产生的内部事件也仅仅用类似于“Ti正常结束事件”来表

33、示，q而具体的事件还需要由状态网络进行，系统实现时通过专门的事件管理器来定义和管理。 q对G-U-L中的行为在转换后就成为对应的状态转换网络中的一个行为。 山东大学计算机学院61 事件产生过程G产生“G正常结束”事件S0F图 中描述了一个目标层次中产生事件的过程。山东大学计算机学院622.基本步骤n对转换后的数据，存储的是状态转换网络中表示转换的弧，如下图所示： 状态转换网络中弧的表示结构 n其中的触发事件就是触发从出发状态到目的状态转换的事件；n父状态表示的是当前弧所在状态网络的上层状态，可以是一个抽象出来的状态名；出发状态目的状态触发事件父状态行为山东大学计算机学院632.基本步骤n转换基

34、本步骤q（1）读取存储G-U-L模型的数据文件，进行解析，定义一个数组stn用于存储状态网络中的弧。获取G-U-L模型中的最高目标，设为G0，然后调用(2)中的Translate函数，在Translate执行完毕后，stn中便存储了转换后的状态网络的数据。函数示意如下：main()定义一个存储弧的数组stn读取G-U-L文件GOAL G0”: 允许关系处理 case “|”: 交替关系处理 case “”: 禁止关系处理 /对所有的子目标进行递归调用 for(int I;I(G0,G1)，在这种关系中完成目标G的路径只有一条，当G0成功结束后才允许G1执行，这是一个顺序执行的过程。n在转换成状

35、态转换网络后如图6-17所示。 图6-17 允许”关系状态网络G1正常结束事件G0正常结束事件外部事件S1S2S0产生G正常结束事件“允许”关系状态网络G2正常结束事件G0正常结束事件外部事件S1S3S0产 生 G正常结束事件S2G1正常结束事件n(G0，G1，G2)山东大学计算机学院72n从状态S0在外部事件激发转换至S1，在S1状态等待“G0正常结束事件”发生后转换至S2；然后在S2处等待“G1正常结束事件”转换至S0，这样表示目标G执行完毕，同时发生动作“产生G正常结束事件”，处理转换过程中存储所有的弧。这种约束关系允许同一层次下有多个目标存在，如(G0,G1,Gn)，这些目标都是顺序执