Graphical interface design method and device, equipment and storage medium

Abstract

The invention discloses a graphical interface design method and device, equipment and a storage medium, and the method comprises the steps: analyzing a pre-generated design draft, obtaining analysis data of a plurality of target elements in the design draft, and sequentially converting the analysis data of the plurality of target elements into component styles to obtain a data set with flattened data information; according to a predefined attribute default value, performing visual configuration on the components in the data set to obtain a component set in which the styles and the components are bound bidirectionally; reading the to-be-rendered data in the component set in sequence, and rendering the to-be-rendered data to generate a reconstructed target interface; by adopting the method, the interactivity after the design draft is reconstructed can be improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and particularly to a graphical interface design method, device, equipment and storage medium. Background Art

[0002] During the front-end development process, it is necessary to restore and develop the design draft. When reconstructing the design draft, if the design draft is directly dragged and dropped according to a low-code platform to generate an interface to improve applicability, the obtained interface is static and cannot be interacted with in real time, making it difficult to meet the requirements of the design draft; or the design draft is restored with one key according to the platform to improve reusability and reduce costs. However, these platforms all generate Hypertext Mark-up Language (HTML) download files. However, the elements in HTML are still static pictures and texts, and it is impossible to achieve strong interface reconstruction interaction and underlying conversion processing, such as associating with a database after modifying data, resulting in low interactivity. Summary of the Invention

[0003] The purpose of the present invention is to address the above deficiencies of the prior art and propose a graphical interface design method, device, equipment and storage medium, which can improve the interactivity of the design draft reconstruction.

[0004] In a first aspect, the present invention provides a graphical interface design method, including:

[0005] Parsing a pre-generated design draft, obtaining parsing data of multiple target elements in the design draft, and sequentially converting the parsing data of the multiple target elements into component styles to obtain a data set with flattened data information;

[0006] Visualizing and configuring the components in the data set according to pre-defined attribute default values to obtain a component set with two-way binding of styles and components;

[0007] Sequentially reading the data to be rendered in the component set and rendering the data to be rendered to generate a reconstructed target interface.

[0008] After parsing the design draft, the present invention visualizes and configures the obtained data set according to the attribute default values, improves the efficiency of converting the design draft elements into styles, and through the visual configuration, obtains a component set with two-way binding of styles and components, which can improve the strong interface reconstruction interaction and underlying conversion processing capabilities, as well as improve the flexibility of configuration. When rendering according to the component set, the interactivity of the reconstructed interface is thus improved.

[0009] In combination with the first aspect, in some embodiments, according to the predefined default values of attributes, the components in the data set are visually configured to obtain a set of components with two-way binding between styles and components, including:

[0010] Construct a visual dynamic form from multiple attribute configuration items, and select the corresponding default values of attributes from the dynamic form to configure the components in the data set in sequence, obtaining a set of components with two-way binding between styles and components and two-way binding between components and the database; wherein, at least one of the multiple attribute configuration items is linked to the database.

[0011] By configuring the components with the default values of attributes in the visual dynamic form, the present invention can quickly modify the styles of the target elements in the design draft, and configure them intuitively through the visual dynamic form, which is convenient for improving the intuitiveness of data configuration in the data set, obtaining a set of components with two-way binding between styles and components and two-way binding between components and the database, and enhancing the interactivity after the design draft is reconstructed.

[0012] In combination with the first aspect, in some embodiments, parsing the pre-generated design draft to obtain the parsing data of multiple target elements in the design draft includes:

[0013] Perform layer parsing on the layer tree of the pre-generated design draft from bottom to top to obtain the traversal order of multiple elements in the design draft and the parsing data corresponding to the multiple elements respectively, use the multiple leaf nodes of the layer tree as multiple target elements, and filter out the parsing data corresponding to the multiple target elements from the traversal order.

[0014] By parsing the design draft from bottom to top to obtain the traversal order, and filtering out the target elements from the traversal order to obtain the final parsing data, compared with the tree structure obtained by parsing the design draft and traversing and parsing it from top to bottom, the present invention does not need to establish a tree structure and traverse the tree structure to obtain the leaf nodes, thus greatly improving the efficiency of design draft parsing, and further improving the efficiency of design draft reconstruction.

[0015] In combination with the first aspect, in some embodiments, after obtaining the set of components with two-way binding between styles and components, it further includes:

[0016] Convert the set of components into a first script file for storage. When it is necessary to generate a similar interface similar to the first script file, read the pre-stored second script file, adjust the second script file to obtain a similar script file, and render the similar script file to generate a reconstructed similar interface.

[0017] By storing the script files of the component set, the present invention facilitates directly reading the stored design drafts when reconstructing similar design drafts, and only requires adjustment to obtain the script for rendering, thereby improving the reusability and applicability of reconstructing similar design drafts, reducing the development cost, and further improving the efficiency of reconstructing similar design drafts.

[0018] In a second aspect, the present invention provides a graphical interface design device, including: a parsing module, a configuration module, and a rendering module; wherein,

[0019] The parsing module is configured to parse a pre-generated design draft, obtain parsing data of multiple target elements in the design draft, and sequentially convert the parsing data of the multiple target elements into component styles to obtain a flattened data set of data information;

[0020] The configuration module is configured to perform visual configuration on the components in the data set according to predefined default attribute values to obtain a component set with two-way binding of styles and components;

[0021] The rendering module is configured to sequentially read the data to be rendered in the component set and render the data to be rendered to generate a reconstructed target interface.

