CN113296767B

CN113296767B - UI component generation method and device and user interface processing method and device

Info

Publication number: CN113296767B
Application number: CN202010265678.8A
Authority: CN
Inventors: 李凯琪
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2020-04-07
Filing date: 2020-04-07
Publication date: 2024-07-02
Anticipated expiration: 2040-04-07
Also published as: CN113296767A

Abstract

The invention discloses a method and a device for generating a UI component and a method and a device for processing a user interface, relates to the technical field of computers, and can solve the problem of low development efficiency of the UI component in the prior art. The method mainly comprises the following steps: analyzing the UI component design manuscript, wherein the analysis result comprises at least one UI module, a module code of the UI module and a user characteristic identifier corresponding to the UI module; the UI module comprises a functional block in the UI component design manuscript; acquiring user data of at least one user; determining a user characteristic identifier of a data processing scene corresponding to each user according to the user data of each user; searching a module code corresponding to the user characteristic identifier; and reorganizing the searched module codes to form the component codes of the reorganized UI components. The method and the device are mainly applicable to the scene of automatic recombination of the UI components.

Description

UI component generation method and device and user interface processing method and device

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a method and an apparatus for generating a UI component, and a method and an apparatus for processing a user interface.

Background

The User Interface (UI) refers to an operation Interface of a User, and is used for implementing man-machine interaction. In order to improve the development efficiency of the UI, the UI component capable of multiplexing is applied, that is, an application developer can apply the developed UI component to various web pages without repeated development.

In the current UI component development process, a visual designer firstly provides a design draft for an application developer, then the application developer analyzes the design draft, writes corresponding component codes, encapsulates a layer of user interface Model (User Interface Model, UI Model for short) mapping, data embedding points and the like on the corresponding component codes, and returns the processed data to a user terminal for display. When the personalized and diversified display of the UI components is required to be realized, manually writing component codes for each UI component is required to be re-packaged and processed. As can be seen, UI component development efficiency is relatively low at present.

Disclosure of Invention

In view of this, the method and device for generating the UI component and the method and device for processing the user interface provided by the invention aim to solve the problem of low development efficiency of the UI component in the prior art.

In a first aspect, the present invention provides a method for generating a UI component, where the method includes:

Analyzing the UI component design manuscript, wherein the analysis result comprises at least one UI module, a module code of the UI module and a user characteristic identifier corresponding to the UI module; the UI module comprises a functional block in the UI component design manuscript;

acquiring user data of at least one user;

Determining a user characteristic identifier of a data processing scene corresponding to each user according to the user data of each user;

searching a module code corresponding to the user characteristic identifier;

and reorganizing the searched module codes to form the component codes of the reorganized UI components.

Optionally, before acquiring the user data of the at least one user, the method further comprises:

constructing a UI feature table comprising a mapping relation among a module name, a module code and a user feature identifier of the UI module;

the searching the module code corresponding to the user characteristic identifier comprises the following steps:

And searching corresponding module codes from the UI feature table according to the user feature identification.

Optionally, searching the module code corresponding to the user feature identifier includes:

Searching a UI module corresponding to the user characteristic identifier;

recombining the searched UI modules to form a recombined UI component;

And searching corresponding module codes based on the module constitution information of the recombined UI component.

Optionally, the searching the corresponding module code based on the module formation information of the reorganized UI component includes: comprising the following steps:

Generating component composition description information based on the recombined UI components, wherein the component composition description information comprises module names of UI modules forming the recombined UI components;

Transmitting the component composition description information to a design code conversion service, so that the design code conversion service searches a corresponding module code according to the module name in the component composition description information;

The reorganizing the searched module codes to form the reorganized UI component codes comprises the following steps:

And the design code conversion service reorganizes the searched module codes to form the component codes of the reorganized UI component.

Optionally, the method further comprises:

acquiring a field model field required to be displayed by each module in the reorganized UI component;

Acquiring a user interface model field bound by a UI template corresponding to the reorganized UI component; the user interface model fields comprise fields used by the UI module when the user interface is displayed, and the user interface model fields are represented by field model fields with the same meaning when module codes are described;

establishing a mapping table of the field model field and the user interface model field;

and carrying out UI component projection on line based on the mapping table and the component codes of the reorganized UI component.

Optionally, the obtaining the domain model field required to be displayed by each module in the reorganized UI component includes:

And according to the module name of each UI module in the reorganized UI assembly, acquiring the domain model field required to be displayed by each UI module from a UI feature table comprising the mapping relation among the module name, the module code, the user feature identification and the domain model field of the module of the UI module.

Optionally, performing the ul component projection online based on the mapping table and the component code of the reorganized ul component includes:

And sending the mapping table and the component codes of the recombined UI components to corresponding user terminals so that the user terminals can display the UI components based on the mapping table and the component codes of the recombined UI components.

