Grid-based page layout methods, apparatus, computer devices, and storage media

Abstract

This application belongs to the fields of artificial intelligence and software development, and relates to a grid-based page layout method, including: acquiring a UI design draft; parsing the UI design draft into preset formatted data; converting the UI design draft into a tree structure based on the formatted data; and performing grid-based processing on the tree structure to obtain a grid-based page layout result. This application increases the flexibility and speed of generating web page layouts from UI design drafts by parsing the acquired UI design draft into preset formatted data and assembling various elements in the UI design draft into nodes in a tree structure. Finally, the grid-based processing of the tree structure yields a grid-based page layout result. This not only allows for flexible layout and intuitive output of the grid-based page as needed, but also supports users to automatically modify the grid-based page layout by directly modifying the UI design draft, which is quick, convenient, and improves the user experience of automatically generating web pages from UI design drafts.

Description

Technical Field

[0001] This application relates to the fields of artificial intelligence and software development technology, and in particular to grid-based page layout methods, apparatus, computer devices, and readable storage media. Background Technology

[0002] In the fields of finance and insurance, it is often necessary to present users with a large amount of business or product information. The first step in capturing users' attention is to quickly and intuitively present relevant information based on the characteristics of the business or products in finance and insurance. Therefore, a more flexible information display method based on the user interface is needed.

[0003] Currently, converting UI (User Interface) designs into front-end code is a recurring daily task for front-end engineers. While this work is relatively low in complexity, it constitutes a significant portion of their workload, making improving the efficiency of this conversion a constant pursuit for front-end engineers. In the process of automatically generating webpage code from UI designs, converting the absolute positioning of the design into a layout suitable for the front-end is a crucial step. Although absolute positioning can achieve the desired functionality, its disadvantages become apparent when developers intervene, including when manually modifying the layout later. For example, it suffers from inconvenient and slow modification processes, a lack of layout flexibility, and ultimately, a poor user experience. Summary of the Invention

[0004] The purpose of this application is to provide a grid-based page layout method, apparatus, computer device, and readable storage medium, which can help users to easily and quickly modify the page layout by directly modifying the UI design draft. Furthermore, using a grid can make the page layout more flexible and convenient, improving the user experience of automatically generating web pages from UI design drafts.

[0005] To address the aforementioned technical problems, this application provides a grid-based page layout method, employing the following technical solution:

[0006] Obtain UI design drafts;

[0007] The UI design draft is parsed into preset formatted data;

[0008] Based on the formatted data, the UI design draft is converted into a tree structure;

[0009] The tree structure is then processed into a grid to obtain a grid page layout result.

[0010] Furthermore, the step of parsing the UI design draft into preset formatted data includes:

[0011] All elements of the UI design draft are parsed into nodes, and the node information of each node includes node number, node position and node size;

[0012] Each node is processed into pre-defined JSON formatted data based on its information.

[0013] Furthermore, the step of processing each node into preset JSON formatted data based on the node information includes:

[0014] The relationships between nodes are determined based on their positions and sizes, including parallel and containment relationships.

[0015] Using node number as the key, nodes are arranged side-by-side in JSON formatted data according to their parallel relationship, and nested within JSON formatted data according to their containment relationship.

[0016] Furthermore, the step of converting the UI design draft into a tree structure based on the formatted data includes:

[0017] Convert parallel nodes in the JSON formatted data into sibling nodes in a tree structure;

[0018] Convert nested nodes in the JSON formatted data into parent-child nodes in a tree structure.

[0019] Furthermore, the grid-based processing of the tree structure to obtain the grid page layout result includes:

[0020] Starting from the root node of the tree structure, the boundaries of each sibling node are divided from top to bottom according to the node information to obtain the grid lines of each sibling node.

[0021] Based on the node information of the child nodes of each sibling node, the grid occupied by the child node is divided to obtain the grid lines of the child node.

[0022] Grid webpage information for each node is generated based on the grid lines of the sibling nodes and the grid lines of the child nodes.

[0023] The grid webpage information of each node is combined to obtain the grid page layout result.

