CN109871254A - 一种可分离的原型工具的单元格子的创建方法及系统 - Google Patents

Abstract

本申请涉及一种可分离的原型工具的单元格子的创建方法及系统，所述方法包括如下步骤：建立独立单元，独立单元包括至少一种类型的基础组件；建立一个快速格子，并将独立单元编组到快速格子中，得到单元格子模板；获取用户设置的需要格子的数量，并根据单元格子模板生成数量的单元格子；分别对每个单元格子中的基础组件进行重复过滤处理，得到多个过滤后的单元格子；分别为每个过滤后的单元格子设置一个用于指示过滤后的单元格子的状态的属性标签，状态包括同步状态和分离状态。可在保持设计页面真实性的同时，从多个同步的单元格子中分离出独立单元格子进行编辑，提高了原型设计的灵活性和效率。

Description

一种可分离的原型工具的单元格子的创建方法及系统

技术领域

本发明涉及计算机应用技术领域，尤其涉及一种可分离的原型工具的单元格子的创建方法及系统。

背景技术

在计算机软件界面中，经常会遇到各种各样的由图片，形状，文字等组合而成的阵列，这些阵列有很大的规律可循，每个小单元涉及的元素种类一般都是相同，但也有例外，如：在微信朋友圈界面中，虽然每条动态可看作的是一个小单元，然后不停的重复，但在动态中间会随机插入一条广告。如果在设计微信朋友圈广告植入这类型的页面时，使用传统的小单元阵列就不能解决问题。

如：Adobe XD软件，可通过重复网络工具生成小单元的阵列，但是当重复网络中有一个或两个单元格需要与重复网络中其他单元格不同样式或布局时，Adobe XD等软件的重复网络工具就不能满足实际的需求了。

综上所述，计算机软件界面中有大量重复的小单元组成的界面，在重复的同时又会有随机的某一个或多个小单元异于其他相同的小单元，目前的原型设计无法解决这个问题，从而极大程度上影响了原型设计和用户体验界面设计的效率。

发明内容

本发明为了解决上述技术问题提供一种可分离的原型工具的单元格子的创建方法。

本发明解决上述技术问题的技术方案如下：一种可分离的原型工具的单元格子的创建方法，包括如下步骤：

建立独立单元，所述独立单元包括至少一种类型的基础组件。

建立一个快速格子，并将所述独立单元编组到所述快速格子中，得到单元格子模板。

获取用户设置的需要格子的数量，并根据所述单元格子模板生成所述数量的单元格子，其中，每个所述单元格子中的基础组件的类型与所述单元格子模板中的基础组件的类型相同。

分别对每个所述单元格子中的所述基础组件进行重复过滤处理，得到多个过滤后的单元格子。

分别为每个所述过滤后的单元格子设置一个用于指示所述过滤后的单元格子的状态的属性标签，所述状态包括同步状态和分离状态。

本发明的有益效果是，通过将需要组合的基础组件按照不同类型组合成独立单元并添加到快速格子中以形成单元格子模板，随后可根据单元格子模板快速复制出多个单元格子，以快速生成由单元格子组成的同类列表。再对每个单元格子中的基础组件进行重复过滤处理。从而实现在设计过程中制作列表页、阵列列表时，同类列表能够快速生成，且列表中的内容各不相同，保证了保持设计页面真实性，同时也提高了设计效率。而且，通过在每个单元格子设置一个用于指示所述过滤后的单元格子的状态的属性标签，可以在重复类型的单元格子中，任意更改其中一个或多个单元格子的状态，从而分离出独立的单元格子进行编辑，提高了原型设计的灵活性和效率。

在上述技术方案的基础上，本发明还可以做如下改进。

进一步，所述基础组件包括文本组件、图片组件、图标组件和形状组件中的至少一种。

进一步，所述生成所述数量的单元格子的具体实现如下：

以所述单元格子模板为起始点在显示界面上建立一个矩形的显示区域。

根据所述显示区域的面积和所述单元格子模板的面积确定所述单元格子的数量。

