Design manuscript generation method and device and design manuscript conversion method and device

Abstract

The embodiment of the invention discloses a design draft generation method and device and a design draft conversion method and device. The design draft generation method comprises the steps of obtaining a first design draft; monitoring an attribute triggering operation on the at least one custom component, and performing style configuration on a target design draft layer of the first design draft according to attribute information corresponding to the attribute triggering operation; monitoring a parameter setting operation triggered for the at least one layer name of the first design draft, and modifying the layer name of the target design draft according to at least one layer name custom parameter corresponding to the parameter setting operation; and generating a second design draft based on the configured and modified target design draft layer and the first design draft. According to the method, multiple visual design drafts are derived from a single design draft, the diversity of operation requirements is covered, the reusability of the first design draft is improved, the situation that a new design draft needs to be redesigned and generated every time the style is modified is avoided, and the design cost is reduced.

Description

TECHNICAL FIELD

[0001] Embodiments of the present application relate to the technical field of Internet, in particular to a design draft generation method and device, and a design draft conversion method and device. BACKGROUND

[0002] Currently, in the massive contribution scene of the platform, the design of the design draft faces two core contradictions:

[0003] (1) Imbalance between information transmission efficiency and platform aesthetic tone: Most existing covers excessively pursue information transmission efficiency, resulting in the lack of platform tone style. In order to meet the aesthetic needs of users, designers need to output 20+ style templates and the number is increasing, and the traditional manual development mode is under great pressure.

[0004] (2) Low iteration efficiency: Design draft style fine-tuning (such as element displacement, color adjustment, adding or deleting layers, etc.) needs to be modified based on the original code, and the average consumption of 0.2 person-days of development resources per modification. SUMMARY

[0005] In view of the above problems, the present application is proposed in order to provide a design draft generation method, a design draft conversion method, a device, a computing device, a computer storage medium and a computer program product which overcome the above problems or at least partially solve the above problems.

[0006] According to an aspect of an embodiment of the present application, a design draft generation method is provided, which is realized based on pre-configured custom components and layer name custom parameters. The method comprises:

[0007] Obtaining a first design draft;

[0008] Monitoring an attribute triggering operation on at least one custom component, and performing style configuration on a target design draft layer of the first design draft according to attribute information corresponding to the attribute triggering operation;

[0009] Monitoring a parameter setting operation triggered on at least one layer name of the first design draft, and modifying a target design draft layer name according to at least one layer name custom parameter corresponding to the parameter setting operation;

[0010] Generating a second design draft based on the configured and modified target design draft layer and the first design draft.

[0011] Further, the target design draft layer comprises one or more of the following layers: a picture layer, a color mask layer, and a title text layer, wherein the picture layer comprises a background picture layer, a main object layer, and a picture mask layer.

[0012] Further, the method further comprises: monitoring a parameter setting operation triggered by the object on the at least one layer name of the first design draft; and configuring a parameter of a target design draft layer name according to a layer name self-defined parameter corresponding to the parameter setting operation.

[0013] The method further comprises: monitoring a parameter setting operation triggered by the object on the background picture layer and / or the mask layer and / or the subject matter layer of the first design draft; and adding a layer name self-defined parameter to a preset position of the background picture layer name and / or the mask layer name and / or the subject matter layer name according to a layer name self-defined parameter corresponding to the parameter setting operation.

[0014] Further, the at least one self-defined component comprises one or more of the following components: a subject matter scaling component, a subject matter position component, a keyword following background color component, a keyword following subject matter component, a keyword projection following background color component, a keyword projection following subject matter component, a mask following background color component, and a mask following subject matter component.

[0015] Further, the layer name self-defined parameter comprises one or more of the following parameters: a picture filter parameter, a subject matter style parameter, a background style parameter, and a mask style parameter.

[0016] The picture filter parameter comprises one or more of the following parameters: desaturation, outline, blur, exposure, saturation, and contrast.

[0017] The subject matter style parameter comprises one or more of the following parameters: double color projection, ghosting, multi-layer outline and projection, desaturation, black and white high contrast and wave dot projection, retro, noise shadow.

[0018] The background style parameter comprises one or more of the following parameters: desaturation and dynamic blur, texture noise.

[0019] The mask style parameter comprises one or more of the following parameters: color mask right-left, color mask left-right, color mask up-down, color mask down-up, and grid half-tone.

[0020] According to another aspect of the embodiments of the present application, a design draft conversion method is provided. The method is performed by a design draft conversion plug-in, wherein the design draft conversion plug-in pre-defines a self-defined component style analysis method and a layer name self-defined parameter style analysis method. The method is used to convert a design draft generated by any one of the design draft generation methods in claims 1-5. The method comprises:

[0021] obtaining a second design draft to be converted;

[0022] In response to the design draft conversion request, a parsing method corresponding to the custom component and layer name custom parameter is called to convert the second design draft, to generate a corresponding HTML file, and an HTML link is generated according to the HTML file.

[0023] Further, the second design draft corresponds to an HTML file and an HTML link.

[0024] Further, the method further includes:

[0025] According to the layer type of the second design draft, a parsing method corresponding to the custom component and layer name custom parameter is called to parse the layer data of the second design draft, to obtain the CSS style and DOM structure of the HTML corresponding to the second design draft layer;

[0026] According to the layer hierarchy relationship in the layer data of the second design draft, the DOM structure is adjusted;

[0027] According to the CSS style, the adjusted DOM structure, and the HTML template, the HTML file corresponding to the second design draft is generated.

[0028] Further, the method further includes: receiving a scale conversion request carrying a converted scale;

[0029] According to the converted scale, the HTML file is converted in scale to generate a converted HTML file, and a converted HTML link is generated according to the converted HTML file, wherein the scale conversion before and after the scale conversion correspond to an HTML file and an HTML link respectively.

[0030] Further, the method further includes: in response to an effect preview triggering operation, calling the business logic in the HTML file to render the style, and displaying a preview image of the second design draft or the design draft after scale conversion.

[0031] Further, the method further includes: according to the displayed preview image of the second design draft or the design draft after scale conversion, performing a function test;

[0032] If the test fails, a preset prompt information is displayed for checking.

[0033] Further, the method further includes: in response to a re-generation operation, obtaining an updated second design draft, and in response to a design draft conversion request, converting the updated second design draft to generate a corresponding HTML file.

[0034] According to another aspect of the embodiments of the present application, a design draft generation device is implemented based on pre-configured custom component and layer name customization parameters, and the device comprises:

[0035] The acquisition module is configured to acquire the first design draft.

[0036] The monitoring module is configured to monitor attribute triggering operations on the at least one custom component, and monitor parameter setting operations triggered on the at least one layer name of the first design draft.

[0037] The processing module is configured to perform style configuration on a target design draft layer of the first design draft according to attribute information corresponding to the attribute triggering operations, and perform modification on a target design draft layer name according to at least one layer name customization parameter corresponding to the parameter setting operations.

[0038] The generation module is configured to generate a second design draft based on the target design draft layer and the first design draft after configuration and modification.

[0039] According to another aspect of the embodiments of the present application, a design draft conversion device is provided, which is deployed in a design draft conversion plug-in, wherein a custom component style analysis method and a layer name customization parameter style analysis method are pre-defined in the design draft conversion plug-in, the device is configured to convert a design draft generated by the design draft generation device of claim 13, and the device comprises:

[0040] The acquisition module is configured to acquire a second design draft to be converted.

[0041] The design draft conversion processing module is configured to, in response to a design draft conversion request, call analysis methods corresponding to the custom component and the layer name customization parameter to perform conversion processing on the second design draft, generate a corresponding HTML file, and generate an HTML link according to the HTML file.

[0042] According to still another aspect of the embodiments of the present application, a computing device is provided, which comprises a processor, a memory, a communication interface and a communication bus, the processor, the memory and the communication interface complete communication with each other through the communication bus.