[0024] Furthermore, generating grid webpage information for each node based on the grid lines of the sibling nodes and the grid lines of the child nodes includes:

[0025] Generate a webpage and set its display mode to grid;

[0026] Based on the grid lines occupied by each sibling node, the webpage is divided accordingly to obtain the grid webpage information of each sibling node.

[0027] Based on the grid lines occupied by each child node, the corresponding grid is divided on the webpage of the sibling node to obtain the grid webpage information of each child node.

[0028] To address the aforementioned technical problems, this application also provides a grid-based page layout device, employing the following technical solution:

[0029] The grid-based page layout device includes:

[0030] The acquisition module is used to acquire UI design drafts;

[0031] The parsing module is used to parse the UI design draft into preset formatted data;

[0032] The conversion module is used to convert the UI design draft into a tree structure based on the formatted data;

[0033] The processing module is used to perform grid-based processing on the tree structure to obtain the grid page layout result.

[0034] Furthermore, the parsing module includes:

[0035] The parsing submodule is used to parse all elements of the UI design draft into nodes. The node information of each node includes node number, node position and node size.

[0036] The processing submodule is used to process each node into preset JSON formatted data based on the node information.

[0037] To address the aforementioned technical problems, this application also provides a computer device that employs the following technical solution:

[0038] The computer device includes a memory and a processor. The memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the grid-based page layout method.

[0039] To address the aforementioned technical problems, this application also provides a computer-readable storage medium, employing the technical solution described below:

[0040] The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the grid-based page layout method.

[0041] Compared with the prior art, the embodiments of this application have the following advantages: This application parses the obtained UI design draft into preset formatted data, and then converts the UI design draft into a tree structure according to the formatted data. Various elements in the UI design draft are assembled into nodes in the tree structure. By uniformly and dynamically managing the nodes, such as performing dynamic operations such as quick access to nodes and adding, deleting, modifying, and querying node information, the flexibility and speed of generating web page layouts from UI design drafts are increased. Finally, the tree structure is gridded to obtain grid page layout results. Not only can the grid page be flexibly laid out and output intuitively as needed, but it also supports users to automatically modify the grid page layout by directly modifying the UI design draft. It is quick, convenient, and improves the user experience of automatically generating web pages from UI design drafts. Attached Figure Description

[0042] To more clearly illustrate the solutions in this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0043] Figure 1 This is an exemplary system architecture diagram to which this application can be applied;

[0044] Figure 2 This is a flowchart of an embodiment of the grid-based page layout method according to this application;

[0045] Figure 3 This is a schematic diagram of a structure of an embodiment of a grid-based page layout apparatus according to this application;

[0046] Figure 4 This is a schematic diagram of the structure of one embodiment of the computer device according to this application. Detailed Implementation

[0047] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein in the specification of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings of this application, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings of this application are used to distinguish different objects, not to describe a particular order.

[0048] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0049] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.

[0050] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, and 103, a network 104, and a server 105. Network 104 serves as the medium for providing communication links between terminal devices 101, 102, and 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0051] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, and 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc.

[0052] Terminal devices 101, 102, and 103 can be various electronic devices with displays and support web browsing, including but not limited to smartphones, tablets, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 players (Moving Picture Experts Group Audio Layer IV), laptops, and desktop computers, etc.

[0053] Server 105 can be a server that provides various services, such as a backend server that supports the pages displayed on terminal devices 101, 102, and 103.

[0054] It should be noted that the grid-based page layout method provided in this application embodiment is generally executed by a server / terminal device, and correspondingly, the grid-based page layout device is generally set in the server / terminal device.

[0055] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0056] Continue to refer to Figure 2 The diagram illustrates a flowchart of an embodiment of a grid-based page layout method according to this application. The grid-based page layout method includes the following steps:

[0057] Step S201: Obtain the UI design draft.