[0022] By parsing the design draft through the parsing module of the present invention and transmitting the obtained data set to the configuration module, and the configuration module performs visual configuration on the data set through default attribute values to obtain a component set with two-way binding of styles and components, the ability of strong interface reconstruction interaction and underlying conversion processing can be improved. When the rendering module renders the component set, the interactivity of the reconstructed interface is thus improved.

[0023] In a third aspect, the present invention provides an electronic device, which includes: a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the steps of the graphical interface design method described in the first aspect are implemented.

[0024] When integrating the graphical interface design method described in the first aspect on the electronic device, the present invention can quickly perform on-site design draft reconstruction through various electronic devices and quickly provide feedback on the reconstructed target interface, with stronger scalability.

[0025] In a fourth aspect, the present invention provides a readable computer storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the graphical interface design method described in the first aspect are implemented.

[0026] When the graphical interface design method described in the first aspect is stored in a storage medium in the form of a program, operations such as rapid reconstruction can be performed on different operating systems and terminals by running or reading the executable program in the storage medium, which is applicable to more operating systems and different application platforms and has stronger scalability. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] Figure 1 is a schematic flowchart of a graphical interface design method provided in this embodiment;

[0028] Figure 2 is a schematic diagram of the PSD layer structure provided in this embodiment;

[0029] Figure 3 is a schematic diagram of the visual configuration provided in this embodiment;

[0030] Figure 4 is a schematic flowchart of a complete graphical interface design method provided in this embodiment;

[0031] Figure 5 is a schematic flowchart of another complete graphical interface design method provided in this embodiment;

[0032] Figure 6 is a schematic diagram of the structure of a graphical interface design transposition provided in this embodiment;

[0033] Figure 7 is a schematic diagram of an electronic device provided in this embodiment. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0034] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0035] It should be noted that when reconstructing the design draft, there may be slight differences in some pictures or texts, which may lead to repeated development, increased costs, low reusability and high costs. If the design draft is directly templated during the first development to improve reusability and reduce costs, only the interface layout can be fixed, and it is uncertain whether it will be used later. When there are some differences, it is necessary to reconstruct or develop again, resulting in inflexibility, poor maintainability and low applicability. If the design draft is directly dragged and dropped according to the low-code platform to generate the interface to improve applicability, the obtained interface is difficult to meet the requirements at the initial design. Or, the design draft is restored with one key according to the platform to improve reusability and reduce costs. However, these platforms all generate HTML download files. However, the elements in HTML are still static pictures and texts, and still cannot achieve strong interface reconstruction interaction and underlying conversion processing, such as simple form input box elements, button jumps, animation effects, font support, and association with the database after modifying data, etc., with low interactivity.

[0036] Based on this, the present invention provides a graphical interface design method, device, equipment and storage medium, which does not directly perform HTML drawing restoration, but converts each element into componentized data during the design draft parsing, and then uses a renderer to render it into an interface, which can meet the conversion during the design draft restoration and reconstruction, and can also enhance the interface reconstruction interaction and digital storage, configuration and platformization of the interface reconstruction, thereby improving the interactivity and maintainability of the design draft reconstruction, reducing the reconstruction cost of similar design drafts, and improving the reuse rate and applicability of similar design draft reconstruction. In order to better illustrate the technical solution of the present invention, it will be described in detail from the following embodiments.

[0037] Embodiment 1

[0038] See Figure 1 , which is a schematic flowchart of a graphical interface design method provided in this embodiment, including: steps S11 to S13, specifically:

[0039] Step S11: Parse the pre-generated design draft, obtain the parsing data of multiple target elements in the design draft, and sequentially convert the parsing data of the multiple target elements into component styles to obtain a data set with flattened data information.

[0040] In some embodiments, the design draft may specifically be any one of a Sketch file design document (view structure), a PSD (Photoshop Document) file created by Photoshop software, or a PDD (Photo Deluxe Document) file.

[0041] It should be noted that in the existing related technologies, the design draft is directly parsed through a toolkit (such as Node.js) to obtain the parsing result of the design draft. This parsing result is a tree-shaped data structure, and then the tree-shaped data structure is traversed in depth-first order to obtain the hierarchical information and parsing data of the leaf nodes. In fact, the toolkit reads the layer tree of the design draft from top to bottom, obtains sibling layers and child layers to construct a tree-shaped data structure, and then traverses the tree-shaped data structure to obtain the leaf layers.

[0042] In some embodiments, the pre-generated design draft is parsed to obtain the parsing data of multiple target elements in the design draft, including: performing layer parsing on the layer tree of the pre-generated design draft from bottom to top to obtain the traversal order of multiple elements in the design draft and the parsing data corresponding to the multiple elements respectively, taking the multiple leaf nodes of the layer tree as the multiple target elements, and filtering out the parsing data corresponding to the multiple target elements from the traversal order.

[0043] In some embodiments, when performing layer parsing on the layer tree of the pre-generated design draft from bottom to top, the range of elements in the layer tree is divided by element boundaries.

[0044] In some embodiments, the layer tree of the design draft is numbered from 0 from bottom to top through the itemIndex property of the Action Manager (AM).

[0045] It should be noted that all actions in the design draft are scheduled and executed through the Action Manager (AM); the element boundary is a hidden layer in the design draft used to identify the element boundary.

