User interface service component design method and device, terminal and medium

Abstract

The invention discloses a user interface service component design method and device, a terminal and a medium. The method comprises the steps of obtaining an initial user interface service component; based on a preset service scene and the initial user interface service component, initial component content corresponding to the initial user interface service component is processed, target component content is obtained, and the initial component content comprises initial attribute content, initial method content and initial event content; and adjusting the initial user interface service component into a target user interface service component based on the target component content. The method and the device aim at analyzing the business scene which a user hopes to apply, and designing to obtain the corresponding interface business component according to the actual demand of the business scene.

Description

Technical Field

[0001] The present application relates to the field of user interface development, and in particular to a method, device, terminal and medium for designing user interface business components. Background Art

[0002] Platform independence refers to a feature of software or programming language design that allows the written program to run on a variety of different hardware or operating system platforms without the need for special modifications or recompilation for each platform. In the process of user interface development, cross-platform components can be built based on platform independence. User interface (UI) business component design is an important part of software development, involving the decomposition of complex business logic into reusable UI components. The main idea of ​​this design method is indeed based on in-depth analysis of the same business scenario and identifying all possible situations and change points.

[0003] However, the existing user interface business component design process includes the following shortcomings: different development teams or projects may adopt different design standards and patterns, resulting in poor compatibility and interoperability between components. In order to adapt to specific business needs, components are sometimes over-customized, which may cause components to become too complex and difficult to maintain and reuse. Summary of the invention

[0004] The main purpose of this application is to provide a user interface business component design method, device, terminal and medium, which aims to analyze the business scenarios that users want to apply, and design corresponding interface business components according to the actual needs of the business scenarios, so as to improve the design quality of user interface business components, development efficiency and user experience of subsequent products.

[0005] To achieve the above objectives, the present application provides a user interface business component design method, the method comprising:

[0006] Get the initial user interface business component;

[0007] Based on the preset business scenario and the initial user interface business component, the initial component content corresponding to the initial user interface business component is processed to obtain the target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modification state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered;

[0008] Based on the target component content, the initial user interface service component is adjusted to a target user interface service component.

[0009] Specifically, the target component content includes target attribute content, target method content and target event content;

[0010] The processing of the initial component content corresponding to the initial user interface business component based on the preset business scenario and the initial user interface business component to obtain the target component content includes:

[0011] Based on the preset business scenario and the initial user interface business component, setting the initial attribute content to obtain target attribute content;

[0012] Based on the preset business scenario and the initial user interface business component, setting the method content of the initial method content to obtain the target method content;

[0013] Based on the preset business scenario and the initial user interface business component, setting the event content for the initial event content to obtain target event content;

[0014] The target component content is determined based on the target attribute content, the target method content, and the target event content.

[0015] Specifically, the preset business scenario includes a preset user interface and preset loading data;

[0016] The step of setting the initial attribute content based on the preset business scenario and the initial user interface business component to obtain the target attribute content includes:

[0017] Based on the initial user interface business component, the preset user interface is divided and processed to obtain a user interface division result, wherein the user interface division result includes static division data and dynamic division data, the static division data is used to characterize the information that will not change in the preset user interface, and the dynamic division data is used to characterize the information displayed by the preset user interface based on the preset loaded data;

[0018] Parsing the user interface division result to obtain a division combination result, wherein the division combination result is used to represent a combination of different interface layout modes of a preset user interface;

[0019] Parsing the preset loading data to obtain a data display analysis result, wherein the data display analysis result is used to characterize different data display modes of the preset loading data in the preset user interface;

[0020] According to the division and combination result and the data display analysis result, the initial attribute content is set to obtain the target attribute content.

[0021] Specifically, the method content is set on the initial method content based on the preset business scenario and the initial user interface business component to obtain the target method content, including:

[0022] Based on the division and combination result and the data display analysis result, converting the initial method content into at least one intermediate method content;

[0023] The intermediate method content is encapsulated to obtain the target method content.

[0024] Specifically, the setting of event content for the initial event content based on the preset business scenario and the initial user interface business component to obtain the target event content includes:

[0025] Based on the target attribute content, encapsulate the exposed event content in the initial event content to obtain at least one intermediate event content to shield the event content definition in the initial user interface business component;

[0026] The intermediate event content is encapsulated to obtain the target event content.

[0027] Specifically, the user interface division result includes at least one independent component layout combination;

[0028] The step of dividing the preset user interface based on the initial user interface business component to obtain a user interface division result includes:

[0029] According to the constituent elements of the initial user interface business component, the preset user interface is divided and processed to obtain at least one independent component layout combination, wherein the independent component layout combination includes but is not limited to the following constituent elements: forms, tables, tree structures and maps.

[0030] Specifically, the division and combination result includes at least one interface layout combination;

[0031] The parsing of the user interface division result to obtain the division combination result includes:

[0032] Classifying the independent component layout combinations to obtain classification results corresponding to the independent component layout combinations;

[0033] The division and combination result is obtained according to the classification result by enumeration method.

[0034] To achieve the above-mentioned purpose, the present application also provides a user interface business component design device, the device comprising:

[0035] The first unit is used to obtain an initial user interface business component;

[0036] The second unit is used to process the initial component content corresponding to the initial user interface business component based on the preset business scenario and the initial user interface business component to obtain the target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modification state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered;

[0037] The third unit is used to adjust the initial user interface service component to a target user interface service component based on the target component content.

[0038] To achieve the above-mentioned purpose, the present application also provides a terminal, including a memory storing multiple instructions; the processor loads instructions from the memory to execute the steps in any one of the methods provided in the present application.

[0039] To achieve the above objectives, the present application also provides a medium, wherein the medium stores a plurality of instructions, wherein the instructions are suitable for a processor to load to execute the steps in any one of the methods provided in the present application.

[0040] The present application provides a user interface business component design method, device, terminal and medium, which can first obtain an initial user interface business component; then, based on a preset business scenario and the initial user interface business component, process the initial component content corresponding to the initial user interface business component to obtain a target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modified state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered; based on the target component content, the initial user interface business component is finally adjusted to a target user interface business component suitable for the preset business scenario.

[0041] This application can analyze the business scenarios that users want to apply, and design corresponding interface business components based on the actual needs of the business scenarios, so as to improve the design quality of user interface business components, development efficiency and user experience of subsequent products. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 A schematic diagram of a process flow provided for an embodiment of the present application;

[0043] Figure 2 A schematic diagram of the structure of a user interface business component design device provided in an embodiment of the present application;

[0044] Figure 3 A schematic diagram of the structure of a terminal provided in an embodiment of the present application. DETAILED DESCRIPTION

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

[0046] The existing user interface business component design process includes the following deficiencies: different development teams or projects may adopt different design standards and patterns, resulting in poor compatibility and interoperability between components. In order to adapt to specific business needs, components are sometimes over-customized, which may cause components to become too complex and difficult to maintain and reuse.

[0047] Therefore, the embodiments of the present application provide a user interface business component design method, device, terminal and medium to solve practical technical problems.

[0048] In some embodiments, the device may be specifically integrated into an electronic device, which may be a terminal, a server or other device.

[0049] In some embodiments, the server may also be implemented in the form of a terminal.

[0050] Among them, the server can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), as well as big data and artificial intelligence platforms.

[0051] The terminal may be a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, etc., but is not limited thereto. The terminal and the server may be directly or indirectly connected via wired or wireless communication, and this application does not limit this.

[0052] It should be noted that the serial numbers of the following embodiments are not intended to limit the preferred order of the embodiments.

[0053] An embodiment of the present application provides a user interface business component design method, which can analyze the business scenarios that users want to apply, and design corresponding interface business components based on the actual needs of the business scenarios to adapt to the business scenarios and improve the user interface business component design quality, development efficiency and user experience of subsequent products.

[0054] like Figure 1 , the specific process of the method can be as follows:

[0055] S110: Acquire an initial user interface service component.

[0056] In some embodiments, the initial user interface service component may be a basic user interface component.