[0058] In this embodiment, the grid-based page layout method runs on electronic devices (e.g., Figure 1 The server / terminal device shown can receive UI design drafts uploaded by users using terminal devices 101, 102, and 103 via wired or wireless connections. It should be noted that the aforementioned wireless connection methods may include, but are not limited to, 3G / 4G / 5G connections, WiFi connections, Bluetooth connections, WiMAX, Zigbee connections, UWB (ultra-wideband) connections, and other currently known or future wireless connection methods. The aforementioned UI design drafts are user interface designs for web pages, applications, and apps created by UI designers using design software such as Photoshop. These include elements such as buttons, text input boxes, and image (or text) display areas in apps, as well as the position, size, style, and layout of these elements on the design draft. Finally, the UI design drafts can be generated into files in a specific format (such as PSD format) for easy saving, access, and transmission.

[0059] Step S202: Parse the UI design draft into preset formatted data.

[0060] In this embodiment, the obtained and saved file, such as a UI design draft in PSD format, can be parsed. Specifically, the psd.js library can be used for parsing. The psd.js library can directly parse the PSD file into the required preset formatted data, such as JSON format data (key-value pair data format), XML format data (tag-based data format), etc.

[0061] Furthermore, step S202 above includes:

[0062] S2021. Parse all elements of the UI design draft into nodes. The node information of each node includes node number, node position and node size.

[0063] S2022. Process each node into preset JSON formatted data based on the node information.

[0064] Specifically, step S2022 includes:

[0065] S20221. Determine the relationship between nodes based on the node position and the node size, wherein the relationship between nodes includes parallel relationship and containment relationship;

[0066] S20222. Using node number as the key, list nodes in parallel within JSON formatted data according to their parallel relationship, and nest nodes within JSON formatted data according to their inclusion relationship.

[0067] In this embodiment, all elements in the UI design draft are first identified, and each element is processed into JSON format data according to the preset JSON format. That is, the position, size, style layout and other information of each element are processed into node information in the form of key-value pairs in JSON format, and each element is numbered in the form of numbers or letters, such as {node1: {position, size...}}, {node2: {position, size...}}, or {nodea: {position, size...}, etc.

[0068] Furthermore, based on the position and size information of each node, it can be determined whether the nodes are in a parallel or inclusive relationship. Specifically, all elements (i.e., nodes) parsed from the UI design draft by psd.js are at the same level. All elements have horizontal and vertical distances relative to the top left corner of the UI design draft page. The horizontal and vertical distances of the elements constitute the position information of the nodes. At the same time, the size information of the nodes includes the width and height of the element itself on the design draft page. Based on the horizontal and vertical distances of the elements, as well as the width and height of the elements, the top, bottom, left, and right boundary information of the elements can be obtained. Then, based on the above top, bottom, left, and right boundary information, all nodes are compared pairwise to determine whether the nodes are parent-child nodes with an inclusive relationship or sibling nodes with a parallel relationship.

[0069] Specifically, the criteria for determining parent-child nodes are as follows: If node A is the parent node of node B, then the following condition must be true:

[0070] The left boundary of A is less than or equal to the left boundary of B.

[0071] The right boundary of A is greater than or equal to the right boundary of B.

[0072] The upper boundary of A is less than or equal to the upper boundary of B.

[0073] The lower boundary of A is greater than or equal to the lower boundary of B;

[0074] The above method can be used to obtain the parent-child relationship of all nodes. However, since the nesting relationship of nodes can be any level, the obtained parent-child relationship will generally also include grandparent-grandchild relationship, or even nesting across many levels. For example, if A is the parent node of B, and B is the parent node of C, then the parent-child relationships obtained above must be: [A,B], [B,C], [A,C], where the first element of the array is the parent node of the second element. If [A,B], [B,C], [A,C] are considered as vectors, then [A,C] = [A,B] + [B,C]. Based on this property, we can find the grandparent-grandchild nodes (i.e., [A,C]), then delete all grandparent-grandchild node pairs, keeping all parent-child node pairs, to obtain all direct parent-child node information. Finally, based on all direct parent-child node information and sibling node information, using the node number as the key, the nodes are arranged in parallel within the JSON formatted data according to the parallel relationship (sibling nodes), and nested within the JSON formatted data according to the inclusion relationship (direct parent-child nodes). This allows for convenient and unified management of nodes, such as accessing nodes and performing dynamic operations like adding, deleting, modifying, and querying node information, increasing the flexibility of generating webpage layouts from UI designs.

[0075] Step S203: Convert the UI design draft into a tree structure based on the formatted data.

[0076] Furthermore, step S203 above includes:

[0077] S2031. Convert the parallel nodes in the JSON formatted data into sibling nodes in a tree structure;

[0078] S2032. Convert the nested nodes in the JSON formatted data into parent-child nodes in a tree structure.

[0079] In this embodiment, according to step S202, the JSON formatted data generated from the UI design draft can be transformed into a tree structure. This tree structure is built, run, and maintained in memory based on the structure of the aforementioned JSON formatted data. Specifically, parallel nodes in the aforementioned JSON formatted data can be transformed into parallel sibling nodes in the tree structure, and nested nodes in the aforementioned JSON formatted data can be transformed into a multi-level multi-branch tree of parent and child nodes in the tree structure. This can speed up the access to node information and help improve the speed of the next step of grid processing based on the tree structure.

[0080] Step S204: Perform grid-based processing on the tree structure to obtain the grid page layout result.

[0081] Furthermore, step S204 above includes:

[0082] S2041. Starting from the root node of the tree structure, perform boundary segmentation on each layer of sibling nodes from top to bottom according to the node information to obtain the grid lines of each layer of sibling nodes;

[0083] S2042. Based on the node information of the child nodes of each sibling node, divide the grid occupied by the child node to obtain the grid lines of the child node.

[0084] S2043. Generate grid webpage information for each node based on the grid lines of the sibling nodes and the grid lines of the child nodes;

[0085] S2044. Combine the grid webpage information of each node to obtain the grid page layout result.

[0086] In this embodiment of the invention, for example, assuming the parent node of the above tree structure is A, and it has child nodes B, C, and D, and the child nodes B, C, and D are also sibling nodes at the same level, the internal area of ​​A (which can correspond to the entire grid) is divided according to the node information (top, bottom, left, and right boundaries) of the child nodes B, C, and D to obtain the grid lines of the sibling nodes B, C, and D. This is also the initial grid line of the entire grid layout. At the same time, the grid line information (top, bottom, left, and right boundaries of the grid) can be stored in the parent node A. Then, the grid line layout of each child node B, C, and D is determined, such as how many child nodes it includes, how many grid cells each occupies, and whether there are any grid crossings. Specifically, based on the node information of the child nodes of each sibling node B, C, and D, such as node position information and size information, the grid cells occupied by their child nodes are further divided to obtain the grid lines of the child nodes. The above steps are repeated until the last layer of child nodes of the above tree structure, so that the grid lines of all nodes of the entire tree structure (the entire UI design draft) can be obtained.

[0087] Furthermore, step S2043 specifically includes:

[0088] S20431. Generate a webpage and set its display mode to grid;

[0089] S20432. Based on the grid occupied by the grid lines of each sibling node, divide the webpage accordingly to obtain the grid webpage information of each sibling node.

[0090] S20433. Based on the grid occupied by the grid lines of each child node, divide the webpage of the sibling node to obtain the grid webpage information of each child node.

[0091] In this embodiment of the invention, grid webpage information for each node can be generated based on the grid lines of all sibling nodes and their child nodes in the tree structure, i.e., the grid lines of all nodes. Specifically, firstly, a webpage is generated using HTML programming language and the display mode of the webpage is set to grid. Then, based on the grid occupied by the grid lines of each sibling node, the webpage is divided accordingly to obtain the grid webpage information for each sibling node. Finally, based on the grid occupied by the grid lines of each child node, the webpage of each sibling node is divided accordingly. That is, the child node is divided on the webpage of the sibling node to which it is a child node, thus obtaining the grid webpage information for each child node. The grid webpage information typically includes information such as the starting column number and the number of rows occupied by the node on the webpage.

[0092] For example, the grid page information of the root node A above:

[0093] display:'grid',

[0094] 'grid-template-columns': 30% 30% 40% (the grid cells occupied by nodes B, C, and D respectively)

[0095] 'grid-template-rows':100%,

[0096] Grid webpage information for node B:

[0097] 'grid-column-start':1,'grid-column-end':2;

[0098] 'grid-row-start':1,'grid-row-end':1,

[0099] Similarly, the grid webpage information for all other nodes can be obtained.

[0100] Finally, the grid webpage information of the above nodes is combined according to the output requirements to obtain the corresponding grid page layout result. For example, according to the needs of financial business, such as when intuitively recommending insurance products to users, the grid webpage information of node B, which represents the product user distribution map, and / or the grid webpage information of node C, which represents the statistical table of various product data, can be added to the webpage for display by clicking, dragging, etc. Of course, the grid webpage information of all nodes can also be combined to obtain the entire webpage. Compared with the fixed layout of the entire webpage, the above-mentioned combined webpage layout based on grid webpage information is more adaptable. It offers better performance and greater flexibility; it can directly use node information as the CSS Cascading Style Sheet for rendering the entire page, allowing for flexible layout and intuitive output of the grid page as needed; finally, through the above steps, it also supports users to automatically modify the grid page layout by directly modifying the UI design draft. Users only need to add, delete, or modify elements on the original UI design draft, and then submit it to the automated processing of the above steps to obtain the new grid page, without having to worry about the specific processing process. It is fast, convenient, and improves the user experience of automatically generating web pages from UI design drafts.

[0101] In summary, this application parses the acquired UI design draft into preset formatted data, then converts the UI design draft into a tree structure based on the formatted data, assembling various elements in the UI design draft into nodes in the tree structure. By uniformly and dynamically managing nodes, such as enabling quick access to nodes and dynamic operations like adding, deleting, modifying, and querying node information, the flexibility and speed of generating web page layouts from UI design drafts are increased. Finally, the tree structure is gridded to obtain a grid page layout result. This not only allows for flexible layout and intuitive output of the grid page as needed, but also supports users to automatically modify the grid page layout by directly modifying the UI design draft, making it quick, convenient, and improving the user experience of automatically generating web pages from UI design drafts.

[0102] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) refers to the theories, methods, technologies, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.

[0103] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware with computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When executed, the program can include the processes of the embodiments of the above methods. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).

