CN111859886A - 一种基于产品原型界面的文档生成方法和装置 - Google Patents

Abstract

本发明涉及一种基于产品原型界面的文档生成方法和装置，属于计算机技术领域，解决了现有技术中需要人力调整其文字、截图、格式等，且每个产品都需要重复类似的过程，不仅增加了工作量，而且影响产品迭代的效率的问题。基于产品原型界面的文档生成方法包括：设计标准格式的文档模板，并将所述文档模板上传至文档模板管理中心；在所述产品原型界面中添加元素的备注，其中，所述产品原型界面包括图片；以及从所述文档模板管理中心选择得到文档模板，并基于所述元素的备注和所述图片自动生成项目需求文档。通过产品原型界面按模板生成需求文档，填补根据产品原型界面自动生成需求文档的空白，从而提升产品研发迭代效率。

Description

一种基于产品原型界面的文档生成方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于产品原型界面的文档生成方法和装置。

背景技术

原型设计是将结构化的需求进行框架化，因此原型也被称为线框图。产品原型是整个产品面市之前的一个框架设计，该产品原型能够更加清晰产品的需求，设计和技术人员或者老板也能够更加直观的了解到产品意图。网站产品可以考虑交互原型，以网站注册作为例，在整个前期的交互设计流程图之后，进入原形开发的设计阶段，简单的来说是将页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达。

另外，先有产品原型才能编写需求文档，如果产品原型有调整，那需求文档也会相应的调整。具体地，为了将产品原型转化需求文档，其文字、截图、格式等都需要人力调整，且每个产品都需要重复类似的过程，不仅增加了工作量，而且影响产品迭代的效率。一般的需求文档都是需求人员手工的编写文字、截图和格式调整，当产品原型变动时，需求人员还要进行文字、截图和格式的调整。另外，因为后续产品的设计、开发环节主要通过需求文档来作为设计和开发的依据，产品原型变更后需求文档也要相应的调整，但是，现有的产品原型转化需求文档的方法无法满足需求文档快速进行相应调整的需求。

发明内容

鉴于上述的分析，本发明实施例旨在提供一种基于产品原型界面的文档生成方法和装置，用以解决现有方法需要人力调整其文字、截图、格式等，且每个产品都需要重复类似的过程，不仅增加了工作量，而且影响产品迭代的效率的问题。

一方面，本发明实施例提供了一种基于产品原型界面的文档生成方法，包括：设计标准格式的文档模板，并将所述文档模板上传至文档模板管理中心；在所述产品原型界面中添加元素的备注，其中，所述产品原型界面包括图片；以及从所述文档模板管理中心选择得到文档模板，并基于所述元素的备注和所述图片自动生成项目需求文档。

上述技术方案的有益效果如下：通过在产品原型界面中添加元素的备注，基于元素的备注和所述图片自动生成项目需求文档，因此，通过产品原型界面按模板生成需求文档，本方法填补根据产品原型界面自动生成需求文档的空白，从而提升产品研发迭代效率。

基于上述方法的进一步改进，所述元素的备注包括所述产品原型界面上按钮的备注、表格的备注和区域的备注，其中，在所述产品原型界面中添加元素的备注包括：在原型界面设计工具中打开所述产品原型界面；以及在所述产品原型界面的按钮的备注属性、表格的备注属性、区域的备注属性、输入框的备注属性、备选框的备注属性、下拉框的备注属性和标签的备注属性中分别添加所述元素的备注。

基于上述方法的进一步改进，在基于所述元素的备注和所述图片自动生成项目需求文档之前还包括：基于所述元素的备注自动生成所述项目需求文档的文字部分；以及基于所述图片自动生成所述项目需求文档中的图片部分。

基于上述方法的进一步改进，基于所述元素的备注自动生成所述项目需求文档的文字部分包括：获取所述产品原型界面上所有元素的备注，并以JSON格式数据缓存；以及将缓存的所有元素的备注按照缓存的JSON格式数据的地址顺序直接填充到所述文档模板中的相应位置以生成所述项目需求文档的文字部分。

基于上述方法的进一步改进，将缓存的所有元素的备注按照缓存的JSON格式数据的地址顺序直接填充到所述文档模板中的相应位置包括：将缓存的所有元素的备注以所述文档模板中文字的字号、字体、格式、间距、段落自动填充到所述文档模板相应位置中。

