CN111694563B - 针对用户界面模式的可视化设计系统及其方法 - Google Patents

Abstract

一种针对用户界面模式的可视化设计系统及其方法，包括用户界面模式的可视化设计组件UIPVT；所述用户界面模式的可视化设计组件UIPVT运行在可视化设计终端上；所述用户界面模式的可视化设计组件UIPVT包括文档生成模块、界面模式布局结构图生成模块和逻辑状态转换图生成模块；所述文档生成模块用于运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档。有效避免了现有技术中难以实现模式、界面的设计和实现模式之间转换困难、开发者难以准确获取实现信息从而造成理解和实现模式的困难以及影响界面开发的整体效率的缺陷。

Description

针对用户界面模式的可视化设计系统及其方法

技术领域

本发明涉及界面模式设计技术领域，具体涉及一种针对用户界面模式的可视化设计系统及其方法。

背景技术

UI即UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

通过对用户界面设计不同需求进行的分类以及用户界面设计元素对用户行为的影响，来研究用户在用户界面设计中所体现的重要性。交互性已经成为用户界面设计中设计追求的目标。

高质量界面开发是一项困难的工作，通常包括界面设计和实现两部分。由于界面模式是对过去高质量用户界面设计经验的总结，目前，界面设计阶段广泛采用了基于模式的用户界面设计方法和技术。而现有界面开发是在一个确定平台上，平台提供界面构件(如按钮，输入框等)来构造界面，平台并未对模式的实现提供支持，因而需要开发者在构件层上通过实现模式来完成，造成了设计与实现之间的距离而相互脱节。

设计与实现之间的距离使得基于模式的界面开发成为一项繁琐、费时的复杂任务。第一，现有对界面模式的描述主要以自然语言或草图形式为设计者提供设计信息，这些信息说明了模式应用于那些场景，如何解决交互设计问题，开发者需要实现信息而并非设计信息，因而难以实现模式。第二，界面模式是一种界面的二维设计，而开发者在构件层上的实现模式通常基于平台提供的布局模型和对话模型，因此造成两者之间转换困难。第三，从实现角度来看，界面模式可以看成若干个构件的结构化组织，蕴含固定的布局信息和对话信息，其中，布局信息描述组成模式构件间的布局结构，用于布局模型的实现；对话信息描述组成模式构件间固定的逻辑关系，用于对话模型的实现；目前界面模式中隐含的布局和对话信息缺乏清晰明确的表达方式，开发者难以准确获取这些实现信息，从而造成理解和实现模式的困难，影响界面开发的整体效率。

发明内容

为解决上述问题，本发明提供了一种针对用户界面模式的可视化设计系统及其方法，有效避免了现有技术中难以实现模式、界面的设计和实现模式之间转换困难、开发者难以准确获取实现信息从而造成理解和实现模式的困难以及影响界面开发的整体效率的缺陷。

为了克服现有技术中的不足，本发明提供了一种针对用户界面模式的可视化设计系统及其方法的解决方案，具体如下：

一种针对用户界面模式的可视化设计系统，包括用户界面模式的可视化设计组件UIPVT；

所述用户界面模式的可视化设计组件UIPVT运行在可视化设计终端上；

所述用户界面模式的可视化设计组件UIPVT包括文档生成模块、界面模式布局结构图生成模块和逻辑状态转换图生成模块；

所述文档生成模块用于运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档；

所述界面模式布局结构图生成模块用于运用所述标记语言文档来生成界面模式布局结构图；

所述逻辑状态转换图生成模块用于运用所述标记语言文档来生成逻辑状态转换图。

所述用户界面模式的可视化设计组件UIPVT还包括可视化数据模块、布局模块、渲染模块、交互处理模块以及控制调度模块；

所述可视化数据模块用于为界面模式布局结构图和逻辑状态转换图包括各自的节点和线条这样的元素添加相应的几何信息域，以维护元素的大小、位置这样的信息。

所述布局模块运用界面布局算法，生成几何信息，并将其设置到界面模式布局结构图和逻辑状态转换图的几何域中，该模块为界面模式布局结构图和逻辑状态转换图分别提供树布局中的节点链接布局和图布局中的弹性布局。

