Reorganization method, device and computer equipment of constituent elements in interface

Abstract

The present disclosure provides a method and device for reorganizing interface elements, and a computer device, wherein the method comprises: obtaining original logical relationships between interface elements in an interface design draft; determining a target constraint tree based on the original logical relationships; relationships between nodes in the target constraint tree are used to represent position constraint relationships between the interface elements, and nodes corresponding to the same parent node and having the same position constraint relationship are located in the same level; reorganizing logical relationships between the interface elements based on the original logical relationships to obtain reorganized logical relationships; and determining target logical relationships of the interface elements based on the reorganized logical relationships and the target constraint tree, so as to code the interface design draft through the target logical relationships.

Description

Technical Field

[0001] This disclosure relates to the technical field of page design, and more specifically, to a method, apparatus, and computer device for reorganizing the constituent elements of an interface. Background Technology

[0002] In scenarios where existing D2C (Design to Code) solutions are used for code conversion, the tree structure of the interface design is first flattened to obtain node information for each node. Then, corresponding responsive code is generated using this node information. However, flattening the tree structure fails to reflect the logical nesting relationships between the interface's components, making it impossible to determine their positional constraints. When scaling the interface based on the responsive code, which lacks positional constraints, only proportional scaling is possible, resulting in poor aesthetics and hindering future maintenance. Summary of the Invention

[0003] This disclosure provides at least one method, apparatus, and computer device for reorganizing the constituent elements of an interface.

[0004] In a first aspect, embodiments of this disclosure provide a method for reorganizing constituent elements in an interface, characterized in that it includes:

[0005] Obtain the original logical relationships between the various interface components in the interface design draft;

[0006] The target constraint tree is determined based on the original logical relationship; the relationship between each node in the target constraint tree is used to characterize the positional constraint relationship between each interface component element; nodes in the target constraint tree that have the same parent node and the same positional constraint relationship are located at the same level.

[0007] Based on the original logical relationships, the logical relationships between the various interface components are reorganized to obtain reorganized logical relationships;

[0008] Based on the reorganization logic relationship and the target constraint tree, the target logic relationship of each interface component element is determined, so as to code the interface design draft through the target logic relationship.

[0009] In one optional implementation, the step of reorganizing the logical relationships between the various interface components based on the original logical relationships to obtain reorganized logical relationships includes:

[0010] Based on the original logical relationship of the interface components in the interface design draft, the interface components are divided into layouts to obtain multiple sub-layout structures.

[0011] Based on the original logical relationships between the interface components contained in the multiple sub-layout structures, determine the logical relationship subtree corresponding to each sub-layout structure;

[0012] The reorganization logic relationship is determined based on the logical relationship subtree; wherein the reorganization logic relationship includes the logical relationship subtree corresponding to each of the sub-layout structures.

[0013] In one optional implementation, the step of dividing the interface components into layouts based on the original logical relationships of the interface components in the interface design draft to obtain multiple sub-layout structures includes:

[0014] Determine the layout type of the interface design draft;

[0015] If the layout type of the interface design draft is determined to be the first layout type, the interface components in the interface design draft are divided into multiple sub-layout structures by unidirectional layout segmentation; wherein, the unidirectional layout segmentation is used to represent the segmentation of the interface components according to a segmentation direction.

[0016] If the layout type of the interface design draft is determined to be the second layout type, the interface components in the interface design draft are divided into two-way layouts to obtain multiple sub-layout structures; the two-way layout division is used to represent the division of the interface components according to two division directions.

[0017] In one optional implementation, determining the logical relationship subtree corresponding to each sub-layout structure based on the logical relationships between the interface components contained in the plurality of sub-layout structures includes:

[0018] Determine the parent node of the interface component elements in the sub-layout structure; the parent node is the node that contains the interface component elements in the logical relationship subtree;

[0019] Based on the target constraint tree, determine the positional constraint relationship between the parent node and the interface components in the child layout structure;

[0020] Determine a target relation subtree to characterize the positional constraint relationship between the parent node and the interface components in the child layout structure, and define the target relation subtree as the logical relation subtree.

[0021] In one optional implementation, the step of reorganizing the logical relationships between the various interface components based on the original logical relationships to obtain reorganized logical relationships includes:

[0022] Based on the original logical relationship, determine the distance threshold between each interface component element of the interface design draft;

[0023] Obtain the distance values ​​between each interface component element of the interface design draft, and determine the interface component elements whose distance values ​​are less than the distance threshold as a set of interface component elements;

[0024] Based on the original logical relationships between the interface components contained in the interface component set, determine the logical relationship subtree corresponding to each interface component set.

[0025] The reorganized logical relationship is determined based on the logical relationship subtree; the reorganized logical relationship includes the logical relationship subtree corresponding to the collection of multiple interface component elements.

[0026] In one optional implementation, obtaining the distance values ​​between the various interface components of the interface design draft, and determining the interface components with distance values ​​less than the distance threshold as a set of interface components, includes:

[0027] Get the distance value between each component element of the interface and its adjacent components;

[0028] If the distance between adjacent interface elements is less than the distance threshold, the adjacent interface elements and their corresponding interface elements are defined as a set of interface elements.

[0029] In one optional implementation, determining the target constraint tree based on the original logical relationship includes:

[0030] Obtain the positional constraints of each interface component in the interface design draft and the hierarchy to which each interface component belongs;

[0031] Based on the positional constraints, determine the target interface components that are the same as the parent node;

[0032] Based on the original logical relationship, the target interface components corresponding to the same parent node are divided to obtain the target constraint tree.

[0033] Secondly, embodiments of this disclosure also provide a device for recombining constituent elements in an interface, comprising:

[0034] The acquisition unit is used to acquire the original logical relationships between the various interface components in the interface design draft.

