CN102135873B - 一种创建用户界面的方法和装置 - Google Patents

Abstract

本发明公开了一种创建用户界面的方法，包括以下步骤：根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序；构建所述可执行程序的视图模型层，通过所述视图模型层向所述可执行程序的界面层提供数据接口，运行所述可执行程序，获取所述可执行程序对应的用户界面。通过使用本发明，能够提高创建用户界面的工作效率。本发明同样公开了一种应用上述方法的装置。

Description

一种创建用户界面的方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种创建客户端界面的方法和装置。

背景技术

随着网络技术的发展和网络影响的扩大，网络即时通讯工具已经被大多数的网络用户所接受，成为网络用户必不可少的软件工具，在用户平时的休闲娱乐中和用户的工作中得到广泛的使用。与此同时，用户对IM(InstantMessaging，即时通讯)软件的易用性、稳定性和安全性等方面提出了较高的要求，对IM的界面表现能力的要求也不断提高，需要程序员和设计师能够更高效的沟通合作，提高工作效率。

目前，个性化和人性化是IM界面设计的趋势。为了满足个性化，IM界面上越来越多地采用非标准化控件。控件形状不规则，控件的排列方式也突破传统方式。界面上利用各种不同的颜色、图片、矢量图形来增加界面的立体感。通常界面还要求有换肤功能，呈现不同主题和色调，导致界面设计师的工作量非常大。而且传统的“九宫格”方式的界面绘制方法也越来越不能应对各种新需求了。为了体现人性化，IM界面上需要使用大量的动画效果。界面设计师通常使用Flash等工具制作动画，制作出来的动画无法被程序员直接使用，程序员还需要使用代码实现部分动画。

发明人在实现本发明的过程中，发现现有技术至少存在以下缺陷：

现有技术中，IM软件的开发离不开程序员和设计师的共同努力，但是由于程序员和设计师工作中使用的工具不一样，输出文件格式不一样，设计师使用Photo Shop等工具绘制一次界面后，程序员在程序中又要重新绘制一次界面；设计师利用Flash制作动画，程序员还要在代码中重新实现动画逻辑，导致沟通成本高，界面开发过程中存在大量的重复劳动。

另外，由于IM界面中的动画涉及到更多的细节，包括时间、加速度、惯性效果和运动路径等不适合代码表达的元素，程序员在代码中重现设计师创作的界面和动画时，由于不能理解设计师的思路，无法完全还原设计师的方案，会导致表达失真，程序员的输出文件的表现效果与设计师输出文件效果表现不一致。

此外，由于设计师的作品，包括Photo Shop文件和Flash文件，不是文本文件，不利于不同版本文件之间的比较，且设计师一般通过复制文件的方式进行版本管理，文件太多时容易造成管理混乱和版本混乱。程序员和设计师通常利用邮件附件交换文件，不仅沟通速度慢，而且会造成大量的文件冗余，不利于维护。

发明内容

本发明提供了一种创建用户界面的方法和装置，用于提高创建用户界面的工作效率。

本发明提供了一种创建用户界面的方法，包括以下步骤：

根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序；

构建所述可执行程序的视图模型层，通过所述视图模型层向所述可执行程序的界面层提供数据接口，运行所述可执行程序，获取所述可执行程序对应的用户界面。

优选地，所述生成界面原型对应的可执行程序之后，还包括：

构建所述可执行程序的样本数据层，通过所述样本数据层访问本地数据文件，对所述界面原型进行模拟操作，检验所述界面原型的动态响应。

优选地，所述生成界面原型对应的可执行程序之后，还包括：

构建所述可执行程序的真实数据层，通过所述真实数据层访问数据库和/或服务器数据。

优选地，所述生成界面原型对应的可执行程序之后，还包括：

在所述视图模型层创建样本数据和真实数据的切换开关，通过所述切换开关调整所述可执行程序的运行环境，使所述可执行程序独立运行或者在主程序中被调用。

优选地，所述根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序，包括：

根据需求和业务逻辑绘制所述界面原型的基础界面，指定所述基础界面上包含的控件元素以及所述控件元素在所述基础界面上的排布方式；