所述渲染模块能够通过调度模块被调用，负责对界面模式布局结构图的每一个所述元素按照它自身的大小、颜色或者位置这样的信息进行绘制，并最终将其展现在用户面前。

所述交互处理模块贯穿于所述用户界面模式的可视化设计组件UIPVT的各个模块之中，负责收集并处理各种交互事件，并在必要时将处理结果反作用于各个模块的数据之上。

所述调度模块是整个工具的核心和入口，负责所述用户界面模式的可视化设计组件UIPVT中所有数据的流转以及各个模块之间的调度交互。

所述针对用户界面模式的可视化设计系统的方法，其包括基于可视化标记语言的用户界面模式的描述方法，该描述方法包括如下步骤：

步骤1：首先根据根据用户界面模式的要求中的布局模型将构件抽象成叶子节点Leaf，布局类型抽象成中间节点Branch，构件间的布局嵌套关系Description抽象成所述叶子节点Leaf与中间节点Branch之间的链接，这样就形成了模式呈现信息Structure；所述布局模型能够包括所述用户界面模式的图片说明Illustration；

步骤2：接着根据用户界面模式的要求中的对话模型将构件的状态抽象成状态节点Node，构件的逻辑关系抽象成状态节点之间的链接Edge，这样就形成了模式对话信息Dialog；所述对话模型能够包括用户界面模式的状态方案；

步骤3：在模式呈现信息和模式对话信息的基础上，运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档；

步骤4：运用所述标记语言文档来生成界面模式布局结构图；

步骤5：运用所述标记语言文档来生成逻辑状态转换图。

所述运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档的方式如下：

步骤A-1：首先，根据用户界面模式的要求来得到相关的信息Information:

所述相关的信息Information包括用户界面模式的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution；所述用户界面模式的主题或名称name用于识别该用户界面；所述用户界面模式的图片说明Illustration用于以图片的形式在用户界面上静态展现各控件的布局方式；所述用户界面模式的状态方案Solution用于说明该用户界面上的构件的逻辑关系；

步骤A-2：运用针对用户界面模式的可视化标记语言来把用户界面相关的信息Information的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution分别形成标记语言文档的记录一、标记语言文档的记录二和标记语言文档的记录三；

步骤A-3：运用针对用户界面模式的可视化标记语言来把模式呈现信息形成若干用于表示模式呈现信息的记录；

步骤A-4：运用针对用户界面模式的可视化标记语言来把模式对话信息形成若干用于表示模式对话信息的记录；

这样的所述标记语言文档的记录一、标记语言文档的记录二、标记语言文档的记录三、用于表示模式呈现信息的记录和用于表示模式对话信息的记录就组成了标记语言文档。

所述运用所述标记语言文档来生成界面模式布局结构图包括如下方式：

把所述标记语言文档中的若干用于表示模式呈现信息的记录中的用来表示叶子节点Leaf的信息、布局嵌套关系Description的信息和用来表示中间节点Branch的信息提取出来，然后根据布局嵌套关系Description的信息来用线条把叶子节点Leaf和中间节点Branch链接起来，由此就形成了界面模式布局结构图，所述叶子节点Leaf和中间节点Branch能够直接用其自身的名称在界面模式布局结构图上标示。

所述运用所述标记语言文档来生成逻辑状态转换图包括如下方式：

把所述标记语言文档中的若干用于表示模式对话信息的记录中的构件状态和构件的逻辑关系提取出来，然后把构件状态作为状态节点，再根据各个构件的逻辑关系用线条把各个逻辑关系中所涉及的两个状态节点用线条连接起来构成逻辑状态转换图的图片，然后用文字描述的方式把各个用线条连接起来的两个状态节点的逻辑关系描述在该图片旁，最终形成了逻辑状态转换图，所述状态节点在逻辑状态转换图上能够用设定给该状态节点的ID来表示。

所述模式呈现信息和模式对话信息也能够作为基本信息显示在可视化设计终端的显示器上显示的界面上。

本发明的有益效果为：