[0046] In some embodiments, when performing layer parsing on the layer tree of the pre-generated design draft from bottom to top, the information of three types of element nodes is parsed, namely group, image, and text information, and these three types of information constitute the layer tree.

[0047] In some embodiments, filtering out the parsing data corresponding to multiple target elements from the traversal order includes: sequentially reading elements and counting according to the reverse order of the traversal order, taking the elements before the element boundary in the reverse order as the target elements, taking the count corresponding to the target elements as the hierarchy, and obtaining the parsing information of the target elements; the parsing data includes: hierarchy and parsing information.

[0048] In some embodiments, referring to Table 1, it is the parsing information table of the target elements provided in this embodiment. According to Table 1, the parsing information includes 7 data, namely type, left, top, text, width, height, and name, which are used to identify the node type, locate the position of the canvas according to the left offset, locate the position of the canvas according to the top offset, display text, limit the width of the canvas, limit the height of the canvas, and the node name respectively.

[0049] It should be noted that when reading elements in sequence and counting according to the traversal order, for the parsed and restored structure, only the parsing information of the leaf nodes of the layer tree needs to be obtained, and these parsing information are defined when the design draft is generated.

[0050] In some embodiments, the target element is the 1 element immediately adjacent to the element boundary in reverse order.

[0051] In some embodiments, the parsing information and traversal order of the layer tree of the design draft are obtained through AM.

[0052] In some embodiments, reading elements in sequence and counting includes: reading elements in sequence. If the element is an element boundary, subtract the number of element boundaries from the count of the element boundary, and use the obtained result as the count of the next target element until the counting of all target elements is completed; where the target elements include: picture elements and text elements.

[0053] In some embodiments, referring to Figure 2 , it is a schematic diagram of the PSD layer structure provided in this embodiment. In the Figure 2 PSD layer structure, each layer has a name. In the layer named "Product Introduction", it contains: explanatory text and pictures. The pictures contain swipe carousels. The swipe carousel includes: left arrow, right arrow, left picture, right picture, and middle picture. The left arrow is used to replace the right picture with the middle picture and the middle picture with the left picture after clicking. The right arrow is used to replace the middle picture with the right picture and the left picture with the middle picture after clicking and then display.

[0054] Table 1 Parsing Information Table of Target Elements

[0055]

[0056] If for Figure 2Traversing the layer tree from bottom to top, the traversal order can be obtained: element boundary, element boundary, middle picture, element boundary, left picture, element boundary, right picture, element boundary, left arrow, element boundary, right arrow, carousel, element boundary, picture, element boundary, description text, and product introduction. Reversing the order gives: product introduction, description text, element boundary, picture, carousel, element boundary, right arrow, element boundary, left arrow, element boundary, right picture, element boundary, left picture, element boundary, middle picture, element boundary, and element boundary. If the background layer is counted starting from 0, according to the counting rule of the target element, counting the reversed order, the count of the product introduction is 1, the count of the description text is 2, the count of the picture is 2, the count of the carousel is 3, the count of the right arrow is 4, the count of the left arrow is 4, the count of the right picture is 4, the count of the left picture is 4, and the count of the middle picture is 4. The selected target elements include: description text, left arrow, right arrow, left picture, right picture, and middle picture, corresponding to levels 2, 4, 4, 4, 4, and 4 respectively. Figure 2 The target elements in

[0057] It is worth noting that the element boundary is not visible in the layer tree. Compared with the existing related technologies, in this embodiment, only the parsing information of multiple elements needs to be obtained when reading the layer tree of the design draft, and by directly calculating based on the traversal order from bottom to top, and identifying the range of each element by obtaining the element boundary, the layer of each element can be calculated, greatly reducing the time complexity of constructing and traversing the tree structure, thereby improving the parsing efficiency, and further improving the efficiency of reconstructing the design draft.

[0058] In addition, obtaining the layer of each target element in this embodiment is mainly to facilitate the reconstruction of similar design drafts. When reconstructing, directly read the pre-stored design draft, and then directly modify some parameters (including the level) and then directly reconstruct, thereby reducing the cost of reconstructing the design draft and improving the reusability, applicability, and efficiency of reconstructing similar design drafts.

[0059] In some embodiments, screening out the parsing data corresponding to multiple target elements from the traversal order further includes: directly reading the elements in sequence according to the traversal order and counting. Taking the 1 element immediately following the element boundary as the target element, using the count corresponding to the target element as the level, and obtaining the parsing information of the target element.

[0060] In some embodiments, the parsing data of multiple target elements is successively converted into component styles to obtain a data set with flattened data information, including: successively converting the names in the parsing data of multiple target elements into component styles displayed on the interface according to the type of the target element and the conversion protocol of the predefined component naming, so as to obtain a data set with flattened data information.

[0061] In some embodiments, referring to Table 2, it is a data set table of flattened data information provided in this embodiment. According to Table 2, the data set includes: component name, component attribute items, component styles, component dynamic data binding, and component events; among them, the component name conforms to the naming specification of the component library that conforms to HTML5. The component name, component attribute items, and component styles are mandatory items, and the remaining component dynamic data binding and component events are non-mandatory items. It should be noted that each component must have mandatory items.

[0062] In some embodiments, specific parameters are set according to Table 2, including:

[0063] "componentName":"FmImage",

[0064] "label":"Picture",