基于上述方法的进一步改进，基于所述图片自动生成所述项目需求文档中的图片部分包括：通过HTML5的canvas技术获取所述产品原型界面的图片截图；将所述图片截图以二进制的方式在JSON格式数据中缓存；以及使用nodejs插件使二进制格式的图片截图生成图片，并将所述图片填充到所述文档模板中的相应位置，以生成所述项目需求文档中的图片部分。

基于上述方法的进一步改进，通过HTML5的canvas获取所述产品原型界面的图片截图包括：通过HTML5的canvas对所述产品原型界面的图片以1:1的比例进行自动截图。

基于上述方法的进一步改进，将所述图片填充到所述文档模板中包括：以所述文档模板默认的尺寸将所述图片自动填充到所述文档模板中。

另一方面，本发明实施例提供了一种基于产品原型界面的文档生成装置，包括：模板生成模块，用于生成标准格式的文档模板，并将所述文档模板上传至文档模板管理中心；备注添加模块，用于在所述产品原型界面中添加元素的备注，其中，所述产品原型界面包括图片；以及项目需求文档生成模块，用于选择文档模板，并基于所述元素的备注和所述图片自动生成项目需求文档。

基于上述装置的进一步改进，所述元素的备注包括所述产品原型界面上按钮的备注、表格的备注、区域的备注、输入框的备注、备选框的备注、下拉框的备注和标签的备注，其中，在所述产品原型界面中添加元素的备注包括：在原型界面设计工具中打开所述产品原型界面；以及在所述产品原型界面的按钮的备注属性、表格的备注属性、区域的备注属性、输入框的备注属性、备选框的备注属性、下拉框的备注属性和标签的备注属性中分别添加所述元素的备注。

与现有技术相比，本发明至少可实现如下有益效果之一：

1、通过产品原型界面按模板生成需求文档的方法，本方法填补根据产品原型界面自动生成需求文档的空白，从而提升产品研发迭代效率。

2、整体上达到基础性、重复性工作集中维护，协同、执行工具化的目的，保证有限的人力资源投入在产品创新等高价值产出事项上。

3、由于根据产品原型界面自动生成需求文档的空白，所以当产品原型变更后，需求文档也能够快速地进行相应的调整。

4、以项目为单位，将项目的每个界面元素解析成JSON格式数据，通过选择的需求文档模板，自动截图以及文字一并填充到模板中，最终生成标准格式的需求文档，此过程可以多人协同参与。

本发明中，上述各技术方案之间还可以相互组合，以实现更多的优选组合方案。本发明的其他特征和优点将在随后的说明书中阐述，并且，部分优点可从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过说明书以及附图中所特别指出的内容中来实现和获得。

附图说明

附图仅用于示出具体实施例的目的，而并不认为是对本发明的限制，在整个附图中，相同的参考符号表示相同的部件。

图1为根据本发明实施例的基于产品原型界面的文档生成方法的流程图。

图2为根据本发明实施例的产品原型界面的示图。

图3为根据本发明实施例的基于产品原型界面的文档生成装置的框图。

附图标记：

302-模板生成模块；304-备注添加模块；306-项目需求文档生成模块

具体实施方式

下面结合附图来具体描述本发明的优选实施例，其中，附图构成本申请一部分，并与本发明的实施例一起用于阐释本发明的原理，并非用于限定本发明的范围。

本发明的一个具体实施例，公开了一种基于产品原型界面的文档生成方法，如图1所示。参考图1，基于产品原型界面的文档生成方法包括：步骤S102，设计标准格式的文档模板，并将文档模板上传至文档模板管理中心；步骤S104，在产品原型界面中添加元素的备注，其中，产品原型界面包括图片；以及步骤S106，从文档模板管理中心选择得到文档模板，并基于元素的备注和图片自动生成项目需求文档。

与现有技术相比较，本发明实施例所提供的基于产品原型界面的文档生成方法通过在产品原型界面中添加元素的备注，基于元素的备注和所述图片自动生成项目需求文档，因此，通过产品原型界面按模板生成需求文档的方法，本方法填补根据产品原型界面自动生成需求文档的空白，从而提升产品研发迭代效率。

