CN113626023A - 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质 - Google Patents

Abstract

本发明实施例公开一种基于Sketch的跨平台界面开发方法和装置、计算机设备和介质。在一具体实施方式中，该方法包括：获取标准模板，标准模板具有标准界面版式；获取目标模板、提取目标模板的图层信息并将图层信息发送至服务器，使得服务器根据所述图层信息提取文本信息数据，目标模板具有与待形成的界面对应的目标界面版式；接收文本信息数据并注入至标准模板以更新目标界面版式；以及根据目标界面版式进行代码化生成代码块文件，代码块文件用于生成具有目标界面版式的跨平台界面。该实施方式通过Sketch插件提取目标模板的图层信息并发送至服务器使其提取目标模板的文本信息数据，从而更新目标模板并代码化以生成跨平台界面，降低了UI设计人员的工作量。

Description

基于Sketch的跨平台界面开发方法和系统、计算机设备和 介质

技术领域

本发明涉及计算机技术。更具体地，涉及一种基于Sketch的跨平台界面开发方法和系统、计算机设备和介质。

背景技术

低代码，是一种可以让开发者依托平台快速搭建企业信息化的系统，在这过程中，使用者只需要少量的代码编写，其他的大部分工作都是通过可视化的拖拽、点选完成。无代码或称零代码是一种完全不需要任何代码编程的开发方式，它主要是围绕企业数据和业务管理需求，通过可视化方式设计数据结构，用户交互形式、设置访问权限和定义工作流程的平台。

目前，市面上的低代码平台更多的使用用户面向开发人员，无代码开发平台一般也需要具备部分软件开发技术能力可以流畅使用，而缺乏面向UI(User Interface)设计人员的无代码设计平台，UI设计人员在设计时需要大量冗余工作量，设计风格也难以保持统一，UI设计开发周期长。

发明内容

本发明的目的在于提供一种，以解决现有技术存在的问题中的至少一个。

为达到上述目的，本发明采用下述技术方案：

本发明第一方面提供了一种基于Sketch的跨平台界面开发方法，应用于客户端，包括：

获取标准模板，标准模板具有标准界面版式；

获取目标模板、提取目标模板的图层信息并将图层信息发送至服务器，使得服务器根据图层信息提取文本信息数据，目标模板具有与待形成的界面对应的目标界面版式；

接收文本信息数据并注入至标准模板以将标准模板更新为目标界面版式；以及

根据目标界面版式进行代码化生成代码块文件，代码块文件用于生成具有目标界面版式的跨平台界面。

在一些可选的实施例中，获取目标模板、提取目标模板的图层信息并将图层信息发送至服务器进一步包括：

获取目标模板；

提取目标模板的图层；

将图层中的元素解析为元素数据；

将元素数据转换为用于发送的编码数据。

在一些可选的实施例中，接收文本信息数据并注入至标准模板以将标准模板更新为目标界面版式进一步包括：

将文本信息数据按照目标界面版式中的界面图形逻辑解析为表征各图形的多个数据数组，界面图形逻辑包括：每个图形的维数、文本位置、以及文本内容中的一个或多个；以及

将数据数组注入标准模板并根据数据数组表征的界面图形逻辑将目标模板的界面版式更新为目标界面版式。

在一些可选的实施例中，根据目标界面版式进行代码化生成代码块文件进一步包括：

获取预存储的标准模板的标准代码块；

根据目标界面版式的数据数组修改标准代码块中的位置信息；

将位置信息和所述多个数据数组中的文本内容注入标准代码块，形成基于跨平台的代码块文件，基于跨平台的代码块文件用于生成跨平台界面。

在一些可选的实施例中，编码数据为基于Base64的编码数据，跨平台的代码块文件为Flutter代码块文件。

本发明第二方面提供了一种跨平台界面开发方法，应用于服务器，包括：

接收目标模板的图层信息，其中目标模板具有与待形成的界面对应的目标界面版式；

根据图层信息提取文本信息数据；

输出文本信息数据以生成具有目标界面版式的跨平台界面。

在一些可选的实施例中，根据图层信息提取文本信息数据进一步包括：

对图层信息进行文本检测；

基于文本检测结果识别图层信息中的文本数据；以及

基于文本数据提取文本信息数据。

在一些可选的实施例中，对图层信息进行文本检测进一步包括：对图层信息进行解码并基于解码结果对图层信息进行文本检测，

当文本检测结果表示包含文本数据时，根据图层信息提取文本信息数据进一步包括：

基于信息抽取算法提取文本数据的文本信息，文本信息包括文本位置和文本内容；以及

