Method and device for generating UI design drawing, storage medium and electronic equipment

Abstract

The invention provides a method and device for generating a UI design drawing, a storage medium and electronic equipment, and the method comprises the steps: after obtaining a target design template, setting each layer in the target design template as a component attribute, setting the component attribute as a text attribute or an image attribute, and then associating the image attribute with the text attribute, subsequently, on the basis of the obtained design description content, copywriting content of character attributes and picture retrieval schemes are generated, and for image attributes, pictures corresponding to the image attributes are determined by using the picture retrieval schemes of the character attributes associated with the image attributes; and then filling the text content of the text attribute to the position of the text attribute on the target design template, and filling the text content of the image attribute to the position of the image attribute on the target design template, so that the UI design drawing is generated, and therefore, the UI design drawing can be quickly generated for a user, and the user experience is improved. The time cost of editing copywriting and searching filling pictures by a user is effectively reduced, and the design efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and device for generating a UI design diagram, a storage medium and an electronic device. Background Art

[0002] With the rapid development of science and technology, user interface design (UI design) plays an increasingly important role in improving user experience. UI design not only focuses on the aesthetics of the interface, but also emphasizes the smoothness of human-computer interaction and the intuitiveness of operation.

[0003] In the traditional UI design method, designers manually retrieve text and image materials during the UI design process, which takes a lot of time and energy and affects the design efficiency. Summary of the invention

[0004] In view of this, the embodiments of the present application provide a method and device, storage medium and electronic device for generating UI design drawings. By applying the solution provided by the present application, UI design drawings can be generated without the user having to edit text and retrieve images, thereby reducing the time cost required for users to edit text and retrieve images and improving design efficiency.

[0005] To achieve the above objectives, the present application provides the following technical solutions:

[0006] A method for generating a UI design diagram, comprising:

[0007] Determine a target design template based on user design requirements, and set each layer in the target design template as a component attribute, wherein the component attribute is a text attribute or an image attribute;

[0008] For each of the image attributes, associating the image attribute with the text attribute corresponding thereto;

[0009] Obtaining design description content, processing the design description content using a preset language generation model, and generating text content and image retrieval solutions for each of the text attributes;

[0010] For each of the image attributes, based on the image retrieval scheme of the text attribute associated with the image attribute, retrieve the image corresponding to the image attribute;

[0011] The text content of each of the text attributes is filled into the target design template, and the picture of each of the image attributes is filled into the target design template to generate the UI design drawing required by the user.

[0012] In the above method, optionally, determining the target design template based on the user design requirement includes:

[0013] Obtaining the design requirements input by the user;

[0014] Matching each design template corresponding to the design requirement in a preset template library;

[0015] Each of the design templates is displayed to the user, and the design template selected by the user is used as the target design template.

[0016] In the above method, optionally, for each of the image attributes, associating the image attribute with the corresponding text attribute includes:

[0017] For each of the image attributes, the text attribute corresponding thereto is determined as the target text attribute; a name identifier of each of the target text attributes is obtained, and the name of the image attribute is created using each of the name identifiers.

[0018] Optionally, the method described above, filling the image of each image attribute into the target design template includes:

[0019] Obtaining various design parameters of each of the image attributes;

[0020] For each of the image attributes, the image of the image attribute is processed based on various design parameters of the image attribute, and the processed image is filled into the position of the image attribute in the target design template.

[0021] In the above method, optionally, for each of the image attributes, based on an image retrieval scheme of the text attribute associated therewith, retrieving the corresponding image includes:

[0022] For each of the image attributes, a retrieval sub-scheme of the image attribute is determined in the image retrieval scheme of the text attribute associated therewith; a picture library is determined based on the retrieval sub-scheme, and the retrieval sub-scheme is applied to retrieve pictures corresponding to the image attribute in the picture library.

[0023] A device for generating a UI design drawing, comprising:

[0024] A setting unit, used to determine a target design template based on a user design requirement, and set each layer in the target design template as a component attribute, wherein the component attribute is a text attribute or an image attribute;

[0025] an associating unit, for associating, for each of the image attributes, the image attribute with a corresponding text attribute;

[0026] An acquisition unit, used to acquire design description content, process the design description content using a preset language generation model, and generate text content and an image retrieval scheme for each of the text attributes;