[0065] "styles":{

[0066] "position":"absolute",

[0067] "top":0,

[0068] "zIndex":1,

[0069] "transform":"none",

[0070] "opacity":1,

[0071] "borderRadius":8,

[0072] "width":375,

[0073] "height":1285,

[0074] "left":0,

[0075] "name":"Background",

[0076] "src":"https: / / acsp-static.sf-express.com / sfoss / sfosspublic001 / Lowcode / .168353420023099:png"},

[0077] "props": {"src": "https: / / acsp-static.sf-express.com / sfoss / sfosspublic001 / Lowcode / .168353420023126.png"},

[0078] "model": {"src": ""},

[0079] Among them, the component is a picture, and the label is the label of the component, which is set as the picture.

[0080] Table 2 Data information flattened data set table

[0081]

[0082] In some embodiments, according to the type of the target element and the pre-defined conversion protocol for component naming, the naming in the parsed data of multiple target elements is sequentially converted into the component styles displayed on the interface, and the converted data is filled according to the template of the script file to obtain a flattened data set of data information.

[0083] In some embodiments, the template of the script file is in JSON format.

[0084] Step S12: Visualize and configure the components in the data set according to the pre-defined default property values to obtain a set of components with two-way binding between styles and components.

[0085] In some embodiments, visualizing and configuring the components in the data set according to the pre-defined default property values to obtain a set of components with two-way binding between styles and components includes: building multiple property configuration items into a visual dynamic form, and selecting the corresponding default property values from the dynamic form to configure the components in the data set in sequence, to obtain a set of components with two-way binding between styles and components and two-way binding between components and the database; among them, at least one of the multiple property configuration items is linked to the database.

[0086] In some embodiments, building multiple property configuration items into a visual dynamic form and selecting the corresponding default property values from the dynamic form to configure the components in the data set in sequence includes: building the multiple property configuration items of the data set into a dynamic form on the management platform, converting the data set into an object data type, and sequentially selecting at least one default property value from the jump path of the button component in the dynamic form, the playback interval of the carousel component, the type of the input box, and the default property values corresponding to the text type and the picture type to configure the corresponding properties in the object data type.

[0087] In some embodiments, visual configuration of components in a data set includes: automatically completing component information or performing operations such as jumping, etc. At the same time, multiple property configuration items are assembled into a dynamic form on the management platform to enhance interface interaction. Data interaction can be modified to the database, including: adding a default jump address or animation to a button, adding a playback interval to a carousel component, setting a default value for the type of input box to facilitate form response, setting default values for text types and picture types, etc.; among them, the set default values can be read from the database.

[0088] It is worth noting that according to the property configuration items corresponding to the defined default values (such as: the jump path of the button or the playback interval of the carousel, etc.), a dynamic form is made based on the component property configuration items for component configuration on the management platform. That is, changing the value of this component property on the platform changes the information, and the modified interface form data will also be displayed on the interface. Real-time changes are shown for the two-way binding of style and component and the two-way binding of component and database, thereby improving the interactivity of the reconstructed interface.

[0089] In some embodiments, referring to Figure 3 , is a schematic diagram of the visual configuration provided in this embodiment. Figure 3 In, when the text component is selected, in the visual dynamic form on the right, the content of the text component is displayed. The content, position, font, font size, alignment, and transparency of the component text can be modified through the dynamic form. Among them, X is the left offset, Y is the upper offset, W is the canvas width, and H is the canvas height, all of which are set in pixels.

[0090] It is worth noting that the dynamic form is related to the obtained data set. The number of properties contained in the data set determines the establishment of corresponding property configuration items for visual configuration. Therefore, the content of the dynamic forms of different data sets will not be exactly the same.

[0091] In some embodiments, after obtaining the component set with two-way binding of style and component, it further includes: converting the component set into a first script file for storage. When a similar interface similar to the first script file needs to be generated, read the pre-stored second script file, adjust the second script file to obtain a similar script file, and render the similar script file to generate a reconstructed similar interface.

[0092] In this embodiment, by storing the script file of the component set, when reconstructing similar design drafts, it is convenient to directly read the stored design drafts and only need to make adjustments to obtain a script for rendering, and an interactive interface can be obtained by one-key restoration, thereby improving the reusability and applicability of reconstructing similar design drafts, reducing development costs, and further improving the efficiency of reconstructing similar design drafts.

[0093] In some embodiments, the design draft is parsed to obtain the parsing information as shown in FIG. 1. The parsing data (including the parsing information) is converted to obtain a data set in JSON format as shown in Table 2, and the data set is converted to an object data type for visual configuration to obtain a component set. Then, the component set is converted to JSON format and stored in the server.

[0094] In some embodiments, the first script file is stored in the backend service for configuration management. The data can be modified and adjusted according to the configuration to obtain a new interactive interface.

[0095] In some embodiments, the first script file is a script file in JSON format.

[0096] In some embodiments, the JSON format script file is stored in the server. When rendering is required, the JSON format script file is read from the server for rendering. When maintaining and modifying the JSON format script file, operations such as addition, deletion, modification, and query are performed after reading through the backend.

[0097] In some embodiments, the second script file is adjusted to obtain a similar script file, including: adjusting the hierarchy in the second script file, or visually adjusting the attributes in the second script file according to the default attribute values to obtain a similar script file.

[0098] It should be noted that the first script file is an un-stored script file, and the second script file is read from the set of stored script files, which can be read from the server.

[0099] Step S13: Sequentially read the data to be rendered in the component set and render the data to be rendered to generate a reconstructed target interface.