本发明采用用户界面模式的可视化标记语言将模式的布局和对话信息进行结构化描述；在此基础上，设计并实现了运用所述用户界面模式的可视化设计组件UIPVT将这种表示的模式信息通过一个可视化框架进行呈现，实现界面模式可视化，减轻开发者实现界面模式的负担，提高了界面开发效率。

附图说明

图1是本发明的相关的信息、模式对话信息和模式呈现信息的示意图。

图2是本发明的用户界面模式的图片说明的示例图。

图3是本发明的界面模式布局结构图的示例图。

图4是本发明的逻辑状态转换图的示例图。

图5是本发明的标记语言文档的示例图。

图6是本发明的开发时间对比图。

图7是本发明的方法的部分流程图。

具体实施方式

下面将结合附图和实施例对本发明做进一步地说明。

如图1-图7所示，针对用户界面模式的可视化设计系统，包括用户界面模式的可视化设计组件UIPVT；

所述用户界面模式的可视化设计组件UIPVT运行在可视化设计终端上；所述可视化设计终端能够是PC机、笔记本电脑、智能手机或者平板电脑。

所述用户界面模式的可视化设计组件UIPVT包括文档生成模块、界面模式布局结构图生成模块和逻辑状态转换图生成模块；

所述文档生成模块用于运用如XML标记语言这样的针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成XML标记语言文档；

所述界面模式布局结构图生成模块用于运用所述XML标记语言文档来生成界面模式布局结构图；

所述逻辑状态转换图生成模块用于运用所述XML标记语言文档来生成逻辑状态转换图。

所述用户界面模式的可视化设计组件UIPVT还包括可视化数据模块、布局模块、渲染模块、交互处理模块以及控制调度模块；

所述可视化数据模块用于为界面模式布局结构图和逻辑状态转换图包括各自的节点和线条这样的元素添加相应的几何信息域，以维护元素的大小、位置这样的信息，比如对节点或线条的位置的移动，对节点或线条的大小的改变这样的维护。

所述布局模块运用现有的各种界面布局算法，生成几何信息，并将其设置到界面模式布局结构图和逻辑状态转换图的几何域中，该模块为界面模式布局结构图和逻辑状态转换图分别提供树布局中的节点链接布局和图布局中的弹性布局。

所述渲染模块能够通过调度模块被调用，负责对界面模式布局结构图的每一个所述元素按照它自身的大小、颜色或者位置这样的信息进行绘制，并最终将其展现在用户面前。这样就能让界面模式布局结构图的布局结构均可映射为树结构，因而就能通过设置的针对其连线和节点的渲染模块进行绘制。

所述交互处理模块贯穿于所述用户界面模式的可视化设计组件UIPVT的各个模块之中，负责收集并处理各种交互事件，并在必要时将处理结果反作用于各个模块的数据之上，例如为用户提供缩小平移控制、节点信息获取、变形、节点展开、突出显示当前节点等交互操作。

所述调度模块是整个工具的核心和入口，负责所述用户界面模式的可视化设计组件UIPVT中所有数据的流转以及各个模块之间的调度交互。

所述针对用户界面模式的可视化设计系统的方法，其包括基于可视化标记语言的用户界面模式的描述方法，该描述方法包括如下步骤：

步骤1：首先根据用户界面模式的要求中的布局模型将构成用户界面的如按钮、输入框或编辑框这样的构件抽象成叶子节点Leaf，布局类型抽象成中间节点Branch，构件间的布局嵌套关系Description抽象成所述叶子节点Leaf与中间节点Branch之间的链接，这样就形成了模式呈现信息Structure，以待后续把模式呈现信息转化为结构化的树形布局结构；所述布局模型能够包括所述用户界面模式的图片说明Illustration；

步骤2：接着根据用户界面模式的要求中的对话模型将构件的状态抽象成状态节点Node，构件的逻辑关系抽象成状态节点之间的链接Edge，这样就形成了模式对话信息Dialog，以待后续将模式对话信息转换为结构化的图状对话结构；所述对话模型能够包括用户界面模式的状态方案；

步骤3：在模式呈现信息和模式对话信息的基础上，运用如XML标记语言这样的针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成XML标记语言文档；

步骤4：运用所述XML标记语言文档来生成界面模式布局结构图；