[0035] The first determining unit is used to determine the target constraint tree based on the original logical relationship; the relationship between each node in the target constraint tree is used to characterize the positional constraint relationship between each interface component element; nodes in the target constraint tree that have the same parent node and the same positional constraint relationship are located at the same level.

[0036] The recombination unit is used to recombine the logical relationships between the various interface components based on the original logical relationships to obtain recombined logical relationships;

[0037] The second determining unit is used to determine the target logical relationship of each interface component based on the reorganization logical relationship and the target constraint tree, so as to code the interface design draft through the target logical relationship.

[0038] Thirdly, embodiments of this disclosure also provide a computer device, including: a processor, a memory, and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processor communicates with the memory via the bus, and when the machine-readable instructions are executed by the processor, the steps of the first aspect above, or any possible implementation of the first aspect, are performed.

[0039] Fourthly, embodiments of this disclosure also provide a computer-readable storage medium storing a computer program that, when executed by a processor, performs the steps of the first aspect or any possible implementation of the first aspect.

[0040] This disclosure provides a method, apparatus, and computer device for recombining the constituent elements of an interface. In this embodiment, the original logical relationships between the various interface constituent elements in the interface design draft are first obtained. Based on these original logical relationships, a target constraint tree corresponding to the interface design draft is constructed. Simultaneously, the logical relationships between the various interface constituent elements are recombined according to the original logical relationships to obtain recombined logical relationships. The target logical relationships of each interface constituent element in the interface design draft are then determined based on the target constraint tree and the recombined logical relationships. The interface design draft is then coded using these target logical relationships to obtain the design code for the interface design draft. This ensures that the user interface reconstructed from the design code retains the target logical relationships between the various interface constituent elements in the interface design draft, improving the aesthetics of the user interface and facilitating subsequent maintenance.

[0041] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0042] To more clearly illustrate the technical solutions of the embodiments of this disclosure, the accompanying drawings used in the embodiments will be briefly described below. These drawings are incorporated in and constitute a part of this specification. They illustrate embodiments conforming to this disclosure and, together with the specification, serve to explain the technical solutions of this disclosure. It should be understood that the following drawings only show some embodiments of this disclosure and should not be considered as limiting the scope. Those skilled in the art can obtain other related drawings based on these drawings without creative effort.

[0043] Figure 1 A flowchart illustrating a method for reorganizing constituent elements in an interface according to an embodiment of this disclosure is shown;

[0044] Figure 2 A schematic diagram of a portion of the tree structure in the target constraint tree provided in an embodiment of this disclosure is shown;

[0045] Figure 3 A schematic diagram of a device for recombining constituent elements in an interface, provided in an embodiment of the present disclosure, is shown.

[0046] Figure 4 A schematic diagram of a computer device provided in an embodiment of this disclosure is shown. Detailed Implementation

[0047] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this disclosure, and not all of them. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely represents selected embodiments of this disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0048] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0049] In this document, the term "and / or" merely describes a relationship, indicating that three relationships can exist. For example, A and / or B can represent three cases: A alone, A and B simultaneously, and B alone. Furthermore, the term "at least one" in this document means any combination of at least two of any one or more elements. For example, including at least one of A, B, and C can mean including any one or more elements selected from the set consisting of A, B, and C.

[0050] Research revealed that in scenarios where existing D2C (Design to Code) solutions are used for code conversion, the tree structure of the interface design is first flattened to obtain node information for each node. Then, corresponding responsive code is generated based on this node information. However, flattening the tree structure fails to reflect the logical nesting relationships between the interface's components, making it impossible to determine the positional constraints between them. When scaling the interface based on the responsive code, which lacks positional constraints, only proportional scaling is possible, resulting in poor aesthetics and hindering future maintenance.

[0051] Based on the above research, this disclosure provides a method, apparatus, and computer device for reorganizing the constituent elements of an interface. In the embodiments of this disclosure, the original logical relationships between the constituent elements of the interface design draft can be obtained first, and a target constraint tree corresponding to the interface design draft can be constructed based on the obtained original logical relationships. At the same time, the logical relationships between the constituent elements of the interface are reorganized according to the original logical relationships to obtain reorganized logical relationships. The target logical relationships of the constituent elements of the interface design draft can be determined according to the target constraint tree and the reorganized logical relationships. The interface design draft can be coded through the target logical relationships to obtain the design code of the interface design draft. This allows the user interface reconstructed from the design code to retain the target logical relationships between the constituent elements of the interface design draft, improving the aesthetics of the user interface and facilitating later maintenance of the user interface.

[0052] To facilitate understanding of this embodiment, a method for reorganizing interface components disclosed in this disclosure will first be described in detail. The execution entity of this method for reorganizing interface components is generally a computer device with certain computing capabilities. In some possible implementations, this method for reorganizing interface components can be implemented by a processor calling computer-readable instructions stored in memory.

[0053] See Figure 1The diagram shows a flowchart of a method for recombining constituent elements in an interface according to an embodiment of this disclosure. The method includes steps S101 to S107, wherein:

[0054] S101: Obtain the original logical relationships between the various interface components in the interface design draft.

[0055] In this embodiment of the disclosure, the aforementioned original logical relationship can be used to characterize the stacking relationship between various interface components. Therefore, the stacking relationship between various interface components in the interface design draft can be identified. Here, each interface component in the interface design draft can be an interface component included in the interface design draft.

[0056] In practical implementation, the stacking relationship between the aforementioned interface components can be non-intersecting, containment, or intersecting. Here, a non-intersecting relationship means that interface component A and interface component B do not intersect and there is no containment relationship. A containment relationship means that interface component A contains interface component B, or interface component B contains interface component A. An intersecting relationship means that interface component A and interface component B intersect, wherein the intersection area between interface component A and interface component B is less than 100%.