采用上述进一步方案的有益效果是，通过在界面上以显示区域的面积来确定单元格子的数量，可更直观、快捷地在界面上直接确定需要的单元格子数量，从而提升了用户的设计体验和设计效率。

进一步，所述确定所述单元格子的数量具体实现如下：

获取所述显示区域的高度H、所述单元格子模板的高度H1以及纵向相邻两个所述单元格子之间的间距H2，并根据所述显示区域的高度H、所述单元格子模板的高度H1以及所述纵向相邻两个所述单元格子之间的间距H2计算出所述显示区域在纵向上的单元格子的数量M。

获取所述显示区域的宽度L、所述单元格子模板的宽度L1以及横向相邻两个所述单元格子之间的间距L2，并根据所述显示区域的宽度L、所述单元格子模板的宽度L1以及所述横向相邻两个所述单元格子之间的间距L2计算出所述显示区域在横向上的单元格子的数量N。

通过M*N计算出所述单元格子的数量，并在所述显示区域中生成所述数量的单元格子，且所述数量的所述单元格子呈矩阵排列。

采用上述进一步方案的有益效果是，通过计算出所述显示区域在纵向上的单元格子的数量M和所述显示区域在横向上的单元格子的数量N，并根据M*N可精准地确定生成的单元格子的数量，保证生成的单元格子数量的准确性。

进一步，所述根据所述显示区域的高度H、所述单元格子模板的高度H1以及所述纵向相邻两个所述单元格子之间的间距H2计算出所述显示区域在纵向上的单元格子的数量M具体包括：

用所述显示区域的高度H除以所述单元格子模板的高度H1和所述纵向相邻两个所述单元格子之间的间距H2的和H1+H2，得到商M1和余数D1；

若所述余数D1为0，则将所述数量M确定为M1；

若所述余数D1不为0，则检测是否存在用户输入的第一增添指令，若是，则将所述数量M确定为1+M1；若否，则将所述数量M确定为M1。

进一步，所述根据所述显示区域的宽度L、所述单元格子模板的宽度L1以及所述横向相邻两个所述单元格子之间的间距L2计算出所述显示区域在横向上的单元格子的数量N具体包括：

用所述显示区域的宽度L除以所述单元格子模板的宽度L1和所述横向相邻两个所述单元格子之间的间距L2的和(L1+L2)，得到商N1和余数Z1；

若所述余数Z1为0，则将所述数量N确定为N1；

若所述余数Z1不为0，则检测是否存在用户输入的第二增添指令，若是，则将所述数量N确定为1+N1；若否，则将所述数量N确定为N1。

进一步，在所述通过M*N计算出所述单元格子的数量，并在所述显示区域中生成所述数量的单元格子之后，还包括：

当检测到用户输入的纵向增添指令时，将N增加1；

当检测到用户输入的横向增添指令时，将M增加1。

采用上述进一步方案的有益效果是，通过用户输入纵向增添指令或横向增添指令可直接增加单元格子的数量，操作起来简单、快捷，可进一步提高设计效率。

进一步，所述创建方法还包括：

获取用户输入的状态切换指令，并根据所述状态切换指令确定至少一个待切换状态的过滤后的单元格子，并将所述待切换状态的过滤后的单元格子的属性标签所指示的状态更改为与所述状态切换指令对应的状态。

采用上述进一步方案的有益效果是，通过用户输入的状态切换指令，切换单元格子的状态，可以从原本相同类型且同步的单元格子中分离出需要特别编辑的单元格子，在编辑分离出的单元格子时，其他同步的单元格子不受影响，从而大大提高了原型设计的灵活性和效率。

本发明为了解决上述技术问题提供一种可分离的原型工具的单元格子的创建系统。

其技术方案为：一种可分离的原型工具的单元格子的创建系统，包括：

独立单元建立模块，用于建立独立单元，所述独立单元包括至少一种类型的基础组件。

单元格子模板建立模块，用于建立一个快速格子，并将所述独立单元编组到所述快速格子中，得到单元格子模板。

单元格子生成模块，用于获取用户设置的需要格子的数量，并根据所述单元格子模板生成所述数量的单元格子，其中，每个所述单元格子中的基础组件的类型与所述单元格子模板中的基础组件的类型相同。