步骤5：运用所述XML标记语言文档来生成逻辑状态转换图。

所述运用如XML标记语言这样的针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成XML标记语言文档的方式如下：

步骤A-1：首先，根据用户界面模式的要求来得到相关的信息Information:

所述相关的信息Information包括用户界面模式的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution；所述用户界面模式的主题或名称name用于识别该用户界面，有了用户界面模式的主题或名称name，就能对该用户界面有一定的识别作用,比如把一个车票查询界面的主题或名称设定为“车票查询模式”；所述用户界面模式的图片说明Illustration用于以图片的形式在用户界面上静态展现各控件的布局方式，就如图2中的图片说明所示的主题或名称设定为“车票查询模式”的车票查询界面，在该图片上具有作为出发地显示文本构件的标签控件一，该标签控件一所显示的文本为“出发地”，在该图片上还具有作为出发地输入文本构件的文本编辑框一，在该图片上具有作为目的地显示文本构件的标签控件二，该标签控件二所显示的文本为“目的地”，在该图片上还具有作为目的地输入文本构件的文本编辑框二，在该图片上具有作为目的地显示文本构件的标签控件三，该标签控件三所显示的文本为“出发时间”，在该图片上还具有作为时间输入文本构件的文本编辑框三，在该图片上还具有作为查询按钮的功能按钮，这样对应该图片的模式呈现信息就为：所述标签控件一和文本编辑框一之间为水平线性排列，这样就形成了水平线性排列一结构；所述标签控件二和文本编辑框二之间为水平线性排列，这样就形成了水平线性排列二结构；所述标签控件三和文本编辑框三之间为水平线性排列，这样就形成了水平线性排列三结构；水平线性排列一结构、水平线性排列二结构、水平线性排列三结构和作为查询按钮的功能按钮为垂直线性排列；所述用户界面模式的状态方案Solution用于用文字信息说明该用户界面上的构件的逻辑关系；就如主题或名称设定为“车票查询模式”的车票查询界面的状态方案Solution为：该模块主要包含四大部分：输入出发城市区域、输入抵达城市区域、输入出发时间区域以及用于确认的查询按钮组成；这里输入出发城市区域包括标签控件一和文本编辑框一，输入抵达城市区域包括标签控件二和文本编辑框二，输入出发时间区域包括标签控件三和文本编辑框三，用于确认的查询按钮包括作为查询按钮的功能按钮，由此就能得出更为具体的逻辑关系：信息在该主题或名称设定为“车票查询模式”的车票查询界面在初始化时，也就是在起始状态下，用户能够对文本编辑框一、文本编辑框二和文本编辑框三进行输入，也就是说，对应的模式对话信息为：在所述初始状态下，文本编辑框一、文本编辑框二和文本编辑框三是可选的；用户对作为查询按钮的功能按钮的按压操作无效，用户对作为查询按钮的功能按钮的按压操作只能在用户对文本编辑框一、文本编辑框二和文本编辑框三完成输入后方能有效实现按压操作，也就是说，对应的模式对话信息为：作为查询按钮的功能按钮在所述初始化状态下是禁止的，因为初始化状态时还没有对文本编辑框一、文本编辑框二和文本编辑框三进行输入，按压查询按钮是没有意义和作用的，于是作为查询按钮的功能按钮和文本编辑框一带有信息异步关系，作为查询按钮的功能按钮和文本编辑框二带有信息异步关系，作为查询按钮的功能按钮和文本编辑框三带有信息异步关系；文本编辑框一和文本编辑框二不能同时输入，文本编辑框二和文本编辑框三不能同时输入，也就是说，对应的模式对话信息为：文本编辑框一和文本编辑框二为选择关系，文本编辑框二和文本编辑框三为选择关系。

步骤A-2：运用如XML标记语言这样的针对用户界面模式的可视化标记语言来把用户界面相关的信息Information的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution分别形成XML标记语言文档的记录一、XML标记语言文档的记录二和XML标记语言文档的记录三；就如所述主题或名称设定为“车票查询模式”的车票查询界面运用如XML标记语言这样的针对用户界面模式的可视化标记语言来把与该用户界面相关的信息Information的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution分别形成XML标记语言文档的记录一、XML标记语言文档的记录二和XML标记语言文档的记录三，该三条记录就由下述语句形成：

