基于主辅画板的产品原型设计方法、系统、介质及设备技术方案

本发明专利技术涉及一种基于主辅画板的产品原型设计方法、系统、介质及设备，方法包括：创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端；当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端；在主画板和辅助画板上添加所需组件，将辅助画板作为主画板中组件的交互目标制作交互效果，完成产品原型设计。本发明专利技术突破了原型设计工具中一个页面中只有单个画板的限制，可根据需求在一个原型页面中创建多个画板；通过辅助画板制作交互效果，可更清晰地区分页面中的主次内容；并且制作交互效果时不会遮挡主画板的内容，可直观地查看和修改各个画板中的内容。个画板中的内容。个画板中的内容。

【技术实现步骤摘要】
基于主辅画板的产品原型设计方法、系统、介质及设备


[0001]本专利技术涉及计算机
，尤其涉及一种基于主辅画板的产品原型设计方法、系统、介质及设备。

技术介绍

[0002]软件原型设计过程中，通常利用原型工具进行原型设计。原型工具是用于绘制各类产品界面示意图的工具，并且可以为项目界面添加交互设置，实现动态效果。完成的原型界面可以进行演示，以模拟真实的产品界面及操作效果。
[0003]当前的原型工具普遍采用单画板的机制，而单画板机制一个原型页面只有一个画板，不能根据需要新增画板，有较强的设计局限性；且制作弹窗等效果时，需要依靠显示/隐藏的交互设置，操作步骤较多，且隐藏起来的组件仍会遮挡画板中的主要内容，影响操作效率。

技术实现思路