[0057] In addition, when the stacking relationship between the stacked elements of the above-mentioned interface components is an inclusion relationship, the original logical relationship can be represented by parent-child nodes. For example, if the inclusion relationship between interface component A and interface component B is that interface component A contains interface component B, then interface component A can be the parent node of interface component B, and interface component B can be the child node of interface component A.

[0058] S103: Determine the target constraint tree based on the original logical relationship; the relationship between each node in the target constraint tree is used to characterize the positional constraint relationship between each interface component element, and nodes in the target constraint tree that have the same parent node and the same positional constraint relationship are located at the same level.

[0059] In the embodiments disclosed herein, such as Figure 2 The diagram shows a partial tree structure of the target constraint tree. In the process of constructing this target constraint tree, interface components with the same parent node in the interface design draft can be identified as the same target constraint tree.

[0060] In constructing the target constraint tree, we can first identify the interface elements in the interface design draft that do not correspond to parent nodes as main interface elements, and then create a constraint set for each identified main interface element. This constraint set includes the main interface element and its corresponding child nodes. Then, we can construct the target constraint tree based on this constraint set.

[0061] Specifically, the aforementioned positional constraints can be used to characterize the stacking relationship between each node in the target constraint tree and the main interface components. Therefore, nodes with the same positional constraints are located at the same level. For example, Figure 2 As shown, the positional constraint relationship of interface component B is level 2, and the positional constraint relationship of interface component C is also level 2. That is, the positional constraint relationships of interface component B and interface component C are the same. Therefore, interface component B and interface component C are located at the same level in the target constraint tree.

[0062] It should be understood that since interface design drafts can correspond to different interface structures, the number of target constraint trees corresponding to an interface design draft can be multiple or only one. For example, if an interface design draft contains interface framework components, theoretically all interface components in the interface design draft are contained within the interface framework. In this case, the interface design draft corresponds to only one target constraint tree.

[0063] S105: Based on the original logical relationship, the logical relationship between the constituent elements of each interface is reorganized to obtain the reorganized logical relationship.

[0064] In this embodiment of the disclosure, based on the determination of the target constraint tree based on the original logical relationship of each interface component element, the logical relationship between each interface component element can be reorganized based on the original logical relationship to obtain the reorganized logical relationship, thereby further refining and sorting out the logical relationship between each interface component element.

[0065] For example, if there is only one target constraint tree corresponding to the above interface design draft, and the interface design draft is coded only for that target constraint tree, the nesting relationship may still be quite messy, and the logical nesting relationship between the various components of the interface may not be reflected, which is not conducive to the later maintenance of the interface. Therefore, it is necessary to further reorganize the logical relationship between the various components of the interface based on the original logical relationship.

[0066] In practical implementation, the aforementioned target relation tree can be segmented to obtain at least one target relation subtree, so as to... Figure 2For example, interface element B can be taken as the parent node, and interface elements D and E can be taken as child nodes of interface element B, thereby obtaining a target relational subtree containing interface elements B, D, and E. Then, based on the original logical relationships between the obtained target subtrees, the above-mentioned reorganization logical relationship can be determined. Additionally, other implementation methods for determining the reorganization logical relationship are also included in this embodiment, as described below, and will not be repeated here.

[0067] S107: Based on the reorganization logic relationship and the target constraint tree, determine the target logic relationship of each interface component element, so as to code the interface design draft through the target logic relationship.

[0068] In this embodiment of the disclosure, in determining the target logical relationship of each of the interface components, the recombination logical relationship between the interface components corresponding to the target relationship subtree can first be determined. Then, based on the target constraint tree, the subtree logical relationship between the target relationship subtrees corresponding to the target constraint tree can be determined. Thus, based on the determined recombination logical relationship and subtree logical relationship, the target logical relationship is obtained. For example, the subtree logical relationship may include parallel relationships and inclusion relationships.

[0069] As described above, in this embodiment, the original logical relationships between the various interface components in the interface design draft can be obtained first. Based on the obtained original logical relationships, a target constraint tree corresponding to the interface design draft is constructed. Simultaneously, the logical relationships between the various interface components are reorganized according to the original logical relationships to obtain reorganized logical relationships. The target logical relationships of the various interface components in the interface design draft are then determined based on the target constraint tree and the reorganized logical relationships. The interface design draft is then coded using the target logical relationships to obtain the design code of the interface design draft. This ensures that the user interface reconstructed from the design code retains the target logical relationships between the various interface components in the interface design draft, improving the aesthetics of the user interface and facilitating subsequent maintenance of the user interface.

[0070] In an optional implementation, step S103 above, which determines the target constraint tree based on the original logical relationship, specifically includes the following process:

[0071] S1031: Obtain the positional constraints of each interface component element in the interface design draft and the hierarchy to which each interface component element belongs.

[0072] In this embodiment of the disclosure, during the design of the interface design draft, the interface components in the design draft can be designed based on layers. Multiple layers can be superimposed to obtain the interface design draft. In this interface design draft, the component attribute information of each interface component can carry the layer information of the layer to which the interface component belongs, and the layer level of the interface component can be determined based on the layer information.

[0073] S1032: Determine the target interface components that are the same as the parent node based on the positional constraint relationship.

[0074] In this embodiment, the constraint set corresponding to the interface design draft can first be obtained. Since the main interface components corresponding to each constraint set are the same, the interface components other than the main interface components in each constraint set can be identified as target interface components with the same parent node. Then, the target interface components with the same positional constraint relationship in the constraint set can be determined, thereby obtaining the target interface components with the same level in the constraint set.

[0075] After identifying the target interface components belonging to the same level in the above constraint set, the node constraint relationship corresponding to the target interface component can be determined. The node constraint relationship can be used to characterize that the constraint distance between the target interface component and the target boundary of the corresponding parent node is fixed.