[0027] A retrieval unit, configured to retrieve, for each of the image attributes, a picture corresponding to the image attribute based on a picture retrieval scheme of the text attribute associated therewith;

[0028] A filling unit is used to fill the text content of each of the text attributes into the target design template, and fill the picture of each of the image attributes into the target design template, so as to generate the UI design drawing required by the user.

[0029] In the above device, optionally, the setting unit executes the process of determining the target design template based on the user design requirement, including:

[0030] Obtaining the design requirements input by the user;

[0031] Matching each design template corresponding to the design requirement in a preset template library;

[0032] Each of the design templates is displayed to the user, and the design template selected by the user is used as the target design template.

[0033] In the above device, optionally, the associating unit performs the process of associating each of the image attributes with the corresponding text attribute, including:

[0034] For each of the image attributes, the text attribute corresponding thereto is determined as the target text attribute; a name identifier of each of the target text attributes is obtained, and the name of the image attribute is created using each of the name identifiers.

[0035] In the above device, optionally, the filling unit performs the process of filling the picture of each image attribute into the target design template, including:

[0036] Obtaining various design parameters of each of the image attributes;

[0037] For each of the image attributes, the image of the image attribute is processed based on various design parameters of the image attribute, and the processed image is filled into the position of the image attribute in the target design template.

[0038] In the above device, optionally, the retrieval unit executes the process of retrieving the corresponding picture for each of the image attributes based on the picture retrieval scheme of the text attribute associated therewith, including:

[0039] For each of the image attributes, a retrieval sub-scheme of the image attribute is determined in the image retrieval scheme of the text attribute associated therewith; a picture library is determined based on the retrieval sub-scheme, and the retrieval sub-scheme is applied to retrieve pictures corresponding to the image attribute in the picture library.

[0040] A storage medium includes stored instructions, wherein when the instructions are executed, the device where the storage medium is located is controlled to execute the method for generating a UI design diagram as described above.

[0041] An electronic device includes a memory and one or more instructions, wherein the one or more instructions are stored in the memory and are configured to be executed by one or more processors to perform the method for generating a UI design diagram as described above.

[0042] Compared with the prior art, this application has the following advantages:

[0043] The present application provides a method and device, storage medium and electronic device for generating UI design drawings, comprising: after obtaining a target design template, setting each layer in the target design template as a component attribute, the component attribute being a text attribute or an image attribute, and then associating the image attribute with the text attribute, and subsequently generating text content and an image retrieval scheme for the text attribute based on the obtained design description content, and for the image attribute, using the image retrieval scheme for the text attribute associated with it to determine the image corresponding to the image attribute; and then filling the text content of the text attribute into the position of the text attribute in the target design template, and filling the text content of the image attribute into the position of the image attribute in the target design template, thereby generating a UI design drawing, thereby quickly generating a UI design drawing for a user, effectively reducing the time cost of the user editing the text and finding fill-in images, and improving design efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0045] Figure 1 A flowchart of a method for generating a UI design diagram provided in an embodiment of the present application;

[0046] Figure 2 A flow chart of a method for determining a target design template based on user design requirements provided in an embodiment of the present application;

[0047] Figure 3 An example diagram of a card component design template provided in an embodiment of the present application;

[0048] Figure 4An example diagram of a bottom label bar of a card component design template provided in an embodiment of the present application;

[0049] Figure 5 An example diagram of generating a UI design diagram provided in an embodiment of the present application;

[0050] Figure 6 An example diagram of a UI design diagram provided in an embodiment of the present application;

[0051] Figure 7 Another example diagram of a UI design diagram provided in an embodiment of the present application;

[0052] Figure 8 A schematic diagram of the structure of a device for generating a UI design diagram provided in an embodiment of the present application;

[0053] Fig. 9 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0054] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0055] In this application, the terms "comprises", "comprising" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprising a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element.

[0056] As can be seen from the background technology, currently when designers are designing UI, they need to manually search for copy text and image materials, which requires a lot of time and energy, affecting design efficiency.

[0057] In the traditional UI design process, designers use design tools to design. There is a method in current design tools that generates UI design content based on modular ideas. The core idea is to retrieve and recall the information provided by users in the template library and provide users with the templates needed for design. The templates currently provided to users do not have any content. Users need to manually search, write text and picture materials, and fill them into the templates to generate the corresponding UI design drawings. This method requires designers to spend a lot of time and energy, affecting design efficiency.