[0104] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0105] Further reference Figure 3 As a response to the above Figure 2 The implementation of the method shown in this application provides an embodiment of a grid-based page layout device, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0106] like Figure 3 As shown, the grid-based page layout device 300 described in this embodiment includes: an acquisition module 301, a parsing module 302, a conversion module 303, and a processing module 304.

[0107] in:

[0108] Module 301 is used to obtain UI design drafts;

[0109] The parsing module 302 is used to parse the UI design draft into preset formatted data;

[0110] The conversion module 303 is used to convert the UI design draft into a tree structure based on the formatted data;

[0111] The processing module 304 is used to perform grid-based processing on the tree structure to obtain a grid-based page layout result.

[0112] In this embodiment, the parsing module 302 parses the UI design draft obtained by the acquisition module 301 into preset formatted data. Then, the conversion module 303 converts the UI design draft into a tree structure based on the formatted data. Various elements in the UI design draft are assembled into nodes in the tree structure. By uniformly and dynamically managing the nodes, such as enabling quick access to nodes and dynamic operations like adding, deleting, modifying, and querying node information, the flexibility and speed of generating web page layouts from UI design drafts are increased. Finally, the processing module 304 performs grid-based processing on the tree structure to obtain the grid page layout result. Through these modules, not only can the grid page be flexibly laid out and output intuitively as needed, but users can also automatically modify the grid page layout by directly modifying the UI design draft. This is quick, convenient, and improves the user experience of automatically generating web pages from UI design drafts.