Optionally, determining, according to the user data of the user, a user feature identifier of the data processing scenario corresponding to the user includes:

And determining the user characteristic identification of the user corresponding to the data processing scene by inputting the user data of the user into a user characteristic decision model for analysis.

Optionally, the method further comprises:

based on the updated user feature identification and user data of the user, a user feature decision model is updated.

Optionally, the parsing the UI component design draft includes:

Splitting the UI component design manuscript to obtain at least one UI module;

generating corresponding module codes according to the design characteristics of the UI module;

And determining the user characteristic identification of the UI module according to the design characteristics of the UI module.

In a second aspect, the present invention provides a method for processing a user interface, the method comprising:

receiving a request for acquiring user interface data sent by a user terminal;

Acquiring user data of a user corresponding to the request, and acquiring an analysis result for analyzing a UI component design draft, wherein the analysis result comprises at least one UI module, a module code of the UI module and a user characteristic identifier corresponding to the UI module; the UI module comprises a functional block in the UI component design manuscript;

determining a user characteristic identifier of the data processing scene corresponding to the user according to the user data;

searching a module code corresponding to the user characteristic identifier from the analysis result;

Recombining the searched module codes to form the component codes of the recombined UI component;

Acquiring a mapping table of field model fields and user interface model fields required to be displayed by each UI module in the reorganized UI component; the user interface model fields comprise fields used by the UI module when the user interface is displayed, and the user interface model fields are represented by field model fields with the same meaning when module codes are described;

And sending the mapping table and the component codes of the recombined UI components to a user terminal so that the user terminal can display the UI components based on the mapping table and the component codes of the recombined UI components.

In a third aspect, the present invention provides a device for generating a UI component, the device including:

The analysis unit is used for analyzing the UI component design manuscript, and the analysis result comprises at least one UI module, a module code of the UI module and a user characteristic identifier corresponding to the UI module; the UI module comprises a functional block in the UI component design manuscript;

An acquisition unit configured to acquire user data of at least one user;

The determining unit is used for determining the user characteristic identification of the data processing scene corresponding to each user according to the user data of each user;

the searching unit is used for searching the module code corresponding to the user characteristic identifier;

and the reorganization unit is used for reorganizing the searched module codes to form the component codes of the reorganized UI component.

Optionally, the apparatus further includes:

the construction unit is used for constructing a UI feature table comprising a mapping relation among a module name, a module code and a user feature identifier of the UI module before acquiring user data of at least one user;

and the searching unit is used for searching the corresponding module codes from the UI characteristic table according to the user characteristic identifier.

Optionally, the search unit includes:

the searching module is used for searching the UI module corresponding to the user characteristic identifier;

the reorganization module is used for reorganizing the searched UI modules to form reorganized UI components;

the searching module is further used for searching corresponding module codes based on the module constitution information of the recombined UI component.

Optionally, the search module is configured to generate component composition description information based on the reassembled UI component, where the component composition description information includes a module name of a UI module that forms the reassembled UI component; transmitting the component composition description information to a design code conversion service, so that the design code conversion service searches a corresponding module code according to the module name in the component composition description information;

and the reorganization unit is used for reorganizing the searched module codes by the design code conversion service to form the component codes of the reorganized UI component.

Optionally, the acquiring unit is further configured to acquire a domain model field required to be displayed by each module in the reassembled UI component; acquiring a user interface model field bound by a UI template corresponding to the reorganized UI component; the user interface model fields comprise fields used by the UI module when the user interface is displayed, and the user interface model fields are represented by field model fields with the same meaning when module codes are described;

The apparatus further comprises:

the building unit is used for building a mapping table of the field model field and the user interface model field;

And the delivery unit is used for carrying out UI component delivery on line based on the mapping table and the component codes of the reorganized UI components.

Optionally, the acquiring unit is configured to acquire, according to the module name of each UI module in the reorganized UI module, a domain model field required to be displayed by each UI module from a UI feature table including a mapping relationship among the module name, the module code, the user feature identifier, and the domain model field of the module of the UI module.

Optionally, the releasing unit is configured to send the mapping table and the component code of the reassembled UI component to a corresponding user terminal, so that the user terminal performs UI component display based on the mapping table and the component code of the reassembled UI component.

Optionally, the determining unit is configured to determine a user feature identifier of the user corresponding to the data processing scenario by inputting user data of the user into a user feature decision model for analysis.

Optionally, the apparatus further includes:

And the updating unit is used for updating the user characteristic decision model based on the updated user characteristic identification and the user data of the user.

Optionally, the parsing unit includes:

The splitting module is used for splitting the UI component design manuscript to obtain at least one UI module;

the generating module is used for generating corresponding module codes according to the design characteristics of the UI module;