[0043] The memory is configured to store at least one executable instruction, and the executable instruction causes the processor to perform operations corresponding to the design draft generation method or operations corresponding to the design draft conversion method.

[0044] According to still another aspect of the embodiments of the present application, a computer storage medium is provided, and the computer storage medium stores at least one executable instruction, and the executable instruction causes the processor to perform operations corresponding to the design draft generation method or operations corresponding to the design draft conversion method.

[0045] According to still another aspect of the embodiments of the present application, a computer program product is provided, which includes at least one executable instruction, and the executable instruction causes a processor to perform operations corresponding to the design draft generation method or perform operations corresponding to the design draft conversion method.

[0046] According to the scheme provided by the embodiments of the present application, the target design draft layer of the first design draft is configured with a style through at least one custom component, and the layer name of the target design draft layer of the first design draft is modified through at least one layer name custom parameter, so that the generated second design draft is a design draft with diversity, supports deriving multiple visual design drafts from a single design draft, breaks the static design constraint, covers the diversity of operation requirements, thereby improving the reusability of the first design draft, deriving diversified design drafts by configuring a random style accordingly, avoiding the need to redesign and generate a new design draft every time the style is modified, reducing the design cost, and solving the problem of low operation efficiency caused by the addition and update of design drafts in the prior art.

[0047] The above description is only a summary of the technical scheme of the embodiments of the present application, in order to more clearly understand the technical means of the embodiments of the present application, the embodiments of the present application can be implemented according to the content of the specification, and in order to make the above and other purposes, characteristics and advantages of the embodiments of the present application more obvious and easy to understand, the following specific embodiments of the embodiments of the present application are described. BRIEF DESCRIPTION OF DRAWINGS

[0048] Various other advantages and benefits will become apparent to those of ordinary skill in the art, upon reading the following detailed description of the preferred embodiments. The accompanying drawings are intended to depict only preferred embodiments of the application, and therefore should not be considered to narrow the scope of the present application. Rather, the entire disclosure including the descriptive text, the drawings, and the claims, should be considered to represent the full scope of the present application. In the drawings:

[0049] Figure 1 A flowchart of a design draft generation method according to an embodiment of the present application is shown;

[0050] Figure 2 A schematic diagram of a design draft configuration system;

[0051] Figure 3 A schematic diagram of a first design draft;

[0052] Figure 4 A schematic diagram of a second design draft of 16:9;

[0053] Figure 5 A flowchart of a design draft conversion method according to an embodiment of the present application is shown;

[0054] Figure 6A flowchart of a design draft conversion method according to another embodiment of the present application is shown;

[0055] Figure 7 A schematic diagram of a design draft conversion page is shown;

[0056] Figure 8 A schematic diagram of a conversion into a 4:3 design draft for rendering display is shown;

[0057] Figure 9 A schematic diagram of a second design draft of different styles for rendering is shown;

[0058] Figure 10 A schematic diagram of a design draft that fails the test and preset prompt information is shown;

[0059] Figure 11 A schematic diagram of a parsing framework of a design draft by a design draft conversion plug-in is shown;

[0060] Figure 12 A structural block diagram of a design draft generation apparatus according to an embodiment of the present application is shown;

[0061] Figure 13 A structural block diagram of a design draft conversion apparatus according to an embodiment of the present application is shown;

[0062] Figure 14 A structural schematic diagram of a computing device according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0063] Exemplary embodiments of the present disclosure will be described more fully hereinafter with reference to the accompanying drawings; however, they are not limited to the embodiments set forth herein but can be implemented in various forms. The present disclosure will be described herein with reference to individual embodiments, but combinations of these embodiments can also be used. The present disclosure should not be construed as being limited to the embodiments set forth herein; rather, they are provided to make the disclosure thorough and complete, and to fully convey the scope of the present disclosure to those skilled in the art.

[0064] First, the nomenclature related to one or more embodiments of the present application is explained.

[0065] D2C (design to code): design to code;

[0066] Background color: average color value of the background picture;

[0067] Subject color: average color value of the subject picture;

[0068] Operational data source: a way that can customize multiple fields, configure field data through a form, and then directly obtain data through a backend interface.

[0069] The inventors of the present application found that the existing design draft design and conversion scheme has the following shortcomings:

[0070] (1) Static design constraints:

[0071] a. The same design draft can only generate one visual scheme, the diversity tends to zero, and it cannot adapt to the changing operation needs.

[0072] (2) Lack of configuration capability (lack of style diversity)

[0073] a. The design draft layer attributes (such as text, color, layout) cannot be dynamically modified through configuration, and manual adjustment code needs to be developed.

[0074] b. Random styles (such as random strokes, filter combinations, etc.) cannot be generated through configuration to derive diversified templates, and the reusability is low.

[0075] (3) Business logic separation, lack of intelligent interaction capability

[0076] a. Dynamic interaction logic (interface request, content replacement, etc.) needs to be developed twice, and the logic trigger condition cannot be preset in the design draft.

[0077] b. It is not possible to realize intelligent dynamic association between layers (such as font color and background color linkage).

[0078] (4) Single scale adaptation:

[0079] a. Only a single scale (such as 16:9) is supported for export, and other scale design drafts need to be manually developed or redesigned. A single design draft requires development of 16:9 and 4:3 pages, and N templates result in 2N pages of development, acceptance, and testing workload.

[0080] (5) High verification and maintenance cost:

[0081] a. Lack of real-time visual preview capability of multi-scene mock data, design restoration verification is difficult, and design acceptance and testing cost is increased.

[0082] b. Template update needs to generate static pages again, and then manually add business logic, which is low in maintenance efficiency.

[0083] Figure 1 A flowchart of a design draft generation method according to an embodiment of the present application is shown, which is based on pre-configured custom components and layer name custom parameters, as shown in Figure 1 The method includes the following steps:

[0084] Step S101, obtaining a first design draft.

[0085] Generally, the design draft is designed by using the design tool, and thus, the first design draft can be the design draft just designed by using the design tool, or the design draft of the historical design. In this embodiment, a design draft generation page can be provided, which includes a design draft uploading button, and thus, the first design draft can be uploaded by triggering the design draft uploading button, so as to obtain the first design draft, or the design draft just designed by using the design tool is determined as the first design draft. The first design draft includes the basic information required to be transmitted by the design draft, but it can only generate one visual scheme and cannot adapt to the variable operation requirements. The first design draft in this embodiment can be a cover design draft or a design draft for transmitting other information.

[0086] In step S102, the attribute triggering operation on the at least one custom component is monitored, and the target design draft layer of the first design draft is configured in style according to the attribute information corresponding to the attribute triggering operation.

[0087] The custom component is a component designed to realize the diversity of the design draft, and various custom components can be designed according to the style requirements to be realized, so that when a design draft with different styles needs to be designed, the corresponding custom component can be selected according to the style requirements, and the attributes of the custom component are operated to realize the configuration of different styles.

[0088] Generally, when intelligent linkage is required between elements located on two different layers, or global unified control of elements is required, the custom component can be used for style configuration.

[0089] Therefore, whether the attribute triggering operation is performed on the at least one custom component is monitored in real time, for example, the attribute switch or the attribute point selection option can be set, and by default, the attribute switch is closed or the attribute point selection option is not selected. Then, if the corresponding style configuration is required, the attribute switch or the attribute point selection option of the at least one custom component can be operated, and the corresponding custom component is determined to be enabled by opening the attribute switch or selecting the attribute, so that the target design draft layer of the first design draft corresponding to the custom component can be determined, and then the target design draft layer of the first design draft is configured in style according to the attribute information corresponding to the attribute triggering operation.

[0090] The target design draft layer includes one or more of the following layers: a picture layer, a color mask layer, and a title text layer, wherein the picture layer includes a background picture layer, a main object layer, and a picture mask layer.

