CN113760257B - 基于主辅画板的产品原型设计方法、系统、介质及设备 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于主辅画板的产品原型设计方法、系统、介质及设备。

背景技术

软件原型设计过程中，通常利用原型工具进行原型设计。原型工具是用于绘制各类产品界面示意图的工具，并且可以为项目界面添加交互设置，实现动态效果。完成的原型界面可以进行演示，以模拟真实的产品界面及操作效果。

当前的原型工具普遍采用单画板的机制，而单画板机制一个原型页面只有一个画板，不能根据需要新增画板，有较强的设计局限性；且制作弹窗等效果时，需要依靠显示/隐藏的交互设置，操作步骤较多，且隐藏起来的组件仍会遮挡画板中的主要内容，影响操作效率。

发明内容

本发明所要解决的技术问题是针对现有技术存在的问题，提供一种基于主辅画板的产品原型设计方法、系统、介质及设备。

为解决上述技术问题，本发明实施例提供一种基于主辅画板的产品原型设计方法，包括：创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计。

为解决上述技术问题，本发明实施例还提供一种基于主辅画板的产品原型设计系统，包括：主画板创建模块、辅助画板创建模块和产品原型设计模块。主画板创建模块用于在创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；辅助画板创建模块，于当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；产品原型设计模块用于在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计。

为解决上述技术问题，本发明实施例还提供一种计算机可读存储介质，包括指令，当所述指令在计算机上运行时，使所述计算机执行上述技术方案所述基于主辅画板案的产品原型设计方法。

为解决上述技术问题，本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在所述存储器上的并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述技术方案所述基于主辅画板的产品原型设计方法。

本发明的有益效果：突破了原型设计工具中一个页面中只有单个画板的限制，可根据需求在一个原型页面中创建多个画板，每个画板都能够放置内容；并且提供了一种通过辅助画板制作弹窗、内容切换等交互效果的全新方式，主画板用于呈现每个页面中的主体内容；而辅助画板则可作为交互设置的目标，并搭配交互参数(触发方式、交互命令、动画效果等)来实现弹窗、内容切换等效果，以此可以更清晰地区分页面中的主次内容，更便于管理；使用辅助画板来制作弹窗等交互效果，辅助画板中的内容不会遮挡主画板的内容，可以更直观地对各个画板中的内容进行查看和修改。

本发明附加的方面及其优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。

附图说明

图1为本发明实施例提供的基于主辅画板的产品原型设计方法流程图；

图2为现有技术在原型设计工具制作交互效果示意图；

图3为本发明实施例制作交互效果示意图；

图4为本发明实施例交互设置窗口示意图；

图5为本发明实施例中辅助画板在主画板中映射区域示意图；

图6为本发明另一实施例提供的基于主辅画板的产品原型设计方法流程；

图7为本发明实施例中创建内容面板与辅助画板关联关系示意图；

图8为本发明实施例提供的基于主辅画板的产品原型设计系统结构框图。

具体实施方式

以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。

本发明实施例中涉及的专业术语介绍如下：

产品原型：互联网产品经理在进行产品设计时绘制的线框图，类似于产品草图。

画板：进行产品原型设计时，承载页面内容的容器，主要的原型内容都需要放置在画板上。

交互：在产品原型项目中呈现的软件上动态效果的触发与响应。

图1为本发明实施例提供的基于主辅画板的产品原型设计方法的流程图。如图1所示，该方法包括：

S110，创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；

主画板(Artboard)：创建页面(Page)的时候，后台自动为当前页面创建一个主画板数据，并随页面数据一起返回到前端，同一个页面的主画板有且仅只能有一个主画板，该画板会有一个固定标识(type＝“main”)用于与辅助画板进行区分。

S120,当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；

辅助画板(Fragment)：页面创建后，手动添加的画板都为辅助画板，辅助画板不提供特殊标识，可以同时有多个辅助画板，辅助画板由用户自己根据需要创建。同一个页面的主画板与辅助画板通过数据中的pageID与页面的ID关联，以此描述画板与页面的关联关系。

S130，在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计。

如图2所示，现有技术的原型设计工具只包括一个画板210，在制作弹窗、内容切换等交互效果时，以制作组件b的弹窗效果为例，将组件b作为触发源220，充当弹窗的内容放在画板中所需要的位置，形成弹窗区域230，先将弹窗区域230设置为隐藏状态(隐藏状态时弹窗区域以预设填充色显示)，再通过添加交互设置，使其在设置的触发方式下显示。使用现有技术制作弹窗效果，弹窗内容不管是在显示状态还是隐藏状态，都会遮挡主画板中的主要内容，从而导致想要对主要内容进行编辑时，需要先移开隐藏的弹窗内容，极大影响操作效率；且使用现有技术做弹窗效果，需要将弹窗内容进行隐藏，而如果后续想再对弹窗内容进行编辑，则需要先将内容取消隐藏，进行编辑后，又需要再次将其隐藏，操作繁琐，效率低下。