and the determining module is used for determining the user characteristic identification of the UI module according to the design characteristics of the UI module.

In a fourth aspect, the present invention provides a processing apparatus for a user interface, the apparatus comprising:

the receiving unit is used for receiving a request for acquiring user interface data sent by the user terminal;

The first acquisition unit is used for acquiring user data of a user corresponding to the request and acquiring an analysis result aiming at the UI component design draft, wherein the analysis result comprises at least one UI module, a module code of the UI module and a user characteristic identifier corresponding to the UI module; the UI module comprises a functional block in the UI component design manuscript;

the determining unit is used for determining a user characteristic identifier of the data processing scene corresponding to the user according to the user data;

the searching unit is used for searching the module code corresponding to the user characteristic identifier from the analysis result;

the reorganization unit is used for reorganizing the searched module codes to form the component codes of the reorganized UI components;

The second acquisition unit is used for acquiring a mapping table of the field model field and the user interface model field required to be displayed by each UI module in the reorganized UI component; the user interface model fields comprise fields used by the UI module when the user interface is displayed, and the user interface model fields are represented by field model fields with the same meaning when module codes are described;

And the sending unit is used for sending the mapping table and the component codes of the recombined UI components to the user terminal so that the user terminal can display the UI components based on the mapping table and the component codes of the recombined UI components.

In a fifth aspect, the present invention provides a storage medium storing a plurality of instructions adapted to be loaded by a processor and to perform a method as described in the first or second aspects.

In a sixth aspect, the present invention provides an electronic device comprising a storage medium and a processor;

the processor is suitable for realizing each instruction;

the storage medium is suitable for storing a plurality of instructions;

the instructions are adapted to be loaded by the processor and to perform the method as described in the first or second aspect.

By means of the technical scheme, the UI component generating method and device and the user interface processing method and device can split a UI component design draft into at least one UI module, automatically generate module codes of the UI modules and user characteristic identifiers corresponding to the UI modules, then determine the user characteristic identifiers of the users in the data processing scene according to user data of each user, search required UI modules according to the determined user characteristic identifiers and conduct recombination to obtain component codes of the recombined personalized UI components, and therefore the fact that one UI component design draft is automatically recombined into component codes of a plurality of UI components is achieved, manual coding is not needed, one-time design is not needed for each UI component, conversion from the design draft to the component codes is achieved, and development efficiency of the UI components is greatly improved.

The foregoing description is only an overview of the present invention, and is intended to be implemented in accordance with the teachings of the present invention in order that the same may be more clearly understood and to make the same and other objects, features and advantages of the present invention more readily apparent.

Drawings

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 drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to designate like parts throughout the figures. In the drawings:

Fig. 1 shows a flowchart of a method for generating a UI component according to an embodiment of the present invention;

FIG. 2 is a flowchart of a method for processing a user interface according to an embodiment of the present invention;

FIG. 3 is a schematic diagram of a method for processing a user interface according to an embodiment of the present invention;

FIG. 4 shows a block diagram of a generating device of a UI component according to an embodiment of the present invention;

FIG. 5 illustrates a block diagram of another UI component generating apparatus provided by an embodiment of the invention;

Fig. 6 shows a block diagram of a processing device for a user interface according to an embodiment of the present invention.

Detailed Description

Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

In order to improve development efficiency of a UI component, an embodiment of the present invention provides a method for generating a UI component, as shown in fig. 1, where the method includes:

101. And analyzing the UI component design manuscript, wherein the analysis result comprises at least one UI module, a module code of the UI module and a user characteristic identifier corresponding to the UI module.

Wherein a UI component is a component applied to a user interface that includes one or more independent functional blocks. One functional block may be referred to as a UI module, that is, the UI module includes one functional block in the UI component design draft, and each functional block may be used independently. For example, the UI component design script may include a photo module, a text linking module, and the like. The module code of the UI module is a code segment for describing the functions of the UI module.

User characteristic identifiers are identifiers designed to categorize users, for example, in a data processing scenario, users may be categorized into price-sensitive, quality-sensitive, service-sensitive, and origin-sensitive types. When the visual designer performs component design based on component design software (such as sktech), the UI module may be designed according to the user feature identifier, for example, a certain picture module is designed to be quality sensitive. In specific implementation, the user characteristic identifier can be added into the UI component design manuscript so as to analyze the user characteristic identifier from the UI component design manuscript later; or the application developer can determine which user characteristic identifier each UI module belongs to through communicating with a visual designer; or identifying the user characteristic identifiers of the UI modules in the UI component design draft by using a user characteristic identification model, wherein the user characteristic identification model is obtained by training a neural network model of a large number of UI modules added with user characteristic identification labels.

The specific implementation manner of the step can be as follows: splitting the UI component design manuscript to obtain at least one UI module; generating corresponding module codes according to the design characteristics of the UI module; and determining the user characteristic identification of the UI module according to the design characteristics of the UI module.