生成动画模版，将所述动画模版存储到本地资源中，根据用户交互的需求添加动画播放触发器，并设定所述动画播放触发器与所述动画模版的对应关系；

生成并运行所述界面原型对应的可执行程序，查看所述可执行程序的运行结果，验证动画是否正确触发，当所述动画正确触发时，将所述可执行程序提交到代码服务器。

本发明还提供了一种创建用户界面的装置，包括：

生成模块，用于根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序；

构建模块，用于构建所述生成模块生成的可执行程序的视图模型层，通过所述视图模型层向所述可执行程序的界面层提供数据接口；

获取模块，用于运行所述生成模块生成的可执行程序，获取所述可执行程序对应的用户界面。

优选地，所述构建模块，还用于构建所述可执行程序的样本数据层，通过所述样本数据层访问本地数据文件，对所述界面原型进行模拟操作，检验所述界面原型的动态响应。

优选地，所述构建模块，还用于构建所述可执行程序的真实数据层，通过所述真实数据层访问数据库和/或服务器数据。

优选地，所述构建模块，还用于在所述视图模型层创建样本数据和真实数据的切换开关，通过所述切换开关调整所述可执行程序的运行环境，使所述可执行程序独立运行或者在主程序中被调用。

优选地，所述生成模块，具体用于根据需求和业务逻辑绘制所述界面原型的基础界面，指定所述基础界面上包含的控件元素以及所述控件元素在所述基础界面上的排布方式；生成动画模版，将所述动画模版存储到本地资源中，根据用户交互的需求添加动画播放触发器，并设定所述动画播放触发器与所述动画模版的对应关系；生成并运行所述界面原型对应的可执行程序，查看所述可执行程序的运行结果，验证动画是否正确触发，当所述动画正确触发时，将所述可执行程序提交到代码服务器。

与现有技术相比，本发明具有以下优点：通过使用本发明，构建可执行程序的分层架构，可以加强客户端之间的协同工作，减少客户端之间的重复劳动，有效管理程序开发过程中的各个中间版本，使可执行程序能够符合设计思路，并提高用户界面的个性化和人性化。

附图说明

为了更清楚地说明本发明或现有技术中的技术方案，下面将对本发明或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明中的一种创建用户界面的方法流程图；

图2为用户界面对应的可执行程序的分层架构示意图；

图3为本发明中的创建用户界面的系统架构图；

图4为本发明应用场景中的创建用户界面流程图；

图5为设计客户端绘制的界面效果图；

图6为程序客户端完成的界面原型示意图；

图7为设计客户端第一次美化后得到的界面示意图；

图8为程序客户端对界面交互逻辑修改后的结果示意图；

图9为设计客户端将体验卡片加入分组中的动画过程示意图；

图10为调整后最终得到的界面示意图；

图11为本发明中的一种创建用户界面的装置结构示意图。

具体实施方式

下面将结合本发明中的附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，为本发明中的一种创建用户界面的方法流程图，包括以下步骤：

步骤101，根据用户界面的界面交互逻辑创建用户界面的界面原型，生成该界面原型对应的可执行程序。

具体地，上述根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序，包括：根据需求和业务逻辑绘制所述界面原型的基础界面，指定所述基础界面上包含的控件元素以及所述控件元素在所述基础界面上的排布方式；生成动画模版，将所述动画模版存储到本地资源中，根据用户交互的需求添加动画播放触发器，并设定所述动画播放触发器与所述动画模版的对应关系；生成并运行所述界面原型对应的可执行程序，查看所述可执行程序的运行结果，验证动画是否正确触发，当所述动画正确触发时，将所述可执行程序提交到代码服务器。

此外，在生成界面原型对应的可执行程序之后，可以构建所述可执行程序的样本数据层，通过所述样本数据层访问本地数据文件，对所述界面原型进行模拟操作，检验所述界面原型的动态响应；也可以构建所述可执行程序的真实数据层，通过所述真实数据层访问数据库和/或服务器数据；还可以在所述视图模型层创建样本数据和真实数据的切换开关，通过所述切换开关调整所述可执行程序的运行环境，使所述可执行程序独立运行或者在主程序中被调用。