[0091] The at least one custom component includes one or more of the following components: a subject matter scaling component, a subject matter position component, a keyword following background color component, a keyword following subject matter component, a keyword projection following background color component, a keyword projection following subject matter component, a mask following background color component, and a mask following subject matter component. It should be noted that other custom components that can realize layer diversity are also included in the protection scope of the present application.

[0092] In step S103, a parameter setting operation triggered on at least one layer name of the first design draft is monitored, and the target design draft layer name is modified according to the at least one layer name custom parameter corresponding to the parameter setting operation.

[0093] Since the support capability of the custom component is limited and cannot completely cover the business demand for diversity, the layer name custom parameter can be used to supplement the demand for other styles. Therefore, when there is a demand for other styles, a layer name custom parameter can be added to at least one layer name of the first design draft. Specifically, a parameter setting operation triggered on at least one layer name of the first design draft is monitored in real time, the parameter setting operation carries a layer name custom parameter that is intended to be added and can monitor the target design draft layer of the first design draft, and therefore the layer name of the target design draft layer of the first design draft corresponding to the operation can be modified according to the layer name custom parameter. By modifying the layer name, the diversity of the layer style is realized, thereby realizing the diversity of a single design draft. The layer name custom parameter is a parameter that describes the layer style, which defines or modifies the visual effect applied to the layer by embedding a keyword representing a specific style effect in the layer name, thereby realizing dynamic modification of the design draft layer attributes (such as color, text, layout).

[0094] Specifically, the parameter setting operation triggered on the background picture layer and / or the mask layer and / or the subject matter layer of the first design draft by an object can be monitored, and the layer name custom parameter corresponding to the parameter setting operation is added to a preset position (for example, the back of the background picture layer name and / or the mask layer name and / or the subject matter layer name) of the background picture layer name and / or the mask layer name and / or the subject matter layer name.

[0095] The layer name custom parameter includes one or more of the following parameters: a picture filter parameter, a subject matter style parameter, a background style parameter, and a mask style parameter.

[0096] The picture filter parameter includes one or more of the following parameters: desaturation, outline, blur, exposure, saturation, contrast; the subject pattern parameter includes one or more of the following parameters: double color projection, ghosting, multi-layer outline and projection, desaturation, black and white high contrast and wave projection, retro, noise shadow; the background pattern parameter includes one or more of the following parameters: desaturation and dynamic blur, texture noise; the mask pattern parameter includes one or more of the following parameters: color mask right and left, color mask left and right, color mask up and down, color mask down and up, grid halftone. It should be noted that other parameters capable of realizing layer diversity not listed are also included in the protection scope of the present application.

[0097] In step S104, a second design draft is generated based on the target design draft layer after configuration and modification and the first design draft.

[0098] After the target design draft layer of the first design draft is configured with a pattern according to step S102, and the target design draft layer name is modified according to step S103, a second design draft can be generated based on the target design draft layer after configuration and modification and the first design draft. Figure 3 For the schematic diagram of the first design draft, the layers of the first design draft are configured by the method in the embodiment, and a 16:9 second design draft is generated Figure 4 as shown in the figure.

[0099] Since the target design draft layer is configured with a pattern by at least one custom component and the layer name of the target design draft layer is modified by at least one layer name custom parameter, the generated second design draft is a design draft with diversity and adapts to variable operation requirements, thereby improving the reusability of the first design draft, and generating diversified design drafts with random patterns by corresponding configuration, avoiding the need to redesign and generate a new design draft every time the pattern is modified, and reducing design cost.

[0100] Figure 2 For the schematic diagram of the design draft configuration system, as shown in Figure 2 , the right part of Figure 2 indicates that the design draft includes the following layers: background picture layer, mask layer (the mask layer includes picture mask layer and color mask layer), subject layer and title text layer, wherein the title text is composed of regular title and keywords (usually including 5 layers: title background style layer, regular title background style layer, regular title style layer, keyword style layer and keyword background style layer, wherein the regular title style layer and the keyword style layer are the layers that must be included in each design draft, and the other three layers can be added as needed). Figure 2The left part of the figure shows the configuration function of the design draft diversity, mainly including: layer basic configuration function, custom component, and layer name adding custom parameters.

[0101] Generally, the first design draft contains background picture layer, mask layer (mask layer contains picture mask layer and color mask layer), main object layer, and title text layer. The layer style of the first design draft is processed by the layer basic configuration function. In order to realize the diversity of a single design draft, custom components and layer name adding custom parameters can be used to realize the diversity of various layer styles, thereby generating a second design draft.

[0102] For example, the layer name adding layer name custom parameters can be used to add some filter parameters and background random style layer name custom parameters to the layer name of the background picture layer, so as to realize the superposition and random transformation of various styles.

[0103] For the mask layer, custom components can be used to control whether the mask follows the background color or whether the mask follows the main color. The custom component sets the attribute switch. When the attribute switch is turned on, it is considered that the mask color following is turned on, and the color of the mask will change accordingly, which is not a single color value. In addition, filter parameters and random styles can be added to the mask layer name, similar to the background style randomness and diversity of the background picture layer.

[0104] The main object layer can set its position and whether to turn on the zoom through the custom component. In addition, layer custom name parameters can be added to its layer name, such as filter parameters and main object random styles (main object random styles total 13), to meet the rich diversity requirements.

[0105] The title text layer (title text = regular title + keyword) mainly functions in identifying the number of title lines contained in the design draft, as well as the title position and maximum width and height. Regular title style and keyword style layer are additionally added to express the styles of the two types of titles respectively, so as to distinguish them. If you want to add background style to the title, you can optionally add: title background style layer, regular title background style layer, or keyword background style layer. In addition, keywords, as information that needs to be highlighted and expressed in the template, can also use custom components to control whether the color of the keyword follows the background color or the main color, and whether the color of the keyword projection follows the background color or the main color, to realize the diversity of the keyword and its projection color in a single template.

[0106] According to the design draft generation method provided in the embodiments of the present application, the target design draft layer of the first design draft is configured with styles through at least one custom component, and the layer name of the target design draft layer of the first design draft is modified through at least one layer name custom parameter, so that the generated second design draft is a design draft with diversity, supports deriving multiple visual design drafts from a single design draft, breaks the static design constraint, covers the diversity of operation requirements, thereby improving the reusability of the first design draft, generating random styles by corresponding configuration, deriving diversified design drafts, avoiding the need to redesign and generate new design drafts every time the style is modified, reducing the design cost, and solving the problem of low operation efficiency caused by the addition and update of design drafts in the prior art.

[0107] Figure 5 A flowchart of a design draft conversion method according to another embodiment of the present application is shown, which is executed by a design draft conversion plug-in, wherein the design draft conversion plug-in pre-defines a custom component style analysis method and a layer name custom parameter style analysis method, and the method is to Figure 1 convert the design draft generated by the design draft generation method in the embodiment shown, as shown in Figure 5 the method includes the following steps:

[0108] Step S501, obtaining a second design draft to be converted.

[0109] When there is a design draft conversion code requirement, the design draft conversion function provided by the design draft conversion page of the design draft conversion plug-in can be used for conversion, for example, the design draft conversion page includes a conversion button or a design draft link button, and the second design draft to be converted is selected or uploaded for conversion. Thus, the second design draft to be converted can be obtained.

[0110] Step S502, in response to a design draft conversion request, calling the analysis method corresponding to the custom component and the layer name custom parameter to convert the second design draft, generating a corresponding HTML file, and generating an HTML link according to the HTML file.

[0111] The design draft conversion plug-in pre-defines a custom component style analysis method and a layer name custom parameter style analysis method. The custom component style analysis method refers to the process of converting the styles defined by the custom components included in the design draft into executable HTML code through structured analysis. After the design draft conversion plug-in identifies the layer styles configured by the custom components, it extracts the configuration information and generates CSS styles and DOM structures based on the configuration information. For example, if the custom component "keyword follows main color" is configured to be on, the following information can be generated: window.keywordFollowMainColor=true. This is only an example and does not have any limiting effect. The same applies to other custom components.