[0058] To solve the above-mentioned method, the present application provides a solution for generating UI design drawings. By applying this solution, designers do not need to write texts and retrieve image materials. They only need to automatically generate the contents of each part of the design template according to the design description and fill it into the design template to generate UI design drawings that meet the design needs of designers, thereby improving design efficiency.

[0059] The present application can be used in many general or special computing device environments or configurations, such as personal computers, server computers, handheld or portable devices, tablet devices, multi-processor devices, distributed computing environments including any of the above devices or equipment, etc.

[0060] Reference Figure 1 , which is a flow chart of a method for generating a UI design diagram provided in an embodiment of the present application. The specific process refers to S101-S105, and the relevant description is as follows:

[0061] S101. Determine a target design template based on user design requirements, and set each layer in the target design template as a component attribute, where the component attribute is a text attribute or an image attribute.

[0062] Preferably, the user of this application is a designer.

[0063] A target design template may be determined in the template library, where the target design template is a template for UI design that is matched for a user according to design requirements.

[0064] Reference Figure 2 , is a flow chart of a method for determining a target design template based on user design requirements provided in an embodiment of the present application, and the relevant process refers to S201-S203, which is specifically described as follows:

[0065] S201. Obtain design requirements input by a user.

[0066] The design requirement can be at least one of text and picture.

[0067] The text in the design requirements may be a description of the design template required by the user or a description of the UI diagram to be designed, and the picture in the design requirements may be an example picture of the design page required by the user.

[0068] S202: Match various design templates corresponding to the design requirements in a preset template library.

[0069] The template library includes a plurality of pre-designed design templates, and the design requirements can be used to match the design templates from the template library. Preferably, when matching, keywords can be extracted from the design requirements, and then the design templates can be matched using the keywords.

[0070] Each keyword may be used to determine a matching score between each design template and the design requirement, and a design template corresponding to a matching score not less than a preset score is determined as a design template corresponding to the design requirement.

[0071] Furthermore, when matching various design templates corresponding to design requirements in a preset template database, keywords can be extracted from the design requirements first, and the extracted keywords are deduplicated to obtain processed keywords. Each processed keyword is assigned a value, that is, a weight value is assigned to each processed keyword. The value can be assigned according to the frequency of occurrence of the keyword. The higher the frequency, the higher the weight value, and the lower the frequency, the lower the weight value. Specifically, when a keyword appears only once, a default weight value can be assigned.

[0072] A descriptive word set of each design template in the template library is obtained, wherein the descriptive word set includes various descriptive words that describe the design template.

[0073] Based on the preset template design dictionary, the descriptive word set of each design template and each keyword, a design template corresponding to the design requirement is determined.

[0074] It should be noted that the template design dictionary contains multiple vocabulary data, different vocabulary data represent different design meanings, and each vocabulary data contains multiple words. Preferably, each vocabulary data contains words in different languages ​​for representing the design meaning represented by the vocabulary data, words similar to the written expression of the design meaning represented by the vocabulary data, words for representing different written expressions of the design meaning represented by the vocabulary data, and words for representing incorrect written expressions of the design meaning represented by the vocabulary data.

[0075] For each description set, when there is a description word in the description set that is in a vocabulary data with any keyword, the design template corresponding to the description set is determined to be the design template corresponding to the design requirement; that is, when there is a description word in the description set that is in the same vocabulary data with the keyword, the design template corresponding to the description set is determined to be the design template corresponding to the design requirement; further, the description words in the description set that are in the same vocabulary data with the keyword are marked to obtain each marked description word, and for each marked description word, the weight value of the keyword in the same vocabulary data with the marked description word is used as the weight value of the marked description word, and then the weight values ​​of each marked description word are summed to obtain the matching score of the design template corresponding to the description set.

[0076] The present application matches design templates at the design level by using vocabulary data representing different design meanings in the template design dictionary to match design templates, and the vocabulary data contains various words representing the design meanings, thereby improving the accuracy of template matching; the template design dictionary contains multilingual vocabulary and can be applied to multiple language scenarios, and the vocabulary data contains vocabulary for written expressions of various situations of the design meanings it represents, thereby reducing the error rate of matching and improving the accuracy of matching.

[0077] Preferably, the design templates may be subsequently sorted according to the matching scores of the matched design templates.