步骤102，构建可执行程序的视图模型层，通过该视图模型层向可执行程序的界面层提供数据接口，运行可执行程序，获取该可执行程序对应的用户界面。

具体地，可执行程序可以分为三层：界面层、视图模型层和数据层，每层都只从下一层获取数据，并对上一层提供数据操作接口，不允许下层调用上层，也不允许跨层访问。上述三个层都需要访问的通用功能封装在辅助工具库中，如图2所示。界面层和视图模型层之间还有属性管理器和命令管理器进行辅助沟通。

其中，数据层的任务是访问数据源，从数据源中获得数据，进行格式化处理后提供给上一层，并对上层提供增加、删除、修改、查询等数据操作接口，并执行具体操作。上述数据源可以是文件、数据库、网络服务器等各种类型。视图模型层通过数据层访问数据，无法获知具体的数据源的类型。例如，IM系统中联系人信息，如表1所示：

表1 联系人信息表

字段名称
	ID
姓
	名
所属分组名称
	头像地址

上述信息以二进制的形式保存在服务器中，数据层从服务器获得原始二进制数据后，进行格式化提供给视图模型层。格式化后的联系人信息表，如表2所示。

表2 格式化后的联系人信息表

字段名称	类型
		ID	整型
姓	字符串
		名	字符串
所属分组名称	字符串
		头像地址	字符串

数据层提供的操作接口包括：增加联系人、删除联系人、修改联系人信息和查询联系人。

视图模型层的任务是对界面层提供便于界面显示的数据模型，并对界面层提供业务逻辑操作接口。视图模型层对数据层获得的原始数据进行加工整理，并提供对原始数据的增、删、改、查等接口。

视图模型层可以不保存任何原始数据，例如，假设原始数据分别保存了用户的“姓”和“名”的数据，如果界面要显示用户的“全名”，则视图模型层提供“全名”接口，在界面层向视图模型层索取“全名”的信息时，视图模型层从数据层读取“姓”和“名”的信息，然后动态组合成“全名”的数据，传递给界面层。

为了使用方便或基于性能方面的考虑，视图模型层也可以保存原始数据，例如，用户头像的信息在原始数据中保存的是一个图片文件的网络地址，也可能是不方便使用的二进制数据。视图模型层将原始数据进行加工，保存为方便读取的内存图片数据，界面层可以通过视图模型层提供的“用户头像”接口得到可直接显示的图片数据。

视图模型层还要根据业务逻辑从原始数据中生成新的数据，并对新数据提供增、删、改、查等接口。例如，界面需要按组显示联系人，并显示每组的联系人数量，视图模型层提供的数据模型包括联系人对象模型和分组对象模型，分别如表3和表4所示。

表3 联系人对象模型表

字段名称	类型
		ID	整型
姓	字符串
		名	字符串
全名	字符串
		所属分组名称	字符串
分组	对象
		头像地址	字符串
头像	图像

表4 分组对象模型表

字段名称	类型
		名称	字符串
联系人数量	整型
		联系人	数组

视图模型层提供的操作接口有联系人操作接口和分组操作接口，其中，联系人操作接口包括增加联系人、删除联系人、修改联系人信息、查询联系人和更改联系人分组信息；分组操作接口包括增加分组、删除分组、修改分组名称和查询分组。

界面层的任务是根据业务逻辑显示业务数据，响应用户操作，向用户提供业务逻辑操作接口。界面层采用微软WPF(Windows PresentationFoundation，窗口演示基础)技术构建，界面部分使用基于XML(eXtensibleMarkup Language，可扩展标记语言)技术的描述语言XAML(eXtensibleApplication Markup Language，可扩展应用程序标记语言)编写，界面逻辑用程序语言编写。由XAML编写的界面可以由界面设计软件Blend进行修改。Blend的界面和操作方法与设计师常用的工具非常接近。XAML语言可以描述界面包含的元素、元素之间的布局以及元素在用户操作过程中何时播放何种动画。