[0113] In some optional implementations of this embodiment, the parsing module 302 includes:

[0114] The parsing submodule 3021 is used to parse all elements of the UI design draft into nodes. The node information of each node includes node number, node position and node size.

[0115] The processing submodule 3022 is used to process each node into preset JSON formatted data based on the node information.

[0116] The parsing module 302 allows for convenient and unified management of nodes, such as accessing nodes and performing dynamic operations like adding, deleting, modifying, and querying node information, increasing the flexibility of generating web page layouts from UI design drafts.

[0117] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 4 , Figure 4 This is a basic structural block diagram of the computer device in this embodiment.

[0118] The computer device 4 includes a memory 41, a processor 42, and a network interface 43 that are interconnected via a system bus. It should be noted that only the computer device 4 with components 41-43 is shown in the figure; however, it should be understood that it is not required to implement all the shown components, and more or fewer components can be implemented alternatively. Those skilled in the art will understand that the computer device described here is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0119] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.

[0120] The memory 41 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD card), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 41 may be an internal storage unit of the computer device 4, such as the hard disk or memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 4. Of course, the memory 41 may also include both the internal storage unit and its external storage device of the computer device 4. In this embodiment, the memory 41 is typically used to store the operating system and various application software installed on the computer device 4, such as computer-readable instructions based on grid-based page layout methods. In addition, the memory 41 can also be used to temporarily store various types of data that have been output or will be output.

