支持Web应用用户界面自动生成的界面表示模型.pdf

山东大学 硕士学位论文 支持Web应用用户界面自动生成的界面表示模型 姓名 张海英 申请学位级别 硕士 专业 计算机软件与理论 指导教师 万建成 20050405 山东大学硕士学位论文 摘要 在交互式系统开发中 图形用户界面的设计开发非常重要 但是现有 的软件工程方法缺少对用户界面设计描述的直接支持 制约了图形用户界 面的开发效率和质量 近年来 为提高图形用户界面的开发效率和质量 出现了很多基于模型 的界面开发环境 这些模型分为概念模型和陈述模型两类 这两类模型各 有其优缺点 概念模型的优点在于直接针对界面 描述简洁 缺点在于无 法支持全过程开发 陈述模型的优点在于支持全过程开发 支持自动生成 描述能力强 缺点在于模型设计过于复杂 模型整合比较困难 本课题研究中的F M P 界面模型借鉴综合了概念模型和陈述模型的优 点 该界面模型以实现图形交互系统自动生成 支持系统体系结构设计为 目标 包括功能模型 内在模型和基于界面模板的表示模型三个部分 其 中基于界面模板的表示模型突破了现有的表示模型缺乏对交户对象之间 的关系考虑的局限性 并且吸收和借鉴用户界面设计模式的思想 以上提及的界面模型 主要是基于传统桌面软件的 而针对W e b 环境 对用户界面模型表达的特殊要求 出现了M O D F M A u t o W e b R a tio n a lX D E 等用来生成W e b 应用系统的方法或工具 这些工具虽然可以在一定程度上 实现部分代码的自动生成 但对W e b 界面的模型化描述不够 由于F M P 立足于传统桌面软件 不支持对W e b 应用用户界面的建模 而且目前针对W e b 界面建模的工具环境还很少 本论文讨论并结合了w e b 界面的交互特点对F M P 模型中的界面表示模型进行了扩展和改进 阐述了 可支持W e b 应用用户界面自动生成的界面模板 并提出了基于该模板的表 示模型 该表示模型以改进的w e b 应用用户界面交互模型为基础 全面描 述和深入刻画交互模型的界面表示 根据w e b 界面的组合式页面的特点 创新性的提出了W e b 界面表示模 型的递归表示结构 实现了界面模板库的建立和复用机制 表达了改进的 w e b 应用用户界面交互模型的需求 显著的提高了界面开发的效率 同时 山东大学硕士学位论文 也考虑了对界面代码自动生成的支持 该表示模型的设计编辑环境已经在 V C N E T 开发环境得到了实现 关键字 F M P 用户界面模板 界面表示模型 w e b 应用用户界面 山东大学硕士学位论文 A B S T R A C T I nt h ed e v e l o p m e n to fi n t e r a c t i v es y s t e m s t h eg r a p h i c a lU s e rI n t e r f a c e U I d e s i g ni sv e r yi m p o r t a n t B u tt h en o we x i s t i n gs o f t w a r ee n g i n e e r i n g t e c h n o l o g yl a c k st h ed i r e c ts u p p o r tf o rU Id e s i g nd e s c r i p t i o n a n dt h i sh a s l i m i t e dt h ee f f i c i e n c ya n dq u a l i t yo fg r a p h i c a lU Id e v e l o p m e n t I nr e c e n ty e a r s I no r d e rt oi m p r o v et h ee f f i c i e n c ya n dq u a l i t yo fg r a p h i c a l U Id e v e l o p m e n t al o to fm o d e l b a s e du s e ri n t e r f a c e d e v e l o p m e n te n v i r o n m e n t s a p p e a r e d T h e s em o d e l sb e l o n gt oe i t h e rc o n c e p t u a lm o d e lo rd e c l a r a t i v e m o d e l E i t h e r c o n c e p t m o d e lo r d e c l a r a t i v em o d e lh a sm e r i t sa n d s h o r t c o m i n g s T h ec o n c e p t u a lm o d e ld i r e c t l yd e s c r i b e st h ec o m p o s i t i o no f U I s b u t i tc a n t s u p p o r tt h ew h o l ep r o c e s so fU Id e v e l o p m e n t w h i l e d e c l a r a t i v em o d e l sd os u p p o r tt h ew h o l ep r o c e s s b u tt h em o d e l i n gi s t o o c o m p l e xa n dt h e i ri n c o r p o r a t i o ni sv e r yd i f f i c u l t T h eF M PU Im o d e ls t u d i e di no u rr e s e a r c hc o m b i n e st h em e r i t so ft h e c o n c e p t u a l m o d e la n dt h ed e c l a r a t i v e m o d e l T h em o d e la i m sa tt h e i m p l e m e n t a t i o no fg r a p h i c a lU Is y s t e m sa n dt h e i ra u t o m a t i cc o d eg e n e r a t i o n I ts u p p o r t st h ea r c h i t e c t u r ed e s i g no fa p p l i c a t i o n s T h em o d e li sc o m p o s e do f f u n c t i o nm o d e l i n t e r n a lm o d e l a n dt h et e m p l a t e b a s e dp r e s e n t a t i o nm o d e l T h ep r e s e n t a t i o nm o d e lb r e a k st h er e s t r i c t i o no f t h ee x i s t i n gp r e s e n t a t i o n m o d e l st h a tl a c kt h ec o n s i d e r a t i o no fr e l a t i o n s h i p so fi n t e r f a c eo b j e c t T h u s t h ec o n c e p to fd e s i g np a t t e r n so fU Ii sp r e s e n t e d T h em o d e l sm e n t i o n e da b o v ea r em a i n l yb a s e do nt r a d i t i o n a ls o f t w a r e A i m e da tt h es p e c i a lr e q u e s to ft h ew e be n v i r o n m e n tf o ru s e ri n t e r f a c em o d e l M a n ym e t h o d so rt o o l s s u c ha sM O D F M A u t o W e ba n dR a t i o n a lX D E w e r e b r o u g h tf o r w a r d T h o u g ht h e yh a v er e a l i z e dt h ea u t o g e n e r a t i o no fc o d e p a r t l yt os o m ed e g r e e t h e yd o n ts u p p o r te n o u g hf o rt h ec o n s t r u c t i o no fW e b i n t e r f a c em o d e l s I I I 山东大学硕士学位论文 A st h eF M Pm o d e li sb a s e do nt r a d i t i o n a l d e s k t o ps o f t w a r e w i t h o u t s u p p o r t i n gt h em o d e l i n go fw e ba p p l i c a t i o nu s e ri n t e r f a c e A n dt h e r ea r en o t m a n yw e bi n t e r f a c em o d e l i n gt o o l sa tp r e s e n t T h i sa r t i c l ee x p a n d e da n d d e v e l o p e dt h eF M Pm o d e lc o m b i n i n gt h ec h a r a c t e r i s t i c so fw e bu s e ri n t e r f a c e a n ds e tf o r t ht h ei n t e r f a c et e m p l a t es u p p o r t i n gt h ea u t o g e n e r a t i o no fw e b s o f t w a r eu s e ri n t e r f a c e A n dt h e nt h e p r e s e n t a t i o nm o d e lb a s e do nt h e t e m p l a t e T h i sp r e s e n t a t i o nm o d e li sc o n s t r u c t e df r o mt h ei n t e r a c t i o nm o d e l d e s c r i b i n gw e bU Ic o m p o s i t i o na n ds t r u c t u r e sc o m p l e t e l ya n dd e e p l y A c c o r d i n g t ot h ec h a r a c t e r i s t i c so ft h ea s s e m b l e d p a g e s o fw e b i n t e r f a c e Ar e c u r s i v ep r e s e n ts t r u c t u r eo fw e bi n t e r f a c ep r e s e n t a t i o nm o d e l w a s c r e a t i v e l yb r o u g h tf o r w a r d r e a l i z e d t h ec o n s t r u c t i o na n dr e u s e m e c h a n i s mo fi n t e r f a c et e m p l a t eb a s eh a sb e e nr e a l i z e d a n dt h ee f f i c i e n c yo f i n t e r f a c e d e v e l o p m e n tg r e a t l yi m p r o v e d c o n s i d e r i n gt h es u p p o r tt o t h e a u t o g e n e r a t i o no fi n t e r f a c ec o d e K e y w o r d s F M P u s e ri n t e r f a c et e m p l a t e i n t e r f a c ep r e s e n t a t i o nm o d e l w e b a p p l i c a t i o nu s e ri n t e r f a c e I V 山东大学硕士学位论文 原创性声明和关于论文使用授权的说明 原创性声明 本人郑重声明 所呈交的学位论文 是本人在导师的指导下 独 立进行研究所取得的成果 除文中已经注明引用的内容外 本论文不 包含任何其他个人或集体已经发表或撰写过的科研成果 对本文的研 究做出重要贡献的个人和集体 均已在文中以明确方式标明 本声明 的法律责任由本人承担 论文作者签名 型鲢 日 期 乙塑j 二 竖 论文作者签名 耥良 日期 力 J 关于学位论文使用授权的声明 本人完全了解山东大学有关保留 使用学位论文的规定 同意学 校保留或向国家有关部门或机构送交论文的复印件和电子版 允许论 文被查阅和借阅 本人授权山东大学可以将本学位论文的全部或部分 内容编入有关数据库进行检索 可以采用影印 缩印或其他复制手段 保存论文和汇编本学位论文 保密论文在解密后应遵守此规定 论文作者签名 盏亟导师签名 丕丝鍪日期 圣 苎 墨7 j豁驻删雾豢蒸黪辩鬃撼寨戮燮戮p 一搿鬈u 蕊麟黪黪一辫黔蕊i曩 山东大学硕士学位论文 1 引言 1 1 论文的研究背景及意义 在交互式系统开发中 图形用户界面开发是非常重要的组成部分 由于图 形用户界面自身的特性 现有的软件工程方法缺少对用户界面设计描述的直接 支持 使用U M L 语言描述用户界面时描述相当复杂 制约了图形用户界面的开 发效率和质量 使开发人员难以快速有效地进行图形用户界面的设计和开发 为提高图形用户界面的开发效率和质量 许多界面模型被提了出来 这些 模型分为概念模型和陈述模型两类 概念模型主要有P A C 模型 M V C 1 l 模型等 直接针对界面 描述简洁 但是无法支持全过程性开发 陈述模型服务于基于 模型的工具 种类较多 支持全过程开发 支持界面自动化生成 描述能力强 大 但是模型设计过程过于复杂 模型整合比较困难 F M P 2 界面模型借鉴综合了概念模型和陈述模型的优点 基于F M P 界面模 型的体系结构化的用户界面自动生成工具支持交互系统从体系结构设计到代码 自动生成的全过程开发 采用图形化方式进行界面模型的设计 以上提及的界面模型 主要是基于传统桌面软件的 针对W e b 环境对用户 界面模型表达的特殊要求 出现了M O D F M A u t o W e b R a t i o n a lX D E 等用来 生成W e b 应用系统的方法或工具 虽然可以在一定程度上实现部分代码的自动 生成 但对W e b 界面的模型化描述不够 1 2 本文的创新点 由于F M P 立足于传统桌面软件 不支持对W e b 界面的建模 而且目前针 对W e b 界面建模的工具环境还很少 本课题的研究重点着眼于W e b 界面的表 示模型以及工程化的描述方法和实现机制 本文的创新之处在于 针对W e b 应用用户界面的交互特点 在F M P 基础 上 对界面模板以及基于模板的表示模型进行了扩展和改进 提出了一个支持 W e b 应用用户界面自动生成的基于模板晃面表示模型 该模型可以适应w e b 应 用界面的交互模型表达需求 并且支持界面代码的自动生成 本表示模型的设 第1 页 山东大学硕士学位论文 计编辑环境已经用V C N E T 开发环境得到了实现 1 3 本文的组织结构 本论文主要阐述了可支持w e b 应用用户界面自动生成基于的界面模板的界 面表示模型 在第二部分中介绍了本课题的研究现状 第三 四 五部分分别介绍F M P 界面模型 界面模板和基于界面模板的表示模型 第六部分阐述了由w e b 界面 交互模型生成界面模板表示模型的具体过程 第七部分说明了模型的设计与实 现情况 第八部分给出一个w e b 应用设计实例说明系统的使用方法 第九部分 为文章的结束语 总结了本文所做的工作并指出了下一步需要完善的工作 第2 页 山东大学硕士学位论文 2 课题研究现状 2 1 用户界面自动化生成 2 1 1 交互界面构造工具 目前 为了提高图形用户界面的开发效率和质量 出现了三种类型的用户 交互界面构造工具 4 l 1 界面设计工具 I n t e r f a c eB u i l d e r 一 界面设计工具 m 1 对用户界面的显示元素的位置 属性和类型给以低层次 的界面描述 并提供工具箱编辑环境 具有容易使用 操作简单的优点 缺点 在于仅仅描述界面静态组成 不支持交互操作描述 无法支持复杂的界面设计 分析评价工具 描述使用特定程序语言描述 移植性差 2 用户界面管理系统 U s e rI n t e r f a c eM a n a g e m e n tS y s t e m s 用户界面管理系统 4 是构建界面交互对话部件 使用专门语言描述对话过 程的系统 有些用户界面管理系统也描述界面表示 但是描述语言非常简单和 低级 用户界面管理系统具有支持对话代码生成 语言移植性好的优点 其缺 点主要是设计人员需要学习专门的描述语言 通用性差 描述层次较低级 描 述比较复杂 小 1 3 基于模型的工具 M o d e l B a s e dT o o l s 基于模型的界面开发方法 瑚是一种崭新的界面开发方法 在基于模型的 开发方法中 用户界面依据陈述描述模型自动生成 陈述模型描述了用户需要 执行的任务 界面显示的内容 结构和布局 界面显示元素在用户任务执行中 所起的作用 基于模型的工具有如下优点 提供功能强大的设计和运行工具 模型支持一致性和复用性 支持早期概念设计 支持迭代式全过程开发过程 但是存在着缺乏灵活性 运行性能较差 难于使用的缺点 现在主要的基于模 型的工具有U I D E F U S E M A S T E R M I N D T A D E U S T c a l l a c h 1 1 M o b i D U M L 1 6 1 U M L i 3 等 第3 页 山东大学硕士学位论文 2 1 2 基于模型的工具 基于模型的工具以其强大的功能成为最有前途的交互界面开发工具 成为 交互界面构造研究的最新热点 在基于模型的系统中 陈述模型的类型和描述 能力对界面自动化生成至关重要 模型过于简单 其界面表达能力会不足 难 以表达复杂的交互界面 模型过于复杂 描述会很复杂 生成交互界面的代价 过高 以模型为中心的方法对一个用户界面设计的所有方面都用陈述模型来描 述 M B I D E s 必须包括关于交互系统的一个高水平 抽象并且明确描述的模型 来进行开发 M B I D E s 必须开发一个清晰的和计算机支持的联系 这个联系是 从 1 中的模型到一个理想的 可运行的用户界面 这就意味着 应有某种自 动转变类似于基于知识的生成或简单的编译来执行可运行的用户界面 基于模型的方法具有如下优点 1 以用户为中心的开发周期 2 集中的用户界面描述 3 支持交互和自动开发的综合设计时工具 4 用户界面设计的复用 5 明确陈述设计知识的应用 一般的体系结构每个M B I D E 的中心组件是界面模型 它包括不同的陈 述模型 M B I D E s 包括对交互开发和自动开发支持的工具 自动生成工具处理 在不同陈述模型和一个可执行的理想用户界面表示的转换 设计评论 设计顾 问和自动生成工具需要的附加知识在知识库中陈述 用户界面的开发者用建模工具来创建和使用陈述模型 陈述模型中主要包 括 任务模型 域模型 用户模型 对话模型 表达模型哺 1 任务模型 任务的描述包括一个目标 一个行为或其他对于完成目标必 须的任务的集合 一个关于怎样选择行为或任务的计划和一个受任务 影响的加工品的模型 2 域模型 描述了一般意义上的应用程序以及包括用户界面的详细信息 第4 页 山东大学硕士学位论文 例如 U I D E 域模型包括 存在于应用程序中的对象的类层次 对象的 属性 能作用于对象的行为 行为所需要的信息单元 参数 行为的 前状态和后状态 3 用户模型 描述了要开发的交互系统的预期最终用户或最终用户集团的 属性 它的主要目的是支持个人用户界面的创建 一个用户界面的个 性化可以在设计时或运行时被创建 而且 用户模型包括从一个用户 属性到一个用户界面设计的推理规则 4 对话模型 用来描述人机对话 对话模型描述了输入符号序列 输出符 号序列以及它们的交互 它描述了人机交互的造句法结构 一一 5 表示模型 描述了结构 这些结构可以出现在最终用户的显示 它们 的布局特点以及它们之间的可视依赖 很多应用程序的显示包括一个 静态的部分和一个动态的部分 静态部分在交互系统的运行时刻保持 固定 除非状态改变 动态部分显示了应用程序依赖的数据在运行时 刻一般发生什么变化 至今存在的基于模型的用户界面软件工具可以分成两代哺 第一代 使用一个全局模型作为界面模型 像U I D E M E C A N O A M E 1 羽 J A N U S 1 7 伽 第二代 它们的界面模型被分解为多个不同模型 第二代用户模型支持一 种逐步增加的界面设计方式 像M A S T E R M I N D n M o b i D 眦1 5 例 F U S E 嘲 T A D E U S H U M A N O I D 2 1 2 2 3 等 2 2W e b 应用用户界面特点 W U l W e bU s e rI n t e r f a c e 和传统桌面软件G U I G r a p h i cU s e rI n t e r f a c e 有很 多不同之处 主要体现在以下7 个方面 1 W U I 中的导航比G U I 更灵活 用户可以从任何网页跳转到某个网页 每一个W e b 页都可以作为应用系统的入口 W U I 中导航的表现形式是多种多 样的 如按扭 图片链接 文字链接 以及其他事件引发的导航 有些W U I 甚至完全由不同类型的导航链接组成 此外 W U I 比G U I 更多的采用了超媒体 第5 页 山东大学硕士学位论文 技术 如声音 浮动动画 视频 而G U I 中窗体之间的导航一般只有固定的很 少的入口点 导航形式多为菜单 按钮 2 W U I 有一个界面包含其它界面的情况 用几个现有界面组成新的界面可 以提高界面设计的复用性 G U I 是做不到这一点的 某些开发工具如V B 若 两个界面有部分雷同 只能用重复设计的方法 3 W e b 应用具有特定的体系结构 通常是两层或多层体系结构 与传统的 c s 结构相比 它大都是基于浏览器的瘦客户 更多的是负责信息的显示和布 局 应用逻辑和数据都放在服务器端 这种特定的体系结构要求描述模型应该 具有不同的层次 1 1 4 W U I 和G U I 在界面布局方面也不同 G U I 通常以任务为中心 围绕一 个或多个明确的操作任务来布局 界面的元素设置 布局 快捷键设置都是以 使任务更高效的完成为目标 如典型的仓库管理系统 银行前台系统等M I S 系 统 G U I 的界面布局一般都事先进行精确的设置 W U I 在很大程度上是以信息 展示为中心的 即便有要求输入的信息 也很少 有关数据处理的任务大多放 在了服务器端 返回的仅是处理结果 W U I 有方便的信息陈列形式 如各种文 章名称链接列表 信息文字的长度是不定的 因此 网页的大小布局是即时决 定的 5 W e b 界面的开发通常具有明确的技术分工 如美工负责信息的布局和显 示 技术人员负责网页的组装和导航 这要求界面描述模型应该显示地分割为 不同的层次 6 W U I 比G U I 面临更多的变化 在开发完成之后 G U I 很少再改变 即 使有变动 也是有限的 而W U I 面临着很多变化 展览信息的网页每时每刻都 在改变 对一个综合性的网站来说 网页改版是经常的事 而且对开发时间要 求很紧 这就要求有一个很好的快速原型开发工具 7 W U I 的用户群组成更复杂 W U I 很难预测会面临什么样的用户 而G U I 的用户通常是可以预先定义的 W U I 考虑到一般用户的操作习惯 有更直观的 导航操作指示和简单的操作布局 并考虑界面色彩 动画方面的吸引力 综合以上特点 目前有关W e b 应用用户界面的交互形式可归纳为以下5 种 第6 页 山东大学硕士学位论文 1 菜单型界面选择 形式与G U I 中的菜单相同 不同的是 当用户点击一 个菜单项后 会出现相应界面 此界面是从服务器端调用来的 其出现位置可 能是本页的某个区域 也可能是一个新界面 2 用户发出信息处理命令 如点击按钮 提交的信息将被发送到服务器端 相应的处理界面 如果需要 将向用户返回结果界面 3 用户点击各种形式的导航链接 可以在界面中 界面间导航 或引出动 画 文件等各种导航目标 4 用户通过下拉列表 单选框等形式进行参数选择 5 用户录入文字 图片等信息 总结界面类型 行为 版式 典型的网络应用系统有电子商务如物流管理 银行 政务等 此外 还有聊天室 信息发布等应用 对w e b 界面可以作如下 分类 按功能分类 有导航链接型 其界面基本由链接组成 首页多采用此种 版式 简单信息录入型 信息展示型 主体是文字信息 按布局分类 主要有 无规则区域划分型和边框加中心主体型 或称部分刷新型 两类 2 3 支持W e b 应用用户界面代码自动生成的方法 随着网络时代的来临 对界面开发又提出了新的挑战 与一般桌面软件图 形用户界面相比 W e b 软件界面有其自身的特点 虽然已有一些针对基于网络 的用户界面开发的思想方法 但基于模型的界面开发方法还很不成熟 目前有 关支持W e b 应用用户界面自动生成的工具还很少 而且对模型的描述多采用形 式化描述方法 如A u t o W e b 9 一个集成开发环境 用来生成w e b 应用系统 它采用符号系统H D M 1 i t e 对w e b 应用系统进行建模 定义结构 导航和语义 表达 它比较适合数据密集型系统的建模 它的不足是描述模型概念层次较低 增大了使用难度 M O D F M m o c k u p d r i v e nf a s t p r o t o t y p i n gm e t h o d o l o g y 是一个方法概 念框架 可以快速支持w e b 应用系统开发过程中需求的改变 M O D F M 可以结 合J 2 E E X M L E I B 等现有技术 支持w e b 应用系统从需求到开发的过程 M O D F M 的优点是较好的定义了系统模型与运行平台之间的衔接 不足是对界 第7 页 山东大学硕士学位论文 面建模采用形式化方法 概念层次较低 此外 还有R a t i o n a lX D E e X t e n d e dD e v e l o p m e n tE n v i r o n m e n t 等集成 开发环境 也在一定程度上用可视化模型描述应用系统 它们对具体的运行平 台支持很好 也能自动生成很多代码来减轻开发者的工作量 但是 它们一般 对系统的模型化程度不够 尤其是对界面的模型化描述不足 总结现有的w e b 界面模型 有一个共同的不足 就是缺乏一个对界面的行 为 外观 功能进行描述的高层可视化模型 因此为了能自动生成网络用户界 面的代码 提出一个概念层次相对较高的表达用户与界面的交互模型是非常必 要的 2 4 用户界面设计模式 用户界面设计模式是在用户界面设计领域中采用设计模式的技术 软件设 计模式描述了某个上下文中的共同问题的解决办法 通常用在面向对象编程领 域和数据分析领域 人机交互界面 H C I 模式的目标是构建系列化的解决方案 以帮助用户界面设计人员解决用户界面开发过程中常见的 较大难度的 具有 普遍性的设计问题 设计模式是针对一个设计问题的解决方案的形式描述 设计模式起源于体 系结构由C h r i s t o p h e rA l e x a n d e r 于2 0 世纪7 0 年代中期引入 A l e x a n d e r 注 意到特定的解决方案竟常用于解决反复出现的相同的问题 于是提出将开发设 计模式作为设计知识归档的方法 软件工程应用模式推动软件复用 组件复用 的早期尝试经常失败的原因 在于组件的颗粒度太小 组件之间无法很好地组织在一起 软件模式的应用允 许较大粒度的共享 并且详细定义了组件的交互方式 同样他们比用于体系结 构的模式更能说明问题 用户界面的设计者同样注意到特定的用户界面设计问题也是反复出现 虽 然有些问题一般都有已知的优秀的解决方案 但是在设计人员之间却存在相互 交流和沟通的问题 指导原则虽然代表着一种可行的解决方法 但是指导原则 过于抽象 难于理解并且需要额外的努力去寻找合适的材料 因此用于归纳用 第8 页 山东大学硕士学位论文 户界面设计解决方案的用户界面设计模式越来越受到计算机研究人员的重视 S I G C H l 9 7 关于模式的专题讨论会 2 5 上把用户界面设计模式作为解决日益复杂 和多样的H C I 设计的有效方法和手段 T i d w e l l 2 6 3 把模式描述为 针对在一个特定的环境中带有普遍性的设计问 题的可能的好的解决方案 通过描述这些解决方案中不变的属性 模式能够以 一致的易于阅读和理解的方式提供强有力的一般的设计指导 是关于优秀设计 知识的表达 许多有经验的U I 设计人员下意识的使用成熟的问题解决方案 但是设计人 员很少对解决方案进行形式化的描述和归纳 于是 不精确的设计模式和形式 化的设计模式同时并存了 形式化的模式能够作为收集并形式化用户界面设计 知识的手段 使用H C I 模式来捕捉并归档设计知识的原因主要有 3 1 H C I 模式提供了能够被所有人阅读和理解的通用语言 而不管他们的 背景如何 2 现存的归纳u I 设计知识的形式化的方法功能太弱 H C I 模式提供了一 种很好的捕捉和转换这种知识的方法 他们以固定的格式来表达 非 常容易理解 并且提供了背景的推理 这种形式提供了关于即将解决 的问题 上下文 解决方案以及这种解决方案的原理等 3 H C I 模式促进了复用性 4 H C I 模式是极具价值的信息资源 对于新系统的分析 当前形式以及 设计等都提供有力支持 然而 我们相信H C I 模式不能作为设计知识的单一的资源 它们必须由传 统的信息资源作为补充 但是 它们表达了合理的信息和对于类似的项目来讲 好的设计 既然这种描述形式提供了论证和和动机 H C I 模式对于当前项目的 适用性能够被测试和验证 H C I 模式必须作为相互联系的模式的语言的一部分 能够互相参与和支持 为了能够真正的有用 模式语言工作在不同的规模 并且促进了设计的迭代式 的优化 模式不同于设计指导原则 指导原则 2 s 3 的目标是通过归纳某一种用户界面 第9 页 山东大学硕士学位论文 的所有的复杂性来寻找用户界面中的一致性 然而 指导原则的重点大多放在 窗口 小窗口等事情上 而忽视了对于适当的U I 设计所需要的知识 实际上 影响设计的主要的因素 用户 上下文 任务 这些因素指导原则都忽略了 设计原理也忽略了 设计模式捕捉并归纳了所有重要的知识 它们是经得起时 间考验的 H C I 模式和其他的模式也是不同的 软件工程模式经常详细说明不同组 件描述之间的相互关系 重点是组件中接口的规范 然而 U I 设计者认为那些 模式太严格 太详细了 u I 设计者除了关心功能还关心其美学和社会效应 他 们也想自由的革新和表达自己 这些愿望和这样的一个事实在一起 H C l 是一 个年轻的学科 许多内容都是未知的 设计出一个纯工程的方法是不合适的 于是H C I 模式更接近体系结构模式 但是 H C I 模式经常和软件系统结合在一 起并且同样考虑软件方面的事情 2 5 界面布局研究 界面布局是界面设计中非常重要的问题 布局策略是界面布局时所采用的 策略 2 5 1 布局策略的关键因素 布局策略的关键因素主要包括定位 尺寸和排列三个因素 1 定位 主要考虑I O s 在容器中的相对位置 其考虑的主要因素包括 a 一致性 C o n s i s t e n c y I O 应该适合用户的习惯 在形式 上应该连续 b 顺序性 S e q u e n t i a l i t y 经常使用的1 0 应该首先定位 c 屏幕图像 S c r e e nI m a g e I O 应该均匀的分布在容器的 四个象限 2 尺寸 I O 要有统一和标准的尺寸 3 排列 考虑由I O 顺序决定的排列方向和约束 第1 0 页 一 I I l I 山东大学硕士学位论文 2 5 2 布局策略分类 布局策略有手工布局策略和计算机辅助和自动布局策略两种 在手工布局 策略中 有一个界面工具箱编辑器 能够根据用户的意图创建 放置和修改 1 0 s 2 9 3 们 2 5 3 评价界面布局的依据 对于设计者 主要依据自动化程度 灵活性 可修改性 1 自动化程度 计算机辅助的 完全自动化的 2 灵活性 在策略不起作用时适应布局的能力 3 可修改性 根据个性模式对给出的布局进行修改的能力 对于人类因素专家 主要依据屏幕密度 分裂 匀称性和一致性 1 屏幕密度 如果优化未使用的空白空间 2 分裂 I O s 如何插入和交迭 3 匀称性 编排的网格如何规整 4 一致性 在多种情况下放置的I O s 是否一致和连续 2 5 4 自动布局技术 自动布局技术 中最基本的是简单布局技术 简单用户界面布局是由用户 界面工具包构建的 工具包提供基本的函数 比如创建按钮和窗体 工具包帮 助用户界面设计者在一个管理容器中设计对象布局 无需指定每个对象的绝对 位置和尺寸 布局管理器允许编程人员表述 添加按钮 添加按钮到窗体的这 一部分 也可以附加说明数量限制 这将使创建适应容器尺寸变化的布局成为 可能 布局管理器在运行时为它控制的对象选择位置和尺寸 这种选择在一个 约束集的约束下进行 自动布局技术大多是基于约束的方法 任何一个基于约束的自动布局系统 第1 1 页 山东大学硕士学位论文 的特征包括 1 所使用约束的类型 2 约束如何描述 获取和解析 3 系统如何处理不一致 环和其他问题导致无法生成表示的问题 在基于约束的自动布局系统中 约束被分类为抽象约束和空间约束两种类 型 其中抽象约束是指被放置在布局中的各种部件之间高层关系的描述 空间 约束是指用于直接说明表示的几何结构的关系 采用空间约束最主要的原因是 改进可视质量和艺术性 第1 2 页 山东大学硕士学位论文 3 F M P 界面模型 模型其体系结构如图3 1 所示 在F M P 1 界面模型中 F F u n c t i o n 是功 能模型 M M o d e l 是界面内在模型 包括对象模型和交互模型 P P r e s e n t a t i o n 是基于界面模板 的表示模型 功能模型使用扩展用例图表达 描述 功能模型的主要任务是通过 对需求的分析 确定界面功能 界 面框架 界面之间的关系 以及界 面对内在模型的需求 界面内在模型中包括对象模型 图3 1 F M P 模型的体系结构图 和交互模型两个模型 其中对象模型描述应用领域的对象以及对象之间的关系 从静态的方面来描述交互系统 为功能和交互模型提供基础 对象模型全面扩 展了对象的数据成员描述特性 以满足界面描述的需要 交互模型在对象模型 和功能模型的基础上对界面构成和构成元素之间的关系予以描述 从动态的方 面来描述交互系统 表示模型的功能是定义界面的可视外观 表示模型主要描述可视成分的组 成和成分彼此之间的关系 表示模型是对界面显示的全面描述 通过对现有的陈述表示模型的研究 发现现有基于模型的系统的表示模型 缺乏对界面对象之间的关系的考虑 其界面布局策略缺少对界面对象之间关系 因素的考虑 同时吸收和借鉴用户界面设计模式的思想 提出了崭新的基于界 面模板的表示模型 虽然F M P 模型已经在实践中得到了验证 例如通过F M P 模型 对典型的 M I S 管理信息系统 图书馆管理 企业进销存管理 进行描述 实现了V B 界 面代码的自动生成 而且必要的数据库连接 数据存取操作也完全可以自动生 成 这有力证明了F M P 模型的技术可行性 但是 F M P 模型仍然不支持对W e b 界面的建模 本文的研究工作也正是致力于此 第1 3 页 山东大学硕士学位论文 4 界面模板 界面模板主要由界面交互模型 界面结构树和界面模板参数三个组成部分 界面模板的形式化表达形式如下 I n t e r f a c eT e m p l a t e t e m p a t e n a m e I n t e r f a c ei n t e r a c t i v em o d e l 用户界面交互模型 T e m p l a t es t r u c t u r et r e e 界面结构树 I n t e r f a c et e m p l a t ep a r a m e t e r s 界面模板参数 4 1 支持w e b 应用用户界面自动生成交互模型 界面交互模型是界面模板的内在基础 界面交互模型是对界面的内在全面 描述 描述了交互界面组成 功能和关系 界面模板是交互模型的外在描述 是在交互模型基础上对界面外观形式的描述 主要处理界面宏观布局和表示控 制 交互模型图可看成由三元组 表示的有向图 其中V G 是交 互对象集合 E G 是交互关系集合 由 是从交互关系集合E 到交互对象有序偶 集合上的函数 1 4 1 1 交互模型符号体系 交互模型的符号体系包括交互对 象和交互关系两种类型 图4 1 展示 了交互模型中的符号体系 交互对象 主要包括对象 汇集 角色 用例 界面 部件 时钟和对象组 关系主 要包括方法调用 消息发送 界面导 嚣留 匡圆 鬲 I 一 同嘲 b 尘坚一 塞0 1 旦 i i 各 图4 1 交互图的符号体系 第1 4 页 图囝叨圄 山东大学硕士学位论文 航 关联关系和参与关系 支持霄e b 应用用户界面自动生成的交互模型扩展了 F M P 模型中的交互模型 4 1 2 交互对象 界面用于两个目的 数据加工和加工控制 因此在界面上有两类数据信息 一是乔面操作的目标对象 它们是被加工的数据 一是参与加工控制的数据 它们反映操作的条件 系统的状态 本文称前者为数据对象或汇集 称后者为 查询条件对象或控制参数对象 一 一 一 一 1 数据对象对象在交互模型中是一个很重要的元素 通过它实现了界面 元素与领域数据模型的联系 它包含内部属性的导航信息 对象模型对应系统的数据模型 也可看作数据库表和视图的一个集合 交 互模型中的数据对象来自于对象模型 不同之处在于 交互模型中的数据对象 服务于与该交互模型对应的单个界面 因此 与该界面显示直接相关的数据对 象才会出现在这个交互模型中 所以 交互模型的对象是指可以直接操作的界 面元素 它被展现到界面后 对应的界面元素有各种形式的导航链接 以及各 种表单 如文本框 密码文本框 单选按钮 复选框等 在进行对象属性设置 时 可以灵活的指定对象属性的来源 对象属性集可以由对象模型中任何对象 的任何属性组成 设计人员可指定选取属性的约束条件 还可以为对象自由加 入新的属性 它的值可以自由设定 本文提出的模型借鉴了O O H D M 的思想 将对导航的描述信息封装入对象 中 可以为对象的任何属性设置导航目标 导航目标可以从现有的界面中选取 导航链接字符串可以来源于数据库 也可以是自己定义的U R L 这就解决了动 态导航问题 对象不仅仅有为界面元素提供数据的作用 它还封装了事件和方法 对象 的属性对应到界面时 会展现为各种界面元素 而这些界面元素会对应 些事 件来和用户交互 这些事件的方法就由对象封装起来 事件是根据属性界面展 示类型自动加入的 事件处理代码可自定义或引入代码包文件 第1 5 页 山东大学硕士学位论文 2 汇集汇集是数据对象的集合 它与数据对象最大的区别在于 在数据 存储中 数据对象可能只有一条记录 而汇集必定是多条记录 这也就决定了 汇集中的数据显示在界面中应当采用浏览格式 另外 之所以在交互模型中提 出汇集的概念 是因为交互模型中所有的对象在界面中都有其对应的位置 而 且对象的形式决定了它在界面中采用的控件 它的任何一项都可以作为指定目 标的导航链接 3 查询条件对象查询条件对象类似于传统的数据模型中视图的概念 属 于参与界面加工的数据对象 其数据成员来自与之有关联关系的一个或多个对 象集合 但它与视图有所不同 它有自身的行为 这种行为通过用例作用在对 象或汇集上 通常以参数传递的形式发出 结果体现在与之关联的对象或汇集 中 查询条件对象一定是可见对象 一般访问模式是用户输入 特别是对于数 据检索而言 如果查询条件对象是个数据对象 那么它大多是来源于数据库的 对象 其输入方式有别于一般对象 如果是个汇集 那么它一般是只读的 它 的事件可能会触发其他操作 其逻辑表达与数据对象和汇集相同 4 控制参数对象控制参数对象同样属于参与加工的数据对象 是数据处 理的前置条件 它的作用在于给关联的对象或汇集传递控制参数 只有在控制 参数传递后 界面功能或对象行为才能引发 它非常类似于查询条件对象 但 结构相对简单 控制参数对象一般是数据对象 其表达形式和数据对象相同 5 界面界面可以由除本身之外的任何界面组成 如框架型网页 一个界 面由多个分布在各区域内的子界面组成 界面作为对象 有自己的属性和事件 交互模型中 界面也可对接受的数据进行处理 从这个角度看 界面又可视作 部件 在服务器端 界面对应H T M L J S P A S P 等文件 在客户端 界面是 通过浏览器编译后呈现给用户的 界面的引入 实现了界面模板的复用 6 角色 用例不同于U M L 中的角色 界面中的用例操纵者 只可以是人 不可以是外部系统 因为凡是需要用户参与的处理 都是潜在的界面功能成分 所以 在交互模型中 有必要引入角色的概念 界面