The automatic conversion of design manuscripts into module codes can be realized by a design code conversion service. The automatic transition implementation logic includes, but is not limited to, the following methods: generating a description file according to a UI module, wherein the description file comprises key value pairs corresponding to parameters of the UI module; and generating a code corresponding to the key value. The description file is a description file in a JS object numbered musical notation (JavaScript ObjectNotation, JSON) format. The parameters of the UI module may be attribute parameters of shape, color value, length and width, spacing, and so on.

It should be added that, since different UI modules may be designed based on the same type of user in the same data processing scenario, one UI module corresponds to one user feature identifier, but one user feature identifier may correspond to a plurality of UI modules.

In addition, the module code of the UI module may be Domain-specific language (Domain-Dpecific Language, abbreviated as DSL) code, or may be other code. In the case of a DSL code, the specific implementation of the DSL code may be DinamicX, rax, react, vue or the like.

102. User data of at least one user is acquired.

The at least one user may be a user who issues a UI component acquisition request, or may be a user who the server wants to actively recommend a UI component. The user data includes user identity characteristics, user behavior characteristics, preferences, and the like.

103. And determining the user characteristic identification of the data processing scene corresponding to the user according to the user data of the user.

Because the user data of the user contain data about user identity characteristics, user behavior characteristics, preferences and the like, the user characteristic identification of the user in a data processing scene corresponding to the user data can be determined by analyzing the user data. For example, if the user identity of the user in a certain data processing scenario is middle-aged male, if the user is classified according to age and gender, and the user identity of the age plus gender is preset, then it may be determined that the user identity of the user is middle-aged male.

In order to improve accuracy and efficiency of determining the user feature identifiers, a user feature decision model can be obtained in advance by performing model training on a large amount of user data and preset user feature identifiers as training samples, and then when the user feature identifiers need to be decided, the user feature identifiers of the users in the data processing scene can be determined only by inputting the user data of each user into the user feature decision model for analysis. In particular, a user feature decision model may be trained for each data processing scenario, or a generic user feature decision model may be trained for all data processing scenarios.

With the increase of data processing scenarios and the update of data processing scenarios within the data processing scenarios, the types of user feature identifiers also increase. In order to further improve the accuracy of user feature identification, the user feature decision model may be updated based on the updated user feature identification and the updated user data of the user.

104. And searching a module code corresponding to the user characteristic identifier.

Since the UI module, the module code corresponding to the UI module, and the user feature identifier allocated to the UI module are obtained by parsing the UI component design draft in step 101, the module code corresponding to the UI module can be queried according to the user feature identifier determined in step 103.

In particular implementations, the module code may be queried directly from the user characteristic identification determined in step 103; or firstly querying the UI module through the user characteristic identification, firstly recombining the UI module into the UI component according to the UI module, then determining the module code of the UI component, and respectively delivering the UI component to the two service systems which are mutually decoupled. Specifically, the first service system searches a UI module corresponding to the user characteristic identifier of the user in the data processing scene; the first service system reorganizes the searched UI modules to form reorganized UI components; the first service system generates component composition description information based on the recombined UI components, wherein the component composition description information comprises module names of UI modules forming the recombined UI components; and the first service system sends the component composition description information to the second service system, so that the second service system searches the corresponding module codes according to the module names in the component composition description information.

Besides executing the steps, the first service system may execute "splitting the UI component design draft to obtain at least one UI module", "obtaining user data of at least one user", and the like, which are irrelevant to the design transcoding. The second service system may be the design transcoding service mentioned in step 101.

The component composition description information may be described in json form or may be described in terms of fields, and the specific definition forms thereof are not limited herein.

105. And reorganizing the searched module codes to form the component codes of the reorganized UI components.

The searched module codes can be recombined by the design code conversion service to form the component codes of the recombined UI component, so that the component codes are put on line after field mapping, data embedding and other processing.

For example, if the UI component design draft designed by the visual designer includes the UI module 1, the UI module 2, the UI module 3 and the UI module 4, according to the embodiment of the invention, the UI components required by the user can be automatically reconstructed according to the user characteristics of different users. For example, the UI component of the user 1 is constituted by the UI module 1, the UI module 2, and the UI module 3, and the UI component of the user 2 is constituted by the UI module 2 and the UI module 4.

According to the UI component generating method provided by the embodiment of the invention, one UI component design draft can be split into at least one UI module, the module codes of the UI modules and the user characteristic identifiers corresponding to the UI modules are automatically generated, then the user characteristic identifiers of the users in the data processing scene are determined according to the user data of each user, and the required UI modules are searched for and recombined according to the determined user characteristic identifiers to obtain the component codes of the recombined personalized UI components, so that the automatic recombination of the UI component design draft into the component codes of a plurality of UI components is realized, manual coding is not needed, one-time design is not needed for each UI component, the conversion from the design draft to the component codes is realized, and the development efficiency of the UI components is greatly improved.