通过使用本发明，构建可执行程序的分层架构，可以加强客户端之间的协同工作，减少客户端之间的重复劳动，有效管理程序开发过程中的各个中间版本，使可执行程序能够符合设计思路，并提高用户界面的个性化和人性化。

本发明中的创建用户界面的方法适用于包括设计客户端310、程序客户端320和代码服务器330的系统架构中，如图3所示。其中，设计客户端310、程序客户端320和代码服务器330通过网络连接，设计客户端310和程序客户端320共同编辑同一代码工程，该代码工程在设计客户端310和程序客户端320上都可以实现“可视化”、“可运行”和“可管理”。设计客户端310利用可视化编程工具直接绘制程序界面，程序客户端320编写的用户交互逻辑和数据操作也可以直接在设计客户端310体现。设计客户端310和程序客户端320每次操作后的代码工程均会上传到代码服务器330，即设计客户端310和程序客户端320的所有操作都受到代码服务器330的源代码管理软件的控制，所有程序的变更都是受监控、可追溯的。

以下结合上述应用场景，对本发明中的创建用户界面的方法进行详细、具体的描述。

如图4所示，为本发明应用场景中的创建用户界面流程图，具体包括以下步骤：

步骤401，设计客户端和程序客户端确定界面交互逻辑。

其中，界面交互逻辑包括以下内容：

a)界面向用户提供的功能、用户可以进行的操作；

b)界面上的元素、元素的布局；

c)用户在界面上的交互方式、可以操作的元素、元素的操作方式、操作后界面的表现；

d)界面上涉及到动画的地方和操作，动画表现形式。

步骤402，设计客户端绘制界面效果图。

具体地，设计客户端可以利用Photo Shop等工具绘制界面效果图，如图5所示。根据界面所包含的状态和元素的多少，界面效果图可以是一张或多张。

步骤403，程序客户端参照界面效果图，利用XAML绘制界面原型。

具体地，程序客户端根据需求和业务逻辑绘制程序界面的基础界面，指定界面上包含的控件元素以及该控件元素在界面上的排布方式；生成最简单的动画模版，将该动画模版存放在资源中；根据用户交互的需求添加动画播放触发器，并设定该动画播放触发器与资源中的动画模版的对应关系；生成可执行程序，可以在运行时查看界面，进行交互，验证动画是否正确触发；验证结束后，提交工程到代码管理器。如图6所示，为程序客户端完成的界面原型示意图。

步骤404，设计客户端从代码管理器获得工程文件，利用Blend打开该工程文件，并在Blend中完善界面。

具体地，设计客户端调整基面元素的布局，调节界面的色调风格和每个元素的配色方案，调整动画中界面元素的变化细节，包括大小、颜色、时间、速度、加速度和运动曲线；执行程序，在运行时验证界面效果。如图7所示，为设计客户端第一次美化后得到的界面示意图。

步骤405，程序客户端对界面元素添加功能。

具体地，程序客户端可以利用自定义控件等方式编写控制界面元素交互逻辑的代码，响应用户的鼠标、键盘等事件；还可以对界面元素的显示逻辑进行控制。例如，程序客户端可以在效果图中对分组列表进行弧线排列，还可以对界面元素的布局逻辑进行调整。如图8所示，为程序客户端对界面交互逻辑修改后的结果示意图。

步骤406，程序客户端编写视图模型层。

具体地，程序客户端增加数据接口和操作方法；实现内部业务逻辑，例如：更换好友分组、添加好友、删除好友和添加分组等操作；连接视图层和界面层，进行调试；运行可执行程序，验证业务逻辑正确。

步骤407，程序客户端编写样本数据层。

其中，样本数据层是一种简化的数据层，与真实数据层访问和操作数据库或服务器上的数据不同，样本数据层一般访问本地数据文件，对数据的增加和删除操作一般也仅限在内存完成，不回写到数据文件中，能够降低工程复杂性，减少出错机会，也减少工程对于其他系统的依赖。