基于文本信息生成具有第一结构体格式的文本信息数据。

在一些可选的实施例中，文本检测结果表示未包含文本数据时，基于文本数据提取文本信息数据进一步包括：

生成具有第二结构体格式的文本信息数据，文本信息数据为提取失败消息。

本发明第三方面提供了一种实现如上文所述第一方面所述的跨平台界面开发方法的界面开发装置，包括：

交互模块，配置为获取标准模板和目标模板，其中，标准模板具有标准界面版式，目标模板具有与待形成的界面对应的目标界面版式；

提取模块，配置为提取目标模板的图层信息；

通信模块，配置为将图层信息发送至服务器并自服务器接收文本信息数据；

逻辑处理模块，配置为将文本信息数据注入标准模板以更新目标界面版式；以及

代码块生成模块，配置为根据目标界面版式进行代码化生成代码块文件，代码块文件用于生成具有目标界面版式的跨平台界面。

本发明第四方面提供了一种实现如上文第二方面所述的跨平台界面开发方法的界面开发装置，包括：

文本提取模块，配置为对接收到的目标模板的图层信息提取文本信息数据，目标模板具有与待形成的界面对应的目标界面版式；

通信模块，配置为接收图层数据并输出文本信息数据，以用于生成具有目标界面版式的跨平台界面。

本发明第五方面提供了一种计算机设备，包括：

一个或多个处理器；

存储装置，其上存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上文第一方面所述的方法或者如上文第二方面所述的方法。

本发明第六方面一种计算机可读存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如第一方面所述的方法或者如第二方面所述的方法。

本发明的有益效果如下：

本发明针对目前现有的问题，制定一种基于Sketch的跨平台界面开发方法和系统、计算机设备和介质，通过利用Sketch插件提取目标模板的图层信息并发送至服务器，使其提取目标模板的文本信息数据，将接收的文本信息数据注入标准模板来更新界面版式并代码化以生成具有目标界面版式的跨平台界面，实现了面对界面设计人员的无代码化开发平台，降低了界面设计人员的工作量，从而弥补了现有技术中存在的问题，有效提高界面设计的灵活性，提高设计人员的工作效率，降低产品设计开发成本，具有广泛的应用前景。

附图说明

下面结合附图对本发明的具体实施方式作进一步详细的说明。

图1示出根据本发明实施例的基于Sketch的跨平台界面开发方法的流程图；

图2示出根据本发明实施例的实现跨平台界面开发方法的跨平台界面开发系统的结构框图；

图3示出根据本发明的实施例的实现跨平台界面开发方法的Sketch插件的首页示意图；

图4示出根据本发明的实施例的实现跨平台界面开发方法的Sketch插件的设计页示意图；

图5示出根据本发明的实施例的实现跨平台界面开发方法的Sketch插件的OCR识别图层拾取窗口示意图；

图6示出根据本发明实施例的基于Sketch的跨平台界面开发方法的第二步骤的具体流程图；

图7示出根据本发明实施例的跨平台界面开发方法的服务器端的提取文本信息的流程图；以及

图8示出根据本发明的实施例所述的一种计算机设备的结构示意图。

具体实施方式

为了更清楚地说明本发明，下面结合实施例和附图对本发明做进一步的说明。附图中相似的部件以相同的附图标记进行表示。本领域技术人员应当理解，下面所具体描述的内容是说明性的而非限制性的，不应以此限制本发明的保护范围。

发明人经过研究发现，对于界面开发而言，目前的设计产品中往往提供具有标准版式的标准模板，为了满足产品设计需要，每次设计中UI设计人员需要基于标准模板进行修改，例如改变图表中各图形的占比、各个图形的排列顺序以更加真实的体现实际数据变化，这些修改均需要设计人员进行手动复制、删除、粘贴等来调整，由标准模板生成最终界面产品布局的过程需要设计人员大量繁琐而冗余的重复劳动。

此外，即使是同一套统计数据，若本次开发的界面产品需要应用的各个跨平台设备的显示尺寸与之前已设计的界面产品所应用的各个跨平台设备的显示尺寸不同，则用户可能需要调整本次开发的界面产品的元素数量来适应新的尺寸要求。以条形图为例，假定界面中需要以条形图示出35年内某城市中老龄人群人口数量变化趋势，用户已为某小尺寸跨平台终端(例如，4英寸显示屏的Android、IOS以及Windows系统的手机)设计的界面产品中，因为尺寸所限为了显示效果，该条形图仅能够示出5个条形，即以每7年的数据为一个条形来显示35年的统计数据。而若本次的界面产品将应用于某大尺寸跨平台终端，例如5.5英寸显示屏的Android、IOS以及Windows系统的手机，则本次产品需要将条形图中的条形数量增加为7个，即，以每5年的数据为一个条形来显示35年的统计数据。