[0076] Specifically, in the aforementioned interface design draft, each interface component with a parent node has a corresponding node constraint relationship. This node constraint relationship is used to characterize that when the size of the parent node changes, the constraint distance between the interface component and the target boundary of the parent node remains constant. Here, the parent node includes four boundaries: left, right, top, and bottom. The target boundary can include the top-left boundary (i.e., the left and top boundaries of the parent node) and the top-right boundary (i.e., the right and top boundaries of the parent node). Therefore, the aforementioned node constraint relationship can be divided into top-left constraint (L&T constraint) and top-right constraint (R&T constraint).

[0077] For example, if the node constraint relationship corresponding to the above target interface component is top-left constraint, and the constraint distances are 50px on the left boundary and 30px on the top boundary, then when the size of the parent node of the target interface component changes, the target interface component can respond to the user's size adjustment operation on the parent node and automatically adjust the distance between the left boundary and the top boundary of the parent node, thereby keeping the above constraint distances fixed.

[0078] S1033: Based on the original logical relationship, the target interface components corresponding to the same parent node are divided to obtain the target constraint tree.

[0079] In this embodiment of the disclosure, since the target interface components with the same parent node in the interface design draft can be divided based on the above constraint set, the target constraint tree can be constructed based on the above constraint set.

[0080] In practice, if there are target interface components with the same level in the above constraint set, the node constraint relationship of the target interface components with the same level can be obtained respectively, and a target constraint tree can be constructed based on the node constraint relationship.

[0081] Here, within the same level of the target constraint tree, target interface components with different node constraint relationships can be represented separately. For example, as... Figure 2 As shown, if the node constraint relationship of interface component B is L&T constraint, then interface component B is located on the left branch of the parent node interface component A in the target constraint tree; if the node constraint relationship of interface component C is R&T constraint, then interface component C is located on the right branch of the parent node interface component A in the target constraint tree.

[0082] In this embodiment of the disclosure, target interface components with the same parent node in the interface design draft can be divided so as to construct a target constraint tree based on the division result, thereby providing a technical basis for determining the target logical relationship of each interface component based on the above-mentioned reorganization logical relationship and the target constraint tree.

[0083] In an optional implementation, step S105 above, which reorganizes the logical relationships between the various interface components based on the original logical relationships to obtain reorganized logical relationships, specifically includes the following process:

[0084] S1051: Based on the original logical relationship of the interface components in the interface design draft, the interface components are divided into layouts to obtain multiple sub-layout structures.

[0085] In this embodiment of the disclosure, during the process of reorganizing the logical relationships between the above-mentioned interface components based on the original logical relationships, the interface components in the interface design draft can also be divided into layouts based on the layout structure of the interface design draft, thereby obtaining multiple sub-layout structures.

[0086] In practice, the user interface corresponding to the above interface design draft can be used to implement multiple functions, each occupying a different functional area in the interface design draft. For example, if the above interface design draft is a purchase interface in a shopping application, it can include two functional areas: a product display area and a product purchase area.

[0087] Therefore, the interface design draft can be divided into layouts based on the functional area corresponding to each function, resulting in multiple sub-layout structures, each of which corresponds to at least one functional area.

[0088] S1052: Determine the logical relationship subtree corresponding to each sub-layout structure based on the original logical relationships between the interface components contained in the plurality of sub-layout structures.

[0089] S1053: Determine the reorganized logical relationship based on the logical relationship subtree; wherein the reorganized logical relationship includes the logical relationship subtree corresponding to each of the sub-layout structures.

[0090] In this embodiment of the disclosure, after determining the above-mentioned multiple sub-layout structures, the original logical relationship of the interface components in each sub-layout structure can be obtained, and the stacking relationship between the interface components in the sub-layout structure can be determined based on the original logical relationship.

[0091] Specifically, we can identify the interface elements in the sub-layout structure that do not have a matching parent node, and then designate the identified interface elements as nodes. Based on the parent node, we can build the logical relationship subtree corresponding to the sub-layout structure.

[0092] Next, based on the original logical relationships between the nodes of each logical subtree, the reorganization logical relationship corresponding to that logical subtree can be determined, and based on the original logical relationships between the parent nodes of each logical subtree, the reorganization logical relationship between multiple logical subtrees can be determined. Here, the reorganization logical relationship between multiple logical subtrees can be an inclusion relationship or a non-inclusion relationship.

[0093] As described above, based on the original logical relationships of the interface components in the interface design draft, the interface components in the interface design draft can be divided into layouts to obtain multiple sub-layout structures. The reorganization logical relationships can be determined by determining the logical relationship subtree corresponding to each sub-layout structure. This provides a technical basis for determining the target logical relationships of each interface component based on the above-mentioned reorganization logical relationships and the target constraint tree, and at the same time improves the scope of use of this disclosure.

[0094] In an optional implementation, step S1051 above, based on the original logical relationships of the interface components in the interface design draft, divides the interface components into layouts to obtain multiple sub-layout structures, including:

[0095] (1) Determine the layout type of the interface design draft;

[0096] (2) When the layout type of the interface design draft is determined to be the first layout type, the interface components in the interface design draft are divided into multiple sub-layout structures by unidirectional layout. The unidirectional layout division is used to represent the division of the interface components according to a division direction.

[0097] (3) When the layout type of the interface design draft is determined to be the second layout type, the interface components in the interface design draft are divided into two-way layouts to obtain multiple sub-layout structures; wherein, the two-way layout division is used to represent the division of the interface components according to two division directions.

