Interaction method and device for quickly maintaining component set state layer

Abstract

The invention discloses an interaction method and device for quickly maintaining a component set state layer. The method comprises the following steps: combining selected components into a component state to form a component set; editing the selected component state and interaction action of the same type value through a component set editor; wherein the parameters of the component state comprise attribute names and state values; screening according to the component set state list to obtain a corresponding component set state layer; wherein the component set state list is generated according to the component state and the interaction action; switching setting is carried out on the state values of the screened component set state layers, and switching modes comprise switch switching and pull-down switching. By maintaining the state of the component set, a designer can screen and set allowed interaction according to the instance entering the editing page, the flexibility and pertinence of the design are improved, and then the state of the component set is efficiently managed.

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and particularly to an interaction method and device for quickly maintaining the state layer of a component set. Background Art

[0002] In user interface design and prototyping, a component set is a commonly used design element that allows designers and product managers to reuse design elements and improve work efficiency. Existing design tools usually require users to directly maintain the state of the component set on the canvas page, which results in low efficiency and difficulty in management when dealing with complex component sets. Especially when dealing with component sets containing multiple states, multiple switches and adjustments need to be made on the canvas.

[0003] To solve the above problems, the present invention develops an interaction method and device for quickly maintaining the state layer of a component set, so as to efficiently manage the state of the component set. Summary of the Invention

[0004] In view of the above problems, an interaction method and device for quickly maintaining the state layer of a component set are proposed to facilitate the efficient management of the state of the component set.

[0005] According to one aspect of the present invention, an interaction method for quickly maintaining the state layer of a component set is provided, including:

[0006] Combining the selected components into component states to form a component set;

[0007] Editing the component states and interaction actions of the selected components of the same type through a component set editor; wherein, the parameters of the component states include an attribute name and a state value;

[0008] Filtering to obtain a corresponding component set state layer according to a component set state list; wherein, the component set state list is generated according to the component states and interaction actions;

[0009] Performing a switching setting on the state values of the filtered component set state layer, wherein the switching methods include switch switching and drop-down switching.

[0010] In an optional manner, the combining the selected components into component states to form a component set further includes:

[0011] Selecting the components to be combined from the component library, creating instances of the components and adding them to a component set candidate list;

[0012] Mapping the instances of the components to the component states and configuring the values of the state parameters to form a state mapping table;

[0013] Constructing the component set according to the state mapping table.

[0014] In an alternative manner, the editing of the component states and interaction actions of the selected same-type values through the component set editor further includes:

[0015] Analyze the attributes of the selected components through the component set editor, identify the set of attributes with the same data type and the same attribute name, and form a list of attributes that can be edited synchronously;

[0016] Define different states for each attribute in the list of attributes that can be edited synchronously, and set the component states and the interaction actions corresponding to each component state.

[0017] In an alternative manner, the filtering to obtain the corresponding component set state layer according to the component set state list further includes:

[0018] Generate a component set state list according to the state mapping table between the component states and the component instances;

[0019] Obtain all the component set state layers that match the selected attribute name and state value according to the filtered component set state list.

[0020] In an alternative manner, the switching setting of the state values of the filtered component set state layer further includes:

[0021] Record the corresponding relationship between each component state and its state value according to the state value mapping table;

[0022] Adjust the state values of the filtered component set state layer through a switch toggle control or a drop-down toggle control.

[0023] In an alternative manner, the filtering to obtain the corresponding component set state layer according to the component set state list further includes:

[0024] Construct a filtering knowledge base that includes the attribute name, state value, and semantic information of the component set state;

[0025] Calculate the semantic similarity between the input filtering conditions and each entry in the filtering knowledge base;

[0026] Sort and return the component set state layer according to the semantic similarity.

[0027] In an alternative manner, the list of attributes that can be edited synchronously further includes a custom attribute option, and state definition and interaction action settings are performed through the custom attribute option.

[0028] In an alternative manner, after the switching setting of the state values of the filtered component set state layer, the method further includes:

[0029] Synchronize the status value of the component set status layer after switching to the design draft in the canvas page containing the component set status layer.