[0057] The basic user interface components can be the basic building blocks for building any user interface. They are usually some general and reusable elements for realizing common interaction and display requirements. They may include buttons, input boxes (Input / Text Field), selection boxes (Select / Dropdown), check boxes (Checkbox), radio buttons (RadioButton), switches (Toggle / Switch), sliders (Slider), progress bars (Progress Bar), labels (Label / Tag), cards (Card), tables (Table), dialog boxes (Dialog / Modal), notifications (Notification / Toast), tooltips (Tooltip) and paginations, etc.

[0058] S120. Based on the preset business scenario and the initial user interface business component, the initial component content corresponding to the initial user interface business component is processed to obtain the target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modification state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered.

[0059] In some embodiments, the target component content includes target attribute content, target method content, and target event content.

[0060] Specifically, based on the preset business scenario and the initial user interface business component, the initial component content corresponding to the initial user interface business component is processed to obtain the target component content, including the steps S121 to S124 as shown below:

[0061] S121. Based on the preset business scenario and the initial user interface business component, set the initial attribute content to obtain target attribute content.

[0062] In some embodiments, the preset business scenario includes a preset user interface and preset loading data.

[0063] Specifically, the initial attribute content is set based on the preset business scenario and the initial user interface business component to obtain the target attribute content, including the steps S1211 to S1214 as shown below:

[0064] S1211. Based on the initial user interface business component, the preset user interface is divided and processed to obtain a user interface division result, wherein the user interface division result includes static division data and dynamic division data, the static division data is used to characterize the information that will not change in the preset user interface, and the dynamic division data is used to characterize the information displayed by the preset user interface based on the preset loaded data.

[0065] In some embodiments, in the necessity analysis of the interface layout, the static partition data of each divided component can be analyzed. The static partition data is the information display that will not change after the user interface is initialized, and is used for the user interface business component to propose basic attributes in the initialization data, such as id, name, style, etc.

[0066] In some embodiments, the dynamic partition data of each component can be analyzed in the necessity analysis of the interface layout. The dynamic partition data means that the user interface will display differently according to the loaded data. For example, if the dynamic partition data is loaded from the server, the attribute DataUrl for obtaining the data is defined to receive the attribute content of the data obtained from the server.

[0067] In some embodiments, the user interface division result includes at least one independent component layout combination.

[0068] Specifically, the division process of the preset user interface based on the initial user interface service component to obtain the user interface division result includes the following specific implementation process:

[0069] According to the constituent elements of the initial user interface business component, the preset user interface is divided and processed to obtain at least one independent component layout combination, wherein the independent component layout combination includes but is not limited to the following constituent elements: forms, tables, tree structures and maps.

[0070] S1212: Analyze the user interface division result to obtain a division combination result, wherein the division combination result is used to represent a combination of different interface layout modes of a preset user interface.

[0071] In some embodiments, the partition combination result includes at least one interface layout combination.

[0072] Specifically, the parsing of the user interface division result to obtain the division combination result includes the following steps S12121 to S12122:

[0073] S12121. Classify the independent component layout combination to obtain a classification result corresponding to the independent component layout combination.

[0074] Continuing with the above embodiment, the components can be classified according to their main functions. For example, forms are used for data input, tables are used for data display, tree structures are used for hierarchical selection, maps are used for geographic information display, etc.; they can be classified according to the way users interact with components. For example, read-only components, editable components, components that require user selection, etc.; they can also be classified according to the data sources that the components depend on. For example, static data (such as configuration information), dynamic data (such as real-time query results), external API data, etc.; they can be classified according to the frequency of use of components in the system. For example, commonly used components, occasionally used components, components for special scenarios, etc.

[0075] Continuing with the above embodiment, each independent component layout combination is analyzed to extract its key features. These features may include:

[0076] Component type (e.g. form, table, tree structure, map);

[0077] Functional description (such as customer information input, product item management, department selection, geographic location display);

[0078] Interaction methods (such as clicking, dragging, and keyboard navigation);

[0079] Data sources (such as databases, APIs, local files);

[0080] Usage scenarios (such as sales order management, customer relationship management, inventory management).

[0081] Specific classification rules can be created based on the defined classification criteria and extracted features. For example:

[0082] All form components used for data input are classified as "input components";