[0098] In this embodiment of the disclosure, the layout type of the interface design draft can first be determined. Specifically, when dividing the interface design draft into layouts, it can be divided using both vertical and horizontal directions. Therefore, when determining the layout type of the interface design draft, it can be determined whether there is a situation where the interface design draft cannot be divided in a single direction.

[0099] Here, if the integrity of all interface elements cannot be guaranteed regardless of how the interface design is divided in a single direction, then the interface design can only be divided in one direction, belonging to the first layout type. For example, if the width of a certain interface component in the interface design is equal to the width of the entire design, then the integrity of that component cannot be guaranteed no matter how it is divided vertically. Then, it can be determined whether the interface design can be divided horizontally. If it can be divided horizontally, then the interface design belongs to the first layout type. Conversely, if the interface design can be divided in both of the above directions, then it can be divided in both directions, belonging to the second layout type. For example, if the interface design is a list interface, then it can be determined that the interface design belongs to the second layout type.

[0100] Once the layout type of the above interface design draft is determined to be the first layout type, the interface design draft can be divided into layouts based on the division direction of the interface design draft, thereby obtaining multiple sub-layout structures.

[0101] Here, we can first determine the division positions in the interface design draft used for layout division. When dividing the interface design draft from these division positions, we can ensure the integrity of all interface components in the interface design draft. In practice, we can determine a division point for layout division in each division position.

[0102] Once it is determined that the layout type of the above interface design draft is the second layout type, the division positions can be determined on the vertical and horizontal sides of the interface design draft based on the two division directions, and the division points for layout division can be determined in each division position.

[0103] In addition, if it is determined that layout segmentation cannot be performed in one segmentation direction of the above interface design draft, and layout segmentation cannot be performed in another segmentation direction, the interface component that causes layout segmentation to be impossible in the other segmentation direction can be identified, and the interface component can be extracted to determine whether the remaining interface component can be layout segmented from the other segmentation direction.

[0104] For example, the interface design draft above contains interface element A, whose width is equal to the width of the interface design draft. Therefore, the interface design draft cannot be divided vertically. However, the interface design draft also contains interface element B, whose length is equal to the length of the interface design draft, making it impossible to divide the interface design draft horizontally either. Therefore, interface element B can be extracted, and it can be determined whether the remaining interface elements can be divided horizontally. If the remaining interface elements can be divided horizontally, the division positions for the layout division in the interface design draft can be determined.

[0105] As described above, the layout segmentation method can be applied to the interface design draft based on its layout type, thus making this solution applicable to interface design drafts with different layout types and improving its applicability.

[0106] In an optional implementation, step S1052 above, which determines the logical relationship subtree corresponding to each sub-layout structure based on the logical relationships between the interface components contained in the plurality of sub-layout structures, specifically includes the following process:

[0107] (1) Determine the parent node of the interface component element in the sub-layout structure; the parent node is the node that contains the interface component element in the logical relationship subtree;

[0108] (2) Based on the target constraint tree, determine the positional constraint relationship between the parent node and the interface components in the child layout structure;

[0109] (3) Determine the target relation subtree used to characterize the positional constraint relationship between the parent node and the interface components in the sub-layout structure, and determine the target relation subtree as the logical relation subtree.

[0110] In this embodiment of the disclosure, the parent node of the interface component in the layout structure can first be determined based on the original logical relationship of the interface component in the above layout structure, wherein the parent node of the interface component in the layout structure is the interface component that has no matching parent node.

[0111] Next, the target constraint tree can be obtained, and the child node corresponding to the parent node in the target constraint tree can be determined based on the position constraint relationship represented by the target constraint tree. The interface component elements that belong to the sub-layout structure among the child nodes corresponding to the parent node can be determined, thereby constructing the target relationship subtree corresponding to the interface component elements in the sub-layout structure.

[0112] As described above, after determining the parent node of the interface components in the sub-layout structure, the target relation subtree corresponding to the sub-layout structure can be constructed based on the positional constraint relationship between the parent node in the target constraint tree and the interface components in the sub-layout structure, thereby improving the efficiency of constructing the target relation subtree.

[0113] In an optional implementation, step S105 above, which reorganizes the logical relationships between the various interface components based on the original logical relationships to obtain reorganized logical relationships, further includes the following process:

[0114] (1) Determine the distance threshold between each interface component element of the interface design draft based on the original logical relationship;

[0115] (2) Obtain the distance values ​​between each interface component element of the interface design draft, and determine the interface component elements with distance values ​​less than the distance threshold as a set of interface component elements;

[0116] (3) Determine the logical relationship subtree corresponding to each interface component set based on the original logical relationship between the interface component elements contained in the interface component set.

[0117] (4) Determine the reorganized logical relationship based on the logical relationship subtree; the reorganized logical relationship includes the logical relationship subtree corresponding to the set of multiple interface components.

[0118] In this embodiment of the disclosure, the distance threshold between each interface component element of the above interface design draft can first be determined. Here, the distance threshold can be preset or determined based on the original logical relationship.

[0119] Given that the distance threshold is determined based on the original logical relationships, we can first identify the interface components with non-overlapping stacking relationships based on these relationships, and then determine the distance between any two interface components. Next, we can use a spacing algorithm to calculate the determined spacing, thereby obtaining the distance threshold suitable for the aforementioned interface design.

[0120] Here, if the distance between any two interface components in the above interface design draft is less than the aforementioned distance threshold, the stacking relationship between these two interface components can be determined as an inclusion relationship. Therefore, it is necessary to obtain the distance values ​​between each interface component in the interface design draft, and to determine the interface components with distance values ​​less than the distance threshold as a set of interface components. It can be assumed that the interface components in this set belong to the same logical subtree.