如图3所示，本发明实施例中，一个原型页面中可以创建一个主画板310和一个或多个辅助画板320。以制作组件b的弹窗效果为例，将组件b作为触发源330，将充当弹窗的内容放在辅助画板320中，形成弹窗区域340，将辅助画320整体作为交互目标，当进行弹窗效果展示时，使辅助画板320在设置的触发方式下显示出来，并支持在交互设置窗口350中(如图4所示)，设置触发方式、交互命令、动画效果和遮罩(弹窗内容显示时的灰色背景)等效果。本发明实施例中制作弹窗效果时，将弹窗内容放在辅助画板上，弹窗内容不会遮挡主画板中的内容，不影响对主画板内容的后续编辑；弹窗内容在辅助画板中，无需隐藏，可以随时方便地进行编辑，操作更方便。

本发明实施例突破了原型设计工具中一个页面中只有单个画板的限制，可根据需求在一个原型页面中创建多个画板，每个画板都能够放置内容，并且提供了一种通过辅助画板制作弹窗、内容切换等交互效果的全新方式，主画板用于呈现每个页面中的主体内容；而辅助画板则可作为交互设置的目标，并搭配交互参数(触发方式、交互命令、动画效果等)来实现弹窗、内容切换等效果，以此可以更清晰地区分页面中的主次内容，更便于管理；使用辅助画板来制作弹窗等交互效果，辅助画板中的内容不会遮挡主画板的内容，可以更直观地对各个画板中的内容进行查看和修改；对交互原型设计的学习成本大幅降低，使相关从业人员更容易上手，能更快更好地产出结果。

可选地，在所述主画板和辅助画板上添加所需组件时，拖拽图层数据到目标画板上，前端自动侦测拖拽终点所在位置，根据拖拽终点所在位置及当前页面中所有画板的坐标及尺寸确定所选中的画板，在所述选中的画板上添加拖拽的图层数据。

画板上添加组件时，自动侦测拖动终点的位置(如鼠标当前所在位置)，通过鼠标当前所在位置(MousePoint)及画板的坐标(Position)及尺寸(Size)进行判断，需要循环判断当前页面中的所有画板，当某个画板满足以下条件时：MousePoint.x>Position.x&&MousePoint.x<Position.x+Size.Width&&MousePoint.y>Position.y&&MousePoint.y<Position.y+Size.Height，则在该画板上添加上鼠标拖拽的图层数据。MousePoint.x为鼠标当前所在位置的横坐标、Position.y为为鼠标当前所在位置的纵坐标，Position.x为画板原点的横坐标、Position.y为画板原点的纵坐标、Size.Width为画板宽度、Size.Height为画板高度。

可选地，所述将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，包括：将选中的主画板中的组件作为触发源，前端判断选中的所述组件的组件类型，当组件类型为基元组件或单项目复合组件时，组件右上角显示交互链接点，拖动交互链接点到辅助画板上，将辅助画板作为所述触发源的交互目标；前端展示交互设置窗口，在所述交互设置窗口中进行交互设置，设置完成后将交互参数提交到后端进行保存。

做交互(Interaction)设置时，可以查找辅助画板，并将其作为交互目标，查找方式同添加组件的方式相同，根据前面提到的标识(type)确定当前找到的是否为辅助画板(主画板不可作为交互目标),以此将辅助画板作为交互目标。交互设置的目的是给项目内容制作动态效果，如点击使内容显示、隐藏、移动、缩放等，以使原型项目模拟真实的用户界面操作。交互设置的构成元素包括：触发源、触发方式、交互目标、动画效果。动画效果可以包括缓动、时长、延时等。例如：点击按钮后使矩形移动，执行时长为2秒。在此交互设置中，“点击”是触发方式，“按钮”是触发源，“矩形”是交互目标，“执行时长2秒”为动画效果。演示时，通过用户的点击等触发方式，使辅助画板根据交互设置进行显示或隐藏，以实现弹窗等交互效果。

交互的设置方式包括两步：一、确定触发源与交互目标；二、在交互设置窗口中设置具体的动画效果。以上两步均在前端完成，点击此窗口中的确定后：将交互参数(构成元素)提交到后端进行保存，交互参数提交成功后，前端在交互面板中生成相应的交互设置列表，供用户对已有的交互设置进行调整和删除。

如图5所示，交互设置完成后，当选中触发源330时，从后端获取与所述触发源330存在交互关系辅助画板320的尺寸(宽度和高度)，生成与所述辅助画板尺寸一致映射区域360，映射区域可以为灰色区域，所述映射区域360展示在主画板310中，用于反应所述辅助画板320在所述主画板310中的大小和位置；通过拖动所述映射区域360，用于改变交互效果展示时辅助画板320出现在主画板310中的位置。

如图6所示，本发明实施例提供一种基于主辅画板的产品原型设计方法，包括：

S110，创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；

S120,当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；

S140，在主画板中添加一个内容面板，将所述内容面板与所需的至少一个辅助画板进行关联。