<information>

<name>车票查询模式</name>

<illustration>f:\example\booking.jpg</illustration>

<solution>该模块主要包含四大部分，输入出发城市区域、输入抵达城市区域、输入出发时间区域以及确认查询按钮组成</solution>

</information>

这里，f:\example\booking.jpg就是图2所示的图片，记录一就为：<name>车票查询模式</name>；记录二为：

<illustration>f:\example\booking.jpg</illustration>；

记录三为：<solution>该模块主要包含四大部分，输入出发城市区域、输入抵达城市区域、输入出发时间区域以及确认查询按钮组成</solution>；

步骤A-3：运用如XML标记语言这样的针对用户界面模式的可视化标记语言来把模式呈现信息形成若干用于表示模式呈现信息的记录；就如上述的“所述标签控件一和文本编辑框一之间为水平线性排列，所述标签控件二和文本编辑框二之间为水平线性排列”这样的模式呈现信息，运用如XML标记语言这样的针对用户界面模式的可视化标记语言来把“所述标签控件一和文本编辑框一之间为水平线性排列，所述标签控件二和文本编辑框二之间为水平线性排列”这样的模式呈现信息形成两个用于表示模式呈现信息的记录，该两个记录就由下述语句形成：

就构成一个记录来表示“所述标签控件一和文本编辑框一之间为水平线性排列”这样的模式呈现信息；

其中：

就构成另一个记录来表示“所述标签控件二和文本编辑框二之间为水平线性排列”这样的模式呈现信息；

步骤A-4：运用如XML标记语言这样的针对用户界面模式的可视化标记语言来把模式对话信息形成若干用于表示模式对话信息的记录；

就如上述的“在所述初始状态下，文本编辑框一、文本编辑框二和文本编辑框三是可选的”这样的模式对话信息，运用如XML标记语言这样的针对用户界面模式的可视化标记语言来把“在所述初始状态下，文本编辑框一、文本编辑框二和文本编辑框三是可选的”这样的模式对话信息形成对应的记录，该对应的记录就由下述语句形成：

这样的记录用来表示“在所述初始状态下，文本编辑框一、文本编辑框二和文本编辑框三是可选的”这样的模式对话信息。

这样的所述XML标记语言文档的记录一、XML标记语言文档的记录二、XML标记语言文档的记录三、用于表示模式呈现信息的记录和用于表示模式对话信息的记录就组成了XML标记语言文档。

所述运用所述XML标记语言文档来生成界面模式布局结构图包括如下方式：

把所述XML标记语言文档中的若干用于表示模式呈现信息的记录中的用来表示叶子节点Leaf的信息、布局嵌套关系Description的信息和用来表示中间节点Branch的信息提取出来，然后根据布局嵌套关系Description的信息来用线条把叶子节点Leaf和中间节点Branch链接起来，由此就形成了界面模式布局结构图，所述叶子节点Leaf和中间节点Branch能够直接用其自身的名称在界面模式布局结构图上标示。就如上述的用于表示模式呈现信息的记录中的一个记录：

在这个记录中，提取的叶子节点的信息就是“出发地显示文本构件”和“出发地输入文本构件”，提取的中间节点的信息就是“水平线性”，提取的布局嵌套关系的信息就是处于该记录的外层的作为中间节点的信息的“水平线性”来约束处于该记录的内层的作为叶子节点的信息的“出发地显示文本构件”和“出发地输入文本构件”的布局，该布局也就是“出发地显示文本构件”和“出发地输入文本构件”为水平线性排列，这样就在界面模式布局结构图上用“水平线性”自身的名称，也就是“水平线性”的文本信息，作为中间节点，而在界面模式布局结构图上用“出发地显示文本构件”和“出发地输入文本构件”自身的名称，也就是“出发地显示文本构件”和“出发地输入文本构件”的文本信息，分别作为两个叶子节点，然后从该中间节点中用两条线分别把该两个叶子节点连接起来，通过这样的方式就把所述用于表示模式呈现信息的记录中的其余的叶子节点和中间节点连接起来形成如图3所示的界面模式布局结构图。