Optionally, in practical application, since the types of users and the data processing scenes are more, the user feature identifiers are more, in order to facilitate the searching of the modules or the module codes, after the UI component design draft is parsed to obtain at least one UI module, the module codes of the UI module and the user feature identifiers corresponding to the UI module, the mapping relationship between the information can be stored in the form of a data table, that is, a UI feature table including the mapping relationship between the module names of the UI module, the module codes and the user feature identifiers can be constructed, and when the module codes need to be searched, the corresponding module codes can be searched from the UI feature table according to the user feature identifiers of the users in the data processing scenes. Specifically, firstly, according to the user characteristic identifier of the user in the data processing scene, searching a UI module corresponding to the user characteristic identifier of the user in the data processing scene from a UI characteristic table, and recombining the searched UI module to form a recombined UI component; generating component composition description information based on the recombined UI components; and sending the component composition description information to a design code conversion service, so that the design code conversion service searches corresponding module codes from a UI feature table according to the module names in the component composition description information.

And because the user characteristic identifiers set by different data processing scenes are different, different UI characteristic tables can be established aiming at different data processing scenes, the UI characteristic tables can be conveniently expanded later, the UI characteristic tables of different data processing scenes can be combined into one aggregation table, the simultaneous inquiry aiming at various data processing scenes is facilitated, and the inquiry efficiency is improved.

By way of example, a UI characteristics table may be as shown in table 1.

TABLE 1

Optionally, when the UI component specifically displays, fields need to be displayed, for example, the picture module needs to display a picture title, the text link module needs to display a text link name, and so on, so after the reorganization UI component obtains the component code, each UI module in the reorganization UI component needs to be configured with a field for subsequent display. However, the field used for presentation is the UI Model field, and the original field stored in encoding is the Domain Model field, and in implementation, a mapping relationship between the two fields needs to be established, so that the Domain Model field can be quickly queried from the UI Model field when UI component presentation is performed later.

Specifically, domain Model fields required to be displayed by each module in the reorganized UI component may be obtained first; then, a UI Model field bound by the UI template corresponding to the reorganized UI component is obtained; then, a mapping table of the UI Model field and the Domain Model field is established; and finally, carrying out UI component projection on-line based on the mapping table and the component codes of the recombined UI component.

The UI template is used for describing UI component information and can be maintained by a special template platform, so that after the component codes of the recombined UI components are obtained, the component codes can be issued to the template platform by the design code conversion service, the corresponding UI template is used for maintaining the component codes by the template platform, and a mapping table of UI Model fields and Domain Model fields is established. The embodiment of the invention has a plurality of UI templates, and each UI template respectively maintains one UI component, but not a plurality of UI components of various logics, so that the problem of low subsequent rendering efficiency does not exist.

The specific implementation manner of acquiring the Domain Model field required to be displayed by each module in the reorganized UI component may be: and acquiring Domain Model fields required to be displayed by each UI module from a UI feature table comprising the mapping relation among the module names, the module codes, the user feature identifiers and the Domain Model fields of the UI modules according to the module names of each UI module in the reorganized UI module. That is, the UI feature table may include a Domain Model field in addition to the module name, the module code, and the user feature identifier, and may be directly queried from the UI feature table when querying the Domain Model field. The UI characteristics table may be changed from table 1 to table 2.

TABLE 2

Module name	Module code	User feature identification	Domain Model field
				Module 1	Code of module 1	Sign 1	Domain Model 1
…	…	…	…

The specific implementation manner of performing the ul component putting online based on the mapping table and the component code of the reorganized ul component may be: and sending the mapping table and the component codes of the recombined UI components to corresponding user terminals so that the user terminals can display the UI components based on the mapping table and the component codes of the recombined UI components.

The template platform can firstly send the mapping table and the assembly codes of the recombined UI assemblies to the UI assembly building platform, and then the UI assembly building platform sends the mapping table and the assembly codes of the recombined UI assemblies to user terminals of corresponding users, so that the user terminals can conduct rendering and displaying through the end measurement dynamic container, and the framework performs unified data embedding and embedding data reflow operation.

It should be noted that the user terminal may be a mobile terminal or a non-mobile terminal.

Further, according to the above method embodiment, the embodiment of the present invention provides a method for processing a user interface, as shown in fig. 2 and fig. 3, where the method is mainly applied to a server, and the method includes:

201. and receiving a request for acquiring the user interface data sent by the user terminal.

The request sent by the user terminal comprises a user identifier, a website and the like.

202. And acquiring user data of the user corresponding to the request, and acquiring an analysis result for analyzing the UI component design draft.