[0121] In some embodiments, the processor 42 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is used to execute computer-readable instructions stored in the memory 41 or to process data, for example, to execute computer-readable instructions for the grid-based page layout method.

[0122] The network interface 43 may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 4 and other electronic devices.

[0123] This application also provides another implementation, namely, a computer-readable storage medium storing computer-readable instructions that can be executed by at least one processor to perform the steps of the grid-based page layout method described above, thereby enabling users to implement grid-based page layout functionality. This allows users to easily and quickly modify the page layout by directly modifying the UI design draft, and the use of a grid grid makes the page layout more flexible and convenient, improving the user experience of automatically generating web pages from UI design drafts.

[0124] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0125] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to provide a more thorough and comprehensive understanding of the disclosure of this application. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application.

Claims

1. A grid-based page layout method, characterized in that, Includes the following steps: Obtain UI design drafts; The UI design draft is parsed into preset formatted data; Based on the formatted data, the UI design draft is converted into a tree structure; The tree structure is then processed into a grid to obtain a grid page layout result; The step of parsing the UI design draft into preset formatted data includes: All elements of the UI design draft are parsed into nodes, and the node information of each node includes node number, node position and node size; Each node is processed into pre-defined JSON formatted data based on its node information; The step of processing each node into preset JSON formatted data based on node information includes: The relationships between nodes are determined based on their positions and sizes, including parallel and containment relationships. Using node number as the key, nodes are arranged side-by-side in JSON formatted data according to their parallel relationship, and nested within JSON formatted data according to their containment relationship. The process involves obtaining the top, bottom, left, and right boundary information of elements based on their horizontal and vertical distances, as well as their width and height. Then, all nodes are compared pairwise based on this boundary information to determine whether they are parent-child nodes with an inclusive relationship or sibling nodes with a parallel relationship. From the parent-child relationships of all nodes, grandparent-grandchild nodes are identified. All grandparent-grandchild node pairs are then deleted, leaving only the parent-child node pairs to obtain all direct parent-child node information. Based on all direct parent-child node information and sibling node information, nodes are arranged in parallel within JSON formatted data, using their node IDs as keys, and nested within JSON formatted data, based on their inclusive relationships. The step of performing grid-based processing on the tree structure to obtain the grid page layout result includes: Starting from the root node of the tree structure, the boundaries of each sibling node are divided from top to bottom according to the node information to obtain the grid lines of each sibling node. Based on the node information of the child nodes of each sibling node, the grid occupied by the child node is divided to obtain the grid lines of the child node. Grid webpage information for each node is generated based on the grid lines of the sibling nodes and the grid lines of the child nodes. The grid webpage information of each node is combined to obtain the grid page layout result; The horizontal and vertical distances of elements constitute the position information of nodes, while the size information of nodes includes the width and height of the element itself on the design page. The top, bottom, left, and right boundary information of elements is obtained based on the horizontal and vertical distances of elements, as well as the width and height of elements. All nodes are compared pairwise based on the top, bottom, left, and right boundary information to determine whether the nodes are parent-child nodes with an inclusion relationship or sibling nodes with a parallel relationship. The node pairs with inclusion relationships are treated as vectors, and the grandparent-grandchild nodes are found based on the vector addition property. All grandparent-grandchild node relationship pairs are deleted, and all direct parent-child node relationship pairs are retained.