在当前的UI设计工具中，设计人员需要在设计界面中手动绘制、粘贴新的条形以生成新设计，手动设计均是重复而繁琐的劳动，为设计人员带来冗余工作量。而往往一套项目的界面产品设计，类似的修改存在于大量界面中，手动修改的大量冗余工作量无疑降低了UI设计的设计便利度，增加产品设计时间，降低产品效率。

针对以上问题至少之一，如图1所示，本发明的一个实施例提供了一种基于Sketch的跨平台界面开发方法，应用于第一客户端，包括：

获取标准模板，标准模板具有标准界面版式；

获取目标模板、提取目标模板的图层信息并将图层信息发送至服务器，使得服务器根据所述图层信息提取文本信息数据，目标模板具有与待形成的界面对应的目标界面版式；

接收文本信息数据并注入至标准模板以将标准模板更新为目标界面版式；以及

根据目标界面版式进行代码化生成代码块文件，代码块文件用于生成具有目标界面版式的跨平台界面。

在本实施例中，通过利用Sketch插件提取目标模板的图层信息并发送至服务器，使其提取目标模板的文本信息数据，将接收的文本信息数据注入标准模板来更新界面版式并代码化以生成具有目标界面版式的跨平台界面，实现了面对界面设计人员的无代码化开发平台，降低了界面设计人员的工作量，从而弥补了现有技术中存在的问题，有效提高界面设计的灵活性，提高设计人员的工作效率，降低产品设计开发成本，具有广泛的应用前景。

在一个具体的示例中，如图2所示为跨平台界面开发系统，包括客户端100和服务器200。客户端100和服务器200之间可以通过有线或者无线方式进行通信。其中，客户端100可以为计算机、便携式计算机、平板电脑、智能手机等可运行UI设计开发工具的电子设备，在本示例中，UI设计开发工具为Sketch工具，Sketch工具是一款适用于所有设计师的矢量绘图应用，它是一个有着出色UI的一站式应用工具，在发明的实施例中其上加载有Sketch插件。服务器200可以是云服务器，也可以是本地服务器，其上搭载有实现本发明的实施例的基于光学字符识别(Optical Character Recognition，OCR)的文字识别功能的应用工具，其可以为软件也可以为固件。

下面结合图3至图7以跨平台界面开发系统的详细工作流程详细描述本发明实施例的跨平台界面开发方法。

第一、客户端100获取标准模板，标准模板具有标准界面版式。

具体地，如图3所示，用户(例如，UI设计开发人员)启动客户端100上搭载的Sketch工具，自动启动其中的Sketch插件，在客户端100上显示图3所示的用户交互界面首页。在该用户交互界面中，包括左边示出的选择菜单列表和其右边对应的内容选择区。其中，选择菜单列表中列出各种界面模板库，当用户在选择菜单列表中选中相应的库时，对应在内容选择区罗列出该库中的各种模板缩略图。

具体地，选择菜单列表包括标准模板库和自定义库，标准模板库中存储具有标准界面版式的标准模板。标准模板库包括但不限于标准图表库、标准组件库、标准元素库、标准图标库。示例性地，图表主要为折线图、三维条形图、二维条形图、饼状图等。组件主要为一些复杂UI的组合，比如图表面板组合组件、视频播放样例组件、视频控制条组件等。元素主要为基础的UI单元，例如文字标题、文字正文、标准形状、基础线条等。可选地，自定义库为该用户登录其账号后自身权限开放的私有的自定义库，当然，本申请并不限于此。自定义库中存储该用户预存储的自定义的各种界面模板，其中可以包括历史项目中设计并存储的界面模板。自定义库既可以存储在本地也可以存储在云端。

本领域技术人员应理解，以下为了描述的方便，在具体的示例中以某一种版式的图标为例进行示例说明，但本申请并不限于此，其他各种界面版式均是可以的。

具体如图3所示，在本示例中用户将要开发的跨平台界面中包括图表，因此，用户选择标准模板库中的标准图标库，即在内容选择区其中一页中对应显示该标准图标库中存储的标准图表模板中若干标准模板中的4个模板，用户可以在该用户交互界面首页中选中将要设计的图表，例如二维条形图，则获取与图3中所示版式对应的标准模板。在具体示例中，通过选中对应的标准模板，Sketch插件的用户交互界面将自动跳转到图4所示的设计页。