[0121] After obtaining the aforementioned set of interface components, the logical relationships between these components can be determined, thus obtaining the logical subtree corresponding to the set. Specifically, the interface components without a matching parent node in the set can be identified as the parent nodes of the logical subtree. Based on the original logical relationships between the interface components in the set, the child nodes corresponding to these parent nodes, as well as the stacking relationship between the parent and child nodes, are determined, thereby obtaining the logical subtree corresponding to the set. Furthermore, the process of determining the reorganized logical relationships based on this logical subtree is as described above and will not be repeated here.

[0122] In this embodiment of the disclosure, the distance values ​​between each interface component of the interface design draft are first obtained, and the interface component with a distance value less than the distance threshold is determined as an interface component, thereby obtaining a set of interface component elements and determining the logical relationship subtree corresponding to the set of interface component elements. This makes the method of determining the logical relationship subtree more flexible and applicable to interface design drafts with more structures.

[0123] In an optional implementation, the process of obtaining the distance values ​​between the various interface components of the interface design draft and determining the interface components with distance values ​​less than the distance threshold as a set of interface components specifically includes the following steps:

[0124] (1) Obtain the distance value between each interface component and the adjacent interface components;

[0125] (2) When the distance value of the adjacent interface components is less than the distance threshold, the adjacent interface components and the corresponding interface components are determined as a set of interface components.

[0126] In this embodiment of the disclosure, during the process of obtaining the distance values ​​between the various interface components of the aforementioned interface design draft, it is necessary to obtain the distance value between each interface component and its adjacent interface components. Specifically, each interface component corresponds to one adjacent interface component in each of the four directions (up, down, left, and right). Therefore, it is necessary to obtain the distance value between each interface component and its four adjacent interface components, resulting in four distance values.

[0127] For example, if interface element A is adjacent to interface elements A1, A2, A3, and A4 in four directions, the distance between interface element A and interface element A1 is d1, the distance between interface element A and interface element A2 is d2, the distance between interface element A and interface element A3 is d3, and the distance between interface element A and interface element A4 is d4.

[0128] Next, the distance values ​​d1-d4 can be compared with the distance threshold to determine the distance values ​​that are less than the threshold. The adjacent interface elements and interface element A corresponding to the determined distance values ​​can then be defined as a set of interface elements.

[0129] In this embodiment of the disclosure, during the process of determining the distance values ​​between each interface component element of the above-mentioned interface design draft, the distance values ​​between each interface component element and adjacent interface components can be obtained separately, thereby improving the confidence level of the obtained distance values.

[0130] In summary, in this embodiment, the original logical relationships between the various interface components in the interface design draft can first be obtained, and a target constraint tree corresponding to the interface design draft can be constructed based on the obtained original logical relationships. At the same time, the logical relationships between the various interface components are reorganized according to the original logical relationships to obtain reorganized logical relationships. The target logical relationships of the various interface components in the interface design draft can be determined according to the target constraint tree and the reorganized logical relationships. The interface design draft can then be coded using the target logical relationships to obtain the design code of the interface design draft. This ensures that the user interface reconstructed from the design code can retain the target logical relationships between the various interface components in the interface design draft, improving the aesthetics of the user interface and facilitating subsequent maintenance of the user interface.

[0131] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0132] Based on the same inventive concept, this disclosure also provides a device for recombining the constituent elements in an interface, which corresponds to the method for recombining the constituent elements in an interface. Since the principle of the device in this disclosure for solving the problem is similar to the method for recombining the constituent elements in an interface described above, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0133] Reference Figure 3 The diagram shown is a schematic of a device for recombining components in an interface according to an embodiment of this disclosure. The device includes: an acquisition unit 31, a first determination unit 32, a recombination unit 33, and a second determination unit 34; wherein,

[0134] Acquisition unit 31 is used to acquire the original logical relationships between various interface components in the interface design draft;

[0135] The first determining unit 32 is used to determine the target constraint tree based on the original logical relationship; the relationship between each node in the target constraint tree is used to characterize the positional constraint relationship between each interface component element; nodes in the target constraint tree that have the same parent node and the same positional constraint relationship are located at the same level.

[0136] Reorganization unit 33 is used to reorganize the logical relationships between the various interface components based on the original logical relationships to obtain reorganized logical relationships;

[0137] The second determining unit 34 is used to determine the target logical relationship of each interface component based on the reorganization logical relationship and the target constraint tree, so as to code the interface design draft through the target logical relationship.

[0138] In this embodiment, the original logical relationships between the various interface components in the interface design draft can be obtained first. Based on the obtained original logical relationships, a target constraint tree corresponding to the interface design draft is constructed. At the same time, the logical relationships between the various interface components are reorganized according to the original logical relationships to obtain reorganized logical relationships. The target logical relationships of the various interface components in the interface design draft are determined according to the target constraint tree and the reorganized logical relationships. The interface design draft is then coded through the target logical relationships to obtain the design code of the interface design draft. This allows the user interface reconstructed from the design code to retain the target logical relationships between the various interface components in the interface design draft, improving the aesthetics of the user interface and facilitating subsequent maintenance of the user interface.

[0139] In one possible implementation, the recombination unit 33 is further configured to:

[0140] Based on the original logical relationship of the interface components in the interface design draft, the interface components are divided into layouts to obtain multiple sub-layout structures.

[0141] Based on the original logical relationships between the interface components contained in the multiple sub-layout structures, determine the logical relationship subtree corresponding to each sub-layout structure;

[0142] The reorganization logic relationship is determined based on the logical relationship subtree; wherein the reorganization logic relationship includes the logical relationship subtree corresponding to each of the sub-layout structures.

[0143] In one possible implementation, the recombination unit 33 is further configured to:

[0144] Determine the layout type of the interface design draft;

[0145] If the layout type of the interface design draft is determined to be the first layout type, the interface components in the interface design draft are divided into multiple sub-layout structures by unidirectional layout segmentation; wherein, the unidirectional layout segmentation is used to represent the segmentation of the interface components according to a segmentation direction.