所述运用所述XML标记语言文档来生成逻辑状态转换图包括如下方式：

把所述XML标记语言文档中的若干用于表示模式对话信息的记录中的构件状态和构件的逻辑关系提取出来，然后把构件状态作为状态节点，再根据各个构件的逻辑关系用线条把各个逻辑关系中所涉及的两个状态节点用线条连接起来构成逻辑状态转换图的图片，然后用文字描述的方式把各个用线条连接起来的两个状态节点的逻辑关系描述在该图片旁，最终形成了逻辑状态转换图，所述状态节点在逻辑状态转换图上能够用设定给该状态节点的ID来表示。就如上述的由下述语句形成的用于表示模式对话信息的记录：

在这个记录中，提取的构件状态就是“起始状态”、“出发地文本构件状态”、“目标地文本构件状态”和“出发时间文本构件状态”，给“起始状态”设定的ID为W0，给“出发地文本构件状态”设定的ID为W1，给“目标地文本构件状态”设定的ID为W2，给“出发时间文本构件状态”设定的ID为W3，提取的构件的逻辑关系就是：ID为W0的构件状态与ID为W1的构件状态为可选关系，ID为W0的构件状态与ID为W2的构件状态为可选关系，ID为W0的构件状态与ID为W3的构件状态为可选关系；这样就在逻辑状态转换图上用给构件状态设定的ID作为状态节点，然后把具有逻辑关系的状态节点之间用线条连接起来来构成逻辑状态转换图的图片，然后用文字描述的方式把各个用线条连接起来的两个状态节点的逻辑关系描述在该图片旁，通过这样的方式就把所述用于表示模式对话信息的记录中的其余的构件状态和构件的逻辑关系图形化来形成如图4所示的逻辑状态转换图。

所述模式呈现信息和模式对话信息也能够作为基本信息显示在可视化设计终端的显示器上显示的界面上。这样便于查询。

从效率方面进行评估，以开发时间作为可量化的标准进行评估，分别记录使用所述用户界面模式的可视化设计组件UIPVT与不使用所述用户界面模式的可视化设计组件UIPVT，通过实现界面模式完成界面开发所花费的平均时间，得到图6的结果，可知通过所述用户界面模式的可视化设计组件UIPVT节省了大约三分之一的开发时间，由此证明，所述用户界面模式的可视化设计组件UIPVT可以降低程序员开发时间，降低劳动量，提高界面开发的速率。

这样综合运用图形、色彩、文字等视觉元素，并融入交互操作来传达界面模式布局结构信息和对话逻辑信息，从而帮助用户将各个孤立构件组织为界面模式，高效实现模式，提高界面开发效率。

以上以用实施例说明的方式对本发明作了描述，本领域的技术人员应当理解，本公开不限于以上描述的实施例，在不偏离本发明的范围的情况下，可以做出各种变化、改变和替换。

Claims (5)

1.一种针对用户界面模式的可视化设计系统，其特征在于，包括用户界面模式的可视化设计组件UIPVT；

所述用户界面模式的可视化设计组件UIPVT运行在可视化设计终端上；

所述用户界面模式的可视化设计组件UIPVT包括文档生成模块、界面模式布局结构图生成模块和逻辑状态转换图生成模块；

所述文档生成模块用于运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档；

所述界面模式布局结构图生成模块用于运用所述标记语言文档来生成界面模式布局结构图；

所述逻辑状态转换图生成模块用于运用所述标记语言文档来生成逻辑状态转换图；

所述用户界面模式的可视化设计组件UIPVT还包括可视化数据模块、布局模块、渲染模块、交互处理模块以及控制调度模块；

所述可视化数据模块用于为界面模式布局结构图和逻辑状态转换图包括各自的节点和线条这样的元素添加相应的几何信息域，以维护元素的大小、位置这样的信息；

所述布局模块运用界面布局算法，生成几何信息，并将其设置到界面模式布局结构图和逻辑状态转换图的几何域中，该模块为界面模式布局结构图和逻辑状态转换图分别提供树布局中的节点链接布局和图布局中的弹性布局。