本领域技术人员应理解，标准界面版式中通常仅示出能够表示该界面版式的图形样式的简单示例，例如，对于条形图在标准版式中仅示出固定个数的、连续递增或递减无间隙排列的条形。对于实际产品项目的界面设计来说，根据界面最终应用到的设备尺寸，数量需要调整，且往往统计数据并不是递次变化的，实际产品也需要间隔的排列的条形来清晰地示出各统计数据。为了使生成的界面的代码块在绑定数据前能够表现得更加贴近真实产品，我们希望待形成的界面将具有更贴近实际数据统计的版式。因此，在本发明的实施例中需要获取目标模板，该目标界面模板具有与待形成的界面版式对应的目标界面版式。

需要说明的是，在UI设计这个阶段，设计人员只需要使界面看上去真实，而并不需要关注于本次界面产品的最终成品中数据的真实值变化。举例来说，若本次界面产品需要以条形图示出35年内某城市老龄人口的增长量变化趋势，应用的跨平台设备为5.5英寸的Android、IOS以及Windows系统的手机，对于该尺寸，显示7个条形的条形图的显示效果更优良，则在界面开发的该阶段，对于UI设计人员来说其工作只需要提供一个能够以间隔排列的、高低错落的7条形构成的条形图的界面即可，具体数据绑定是后续开发人员的工作。

为了减少设计人员的工作量，在本发明的实施例中，特别地，跨平台界面开发方法包括：

第二、获取目标模板、提取目标模板的图层信息并将图层信息发送至服务器，使得服务器根据图层信息提取文本信息数据，目标模板具有与待形成的界面对应的目标界面版式。

示例性地，继续参照图4所示，在用户交互界面的设计页中示出了左侧的内容编选区、右上角的UI配置区，特别地，还包括功能区。图4中已经示出了在上一步中获取的标准模板，例如，标准条形图。用户可以在UI配置区中调整画布尺寸等参数。特别地，在本发明的实施例中，设计页还包括位于其右下角的功能区，其中包括“从图层提取并注入数据”按钮和“添加模板”按钮。当然，本领域技术人员应理解，上述按钮的具体名称仅是示例性的，在实际产品中按钮的名称可以根据需要进行更改，只要具有下文所述的相应功能即可。

具体地，用户可以通过在设计页中点击“从图层提取并注入数据”，响应于用户操作而跳转到图5所示的OCR识别图层拾取窗口，在该窗口中在模板输入框在相应路径选择需要的目标模板来获取该目标模板，该路径可以是进入自定义库也可以是进入在线模板搜索的网络链接，具体形式不限。在本发明的实施例中，进入OCR识别图层拾取窗口的方式并不限于此，在启动Sketch插件时可以在相应的工具栏中通过选中打开OCR识别图层拾取窗口。也就是说，在本发明的实施例中，进入OCR识别图层拾取窗口以获取目标模板的方式至少为两种，当然本领域技术人员应理解，这只是示例性地，实际应用中可以不限于此。

示例性地，该目标模板中的目标界面版式可以如5所示。对于本示例，待形成的界面的版式例如需要具有显示7个条形的条形图，通常在真实环境下，一定年限范围内的老龄人口数量的增长量变化趋势应是高低不同的。因此，需要目标模板具有上述界面版式。用户只需要在OCR识别图层拾取窗口中的模板输入框中寻找相应路径选择具有与待形成的界面相对应的界面版式的条形图作为目标模板即可。例如，可以于自定义库中在曾经设计的项目中查找具有目标界面版式的条形图作为目标模板。一旦选中相应的目标模板，则OCR识别图层拾取窗口的画布中示出该模板。

进一步地，用户在图5所示窗口的画布中选中并启动数据注入。例如，用户可以双击或回车等预定方式启动数据注入。以双击启动为例，用户以鼠标双击进入启动数据流程，则客户端100利用Sketch插件提取目标模板中的图层信息并将图层信息发送至服务器，使得服务器根据图层信息提取文本信息数据。

具体地，如图6所示，获取目标模板、提取目标模板的图层信息并将图层信息发送至服务器进一步包括：获取目标模板；提取目标模板的图层；将图层中的元素解析为元素数据；将元素数据转换为用于发送的编码数据。

其中，客户端100利用Sketch插件基于用户的选中操作提取目标模板的图层，具体可以通过Sketch工具底层的API接口抽取选中图层，之后通过将图层中的元素进行解析以元素数据的形式表征图层中的每一个元素，即以元素数据的形式表达该目标模板。接下来，将元素数据转换为能够用于通信传输的编码格式已形成具有一定格式的图片编码信息流。可选地，编码数据为基于Base64的编码数据。其中，Base64为用于传输8bit字节码的编码方式，是一种以64个可打印字符来表示二进制数据的方法。当然，本发明并不限于此编码方式。因为元素数据表征图层中的元素，编码数据为该元素数据的信息流，因此在本文中编码数据可以称为图层信息。