2. The grid-based page layout method according to claim 1, characterized in that, The step of converting the UI design draft into a tree structure based on the formatted data includes: Convert parallel nodes in the JSON formatted data into sibling nodes in a tree structure; Convert nested nodes in the JSON formatted data into parent-child nodes in a tree structure.

3. The grid-based page layout method according to claim 1, characterized in that, The process of generating grid webpage information for each node based on the grid lines of the sibling nodes and the grid lines of the child nodes includes: Generate a webpage and set its display mode to grid; Based on the grid lines occupied by each sibling node, the webpage is divided accordingly to obtain the grid webpage information of each sibling node. Based on the grid lines occupied by each child node, the corresponding grid is divided on the webpage of the sibling node to obtain the grid webpage information of each child node.

4. A grid-based page layout device, characterized in that, include: The acquisition module is used to acquire UI design drafts; The parsing module is used to parse the UI design draft into preset formatted data; The conversion module is used to convert the UI design draft into a tree structure based on the formatted data; The processing module is used to perform grid-based processing on the tree structure to obtain the grid page layout result; The parsing module includes: The parsing submodule is used to parse all elements of the UI design draft into nodes. The node information of each node includes node number, node position and node size. The processing submodule is used to process each node into preset JSON formatted data based on the node information; Specifically, the conversion module is used to determine the relationship between nodes based on the node position and the node size. The relationship between nodes includes parallel relationship and containment relationship. Using the node number as the key, the nodes are arranged in parallel in the JSON formatted data according to the parallel relationship between the nodes, and the nodes are nested in the JSON formatted data according to the containment relationship between the nodes. The process involves obtaining the top, bottom, left, and right boundary information of elements based on their horizontal and vertical distances, as well as their width and height. Then, all nodes are compared pairwise based on this boundary information to determine whether they are parent-child nodes with an inclusive relationship or sibling nodes with a parallel relationship. From the parent-child relationships of all nodes, grandparent-grandchild nodes are identified. All grandparent-grandchild node pairs are then deleted, leaving only the parent-child node pairs to obtain all direct parent-child node information. Based on all direct parent-child node information and sibling node information, nodes are arranged in parallel within JSON formatted data, using their node IDs as keys, and nested within JSON formatted data, based on their inclusive relationships. Specifically, the processing module is used to start from the root node of the tree structure, divide the boundaries of each sibling node from top to bottom according to the node information, and obtain the grid lines of each sibling node; divide the grid occupied by the child node according to the node information of the child node, and obtain the grid lines of the child node; generate grid web page information for each node according to the grid lines of the sibling node and the grid lines of the child node; and combine the grid web page information of each node to obtain the grid page layout result. The horizontal and vertical distances of elements constitute the position information of nodes, while the size information of nodes includes the width and height of the element itself on the design page. The top, bottom, left, and right boundary information of elements is obtained based on the horizontal and vertical distances of elements, as well as the width and height of elements. All nodes are compared pairwise based on the top, bottom, left, and right boundary information to determine whether the nodes are parent-child nodes with an inclusion relationship or sibling nodes with a parallel relationship. The node pairs with inclusion relationships are treated as vectors, and the grandparent-grandchild nodes are found based on the vector addition property. All grandparent-grandchild node relationship pairs are deleted, and all direct parent-child node relationship pairs are retained.

5. A computer device comprising a memory and a processor, the memory storing computer-readable instructions, wherein the processor, when executing the computer-readable instructions, implements the steps of the grid-based page layout method as described in any one of claims 1 to 3.

6. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the grid-based page layout method as described in any one of claims 1 to 3.

Images