[0030] In an alternative approach, the method further includes:

[0031] Generate variable components based on the status value of the component set status layer after switching.

[0032] According to another aspect of the present application, an interactive device for quickly maintaining a component set status layer is provided, including:

[0033] A component set creation module for combining selected components into component states to form a component set;

[0034] A component state setting module for editing the component states and interaction actions of selected components with the same type value through a component set editor; wherein, the parameters of the component state include an attribute name and a status value;

[0035] A component set filtering module for filtering to obtain a corresponding component set status layer according to a component set status list; wherein, the component set status list is generated based on the component state and interaction actions;

[0036] A layer interaction setting module for performing switching settings on the status value of the filtered component set status layer, wherein the switching methods include switch switching and dropdown switching.

[0037] The solution provided in the above embodiments of the present invention combines selected components into component states to form a component set; edits the component states and interaction actions of selected components with the same type value through a component set editor; wherein, the parameters of the component state include an attribute name and a status value; filters to obtain a corresponding component set status layer according to a component set status list; wherein, the component set status list is generated based on the component state and interaction actions; performs switching settings on the status value of the filtered component set status layer, wherein the switching methods include switch switching and dropdown switching. By maintaining the status of the component set, designers can filter and set allowed interactions based on the instances entering the editing page, improving the flexibility and pertinence of the design, and thus efficiently managing the status of the component set.

[0038] The above description is only an overview of the technical solution of the present invention. In order to be able to understand the technical means of the present invention more clearly, it can be implemented according to the content of the specification. And in order to make the above description and other purposes, features and advantages of the present invention more obvious and understandable, the following specifically illustrates the specific embodiments of the present invention. Description of the Drawings

[0039] By reading the following detailed description of the preferred embodiments, various other advantages and benefits will become clear to those of ordinary skill in the art. The drawings are only for the purpose of showing the preferred embodiments and are not considered to be a limitation of the present invention. Moreover, throughout the drawings, the same reference numerals are used to represent the same components. In the drawings:

[0040] Figure 1 A flowchart showing the interaction method of the quick maintenance component set status layer in an embodiment of the present invention;

[0041] Figure 2 A schematic diagram showing the component set in an embodiment of the present invention;

[0042] Figure 3 A schematic diagram showing the component status parameters in an embodiment of the present invention;

[0043] Figure 4 A schematic diagram showing the status reuse in an embodiment of the present invention;

[0044] Figures 5a to 5d A schematic diagram showing the component status and interaction action operations in an embodiment of the present invention;

[0045] Figure 6 A schematic diagram showing the component set status list in an embodiment of the present invention;

[0046] Figures 7a to 7c A schematic diagram showing the status value switching setting in an embodiment of the present invention;

[0047] Figure 8 A schematic diagram showing the functional structure of the device for the interaction method of the quick maintenance component set status layer in an embodiment of the present invention. Detailed Embodiments

[0048] The exemplary embodiments of the present invention will be described in more detail below with reference to the drawings. Although the exemplary embodiments of the present invention are shown in the drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided so that the present invention can be more thoroughly understood and the scope of the present invention can be completely conveyed to those skilled in the art.

[0049] Before implementing the embodiments of the present invention, the technical terms or custom terms involved in the following text are uniformly explained herein:

[0050] Component: It allows the UI to be divided into independent and reusable parts. In practical applications, components are often organized into a tree-like structure with nested layers.

[0051] Example: An example refers to a specific reference to a component. Whether it is dragged out from the component list by the user or copied and pasted from a component, it is an "example", rather than the original body of the component.

[0052] Component state: The component state is a set of components extended based on the component. The purpose is to group similar components and enable designers to configure them as elements with multiple states.

[0053] Variable component: It refers to a component that is given multiple attributes and values (states).

[0054] Component set: It refers to a container that contains component states.

[0055] The following will elaborate on the interactive method and device for quickly maintaining the state layer of a component set proposed by the present invention through specific embodiments.

[0056] Embodiment 1:

[0057] Figure 1 The functional structure diagram of the interactive method for quickly maintaining the state layer of a component set according to an embodiment of the present invention is shown. Specifically, as Figure 1 shown, it includes the following steps:

[0058] Step S101: Combine the selected components into component states to form a component set.

[0059] In this embodiment, as Figure 2 shown, the states of multiple components are uniformly managed in the component set, avoiding layout chaos caused by scattered states, and components with state associations can be reused.

[0060] In an optional manner, the step of combining the selected components into component states to form a component set further includes:

[0061] Select the components to be combined from the component library, create instances of the components and add them to the component set candidate list;

[0062] Map the instances of the components to the component states and configure the values of the state parameters to form a state mapping table;

[0063] Construct the component set according to the state mapping table.

[0064] In this embodiment, by creating instances of the components, the component set is decoupled from the components in the original component library, and modifying the component set will not affect the original components.

[0065] Step S102: Edit the component states and interaction actions of the selected components of the same type through a component set editor; wherein, the parameters of the component state include an attribute name and a state value.

[0066] In this embodiment, multiple components of the same type can be edited through the component set editor. For example, Figures 5a to 5d as shown, select the components with the same type value, and then name them in the component property panel. For example, for the size dimension, first select six small buttons, and then name them as "small" in the status value, then the six buttons will be automatically labeled with "small". The remaining medium and large buttons can be named "default" and "large" in the same way. By analogy, perform the same naming operation on the lines, surfaces, statuses, etc. as shown in Figure 3 to edit the statuses and interaction actions of the selected components with the same type value.

[0067] In an alternative approach, the editing of the statuses and interaction actions of the selected components with the same type value through the component set editor further includes:

[0068] Analyze the properties of the selected components through the component set editor, identify the property sets with the same data type and the same property name, and form a property list for synchronous editing;

[0069] Define different statuses for each property in the property list for synchronous editing, and set the component statuses and the corresponding interaction actions for each component status.

[0070] In this embodiment, by identifying the property sets with the same data type and property name, the workload of manual configuration is reduced, the configuration of component statuses and interaction actions is easier to reuse, and the scalability of the components is improved. Designers only need to understand the property sets and status definitions, reducing the learning cost and usage complexity.

[0071] In an alternative approach, the property list for synchronous editing further includes a custom property option, and status definitions and interaction action settings are performed through the custom property option.

[0072] In this embodiment, as shown in Figure 4 , add and manage custom properties through the custom property option. Designers can customize properties and statuses according to actual needs, thereby better meeting the interaction requirements and enhancing the user experience.

[0073] Step S103: Filter the corresponding component set status layer according to the component set status list; wherein, the component set status list is generated according to the component statuses and interaction actions.

[0074] In this embodiment, as shown in Figure 6 , the component set status list presents various statuses and interaction behaviors of the components, facilitating designers to search for and use.

[0075] In an alternative approach, further steps for filtering the corresponding component set status layer based on the component set status list include:

[0076] Generate a component set status list according to the status mapping table between component status and component instances;

[0077] Obtain all component set status layers that match the selected attribute name and status value based on the filtered component set status list.

[0078] In this embodiment, the specific status of component instances is decoupled from the component set status layer through the component status mapping table. When modifying the status of component instances, it is not necessary to directly modify the layer control code, but only to update the mapping table. The same component status can correspond to multiple component set status layers, realizing status reuse and avoiding redundant layer definitions.

[0079] In an alternative approach, further steps for filtering the corresponding component set status layer based on the component set status list include:

[0080] Construct a filtering knowledge base that includes the attribute name, status value, and semantic information of the component set status;

[0081] Calculate the semantic similarity between the input filtering conditions and each entry in the filtering knowledge base;

[0082] Sort and return the component set status layer according to the semantic similarity.

[0083] In this embodiment, a knowledge base is created to store the attribute name, status value of the component set status, and their corresponding semantic information. For example, use a dictionary / JSON with the attribute name and status value as keys and the semantic information as values. Or use a nev4j knowledge graph with component status, attributes, layers, etc. as nodes and semantic relationships as edges. Semantic information such as synonyms of "disabled" like "unavailable", "inactive". Near-synonyms of "focused" like "highlighted", "selected". "button_disabled" is described as "the style when the button is disabled".