[0112] The layer name custom parameter style analysis method refers to the process of converting the styles defined by the layer name custom parameters in the layer names of the design draft into executable HTML code through structured analysis. After the design draft conversion plug-in identifies the layer styles configured by the layer name custom parameters, it extracts the configuration information and generates CSS styles and DOM structures based on the configuration information. For example, if the parameter "random (double projection, ghosting, multi-layer stroke + projection, noise shadow, black and white high contrast + wave point projection, retro, desaturation)" is added to the name of the main object, the design draft conversion plug-in internally obtains the layer data, analyzes all the random styles in the parameter, and writes the random styles in the form of key-value pairs to the window.$TTVRandomStyle object.

[0113] In response to a design draft conversion request, the analysis methods corresponding to the custom components and layer name custom parameters are called to perform conversion processing on the second design draft, which generates HTML code. Based on the converted HTML code, a corresponding HTML file can be generated. The design draft conversion plug-in can pre-define an HTML template, so the corresponding HTML file can be generated based on the converted HTML code and the HTML template. Then, an HTML link can be generated based on the HTML file, such as determining the specific storage location of the generated HTML file on the local or server, and generating a URL that complies with the network protocol based on the storage location.

[0114] This only explains the analysis process of the layer styles configured by the custom components and the layer styles configured by the layer name custom parameters. In actual applications, the design draft conversion plug-in can also pre-define layer basic style analysis methods, font libraries, etc. During design draft conversion, corresponding analysis methods can be used for basic style analysis and font analysis.

[0115] By configuring multiple fonts (including font name and font package link) in the operation data source, the design conversion plug-in will get the corresponding font package link through the operation data source interface according to the font name configured in the design during the design conversion, and write it into the HTML code to realize the diversity of fonts.

[0116] In this embodiment, the parsing process and the design configuration process are a pair of complementary and reversible processes. The parsing process is the inverse operation of the design configuration, and therefore, the parsing can be performed based on the reverse principle of the design configuration.

[0117] According to the design conversion method provided in the embodiments of the present application, since the design realizes diversity, when the design conversion is performed, the HTML file meeting the diversity requirement can be directly converted and generated, without the need of modifying the original code to realize the design style fine-tuning, thereby reducing the development cost, saving the development resources, and overcoming the problem in the prior art that even if the design style fine-tuning (such as element displacement, color adjustment, layer addition or deletion, etc.) is needed, the modification still needs to be performed on the basis of the original code, and 0.2 person-days of development resources are consumed on average for each modification.

[0118] Figure 6 A flowchart of a design conversion method according to another embodiment of the present application is shown, which is performed by a design conversion plug-in, wherein the design conversion plug-in pre-defines a custom component style parsing method and a layer name custom parameter style parsing method. The method is a reverse operation of the design configuration method shown in Figure 1 The design conversion method shown in Figure 6 The method includes the following steps:

[0119] In step S601, a second design to be converted is obtained.

[0120] When the design conversion code is needed, the design conversion function provided by the design conversion page of the design conversion plug-in can be used to convert, for example, the conversion button or the design link button is included in the design conversion page, and the second design to be converted is selected or uploaded to convert. Thus, the second design to be converted can be obtained.

[0121] In step S602, in response to the design conversion request, the parsing method corresponding to the custom component and the layer name custom parameter is called to parse the layer data of the second design according to the layer type of the second design, so as to obtain the CSS style and the DOM structure of the HTML corresponding to the layer of the second design.

[0122] In the embodiment, the layers of the second design draft mainly include: a picture layer, a color mask layer, and a title text layer, wherein the picture layer is further divided into a background picture layer, a main object layer, and a picture mask layer, and the title text layer is further divided into a title text one (first line title), a title text two (second line title), a regular title style, a keyword style, and the like.

[0123] After obtaining the second design draft, a layer data obtaining tool is used to obtain the layer data corresponding to each layer of the second design draft. Different parsing methods are called for different layer types to parse and process the layer data corresponding to each layer, so as to obtain the DOM structure and CSS style of each layer mapped to HTML.

[0124] The custom component style parsing method refers to the process of converting the styles defined by the custom components contained in the design draft into executable HTML code through structured parsing. After the design draft conversion plug-in identifies the layer styles configured by the custom components, the configuration information is extracted, and the CSS style and DOM structure are generated according to the configuration information. For example, for the custom component "whether the keyword follows the main color", if the component configuration is turned on, the following information can be generated: window.keywordFollowMainColor=true. This is only an example and does not have any limiting effect. The same applies to other custom components.

[0125] The layer name custom parameter style parsing method refers to the process of converting the styles defined by the layer name custom parameters in the layer name of the design draft into executable HTML code through structured parsing. After the design draft conversion plug-in identifies the layer styles configured by the layer name custom parameters, the configuration information is extracted, and the CSS style and DOM structure are generated according to the configuration information. Taking the main object as an example, the parameter "random (double color projection, ghosting, multi-layer stroke + projection, noise shadow, black and white high contrast + wave point projection, retro, desaturation)" is added after the main object name. The design draft conversion plug-in internally obtains all the random styles in the parameter and writes them to the window.$TTVRandomStyle object in the form of key-value pairs.

[0126] In response to the design draft conversion request, the parsing methods corresponding to the custom components and the layer name custom parameters are called to parse the second design draft, so as to obtain the CSS style and DOM structure of the second design draft layer corresponding to HTML.

[0127] Here only the custom component configured layer style and layer name custom parameters configured layer style of the analysis process, in practical application, design draft conversion plug-in will also be defined in advance layer basic style analysis method, font library, etc., in the design draft conversion, also will use the corresponding analysis method for basic style analysis and font analysis.

[0128] By configuring a variety of fonts (including font name and font package link) in the operation data source, the design draft conversion plug-in will get the corresponding font package link through the operation data source interface according to the font name configured in the design draft when converting the design draft, and write it into the HTML code to realize the diversity of fonts.

[0129] Take a design draft as an example:

[0130] Configure the custom component "keyword follow main color", and the component configuration is turned on. The design draft conversion plug-in will insert the window variable: window.keywordFollowMainColor=true into the HTML. The business js script will recognize the variable as true and do the corresponding business processing. Other custom components are the same.

[0131] Take the main object as an example. Add the parameter "random (double color projection, ghosting, multi-layer stroke + projection, noise shadow, black and white high contrast + wave point projection, retro, desaturation)" after the main object layer name. The design draft conversion plug-in will get the layer data, parse all the random styles in the parameter, and write all the random styles in the form of key-value pairs to the window.$TTVRandomStyle object and insert it into the HTML (DOM structure and CSS style). The HTML contains the JS script with business logic, which will randomly process the object and add it to the style of the main object DOM. Other layer name custom parameters are the same.

[0132] The following gives part of the DOM structure and CSS style after layer analysis:

[0133] Background picture layer: <div class＝"bg-box"israndomstyle＝"false"> <img src＝"图片链接">

[0134] .bg-box{width:1920px;height:100%;left:0px;bottom:0;position:absolute;filter:grayscale(100%)brightness(1.3)saturate(1.3);}

[0135] .bg-box img{width:100%;height:100%;object-fit:cover;}

[0136] Mask layer: <div class＝"mask-box"israndomstyle＝"false">

[0137] .mask-box{width:1920px;height:100%;left:0px;bottom:0;position:absolute;opacity:0.65;background:linear-gradient(180deg,rgba(var(--mask-main-color1),1)0%,rgba(var(--mask-main-color2),1)100%)}

[0138] Subject layer: <div class＝"subject-box"israndomstyle＝"false"> <img src＝"主体物图片链接"style＝"width:100％；height:auto；">