[0100] In some embodiments, sequentially reading the data to be rendered in the component set and rendering the data to be rendered to generate a reconstructed target interface includes: sequentially traversing the data to be rendered in the component set according to the injected component package, and rendering the data to be rendered according to the injected rendering plugin until all the data to be rendered is read, generating a reconstructed target interface.

[0101] In some embodiments, when rendering, first inject the component package and the rendering plugin into the project. The renderer obtains the component data for component rendering, and sequentially reads the style and component attribute data to convert them into the corresponding attributes and styles of HTML.

[0102] It should be noted that sequentially reading the data to be rendered is a flat search, and only one traversal is required to complete the reading of all the data to be rendered.

[0103] In some embodiments, on the design draft design code platform, the uploaded design draft is parsed, and combined with the component library, corresponding components are converted during the parsing, the interface reconstruction data of the design draft is obtained through parsing, and then the parsed data is converted into a component data set and stored in the backend. Combining with the low-code platform to render and draw the parsed data, the interface component data interaction can be edited and enhanced again, and then the data is saved again; it is also combined with the configuration platform to configure and save the component data set in the json data mode; the front end reads the stored component set data, and then directly uses the renderer to draw the data into an HTML interface.

[0104] In this embodiment, after parsing the design draft, the obtained data set is visually configured according to the default attribute values, which improves the efficiency of converting the design draft elements into styles. And through visual configuration, a component set with two-way binding of styles and components can be obtained, which can improve the strong interface reconstruction interaction and underlying conversion processing capabilities. When rendering according to the component set, the interactivity of the reconstructed interface is thus improved.

[0105] Embodiment 2

[0106] See Figure 4 , which is a schematic flow diagram of a complete graphical interface design method provided by this embodiment.

[0107] In the figure, the template of the script file and the design draft are obtained simultaneously. By parsing the design draft, the obtained parsed data is filled according to the template of the script file; specifically, the layer tree of the design draft is parsed to obtain the parsed data, and then the parsed data is converted into a data set, and the data set is converted into an object data type, and visually configured according to the dynamic form to obtain a component set. The components are combined and then integrated according to the template of the script file to obtain the data based on the script file.

[0108] It should be noted that the filled script file is still a set of component data and can be used on the low-code platform. The low-code platform can be a Simple Direct Media Layer (SDL) system. The SDL system can control images, sounds, and input / outputs. In this embodiment, the script file is used as the SDL data that can be used by the SDL system. After injecting the component package and rendering plug-in on the low-code platform, the low-code SDL data is rendered.

[0109] In this embodiment, the design draft is directly parsed, and the obtained object data type is visually configured and then converted into a script file, which can improve the interactivity of the design draft reconstruction. Combining with the low-code platform for rendering can reduce the cost of the design draft reconstruction.

[0110] Embodiment 3

[0111] Based on Embodiment 1, refer to Figure 5 , which is a schematic flowchart of another complete graphical interface design method provided in this embodiment, including: Steps S21 to S26, specifically:

[0112] Step S21, obtain the design draft. Specifically, upload the PSD file.

[0113] Step S22, parse the design draft. Specifically, parse the design draft from bottom to top to obtain parsing data; the parsing data includes: parsing information and traversal order.

[0114] Step S23, obtain components. Specifically, it includes: calculating layers, where the layer of the target element is calculated through the traversal order; parsing elements, where the obtained parsing information of each target element is filtered according to the traversal order; converting elements, where according to the type of the target element and the predefined conversion protocol for component naming, the naming of the parsing information of multiple target elements is sequentially converted into the component styles displayed on the interface; integrating components, where after converting the parsing information of multiple target elements into component styles, the component styles and hierarchies of each target element are integrated into a set and converted into an object data type for visual configuration; storing components, where the configured object data type is converted into a script file and then stored in the server.

[0115] Step S24, read the script file. Specifically, read the script file similar to the design draft to be reconstructed from the server, and obtain the similar script file by modifying the hierarchy or adjusting the component set of this file through a visual dynamic form.

[0116] Step S25, store the script file. Specifically, save the similar script file to the server, which can increase the diversity of the design draft and is also convenient for unified management of different script files at the backend, including: adding, deleting, modifying, or querying.

[0117] Step S26, render the script file. Specifically, according to the injected component package, sequentially traverse the data to be rendered in the component set corresponding to the similar script file, and render the data to be rendered according to the injected rendering plugin until all the data to be rendered is read, generating a reconstructed interactive interface.

[0118] The difference between this embodiment and Embodiment 2 lies in the reconstruction of similar design drafts. Based on the fact that the design draft has been parsed and stored, only need to take out the script file similar to the design draft to be reconstructed from the server and make simple adjustments to quickly realize the reconstruction of similar design drafts, thereby saving development costs and improving the reconstruction efficiency, interactivity, reusability, and applicability of the design draft. And, store the adjusted script file again, which is convenient for unified management of all script files at the backend and further improves the efficiency of design draft reconstruction.

[0119] Example 4

[0120] See Figure 6 , which is a schematic structural diagram of the transposition of a graphical interface design provided by this embodiment, including: a parsing module 41, a configuration module 42, and a rendering module 43.

[0121] It should be noted that the parsing module 41 is mainly used to parse the design draft and convert the styles, and transmit the obtained data set to the configuration module 42; after receiving the data set transmitted by the parsing module 41, the configuration module 42 performs visual configuration on the data set and transmits the obtained component set to the rendering module 43; after receiving the component set transmitted by the configuration module 42, the rendering module 43 performs rendering to generate an interactive target interface.