重复过滤处理模块，用于分别对每个所述单元格子中的所述基础组件进行重复过滤处理，得到多个过滤后的单元格子。

状态切换模块，用于分别为每个所述过滤后的单元格子设置一个用于指示所述过滤后的单元格子的状态的属性标签，所述状态包括同步状态和分离状态。

进一步，所述基础组件包括文本组件、图片组件、图标组件和形状组件中的至少一种。

附图说明

图1为本发明实施例提供的一种基于原型设计工具的单元格子的快速创建方法的流程示意图；

图2为本发明实施例提供的编组后的快速格子的结构示意图；

图3为本发明实施例提供的多个单元格子的列表的结构示意图；

图4为本发明实施例提供的填充图像后的多个单元格子的列表的结构示意图；

图5本发明实施例提供的单元格子在切换为分离状态时的结构示意图。

图6本发明实施例提供的一种基于原型设计工具的单元格子的快速创建系统的结构示意图。

具体实施方式

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

如图1所示，本发明实施例提供的一种可分离的原型工具的单元格子的创建方法，包括如下步骤：

建立独立单元，所述独立单元包括至少一种类型的基础组件。

建立一个快速格子，并将所述独立单元编组到所述快速格子中，得到单元格子模板。

获取用户设置的需要格子的数量，并根据所述单元格子模板生成所述数量的单元格子，其中，每个所述单元格子中的基础组件的类型与所述单元格子模板中的基础组件的类型相同。

分别对每个所述单元格子中的所述基础组件进行重复过滤处理，得到多个过滤后的单元格子。

分别为每个所述过滤后的单元格子设置一个用于指示所述过滤后的单元格子的状态的属性标签，所述状态包括同步状态和分离状态。

需要说明的是，快速格子是用于排版的独立模块，其功能主要是让用户能够对单元格子中各种基础组件进行排列布局。

在实际应用场景中，用户可先在显示界面上通过建立一个待填充的快速格子，然后向快速格子中编组独立单元，其快速格子填充的内容由编组到快速格子中的独立单元决定，其中，独立单元里包括了一种或多种类型的基础组件，例如，图片组件、文字组件、形状、图标等。

在此，以快速设计多个人物名片的列表为例，填充完成后的快速格子，其独立单元可包括了日期类型的文字组件、头像类型的图片组件、邮箱类型的文字组件、名字类型的文字组件。再将包含上述组件的独立单元编组到快速格子中，得到如图2所示的编组后的快速格子，图中的快速格子显示了待填充的图片、带填充的单行文字、带填充的邮箱以及待填充的日期，即不同类型的基础组件，由于快速格子具有排版功能，用户可根据自己的设计需求在快速格子中调整各类基础组件的位置。

然后，以快速格子为单元格子的模板并根据用户设定的单元格子的数量进行复制，得到如图3所示的多个单元格子的列表，其中，在列表中每个单元格子中的组件类型是相同的，Image为待填充的图像组件，Label为待填充组件的标签，用于指示用户在可在Label对应位置进行基础组件的填充。

然后，向每个单元格子中的填充对应类型的基础组件，并对每个基础组件进行重复过滤处理，以保证每个单元格子中的同类型的基础组件是不同的，如图4所示，以人物的头像为例，进行重复过滤处理后，每个格子单元显示的头像均不相同。同理，最终每个单元格子显示的不同类型的基础组件也均不相同，在本图中，由于只填充了头像的图片组件，所以列表中的单元格子只显示了头像图片，其它待填充的部分没有显示具体的组件内容，只显示了待填充的组件类型。

最后，在每个填充完毕后的单元格子中设置一个用于指示所述过滤后的单元格子的状态的属性标签，所述状态包括同步状态和分离状态。其中，多个单元格子在建立之后的原始装填为同步状态，即当更改其中一个单元格子的内容，其他的单元格子也一并更改。当用户需要对某一个或多个单元格子进行特殊处理时，可输入状态切换指令将对应的单元格子的状态从同步转换为分离即可，处于分离状态下的单元格子，在修改其内容时，其他的单元格子的内容保持不变。