Since the request includes the user identification, the user data of the user, such as user behavior data, preferences, etc., may be looked up from a history of the server (e.g., user data stored in a database) based on the user identification.

The analysis result comprises at least one UI module, a module code of the UI module and a user characteristic identifier corresponding to the UI module; the UI module comprises a functional block in the UI component design manuscript.

203. And determining the user characteristic identification of the data processing scene corresponding to the user according to the user data.

204. And searching a module code corresponding to the user characteristic identifier from the analysis result.

Fig. 3 is an example of a module code being searched from a UI feature table established based on the analysis result. The relevant content of the UI feature table may refer to the above embodiment, and will not be described herein.

205. And reorganizing the searched module codes to form the component codes of the reorganized UI components.

In fig. 3, the module codes of N UI modules are found, and the module codes of the N UI modules are reorganized.

206. And acquiring a mapping table of the field model field and the user interface model field required to be displayed by each UI module in the reorganized UI component.

The user interface model fields comprise fields used by the UI module when the user interface is presented, and the user interface model fields are represented by the field model fields with the same meaning when the module codes are described.

The specific implementation manner of establishing the mapping table may refer to the above embodiment, and will not be described herein.

207. And sending the mapping table and the component codes of the recombined UI components to a user terminal so that the user terminal can display the UI components based on the mapping table and the component codes of the recombined UI components.

After receiving the mapping table and the component codes of the recombined UI component, the user terminal can execute the component codes, and in the process of executing the component codes, obtain user interface model fields corresponding to the field model fields indicated to be displayed in the codes from the mapping table so as to realize rendering and displaying of the UI component.

According to the processing method of the user interface, after receiving the request for acquiring the user interface data sent by the user terminal, the UI component design draft can be utilized to reconstruct and generate the component codes of the UI components matched with the user, and the mapping table of the domain model field and the user interface model field required to be displayed by each UI module in the reconstructed UI components, and then the mapping table and the component codes of the reconstructed UI components are sent to the user terminal, so that the user terminal can display the UI components based on the mapping table and the component codes of the reconstructed UI components, and therefore the automatic reconstruction of the UI component design draft into the component codes of the user personalized UI components is achieved, manual coding is not needed, one-time design is not needed for each UI component, conversion from the design draft to the component codes is achieved, and further the development efficiency of the UI components is greatly improved.

Further, according to the above method embodiment, another embodiment of the present invention further provides a device for generating a UI component, as shown in fig. 4, where the device includes:

The parsing unit 31 is configured to parse the UI component design draft, where the parsing result includes at least one UI module, a module code of the UI module, and a user feature identifier corresponding to the UI module; the UI module comprises a functional block in the UI component design manuscript;

an acquisition unit 32 for acquiring user data of at least one user;

a determining unit 33, configured to determine a user feature identifier of the data processing scenario corresponding to the user according to user data of the user;

a searching unit 34, configured to search a module code corresponding to the user feature identifier;

and the reorganizing unit 35 is configured to reorganize the searched module codes to form component codes of the reorganized UI component.

Optionally, as shown in fig. 5, the apparatus further includes:

A construction unit 36 for constructing a UI feature table including a mapping relationship between a module name, a module code, and a user feature identifier of the UI module before acquiring user data of at least one user;

the searching unit 34 is configured to search for a corresponding module code from the UI feature table according to the user feature identifier.

Optionally, as shown in fig. 5, the searching unit 34 includes:

A searching module 341, configured to search a UI module corresponding to the user feature identifier;

The reorganization module 342 is configured to reorganize the found UI module to form a reorganized UI component;

The searching module 341 is further configured to search a corresponding module code based on the module configuration information of the reorganized UI component.

Optionally, the lookup module 341 is further configured to generate component composition description information based on the reassembled UI component, where the component composition description information includes a module name of a UI module that forms the reassembled UI component; transmitting the component composition description information to a design code conversion service, so that the design code conversion service searches a corresponding module code according to the module name in the component composition description information;

the reorganizing unit 35 is configured to reorganize the found module codes by the design code conversion service, and form component codes of the reorganized UI component.

Optionally, the obtaining unit 32 is further configured to obtain a domain model field required to be displayed by each module in the reassembled UI component; acquiring a user interface model field bound by a UI template corresponding to the reorganized UI component; the user interface model fields comprise fields used by the module when the user interface is displayed, and the user interface model fields are represented by field model fields with the same meaning when the module codes are described;

as shown in fig. 5, the apparatus further includes:

a building unit 37, configured to build a mapping table of the domain model field and the user interface model field;

and a throwing unit 38, configured to throw the UI component on line based on the mapping table and the component code of the reorganized UI component.

Optionally, the obtaining unit 32 is configured to obtain, according to the module name of each UI module in the reorganized UI component, a domain model field required to be displayed by each UI module from a UI feature table including a mapping relationship among the module name, the module code, the user feature identifier, and the domain model field of the module of the UI module.