下文中，参考图1，对基于产品原型界面的文档生成方法进行详细描述。基于产品原型界面的文档生成方法包括：步骤S102，设计标准格式的文档模板，并将文档模板上传至文档模板管理中心。例如，该文档模板可以是word文档。具体地，文档模板具有预先设置在图片尺寸和预先设置的字号、字体、格式、间距、段落等文字部分。

在将文档模板上传至文档模板管理中心之后，进入步骤S104，在产品原型界面中添加元素的备注，其中，产品原型界面包括图片(参考图2的产品原型界面的示图)。具体地，元素的备注包括产品原型界面上按钮的备注、表格的备注、区域的备注、输入框的备注、备选框的备注、下拉框的备注、标签的备注、以及其他任何元素的备注，其中，在产品原型界面中添加元素的备注包括：在原型界面设计工具中打开产品原型界面；以及在产品原型界面的按钮的备注属性、表格的备注属性和区域的备注属性、输入框的备注属性、备选框的备注属性、下拉框的备注属性、标签的备注属性、以及其他任何元素的备注属性中分别添加元素的备注。

在产品原型界面中添加元素的备注之后，进入步骤S106，从文档模板管理中心选择得到文档模板，并基于元素的备注和图片自动生成项目需求文档。具体地，文档模板管理中心选择得到文档模板后，先基于元素的备注自动生成项目需求文档的文字部分；以及基于图片自动生成项目需求文档中的图片部分；然后，再将文字部分和图片部分进行组合生成项目需求文档。

具体地，基于元素的备注自动生成项目需求文档的文字部分包括：获取产品原型界面上所有元素的备注，并以JSON格式数据缓存；以及将缓存的所有元素的备注按照缓存的JSON格式数据的地址顺序直接填充到文档模板中的相应位置以生成项目需求文档的文字部分。具体地，JSON格式数据的地址顺序与文档模板中的文字部分的地址顺序相对应。在进行缓存前，先获得选择得到的文档模板各文字部分的地址顺序，基于该顺序对所有元素的备注进行排序后以JSON格式数据缓存。例如，JSON格式数据具有a1、a2、…的地址顺序，因此，当填充文档模板时，将缓存的所有元素的备注同样以a1、a2、…的地址顺序填充到文档模板中。此外，文字是根据用户在原型界面设计工具的“备注”中直接获取的，未经过特殊处理，属于标准格式。更具体地，将缓存的所有元素的备注按照缓存的JSON格式数据的地址顺序直接填充到文档模板中的相应位置包括：将缓存的所有元素的备注以文档模板中文字的字号、字体、格式、间距、段落自动填充到文档模板相应位置中。例如，文字的字号、字体、格式、间距等是按照模板的格式进行填充。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition-December1999)的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。编码的可读性，xml有明显的优势，毕竟人类的语言更贴近这样的说明结构。JSON读起来更像一个数据块，而且恰恰适合机器阅读，所以通过JSON的索引效率更高。

此外，基于图片自动生成项目需求文档中的图片部分包括：通过HTML5的canvas技术获取产品原型界面的图片截图；根据文档模板中图片的顺序将图片截图转换为二进制的方式并在JSON格式数据中缓存；以及使用nodejs插件使二进制格式的图片截图生成图片，并将图片填充到文档模板中的相应位置，以生成项目需求文档中的图片部分。具体地，将图片截图转换为二进制的方式图片数据并以JSON格式数据缓存以能够将图片数据传送至服务器终端。使用nodejs插件将二进制方式的图片数据转换为图片截图，然后将该图片截图填充到填充到文档模板中的相应位置。例如，通过HTML5的canvas获取产品原型界面的图片截图包括：通过HTML5的canvas对产品原型界面的图片以1:1的比例进行自动截图。例如，填充前的截图是按照1:1的比例对原型界面进行截图，属于标准格式。将图片填充到文档模板中包括：以文档模板默认的尺寸将图片自动填充到文档模板中。HTML5(HyperText MarkupLanguage 5)是对HTML标准的第五次修订，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入，同时提供的新功能也改变用户与文档的交互方式，比如：离线编辑、本地存储、设备兼容、高性能及快速集成、跨文档拖拽、多用途互联网邮件扩展等特性。Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用，是一种后台语言，提供的主要特性有：RESTful API、单线程、事件驱动、非阻塞IO、V8虚拟机等。