需要说明的是，基础组件是从预设值的组件库中调用的，由于组件库中的基础组件是有限的，当运用重复过滤算法对基础组件进行处理时，如果单元格子的数量超过了组件库中的基础组件的数量，则允许重复调用基础组件。

需要说明的是，重复过滤算法为常用的数据去重方法，例如利用数组进行去重，首先对该组数据进行排序，然后从头遍历数组，判断当前位置的数据和下一个位置的数据是否重复，若不重复，添加下一位中的数据到过滤后的数组中，并把比较的基准数据设置为刚加入的这个数据，然后继续进行比较。若重复，则跳过该数据去比较后面的；也可以是使用map容器过滤掉重复元素，由于采用的重复过滤算法为现有技术，故不在此赘述。

可选地，所述生成所述数量的单元格子的具体实现如下：

以所述单元格子模板为起始点在显示界面上建立一个矩形的显示区域。

根据所述显示区域的面积和所述单元格子模板的面积确定所述单元格子的数量。

在实际应用中，用户能够直接通过拉伸显示区域，自动生成与该显示区域面积相匹配的单元格子的数量。此处通过在界面上以显示区域的面积来确定单元格子的数量，可更直观、快捷地在界面上直接确定需要的单元格子数量，从而提升了用户的设计体验和设计效率。

可选地，所述确定所述单元格子的数量具体实现如下：

获取所述显示区域的高度H、所述单元格子模板的高度H1以及纵向相邻两个所述单元格子之间的间距H2，并根据所述显示区域的高度H、所述单元格子模板的高度H1以及所述纵向相邻两个所述单元格子之间的间距H2计算出所述显示区域在纵向上的单元格子的数量M。

获取所述显示区域的宽度L、所述单元格子模板的宽度L1以及横向相邻两个所述单元格子之间的间距L2，并根据所述显示区域的宽度L、所述单元格子模板的宽度L1以及所述横向相邻两个所述单元格子之间的间距L2计算出所述显示区域在横向上的单元格子的数量N。

通过M*N计算出所述单元格子的数量，并在所述显示区域中生成所述数量的单元格子，且所述数量的所述单元格子呈矩阵排列。

通过计算出所述显示区域在纵向上的单元格子的数量M和所述显示区域在横向上的单元格子的数量N，并根据M*N可精准地确定生成的单元格子的数量，保证生成的单元格子数量的准确性。

具体地，所述根据所述显示区域的高度H、所述单元格子模板的高度H1以及所述纵向相邻两个所述单元格子之间的间距H2计算出所述显示区域在纵向上的单元格子的数量M具体包括：

用所述显示区域的高度H除以所述单元格子模板的高度H1和所述纵向相邻两个所述单元格子之间的间距H2的和H1+H2，得到商M1和余数D1；

若所述余数D1为0，则将所述数量M确定为M1。

若所述余数D1不为0，则检测是否存在用户输入的第一增添指令，若是，则将所述数量M确定为1+M1；若否，则将所述数量M确定为M1。

具体地，所述根据所述显示区域的宽度L、所述单元格子模板的宽度L1以及所述横向相邻两个所述单元格子之间的间距L2计算出所述显示区域在横向上的单元格子的数量N具体包括：

用所述显示区域的宽度L除以所述单元格子模板的宽度L1和所述横向相邻两个所述单元格子之间的间距L2的和(L1+L2)，得到商N1和余数Z1；

若所述余数Z1为0，则将所述数量N确定为N1。

若所述余数Z1不为0，则检测是否存在用户输入的第二增添指令，若是，则将所述数量N确定为1+N1；若否，则将所述数量N确定为N1。

可选地，在所述通过M*N计算出所述单元格子的数量，并在所述显示区域中生成所述数量的单元格子之后，还包括：

当检测到用户输入的纵向增添指令时，将N增加1。

当检测到用户输入的横向增添指令时，将M增加1。

在实际应用中，如图5所示，在显示区域的右端和底端设置分别设置有扩展标识，当在界面上点击右端的扩展标识时，则显示区域中的排列成矩阵的单元格子在矩阵右端增加一列。当在界面上点击底端的扩展标识时，则显示区域中的排列成矩阵的单元格子在矩阵底端增加一行。