[0122] The parsing module 41 is used to parse the pre-generated design draft, obtain the parsing data of multiple target elements in the design draft, and sequentially convert the parsing data of the multiple target elements into component styles to obtain a flattened data set of data information.

[0123] In some embodiments, parsing the pre-generated design draft to obtain the parsing data of multiple target elements in the design draft includes: performing layer parsing on the layer tree of the pre-generated design draft from bottom to top to obtain the traversal order of multiple elements in the design draft and the parsing data respectively corresponding to the multiple elements, using the multiple leaf nodes of the layer tree as the multiple target elements, and filtering out the parsing data corresponding to the multiple target elements from the traversal order.

[0124] In some embodiments, when performing layer parsing on the layer tree of the pre-generated design draft from bottom to top, the range of elements in the layer tree is divided by element boundaries.

[0125] In some embodiments, the layer tree of the design draft is numbered from 0 from bottom to top through the itemIndex attribute of the Action Manager (AM).

[0126] In some embodiments, filtering out the parsing data corresponding to the multiple target elements from the traversal order includes: sequentially reading elements and counting according to the reverse order of the traversal order, using the elements before the element boundary in the reverse order as the target elements, using the count corresponding to the target elements as the level, and obtaining the parsing information of the target elements; the parsing data includes: level and parsing information.

[0127] In this embodiment, the design draft is parsed from bottom to top to obtain the traversal order. By filtering out the target elements from the traversal order, the final parsed data is obtained. Compared with the tree structure obtained by parsing the design draft and then traversing it from top to bottom, the present invention does not need to establish a tree structure and traverse the tree structure to obtain leaf nodes, thus greatly improving the efficiency of parsing the design draft, and further improving the efficiency of reconstructing the design draft.

[0128] In some embodiments, as shown in Table 1, it is the parsing information table of the target elements provided by this embodiment.

[0129] In some embodiments, the element immediately adjacent to the element boundary in the reverse order is used as the target element.

[0130] In some embodiments, the parsing information and traversal order of the layer tree of the design draft are obtained through AM.

[0131] In some embodiments, the elements are read sequentially and counted, including: reading the elements sequentially. If the element is an element boundary, the count of the element boundary is subtracted by the number of element boundaries, and the obtained result is used as the count of the next target element until the counting of all target elements is completed; wherein, the target elements include: picture elements and text elements.

[0132] It should be noted that compared with the existing related technologies, in this embodiment, only the parsing information of multiple elements needs to be obtained when reading the layer tree of the design draft, and by directly calculating the traversal order from bottom to top, and identifying the range of each element by obtaining the element boundary, the layer of each element can be calculated, greatly reducing the time complexity of constructing the tree structure and traversing the tree structure, thereby improving the parsing efficiency, and further improving the efficiency of reconstructing the design draft.

[0133] In addition, the layer of each target element is obtained in this embodiment mainly to facilitate the reconstruction of similar design drafts. When reconstructing, directly read the pre-stored design draft, and then directly modify some parameters (including the hierarchy) and then directly reconstruct, thereby reducing the cost of reconstructing the design draft, and improving the reusability, applicability and efficiency of reconstructing similar design drafts.

[0134] In some embodiments, filtering out the parsed data corresponding to multiple target elements from the traversal order further includes: directly reading the elements sequentially and counting according to the traversal order, using the element immediately adjacent to the element boundary as the target element, using the count corresponding to the target element as the hierarchy, and obtaining the parsing information of the target element.

[0135] In some embodiments, the parsing data of multiple target elements is sequentially converted into component styles to obtain a data set with flattened data information, including: according to the type of the target element and the predefined conversion protocol for component naming, the naming in the parsing data of multiple target elements is sequentially converted into component styles displayed on the interface to obtain a data set with flattened data information.

[0136] In some embodiments, referring to Table 2, it is a data set table with flattened data information provided in this embodiment. According to Table 2, the data set includes: component name, component property items, component styles, component dynamic data binding, and component events; among them, the component name conforms to the naming specification of the HTML5 component library. The component name, component property items, and component styles are mandatory items, and the remaining component dynamic data binding and component events are non-mandatory items. It should be noted that each component must have mandatory items.

[0137] In some embodiments, according to the type of the target element and the predefined conversion protocol for component naming, the naming in the parsing data of multiple target elements is sequentially converted into component styles displayed on the interface, and the converted data is filled in according to the template of the script file to obtain a data set with flattened data information.

[0138] In some embodiments, the template of the script file is in JSON format.

[0139] The configuration module 42 is used to visually configure the components in the data set according to the predefined default attribute values to obtain a component set with two-way binding of styles and components.

[0140] In some embodiments, visually configuring the components in the data set according to the predefined default attribute values to obtain a component set with two-way binding of styles and components includes: building multiple attribute configuration items into a visual dynamic form, and selecting the corresponding default attribute values from the dynamic form to configure the components in the data set in sequence to obtain a component set with two-way binding of styles and components and two-way binding of components and the database; among them, at least one of the multiple attribute configuration items is linked to the database.