2.根据权利要求1所述的针对用户界面模式的可视化设计系统，其特征在于，所述渲染模块能够通过调度模块被调用，负责对界面模式布局结构图的每一个所述元素按照它自身的大小、颜色或者位置这样的信息进行绘制，并最终将其展现在用户面前。

3.根据权利要求1所述的针对用户界面模式的可视化设计系统，其特征在于，所述交互处理模块贯穿于所述用户界面模式的可视化设计组件UIPVT的各个模块之中，负责收集并处理各种交互事件，并按照设定将处理结果反作用于各个模块的数据之上。

4.根据权利要求1所述的针对用户界面模式的可视化设计系统，其特征在于，所述调度模块是整个工具的核心和入口，负责所述用户界面模式的可视化设计组件UIPVT中所有数据的流转以及各个模块之间的调度交互。

5.一种针对用户界面模式的可视化设计系统的方法，其特征在于，其包括基于可视化标记语言的用户界面模式的描述方法，该描述方法包括如下步骤：

步骤1：首先根据用户界面模式的要求中的布局模型将构件抽象成叶子节点Leaf，布局类型抽象成中间节点Branch，构件间的布局嵌套关系Description抽象成所述叶子节点Leaf与中间节点Branch之间的链接，这样就形成了模式呈现信息Structure；所述布局模型能够包括所述用户界面模式的图片说明Illustration；

步骤2：接着根据用户界面模式的要求中的对话模型将构件的状态抽象成状态节点Node，构件的逻辑关系抽象成状态节点之间的链接Edge，这样就形成了模式对话信息Dialog；所述对话模型能够包括用户界面模式的状态方案；

步骤3：在模式呈现信息和模式对话信息的基础上，运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档，具体包括如下步骤，步骤A-1：首先，根据用户界面模式的要求来得到相关的信息Information:

所述相关的信息Information包括用户界面模式的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution；所述用户界面模式的主题或名称name用于识别该用户界面；所述用户界面模式的图片说明Illustration用于以图片的形式在用户界面上静态展现各控件的布局方式；所述用户界面模式的状态方案Solution用于说明该用户界面上的构件的逻辑关系；

步骤A-2：运用针对用户界面模式的可视化标记语言来把用户界面相关的信息Information的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution分别形成标记语言文档的记录一、标记语言文档的记录二和标记语言文档的记录三；

步骤A-3：运用针对用户界面模式的可视化标记语言来把模式呈现信息形成若干用于表示模式呈现信息的记录；

步骤A-4：运用针对用户界面模式的可视化标记语言来把模式对话信息形成若干用于表示模式对话信息的记录；

这样的所述标记语言文档的记录一、标记语言文档的记录二、标记语言文档的记录三、用于表示模式呈现信息的记录和用于表示模式对话信息的记录就组成了标记语言文档；

步骤4：运用所述标记语言文档来生成界面模式布局结构图，包括如下方式：

把所述标记语言文档中的若干用于表示模式呈现信息的记录中的用来表示叶子节点Leaf的信息、布局嵌套关系Description的信息和用来表示中间节点Branch的信息提取出来，然后根据布局嵌套关系Description的信息来用线条把叶子节点Leaf和中间节点Branch链接起来，由此就形成了界面模式布局结构图，所述叶子节点Leaf和中间节点Branch能够直接用其自身的名称在界面模式布局结构图上标示；

步骤5：运用所述标记语言文档来生成逻辑状态转换图，包括如下方式：把所述标记语言文档中的若干用于表示模式对话信息的记录中的构件状态和构件的逻辑关系提取出来，然后把构件状态作为状态节点，再根据各个构件的逻辑关系用线条把各个逻辑关系中所涉及的两个状态节点用线条连接起来构成逻辑状态转换图的图片，然后用文字描述的方式把各个用线条连接起来的两个状态节点的逻辑关系描述在该图片旁，最终形成了逻辑状态转换图，所述状态节点在逻辑状态转换图上能够用设定给该状态节点的ID来表示，所述状态节点的ID包括构件状态的起始状态的W0、出发地文本构件状态W1、目标地文本构件状态W2和出发时间文本构件状态W3。

Images