具体地，参考图2以具体示例的方式对基于产品原型界面的文档生成方法进行描述。

产品原型界面按照模板生成需求文档的方法具体内容及步骤：

步骤1：设计标准格式的需求文档模板，上传至需求文档模板管理中心。需求文档模板。

步骤2：在原型界面中添加元素的备注，此备注用于生成文档的文字。比如界面上按钮的备注、表格的备注、区域的备注等元素的备注，都会生成在需求文档中。例如，按钮“保存”备注内容就是：“通过填写表单数据后，点击该保存按钮会将数据提交到后台进行数据库的保存”。备注内容是在界面元素上由界面设计人员(通常是指需求人员)填写的。然而，现有技术不添加界面元素的备注信息，而是有另外的工具提供备注内容的输入。

具体地，生成文档的文字是在原型界面设计工具(www.xdeer.cn)的元素的备注属性中填充的。步骤一、在原型界面设计工具中，对每个界面的元素进行备注的填写。步骤二、获取界面上所有元素的备注，以JSON格式数据在前端缓存起来。步骤三、然后在生产文档时，将JSON格式数据的文字直接填充在模板上即可。

步骤3：根据原型界面区域进行自动截图。例如，对canvas技术的封装，提供接口可直接调用实现自动截图。此外还有对数据的组装，用JSON格式把页面元素的备注、图片转化成二进制格式等信息组装起来，方便传入服务端进行需求文档的生成。