样本数据层完成后，可以在界面上进行模拟操作，有助于检验用户在进行各种操作时界面的动态响应。设计客户端可以在可执行程序上反复推敲用户交互细节，包括界面上的动画播放时间、速度、加速度等参数。设计客户端修改参数后，可以运行工程进行体验，一旦确定可以保存工程到代码服务器。设计客户端的修改成果就可以立即反映到真实工程上了。如图9所示，为设计客户端将体验卡片加入分组中的动画过程示意图。

步骤408，程序客户端和设计客户端完善界面。

具体地，程序客户端和设计客户端借助代码服务器的CheckIn，CheckOut功能并行开发，不断完善界面。其中，程序客户端主要编写界面交互逻辑代码。丰富界面元素；设计客户端不断优化界面表现，包括颜色、线条和动画等细节。借助代码服务器，程序客户端和设计客户端都可以对各自的操作结果进行有效的追踪、对比和版本控制，避免由于误操作造成不可挽回的损失。

步骤409，程序客户端编写真实数据层代码。

由于所有界面交互操作都是基于样本数据编写进行的，因此，在将程序模块合入到主工程时，需要使用真实数据。由于数据层只被视图模型层调用，所以真实数据层不会影响到界面交互逻辑。根据需要，程序员还可以在视图模型层增加真实数据/样本数据切换开关，使得程序模块既可以独立运行又可以在主程序中被调用。

步骤410，对界面交互调试完毕后，将程序模块合并到主工程，开始对下一个界面模块进行迭代。

如图10所示，为调整后最终得到的界面示意图。

需要说明的是，本发明方法可以根据实际需要对各个步骤顺序进行调整。

通过使用本发明，构建可执行程序的分层架构，可以加强客户端之间的协同工作，减少客户端之间的重复劳动，有效管理程序开发过程中的各个中间版本，使可执行程序能够符合设计思路，并提高用户界面的个性化和人性化。通过构建样本数据层，有助于检验用户在进行各种操作时界面的动态响应，能够降低工程复杂性，减少出错机会，也减少工程对于其他系统的依赖；通过构建真实数据层，可以在不影响界面交互逻辑的前提下，将调试完毕的程序模块合并到主工程中，以便于进行下一界面模块的迭代。

本发明在上述实施方式中提供了创建用户界面的方法和应用场景，相应地，本发明还提供了应用上述创建用户界面的方法的装置。

如图11所示，为本发明中的一种创建用户界面的装置结构示意图，包括：

生成模块510，用于根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序。

上述生成模块510，具体用于根据需求和业务逻辑绘制所述界面原型的基础界面，指定所述基础界面上包含的控件元素以及所述控件元素在所述基础界面上的排布方式；生成动画模版，将所述动画模版存储到本地资源中，根据用户交互的需求添加动画播放触发器，并设定所述动画播放触发器与所述动画模版的对应关系；生成并运行所述界面原型对应的可执行程序，查看所述可执行程序的运行结果，验证动画是否正确触发，当所述动画正确触发时，将所述可执行程序提交到代码服务器。

构建模块520，用于构建生成模块510生成的可执行程序的视图模型层，通过所述视图模型层向所述可执行程序的界面层提供数据接口。

上述构建模块520，还用于构建所述可执行程序的样本数据层，通过所述样本数据层访问本地数据文件，对所述界面原型进行模拟操作，检验所述界面原型的动态响应。

上述构建模块520，还用于构建所述可执行程序的真实数据层，通过所述真实数据层访问数据库和/或服务器数据。

上述构建模块520，还用于在所述视图模型层创建样本数据和真实数据的切换开关，通过所述切换开关调整所述可执行程序的运行环境，使所述可执行程序独立运行或者在主程序中被调用。

获取模块530，用于运行生成模块510生成的可执行程序，获取所述可执行程序对应的用户界面。

