人机交互与界面设计材料

第 6 章 人机交互界面表示模型 Task 中国象棋对弈中国象棋对弈 GOAL 中国象棋 GOAL 运行 GOAL 走棋 ACTION 自动记录棋谱 GOAL 当前方走 OPRATOR 拾取棋子 OPRATOR 放置棋子 GOAL 对弈方走 OPRATOR 拾取棋子 OPRATOR 放置棋子 GOAL 打谱 OPRATOR 加速 OPRATOR 减速 OPRATOR 暂停 OPRATOR 恢复 GOAL 退出 图 6 1 中国象棋分解图 运行 中国象棋 退出 走棋 打谱 当前方走对弈方走 拾取棋子放置棋子 加 速 减 速 暂 停 恢 复 第 6 章 人机交互界面表示模型 表 6 5 UAN 描述的任务 文件拖入垃圾箱 的多通道实例 6 1 4 任务模型任务模型 ConcurTaskTrees任务模型表示法 Concurrent Task Tree Notation 12 13 它是一种基 于图形符号的 采用层次的树状结构来组织并表示任务模型的方法 下面首先介绍 ConcurTaskTrees中任务种类和暂态关系的含义及其图形符号 任务 任务 drag and drop a file in the recycle bin 用户行为界面反馈界面状态 2D 鼠标语音 Mouse down x y drag icon x y mouse up x y Pronouce Move to recycle bin then highlight icon show outline icon then highlight bin then hide icon show bin full if intersect icon x y icon selcted if intersect bin x y if intersect bin x2 y2 第 6 章 人机交互界面表示模型 1 任务分析任务分析 任务分析是一个以人们的行为为出发点的分析过程 它分析人们完成任务的方法 他 们要做的事 要起作用的事和想要知道的事 1 任务分析的一个重要方法是任务分解 即需要考察将一项任务分成为若干子任务的途 径以及这些子任务执行次序的方法 任务分解使得任务的执行过程层次化 即一个任务的 执行被委托给它下一层的子任务来完成 这些子任务之间的关系及其执行的顺序成为了解 一个任务执行过程的重点 考虑一个用户交互过程 对其进行任务分析的目的和重点在于得到交互任务及其子任 务的一个层次体系 以及一些描述子任务执行的顺序和条件的解决方案 1 这个方案必须 能够恰当地捕获用户的交互意图 能够如实地反映交互过程 并把它准确地表达出来 同 时它不能曲解交互过程下蕴涵的业务要求 这样一个层次体系以及方案就是一个任务模型 表达越准确 则由任务模型生成的用 户界面越能够越贴近实际的交互需求 符合一般的交互习惯 同时不会改变业务规则 2 任务的种类 在ConcurTaskTrees任务表示法中 依据任务的抽象层次和任务执行过程中参与角色的 不同 对任务的类型进行了归类 总共提供了5种记号 分别代表不同种类的任务 1 抽象任务 抽象任务 Abstract Task 代表一个复杂抽象的任务 通常用来表示由其 它种类的任务任意组合而成的任务 2 用户任务 用户任务 User Task 代表一个只能有用户参与的任务 通常用来表 示和用户感知或者认知行为相关的任务 例如 用户阅读系统的反馈的信息提示 然后决 定下一步的操作 3 交互任务交互任务 Interaction Task 代表执行过程中需要用户与系统进行交 互的任务 例如用户在线注册填写面板 4 系统任务系统任务 Application Task 代表由系统来执行而不需要用户参与交 互的任务 例如 系统处理用户提交的注册信息 然后将处理结果显示给用户 3 暂态关系符号 ConcurTaskTrees任务模型表示法定义了丰富的暂态关系用以表示任务之间在执行过程 的相互联系和制约作用 这些关系都有相应的图形符号 1 Choice t1 t2 tn 从任务t1 t2 tn之中选择一个且只能选择一个执行 且在一次执行过程中 一旦 选定了一个任务则其它任务将不能被执行 2 Concurrent Independent Concurrency t1 t2 tn 第 6 章 人机交互界面表示模型 任务t1 t2 tn可以并发的执行 任务之间的执行开始和结束没有任何的限制 3 带信息交换的带信息交换的Concurrent t1 t2 tn 任务t1 t2 tn可以并发的执行 而且允许任务之间进行信息交换 4 Disabling t1 t2 一旦任务t2 开始执行 则中断并终止任务t1的执行 5 Enabling t1 t2 tn 任务t1 t2 tn必须按顺序执行 且任务ti 1不能开始执行直到ti已经执行完成 对于 i 1 2 n 1 6 带信息交换的带信息交换的Enabling t1 t2 tn 任务t1 t2 tn必须像Enabling关系那样按顺序执行 而且允许任务之间进行信息交 换 7 Independence t1 t2 任务t1和t2 可以按任意的顺序执行 但当一个开始执行后 另一个任务则不能开始执行 除非已经开始的任务执行完成 4 单用户任务模型 单用户任务模型在ConcurTaskTrees中表示为一棵树 如图1 1所示的任务模型 表示了 用户使用自动取款机 ATM 的过程 该模型出自CTTE的一个示例 在模型中 树中的每个节点代表一个任务 任务可以被分解为更为具体的子任务 并 用该节点的子节点来表示 根节点代表的任务抽象层次最高 叶子节点代表的任务最为具 体 拥有相同父节点的兄弟节点之间的关系由暂态关系符号来表示 暂态关系符号决定了 兄弟任务在某个时刻的相互之间的制约关系 并且决定了这组任务所能有的执行顺序 如 前面所述 任务还具有不同的种类 以示区别不同任务执行过程中参与的角色的不同 以及对交 互要求的高低 如前面所述 第 6 章 人机交互界面表示模型 例如 在该模型中 抽象任务EnableAccess被分解为三个具体的子任务 InsertCard RequirePassword InsertPassword 这三个任务在Enabling关系的限定下必须 顺序执行 交互任务InsertCard和InsertPassword需要用户和系统进行交互 而系统任务 RequirePassword则不需要用户的参与 基于任务表示目前已有相应的基于模型驱动的用户界面生成工具用于自动界面的生成 如 CTTE TERESA和Dygimes 他们采用任务模型作为输入 支持由任务模型生成用户界 面 1 CTTE TERESA环境 CTTE ConcurTaskTrees Environment 10 14 25 是一个集成了设计 编辑 测试 分 析和调试ConcurTaskTrees任务模型等功能于一体的环境 如图1 2所示 它由CNUCE的HCI 小组开发实现 最初被用于测试ConcurTaskTrees任务模型表示法 后来被广泛用于 ConcurTaskTrees的设计和分析中 TERESA Transformation Environment for interactive Systems representAtions 20 26 是一个由CTTE衍生出的工具 它支持基于ConcurTaskTrees任务模型生成适应跨平台要求 的用户界面 利用TERESA由任务模型生成用户界面 需要经历以下几个步骤 首先利用CTTE设计 构建ConcurTaskTrees任务模型 然后基于此模型生成针对特定平台的系统任务模型 System Task Model 以适应特定平台的要求 然后基于系统任务模型生成活动任务集 Enabled Task Sets ETS 再由ETS得到表现任务集 Presentation Task Sets PTS 这 是可以同时映射到用户界面上的一组任务 然后再由表现任务集生成抽象用户界面 Abstract User Interface AUI 和具体用户界面 Concrete User Interface CUI 2 Dygimes原型系统 第 6 章 人机交互界面表示模型 Dygimes系统 Dynamically Generating Interfaces for Mobile and Embedded Systems 21 27 如图1 3所示 是另一个基于模型驱动的用户界面生成系统 主要面向于嵌入式系 统和移动计算设备的用户界面 第 6 章 人机交互界面表示模型 AC1 AC2AC3 AC4 AC6AC7AC8AC9 AC10AC11 AC12 AC5 Line1 Line2Line3 Line5 Line4 Line6 Line7 Line8 Line9 Line10 Line11Line12 Line13 Line14 初始 状态 循环 第 6 章 人机交互界面表示模型 6 2 结构模型结构模型 上一节介绍了用任务分析或用户行为的方法描述人机对话的过程 本节主要介绍用结 构化的方法来描述人机交互的一般过程 重点讨论状态转换网络及其扩展方式 它是一种 图示化的结构 在本节的最后 简单地介绍了形式化语言的描述 产生式规则 这种结 构的方法从理论上可以引导界面设计者及界面工具的设计者进行有效的设计 6 2 1 产生式规则产生式规则 产生式规则是一种形式化语言 这些规则可用于描述人机交互界面 产生式规则的一 般形式是 if condition then action 这些规则可以表示为不同的形式 如 condition action condition action 所有的规则都是有效的 并且系统不断用它来检测用户的输入是否与这些条件相匹配 若匹配则激活相应的动作 这些动作可以是执行应用程序的一个过程 也可以是直接改变 某些系统状态的值 一般来说 组成界面描述的产生式规则很多 规则定义的顺序并不重要 只要与规则 中的条件相匹配 就可以激活相应的动作 产生式规则系统可以是事件引导的 也可以是 状态引导的 或者两者都有 1 事件引导的系统事件引导的系统 考虑下面的产生式集合 实现用户在屏幕上绘直线 Sel line start line C point start line rest line C point rest line rest line D point rest line 此例中产生式规则的条件和动作部分 都以事件的方式进行表示 形式上都比较简单 当然支持复杂的交互任务的产生式规则可能要复杂的多 事件主要有三种类型 用户事件 user event Sel line 表示从菜单中选择 line 命令 C point 和 D point 表示用户在绘图平面上单击和双击鼠标 内部事件 用于保持对话状态 如 start line 表示开始画线后的状态 rest line 表 示选择了第一个点之后的状态 系统响应事件 以尖括号表示可见或可听的系统响应 如 把 菜单项 line 高亮度显示 表示在屏幕上显示直线 表示橡皮筋绘制方式打开 表示橡皮筋绘制方式关闭 在上面的产生式规则中 第一条规则表示选择画线命令后 系统状态进入了开始画线 状态 接着把 line 菜单项高亮度显示 第二条规则表示 用户在开始画线状态时 在绘图 区域单击鼠标则系统表示已定义了一个点 此时橡皮筋绘图方式打开 第三条规则表示在 定义了一个 或多个 点后 用户单击鼠标可以连续地定义点 第四条规则表示双击鼠标 则结束画线的交互过程 对话控制由一块系统内存专门存放一系列的事件 如果来自用户的事件与系统内存中 第 6 章 人机交互界面表示模型 内部事件合并后与某条产生式规则匹配 则激活该条规则 所有与用户相关的事件都由对 话控制根据输入设备的动作来产生相应的用户事件 如用户单击了一下鼠标 则用户事件 如鼠标单击 被加入内存 系统响应如被调出并根据显示控制器做出相应 的动作 若某个规则被激活 则与该条件相吻合的所有事件都被从系统内存中删除 并加入相 应的动作事件 例如 若用户选择了 Line 则用户事件 Sel line 加入到系统内存 这就是 说第一条规则被激活 Sel line 事件被从系统内存中删除 并代之以 start line 和 最后 显示控制器删除并完成一个显示动作 这时只有 start line 事件留在系统内存中 只有用户做其它动作才能激活其它规则 对话控制主要负责事件的产生和规则的匹配 可以看到在每一时刻系统内存中会保存 一些内部事件 当产生一个事件时 可能是用户事件 如单击鼠标 也可能是内部事件 如时钟事件等 对话控制就要将所有的产生式规则与事件集合进行匹配 这个过程是复 杂的而且是耗时的 当产生式很多并且产生式规则的条件复杂时 匹配算法的效率就显的 更为重要 因此需要设计好的数据结构和匹配算法来提高匹配规则的效率 例如可以将规 则和事件进行分组和分层 2 状态引导的系统状态引导的系统 状态引导的系统与事件引导的系统有很大的不同 在系统内存保存的不再是动态的随 时进出的事件 而是一些表示系统的当前状态的属性 这些属性在不同的时刻有不同的值 在上面的例子中 为了实现画线的操作 系统有下面五个属性 Mouse mouse null select line click point double click Line state menu start line rest line Rubber band rubber band off rubber band off Menu highlight null highlight line highlight circle Draw draw nothing draw line 第一个特征 Mouse 有 4 个不同的状态 mouse null 鼠标空闲 select line 选择线命 令 click point 单击鼠标 double click 双击鼠标 当用户对鼠标进行操作时 Mouse 自动设置成相应的状态 第二个特征 Line state 用于保持当前会话的状态 分别是 menu 可选命令状态 start line 开始绘制线 rest line 已经定义点 后三个属性用于 控制系统响应 其中 Rubber band 表示橡皮筋绘制的开和关状态 Menu 表示任何项也没有 选中 highlight null 选中绘直线命令 highlight line 或选中绘圆命令 highlight circle Draw 表示什么也不画状态 draw nothing 或画直线状态 draw line 显示控制器根据上 面的状态做出相应的显示控制 状态引导的系统的产生式规则有点类似前面介绍的事件引导的产生式规则 但也有不 同 如下所示 Select line mouse null start line highlight line Click point start line mouse null rest line rubber band on Click point rest line mouse null draw line Double click rest line mouse null menu draw line rubber band off 当产生式规则的条件和状态匹配时将激活该产生式规则 对于某一特定的属性 如果 前面的状态需要改变成新的状态时才需要在产生规则的后面标注 例如 在第二条规则中 规则指定 Line state 属性应设置成 rest line 因为原来的 start line 值将丢失 而在第 三条规则中 没有提及 rest line 值 因为它已默认 Line state 属性的值继续保留为 rest line 第 6 章 人机交互界面表示模型 属性的永久特性有时会引起一些奇怪的错误 因此在上述的规则集中 每一条产生式 规则都要求将鼠标的状态设置为 mouse null 否则 当用户单击了鼠标 激活了第二 条规则 如果不立即将鼠标的属性设置为 mouse null 则会立即激活第三条规则 此时系 统的状态和第三条规则的条件是匹配的 并且会反复的一直执行下去 3 混合引导系统混合引导系统 从产生式规则处理的简单性来考虑 要么使用单一的事件引导的系统 要么使用单一 的状态引导的系统 从上面的实例中可以看到 有的对话过程比较适合于事件引导方式 有的对话过程适合于状态引导方式 当然也可以将两者结合起来 例如采用下面的形式 event condition action 来描述一个产生式规则 事件用来计划产生式规则 如果条件不满足 即当前系统内 存中的状态和产生式的规则不匹配 则无法激活规则 另外当状态改变时 产生式规则中 的 action 本身也可以产生新的事件 从而可以激活另一条规则 使用产生式系统可以较容易地表示并发的对话元素 即在某个时刻同时有几个事件发 生 激活不同的产生式规则 下面的例子使用混合的事件 状态产生式系统描述如图 6 2 所 示的粗体 斜体 下划线对话框 系统有三个属性 根据用户点击鼠标的位置不同 可 能产生三个事件 select bold select italic select under 该对话过程有下面六个产生 式规则定义 select bold select under Bold on select bold Bold on Bold off select italic Italic off Italic on select italic Italic on Italic off select under Underline off Underline on select under Underline on Underline off 这些规则描述得非常仔细 与状态转换网络不同 规则的数目线性的增加 如果有 n 个转换开关 则会产生 n 个规则 可以通过增加下列规则 escape key reset action 来简单的处理 Esc 键 这里 reset action 的作用是设置所有的状态为初始状态 因为给 规则的激活条件是空 所以在对话的任何时候 用户按 Esc 对话都回到初始状态 当然 这样只是一种简单的处理方式 实际的交互系统对 Esc 键的处理要复杂的多 产生式规则比较适合于描述并发的操作 而对于顺序的对话就不太适合 如在上面的 绘制连续折线的实例中 为了追踪顺序的操作 用一个状态变量来表示操作的步骤 这种 顺序对话的描述既难于分析也显得比较笨拙 Bold off on Italic off on Underline off on 图 6 2 粗体 斜体 下划线对话框 文本样式 加加粗粗 斜体 下划线 第 6 章 人机交互界面表示模型 6 2 2 状态转换网络状态转换网络 状态转换网络 STN 的基本思想是定义一个具有一定数量的状态的转换机 称之为 有限状态机 FSM FSM 从外部世界中接收到事件 并能使 FSM 从一个状态转换到另一个 状态 这里介绍两种最基本的状态转换网络 状态转换网络 State Diagrams 和扩展状态 转换网络 State Charts 后者是前者的一个扩展 因此详细的介绍后者 6 2 2 1 传统状态转换网络传统状态转换网络 状态转换网络的主要组成部分是状态和代表状态改变和转换的箭头 状态转换网络实 际上是一个有向图 图的节点代表状态 图中的有向边代表一个状态到另一个状态的转换 交互任务在状态转换网络中表现为从任务的起始状态 经过一系列中间状态的转换 达到 任务结束的状态这样一个完整转换路径上的状态转换序列 状态可以用不同类型的图形符号表示 包括圆 矩形 圆角矩形等 不同的符号代表 不同的状态 如用圆角矩形来表现系统的状态 如图 6 3 所示系统状态转换网络符号 图 6 3 状态转换网络符号 状态可以定义为在给定时间 方法和行为的情况下 与用户环境相关的一组环境变量 或属性集 状态转换网络则用于图形化地显示状态以及任何时刻在状态之间发生的交互 如图 6 4 所示的简单状态转换网络 包括一个源状态 一个目标状态 以及这两个状态间 的转换 图 6 4 简单状态转换网络 当发生一个外部或内部事件时 系统就会从一个状态转换到另外一个状态 这称为状 态转换 外部事件主要由用户操作外部输入设备来产生 内部事件可以是系统产生的事件 如时钟事件 也可以是为了改变系统的状态和行为而产生的事件 如当一个任务完成后可 以激活另一个任务等 一个状态转换与一对状态相关联 一般的系统具有很多个状态 两个状态之间可以存在一个状态转换 假设系统由 n 个 状态组成 状态之间的转换最多可能有 n n 1 个 如图 6 4 所示的状态转换网络中有 3 个状态 因此最多可能有 6 个状态转换 事实上一般系统状态中状态转换数要远远小于最 多状态转换数 如图 6 4 中只标出了 4 个状态转换 图 6 5 简单的三状态 FSM 在状态转换网络中 如果两个状态 A 到状态 B 不存在状态转换 则说明由状态 A 在 任何情况下都不能转换到 B 如图 6 5 中状态 3 可以转换到状态 1 但不可能转换到状态 2 而状态 1 可以转换到状态 2 但不能直接到状态 3 在实际的系统中 由于交互任务比 较多 而且每个交互任务相对可能比较复杂 组成系统的状态很多 可能有几百个 甚至 状态 源状态目标状态 转换 状态 1状态 2状态 3 第 6 章 人机交互界面表示模型 能达到上千 上万个状态 状态转换的数目就更多了 基本状态转换网络中的状态转换仅描述了发生一个事件而使系统从一种状态转换成另 一种状态 但是并没有说明这种转换需要的条件 即当在某一状态时 什么条件可以允许 产生这样的转换 另外当系统在改变状态时将执行什么动作 如进行相应的业务处理 驱 动外部设备等 也没有说明 为了能更完整的描述这两种情况 可以在描述状态转换时增 加两个额外的选项 选项条件 conditions 表示导致状态的改变的条件 选项动作 actions 表示系统在改变状态时将执行什么动作 带条件和动作的状态转换网络如图 6 6 所示 图 6 6 带条件和动作的状态转换网络 现在来分析一下带条件的状态转换网络 当系统在某一种状态时 S 时 如果满足条件 C1 系统将发生状态转换 T1 而转换到状态 E1 当满足条件 C2 系统发生状态转换 T2 而转换到状态 E2 如图 6 7a 所示的条件转换网络 现在将条件 C1 C2 和状态融合 则得到如图 6 7b 所示的基本的状态转换网络 从这里可以看到 带条件的状态转换网络是 将状态中表示触发条件的部分抽取出来 这样可以大大减少状态的数量 而条件触发实现 时还是比较方便的 但在实现时还要增加对触发条件的管理 下面给出一个关于传统状态转换网络的实例 图 6 8 中是一个基于鼠标画图工具 图中 涉及到了状态 转换 条件 动作等元素 它有一个菜单 有三个选项 arc 和 line 和 curve 和一个绘图平面 若选择 arc 则要求你确定三个点 第一个点是圆心 第 二个点表示圆弧的起点 第三个是圆弧的重点 第一个点确定后 系统就在圆心和当前鼠 标位置之间画一条 橡皮圈 线 第二个点确定后就根据圆心位置和圆弧起点和鼠标画出 一个橡筋圆弧 确定第三个点后绘制出了一个圆弧 源状态目标状态 条件 动作 图 6 7a 带条件的状态转换网络 T2 C2 T1 C1 S E1 E2 图 6 7b 带条件的状态转换网络 S C1 S C2 E1 E2 第 6 章 人机交互界面表示模型 AC1 AC2AC3 AC4 AC6AC7AC8AC9 AC10AC11 AC12 AC5 Line1 Line2Line3 Line5 Line4 Line6 Line7 Line8 Line9 Line10 Line11Line12 Line13 Line14 初始 状态 循环 line 选项是画直线 polyline 也就是说 用户可以选择任意点 然后系统将其连接成 直线 双击鼠标确定最后一个点 在连续的鼠标点之间由 橡皮圈 相连 curve 选项是 绘制多点曲线 用户可以选择多点 用这些点做控制点绘制多点的曲线 绘制结束后都汇聚到系统的结束状态 系统应用过程中一般会有两种情况 一种是当 命令结束时 进入开始状态 图中所示的情况 另一种情况是当命令结束是 会重复原来 的命令 这种情况就会从各自的结束状态直接进入选择命令的状态 图中所示的虚线表示 的情况 每个圆角矩形表示一种状态 如 Menu 表示系统正在等待用户选择 Circle 或 Line 的一种状态 Circle 2 表示用户进入选择圆心后正在等待确定圆周上一个点的状 态 状态之间是一些有向的线段 表示触发转换的事件和条件以及转换发生时的动作 例 如 状态 Menu 是等待用户选择一个菜单项 即产生事件 select arc 或者 select curve 若选择了画圆弧 还需要满足一个条件 C1 图中已经注明 C1 表示 Not drawing line 指的是 只有在没有划线或者划线过程已经完成的情况下 才可以完成从状态 Menu 到状态 Acr1 的一次转换 同时执行动作 highlight arc 将 Arc 菜单项显示为高亮 状态 Arc1 是系统等待用户选择另一个点的位置 单击鼠标后系统转至 Arc 2 状态 并画 出橡皮圈 在圆心和第二个点之间 从此状态开始用户单击其它点 可以画出一个圆弧 然后移至 Finish 状态 因此 一个 STN 可以表示用户的一系列动作及系统的响应 实际交互设计种 应用的状态转换图还会有更复杂的情况 如对每一的状态都有一些 公共的出口 如果在任何状态下 按 ESC 键表示交互任务的结束 返回到选择菜单状态 如在任何状态种 可以进入状态栏等修改绘制图形的一些属性 而这些属性往往比较多 如果全部放在状态图里 会使状态转换图变的很复杂 实际实现时 我们每个状态实现为 一个对象 把这些图形属性可以作为对象的属性处理 提供统一的接口用于处理类似 ESC 这样的状态事件 第 6 章 人机交互界面表示模型 公共状态 1 公共状态 1 公共状态 1 状态 1状态 1 状态 1状态 1 状态 1 状态转换网络比相应的文本解决方案更易于设计 理解 修改和文档化 它给出了对 行为的精确的 甚至是格式化的定义 但是 传统的状态转换网络在过去几年里一直没有 大的变化 在今天的交互系统应用中仍然存在着一定的局限性 其中一个最大的缺陷是需 要定义出系统的所有状态 这对于小型的系统是没有问题的 但是在一个较大的系统中 系统会很快崩溃 状态的数目是呈指数级增长的 同时状态的增长直接导致了状态转换网 络过于复杂 无法实际应用 另外 大的状态转换网络的设计和修改依靠手工来完成也是 不现实的 最好有特定的工具来自动完成 另外由于状态转换网络本身是一种结构模型 用户的交互行为在状态转换网络中是一条转换路径 不能直观地反映人的总体交互行为 所以用于对用户交互过程的设计不如行为模型直观方便 为了解决状态爆炸的问题 可以采用面向对象方法来为每个类定义单独的状态转换网 络 每个类都有一个简单的 易于理解的状态转换网络 这种方法很好地消除了状态级数 爆炸的问题 6 2 2 2 扩展状态转换网络扩展状态转换网络 1 层次状态转换网络层次状态转换网络 Start 和 Finish 状态并不是一个实际状态 它只是为了将一些小的对话连接成更 大的对话 例如 drawing tool 有一个主菜单 它有三个子菜单 Graphics 子菜单 如画 图和直线 Text 子菜单 如增加标签 和 Paint 子菜单 如徒手画图 可用层次 STN 来 描述如图 6 9 所示 类似前面的 STN 但是附加了复合状态 如图中矩形框所示 每个矩 形框表示相关子菜单的所有 STN 假设图 6 8 中的 STN 表示的是 Graphics 子菜单 第 6 章 人机交互界面表示模型 从主菜单开始去分析该框图 假设用户选择了 graphics 则系统弹出 graphics 子 菜单 并进入其状态 然而这不是真正的单一状态 如图 6 8 所描述的那样 而是进入了 子对话的 Start 状态 即 Menu 状态 然后可以选择画图还是画直线 点击 Finish 从子对话中退出 进入外层的状态网络 层次元素的使用不改变对话基本描述法的功能 但它却能简单地说明一个大的复杂的 系统 从最高级的主菜单到击键或击鼠标这样的小动作 2 State charts Harel 状态转换网络是状态转换网络的一个扩展 与传统状态转换网络相比 增加了很 多的特性 下面结合图 6 10 中 电视控制面板 的实例来对这些特性进行详细地介绍 图 6 10 是一个电视控制面板的状态转换网络 该控制器有 个按钮标记为 ON OFF MUTE SEL 和 RESET 电视机可以处于开机或待机状态 Standby 弹出 graphics 子菜单 选择 graphics 主菜单 graphics 子菜单 弹出 text 子菜单 选择 text text 子菜单 弹出 paint 子菜单 选择 paint paint 子菜单 图 6 9 分层的状态图实例 图 6 10 Harel 状态转换网络实例 电视控制面板 Standby On Off 1 3 4 2 MUTE SEL SEL SEL Sound Channel H TV onAND SEL 第 6 章 人机交互界面表示模型 图 6 11 带有取消功能的状态图 Normal Finish ESC Normal Finish Normal Finish ESC ESC 弹出 graphics 子菜单 选择 graphics 主菜单 graphics 子菜单 弹出 text 子菜单 选择 text text 子菜单 弹出 paint 子菜单 选择 paint paint 子菜单 假设从待机状态开始 按 ON 或 RESET 打开电视 按 OFF 则关机并返回到待机状态 若电视处于开机状态 则用户可以用 MUTE 按钮去控制声音 用 SEL 按钮去控制频道 四个频道循环切换 声音和频道子对话看起来有点像一个状态转换网络 但是中间的细 线及 AND 表明这两个子对话可以同时进行 也就是说 可以以任意次序按 MUTE 或 SEL 对整个状态转换网络而言 Sound 和 Channel 是两个子层次 分别用一个小的状态转 换网络来表示 完成独立的功能 Sound 和 Channel 共用 On 和 Off 两个通用的状态转换 从而减少了状态转换网络中状态转换的数目 在 Harel 状态转换网络中加入了 AND 关系 即在同一个高层状态下的子状态可以同时 处于激活状态 这些子状态可以是同步的 在本例中 中间的细线及 AND 按钮表明子状 态 Sound 和 Channel 可以并发执行 3 取消和帮助取消和帮助 取消 和 帮助 可以帮助解决工作过程中出现的一些问题 如用户错误地选择了 某个选项后而想返回到主菜单 例如在使用 drawing tool 工具过程中 如果错误地选择 了 circle 则必须选择两个点 才能继续往下走 而不能取消当前的错误选择 这种情 况是不太方便的 解决的办法是增加一个 ESC 键 使得用户在任何时候 任何地方 按一下该键就可以 返回到主菜单状态 这看起来相当简单 只需增加一条语句 然而要将其增加到 STN 却 要对每种状态都增加一条弧线 使其能返回到主菜单状态 进一步说 这会使层次结构系 统的对话产生混乱 带有取消功能的 drawing tools 如图 6 11 所示 第 6 章 人机交互界面表示模型 每个子菜单状态均有两个出口 一是 normal Finish 表示该条路径经过子对话后正 常结束 二是 ESC 表示用户点击 ESC 键 ESC 始终处于激活状态 无论用户是画线 还是画圆 只要按下 ESC 键 系统就会立刻返回到主菜单状态 帮助 系统在某些方面类似于 取消 在任何状态下都可以被调用 然而与 取消 不同 当用户结束 帮助 查询后希望回到原来的工作点 如图 6 12 所示 图 6 12 带有帮助功能的状态图 按下 HELP 按钮按下 HELP 按钮 从菜单出发 draw circle 单击在圆周上 rubber band 单击在中心点 Circle1Finish Circle2 帮助子系统 帮助子系统 第 6 章 人机交互界面表示模型 6 3 行为模型和结构模型的转换行为模型和结构模型的转换 一般来说行为模型主要对设计起指导作用 在此基础上 设计人员再进行结构模型 如状态转换网络等 的创建 这个过程很大程度上取决于设计人员的经验和对行为模型 的理解 本节主要介绍一种从行为模型到结构模型的一种转换思想和算法 以实现两种模 型间的自动的转化工作 6 3 1 整体框架整体框架 对两种模型进行转换 首先在图6 17中给出一个基本的模型转换的整体框架 在这个 框架中 体现出了进行转换的基本思想和意义 整个框架分为三个部分 1 行为模型部分主要使用了前面介绍的G U L模型 在这一层将产生一个基本的预测 性的行为模型 2 结构模型部分主要是采用层次状态转换网络 它涉及到的元素有状态 转换 事 件 层次结构 本节中所用的状态转换网络在转换中未考虑条件和同步 目的是 为了简化转换工作 3 用户部分包含两种用户 领域专家 Domain Expert 和设计者 Designer G U L模型的创建主要是由领域专家和设计者合作来完成的 然后通过模型转换算法转 换成为结构模型 最后提供给设计者使用 其中的专家和设计者并没有明显的界 限 设计者也可以是一个专家 6 4 2 转换算法转换算法 1 1 基本思想基本思想 前面介绍过G U L以层次化结构对任务进行建模 包括目标 包括循环属性 行为 关系 而状态转换网络表示的是状态之间的转换 也采用层次化表示 涉及到的主要是状 态 转换 事件 行为 在G U L中体现的层次关系转换到状态转换网络中也体现出层次的关系 G U L中的每 个目标都对应一个状态转换网络 如果一个目标下层有子目标 对子目标来说 它所对应 的状态网络应该嵌套在上层目标对应的状态网络中 在产生的状态转换网络中 有两类事件起作用 一类是外部由用户激活的事件 如 按 下鼠标 事件 点击键盘 事件等 另一类是内部由目标产生的内部事件 这里只定义了 目标正常结束 表示目标正常结束时产生的事件 目标操作失败 表示目标执行失败时 产生的事件 在右图6 18 中描述了一个目标层次中产生事件的过程 在进行从G U L到状 态的转换时 这些事件只是形式上的一个定义 没有具体的实现过程 如要在某一层出现 的第i个外部事件用 外部事件i 来代替 而由某个目标Ti执行时产生的内部事件也仅仅用类 似于 Ti正常结束事件 来表示 而具体的事件还需要由状态网络进行 系统实现时通过专 门的事件管理器来定义和管理 对G U L中的行为在转换后就成为对应的状态转换网络中 的一个行为 2 2 基本步骤基本步骤 对转换后的数据 存储的是状态转换网络中表示转换的弧 如下图6 19所示 第 6 章 人机交互界面表示模型 出发状态目的状态触发事件父状态行为 图6 19 状态转换网络中弧的表示结构 其中的触发事件就是触发从出发状态到目的状态转换的事件 父状态表示的是当前弧 所在状态网络的上层状态 可以是一个抽象出来的状态名 下面简单介绍一下进行转换的 基本步骤 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 允许 Enabling 设目标 G 下的子目标关系为 G0 G1 在这种关系中完 成目标 G 的路径只有一条 当 G0 成功结束后才允许 G1 执行 这是一个顺序执 行的过程 在转换成状态转换网络后如图 6 22 所示 从状态 S0 在外部事件激发 转换至 S1 在 S1 状态等待 G0 正常结束事件 发生后 转换至 S2 然后在 S2 处等待 G1 正常结束事件 转换至 S0 这样表示目标 G 执行完 毕 同时发生动作 产生 G 正常结束事件 处理转换过 程中存储所有的弧 这种约束 关系允许同一层次下有多个目 标存在 如 G0 G1 Gn 图 6 22 允许 关系状态网络 G1 正常结束事件 G0 正常结束事件 外部事件 S1S2 S0 产生 G 正常 结束事件 第 6 章 人机交互界面表示模型 这些目标都是顺序执行 交替 Interleaving 设目标 G 下的子目标关系为 G0 G1 表示两个目标之 间一种任意的组合来执行完成 在转换到状态网络后 如图 6 23 所示 有 S0 S1 S4 S0 和 S0 S2 S3 S0 两条途径可以完成目标 G 的一次执行 从 S0 状 态 如果产生 外部事件 0 依次等待 G0 正常 结束事件 G1 正常结 束事件 并最终回到 S0 状态 同理 若产生 外 部事件 1 则会沿着另一 条路径回到 S0 记录下所 有状态转换的弧 在有交 替关系的层次中最多只允 许有两个状态存在 禁止 Deactivation 设目 标 G 下的子目标关系 为 G0 G1 一旦 G1 任务被执行 G0 便无效 不活动 这个关系在转换 到状态网络以后与前面不同的是 在状态 S2 被 G1 正常结束事件 激活以 后 不会再回到 S0 而是转到了一个新的状态 F 在有禁止关系的层次中最多 只允许有两个目标状态存在 一个典型的例子是 G0 运行 G1 退出 在执行退出以后整个程序结束 也就无法再回到运行状态了 4 4 实例应用实例应用 根据上面的转换算法 在图 6 24a c 中给出了中国象棋的最高层目标 运行 走棋三 个目标的状态转换网络 它们之间通过事件的产生和激活完成其层次间的通信 其他目标 的状态网络表示与这三个图类似 在这里没有列出 1 G0 正常结束事件 产生 G 正常结束事件 G1 正常结束事件 外部事件 0外部事件 1 S2 S0 F 图 6 24 禁止 关系状态网络 图 6 23 交替 关系状态网络 G0 正常结束事件 S2 G1 正常结束事件 G0 正常结束事件 外部事件 0 S0 S3 S4 S1 产生 G 正常结束事件 产生 G 正常结束事件 G01 常结束事件 外部事件 1 产生 G 正常结束事件 S1 运行正常结束事件 外部事件 1外部事件 0 退出正常结束事件 S0 S1S2F 图 6 24a 最高层目标状态转换网络 第 6 章 人机交互界面表示模型 2 3 6 4任务模型到具体表现模型的转换任务模型到具体表现模型的转换 在Dygimes系统给出了一个用户界面生成过程的 1 提出一个由任务模型生成用户 界面的解决方案 并且设计实现了一个小型的原型系统 该方案的核心内容包括了对 ConcurTaskTrees任务模型表示法的形式化分析和表示 以及基于此分析提出的一个新的由 ConcurTaskTrees任务模型抽取ETS及其之间的转移关系的方法 该方法将得到ETS及其之 间转移关系的过程统一起来 即在对任务模型的处理过程中同时得到ETS及其转移关系 限于篇幅关系 这里仅给出一个转换框架 详细请参考文献 1 5 5 2 12 1 整体架构整体架构 ETS在由任务模型生成用户界面的过程中起着非常重要的作用 整个过程由4个主要的 部分组成 分别是设计和构建任务模型 预处理ConcurTaskTrees任务模型 抽取对话 导航 模型 界面生成 图 6 24c 走棋 目标状态转换网络 走棋 对弈方走正常结束事件 产生走棋正常结束事件 当前方走正常结束事件 外部事件 S001S002 S000 运行 产生运行正常结束事件 产生运行正常结束事件 打谱正常结束事件 打谱正常结束事件 S02 外部事件 1 打谱正常结束事件走棋正常结束事件 外部事件 0 S00 S03S04 S01 图 6 24b 运行 目标状态转换网络 第 6 章 人机交互界面表示模型 设计 构建任务模型 CTT XML文件 设计 解析 还原CTT 优先级树 Priority Tree 表达式树 Expression Tree 预处理 活动任务集 ETS 转移 Transition 对话 导航模型 STN图 计算 AUICUIFUI界面生成 下面将结 合一个简单的 例子和我们设 第 6 章 人机交互界面表示模型 计实现的原型系统对上述4个过程分别进行介绍 示例的ConcurTaskTree任务模型如图5 1所示 根任务Mail Checker有三个交互子任务 User Login Use Mail Checker和Quit 分别表示用户登录 用户使用客户端和退出客户端三 项操作 首先用户应先登录 然后才能使用客户端 在使用过程中可以随时用Quit操作退 出客户端 抽象任务Use Mail Checker被分解为具有Choice暂态关系的三个子抽象任务 Check Mail Compose Mail和Change Options 分别表示该邮件客户端提供给用户选择的三 个功能 Check Mail功能允许用户查看邮件客户端列出的邮件列表 并且可以选定一个进 行阅读 Compose Mail功能允许用户新建并编写一封邮件 可以提交发送或者退出 Change Options功能允许用户调整邮件客户端的选项设置等等 第一步首先需要在CTTE中构建编辑该示例邮件客户端任务模型 利用CTTE提供的可 视化编辑环境 可以很方便的编辑出所需要的ConcurTaskTree任务模型 在编辑好任务模型后 需要把该任务模型以XML的格式输出 这里不再讨论具体的格 式问题 如需了解该XML文件详细的DTD定义 可以参考CTTE的文档 下一步的工作是解析刚刚得到的CTT任务模型XML文件 采用开源的JDOM来解析 XML文件 同时定义了专门的数据结构来保存和维护CTT的树形结构 后续的对任务模型 的操作都依赖于这个数据结构 在模型的显示方面 采用JGraph类库实现模型的绘制和显 示 以下的各个模型的显示都基于此 这里不再讨论解析和绘制的具体技术细节 有关 JDOM和JGraph的详细介绍请参考相关的技术文档 46 47 还原后的任务模型如图5 2所示 这里为了保持和CTTE中任务模型显示方式的一致 绘制时采用了和CTTE一致的任务图标和暂态关系符号 紧接着为了能够使用第4章提出的暂态关系运算对任务模型进行处理 这里需要进一步 依次把任务模型变换为优先级树和暂态关系表达式树 分别如图5 3和5 4所示 可以看出 在变换后的优先级树中 具有相同父节点的子任务间的暂态关系都具有相同的优先级 第 6 章 人机