[0146] If the layout type of the interface design draft is determined to be the second layout type, the interface components in the interface design draft are divided into two-way layouts to obtain multiple sub-layout structures; the two-way layout division is used to represent the division of the interface components according to two division directions.

[0147] In one possible implementation, the recombination unit 33 is further configured to:

[0148] Determine the parent node of the interface component elements in the sub-layout structure; the parent node is the node that contains the interface component elements in the logical relationship subtree;

[0149] Based on the target constraint tree, determine the positional constraint relationship between the parent node and the interface components in the child layout structure;

[0150] Determine a target relation subtree to characterize the positional constraint relationship between the parent node and the interface components in the child layout structure, and define the target relation subtree as the logical relation subtree.

[0151] In one possible implementation, the recombination unit 33 is further configured to:

[0152] Based on the original logical relationship, determine the distance threshold between each interface component element of the interface design draft;

[0153] Obtain the distance values ​​between each interface component element of the interface design draft, and determine the interface component elements whose distance values ​​are less than the distance threshold as a set of interface component elements;

[0154] Based on the original logical relationships between the interface components contained in the interface component set, determine the logical relationship subtree corresponding to each interface component set.

[0155] The reorganized logical relationship is determined based on the logical relationship subtree; the reorganized logical relationship includes the logical relationship subtree corresponding to the collection of multiple interface component elements.

[0156] In one possible implementation, the recombination unit 33 is further configured to:

[0157] Get the distance value between each component element of the interface and its adjacent components;

[0158] If the distance between adjacent interface elements is less than the distance threshold, the adjacent interface elements and their corresponding interface elements are defined as a set of interface elements.

[0159] In one possible implementation, the first determining unit 32 is further configured to:

[0160] Obtain the positional constraints of each interface component in the interface design draft and the hierarchy to which each interface component belongs;

[0161] Based on the positional constraints, determine the target interface components that are the same as the parent node;

[0162] Based on the original logical relationship, the target interface components corresponding to the same parent node are divided to obtain the target constraint tree.

[0163] The description of the processing flow of each unit in the device and the interaction flow between each unit can be found in the relevant descriptions in the above method embodiments, and will not be detailed here.

[0164] Corresponding to Figure 1 This disclosure also provides a computer device 400, such as a method for reorganizing the constituent elements in the interface. Figure 4 The diagram shown is a structural schematic of a computer device 400 provided in an embodiment of this disclosure, including:

[0165] The computer device 400 comprises a processor 41, a memory 42, and a bus 43. The memory 42 stores execution instructions and includes main memory 421 and external memory 422. The main memory 421, also called internal memory, temporarily stores the processing data in the processor 41, as well as data exchanged with external memory such as a hard disk. The processor 41 exchanges data with the external memory 422 through the main memory 421. When the computer device 400 is running, the processor 41 communicates with the memory 42 through the bus 43, causing the processor 41 to execute the following instructions:

[0166] Obtain the original logical relationships between the various interface components in the interface design draft;

[0167] The target constraint tree is determined based on the original logical relationship; the relationship between each node in the target constraint tree is used to characterize the positional constraint relationship between each interface component element; nodes in the target constraint tree that have the same parent node and the same positional constraint relationship are located at the same level.

[0168] Based on the original logical relationships, the logical relationships between the various interface components are reorganized to obtain reorganized logical relationships;

[0169] Based on the reorganization logic relationship and the target constraint tree, the target logic relationship of each interface component element is determined, so as to code the interface design draft through the target logic relationship.

[0170] This disclosure also provides a computer-readable storage medium storing a computer program that, when executed by a processor, performs the steps of the method for reorganizing the constituent elements of the interface described in the above method embodiments. The storage medium can be a volatile or non-volatile computer-readable storage medium.

[0171] This disclosure also provides a computer program product carrying program code. The program code includes instructions that can be used to execute the steps of the method for recombining the constituent elements of the interface described in the above method embodiments. For details, please refer to the above method embodiments, which will not be repeated here.

[0172] The aforementioned computer program product can be implemented through hardware, software, or a combination thereof. In one optional embodiment, the computer program product is specifically embodied in a computer storage medium; in another optional embodiment, the computer program product is specifically embodied in a software product, such as a software development kit (SDK), etc.

[0173] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. In the several embodiments provided in this disclosure, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection may be through some communication interfaces; the indirect coupling or communication connection of devices or units may be electrical, mechanical, or other forms.

[0174] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0175] In addition, the functional units in the various embodiments of this disclosure can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0176] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0177] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A method for reorganizing constituent elements in an interface, characterized in that, include: Obtain the original logical relationships between the various interface components in the interface design draft; Determine the target constraint tree based on the original logical relationships; The relationship between each node in the target constraint tree is used to characterize the positional constraint relationship between each interface component element. Nodes in the target constraint tree that have the same parent node and the same positional constraint relationship are located at the same level. Based on the original logical relationships, the logical relationships between the various interface components are reorganized to obtain reorganized logical relationships; Based on the reorganization logic relationship and the target constraint tree, the target logic relationship of each interface component element is determined so as to code the interface design draft through the target logic relationship; The step of determining the target logical relationship of each interface component element based on the reorganization logical relationship and the target constraint tree includes: The target constraint tree is segmented to obtain at least one first target relation subtree corresponding to the target constraint tree; Based on the target constraint tree, determine the subtree logical relationship between the at least one first target relation subtree; Based on the reorganization logic relationship and the subtree logic relationship, the target logic relationship is obtained; The process of determining the target constraint tree based on the original logical relationship includes: The positional constraints of each interface component in the interface design draft and the layer to which each interface component belongs are obtained. The interface design draft is obtained by superimposing multiple layers together, and the layer to which each interface component belongs is determined based on the layer information of the layer to which the interface component belongs. Obtain the constraint set corresponding to the interface design draft, determine the target interface components with the same level in the constraint set, and determine the node constraint relationship corresponding to the target interface components. The node constraint relationship is used to characterize that when the size of the parent node changes, the constraint distance between the interface component and the target boundary of the parent node remains unchanged. Obtain the node constraint relationships of the target interface components that belong to the same level, and construct a target constraint tree based on the node constraint relationships, so as to represent the target interface components with different node constraint relationships separately in the same level of the target constraint tree.

