山东大学：《人机交互技术》课程教学资源（PPT课件讲稿）第6章 人机交互界面的表示模型与实验（2/3）

人机交互界面表示模型 1)行为模型：该模型主要从用户和任务的角度考虑 如何来描述人机交互界面。 2)结构模型：该模型主要从系统的角度来表示人机 交互界面。本节将重点介绍产生式规则和状态转换网 络。 3)模型转换：主要介绍行为模型到结构模型的转换 4)表现模型：主要介绍人机界面表现的具体描述方 法。 SHANDONG UNIVERSETY

人机交互界面表示模型 ◼ 1）行为模型：该模型主要从用户和任务的角度考虑 如何来描述人机交互界面。 ◼ 2）结构模型：该模型主要从系统的角度来表示人机 交互界面。本节将重点介绍产生式规则和状态转换网 络。 ◼ 3）模型转换：主要介绍行为模型到结构模型的转换 。 ◼ 4）表现模型：主要介绍人机界面表现的具体描述方 法

课程目标 掌握表现模型 ·了解界面描述语言 山求水器 SHANDONG UNIVERSETY

课程目标 ◼ 掌握表现模型 ◼ 了解界面描述语言

表现模型 表现模型(PM描述了用户界面的表现形式，由层次 性的交互对象组成。 o交互对象一般由抽象交互对象(AIO-Abstract Interactive Object)和具体交互对象(ClO-Concrete Interactive Object)组成。 管理信息系统的交互界面：填表界面 界面元素：界面元素属性，对几何对象、内容对象、绘制对 象的描述 面板：界面元素的模型定义+界面元素的列表和布局的定义 XML描述 山东大学计算机学院 SHANDONG

山东大学计算机学院 4 表现模型 ◼ 表现模型(PM)描述了用户界面的表现形式，由层次 性的交互对象组成。 ❑ 交互对象一般由抽象交互对象(AIO - Abstract Interactive Object)和具体交互对象(CIO - Concrete Interactive Object)组成。 ❑ 管理信息系统的交互界面：填表界面 ◼ 界面元素：界面元素属性，对几何对象、内容对象、绘制对 象的描述 ◼ 面板：界面元素的模型定义+界面元素的列表和布局的定义 ◼ XML描述

面板用户界面逻辑组织结构 可X Desktop B A Cx Cy Cx Cy B 8. By (a)面板用户界面的图形显示 (b)面板用户界面的数据结构表示 (c)面板用户界面的绘制 森林的结构 每棵树是一个面板 口叶结点是单位界面元素对象 山求水器 SHANDONG UNIVERSETY

面板用户界面逻辑组织结构 ◼ 森林的结构 ❑ 每棵树是一个面板 ❑ 叶结点是单位界面元素对象 B C A Bx By Bz Cx Cy Cz (a)面板用户界面的图形显示 (b)面板用户界面的数据结构表示 (c)面板用户界面的绘制

·靠链表的头部越近，在屏幕上显示的排列顺序越靠前 口Eg:选中了面板C 面板A 面板B 面板C 面板D (a) 面板A 面板B 面板D (6) 面板C ⊙ 面板C 面板A 面板B 面板D (c) SHANDONG UNIVERSETY

◼ 靠链表的头部越近，在屏幕上显示的排列顺序越靠前 ❑ Eg:选中了面板C (a) (b) (c) 面板 A 面板 B 面板 C 面板 D 面板 A 面板 B 面板 C 面板 D 面板 C 面板 A 面板 B 面板 D

面板内部的事件分发及响应方式 指点设备事件的响应 当鼠标落在了An和By的相交的图形表示区域时--> 搜索当前面板链表中的面板，判断鼠标是否落在了某一面板内部，发现鼠 标落在了面板A内--> 事件处理中心采用树的广度优先搜索算法或是深度优先搜索算法，判断鼠 标是否落在了面板A中某一界面元素交互对象内部，发现鼠标指针的位置 在交互对象An区域内部--> 检验An是否添加了对鼠标事件的监听 Am 如果An存在对鼠标事件的监听， 那么去完成事件要执行的任务 SHANDONG UNIVERSETY

面板内部的事件分发及响应方式 ◼ 指点设备事件的响应 ❑ 当鼠标落在了An和By的相交的图形表示区域时-----> ❑ 搜索当前面板链表中的面板，判断鼠标是否落在了某一面板内部，发现鼠 标落在了面板A内-----> ❑ 事件处理中心采用树的广度优先搜索算法或是深度优先搜索算法，判断鼠 标是否落在了面板A中某一界面元素交互对象内部，发现鼠标指针的位置 在交互对象An区域内部-----> ❑ 检验An是否添加了对鼠标事件的监听， 如果An存在对鼠标事件的监听， 那么去完成事件要执行的任务 A B By Bx Am An

用户产生了一个动作后，事件处理中心就获得了用户 的动作和屏幕上的一个坐标仪，y)。 0 使用链表搜索算法遍历链表中每个节点{ f(坐标落在了某个面板区域内部{ 显示该面板及面板内包含的所有界面元素，其余面板按照原来的先后顺序排列； 使用树的搜索算法遍历面板内的每个的单位界面元素{ if(坐标落在了某个单位界面元素的区域内部)then{ if(Succeed(聚焦并激活单位界面元素)X if(选中的单位界面元素添加了特定事件的响应)then{ 将控制权交给单位界面元素交互对象，执行该事件要执行的任务，返 回 } 口 所有面板失去焦点，聚焦到系统要显示的默认界面； SHANDONG UNIVERSETY

◼ 用户产生了一个动作后，事件处理中心就获得了用户 的动作和屏幕上的一个坐标(x, y)。 ❑ 使用链表搜索算法遍历链表中每个节点 { ❑ if (坐标落在了某个面板区域内部) { ❑ 显示该面板及面板内包含的所有界面元素，其余面板按照原来的先后顺序排列； ❑ 使用树的搜索算法遍历面板内的每个的单位界面元素 { ❑ if (坐标落在了某个单位界面元素的区域内部) then { ❑ if(Succeed(聚焦并激活单位界面元素)){ ❑ if (选中的单位界面元素添加了特定事件的响应) then { ❑ 将控制权交给单位界面元素交互对象，执行该事件要执行的任务，返 回； ❑ } ❑ } ❑ } ❑ } ❑ 所有面板失去焦点，聚焦到系统要显示的默认界面； ❑ }

面板间的关系 基于面板的用户界面表现模型 Presentation Unit Logical Window(LW):任 1-n 意AIO的组合，一个物理窗 口、子窗口区域、对话框和 Logical Window 面板。 1-n Presentation Unit (PU):- 个PU被定义为一个完整的 Comp osite AIO 表现环境需要实现一个特定 的交互任务。 1-n 0-n 0 每个PU可以分解为一个或许多 Simple AIO 同时、交替或是以某种组合的 形式在屏幕上显现的LW。每 is a can be composed of 个PU至少存在一个主窗口，允 --> 0n= 零到多 许其它窗口导航。 1-n=一到多 SHANDONG UNIVERSETY

面板间的关系 ◼ Logical Window (LW)：任 意AIO的组合，一个物理窗 口、子窗口区域、对话框和 面板。 ◼ Presentation Unit (PU)：一 个PU被定义为一个完整的 表现环境需要实现一个特定 的交互任务。 ❑ 每个PU可以分解为一个或许多 同时、交替或是以某种组合的 形式在屏幕上显现的 LW。每 个PU至少存在一个主窗口，允 许其它窗口导航。 0-n 0-n 0-n 0-n = is a = can be composed of 0-n = 零到多 1-n = 一到多 Presentation Unit Logical Window Comp osite AIO Simple AIO 1-n 1 - n 1- n 1 - n 1- n 1-n 基于面板的用户界面表现模型

面板间的关系 面板关系 并列面板 嵌套面板 依赖面板 父子面板 依赖于服务的面板 自动显现 用户驱动 山求方器 SHANDONG UNIVERSETY

面板间的关系 面板关系 并列面板 嵌套面板 依赖面板 父子面板 依赖于服务的面板 自动显现 用户驱动

面板间的关系 并列关系：两个面板在功能上独立的，没有任何其他关 系。 嵌套关系：面板A在面板B的内部，面板A包含面板B。 依赖关系分为两种 一种是界面内部的依赖，即父子关系的面板，父子关系是指 面板B依赖于面板A的某个界面元素开启显现活动的命令开关 ,这样，就称面板A是面板B的父面板。 对服务的依赖，即分布式应用中的面板。触发窗口是指面板 依赖于某个服务的存在而显现 SHANDONG UNIVERSETY

面板间的关系 ◼ 并列关系:两个面板在功能上独立的，没有任何其他关 系。 ◼ 嵌套关系:面板A在面板B的内部，面板A包含面板B。 ◼ 依赖关系分为两种， ❑ 一种是界面内部的依赖，即父子关系的面板，父子关系是指 面板B依赖于面板A的某个界面元素开启显现活动的命令开关 ，这样，就称面板A是面板B的父面板。 ❑ 对服务的依赖，即分布式应用中的面板。触发窗口是指面板 依赖于某个服务的存在而显现