在将元素数据进行格式转换后，客户端100与服务器200进行通信发送该编码数据。例如，可以向服务器200中加载的用于文字识别的应用工具的接口发起Http/Https网络请求，并响应于自该接口反馈的接受请求信息发送编码数据，以使得服务器200根据图层信息提取文本信息数据。

具体到服务器端，服务器200接收到目标模板的图层信息；根据图层信息提取文本信息数据；输出文本信息数据以生成具有目标界面版式的跨平台界面。

下面参照图7所示的流程图说明本发明的实施例在服务器端的提取文本信息的流程。

基于接口通信协议，服务器200利用OCR文字识别的应用工具的接口接收图层信息。

在本发明的实施例中，提取图层信息中文本信息数据需要基于OCR算法内核。具体地，根据图层信息提取文本信息数据进一步包括：对图层信息进行文本检测；基于文本检测结果识别图层信息中的文本数据；以及基于文本数据提取文本信息数据。

参照图7所示，服务器200对接收到的表示图层信息的编码数据进行文本检测，具体地，对图层信息进行解码并基于解码结果对图层信息进行文本检测。该步骤中相当于对编码数据进行解码，来检测其中是否包含文本数据。

基于检测结果，识别所述图层信息中的文本数据。当检测结果判断为包含文本数据时，即经过检测目标模板中包含文本数据时，基于检测为包含文本数据的检测结果进一步识别每个文本行的文本数据。也就是识别具体的文字内容，即文本含义。

再进一步地，基于识别出的文本数据提取文本信息数据。在本发明的实施例中，文本信息数据表示对注入到目标模板中的界面版式有意义的关键信息数据。该步骤具体包括：基于信息抽取算法提取文本数据的文本信息，文本信息包括文本位置和文本内容，即将要注入到标准模板中的各个文本内容和与文本内容对应的位置，基于文本位置和文本内容即可确定文本对应数据、表头、图例等文本类型中的任一个；基于文本信息生成具有第一结构体格式的文本信息数据，其中结构体例如为具有固定格式的代码结构。在本示例中，第一结构体格式的文本信息表示按照结构体的固定格式形成的包含有文本信息的文本位置和文本内容的数据。

另一方面，参照图7所示，可选地，若检测结果判断为不包含文本数据，则表示目标模板中不包含文本数据，则不进一步进行识别和提取，则基于文本数据提取文本信息数据进一步仅包括：生成具有第二结构体格式的文本信息数据，文本信息数据为提取失败消息，其中结构体例如为具有固定格式的代码结构。在本示例中，第二结构体格式的文本信息表示按照结构体的固定格式形成的仅包含有提取失败消息的数据。

之后，参照图7所示，通过接口输出文本信息数据以用于生成具有目标界面版式的跨平台界面。

第三、客户端100接收文本信息数据并注入至标准模板以将标准模板更新为目标界面版式。

具体地，当客户端100接收到文本信息数据时，即相当于Sketch插件加载文本信息数据的过程。可选地，若接收到的文本信息数据为上述具有第一结构体格式的文本信息数据，接收成功后，则自图5所示的OCR识别图层拾取窗口跳转回图4所示的设计页，将图中内容编选区中的标准模板更新为目标界面版式。

具体地，接收文本信息数据并注入至标准模板以将标准模板更新为目标界面版式进一步包括：

将文本信息数据按照目标界面版式中的界面图形逻辑解析为表征各图形的多个数据数组，界面图形逻辑包括：每个图形的维数、文本位置、以及文本内容中的一个或多个，根据；

将数据数组注入标准模板并根据数据数组表征的界面图形逻辑将目标模板的界面版式更新为目标界面版式。

需要说明的是，若文本信息数据为包含提取失败消息的数据，则表征该目标模板中未包含文本或者未能识别出文本，则在注入文本信息数据后不能够更新成功。可选地，Sketch插件可以在跳转回设计页后提示更新失败消息，用户选择新的目标模板重新完成第二步骤中的操作，客户端和服务器响应于用户操作循环第二步骤的流程；或者在接收到文本数据信息后不跳转回设计页来提示用户更新未成功，或不跳转回设计页而弹出更新失败消息来提示用户更新未成功，用户选择新的目标模板完成第二步骤的操作，客户端和服务器响应于用户操作循环第二步骤的流程。