2. The method according to claim 1, characterized in that, The reorganization of the logical relationships between the various interface components based on the original logical relationships to obtain reorganized logical relationships includes: Based on the original logical relationship of the interface components in the interface design draft, the interface components are divided into layouts to obtain multiple sub-layout structures. Based on the original logical relationships between the interface components contained in the multiple sub-layout structures, determine the logical relationship subtree corresponding to each sub-layout structure; The reorganization logic relationship is determined based on the logical relationship subtree; wherein the reorganization logic relationship includes the logical relationship subtree corresponding to each of the sub-layout structures.

3. The method according to claim 2, characterized in that, Based on the original logical relationships of the interface components in the interface design draft, the interface components are divided into layouts to obtain multiple sub-layout structures, including: Determine the layout type of the interface design draft; If the layout type of the interface design draft is determined to be the first layout type, the interface components in the interface design draft are divided into multiple sub-layout structures by unidirectional layout segmentation; wherein, the unidirectional layout segmentation is used to represent the segmentation of the interface components according to a segmentation direction. If the layout type of the interface design draft is determined to be the second layout type, the interface components in the interface design draft are divided into two-way layouts to obtain multiple sub-layout structures; the two-way layout division is used to represent the division of the interface components according to two division directions.

4. The method according to claim 2, characterized in that, The step of determining the logical relationship subtree corresponding to each sub-layout structure based on the original logical relationships between the interface components contained in the plurality of sub-layout structures includes: Determine the parent node of the interface components in the sub-layout structure; the parent node is the node that contains the interface components in the logical relationship subtree; Based on the target constraint tree, determine the positional constraint relationship between the parent node and the interface components in the child layout structure; A second target relation subtree is determined to characterize the positional constraint relationship between the parent node and the interface components in the child layout structure, and the second target relation subtree is determined as the logical relation subtree.

5. The method according to claim 1, characterized in that, The reorganization of the logical relationships between the various interface components based on the original logical relationships to obtain reorganized logical relationships includes: Based on the original logical relationship, determine the distance threshold between each interface component element of the interface design draft; Obtain the distance values ​​between each interface component element of the interface design draft, and determine the interface component elements whose distance values ​​are less than the distance threshold as a set of interface component elements; Based on the original logical relationships between the interface components contained in the interface component set, determine the logical relationship subtree corresponding to each interface component set. The reorganized logical relationship is determined based on the logical relationship subtree; the reorganized logical relationship includes logical relationship subtrees corresponding to multiple sets of interface component elements.

6. The method according to claim 5, characterized in that, The step of obtaining the distance values ​​between the various interface components of the interface design draft, and determining the interface components with distance values ​​less than the distance threshold as a set of interface components, includes: Get the distance value between each component element of the interface and its adjacent components; If the distance between adjacent interface elements is less than the distance threshold, the adjacent interface elements and their corresponding interface elements are defined as a set of interface elements.

7. A device for recombining constituent elements in an interface, characterized in that, include: The acquisition unit is used to acquire the original logical relationships between the various interface components in the interface design draft. The first determining unit is used to determine the target constraint tree based on the original logical relationship; The relationship between each node in the target constraint tree is used to characterize the positional constraint relationship between each interface component element. Nodes in the target constraint tree that have the same parent node and the same positional constraint relationship are located at the same level. The recombination unit is used to recombine the logical relationships between the various interface components based on the original logical relationships to obtain recombined logical relationships; The second determining unit is used to determine the target logical relationship of each interface component based on the reorganization logical relationship and the target constraint tree, so as to code the interface design draft through the target logical relationship; Wherein, when the second determining unit performs the task of determining the target logical relationship of each interface component element based on the reorganization logical relationship and the target constraint tree, it is used to: The target constraint tree is segmented to obtain at least one first target relation subtree corresponding to the target constraint tree; Based on the target constraint tree, determine the subtree logical relationship between the at least one first target relation subtree; Based on the reorganization logic relationship and the subtree logic relationship, the target logic relationship is obtained; The first determining unit is configured to: obtain the positional constraint relationships of each interface component element in the interface design draft and the hierarchy to which each interface component element belongs, wherein the interface design draft is obtained by superimposing multiple layers together, and the hierarchy to which each interface component element belongs is determined based on the layer information of the layer to which the interface component element belongs; obtain the constraint set corresponding to the interface design draft, determine the target interface component elements with the same hierarchy in the constraint set, determine the node constraint relationship corresponding to the target interface component element, the node constraint relationship being used to characterize that when the size of the parent node changes, the constraint distance between the target boundary of the interface component element and the target boundary of the parent node remains unchanged; obtain the node constraint relationship of the target interface component elements with the same hierarchy respectively, and construct a target constraint tree based on the node constraint relationship, so as to represent the target interface component elements with different node constraint relationships separately in the same level of the target constraint tree.

8. A computer device, characterized in that, include: The computer device includes a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the computer device is running, the processor communicates with the memory via the bus. When the machine-readable instructions are executed by the processor, they perform the steps of the method for reorganizing the components of the interface as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the method for reorganizing the constituent elements of the interface as described in any one of claims 1 to 6.

Images