[0084] Receive the user's input filtering conditions (such as "the button is unavailable"). Use natural language processing techniques to extract the keywords and intentions of the user input. Calculate the semantic similarity between the keywords of the user input and the entries in the filtering knowledge base (such as calculating the semantic similarity between nodes using knowledge graph embedding or path ranking algorithm).

[0085] Sort the entries in the knowledge base according to the semantic similarity, select several entries with the highest similarity, and return the corresponding component set status layer.

[0086] Step S104: Set the status values of the filtered component set status layer to be switched, where the switching methods include switch switching and dropdown switching.

[0087] In this embodiment, as Figures 7a to 7c shown, different switching methods can be selected according to different status types. For example, binary status switching can be performed through a switch, and multi-status switching can be performed through a dropdown box.

[0088] Among them, the setting of switching the status values of the filtered component set status layer further includes:

[0089] Record the correspondence between each component status and its status value according to the status value mapping table;

[0090] Adjust the status values of the filtered component set status layer through a switch switching control or a dropdown switching control.

[0091] In an alternative manner, after setting the status values of the filtered component set status layer to be switched, the method further includes:

[0092] Synchronize the status values of the component set status layer after switching to the design draft in the canvas page containing the component set status layer.

[0093] In this embodiment, synchronize the status values of the switched component set status layer to the design draft for real-time update, and the status in the design draft is always consistent with the component set status layer, reducing the operation steps for designers to switch between different states.

[0094] In an alternative manner, the method further includes:

[0095] Generate variable components according to the status values of the component set status layer after switching.

[0096] In this embodiment, when the status is switched, select the corresponding template according to the current status, and use the status value to dynamically fill the template to generate variable components. Generate different components according to different status switches, apply the same logic to different components, adapt to different scenarios, and avoid pre-defining a large number of static components.

[0097] The solution provided by the above embodiment of the present invention combines the selected components into component states to form a component set; edits the component states and interaction actions of the selected components with the same type value through a component set editor; wherein, the parameters of the component state include an attribute name and a state value; filters the corresponding component set state layer according to the component set state list; wherein, the component set state list is generated according to the component state and the interaction action; sets the switching of the state value of the filtered component set state layer, wherein the switching methods include switch switching and drop-down switching. By maintaining the state of the component set, the designer can filter and set the allowed interactions according to the instances entering the editing page, improving the flexibility and pertinence of the design, and then efficiently managing the state of the component set.

[0098] Embodiment 2:

[0099] Figure 8 The functional structure diagram of the interactive method device for quickly maintaining the component set state layer according to the embodiment of the present invention is shown. As Figure 8 shown, the device includes:

[0100] A component set creation module 801, configured to combine the selected components into component states to form a component set;

[0101] A component state setting module 802, configured to edit the component states and interaction actions of the selected components with the same type value through a component set editor; wherein, the parameters of the component state include an attribute name and a state value;

[0102] A component set filtering module 803, configured to filter the corresponding component set state layer according to the component set state list; wherein, the component set state list is generated according to the component state and the interaction action;

[0103] A layer interaction setting module 804, configured to set the switching of the state value of the filtered component set state layer, wherein the switching methods include switch switching and drop-down switching.

[0104] In an optional manner, the component set creation module 801 is further configured to:

[0105] Select the components to be combined from the component library, create instances of the components and add them to the component set candidate list;

[0106] Map the instances of the components to the component states and configure the values of the state parameters to form a state mapping table;

[0107] Construct the component set according to the state mapping table.

[0108] In an optional manner, the component state setting module 802 is further configured to:

[0109] Analyze the attributes of the selected components through the component set editor, identify the attribute sets with the same data type and the same attribute name, and form a list of attributes that can be edited synchronously;

[0110] Define different states for each attribute in the list of attributes that can be edited synchronously, set the component states, and the interaction actions corresponding to each component state.