在一些可选的实施例中，如图4所示，设计页面中的功能区还包括“添加模板”按钮。可选地，用户可以在选中内容编选区中已加载的模板(标准模板或者已经更新的目标模板)的情况下，通过选中该按钮弹出图3所示的首页，使得客户端100重复第一至第三步完成界面版式的修改，例如将条形图修改为饼图或者折线图等。进一步可选地，用户可以在选中内容编选区空白区域的情况下，通过选中该按钮弹出图3所示的首页，使得客户端100重复第一至第三步完成添加新的界面版式，例如增加如图4所示的艺术字。

对于艺术字等文本元素来说，通过本发明中的OCR识别方式更新界面版式，使得UI设计人员不必手动敲入文字，并手动调整间距段落等排版，而是可以直接借助目标模板中客户给出的文本和期望的排版方式，通过截图的方式以OCR识别注入文本内容和格式，极大地方便了UI设计人员的设计，简化设计流程，节约人力劳动成本，提高设计效率。

第四、根据目标界面版式进行代码化生成代码块文件，代码块文件用于生成具有目标界面版式的跨平台界面。对于用户来说，可以通过点击图4中的“生成”按钮，客户端100响应于用户操作根据目标界面版式进行代码化生成代码块文件。

具体地，根据目标界面版式进行代码化生成代码块文件进一步包括：

获取预存储的标准模板的标准代码块；

根据目标界面版式的数据数组修改标准代码块中的位置信息；

将位置信息和多个数据数组中的文本内容注入标准代码块，形成基于跨平台的代码块文件，基于跨平台的代码块文件用于生成跨平台界面，跨平台界面表示能够应用在多个平台的产品的界面，多个平台包括但不限于Android、IOS、Windows、Web或者鸿蒙等。可选地，跨平台的代码块文件为Flutter代码块文件，当然本发明并不限于此，其他跨平台框架下的代码跨文件也是可以的，只要能够用于生成跨平台界面即可。

在本实施例中，生成代码块后可以转存为文件并导出到某一路径下，例如导出到本地的存储路径，或者导出到云平台的某一云路径，以备后续开发人员基于该代码块绑定数据、事件、图形化后生成图形化的跨平台界面。

在本发明的实施例中，通过在设计人员的客户端利用Sketch插件获取目标模板，并提取图层信息并发送到服务器，使服务器识别图层信息生成文本信息数据，基于回传回来的文本信息数据注入并直接更新标准模板，使得基于识别出的文本信息数据直接生成具有目标界面版式的界面，从而使得UI设计人员不再需要在界面开发时反复重复复制、粘贴、修改尺寸等等冗余操作，实现一键界面设计，而该设计过程也不再需要传统设计中对UI设计草图进行人工代码化，实现了无代码UI设计和面对界面设计人员的无代码化开发平台，降低了界面设计人员的工作量，从而弥补了现有技术中存在的问题，有效提高界面设计的灵活性，提高设计人员的工作效率，降低产品设计开发成本，具有广泛的应用前景。

基于同一方面构思，本发明的实施例还提供一种跨平台界面开发方法，包括：

接收目标模板的图层信息，其中目标模板具有与待形成的界面对应的目标界面版式；

根据图层信息提取文本信息数据；

输出文本信息数据以生成具有目标界面版式的跨平台界面。

可选地，根据图层信息提取文本信息数据进一步包括：对图层信息进行文本检测；基于文本检测结果识别图层信息中的文本数据；以及基于文本数据提取文本信息数据。

可选地，对图层信息进行文本检测进一步包括：对图层信息进行解码并基于解码结果对图层信息进行文本检测，当文本检测结果表示包含文本数据时，根据图层信息提取文本信息数据进一步包括：基于信息抽取算法提取文本数据的文本信息，文本信息包括文本位置和文本内容；以及基于文本信息生成具有第一结构体格式的文本信息数据。

可选地，文本检测结果表示未包含文本数据时，基于文本数据提取文本信息数据进一步包括：

生成具有第二结构体格式的文本信息数据，文本信息数据为提取失败消息。

在本实施例中，通过接收客户端提取的目标模板的图层信息，并对该图层信息进行文本识别得到文本信息数据，并返回客户端以生成具有目标界面版式的跨平台界面，实现了面对界面设计人员的无代码化开发平台，降低了界面设计人员的工作量，从而弥补了现有技术中存在的问题，有效提高界面设计的灵活性，提高设计人员的工作效率，降低产品设计开发成本，具有广泛的应用前景。

基于同一发明构思，本发明的实施例还提供一种实现上文所述的基于Sketch的跨平台界面开发方法的界面开发装置，包括：