[0083] All table components used for data display are classified as "display components";

[0084] All tree structure components used for hierarchical selection are classified as "selection components";

[0085] All map components used to display geographic information are classified as "geographic components".

[0086] Each independent component layout combination can be applied to the corresponding classification rules to obtain the classification results, for example:

[0087] Customer information form component → input class component;

[0088] Product item table component → display component;

[0089] Customer selector component (tree structure) → select class component;

[0090] Customer map component → Geographic component.

[0091] S12122. Obtain the division and combination result according to the classification result through enumeration method.

[0092] Continuing with the above embodiment, the enumeration method can be used to traverse all possible combination templates to generate specific division and combination results. For example, the layout attribute has {lr, tb}, lr means left-right layout, and tb means top-bottom layout.

[0093] S1213: parse the preset loading data to obtain a data display analysis result, wherein the data display analysis result is used to characterize different data display modes of the preset loading data in the preset user interface.

[0094] S1214: According to the division and combination result and the data display analysis result, the initial attribute content is set to obtain the target attribute content.

[0095] Continuing with the above embodiment, defining the source of the preset loading data includes:

[0096] Static loading of data: such as configuration information, fixed option lists, etc.

[0097] Dynamically load data: such as results from database queries, real-time updated data, data returned by external APIs, etc.

[0098] Continuing with the above embodiment, the features of the preset loaded data are extracted to determine the format and fields of the data. For example, sales order data may contain fields such as customer information, product items, and order status; evaluate the size and complexity of the data. For example, an order may contain multiple product items, and each product item has multiple attributes; understand the update frequency of the data, for example, some data may be static (such as basic customer information), while other data may be dynamic (such as inventory information); identify the association between different data, for example, product items depend on customer selection, order status depends on payment status, etc.

[0099] Continuing with the above embodiment, determine the display format of the preset loaded data on the user interface. For example, a table is used to display multiple records, a chart is used to display trends, a map is used to display geographic locations, and the like. Consider how users interact with the data. For example, whether paging, sorting, filtering, searching, and other functions are required. Select appropriate data visualization tools and techniques. For example, use a bar chart to display sales changes, and use a heat map to display regional sales distribution. The performance requirements for data loading and display can also be evaluated. For example, for large amounts of data, paging loading or lazy loading techniques may be required to improve page response speed.

[0100] Continuing with the above embodiment, a corresponding display template is generated for each data type in the preset loaded data. For example, sales order data can be displayed using a table, customer information can be displayed using a form, and geographic information can be displayed using a map. The interactive functions required for each display method are clarified. For example, a table needs to support sorting and filtering, and a map needs to support zooming and clicking a mark to view detailed information.

[0101] Continuing with the above embodiment, according to the division and combination result obtained in step S1212, each independent component is matched with the corresponding data display requirement. For example:

[0102] Customer information form component: matches the display requirements of customer information;

[0103] Product item table component: matches the display requirements of product items;

[0104] Order status label component: matches the display requirements of order status;

[0105] Customer map component: matches the display requirements of geographic location information.

[0106] Continuing with the above embodiment, the data source is set for each component. For example, the customer information form component is bound to the customer information data, the product item table component is bound to the product item data, and so on. According to the data display analysis results, the display configuration of the component is set. For example, the product item table component needs to support paging, sorting, filtering, and search functions. According to the data display analysis results, the interaction configuration of the component is set. For example, the customer map component needs to support zooming and clicking on markers to view detailed information. The performance-related properties of the component can also be set according to the performance optimization strategy. For example, the product item table component enables virtual scrolling and lazy loading, and the customer map component enables delayed loading.

[0107] Continuing with the above embodiment, generating target attribute content may include the following content:

[0108] Attribute names: define clear names for each attribute, for example, dataSource, pagination, sortable, filterable, searchable, lazyLoad, cacheEnabled, etc.

[0109] Attribute value: Set the initial value of each attribute according to specific business needs and data display analysis results, for example, pagination:true, sortable:['productName','quantity'], filterable:true, searchable:true, lazyLoad:true, cacheEnabled:true, etc.;