[0139] .subject-box{width:1102px;height:1078px;left:818px;bottom:0;position:absolute}.subject-box img{width:100%;height:auto;object-fit:contain;position:absolute;left:50%;bottom:0;transform:translateX(-50%);}

[0140] Title text 1 (first line title) and regular title style layer:

[0141] <div class＝"title1"israndomstyle＝"false"> <span class＝"normalnormal-bg title-bg"data-text＝"设">Design <span class＝"normal normal-bgtitle-bg"data-text＝"计">prototype <span class＝"normal normal-bg title-bg"data-text＝"稿">Figure 7

[0142] .title1{width:1100px;height:264px;left:86px;top:476px;position:absolute;line-height:264px;white-space:nowrap;}.normal{display:inline-block;color:var(--normal-text-color);font-size:220px;font-family:Smiley Sans;font-weight:400;word-wrap:break-word;}

[0143] Title text 2 (second line title) and keyword style layer:<div class＝"title2"israndomstyle＝"false"> <span class＝"keyword keyword-bg title-bg keyword-first"data-text＝"模">Figure 7 <span class＝"keyword keyword-bg title-bg"data-text＝"版">Figure 7

[0144] .title2 {width: 1096px; height: 263px; left: 90px; top: 755px; position: absolute; line-height: 263px; white-space: nowrap;}

[0145] .keyword-bg {background: rgba(0, 0, 0, 1)}

[0146] .keyword {display: inline-block; color: var(--keyword-text-color); font-size: 220px; font-family: Smiley Sans; font-weight: 400; word-wrap: break-word; text-shadow: 18px 18px 40px rgba(0, 0, 0, 0.80);}.

[0147] In step S603, the DOM structure is adjusted according to the layer hierarchy relationship in the second design draft layer data.

[0148] The layer data includes the nesting and order information between layers, and the style information of each layer. Therefore, all the DOM structures obtained in step S602 can be sorted according to the nesting and order information between layers to ensure consistency with the layer order.

[0149] In step S604, the second design draft corresponding HTML file is generated according to the CSS style, the adjusted DOM structure and the HTML template, and the HTML link is generated according to the HTML file.

[0150] After obtaining the adjusted DOM structure, the second design draft corresponding HTML file can be generated according to the CSS style, the adjusted DOM structure and the HTML template. Here, the CSS style is added to the Style tag of the HTML template, and the adjusted DOM structure is inserted into the body tag of the HTML template, thereby generating the second design draft corresponding HTML file.

[0151] The HTML link is generated according to the HTML file, for example, the specific storage location of the generated HTML file in the local or server is determined, and the URL conforming to the network protocol is generated according to the storage location. Here, the HTML file upload interface can be provided, thereby producing a directly available HTML link.

[0152] Step S605: Receive a ratio conversion request carrying the converted ratio.

[0153] In this embodiment, the second design draft is a design draft with a fixed ratio, such as a 16:9 design draft, a 4:3 design draft, or a design draft with other ratios. When it is desired to use a ratio different from the second design draft for display, the prior art usually requires manual development and adjustment of the corresponding HTML file or redesign of the design draft with the corresponding ratio, which has the problem of single ratio adaptation. However, this application can directly perform ratio conversion. Specifically, it receives a ratio conversion request carrying the converted ratio. For example, if the ratio of the second design draft is 16:9 and the converted ratio is 4:3, then the ratio conversion request carries the converted ratio of 4:3.

[0154] Figure 7 This is a diagram illustrating the conversion of a design draft into a page, such as... Figure 7 As shown, Figure 7 The "Design Draft 16:9 Link" button provides a design draft conversion function. For example, if you need to convert a second design draft from 16:9 to 4:3, you can click the "Design Draft 4:3 Link" button, which triggers a scale conversion request. This request carries the converted scale of 4:3. When there are more scale requirements, you can... Figure 4 Add buttons for different scales to the design draft conversion page shown.

[0155] It should be noted that, Figure 8 The design draft conversion page shown is just an example. The design draft conversion page can also be other styles of pages. This page provides a scale conversion function, which can be used to trigger a scale conversion request.

[0156] Step S606: Perform a proportional conversion on the HTML file according to the converted ratio to generate a converted HTML file, and generate a converted HTML link based on the converted HTML file. Here, the HTML file before the proportional conversion and the HTML link after the proportional conversion correspond to one HTML file and one HTML link, respectively.

[0157] After receiving a scaling request carrying the converted scale, the HTML file is scaled according to the general scaling rules. The object of the scaling process is the HTML file after the second design draft has been converted. The converted HTML file is generated through the scaling process.

[0158] In the conversion process, the original layout structure of the HTML file before conversion is analyzed first to identify the size and position information of the background image element, the main body element, and the title element. Then, the aspect ratio of the root container is adjusted (here, taking the conversion from 16:9 to 4:3 as an example, such as replacing the original 16:9 with 4:3 using the aspect ratio technology), and the internal elements are adapted: the picture filling method maintains the proportion to avoid stretching; the text needs to recalculate the distance from the top of the page, etc., to ensure the overall proportion is correct. The converted HTML file corresponds to the converted design draft with diversity.

[0159] The converted HTML link is generated according to the converted HTML file, and the generation method is not described here. It should be noted that there is one HTML file and one HTML link before and after the aspect ratio conversion, respectively. By generating HTML files with multiple aspect ratios, the aspect ratio can be selected independently according to actual needs.

[0160] In step S607, in response to the effect preview trigger operation, the business logic in the HTML file is called to render the style, and the preview image of the second design draft or the design draft after aspect ratio conversion is displayed.

[0161] Effect preview refers to previewing the actual design effect of the second design draft with diversity. The design draft conversion page provides an effect preview function, for example, a preview effect button can be provided, and clicking the preview effect button is considered to have performed an effect preview trigger operation. An HTML template is predefined in the design draft conversion plug-in, and the HTML template contains business logic. Therefore, the HTML file contains business logic, which refers to data processing and rule implementation related to specific business needs. By calling the business logic in the HTML file to render the style, the preview image of the second design draft or the design draft after aspect ratio conversion can be displayed. When rendering the style, online rich mock data (virtual data artificially constructed to simulate real business data) is combined.

[0162] Continue to combine Figure 4 For example, if you want to preview a 16:9 design draft, you can click the 16:9 preview effect, which refers to displaying the preview image of the 16:9 design draft, as shown in Figure 8 For example, if you want to preview a 4:3 design draft, you can click the 4:3 preview effect, which refers to displaying the preview image of the 4:3 design draft, as shown in Figure 9 It should be noted that Figure 10 and Figure 7 are only one kind of effect preview, and there may be more styles of preview images in actual applications, such as Figure 11As shown, each design draft can derive up to 49 subject matter + background combination styles. Thus, one key realizes design draft proportion conversion, reducing development cost.

[0163] Step S608, according to the preview of the second design draft or the proportionally converted design draft, function test is performed.

[0164] Step S609, if the test fails, preset prompt information is displayed for checking.

[0165] Specifically, the function test refers to a test process for verifying whether the design meets the design standard and the expected business logic, focusing on checking the completeness, correctness, ease of use and accuracy of interactive response of the function, and ensuring that the preset function can be normally executed. After displaying the preview of the second design draft or the proportionally converted design draft, function test is performed according to the preview, for example, interactive logic test, visual restoration test, etc. If the test fails, it means that there is an abnormality, i.e. bug, at this time, preset prompt information can be displayed, for example, rendering error, please check: error link, such as Figure 11 As shown.

[0166] In this embodiment, toast prompt (i.e. toast prompt) can be performed, and preset prompt information can be displayed in the preview interface for a short time, for example, after a preset duration, it is automatically closed, or a close button can be provided for manual closing.

[0167] By combining mock data, real-time visual preview capability is realized, the effect of the design draft on the online cover is previewed in advance, the difficulty of design restoration degree verification is reduced, the time of design restoration degree acceptance is saved, and the template function can be directly verified whether there is a problem.