交互模块，配置为获取标准模板和目标模板，其中，标准模板具有标准界面版式，目标模板具有与待形成的界面对应的目标界面版式；

提取模块，配置为提取目标模板的图层信息；

通信模块，配置为将图层信息发送至服务器并自服务器接收文本信息数据；

逻辑处理模块，配置为将文本信息数据注入标准模板以更新目标界面版式；以及

代码块生成模块，配置为根据目标界面版式进行代码化生成代码块文件，代码块文件用于生成具有目标界面版式的跨平台界面。

在本实施例中，通过界面开发装置利用Sketch插件提取目标模板的图层信息并发送至服务器，使其提取目标模板的文本信息数据，将接收的文本信息数据注入标准模板来更新界面版式并代码化以生成具有目标界面版式的跨平台界面，实现了面对界面设计人员的无代码化开发平台，降低了界面设计人员的工作量，从而弥补了现有技术中存在的问题，有效提高界面设计的灵活性，提高设计人员的工作效率，降低产品设计开发成本，具有广泛的应用前景。

基于同一发明构思，本发明的实施例还提供一种实现上文所述的跨平台界面开发方法的界面开发装置，包括：

文本提取模块，配置为对接收到的目标模板的图层信息提取文本信息数据，目标模板具有与待形成的界面对应的目标界面版式；

通信模块，配置为接收图层数据并输出文本信息数据，以用于生成具有目标界面版式的跨平台界面。

在本实施例中，通过界面开发装置接收客户端提取的目标模板的图层信息，并对该图层信息进行文本识别得到文本信息数据，并返回客户端以生成具有目标界面版式的跨平台界面，实现了面对界面设计人员的无代码化开发平台，降低了界面设计人员的工作量，从而弥补了现有技术中存在的问题，有效提高界面设计的灵活性，提高设计人员的工作效率，降低产品设计开发成本，具有广泛的应用前景。

本发明的另一个实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现：获取标准模板，标准模板具有标准界面版式；获取目标模板、提取目标模板的图层信息并将图层信息发送至服务器，使得服务器根据图层信息提取文本信息数据，目标模板具有与待形成的界面对应的目标界面版式；接收文本信息数据并注入至标准模板以将标准模板更新为目标界面版式；以及根据目标界面版式进行代码化生成代码块文件，代码块文件用于生成具有目标界面版式的跨平台界面。

本发明的另一个实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现：接收目标模板的图层信息，其中目标模板具有与待形成的界面对应的目标界面版式；根据图层信息提取文本信息数据；输出文本信息数据以生成具有目标界面版式的跨平台界面。

在实际应用中，所述计算机可读存储介质可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

如图8所示，本发明的另一个实施例提供的一种计算机设备的结构示意图。图8显示的计算机设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图8所示，计算机设备12以通用计算设备的形式表现。计算机设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

计算机设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算机设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。计算机设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图8未显示，通常称为“硬盘驱动器”)。尽管图8中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该计算机设备12交互的设备通信，和/或与使得该计算机设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，计算机设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图8所示，网络适配器20通过总线18与计算机设备12的其它模块通信。应当明白，尽管图8中未示出，可以结合计算机设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理器单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的一种跨平台界面开发方法或者基于Sketch的跨平台界面开发方法。

本发明针对目前现有的问题，制定一种基于Sketch的跨平台界面开发方法和系统、计算机设备和介质，通过利用Sketch插件提取目标模板的图层信息并发送至服务器，使其提取目标模板的文本信息数据，将接收的文本信息数据注入标准模板来更新界面版式并代码化以生成具有目标界面版式的跨平台界面，实现了面对界面设计人员的无代码化开发平台，降低了界面设计人员的工作量，从而弥补了现有技术中存在的问题，有效提高界面设计的灵活性，提高设计人员的工作效率，降低产品设计开发成本，具有广泛的应用前景。

显然，本发明的上述实施例仅仅是为清楚地说明本发明所作的举例，而并非是对本发明的实施方式的限定，对于本领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动，这里无法对所有的实施方式予以穷举，凡是属于本发明的技术方案所引伸出的显而易见的变化或变动仍处于本发明的保护范围之列。

Claims (13)

1.一种基于Sketch的跨平台界面开发方法，应用于客户端，其特征在于，包括：

获取标准模板，所述标准模板具有标准界面版式；

获取目标模板、提取所述目标模板的图层信息并将所述图层信息发送至服务器，使得所述服务器根据所述图层信息提取文本信息数据，所述目标模板具有与待形成的界面对应的目标界面版式；