如图7所示，在主画板中添加一个内容面板，将所内容面板与所需的至少一个辅助画板进行关联，包括：在主画板310中添加一个内容面板370，选中所述内容面板370，依次拖动内容面板的链接点到需要关联的至少一个辅助画板320上(前端进行判断，仅当链接的目标为辅助画板时才会生效)，将拖动终点所在的辅助画板320的画板ID提交到后端，后端将所述辅助画板的画板ID添加到所述内容面板的辅助画板列表中，创建所述内容面板与所述辅助画板的关联关系，并将关联数据返回到前端，前端根据所述关联数据在内容面板组件上以列表形式显示所关联的辅助画板名称。

完成关联后，相当于多个辅助画板的内容被放进了内容面板中。本发明实施例通过给内容面板关联多个辅助画板，可以使内容面板在演示时切换不同的内容(即关联的辅助画板内容)。

如图8所示，本发明实施例还提供一种基于主辅画板的产品原型设计系统800，包括：主画板创建模块810、辅助画板创建模块820和产品原型设计模块830。

主画板创建模块810用于在创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；辅助画板创建模块820用于当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；产品原型设计模块830用于在主画板和辅助画板上添加所需组件，将辅助画板作为主画板中或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本发明实施例还提供一种计算机可读存储介质，包括指令，当所述指令在计算机上运行时，使所述计算机执行上述实施例所述基于主辅画板的产品原型设计方法。

本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在所述存储器上的并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述实施例所述基于主辅画板的产品原型设计方法。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的系统实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种基于主辅画板的产品原型设计方法，其特征在于，包括：

创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；

当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；

在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计；

所述将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，包括：

将选中的主画板或主画板中的组件作为触发源，前端判断选中的所述组件的组件类型，当组件类型为基元组件或单项目复合组件时，组件右上角显示交互链接点，拖动交互链接点到辅助画板上，将辅助画板作为所述触发源的交互目标；前端展示交互设置窗口，在所述交互设置窗口中进行交互设置，设置完成后将交互参数提交到后端进行保存。

2.根据权利要求1所述的方法，其特征在于，在所述主画板和辅助画板上添加所需组件时，拖拽图层数据到目标画板上，前端自动侦测拖拽终点所在位置，根据拖拽终点所在位置及当前页面中所有画板的坐标及尺寸确定所选中的画板，在所述选中的画板上添加拖拽的图层数据。

3.根据权利要求1所述的方法，其特征在于，所述在所述交互设置窗口中进行交互设置包括：设置交互效果的触发方式、动画效果和遮罩。

4.根据权利要求1所述的方法，其特征在于，还包括：所述交互参数提交成功后，前端在交互面板中生成相应的交互设置列表，供用户对已有的交互设置进行调整和删除。

5.根据权利要求1所述的方法，其特征在于，所述交互设置完成后，当选中触发源时，从后端获取与所述触发源存在交互关系的辅助画板的尺寸，生成与所述辅助画板尺寸一致的映射区域，所述映射区域展示在主画板中，用于反应所述辅助画板在所述主画板中的大小和位置；通过拖动所述映射区域，用于改变交互效果展示时辅助画板出现在主画板中的位置。

6.根据权利要求1至5任一项所述的方法，其特征在于，还包括在主画板中添加一个内容面板，将所内容面板与所需的至少一个辅助画板进行关联，具体包括：

选中所述内容面板，依次拖动内容面板的链接点到需要关联的至少一个辅助画板上，将拖动终点所在的辅助画板的画板ID提交到后端，后端将所述辅助画板的画板ID添加到所述内容面板的辅助画板列表中，创建所述内容面板与所述辅助画板的关联关系，并将关联数据返回到前端，前端根据所述关联数据在内容面板组件上以列表形式显示所关联的辅助画板名称。

7.一种基于主辅画板的产品原型设计系统，其特征在于，包括：

主画板创建模块，用于在创建页面时，后台自动为当前页面生成带有主画板标识的唯一主画板数据，并随页面数据返回到前端，在前端页面展示主画板；

辅助画板创建模块，用于当前页面创建后，根据前端发送的辅助画板创建请求，后台为当前页面创建对应的辅助画板数据，并返回到前端，在前端页面展示辅助画板；其中，同一个页面的主画板和辅助画板通过画板数据中的pageID与页面的ID相关联；

产品原型设计模块，用于在主画板和辅助画板上添加所需组件，将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，完成产品原型设计；

所述将辅助画板作为主画板或主画板中组件的交互目标，通过辅助画板制作交互效果，包括：

将选中的主画板或主画板中的组件作为触发源，前端判断选中的所述组件的组件类型，当组件类型为基元组件或单项目复合组件时，组件右上角显示交互链接点，拖动交互链接点到辅助画板上，将辅助画板作为所述触发源的交互目标；前端展示交互设置窗口，在所述交互设置窗口中进行交互设置，设置完成后将交互参数提交到后端进行保存。

8.一种计算机可读存储介质，包括指令，其特征在于，当所述指令在计算机上运行时，使所述计算机执行权利要求1至6任一项所述基于主辅画板的产品原型设计方法。

9.一种计算机设备，包括存储器、处理器及存储在所述存储器上的并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述基于主辅画板的产品原型设计方法。