[0078] S203: Display each design template to the user, and use the design template selected by the user as the target design template.

[0079] Preferably, after obtaining each design template, each design template can be displayed to the user, for example, each design template can be arranged from high to low according to the matching score, and then the arranged design templates can be displayed in front of the user, so that the user can select the required design template from the displayed design templates as the target design template.

[0080] In the method provided by the embodiment of the present application, after matching each design template from the template library, each design template is displayed to the user, and the user can independently select the target design template. The present application first screens a large number of design templates based on the design requirements, and then displays each matched design template to the user, so that the user can independently select a more suitable design template from each displayed design template, avoiding the user from viewing a large number of design templates one by one in the template library, and then selecting the required design template, avoiding the user from spending a lot of time selecting a design template in the template library.

[0081] It should be noted that after determining the target design template, each layer in the target design template needs to be set as component properties. It should be noted that there are multiple layers in the design template, and there are many types of layers, such as text layers, icon layers, and image layers. Layers can be divided into two categories, one is text layers, and the other is image layers. Image layers can be divided into icon layers and picture layers. Furthermore, component properties are a function in the design tool. After the designer creates a component, the corresponding component properties can be set for the component to meet more complex component management and usage requirements.

[0082] There are two types of layer data: text type and image type. The image type can be further divided into icon type and picture type.

[0083] Different types of layers have different component properties. Component properties are divided into text properties and image properties.

[0084] For example, when the layer type is text, the layer is set to text attributes, and when the layer type is image, the layer is set to image attributes. It should be noted that image attributes can be subdivided into icon attributes and picture attributes. Specifically, icon layers are set to icon attributes, picture layers are set to picture attributes, and text layers are set to text attributes.

[0085] S102: For each image attribute, associate the image attribute with the corresponding text attribute.

[0086] After obtaining the attributes of each component in the target design template, it is necessary to associate each image attribute with its corresponding text attribute. For example, for each image attribute, determine the corresponding text attribute as the target text attribute; obtain the name identifier of each target text attribute, and use each name identifier to create the name of the image attribute.

[0087] The association method of this solution can associate the two through naming. The name identifier of the corresponding text attribute can be added to the naming of the image attribute, so that the image attribute and the corresponding target text attribute are associated.

[0088] Reference Figure 3, is an example diagram of a card component design template provided in an embodiment of the present application. As shown in the figure, the design template includes user information, a follow button, a card image, a title, a paragraph description, a release time, and other information. The user name, follow button, card title content, paragraph description, and release time framed by red lines on the left side of the figure are all text layers, which are set as text attributes one by one, and the text attributes are named one by one, such as the text attributes such as user, button, title, description, and date in the red frame on the right side of the figure. It should be noted that user, button, title, description, and date are all names of different text attributes.

[0089] Reference Figure 3 , set the image layer in the design template to the image attribute in the component properties, and use the same prefix name (namely the name of the text attribute) as the text layer associated with it, and then add "-image" to the suffix to identify it as an image layer. Figure 3 As shown in the figure, the layers framed by yellow lines on the left are all image-type layers, and the layers framed by yellow lines on the right are image-type layers set to corresponding image attributes. As shown in the figure, the user's avatar image in the figure can be associated with the "user name" text attribute. The name of the user name's text attribute is "user", so the image attribute of the avatar image is named "user-image", and the image can be retrieved by the user name. The image attribute of the large image in the middle of the card can be named "title-image", which is associated with the text attribute of the card's title text, and the image can be retrieved by the card's title text.

[0090] Reference Figure 4 , which is an example diagram of the bottom label bar of a card component design template provided in an embodiment of the present application. The icon layer in the design template is set to the icon attribute in the component attribute. The setting method is similar to the image layer. Both use the same prefix name as the associated text attribute to associate the icon attribute with its associated text attribute. Preferably, further, after using the same prefix name as the associated text attribute, add "-icon" to the suffix to identify it as an icon attribute. Figure 4 As shown, there are 4 category icons (also understood as category labels) in the bottom tab bar. Each category icon has a corresponding text layer and icon layer. Each category icon has a corresponding category copy, and the category copy includes text content that needs to be filled in the text layer.