具体地，canvas技术只是对界面进行1:1的比例进行自动截图，在填充到需求文档时会按照word默认大小填充(就跟我们复制一张图片往word粘贴时的效果一样。具体地，步骤一、生成需求文档前，通过canvas技术获取每个界面的截图，并以二进制的方式存储在JSON格式数据中缓存。步骤二、当生成需求文档时，使用了nodejs的插件docxtemplater来将图片的二进制格式生成图片并填充在模板指定的位置。采用HTML5的canvas技术来完成对界面的自动截图。

步骤4：选择模板生成项目需求文档。

该需求文档包括word文档，如步骤1中，可以通过选择功能主要是通过弹窗的方式，在下拉列表中选择文档模板管理中心录入的文档模板。选择文档模板后，基于元素的备注自动生成项目需求文档的文字部分；以及基于图片自动生成项目需求文档中的图片部分；然后，再将文字部分和图片部分进行组合生成项目需求文档。

本发明的另一个具体实施例，公开了基于产品原型界面的文档生成装置，如图3所示。参考图3，基于产品原型界面的文档生成装置包括：模板生成模块302，用于生成标准格式的文档模板，并将文档模板上传至文档模板管理中心；备注添加模块304，用于在产品原型界面中添加元素的备注，其中，产品原型界面包括图片；以及项目需求文档生成模块306，用于选择文档模板，并基于元素的备注和图片自动生成项目需求文档。具体地，元素的备注包括产品原型界面上按钮的备注、表格的备注、区域的备注、输入框的备注、备选框的备注、下拉框的备注、标签的备注、以及其他任何元素的备注，其中，在产品原型界面中添加元素的备注包括：在原型界面设计工具中打开产品原型界面；以及在产品原型界面的按钮的备注属性、表格的备注属性和区域的备注属性、输入框的备注属性、备选框的备注属性、下拉框的备注属性、标签的备注属性、以及其他任何元素的备注属性中分别添加元素的备注。

与现有技术相比，本发明至少可实现如下有益效果之一：

1、通过产品原型界面按模板生成需求文档的方法，本方法填补根据产品原型界面自动生成需求文档的空白，从而提升产品研发迭代效率。

2、整体上达到基础性、重复性工作集中维护，协同、执行工具化的目的，保证有限的人力资源投入在产品创新等高价值产出事项上。

3、由于根据产品原型界面自动生成需求文档的空白，所以当产品原型变更后，需求文档也能够快速地进行相应的调整。

4、以项目为单位，将项目的每个界面元素解析成JSON格式数据，通过选择的需求文档模板，自动截图以及文字一并填充到模板中，最终生成标准格式的需求文档，此过程可以多人协同参与。

本领域技术人员可以理解，实现上述实施例方法的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读存储介质中。其中，所述计算机可读存储介质为磁盘、光盘、只读存储记忆体或随机存储记忆体等。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种基于产品原型界面的文档生成方法，其特征在于，包括：

设计标准格式的文档模板，并将所述文档模板上传至文档模板管理中心；

在所述产品原型界面中添加元素的备注，其中，所述产品原型界面包括图片；以及

从所述文档模板管理中心选择得到文档模板，并基于所述元素的备注和所述图片自动生成项目需求文档。

2.根据权利要求1所述的基于产品原型界面的文档生成方法，其特征在于，所述元素的备注包括所述产品原型界面上按钮的备注、表格的备注、区域的备注、输入框的备注、备选框的备注、下拉框的备注和标签的备注，其中，

在所述产品原型界面中添加元素的备注包括：

在原型界面设计工具中打开所述产品原型界面；以及

在所述产品原型界面的按钮的备注属性、表格的备注属性、区域的备注属性、输入框的备注属性、备选框的备注属性、下拉框的备注属性和标签的备注属性中分别添加所述元素的备注。

3.根据权利要求2所述的基于产品原型界面的文档生成方法，其特征在于，在基于所述元素的备注和所述图片自动生成项目需求文档之前还包括：

基于所述元素的备注自动生成所述项目需求文档的文字部分；以及

基于所述图片自动生成所述项目需求文档中的图片部分。

4.根据权利要求3所述的基于产品原型界面的文档生成方法，其特征在于，基于所述元素的备注自动生成所述项目需求文档的文字部分包括：

获取所述产品原型界面上所有元素的备注，并以JSON格式数据缓存；以及

将缓存的所有元素的备注按照缓存的JSON格式数据的地址顺序直接填充到所述文档模板中的相应位置以生成所述项目需求文档的文字部分。

5.根据权利要求4所述的基于产品原型界面的文档生成方法，其特征在于，将缓存的所有元素的备注按照缓存的JSON格式数据的地址顺序直接填充到所述文档模板中的相应位置包括：

将缓存的所有元素的备注以所述文档模板中文字的字号、字体、格式、间距、段落自动填充到所述文档模板相应位置中。

6.根据权利要求3所述的基于产品原型界面的文档生成方法，其特征在于，基于所述图片自动生成所述项目需求文档中的图片部分包括：

通过HTML5的canvas技术获取所述产品原型界面的图片截图；

将所述图片截图以二进制的方式在JSON格式数据中缓存；以及

使用nodejs插件使二进制格式的图片截图生成图片，并将所述图片填充到所述文档模板中的相应位置，以生成所述项目需求文档中的图片部分。

7.根据权利要求6所述的基于产品原型界面的文档生成方法，其特征在于，通过HTML5的canvas获取所述产品原型界面的图片截图包括：

通过HTML5的canvas对所述产品原型界面的图片以1:1的比例进行自动截图。

8.根据权利要求6所述的基于产品原型界面的文档生成方法，其特征在于，将所述图片填充到所述文档模板中包括：

以所述文档模板默认的尺寸将所述图片自动填充到所述文档模板中。

9.一种基于产品原型界面的文档生成装置，其特征在于，包括：

模板生成模块，用于生成标准格式的文档模板，并将所述文档模板上传至文档模板管理中心；

备注添加模块，用于在所述产品原型界面中添加元素的备注，其中，所述产品原型界面包括图片；以及

项目需求文档生成模块，用于选择文档模板，并基于所述元素的备注和所述图片自动生成项目需求文档。

10.根据权利要求9所述的基于产品原型界面的文档生成装置，其特征在于，所述元素的备注包括所述产品原型界面上按钮的备注、表格的备注、区域的备注、输入框的备注、备选框的备注、下拉框的备注和标签的备注，其中，

在所述产品原型界面中添加元素的备注包括：

在原型界面设计工具中打开所述产品原型界面；以及

在所述产品原型界面的按钮的备注属性、表格的备注属性、区域的备注属性、输入框的备注属性、备选框的备注属性、下拉框的备注属性和标签的备注属性中分别添加所述元素的备注。

Images