Optionally, the releasing unit 38 is configured to send the mapping table and the component codes of the reassembled UI component to a corresponding user terminal, so that the user terminal performs UI component display based on the mapping table and the component codes of the reassembled UI component.

Optionally, the determining unit 33 is configured to determine a user feature identifier of the user corresponding to the data processing scenario by inputting user data of the user into a user feature decision model for analysis.

Optionally, as shown in fig. 5, the apparatus further includes:

An updating unit 39 for updating the user feature decision model based on the updated user feature identification and the user data of the user.

Optionally, as shown in fig. 5, the parsing unit 31 includes:

The splitting module 311 is configured to split the UI component design draft to obtain at least one UI module;

a generating module 312, configured to generate a corresponding module code according to the design feature of the UI module;

And the determining module 313 is used for determining the user characteristic identification of the UI module according to the design characteristics of the UI module.

According to the UI component generating device provided by the embodiment of the invention, one UI component design draft can be split into at least one UI module, the module codes of the UI modules and the user characteristic identifiers corresponding to the UI modules are automatically generated, then the user characteristic identifiers of the users in the data processing scene are determined according to the user data of each user, and the required UI modules are searched for and recombined according to the determined user characteristic identifiers, so that the component codes of the recombined personalized UI components are obtained, and therefore, the automatic recombination of the UI component design draft into the component codes of a plurality of UI components is realized, not only the manual coding is not needed, but also the one-time design is not needed for each UI component, the conversion from the design draft to the component codes is realized, and further the development efficiency of the UI components is greatly improved.

Further, according to the above method embodiment, another embodiment of the present invention further provides a processing device for a user interface, as shown in fig. 6, where the device includes:

a receiving unit 41, configured to receive a request sent by a user terminal for acquiring user interface data;

a first obtaining unit 42, configured to obtain user data of a user corresponding to the request, and obtain an analysis result for analyzing a UI component design draft, where the analysis result includes at least one UI module, a module code of the UI module, and a user feature identifier corresponding to the UI module; the UI module comprises a functional block in the UI component design manuscript;

a determining unit 43, configured to determine, according to the user data, a user feature identifier of the user corresponding data processing scenario;

A searching unit 44, configured to search a module code corresponding to the user feature identifier from the analysis result;

A reorganizing unit 45, configured to reorganize the found module codes to form component codes of the reorganized UI component;

A second obtaining unit 46, configured to obtain a mapping table of domain model fields and user interface model fields required to be displayed by each UI module in the reorganized UI component; the user interface model fields comprise fields used by the UI module when the user interface is displayed, and the user interface model fields are represented by field model fields with the same meaning when module codes are described;

And a sending unit 47, configured to send the mapping table and the component codes of the reassembled UI component to the user terminal, so that the user terminal performs UI component display based on the mapping table and the component codes of the reassembled UI component.

According to the processing device of the user interface, after receiving the request for acquiring the user interface data sent by the user terminal, the UI component design draft can be utilized to reconstruct and generate the component codes of the UI components matched with the user, and the mapping table of the domain model field and the user interface model field required to be displayed by each UI module in the reconstructed UI components, and then the mapping table and the component codes of the reconstructed UI components are sent to the user terminal, so that the user terminal can display the UI components based on the mapping table and the component codes of the reconstructed UI components, and therefore the automatic reconstruction of the UI component design draft into the component codes of the user personalized UI components is achieved, manual coding is not needed, one-time design is not needed for each UI component, conversion from the design draft to the component codes is achieved, and further the development efficiency of the UI components is greatly improved.

Further, another embodiment of the present invention also provides a storage medium storing a plurality of instructions adapted to be loaded by a processor and to perform the method as described above.

Further, another embodiment of the present invention also provides an electronic device including a storage medium and a processor;

the processor is suitable for realizing each instruction;

the storage medium is suitable for storing a plurality of instructions;

the instructions are adapted to be loaded by the processor and to perform the method as described above.

In the foregoing embodiments, the descriptions of the embodiments are emphasized, and for parts of one embodiment that are not described in detail, reference may be made to related descriptions of other embodiments.

It will be appreciated that the relevant features of the methods and apparatus described above may be referenced to one another. In addition, the "first", "second", and the like in the above embodiments are for distinguishing the embodiments, and do not represent the merits and merits of the embodiments.

It will be clear to those skilled in the art that, for convenience and brevity of description, specific working procedures of the above-described systems, apparatuses and units may refer to corresponding procedures in the foregoing method embodiments, which are not repeated herein.