[0091] For example, Figure 4For a tab bar component, the text-class layers corresponding to the text content in the classification copy of each classification icon can be set to "tabbar-item1", "tabbar-item2", "tabbar-item3", "tabbar-item4", and the corresponding icons can be set to "tabbar-item1-icon", "tabbar-item2-icon", "tabbar-item3-icon", "tabbar-item4-icon". There are a total of 4 classification icons in the figure. Assuming that the text-class layers corresponding to the text content in the four classification copies are filled with "Home", "Discover", "Message", and "My", the subsequent four icon-class layers are searched with "Home", "Discover", "Message", and "My" respectively, and a matching icon is found to fill in the corresponding placeholder layer in the template (blue and gray circles). At the same time, the filled icon inherits the previous color, size, transparency, rotation angle, etc. to ensure that it meets the design effect in the template.

[0092] S103: Obtain design description content, use a preset language generation model to process the design description content, and generate text content and image retrieval solutions for each text attribute.

[0093] The design description content is the content in the UI design drawing when the user designs it, as well as the existing text content in some text-type layers; when describing the UI design drawing designed by the user, the content in the drawing can be: description of the copy, description of the pictures used, application scenarios of the designed pictures, etc. It should be noted that some text-type layers do not need to generate text content later, such as named component buttons, text-type layers in category icons, etc. For image attributes that already have text content, the text content can be directly used as the copy content of the text attribute.

[0094] Input the design description content into a preset language generation model so that the language model processes the design description content to generate the text content and image retrieval scheme for each text attribute. It should be noted that when there is no associated image attribute for a text attribute, the content of the image retrieval scheme for the text attribute is empty. When there are multiple associated image attributes for a text attribute, the image retrieval scheme contains retrieval sub-schemes for the image attributes associated with the text attribute. Furthermore, the text content of the text attribute is the text content that needs to be filled in at the location of the text attribute in the design template.

[0095] Preferably, the language generation model may be an LLM model.

[0096] S104: For each image attribute, based on the image retrieval scheme of the text attribute associated with it, retrieve the corresponding image.

[0097] For each image attribute, a retrieval sub-scheme of the image attribute is determined in the image retrieval scheme of the text attribute associated therewith; a picture library is determined based on the retrieval sub-scheme, and the retrieval sub-scheme is applied to retrieve pictures corresponding to the image attribute in the picture library.

[0098] Preferably, the retrieval sub-scheme includes a scheme identifier, a database identifier, and an image retrieval strategy. Preferably, for each image attribute, the ID identifier of the image attribute can be matched with the scheme identifiers of each retrieval sub-scheme in the image retrieval scheme, and the retrieval sub-scheme corresponding to the scheme identifier consistent with the ID identifier of the image attribute is determined as the retrieval sub-scheme of the image attribute, and then the database identifier in the retrieval sub-scheme is applied to determine the image library, and then the image retrieval strategy in the retrieval sub-scheme is applied to retrieve images in the image library.

[0099] In order to improve the accuracy of image retrieval, different image attributes may apply to different image libraries. For example, the image library applied to image attributes that require faces is the face image library, the image library applied to image attributes that require landscape images is the landscape image library, and the image library applied to image attributes that require animals is the animal image library.

[0100] Preferably, the image retrieval strategy includes keywords or feature data used when performing image retrieval. The keywords or feature data are obtained based on the relevant text content of the image required by the image attribute, so as to improve the accuracy of retrieving images in the image library. For example, the keywords or feature data can be obtained from the content filled in the text attribute associated with the image attribute. Exemplarily, if the content filled in the text attribute associated with the image attribute is fresh apple, the keywords or feature data in the image retrieval strategy of the image attribute can be: apple, fresh, fresh apple.

[0101] Retrieve images matching the keywords or feature data in the image library. For example, determine the similarity between each image in the image library and the keyword, and the image with the highest similarity can be used as the image corresponding to the image attribute.

[0102] S105: Fill the text content of each text attribute into the target design template, and fill the picture of each image attribute into the target design template to generate a UI design drawing required by the user.

[0103] For each text attribute, fill the text content of the text attribute into the layer corresponding to the text attribute in the design template.

[0104] When filling the pictures of each image attribute, various design parameters of each image attribute are obtained; for each image attribute, the picture of the image attribute is processed based on the various design parameters of the image attribute, and the processed picture is filled into the placeholder of the image attribute in the target design template.

[0105] It should be noted that each image attribute has various design parameters, and each design parameter is at least one of the following contents, such as size, rounded corner size, transparency, shadow attribute, rotation angle, and color.

