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

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

【技术实现步骤摘要】
针对用户界面模式的可视化设计系统及其方法
本专利技术涉及界面模式设计
，具体涉及一种针对用户界面模式的可视化设计系统及其方法。
技术介绍
UI即UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。通过对用户界面设计不同需求进行的分类以及用户界面设计元素对用户行为的影响，来研究用户在用户界面设计中所体现的重要性。交互性已经成为用户界面设计中设计追求的目标。高质量界面开发是一项困难的工作，通常包括界面设计和实现两部分。由于界面模式是对过去高质量用户界面设计经验的总结，目前，界面设计阶段广泛采用了基于模式的用户界面设计方法和技术。而现有界面开发是在一个确定平台上，平台提供界面构件(如按钮，输入框等)来构造界面，平台并未对模式的实现提供支持，因而需要开发者在构件层上通过实现模式来完成，造成了设计与实现之间的距离而相互脱节。设计与实现之间的距离使得基于模式的界面开发本文档来自技高网...

【技术保护点】
1.一种针对用户界面模式的可视化设计系统，其特征在于，包括用户界面模式的可视化设计组件UIPVT；/n所述用户界面模式的可视化设计组件UIPVT运行在可视化设计终端上；/n所述用户界面模式的可视化设计组件UIPVT包括文档生成模块、界面模式布局结构图生成模块和逻辑状态转换图生成模块；/n所述文档生成模块用于运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档；/n所述界面模式布局结构图生成模块用于运用所述标记语言文档来生成界面模式布局结构图；/n所述逻辑状态转换图生成模块用于运用所述标记语言文档来生成逻辑状态转换图。/n

【技术特征摘要】
1.一种针对用户界面模式的可视化设计系统，其特征在于，包括用户界面模式的可视化设计组件UIPVT；
所述用户界面模式的可视化设计组件UIPVT运行在可视化设计终端上；
所述用户界面模式的可视化设计组件UIPVT包括文档生成模块、界面模式布局结构图生成模块和逻辑状态转换图生成模块；
所述文档生成模块用于运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档；
所述界面模式布局结构图生成模块用于运用所述标记语言文档来生成界面模式布局结构图；
所述逻辑状态转换图生成模块用于运用所述标记语言文档来生成逻辑状态转换图。


2.根据权利要求1所述的针对用户界面模式的可视化设计系统，其特征在于，所述用户界面模式的可视化设计组件UIPVT还包括可视化数据模块、布局模块、渲染模块、交互处理模块以及控制调度模块；
所述可视化数据模块用于为界面模式布局结构图和逻辑状态转换图包括各自的节点和线条这样的元素添加相应的几何信息域，以维护元素的大小、位置这样的信息。


3.根据权利要求2所述的针对用户界面模式的可视化设计系统，其特征在于，所述布局模块运用界面布局算法，生成几何信息，并将其设置到界面模式布局结构图和逻辑状态转换图的几何域中，该模块为界面模式布局结构图和逻辑状态转换图分别提供树布局中的节点链接布局和图布局中的弹性布局。


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


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


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


7.一种针对用户界面模式的可视化设计系统的方法，其特征在于，其包括基于可视化标记语言的用户界面模式的描述方法，该描述方法包括如下步骤：
步骤1：首先根据用户界面模式的要求中的布局模型将构件抽象成叶子节点Leaf，布局类型抽象成中间节点Branch，构件间的布局嵌套关系Description抽象成所述叶子节点Leaf与中间节点Branch之间的链接，这样就形成了模式呈现信息Structure；所述布局模型能够包括所述用户界面模式的图片说明Illustration；
步骤2：接着根据用户界面模式的要求中的对话模型将构件的状态抽象成状态节点Node，构件的逻辑关系抽象成状态节点之间的链接Edge，这样就形成了模式对话信息Dialog；所述对话模型能够包括用户界面模式的状态方案；
步骤3：在模式呈现信息和模式对话信息的基...

【专利技术属性】
技术研发人员：钱洋，华庆一，姬翔，张欣欣，
申请(专利权)人：西北大学，
类型：发明
国别省市：陕西;61