[0110] Default values: Set reasonable default values ​​for each property so that it works properly without special configuration, for example, pagination:false, sortable:[], filterable:false, searchable:false, lazyLoad:false, cacheEnabled:false, etc.

[0111] S122: Based on the preset business scenario and the initial user interface business component, perform method content setting on the initial method content to obtain target method content.

[0112] In some embodiments, the method content is set for the initial method content based on the preset business scenario and the initial user interface business component to obtain the target method content, including the steps S1221 to S1222 as shown below:

[0113] S1221. Based on the division and combination result and the data display analysis result, convert the initial method content into at least one intermediate method content.

[0114] Continuing with the above example, the core business processes and rules in the preset business scenarios are analyzed. For example, in sales order management, operations such as creating an order, editing an order, submitting an order, and canceling an order may be included. Determine the interaction method between the user and the component. For example, the user may need to click a button to trigger certain operations, or modify data through an input box.

[0115] Continuing with the above embodiment, each independent component is matched with the corresponding business logic according to the division and combination result obtained in step S1212. For example:

[0116] Customer Information Form Component: matches the business logic of creating and editing customer information;

[0117] Product Item Table Component: matches the business logic of adding, deleting, and modifying product items;

[0118] Order status label component: matches the business logic of updating order status;

[0119] Customer map component: matches the business logic of checking the customer's geographic location.

[0120] Continuing with the above embodiment, all initial method contents related to the business logic are extracted from the initial user interface business component. For example, createOrder(), editOrder(), submitOrder(), cancelOrder(), etc. According to the division and combination results, these initial method contents are mapped to corresponding independent components. For example, createOrder() and editOrder() may be mapped to the customer information form component and the product item table component. According to the data display analysis results obtained in step S1213, the behavior of the method content is adjusted. For example, the submitOrder() method content may need to verify whether the data in the form meets the requirements before submission, and update the order status label component after success.

[0121] Continuing with the above embodiment, a clear function signature is defined for each intermediate method content, including a parameter list and a return value type. Detailed business logic is added to each intermediate method content according to specific business needs. For example, the createOrder() method may need to call an API to save order data and return an order ID. An exception handling mechanism is added to each intermediate method content to ensure that friendly prompts or rollback operations can be provided when an error occurs. For example, if the API call fails, the createOrder() method content can throw a custom error object and display an error message to the user.

[0122] S1222. Encapsulate the intermediate method content to obtain the target method content.

[0123] Continuing with the above embodiment, the repeated logic in multiple intermediate method contents is extracted and encapsulated into public method contents. For example, validateInput() can be used to verify the legality of all input fields. Define a concise interface for each component to hide the complex internal business logic. For example, the submitOrder() method content can encapsulate all intermediate method contents related to submitting an order, and the user only needs to call this one method. Provide extension points for each component to allow developers to add new functions or modify existing functions in the future. For example, other components can perform additional operations when specific events occur through event listeners.

[0124] S123: Based on the preset business scenario and the initial user interface business component, perform event content setting on the initial event content to obtain target event content.

[0125] In some embodiments, the setting of event content for the initial event content based on the preset business scenario and the initial user interface business component to obtain the target event content includes the following steps S1231 to S1232:

[0126] S1231. Based on the target attribute content, encapsulate the exposable event content in the initial event content to obtain at least one intermediate event content to shield the event content definition in the initial user interface business component.

[0127] Continuing with the above embodiment, all initial event contents related to user interaction are extracted from the initial user interface business component, such as onClick, onChange, onSubmit, etc. Determine under what circumstances each event content will be triggered. For example, the onClick event content may be triggered when the user clicks a button, and the onChange event content may be triggered when the user modifies the content of the input box.

[0128] Continuing with the above embodiment, each event content is associated with the corresponding attribute content according to the target attribute content obtained in step S1214. For example, the onClick event content may be associated with the buttonVisible attribute content, and the onChange event content may be associated with the editable attribute content. Ensure that the behavior of the event content is consistent with the state of the attribute content. For example, if buttonVisible is false, the onClick event content should not be triggered; if editable is false, the onChange event content should not be triggered.

[0129] S1232: Encapsulate the intermediate event content to obtain the target event content.