[0106] The processed images better meet the requirements of image attributes. For example, the size of the processed images meets the requirements, avoiding the situation where the images are too large to be filled into the target design template, and also avoiding the situation where the images are too small to be filled into the target design template and have poor effects. The processed images can better meet the design effects of image attributes, so that the effects of the subsequently generated UI design drawings can be perfectly presented, so that the UI design drawings can meet the needs of users, and quickly generate UI design drawings that meet the needs of users, greatly reducing the time cost of users editing texts and finding fill-in images, and improving the design efficiency of users.

[0107] Preferably, after filling the text content of each text attribute into the target design template, and filling the picture of each image attribute into the target design template, a UI design drawing is generated, and the UI design drawing can be displayed to the user on the user's front-end interface so that the user can preview the UI design drawing. When the user is satisfied, the UI design drawing can be directly saved. If the user is not satisfied, the picture and text content displayed in the UI design drawing can be directly modified on the front-end interface.

[0108] In the method provided in the embodiment of the present application, a target design template is determined based on user design requirements, and each layer in the target design template is set as a component attribute, which is a text attribute or an image attribute; for each image attribute, the image attribute is associated with the text attribute corresponding thereto; the design description content is obtained, and the design description content is processed using a preset language generation model to generate text content and an image retrieval scheme for each text attribute; for each image attribute, the corresponding image is retrieved based on the image retrieval scheme of the text attribute associated therewith; the text content of each text attribute is filled into the target design template, and the image of each image attribute is filled into the target design template to generate the UI design drawing required by the user. By setting each layer in the target design template as a component attribute, the component attribute is a text attribute or an image attribute, and then associating the image attribute with the text attribute, the text attribute's copy content and image retrieval scheme are subsequently generated. For the image attribute, the image retrieval scheme of the text attribute associated with it is used to determine the image corresponding to the image attribute; then the text attribute's copy content is filled into the position of the text attribute in the target design template, and the image attribute's copy content is filled into the position of the image attribute in the target design template, thereby generating a UI design drawing. In this way, a UI design drawing can be quickly generated for the user, effectively reducing the user's time cost of editing copy and finding fill-in images, and improving design efficiency.

[0109] Reference Figure 5 , is an example diagram of generating a UI design diagram provided by an embodiment of the present application. As shown in the figure, after determining the design template, each layer in the design template is set as a component attribute, and each component attribute is associated, such as Figure 4 As shown in the figure, each component attribute is: Product1-name, Product1-description, Product1-name-image, Product2-name, Product2-description, Product2-name-image, User1-name, User1-age, User1-name-image, User2-name, User2-age, User2-name-image; it should be noted that the name of each component attribute is used to represent each component attribute, and the association between each component can be seen from the name of each component attribute. Each component attribute is classified into component attributes of text attributes and component attributes of image attributes, such as Figure 5As shown, each text attribute is: Product1-name, Product1-description, Product2-name, Product2-description, User1-name, User1-age, User2-name, User2-age; each image attribute is: Product1-name-image, Product2-name-image, User1-name-image, User2-name-image. Use the language generation model to process the design description content to obtain the text content and image retrieval scheme of each text attribute; for each image attribute, determine the retrieval sub-scheme of the image attribute in the image retrieval scheme corresponding to the text attribute, and then use the retrieval sub-scheme to retrieve the image of the image attribute; for each text attribute, fill the text content of the text attribute into the position corresponding to the text attribute in the design template; for each image attribute, fill the image of the image attribute into the position corresponding to the image attribute in the design template, so that the UI design image can be obtained.

[0110] Reference Figure 3-Figure 4 , is an example of the input design template, refer to Figure 6 ,and Figure 3 The design template shown corresponds to the sample image of the UI design diagram, refer to Figure 7 , for Figure 4 The example diagram of the UI design diagram corresponding to the design template shown is a diagram that can be used as the UI design diagram of the bottom tab bar.

[0111] In the method provided in the embodiment of the present application, the quality of the generated UI design image is improved by filling the corresponding content for the layers such as text, pictures, icons, etc. in the template. By applying this solution, a series of processing is performed on each design template, and each layer of the design template is processed into component attributes, and then the corresponding information is filled in these component attributes using the capabilities of the LLM model, thereby greatly improving the quality of the generated content, making the generated UI design image closer to the level of high-fidelity design drawings, and effectively reducing the cost of designers editing text and retrieving images.