[0141] In some embodiments, building multiple attribute configuration items into a visual dynamic form and selecting the corresponding default attribute values from the dynamic form to configure the components in the data set in sequence includes: building the multiple attribute configuration items of the data set into a dynamic form on the management platform, converting the data set into an object data type, and sequentially selecting at least one default attribute value from the jump path of the button component in the dynamic form, the playback interval of the carousel component, the type of the input box, and the default attribute values corresponding to the text type and the picture type to configure the corresponding attributes in the object data type.

[0142] In some embodiments, visual configuration of components in a data set includes: automatically completing component information or performing operations such as jumping, and at the same time, building multiple property configuration items into a dynamic form on the management platform to enhance interface interaction. Data interaction can be modified to the database, including: adding a default jump address or animation to buttons, adding a playback interval to carousel components, setting default values for the types of input boxes to facilitate form response, setting default values for text types and image types, etc.; among them, the set default values can be read from the database.

[0143] It is worth noting that according to the property configuration items corresponding to the defined default values (such as the jump path of buttons or the playback interval of carousels), and making a dynamic form according to the component property configuration items for component configuration on the management platform. It is equivalent to changing the value of this component property on the platform, and the information is changed. When the interface form data is modified, the interface will also be displayed. Real-time changes are shown for the two-way binding of styles and components and the two-way binding of components and the database, thereby improving the interactivity of the reconstructed interface.

[0144] In some embodiments, refer to Figure 3 , which is a schematic diagram of the visual configuration provided in this embodiment. Figure 3 In, when the text component is selected, in the visual dynamic form on the right, the content of the text component is displayed, and the content, position, font, font size, alignment, and transparency of the component text can be modified through the dynamic form.

[0145] In some embodiments, after obtaining the component set with two-way binding of styles and components, it further includes: converting the component set into a first script file for storage. When a similar interface similar to the first script file needs to be generated, read the pre-stored second script file, adjust the second script file to obtain a similar script file, and render the similar script file to generate a reconstructed similar interface.

[0146] In some embodiments, the design draft is parsed to obtain the parsing information as shown in Figure 1, the parsing data (including parsing information) is converted to obtain a data set in json format as shown in Table 2, and the data set is converted to an object data type for visual configuration to obtain a component set, and then the component set is converted to json format and stored on the server.

[0147] In some embodiments, the first script file is stored in the backend service to form configuration management, and the data can be modified and adjusted according to the configuration to obtain a new interactive interface.

[0148] In some embodiments, the first script file is a script file in json format.

[0149] In some embodiments, the script file in JSON format is stored on the server. When rendering is required, the script file in JSON format is read from the server for rendering. When maintaining and modifying the script file in JSON format, operations such as addition, deletion, modification, and query are performed after reading through the backend.

[0150] In some embodiments, adjusting the second script file to obtain a similar script file includes: adjusting the hierarchy in the second script file, or visually adjusting the attributes in the second script file according to the default attribute values to obtain a similar script file.

[0151] It should be noted that the first script file is an un-stored script file, and the second script file is read from the set of stored script files, which can be read from the server's stored script files.

[0152] The rendering module 43 is used to sequentially read the data to be rendered in the component set and render the data to be rendered to generate a reconstructed target interface.

[0153] In some embodiments, sequentially reading the data to be rendered in the component set and rendering the data to be rendered to generate a reconstructed target interface includes: sequentially traversing the data to be rendered in the component set according to the injected component package, and rendering the data to be rendered according to the injected rendering plugin until all the data to be rendered is read, generating a reconstructed target interface.

[0154] In some embodiments, when rendering, first inject the component package and the rendering plugin into the project. The renderer obtains the component data for component rendering, and sequentially reads the style and component attribute data, and converts them into the corresponding attributes and styles of HTML.

[0155] It should be noted that sequentially reading the data to be rendered is a flat search, and only one traversal is required to complete the reading of all the data to be rendered.

[0156] In this embodiment, the parsing module 41 parses the design draft, and transmits the obtained data set to the configuration module 42. The configuration module 42 visually configures the data set according to the default attribute values to obtain a component set with two-way binding of styles and components, which can improve the strong interface reconstruction interaction and underlying conversion processing capabilities. When the rendering module 43 renders the component set, the interactivity of the reconstructed interface is thus improved.

[0157] Embodiment 5

[0158] See Figure 7, which is a schematic diagram of an electronic device provided in this embodiment. The electronic device includes: a memory 51, a processor 52, and a computer program stored on the memory 51 and executable on the processor 52. When the processor 52 executes the computer program, it implements the steps of the graphical interface design method provided in Embodiment 1. Among them, the computer program is obtained through a communication interface 53, and data transmitted and interacted with the memory 51 and the processor 52 is transmitted through a communication bus 54.

[0159] When the graphical interface design method described in the first aspect is integrated into the electronic device in this embodiment, it can quickly reconstruct the on-site design draft through various electronic devices and quickly feedback on the reconstructed target interface, with stronger scalability.

[0160] Embodiment 6

[0161] This embodiment provides a readable computer storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements the steps of the graphical interface design method provided in Embodiment 1.

[0162] When the graphical interface design method described in the first aspect is stored in the storage medium in the form of a program in this embodiment, it can perform operations such as quick reconstruction on different operating systems and terminals by running or reading the executable program in the storage medium, applicable to more operating systems and different application platforms, with stronger scalability.

[0163] Those skilled in the art should understand that the embodiments of the present application can also provide a computer program product. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk memories, CD-ROMs, optical memories, etc.) containing computer-usable program codes.