[0168] In an optional embodiment of the present application, the method further comprises: in response to the regeneration operation, obtaining an updated second design draft, and in response to the design draft conversion request, performing conversion processing on the updated second design draft to generate a corresponding HTML file.

[0169] Specifically, after previewing the effect, or after displaying the preset prompt information, the designer may modify the second design draft, that is, the second design draft has been changed, Figure 12The design draft conversion page shown can also provide a regeneration function, for example, the design draft conversion page includes a "regenerate" button, and clicking the "regenerate" button is considered to trigger a regeneration operation. Here, the updated second design draft is obtained, and the updated second design draft is converted in response to the design draft conversion request to generate a corresponding HTML file. The specific processing process is similar to the above, and will not be described here again. In the case of design draft update, the provided regeneration function can be used to re-export the link and view the preview effect, solving the problem of low maintenance efficiency in the prior art that the design draft needs to be regenerated to generate a static page, and then manually re-add business logic.

[0170] Figure 12 A schematic diagram of the analysis framework of the design draft conversion plug-in for the design draft is shown in FIG. 1. Figure 13 As shown, the second design draft is designed using the figma development tool. Before obtaining the layer data of the second design draft, the design draft conversion plug-in needs to implement five underlying designs: implementing a general method for converting each configuration item in the figma native style configuration function to a CSS style; implementing a method for parsing a custom component into a CSS style; implementing a method for parsing a layer custom parameter into a CSS style; using an operation data source to configure a font library, and the configuration items include: font name, font style, and font download link, then obtaining font library information through an interface, and matching the font in the export template process and writing to font-face; implementing a general business logic according to product requirements, and inserting the logic JS into a general HTML template that will be used by all templates.

[0171] Here is the conversion of a 16:9 design draft into an HTML link, where the layers are mainly divided into:

[0172] Picture type: background picture, main object, picture mask (such as popup mask, picture watermark).

[0173] Color mask type: solid block, gradient layer (used for background or decoration).

[0174] Text type: title text, regular title, keywords (such as highlight tags) and background styles.

[0175] The layer data is analyzed, and the style of each type of layer is extracted and code is generated. The core logic is "design property → web page DOM + CSS":

[0176] Picture layer layer analysis: for background pictures, main pictures, picture masks, layer name custom parameters and custom components, style analysis is performed, which mainly uses layer custom parameter analysis to CSS style method and custom component analysis to CSS style method. The original figma configuration style (width, height, transparency, rotation angle, projection, stroke, desaturation, blur, exposure, etc.) is analyzed, and the general analysis method is used for analysis, and finally the DOM structure and CSS style are generated.

[0177] Color mask layer analysis: style analysis is performed on layer name custom parameters and custom components, which mainly uses layer custom parameter analysis to CSS style method and custom component analysis to CSS style method. The original figma configuration style (width, height, transparency, color, etc.) is analyzed, and the general analysis method is used for analysis, and finally the DOM structure and CSS style are generated.

[0178] Title text (title text, regular title, keyword) layer analysis: determine the position and maximum width and height of the title text, and perform style analysis on custom components, which mainly uses custom component analysis to CSS style method. Title / regular title, keyword background style analysis, regular title or keyword figma original configuration style analysis: font, font size, font color (gradient color), line height, stroke, word spacing, projection, font weight, and finally generate DOM structure and CSS style.

[0179] The above layer data contains the nesting and order information between layers, so all the DOM structures obtained by the above analysis can be sorted according to the nesting and order information between layers to ensure consistency with the layer order.

[0180] The layer relationship and the generated multi-picture layer style + DOM, color mask style + DOM, and text style + DOM can be integrated to form a complete web structure.

[0181] Based on the integrated 16:9 web structure, generate multi-proportion adaptive HTML files:

[0182] Insert the DOM+CSS corresponding to the 16:9 design draft into the HTML template to generate a 16:9 HTML file.

[0183] 16:9 to 4:3 method: use the general method of 16:9 to 4:3 template to convert 16:9 HTML file to 4:3 HTML file.

[0184] HTML template: inject general business logic (such as button click event, form submission logic), and generate a complete and executable HTML file based on the HTML template.

[0185] Finally, the HTML file is uploaded to the server through the upload interface to generate accessible 16:9 HTML links and 4:3 HTML links for front-end preview or embedded business systems.

[0186] According to the design draft conversion method provided by the embodiment of the application, since the design draft realizes diversity, when the design draft is converted, the HTML file capable of meeting the diversity requirement can be directly converted and generated, without modifying the original code to realize the design draft style fine-tuning, thereby reducing the development cost, saving the development resources, and overcoming the problem in the prior art that even if the design draft style is fine-tuned (such as element displacement, color adjustment, layer addition or deletion, etc.), the modification still needs to be performed on the basis of the original code, and 0.2 person-days of development resources are consumed on average each time. The design draft has the characteristics of strong business logic, high template diversity, and high production efficiency, and the application defines the business logic in the HTML template, can realize 100% restoration of a single design draft to a double-ratio (16:9 and 4:3) design draft in one key, supports derivation of multiple visual templates from a single design draft, breaks the static design constraint, and covers the diversity of operation requirements. In addition, a full-link visual verification system is added to preview the effect of the design draft on the online cover in advance, which not only saves the design restoration degree acceptance time, but also directly verifies whether the template function has a problem, realizes the closed loop of production as a service, and solves the problem in the prior art that the design draft is only converted into a single static HTML file, a large amount of post-processing (adding business logic, design restoration acceptance, testing, etc.) is required, the production link of the entire template is lengthened, and the production cost is high and the efficiency is low.

[0187] Figure 12 The structural block diagram of the design draft generation device according to an embodiment of the application is shown, and the device is realized based on pre-configured custom components and layer name custom parameters, as shown in the figure, the device comprises: Figure 13

[0188] The acquisition module 1201 is adapted to acquire a first design draft.

[0189] The monitoring module 1202 is adapted to monitor the attribute triggering operation on at least one custom component, and monitor the parameter setting operation triggered on at least one layer name of the first design draft.

[0190] The processing module 1203 is adapted to perform style configuration on a target design draft layer of the first design draft according to the attribute information corresponding to the attribute triggering operation; and modify the target design draft layer name according to the at least one layer name custom parameter corresponding to the parameter setting operation.

[0191] The generation module 1204 is adapted to generate a second design draft based on the target design draft layer and the first design draft after the configuration and modification.​

[0192] Optionally, the target design draft layer comprises one or more of the following layers: a picture layer, a color mask layer, a title text layer, wherein the picture layer comprises: a background picture layer, a subject matter layer, a picture mask layer.

[0193] Optionally, the processing module is further adapted to: monitor the parameter setting operation triggered by the object on the background picture layer and / or the mask layer and / or the subject matter layer of the first design draft, and add the layer name customization parameter corresponding to the parameter setting operation to the preset position of the background picture layer name and / or the mask layer name and / or the subject matter layer name according to at least one layer name customization parameter of the subject matter.

[0194] Optionally, the at least one customization component comprises one or more of the following components: a subject matter scaling component, a subject matter position component, a keyword following background color component, a keyword following subject matter component, a keyword projection following background color component, a keyword projection following subject matter component, a mask following background color component, and a mask following subject matter component.

[0195] Optionally, the layer name customization parameter comprises one or more of the following parameters: a picture filter parameter, a subject matter style parameter, a background style parameter, and a mask style parameter.

[0196] The picture filter parameter comprises one or more of the following parameters: desaturation, outline, blur, exposure, saturation, and contrast.

[0197] The subject matter style parameter comprises one or more of the following parameters: double projection, ghosting, multi-layer outline and projection, desaturation, black and white high-contrast and wave projection, retro, noise shadow.

[0198] The background style parameter comprises one or more of the following parameters: desaturation and dynamic blur, texture noise.