[0112] To support Figure 1 The implementation of the method described above, the embodiment of the present application also provides a device for generating a UI design diagram, the device is set in a computer, a server or a processor, and is used to support Figure 1 Specific implementation of the method shown.

[0113] Reference Figure 8 , is a schematic diagram of the structure of a device for generating a UI design diagram provided in an embodiment of the present application, and is specifically described as follows:

[0114] A setting unit 501 is used to determine a target design template based on a user design requirement, and set each layer in the target design template as a component attribute, where the component attribute is a text attribute or an image attribute;

[0115] An associating unit 502 is used to associate each of the image attributes with a corresponding text attribute;

[0116] The acquisition unit 503 is used to acquire the design description content, process the design description content using a preset language generation model, and generate the text content and image retrieval scheme for each of the text attributes;

[0117] A retrieval unit 504 is used to retrieve a corresponding picture for each of the image attributes based on a picture retrieval scheme of the text attribute associated with the image attribute;

[0118] The filling unit 505 is used to fill the text content of each of the text attributes into the target design template, and fill the picture of each of the image attributes into the target design template, so as to generate the UI design drawing required by the user.

[0119] In the device provided in the embodiment of the present application, a target design template is determined based on user design requirements, and each layer in the target design template is set as a component attribute, which is a text attribute or an image attribute; for each image attribute, the image attribute is associated with the text attribute corresponding thereto; the design description content is obtained, and the design description content is processed using a preset language generation model to generate text content and an image retrieval scheme for each text attribute; for each image attribute, the corresponding image is retrieved based on the image retrieval scheme of the text attribute associated therewith; the text content of each text attribute is filled into the target design template, and the image of each image attribute is filled into the target design template to generate the UI design drawing required by the user. By setting each layer in the target design template as a component attribute, the component attribute is a text attribute or an image attribute, and then associating the image attribute with the text attribute, the text attribute's copy content and image retrieval scheme are subsequently generated. For the image attribute, the image retrieval scheme of the text attribute associated with it is used to determine the image corresponding to the image attribute; then the text attribute's copy content is filled into the position of the text attribute in the target design template, and the image attribute's copy content is filled into the position of the image attribute in the target design template, thereby generating a UI design drawing. In this way, a UI design drawing can be quickly generated for the user, effectively reducing the user's time cost of editing copy and finding fill-in images, and improving design efficiency.

[0120] In another embodiment provided by the present application, the setting unit 501 of the device performs the process of determining the target design template based on the user design requirement, including:

[0121] Obtaining the design requirements input by the user;

[0122] Matching each design template corresponding to the design requirement in a preset template library;

[0123] Each of the design templates is displayed to the user, and the design template selected by the user is used as the target design template.

[0124] In another embodiment provided by the present application, the associating unit 502 of the device performs the process of associating the image attribute with the corresponding text attribute for each image attribute, including:

[0125] For each of the image attributes, the text attribute corresponding thereto is determined as the target text attribute; a name identifier of each of the target text attributes is obtained, and the name of the image attribute is created using each of the name identifiers.

[0126] In another embodiment provided by the present application, the filling unit 505 of the device performs the process of filling the picture of each image attribute into the target design template, including:

[0127] Obtaining various design parameters of each of the image attributes;

[0128] For each of the image attributes, the image of the image attribute is processed based on various design parameters of the image attribute, and the processed image is filled into the position of the image attribute in the target design template.

[0129] In another embodiment provided by the present application, the retrieval unit 505 of the device executes the process of retrieving the corresponding picture for each of the image attributes based on the picture retrieval scheme of the text attribute associated therewith, including:

[0130] For each of the image attributes, a retrieval sub-scheme of the image attribute is determined in the image retrieval scheme of the text attribute associated therewith; a picture library is determined based on the retrieval sub-scheme, and the retrieval sub-scheme is applied to retrieve pictures corresponding to the image attribute in the picture library.

[0131] An embodiment of the present invention further provides a storage medium, which includes stored instructions, wherein when the instructions are executed, the device where the storage medium is located is controlled to execute the above-mentioned method for generating a UI design drawing.