[0004]本专利技术所要解决的技术问题是针对现有技术存在的问题，提供一种基于主辅画板的产品原型设计方法、系统、介质及设备。
[0005]为解决上述技术问题，本专利技术实施例提供一种基于主辅画板的产品原型设计方法，包括：创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计。
[0006]为解决上述技术问题，本专利技术实施例还提供一种基于主辅画板的产品原型设计系统，包括：主画板创建模块、辅助画板创建模块和产品原型设计模块。主画板创建模块用于在创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；辅助画板创建模块，于当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；产品原型设计模块用于在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计。
[0007]为解决上述技术问题，本专利技术实施例还提供一种计算机可读存储介质，包括指令，当所述指令在计算机上运行时，使所述计算机执行上述技术方案所述基于主辅画板案的产品原型设计方法。
[0008]为解决上述技术问题，本专利技术实施例还提供一种计算机设备，包括存储器、处理器
及存储在所述存储器上的并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述技术方案所述基于主辅画板的产品原型设计方法。
[0009]本专利技术的有益效果：突破了原型设计工具中一个页面中只有单个画板的限制，可根据需求在一个原型页面中创建多个画板，每个画板都能够放置内容；并且提供了一种通过辅助画板制作弹窗、内容切换等交互效果的全新方式，主画板用于呈现每个页面中的主体内容；而辅助画板则可作为交互设置的目标，并搭配交互参数(触发方式、交互命令、动画效果等)来实现弹窗、内容切换等效果，以此可以更清晰地区分页面中的主次内容，更便于管理；使用辅助画板来制作弹窗等交互效果，辅助画板中的内容不会遮挡主画板的内容，可以更直观地对各个画板中的内容进行查看和修改。
[0010]本专利技术附加的方面及其优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本专利技术实践了解到。
附图说明
[0011]图1为本专利技术实施例提供的基于主辅画板的产品原型设计方法流程图；
[0012]图2为现有技术在原型设计工具制作交互效果示意图；
[0013]图3为本专利技术实施例制作交互效果示意图；
[0014]图4为本专利技术实施例交互设置窗口示意图；
[0015]图5为本专利技术实施例中辅助画板在主画板中映射区域示意图；
[0016]图6为本专利技术另一实施例提供的基于主辅画板的产品原型设计方法流程；
[0017]图7为本专利技术实施例中创建内容面板与辅助画板关联关系示意图；
[0018]图8为本专利技术实施例提供的基于主辅画板的产品原型设计系统结构框图。
具体实施方式
[0019]以下结合附图对本专利技术的原理和特征进行描述，所举实例只用于解释本专利技术，并非用于限定本专利技术的范围。
[0020]本专利技术实施例中涉及的专业术语介绍如下：
[0021]产品原型：互联网产品经理在进行产品设计时绘制的线框图，类似于产品草图。
[0022]画板：进行产品原型设计时，承载页面内容的容器，主要的原型内容都需要放置在画板上。
[0023]交互：在产品原型项目中呈现的软件上动态效果的触发与响应。
[0024]图1为本专利技术实施例提供的基于主辅画板的产品原型设计方法的流程图。如图1所示，该方法包括：
[0025]S110，创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；
[0026]主画板(Artboard)：创建页面(Page)的时候，后台自动为当前页面创建一个主画板数据，并随页面数据一起返回到前端，同一个页面的主画板有且仅只能有一个主画板，该画板会有一个固定标识(type＝“main”)用于与辅助画板进行区分。
[0027]S120,当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画
板和辅助画板通过画板数据中的pageID与页面的ID相关联；
[0028]辅助画板(Fragment)：页面创建后，手动添加的画板都为辅助画板，辅助画板不提供特殊标识，可以同时有多个辅助画板，辅助画板由用户自己根据需要创建。同一个页面的主画板与辅助画板通过数据中的pageID与页面的ID关联，以此描述画板与页面的关联关系。
[0029]S130，在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计。
[0030]如图2所示，现有技术的原型设计工具只包括一个画板210，在制作弹窗、内容切换等交互效果时，以制作组件b的弹窗效果为例，将组件b作为触发源220，充当弹窗的内容放在画板中所需要的位置，形成弹窗区域230，先将弹窗区域230设置为隐藏状态(隐藏状态时弹窗区域以预设填充色显示)，再通过添加交互设置，使其在设置的触发方式下显示。使用现有技术制作弹窗效果，弹窗内容不管是在显示状态还是隐藏状态，都会遮挡主画板中的主要内容，从而导致想要对主要内容进行编辑时，需要先移开隐藏的弹窗内容，极大影响操作效率；且使用现有技术做弹窗效果，需要将弹窗内容进行隐藏，而如果后续想再对弹窗内容进行编辑，则需要先将内容取本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于主辅画板的产品原型设计方法，其特征在于，包括：创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计。2.根据权利要求1所述的方法，其特征在于，在所述主画板和辅助画板上添加所需组件时，拖拽图层数据到目标画板上，前端自动侦测拖拽终点所在位置，根据拖拽终点所在位置及当前页面中所有画板的坐标及尺寸确定所选中的画板，在所述选中的画板上添加拖拽的图层数据。3.根据权利要求1所述的方法，其特征在于，所述将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，包括：将选中的主画板或主画板中的组件作为触发源，前端判断选中的所述组件的组件类型，当组件类型为基元组件或单项目复合组件时，组件右上角显示交互链接点，拖动交互链接点到辅助画板上，将辅助画板作为所述触发源的交互目标；前端展示交互设置窗口，在所述交互设置窗口中进行交互设置，设置完成后将交互参数提交到后端进行保存。4.根据权利要求3所述的方法，其特征在于，所述在所述交互设置窗口中进行交互设置包括：设置交互效果的触发方式、动画效果和遮罩。5.根据权利要求3所述的方法，其特征在于，还包括：所述交互参数提交成功后，前端在交互面板中生成相应的交互设置列表，供用户对已有的交互设置进行调整和删除。6.根据权利要求3所述的方法，其特征在于，所述交互设置完成后，当选中触发源时，从后端获取与所述触发源存在交互关系的辅助画板的尺寸，生成与...

【专利技术属性】
技术研发人员：孟小江，刘松，邹雨良，周家琪，
申请(专利权)人：成都摹客科技有限公司，
类型：发明
国别省市：