通过用户输入纵向增添指令或横向增添指令可直接增加单元格子的数量，操作起来简单、快捷，可进一步提高设计效率。

可选地，所述创建方法还包括：

获取用户输入的状态切换指令，并根据所述状态切换指令确定至少一个待切换状态的过滤后的单元格子，并将所述待切换状态的过滤后的单元格子的属性标签所指示的状态更改为与所述状态切换指令对应的状态。

在实际应用中，如图5所示，在任意一个单元格子的右上角设置一个分离标识separate，用于输入状态切换指令，当点击此标识后，该单元格子的属性标签指示为分离状态，可实现单独编辑；当再点击此标识后，该单元格子恢复至同步状态。

通过用户输入的状态切换指令，切换单元格子的状态，可以从原本相同类型且同步的单元格子中分离出需要特别编辑的单元格子，在编辑分离出的单元格子时，其他同步的单元格子不受影响，从而大大提高了原型设计的灵活性和效率。

本实施例提供一种可分离的原型工具的单元格子的创建系统，包括：

独立单元建立模块，用于建立独立单元，所述独立单元包括至少一种类型的基础组件。

单元格子模板建立模块，用于建立一个快速格子，并将所述独立单元编组到所述快速格子中，得到单元格子模板。

单元格子生成模块，用于获取用户设置的需要格子的数量，并根据所述单元格子模板生成所述数量的单元格子，其中，每个所述单元格子中的基础组件的类型与所述单元格子模板中的基础组件的类型相同。

重复过滤处理模块，用于分别对每个所述单元格子中的所述基础组件进行重复过滤处理，得到多个过滤后的单元格子。

状态切换模块，用于分别为每个所述过滤后的单元格子设置一个用于指示所述过滤后的单元格子的状态的属性标签，所述状态包括同步状态和分离状态。

可选地，所述基础组件包括文本组件、图片组件、图标组件和形状组件中的至少一种。

综上所述,本实施例的一种可分离的原型工具的单元格子的创建方法及系统，通过将需要组合的基础组件按照不同类型组合成独立单元并添加到快速格子中以形成单元格子模板，随后可根据单元格子模板快速复制出多个单元格子，以快速生成由单元格子组成的同类列表。再对每个单元格子中的基础组件进行重复过滤处理。从而实现在设计过程中制作列表页、阵列列表时，同类列表能够快速生成，且列表中的内容各不相同，保证了保持设计页面真实性，同时也提高了设计效率。而且，通过在每个单元格子设置一个用于指示所述过滤后的单元格子的状态的属性标签，可以在重复类型的单元格子中，任意更改其中一个或多个单元格子的状态，从而分离出单元格子进行编辑，提高了原型设计的灵活性和效率。

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

Claims (10)

1.一种可分离的原型工具的单元格子的创建方法，其特征在于，包括如下步骤：

建立独立单元，所述独立单元包括至少一种类型的基础组件；

建立一个快速格子，并将所述独立单元编组到所述快速格子中，得到单元格子模板；

获取用户设置的需要格子的数量，并根据所述单元格子模板生成所述数量的单元格子，其中，每个所述单元格子中的基础组件的类型与所述单元格子模板中的基础组件的类型相同；

分别对每个所述单元格子中的所述基础组件进行重复过滤处理，得到多个过滤后的单元格子；

分别为每个所述过滤后的单元格子设置一个用于指示所述过滤后的单元格子的状态的属性标签，所述状态包括同步状态和分离状态。

2.根据权利要求1所述的可分离的原型工具的单元格子的创建方法，其特征在于，所述基础组件包括文本组件、图片组件、图标组件和形状组件中的至少一种。

3.根据权利要求1所述的可分离的原型工具的单元格子的创建方法，其特征在于，所述生成所述数量的单元格子的具体实现如下：

以所述单元格子模板为起始点在显示界面上建立一个矩形的显示区域；

根据所述显示区域的面积和所述单元格子模板的面积确定所述单元格子的数量。