[0130] Continuing with the above embodiment, an encapsulated event class can be created for each component, and all intermediate event contents can be further encapsulated into the class. For example, the OrderFormEvents class can encapsulate all event contents of the customer information form component. Define a clear target event signature for each encapsulated event class to ensure that the event calling method is simple and clear. Add an event handling mechanism for the target event to ensure that the corresponding operation can be triggered when a specific event occurs. For example, the handleCustomerInfoChange method content can verify the input and trigger the customerInfoChange event content when the customer information changes.

[0131] S124. Determine the target component content based on the target attribute content, the target method content, and the target event content.

[0132] Continuing with the above embodiment, according to the target attribute content, the target method content and the target event content, all attribute contents are initialized in the constructor of the component content and default values ​​are set, all method contents are defined for the component content and encapsulated into a class, all event contents are registered for the component content and corresponding event processing functions are defined. After that, the above component content is determined as the target component content.

[0133] S130: Based on the target component content, adjust the initial user interface service component to a target user interface service component.

[0134] Continuing with the above-mentioned embodiment, it is possible to ensure, based on the target component content, that all necessary properties have been set according to preset business scenarios and data display analysis results; that all business logic has been encapsulated and each method has been optimized and tested; and that all required events have been defined and that these events can correctly respond to user operations.

[0135] Continuing with the above embodiment, the adjusted target user interface business components are integrated into the entire user interface to ensure that the interactions between the target user interface business components work properly, for example, ensuring that the customer information form component, product item table component, order status label component, and customer map component can work together.

[0136] The embodiment of the present application can first obtain an initial user interface business component; then, based on a preset business scenario and the initial user interface business component, process the initial component content corresponding to the initial user interface business component to obtain a target component content, wherein the initial component content includes initial attribute content, initial method content, and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry for modifying the state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered; based on the target component content, the initial user interface business component is finally adjusted to a target user interface business component suitable for the preset business scenario.

[0137] In summary, this application provides a user interface business component design method, which analyzes the business scenarios that users want to apply and designs corresponding interface business components based on the actual needs of the business scenarios, so as to improve the design quality of user interface business components, development efficiency and user experience of subsequent products.

[0138] In order to better implement the above method, the embodiment of the present application also provides a user interface business component design device, which can be integrated in an electronic device, and the electronic device can be a terminal, a server, etc. Among them, the terminal can be a mobile phone, a tablet computer, a smart Bluetooth device, a laptop, a personal computer, etc.; the server can be a single server or a server cluster composed of multiple servers.

[0139] For example, in this embodiment, the method of the embodiment of the present application will be described in detail by taking the user interface business component design device specifically integrated in the terminal as an example.

[0140] For example, Figure 2 As shown, the user interface service component design device 200 may include a first unit 201, a second unit 202, and a third unit 203. The user interface service component design device 200 includes:

[0141] The first unit 201 is used to obtain an initial user interface service component;

[0142] The second unit 202 is used to process the initial component content corresponding to the initial user interface business component based on the preset business scenario and the initial user interface business component to obtain the target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modification state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered;

[0143] The third unit 203 is used to adjust the initial user interface service component to a target user interface service component based on the target component content.

[0144] In specific implementation, the above units can be implemented as independent entities, or can be arbitrarily combined to be implemented as the same or several entities. The specific implementation of the above units can refer to the previous method embodiments, which will not be repeated here.

[0145] From the above, it can be seen that the embodiment of the present application analyzes the business scenarios that users want to apply, and designs corresponding interface business components according to the actual needs of the business scenarios, so as to improve the design quality of user interface business components, development efficiency and user experience of subsequent products.

[0146] The embodiment of the present application also provides an electronic device, which can be a terminal, a server, etc. The terminal can be a mobile phone, a tablet computer, a smart Bluetooth device, a laptop, a personal computer, etc. The server can be a single server or a server cluster composed of multiple servers, etc.

[0147] In some embodiments, the product processing device may also be integrated into multiple electronic devices. For example, the product processing device may be integrated into multiple servers, and the user interface business component design method of the present application may be implemented by multiple servers.