[0164] This application is described with reference to the flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, as well as the combination of flows and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing devices generate means for implementing the functions specified in Figure 1 one process or multiple processes and / or blocks Figure 1 one block or multiple blocks.

[0165] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to work in a particular manner, such that the instructions stored in the computer-readable memory produce a manufacture including an instruction device that implements the functions specified in one or more processes and / or blocks Figure 1 of the process or processes and / or boxes Figure 1 or boxes.

[0166] These computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, whereby the instructions executed on the computer or other programmable apparatus provide steps for implementing the functions specified in one or more processes and / or blocks Figure 1 of the process or processes and / or boxes Figure 1 or boxes.

[0167] The foregoing is only a preferred embodiment of the present invention, and it should be noted that for those of ordinary skill in the art, without departing from the technical principle of the present invention, several improvements and modifications can be made, and these improvements and modifications should also be regarded as the protection scope of the present invention.

Claims

1. A method for graphical interface design, characterized in that, Including: Parsing a pre-generated design draft to obtain parsing data of multiple target elements in the design draft, and sequentially converting the parsing data of the multiple target elements into component styles to obtain a data set with flattened data information; Visually configuring the components in the data set according to predefined default attribute values to obtain a component set with two-way binding between styles and components; Sequentially reading the data to be rendered in the component set and rendering the data to be rendered to generate a reconstructed target interface.

2. The graphical interface design method according to claim 1, wherein The visually configuring the components in the data set according to predefined default attribute values to obtain a component set with two-way binding between styles and components includes: Constructing multiple attribute configuration items into a visual dynamic form, and sequentially configuring the components in the data set with corresponding default attribute values selected from the dynamic form to obtain a component set with two-way binding between styles and components and two-way binding between components and the database; wherein, at least one of the multiple attribute configuration items is linked to the database.

3. The graphical interface design method according to claim 2, wherein The constructing multiple attribute configuration items into a visual dynamic form and sequentially configuring the components in the data set with corresponding default attribute values selected from the dynamic form includes: Constructing the multiple attribute configuration items of the data set into a dynamic form, converting the data set into an object data type, and sequentially selecting at least one default attribute value from the jump path of the button component, the playback interval of the carousel component, the type of the input box, and the default attribute values corresponding to the text type and the image type in the dynamic form to configure the corresponding attributes in the object data type.

4. The graphical interface design method according to claim 1, wherein The parsing a pre-generated design draft to obtain parsing data of multiple target elements in the design draft includes: Performing layer parsing on the layer tree of the pre-generated design draft from bottom to top to obtain the traversal order of multiple elements in the design draft and the parsing data respectively corresponding to the multiple elements, using the multiple leaf nodes of the layer tree as multiple target elements, and filtering out the parsing data corresponding to the multiple target elements from the traversal order.

5. The graphical interface design method according to claim 4, characterized in that, The filtering out the parsing data corresponding to the multiple target elements from the traversal order includes: Sequentially reading and counting elements according to the reverse order of the traversal order, using the elements before the element boundary in the reverse order as target elements, using the count corresponding to the target elements as levels, and obtaining the parsing information of the target elements; the parsing data includes: levels and parsing information.

6. The graphical interface design method according to claim 5, wherein, The sequentially reading and counting elements includes: Sequentially reading elements. If the element is an element boundary, subtracting the number of the element boundary from the count of the element boundary, and using the obtained result as the count of the next target element until the counting of all target elements is completed; wherein, the target elements include: image elements and text elements.

7. The graphical interface design method according to claim 1, characterized in that After obtaining the component set with two-way binding between styles and components, it further includes: Convert the component set into a first script file for storage. When it is necessary to generate a similar interface similar to the first script file, read the pre-stored second script file, adjust the second script file to obtain a similar script file, and render the similar script file to generate a reconstructed similar interface.

8. The graphical interface design method according to claim 7, wherein The adjusting the second script file to obtain a similar script file includes: Adjusting the hierarchy in the second script file, or visually adjusting the attributes in the second script file according to the default attribute values to obtain a similar script file.

9. The graphical interface design method according to claim 1, wherein The sequentially converting the parsing data of multiple target elements into component styles to obtain a flattened data set of data information includes: According to the type of the target element and the predefined conversion protocol for component naming, sequentially convert the naming in the parsing data of multiple target elements into the component styles displayed on the interface to obtain a flattened data set of data information.

10. The graphical interface design method according to claim 1, characterized in that, The sequentially reading the data to be rendered in the component set and rendering the data to be rendered to generate a reconstructed target interface includes: According to the injected component package, sequentially traverse the data to be rendered in the component set and render the data to be rendered according to the injected rendering plugin until all the data to be rendered is read, and generate a reconstructed target interface.

11. A graphical interface design device, characterized in that, It includes: A parsing module, a configuration module, and a rendering module; wherein, The parsing module is used to parse the pre-generated design draft, obtain the parsing data of multiple target elements in the design draft, and sequentially convert the parsing data of multiple target elements into component styles to obtain a flattened data set of data information; The configuration module is used to visually configure the components in the data set according to the predefined default attribute values to obtain a component set with two-way binding of styles and components; The rendering module is used to sequentially read the data to be rendered in the component set and render the data to be rendered to generate a reconstructed target interface.

12. An electronic device, characterized in that, The electronic device includes: a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the steps of the graphical interface design method according to any one of claims 1-10 are implemented.

13. A readable computer storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, the steps of the graphical interface design method according to any one of claims 1-10 are implemented.

Images