[0199] The mask style parameter comprises one or more of the following parameters: color mask right-left, color mask left-right, color mask up-down, color mask down-up, and grid halftone.

[0200] The above modules are described with reference to the corresponding description in the method embodiments, and will not be described here.

[0201] According to the design draft generation apparatus provided in the embodiments of this application, the target design draft layer of the first design draft is styled by at least one custom component, and the layer name of the target design draft layer of the first design draft is modified by at least one layer name custom parameter. This makes the generated second design draft a diverse design draft, supporting the derivation of multiple visual design drafts from a single design draft, breaking the constraints of static design, covering the diversity of operational needs, thereby improving the reusability of the first design draft. By generating random styles through corresponding configuration, diverse design drafts can be derived, avoiding the need to redesign and generate a new design draft every time the style is modified, reducing design costs, and solving the problem of low operational efficiency caused by the addition and updating of design drafts in the prior art.

[0202] Figure 14 This diagram illustrates a structural block diagram of a design draft conversion device according to an embodiment of this application. The device is deployed in a design draft conversion plugin, wherein the design draft conversion plugin predefines a custom component style parsing method and a layer name custom parameter style parsing method. The device is used for... Figure 14 The design draft generated by the illustrated embodiment is converted, such as... ​ As shown, the device includes:

[0203] Module 1301 is used to acquire the second design draft to be converted.

[0204] The design draft conversion processing module 1302 is adapted to respond to the design draft conversion request, call the parsing method corresponding to the custom component and layer name custom parameters to convert the second design draft, generate the corresponding HTML file, and generate HTML links based on the HTML file.

[0205] Optionally, the second design draft corresponds to an HTML file and an HTML link.

[0206] Optionally, the design draft conversion processing module is further adapted to: based on the layer type of the second design draft, call the parsing method corresponding to the custom component and the custom parameter of the layer name to parse and process the layer data of the second design draft, and obtain the CSS style and DOM structure of the HTML corresponding to the layer of the second design draft;

[0207] The DOM structure was adjusted based on the layer hierarchy in the layer data of the second design draft;

[0208] Generate the HTML file corresponding to the second design draft based on the CSS styles, the adjusted DOM structure, and the HTML template.

[0209] Optionally, the device further includes: a receiving module for receiving a ratio conversion request carrying the converted ratio;

[0210] The proportion conversion module is adapted to perform proportion conversion processing on the HTML file according to the converted proportion, to generate a converted HTML file, and to generate a converted HTML link according to the converted HTML file, wherein the proportion conversion before and after the proportion conversion correspond to an HTML file and an HTML link respectively.

[0211] Optionally, the device further comprises a rendering module adapted to, in response to an effect preview triggering operation, invoke business logic in the HTML file to perform style rendering, and display a preview image of the second design draft or the proportion-converted design draft.

[0212] Optionally, the device further comprises a testing module adapted to perform function testing according to the displayed preview image of the second design draft or the proportion-converted design draft.

[0213] The display module is adapted to display preset prompt information for checking if the testing fails.

[0214] Optionally, the obtaining module is further adapted to, in response to a re-generation operation, obtain an updated second design draft.

[0215] The design draft conversion processing module is adapted to, in response to a design draft conversion request, perform conversion processing on the updated second design draft, to generate a corresponding HTML file.

[0216] The above modules are described with reference to the corresponding descriptions in the method embodiments, and thus will not be described herein again.

[0217] According to the design draft conversion device provided in the embodiment of the present application, since the design draft realizes diversity, when the design draft conversion is performed, the HTML file capable of meeting the diversity requirement can be directly converted and generated, without modifying the original code to realize the design draft style fine adjustment, thereby reducing the development cost, saving the development resources, overcoming the problem in the prior art that even if the design draft style fine adjustment (such as element displacement, color adjustment, layer increase or decrease, etc.) is required, the modification based on the original code is still needed, and 0.2 person-days of development resources are consumed on average each time; the design draft has the characteristics of strong business logic, high template diversity and high production efficiency, and the business logic is defined in the HTML template, so that not only the single design draft 100% restoration double proportion (16:9 and 4:3) design draft can be realized one-key, but also a plurality of visual templates can be derived from the single design draft, the static design constraint is broken, and the diversity of the operation requirement is covered. In addition, the full-link visual verification system is added, the effect of the design draft on the online cover is previewed in advance, the time for design restoration degree acceptance can be saved, the template function problems can be directly verified, the production-service closed loop is realized, and the problem in the prior art that the design draft is only converted into a single static HTML file, a large amount of post-processing (adding business logic, design restoration acceptance, testing, etc.) is required, the production link of the entire template is lengthened, and the production cost is high and the efficiency is low.

[0218] The embodiment of the present application provides a nonvolatile computer storage medium, and the computer storage medium stores at least one executable instruction or computer program.

[0219] The embodiment of the present application provides a nonvolatile computer storage medium, and the computer storage medium stores at least one executable instruction or computer program.

[0220] The embodiment of the present application provides a computer program product, and the computer program product includes at least one executable instruction or computer program.

[0221] The embodiment of the present application provides a computer program product, and the computer program product includes at least one executable instruction or computer program.

[0222] ​The structural schematic diagram of the computing device embodiment of the present application is shown, and the specific implementation of the computing device is not limited in the specific embodiment of the present application.

[0223] As shown in the figure, the computing device can include a processor 1402, a communications interface 1404, a memory 1406, and a communications bus 1408. ​

[0224] The processor 1402, the communications interface 1404, and the memory 1406 can communicate with each other through the communications bus 1408. The communications interface 1404 is configured to communicate with network elements such as clients or other servers. The processor 1402 is configured to execute the program 1410, and specifically can execute the related steps in the method embodiments of the computing device described above.

[0225] Specifically, the program 1410 can include program codes including computer operation instructions.

[0226] The processor 1402 can be a central processing unit CPU, or an application specific integrated circuit ASIC, or one or more integrated circuits configured to implement the embodiments of the present application. The one or more processors of the computing device can be the same type of processor, such as one or more CPUs; or can be different types of processors, such as one or more CPUs and one or more ASICs.

[0227] The memory 1406 is configured to store the program 1410. The memory 1406 can include a high-speed RAM memory, and can also include a non-volatile memory such as at least one disk memory.

[0228] The program 1410 can be specifically used to make the processor 1402 execute the method in any of the method embodiments described above. The specific implementation of each step in the program 410 can refer to the corresponding description in the corresponding steps and units in the above-described embodiments, and will not be described here. Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the device and the module described above can refer to the corresponding process description in the foregoing method embodiments, and will not be described here.

[0229] ​The algorithms and displays presented herein are not inherently related to any particular computer, virtual system, or other apparatus. Various general purpose systems can be used with programs in accordance with the teachings herein, or it can prove convenient to construct more specialized apparatus to perform the required method steps. The required structure for a variety of these systems will be apparent from the description above. In addition, the present embodiments are not described with reference to any particular programming language. It will be appreciated that a variety of programming languages can be used to implement the teachings of the present embodiments as described herein, and any references below to specific languages are provided for disclosure of enablement only.

[0230] In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application can be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been described in detail in order to avoid obscuring the understanding of this description.

[0231] Similarly, it is to be understood that the mechanical details of the application can be put into practice in various ways without necessarily deviating from the principles of the application. In the description of the example embodiments of the application above, the various features of the application are sometimes grouped together in a single embodiment, figure or description of a related aspect. This is done for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various aspects of the application. However, it should be understood that the logical groupings should not be interpreted as reflecting an intention that the application requires more features than are explicitly recited in each claim. Rather, the logical groupings reflect an embodiment approach of the application and that the application features are to only be determined with reference to the claims. Furthermore, the features or aspects of the application described in each of the claims are to be considered individually and not by reference to the language "and / or" unless specific instances are recited that they are "and / or" that specific "and / or" language is used prior to the clause where the feature or aspects are described. Thus, the claims following the example embodiments are hereby expressly incorporated into this detailed description, with each claim acting as a separate embodiment of the application.