[0148] In this embodiment, the electronic device of this embodiment is a terminal as an example for detailed description, for example, Figure 3As shown, it shows a schematic diagram of the structure of the terminal 300 involved in the embodiment of the present application, specifically:

[0149] The terminal 300 may include one or more processors 301 of processing cores, one or more storage media 302, a power supply 303, an input module 304, and a communication module 305. Those skilled in the art will appreciate that Figure 3 The structure of the terminal 300 shown in the figure does not constitute a limitation on the terminal 300, and the terminal 300 may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0150] The processor 301 is the control center of the terminal 300. It uses various interfaces and lines to connect various parts of the entire terminal 300. It executes various functions of the terminal 300 and processes data by running or executing software programs and / or modules stored in the memory 302, and calling data stored in the memory 302, so as to monitor the terminal 300 as a whole. In some embodiments, the processor 301 may include one or more processing cores; in some embodiments, the processor 301 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 301.

[0151] The memory 302 can be used to store software programs and modules. The processor 301 executes various functional applications and data processing by running the software programs and modules stored in the memory 302. The memory 302 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area may store data created according to the use of the terminal 300, etc. In addition, the memory 302 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory 302 may also include a memory controller to provide the processor 301 with access to the memory 302.

[0152] The terminal 300 also includes a power supply 303 for supplying power to various components. In some embodiments, the power supply 303 can be logically connected to the processor 301 through a power management system, so as to manage charging, discharging, and power consumption through the power management system. The power supply 303 can also include any components such as one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, and power status indicators.

[0153] The terminal 300 may further include an input module 304, which may be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function controls.

[0154] The terminal 300 may also include a communication module 305. In some embodiments, the communication module 305 may include a wireless module. The terminal 300 may perform short-range wireless transmission through the wireless module of the communication module 305, thereby providing the user with wireless broadband Internet access. For example, the communication module 305 may be used to help the user send and receive emails, browse web pages, and access streaming media.

[0155] Although not shown, the terminal 300 may also include a display unit, etc., which will not be described in detail here. Specifically in this embodiment, the processor 301 in the terminal 300 will load the executable files corresponding to the processes of one or more applications into the memory 302 according to the following instructions, and the processor 301 will run the applications stored in the memory 302, thereby realizing various functions, as follows:

[0156] Get the initial user interface business component;

[0157] Based on the preset business scenario and the initial user interface business component, the initial component content corresponding to the initial user interface business component is processed to obtain the target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modification state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered;

[0158] Based on the target component content, the initial user interface service component is adjusted to a target user interface service component.

[0159] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0160] From the above, it can be seen that the embodiment of the present application can analyze the business scenarios that users want to apply, and design corresponding interface business components according to the actual needs of the business scenarios, so as to improve the design quality of user interface business components, development efficiency and user experience of subsequent products.

[0161] Those skilled in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by instructions, or by controlling related hardware through instructions. The instructions may be stored in a medium and loaded and executed by a processor.

[0162] To this end, an embodiment of the present application provides a medium in which a plurality of instructions are stored, and the instructions can be loaded by a processor to execute the steps in any one of the user interface business component design methods provided in the embodiment of the present application. For example, the instructions can execute the following steps:

[0163] Get the initial user interface business component;

[0164] Based on the preset business scenario and the initial user interface business component, the initial component content corresponding to the initial user interface business component is processed to obtain the target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modification state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered;

[0165] Based on the target component content, the initial user interface service component is adjusted to a target user interface service component.

[0166] The medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0167] According to one aspect of the present application, a computer program product or a computer program is provided, the computer program product or the computer program includes a computer instruction, the computer instruction is stored in a medium. A processor of a computer device reads the computer instruction from the medium, and the processor executes the computer instruction, so that the computer device executes the method provided in various optional implementations provided in the above embodiments.

[0168] Since the instructions stored in the medium can execute the steps in any one of the user interface business component design methods provided in the embodiments of the present application, the beneficial effects that can be achieved by any one of the user interface business component design methods provided in the embodiments of the present application can be achieved. Please refer to the previous embodiments for details and will not be repeated here.