4.根据权利要求1所述的可分离的原型工具的单元格子的创建方法，其特征在于，所述确定所述单元格子的数量具体实现如下：

获取所述显示区域的高度H、所述单元格子模板的高度H1以及纵向相邻两个所述单元格子之间的间距H2，并根据所述显示区域的高度H、所述单元格子模板的高度H1以及所述纵向相邻两个所述单元格子之间的间距H2计算出所述显示区域在纵向上的单元格子的数量M；

获取所述显示区域的宽度L、所述单元格子模板的宽度L1以及横向相邻两个所述单元格子之间的间距L2，并根据所述显示区域的宽度L、所述单元格子模板的宽度L1以及所述横向相邻两个所述单元格子之间的间距L2计算出所述显示区域在横向上的单元格子的数量N；

通过M*N计算出所述单元格子的数量，并在所述显示区域中生成所述数量的单元格子，且所述数量的所述单元格子呈矩阵排列。

5.根据权利要求4所述的可分离的原型工具的单元格子的创建方法，其特征在于，所述根据所述显示区域的高度H、所述单元格子模板的高度H1以及所述纵向相邻两个所述单元格子之间的间距H2计算出所述显示区域在纵向上的单元格子的数量M具体包括：

用所述显示区域的高度H除以所述单元格子模板的高度H1和所述纵向相邻两个所述单元格子之间的间距H2的和H1+H2，得到商M1和余数D1；

若所述余数D1为0，则将所述数量M确定为M1；

若所述余数D1不为0，则检测是否存在用户输入的第一增添指令，若是，则将所述数量M确定为1+M1；若否，则将所述数量M确定为M1。

6.根据权利要求4所述的可分离的原型工具的单元格子的创建方法，其特征在于，所述根据所述显示区域的宽度L、所述单元格子模板的宽度L1以及所述横向相邻两个所述单元格子之间的间距L2计算出所述显示区域在横向上的单元格子的数量N具体包括：

用所述显示区域的宽度L除以所述单元格子模板的宽度L1和所述横向相邻两个所述单元格子之间的间距L2的和L1+L2，得到商N1和余数Z1；

若所述余数Z1为0，则将所述数量N确定为N1；

若所述余数Z1不为0，则检测是否存在用户输入的第二增添指令，若是，则将所述数量N确定为1+N1；若否，则将所述数量N确定为N1。

7.根据权利要求3所述的可分离的原型工具的单元格子的创建方法，其特征在于，在所述通过M*N计算出所述单元格子的数量，并在所述显示区域中生成所述数量的单元格子之后，还包括：

当检测到用户输入的纵向增添指令时，将N增加1；

当检测到用户输入的横向增添指令时，将M增加1。

8.根据权利要求1-7任一项所述的可分离的原型工具的单元格子的创建方法，其特征在于，还包括：

获取用户输入的状态切换指令，并根据所述状态切换指令确定至少一个待切换状态的过滤后的单元格子，并将所述待切换状态的过滤后的单元格子的属性标签所指示的状态更改为与所述状态切换指令对应的状态。

9.一种可分离的原型工具的单元格子的创建系统，其特征在于，包括：

独立单元建立模块，用于建立独立单元，所述独立单元包括至少一种类型的基础组件；

单元格子模板建立模块，用于建立一个快速格子，并将所述独立单元编组到所述快速格子中，得到单元格子模板；

单元格子生成模块，用于获取用户设置的需要格子的数量，并根据所述单元格子模板生成所述数量的单元格子，其中，每个所述单元格子中的基础组件的类型与所述单元格子模板中的基础组件的类型相同；

重复过滤处理模块，用于分别对每个所述单元格子中的所述基础组件进行重复过滤处理，得到多个过滤后的单元格子；

状态切换模块，用于分别为每个所述过滤后的单元格子设置一个用于指示所述过滤后的单元格子的状态的属性标签，所述状态包括同步状态和分离状态。

10.根据权利要求9所述的可分离的原型工具的单元格子的创建系统，其特征在于，所述基础组件包括文本组件、图片组件、图标组件和形状组件中的至少一种。