[0232] Those skilled in the art will appreciate that the modules in the apparatuses of the embodiments can be adapted and placed in one or more apparatuses other than the embodiments. The modules or units or components in the embodiments can be combined into one module or unit or component, and further can be divided into more sub-modules or sub-units or sub-components. Any combination of all the features disclosed in the specification (including the accompanying claims, abstract and drawings), and any method or process or steps of any such methods or processes disclosed in the specification (including the accompanying claims, abstract and drawings) can be used in any one or more of the embodiments of the application. Unless explicitly stated otherwise, each feature disclosed in the specification (including the accompanying claims, abstract and drawings) can be replaced by alternative features that serve the same, equivalent or similar purpose.

[0233] Furthermore, those skilled in the art will recognize that, while certain embodiments described herein include certain features that are not included in other embodiments, combinations of those features from different embodiments are meant to be within the scope of the application, and form different embodiments, for example, in the following claims. For example, in the following claims, any of the claimed embodiments can be used in any combination.

[0234] Various component embodiments of the present application can be implemented in hardware, or as software modules running in one or more processors, or in combinations thereof. Those skilled in the art will appreciate that a microprocessor or digital signal processor (DSP) can be used in practice to implement some or all of the functionality according to some or all of the components of the present application. The present application can also be implemented as a program of instructions for performing part or all of the methods described herein, e.g., a computer program and a computer program product. Such program of the present application, which implements the present application, can be stored on a computer readable medium, or can be in the form of one or more signals. Such signals can be downloaded from an Internet website, or provided on a carrier signal, or in any other form.

[0235] It is noted that the above examples have been described by way of explanation of the application, and not limitation of the application, and that alternatives can be constructed without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The application can be implemented by means of both hardware and software, and any combination thereof. In a unit claim, several devices can be listed with a conjunction like "and" or "or", it is thus possible that some of the devices are optionally used together, also individually. The use of relative terms like "first", "second", and "third", etc. does not connote any prioritization. Such terms can be construed as names.

Claims

1. A design draft generation method, the method is realized based on pre-configured custom components and layer name customization parameters, the method comprises: obtaining a first design draft; monitoring attribute triggering operations on at least one custom component, and performing style configuration on a target design draft layer of the first design draft according to attribute information corresponding to the attribute triggering operations; monitoring parameter setting operations triggered on at least one layer name of the first design draft, and modifying the target design draft layer name according to at least one layer name customization parameter corresponding to the parameter setting operations; generating a second design draft based on the target design draft layer after configuration and modification and the first design draft.

2. The method of claim 1, wherein, The target design draft layer comprises one or more of the following layers: a picture layer, a color mask layer, and a title text layer, wherein the picture layer comprises a background picture layer, a main object layer, and a picture mask layer.

3. The method of claim 1 or 2, wherein, The target design draft layer comprises one or more of the following layers: a picture layer, a color mask layer, and a title text layer, wherein the picture layer comprises a background picture layer, a main object layer, and a picture mask layer. The target design draft layer comprises one or more of the following layers: a picture layer, a color mask layer, and a title text layer, wherein the picture layer comprises a background picture layer, a main object layer, and a picture mask layer.

4. The method of any one of claims 1-3, wherein, The at least one custom component comprises one or more of the following components: a main object scaling component, a main object position component, a keyword following background color component, a keyword following main object component, a keyword projection following background color component, a keyword projection following main object color component, a mask following background color component, and a mask following main object color component.

5. The method of any one of claims 1-4, wherein, The layer name customization parameter comprises one or more of the following parameters: a picture filter parameter, a main object style parameter, a background style parameter, and a mask style parameter. The picture filter parameter comprises one or more of the following parameters: desaturation, outline, blur, exposure, saturation, and contrast. The main object style parameter comprises one or more of the following parameters: double color projection, ghosting, multi-layer outline and projection, desaturation, black and white high contrast and wave point projection, retro, noise shadow. The background style parameter comprises one or more of the following parameters: desaturation and dynamic blur, texture noise. The mask style parameter comprises one or more of the following parameters: color mask right and left, color mask left and right, color mask up and down, color mask down and up, and grid halftone.

6. A design conversion method, the method being executed by a design conversion plug-in, wherein, The design draft conversion plug-in pre-defines a custom component style analysis method and a layer name customization parameter style analysis method, the method is used for converting the design draft generated by any one of the design draft generation methods in claims 1-5, and the method comprises: obtaining a second design draft to be converted; In response to the design draft conversion request, a parsing method corresponding to the custom component and layer name custom parameter is called to perform conversion processing on the second design draft to generate a corresponding HTML file, and an HTML link is generated according to the HTML file.

7. The method of claim 6, wherein, The second design draft corresponds to an HTML file and an HTML link.

8. The method of claim 6 or 7, wherein, The method further comprises: receiving a proportion conversion request carrying a converted proportion; According to the converted proportion, the proportion conversion processing is performed on the HTML file to generate a converted HTML file, and a converted HTML link is generated according to the converted HTML file, wherein the proportion conversion before and after the proportion conversion correspond to an HTML file and an HTML link respectively. The method further comprises: in response to an effect preview triggering operation, calling business logic in the HTML file to perform style rendering, and displaying a preview image of the second design draft or the design draft after proportion conversion. The method further comprises: performing function testing according to the displayed preview image of the second design draft or the design draft after proportion conversion.

9. The method of any one of claims 6-8, wherein, If the test fails, a preset prompt information is displayed for checking. The method further comprises: in response to a regeneration operation, obtaining an updated second design draft, and in response to a design draft conversion request, performing conversion processing on the updated second design draft to generate a corresponding HTML file.

10. The method of any one of claims 6-9, wherein, 13. A design draft generation device, the device being realized based on preconfigured custom component and layer name custom parameter, the device comprising:

11. The method of any one of claims 6-10, wherein, an acquisition module adapted to acquire a first design draft; a monitoring module adapted to monitor attribute triggering operations on at least one custom component, and monitor parameter setting operations triggered by at least one layer name of the first design draft; 12. The method of any one of claims 6-11, wherein, a processing module adapted to perform style configuration on a target design draft layer of the first design draft according to attribute information corresponding to the attribute triggering operations; and modify the target design draft layer name according to at least one layer name custom parameter corresponding to the parameter setting operations; a generation module adapted to generate a second design draft based on the configured and modified target design draft layer and the first design draft. The design draft conversion plug-in predefines custom component style parsing methods and layer name custom parameter style parsing methods, and the device is used to convert the design draft generated by the design draft generation device of claim 13, and the device comprises: ​ ​ ​ 14. A design conversion device, the device being deployed in a design conversion plug-in, wherein, ​ An acquisition module is adapted to acquire a second design draft to be converted; The design draft conversion processing module is adapted to, in response to a design draft conversion request, call an analysis method corresponding to the custom component and the layer name custom parameter to perform conversion processing on the second design draft, generate a corresponding HTML file, and generate an HTML link according to the HTML file.

15. A computing device comprising: A processor, a memory, a communication interface, and a communication bus, the processor, the memory, and the communication interface complete communication with each other through the communication bus; The memory is used to store at least one executable instruction, and the executable instruction causes the processor to perform operations corresponding to the design draft generation method in any one of claims 1-5 or operations corresponding to the design draft conversion method in any one of claims 6-12.

16. A computer storage medium, the storage medium storing at least one executable instruction, the executable instruction causing a processor to perform operations corresponding to the design draft generation method in any one of claims 1-5 or operations corresponding to the design draft conversion method in any one of claims 6-12.

17. A computer program product, comprising at least one executable instruction, the executable instruction causing a processor to perform operations corresponding to the design draft generation method in any one of claims 1-5 or operations corresponding to the design draft conversion method in any one of claims 6-12.

Images