[0111] In an alternative manner, the component set filtering module 803 is further configured to:

[0112] Generate a component set status list according to the status mapping table between the component states and the component instances;

[0113] Obtain all component set status layers that match the selected attribute name and status value according to the filtered component set status list.

[0114] In an alternative manner, the layer interaction setting module 804 is further configured to:

[0115] Record the corresponding relationship between each component state and its status value according to the status value mapping table;

[0116] Adjust the status value of the filtered component set status layer through a switch control or a drop-down control.

[0117] In an alternative manner, the component set filtering module 803 is further configured to:

[0118] Construct a filtering knowledge base including the attribute name, status value, and semantic information of the component set status;

[0119] Calculate the semantic similarity between the input filtering conditions and each entry in the filtering knowledge base;

[0120] Sort and return the component set status layer according to the semantic similarity.

[0121] In an alternative manner, the list of attributes that can be edited synchronously further includes a custom attribute option, and state definition and interaction action settings are performed through the custom attribute option.

[0122] In an alternative manner, after the switching setting of the status value of the filtered component set status layer, the method further includes:

[0123] Synchronize the status value of the switched component set status layer to the design draft in the canvas page including the component set status layer.

[0124] In an alternative manner, the method further includes:

[0125] Generate variable components according to the status value of the component set status layer after switching.

[0126] The solution provided by the above embodiments of the present invention combines the selected components into component states to form a component set; edits the component states and interaction actions of the selected components with the same type value through a component set editor; wherein, the parameters of the component state include an attribute name and a status value; filters to obtain a corresponding component set status layer according to a component set status list; wherein, the component set status list is generated according to the component state and the interaction action; performs switching settings on the status value of the filtered component set status layer, wherein the switching methods include switch switching and drop-down switching. By maintaining the status of the component set, the designer of the present invention can screen and set allowed interactions according to the instances entering the editing page, improving the flexibility and pertinence of the design, and thus efficiently managing the status of the component set.

[0127] The algorithms or displays provided herein are not inherently related to any particular computer, virtual system, or other device. Various general-purpose systems can also be used in conjunction with the teachings based herein. Based on the above description, the structure required to construct such a system will be apparent. In addition, the embodiments of the present invention are not directed to any particular programming language. It should be understood that the content of the present invention described herein can be implemented using various programming languages, and the descriptions made above for specific languages are to disclose the best mode of the present invention.

[0128] In the specification provided herein, a large number of specific details are set forth. However, it can be understood that the embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures, and technologies have not been shown in detail so as not to obscure the understanding of this specification.

[0129] Similarly, it should be understood that, in order to streamline the present invention and assist in understanding one or more of the various inventive aspects, in the above description of the exemplary embodiments of the present invention, the various features of the embodiments of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, the disclosed method should not be construed as reflecting the intention that the claimed invention requires more features than are expressly recited in each claim. Rather, as reflected in the following claims, the inventive aspects lie in less than all the features of the single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into the detailed description, with each claim standing on its own as a separate embodiment of the present invention.

[0130] Those skilled in the art can understand that the modules in the devices in the embodiments can be adaptively changed and set in one or more devices different from those of the embodiments. The modules or units or components in the embodiments can be combined into one module or unit or component, and in addition, they can be divided into multiple sub-modules or sub-units or sub-components. Except that at least some of such features and / or processes or units are mutually exclusive, any combination can be used to combine all the features disclosed in this specification (including the accompanying claims, abstract and drawings) and all the processes or units of any method or device so disclosed. Unless otherwise explicitly stated, each feature disclosed in this specification (including the accompanying claims, abstract and drawings) can be replaced by an alternative feature that provides the same, equivalent or similar purpose.

[0131] In addition, those skilled in the art can understand that although some of the embodiments herein include certain features included in other embodiments rather than other features, the combination of the features of different embodiments means that it is within the scope of the present invention and forms different embodiments. For example, in the following claims, any one of the claimed embodiments can be used in any combination.