[0132] The embodiment of the present invention further provides an electronic device, the structural diagram of which is shown in FIG. Fig. 9 As shown, it specifically includes a memory 601 and one or more instructions 602, wherein the one or more instructions 602 are stored in the memory 601 and are configured to be executed by one or more processors 603 to execute the one or more instructions to perform the above-mentioned method of generating a UI design diagram.

[0133] It should be noted that the information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant laws, regulations and standards of relevant countries and regions.

[0134] The specific implementation processes and derivative methods of the above-mentioned embodiments are all within the protection scope of the present invention.

[0135] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can refer to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system or system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can refer to the partial description of the method embodiment. The system and system embodiments described above are merely schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without creative work.

[0136] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0137] The above description of the disclosed embodiments enables one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for generating a UI design drawing, characterized in that: include: Determine a target design template based on user design requirements, and set each layer in the target design template as a component attribute, wherein the component attribute is a text attribute or an image attribute; For each of the image attributes, associating the image attribute with the text attribute corresponding thereto; Obtaining design description content, processing the design description content using a preset language generation model, and generating text content and image retrieval solutions for each of the text attributes; For each of the image attributes, based on the image retrieval scheme of the text attribute associated with the image attribute, retrieve the image corresponding to the image attribute; The text content of each of the text attributes is filled into the target design template, and the picture of each of the image attributes is filled into the target design template to generate the UI design drawing required by the user.

2. The method according to claim 1, characterized in that: Determining the target design template based on the user design requirements includes: Obtaining the design requirements input by the user; Matching each design template corresponding to the design requirement in a preset template library; Each of the design templates is displayed to the user, and the design template selected by the user is used as the target design template.

3. The method according to claim 1, characterized in that For each of the image attributes, associating the image attribute with the corresponding text attribute includes: For each of the image attributes, the text attribute corresponding thereto is determined as the target text attribute; a name identifier of each of the target text attributes is obtained, and the name of the image attribute is created using each of the name identifiers.

4. The method according to claim 1, characterized in that: Filling the picture of each of the image attributes into the target design template includes: Obtaining various design parameters of each of the image attributes; For each of the image attributes, the image of the image attribute is processed based on various design parameters of the image attribute, and the processed image is filled into the position of the image attribute in the target design template.

5. The method according to claim 1, characterized in that For each of the image attributes, based on the image retrieval scheme of the text attribute associated therewith, the corresponding image is retrieved, including: For each of the image attributes, a retrieval sub-scheme of the image attribute is determined in the image retrieval scheme of the text attribute associated therewith; a picture library is determined based on the retrieval sub-scheme, and the retrieval sub-scheme is applied to retrieve pictures corresponding to the image attribute in the picture library.

6. A device for generating a UI design drawing, characterized in that: include: A setting unit, used to determine a target design template based on a user design requirement, and set each layer in the target design template as a component attribute, wherein the component attribute is a text attribute or an image attribute; an associating unit, for associating, for each of the image attributes, the image attribute with a corresponding text attribute; An acquisition unit, used to acquire design description content, process the design description content using a preset language generation model, and generate text content and an image retrieval scheme for each of the text attributes; A retrieval unit, configured to retrieve, for each of the image attributes, a picture corresponding to the image attribute based on a picture retrieval scheme of the text attribute associated therewith; A filling unit is used to fill the text content of each of the text attributes into the target design template, and fill the picture of each of the image attributes into the target design template, so as to generate the UI design drawing required by the user.

7. The device according to claim 6, characterized in that The process of the setting unit performing the determination of the target design template based on the user design requirement includes: Obtaining the design requirements input by the user; Matching each design template corresponding to the design requirement in a preset template library; Each of the design templates is displayed to the user, and the design template selected by the user is used as the target design template.

8. The device according to claim 6, characterized in that The associating unit performs the process of associating each of the image attributes with the corresponding text attribute, including: For each of the image attributes, the text attribute corresponding thereto is determined as the target text attribute; a name identifier of each of the target text attributes is obtained, and the name of the image attribute is created using each of the name identifiers.

9. A storage medium, characterized in that: The storage medium includes stored instructions, wherein when the instructions are executed, the device where the storage medium is located is controlled to execute the method for generating a UI design diagram according to any one of claims 1 to 5.

10. An electronic device, characterized in that: It comprises a memory and one or more instructions, wherein the one or more instructions are stored in the memory and are configured to be executed by one or more processors to perform the method for generating a UI design diagram as described in any one of claims 1-5.

Images