[0169] The above is a detailed introduction to a user interface business component design method, device, terminal and medium provided in an embodiment of the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for technical personnel in this field, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A user interface business component design method, characterized in that: The method comprises: Get the initial user interface business component; Based on the preset business scenario and the initial user interface business component, the initial component content corresponding to the initial user interface business component is processed to obtain the target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modification state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered; Based on the target component content, the initial user interface service component is adjusted to a target user interface service component.

2. The method according to claim 1, characterized in that The target component content includes target attribute content, target method content and target event content; The processing of the initial component content corresponding to the initial user interface business component based on the preset business scenario and the initial user interface business component to obtain the target component content includes: Based on the preset business scenario and the initial user interface business component, setting the initial attribute content to obtain target attribute content; Based on the preset business scenario and the initial user interface business component, setting the method content of the initial method content to obtain the target method content; Based on the preset business scenario and the initial user interface business component, setting the event content for the initial event content to obtain target event content; The target component content is determined based on the target attribute content, the target method content, and the target event content.

3. The method according to claim 2, characterized in that The preset business scenario includes a preset user interface and preset loading data; The step of setting the initial attribute content based on the preset business scenario and the initial user interface business component to obtain the target attribute content includes: Based on the initial user interface business component, the preset user interface is divided and processed to obtain a user interface division result, wherein the user interface division result includes static division data and dynamic division data, the static division data is used to characterize the information that will not change in the preset user interface, and the dynamic division data is used to characterize the information displayed by the preset user interface based on the preset loaded data; Parsing the user interface division result to obtain a division combination result, wherein the division combination result is used to represent a combination of different interface layout modes of a preset user interface; Parsing the preset loading data to obtain a data display analysis result, wherein the data display analysis result is used to characterize different data display modes of the preset loading data in the preset user interface; According to the division and combination result and the data display analysis result, the initial attribute content is set to obtain the target attribute content.

4. The method according to claim 3, characterized in that The method content setting of the initial method content based on the preset business scenario and the initial user interface business component to obtain the target method content includes: Based on the division and combination result and the data display analysis result, converting the initial method content into at least one intermediate method content; The intermediate method content is encapsulated to obtain the target method content.

5. The method according to claim 3, characterized in that The step of setting the event content of the initial event content based on the preset business scenario and the initial user interface business component to obtain the target event content includes: Based on the target attribute content, encapsulate the exposed event content in the initial event content to obtain at least one intermediate event content to shield the event content definition in the initial user interface business component; The intermediate event content is encapsulated to obtain the target event content.

6. The method according to claim 3, characterized in that The user interface division result includes at least one independent component layout combination; The step of dividing the preset user interface based on the initial user interface business component to obtain a user interface division result includes: According to the constituent elements of the initial user interface business component, the preset user interface is divided and processed to obtain at least one independent component layout combination, wherein the independent component layout combination includes but is not limited to the following constituent elements: forms, tables, tree structures and maps.

7. The method according to claim 6, characterized in that The division and combination result includes at least one interface layout combination; The parsing of the user interface division result to obtain the division combination result includes: Classifying the independent component layout combinations to obtain classification results corresponding to the independent component layout combinations; The division and combination result is obtained according to the classification result by enumeration method.

8. A user interface business component design device, characterized in that: The device comprises: The first unit is used to obtain an initial user interface business component; The second unit is used to process the initial component content corresponding to the initial user interface business component based on the preset business scenario and the initial user interface business component to obtain the target component content, wherein the initial component content includes initial attribute content, initial method content and initial event content, the initial attribute content is used to characterize the initial state of the initial user interface business component, the initial method content is used to characterize the entry of the modification state of the initial user interface business component, and the initial event content is used to characterize the state response of the initial user interface business component after being externally triggered; The third unit is used to adjust the initial user interface service component to a target user interface service component based on the target component content.

9. A terminal, characterized in that: The method comprises a processor and a memory, wherein the memory stores a plurality of instructions; the processor loads instructions from the memory to execute the steps in the method according to any one of claims 1 to 7.

10. A medium, characterized in that The medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor to execute the steps in the method according to any one of claims 1 to 7.

Images