[0132] Each component embodiment of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art should understand that a microprocessor or a digital signal processor (DSP) can be used in practice to implement some or all of the functions of some or all of the components according to the embodiments of the present invention. The present invention can also be implemented as a device or device program (such as a computer program and a computer program product) for executing part or all of the methods described herein. Such a program implementing the present invention can be stored on a computer-readable medium, or can be in the form of one or more signals. Such signals can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0133] It should be noted that the above embodiments illustrate the present invention rather than limit the present invention, and those skilled in the art can 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 the claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention can be implemented by means of hardware including several different elements and by means of a suitably programmed computer. In the unit claims listing several devices, several of these devices may be embodied by the same item of hardware. The use of the words first, second, and third, etc. does not denote any order. These words may be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be construed as limiting the order of execution.

Claims

1. An interactive method for quickly maintaining a component set state layer, characterized in that: include: Group the selected components into component states to form a component set; Edit the selected component states and interactive actions of the same type of value through the component set editor; wherein the parameters of the component state include attribute names and state values; The corresponding component set state layer is obtained by filtering the component set state list; wherein the component set state list is generated according to the component state and the interaction action; The state value of the filtered component set state layer is switched and set, wherein the switching methods include switch switching and pull-down switching.

2. The interactive method for quickly maintaining component set status layers according to claim 1, characterized in that: Combining the selected components into component states to form a component set further includes: Selecting components to be combined from the component library, creating instances of the components and adding them to a candidate list of component sets; Mapping the instance of the component with the component state and configuring the value of the state parameter to form a state mapping table; The component set is constructed according to the state mapping table.

3. The interactive method for quickly maintaining component set status layers according to claim 1, characterized in that: The editing of the component states and interactive actions of the selected same type values ​​through the component set editor further includes: Analyzing the properties of the selected component through the component set editor, identifying a set of properties with the same data type and the same property name, and forming a synchronously editable property list; Define different states for each attribute in the synchronously editable attribute list, set component states and the corresponding interactive actions for each component state.

4. The interactive method for quickly maintaining component set status layers according to claim 1, characterized in that: The step of obtaining the corresponding component set state layer by filtering the component set state list further comprises: Generate a component set state list according to a state mapping table between component states and component instances; Get all assembly state layers that match the selected property name and state value based on the filtered assembly state list.

5. The interactive method for quickly maintaining component set status layers according to claim 1, characterized in that: The switching setting of the state value of the filtered component set state layer further includes: Record the corresponding relationship between each component state and its state value according to the state value mapping table; Use the switch control or the drop-down switch control to adjust the status value of the filtered component set status layer.

6. The interactive method for quickly maintaining component set status layers according to claim 1, characterized in that: The step of obtaining the corresponding component set state layer by filtering the component set state list further comprises: Constructing a screening knowledge base including attribute names, state values ​​and semantic information of the state of the component set; Calculating the semantic similarity between the input screening condition and each entry in the screening knowledge base; The component set state layer is returned according to the semantic similarity sorting.

7. The interactive method for quickly maintaining component set status layers according to claim 3, characterized in that: The synchronously editable attribute list also includes a custom attribute option, through which the state definition and interactive action setting are performed.

8. The interactive method for quickly maintaining component set status layers according to claim 1, characterized in that: After switching and setting the status value of the filtered component set status layer, the method further includes: The state value of the switched component set state layer is synchronized to the design draft in the canvas page containing the component set state layer.

9. The interactive method for quickly maintaining component set status layers according to claim 8, characterized in that: The method further comprises: Generate a variable component according to the state value of the component set state layer after switching.

10. An interactive device for quickly maintaining a component set status layer, characterized in that: include: A component set creation module, used to combine selected components into component states to form a component set; A component state setting module, used to edit the component state and interaction action of the selected component of the same type value through a component set editor; wherein the parameters of the component state include attribute name and state value; A component set screening module, used to screen and obtain a corresponding component set state layer according to a component set state list; wherein the component set state list is generated according to the component state and the interaction action; The layer interaction setting module is used to switch the state value of the filtered component set state layer, wherein the switching method includes switch switching and pull-down switching.

Images