The algorithms and displays presented herein are not inherently related to any particular computer, virtual system, or other apparatus. Various general-purpose systems may also be used with the teachings herein. The required structure for a construction of such a system is apparent from the description above. In addition, the present invention is not directed to any particular programming language. It will be appreciated that the teachings of the present invention described herein may be implemented in a variety of programming languages, and the above description of specific languages is provided for disclosure of an embodiment of the present invention.

In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.

Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, various features of the invention are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be construed as reflecting the intention that: i.e., the claimed invention requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this invention.

Those skilled in the art will appreciate that the modules in the apparatus of the embodiments may be adaptively changed and disposed in one or more apparatuses different from the embodiments. The modules or units or components of the embodiments may be grouped into one module or unit or component and, in addition, they may be divided into a plurality of sub-modules or sub-units or sub-components. Any reorganization may be used to reorganize all features disclosed in the specification (including the accompanying claims, abstract and drawings), and all processes or units of any method or apparatus so disclosed, except insofar as at least some of such features and/or processes or units are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings), may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.

Furthermore, those skilled in the art will appreciate that while some embodiments described herein include some features but not others included in other embodiments, a reorganization of features of different embodiments is meant to be within the scope of the invention and form a different embodiment. For example, in the following claims, any of the claimed embodiments can be used in any of the recombinant ways.

Various component embodiments of the invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that a microprocessor or Digital Signal Processor (DSP) may be used in practice to implement some or all of the functions of some or all of the components of the method and apparatus for generating a UI component, the method and apparatus for processing a user interface, and the method and apparatus for processing a user interface according to embodiments of the present invention. The present invention can also be implemented as an apparatus or device program (e.g., a computer program and a computer program product) for performing a portion or all of the methods described herein. Such a program embodying the present invention may be stored on a computer readable medium, or may have the form of one or more signals. Such signals may be downloaded from an internet website, provided on a carrier signal, or provided in any other form.

It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments 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 invention may be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means may be embodied by one and the same item of hardware. The use of the words first, second, third, etc. do not denote any order. These words may be interpreted as names.

Claims

1. A method for generating a UI component, the method comprising:

acquiring user data of at least one user;

Determining the user characteristic identification of the data processing scene corresponding to the user according to the user data of the user, wherein the method comprises the following steps: determining a user characteristic identifier of the user corresponding to the data processing scene by inputting user data of the user into a user characteristic decision model for analysis;

searching a module code corresponding to the user characteristic identifier;

2. The method of claim 1, wherein prior to obtaining user data for at least one user, the method further comprises:

3. The method according to claim 1 or 2, wherein searching for a module code corresponding to the user characteristic identification comprises:

Searching a UI module corresponding to the user characteristic identifier;

recombining the searched UI modules to form a recombined UI component;

4. The method of claim 3, wherein the module code for searching for corresponding module code based on module configuration information of the reorganized UI component comprises:

5. The method according to claim 1, wherein the method further comprises:

acquiring a user interface model field bound by a UI template corresponding to the reorganized UI component; the user interface model fields comprise fields used by the UI module when the user interface is displayed, and the user interface field models are represented by field model fields with the same meaning when module codes are described;

6. The method of claim 5, wherein obtaining the domain model fields required to be exposed by each module in the reorganized UI component comprises:

7. The method of claim 5, wherein placing a UI component online based on the mapping table and component code of the reorganized UI component comprises:

8. The method according to claim 1, wherein the method further comprises:

9. The method of claim 1, wherein parsing the UI component design script comprises:

Splitting the UI component design manuscript to obtain at least one UI module;

10. A method of processing a user interface, the method comprising:

receiving a request for acquiring user interface data sent by a user terminal;

Determining the user characteristic identification of the data processing scene corresponding to the user according to the user data, wherein the method comprises the following steps: determining a user characteristic identifier of the user corresponding to the data processing scene by inputting user data of the user into a user characteristic decision model for analysis;

11. A generation apparatus of a UI component, the apparatus comprising:

An acquisition unit configured to acquire user data of at least one user;

A determining unit, configured to determine, according to user data of each user, a user feature identifier of a data processing scenario corresponding to the user, where the determining unit includes: determining a user characteristic identifier of the user corresponding to the data processing scene by inputting user data of the user into a user characteristic decision model for analysis;

12. A processing device for a user interface, the device comprising:

a determining unit, configured to determine, according to the user data, a user feature identifier of the data processing scenario corresponding to the user, where the determining unit includes: determining a user characteristic identifier of the user corresponding to the data processing scene by inputting user data of the user into a user characteristic decision model for analysis;

13. A storage medium storing a plurality of instructions adapted to be loaded by a processor and to perform the method of any one of claims 1 to 10.

14. An electronic device comprising a storage medium and a processor;

the processor is suitable for realizing each instruction;

the storage medium is suitable for storing a plurality of instructions;

The instructions being adapted to be loaded by the processor and to perform the method of any one of claims 1 to 10.