接收所述文本信息数据并注入至所述标准模板以将所述标准模板更新为所述目标界面版式；以及

根据所述目标界面版式进行代码化生成代码块文件，所述代码块文件用于生成具有目标界面版式的跨平台界面。

2.根据权利要求1所述的跨平台界面开发方法，其特征在于，所述获取目标模板、提取所述目标模板的图层信息并将所述图层信息发送至服务器进一步包括：

获取所述目标模板；

提取所述目标模板的图层；

将所述图层中的元素解析为元素数据；

将所述元素数据转换为用于发送的编码数据。

3.根据权利要求1所述的跨平台界面开发方法，其特征在于，所述接收所述文本信息数据并注入至所述标准模板以将标准模板更新为所述目标界面版式进一步包括：

将所述文本信息数据按照所述目标界面版式中的界面图形逻辑解析为表征各图形的多个数据数组，所述界面图形逻辑包括：每个图形的维数、文本位置、以及文本内容中的一个或多个；以及

将所述数据数组注入所述标准模板并根据所述数据数组表征的界面图形逻辑将所述目标模板的界面版式更新为所述目标界面版式。

4.根据权利要求3所述的跨平台界面开发方法，其特征在于，所述根据所述目标界面版式进行代码化生成代码块文件进一步包括：

获取预存储的标准模板的标准代码块；

根据所述目标界面版式的所述数据数组修改所述标准代码块中的位置信息；

将所述位置信息和所述多个数据数组中的文本内容注入所述标准代码块，形成基于跨平台的代码块文件，所述基于跨平台的代码块文件用于生成跨平台界面。

5.根据权利要求2所述的跨平台界面开发方法，其特征在于，所述编码数据为基于Base64的编码数据，所述跨平台的代码块文件为Flutter代码块文件。

6.一种跨平台界面开发方法，应用于服务器，其特征在于，包括：

接收目标模板的图层信息，其中所述目标模板具有与待形成的界面对应的目标界面版式；

根据所述图层信息提取文本信息数据；

输出所述文本信息数据以生成具有目标界面版式的跨平台界面。

7.根据权利要求6所述的跨平台界面开发方法，其特征在于，所述根据所述图层信息提取文本信息数据进一步包括：

对所述图层信息进行文本检测；

基于文本检测结果识别所述图层信息中的文本数据；以及

基于所述文本数据提取所述文本信息数据。

8.根据权利要求7所述的跨平台界面开发方法，其特征在于，所述对所述图层信息进行文本检测进一步包括：对所述图层信息进行解码并基于所述解码结果对所述图层信息进行文本检测，

当所述文本检测结果表示包含文本数据时，所述根据所述图层信息提取文本信息数据进一步包括：

基于信息抽取算法提取所述文本数据的文本信息，所述文本信息包括文本位置和文本内容；以及

基于所述文本信息生成具有第一结构体格式的文本信息数据。

9.根据权利要求7或8所述的跨平台界面开发方法，其特征在于，所述文本检测结果表示未包含文本数据时，所述基于所述文本数据提取所述文本信息数据进一步包括：

生成具有第二结构体格式的文本信息数据，所述文本信息数据为提取失败消息。

10.一种实现如权利要求1-5中任一项所述的跨平台界面开发方法的界面开发装置，其特征在于，包括：

交互模块，配置为获取标准模板和目标模板，其中，所述标准模板具有标准界面版式，所述目标模板具有与待形成的界面对应的目标界面版式；

提取模块，配置为提取所述目标模板的图层信息；

通信模块，配置为将所述图层信息发送至服务器并自所述服务器接收文本信息数据；

逻辑处理模块，配置为将所述文本信息数据注入所述标准模板以将所述标准模板更新为所述目标界面版式；以及

代码块生成模块，配置为根据所述目标界面版式进行代码化生成代码块文件，所述代码块文件用于生成具有目标界面版式的跨平台界面。

11.一种实现如权利要求6-9中任一项所述的跨平台界面开发方法的界面开发装置，其特征在于，包括：

文本提取模块，配置为对接收到的目标模板的图层信息提取文本信息数据，所述目标模板具有与待形成的界面对应的目标界面版式；

通信模块，配置为接收所述图层数据并输出所述文本信息数据，以用于生成具有目标界面版式的跨平台界面。

12.一种计算机设备，包括：

一个或多个处理器；

存储装置，其上存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1-5中任一项所述的方法或者如权利要求6-9中任一项所述的方法。

13.一种计算机可读存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如权利要求1-5中任一项所述的方法或者如权利要求6-9中任一项所述的方法。

Images