通过使用本发明，构建可执行程序的分层架构，可以加强客户端之间的协同工作，减少客户端之间的重复劳动，有效管理程序开发过程中的各个中间版本，使可执行程序能够符合设计思路，并提高用户界面的个性化和人性化。通过构建样本数据层，有助于检验用户在进行各种操作时界面的动态响应，能够降低工程复杂性，减少出错机会，也减少工程对于其他系统的依赖；通过构建真实数据层，可以在不影响界面交互逻辑的前提下，将调试完毕的程序模块合并到主工程中，以便于进行下一界面模块的迭代。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台终端设备(可以是手机，个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

本领域技术人员可以理解实施例中的装置中的模块可以按照实施例描述进行分布于实施例的装置中，也可以进行相应变化位于不同于本实施例的一个或多个装置中。上述实施例的模块可以集成于一体，也可以分离部署；可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

以上公开的仅为本发明的几个具体实施例，但是，本发明并非局限于此，任何本领域的技术人员能思之的变化都应落入本发明的保护范围。

Claims (8)

1.一种创建用户界面的方法，其特征在于，包括以下步骤：

根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序；

构建所述可执行程序的视图模型层，通过所述视图模型层向所述可执行程序的界面层提供数据接口，运行所述可执行程序，获取所述可执行程序对应的用户界面；

其中，所述根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序，包括：

根据需求和业务逻辑绘制所述界面原型的基础界面，指定所述基础界面上包含的控件元素以及所述控件元素在所述基础界面上的排布方式；

生成动画模版，将所述动画模版存储到本地资源中，根据用户交互的需求添加动画播放触发器，并设定所述动画播放触发器与所述动画模版的对应关系；

生成并运行所述界面原型对应的可执行程序，查看所述可执行程序的运行结果，验证动画是否正确触发，当所述动画正确触发时，将所述可执行程序提交到代码服务器；

界面交互逻辑用程序语言编写。

2.如权利要求1所述的方法，其特征在于，所述生成界面原型对应的可执行程序之后，还包括：

构建所述可执行程序的样本数据层，通过所述样本数据层访问本地数据文件，对所述界面原型进行模拟操作，检验所述界面原型的动态响应。

3.如权利要求1或2所述的方法，其特征在于，所述生成界面原型对应的可执行程序之后，还包括：

构建所述可执行程序的真实数据层，通过所述真实数据层访问数据库和/或服务器数据。

4.如权利要求3所述的方法，其特征在于，所述生成界面原型对应的可执行程序之后，还包括：

在所述视图模型层创建样本数据和真实数据的切换开关，通过所述切换开关调整所述可执行程序的运行环境，使所述可执行程序独立运行或者在主程序中被调用。

5.一种创建用户界面的装置，其特征在于，包括：

生成模块，用于根据用户界面的界面交互逻辑创建所述用户界面的界面原型，生成所述界面原型对应的可执行程序；

构建模块，用于构建所述生成模块生成的可执行程序的视图模型层，通过所述视图模型层向所述可执行程序的界面层提供数据接口；

获取模块，用于运行所述生成模块生成的可执行程序，获取所述可执行程序对应的用户界面；

其中，所述生成模块，具体用于根据需求和业务逻辑绘制所述界面原型的基础界面，指定所述基础界面上包含的控件元素以及所述控件元素在所述基础界面上的排布方式；生成动画模版，将所述动画模版存储到本地资源中，根据用户交互的需求添加动画播放触发器，并设定所述动画播放触发器与所述动画模版的对应关系；生成并运行所述界面原型对应的可执行程序，查看所述可执行程序的运行结果，验证动画是否正确触发，当所述动画正确触发时，将所述可执行程序提交到代码服务器；

界面交互逻辑用程序语言编写。

6.如权利要求5所述的装置，其特征在于，

所述构建模块，还用于构建所述可执行程序的样本数据层，通过所述样本数据层访问本地数据文件，对所述界面原型进行模拟操作，检验所述界面原型的动态响应。

7.如权利要求5或6所述的装置，其特征在于，

所述构建模块，还用于构建所述可执行程序的真实数据层，通过所述真实数据层访问数据库和/或服务器数据。

8.如权利要求7所述的装置，其特征在于，

所述构建模块，还用于在所述视图模型层创建样本数据和真实数据的切换开关，通过所述切换开关调整所述可执行程序的运行环境，使所述可执行程序独立运行或者在主程序中被调用。