CN118733012A - A multi-layer atomic visual design method and device based on style reference - Google Patents

Abstract

The invention discloses a multi-layer atomization visual design method and device based on style reference, wherein the method comprises the following steps: dividing the visual design into a global hierarchy, a scene hierarchy, and a multi-layered atomization hierarchy of a component hierarchy, the multi-layered atomization hierarchy comprising a set of atomization style attribute tokens; creating at least one target component in the design end page, wherein the style attribute of the target component refers to an atomized style attribute token through a token dynamic style reference mode; performing dependency data link analysis on the atomization style attribute tokens referenced by each target component to obtain decision data states, so that a designer can adjust the reference tokens of the target components according to the decision data states; in response to the updating of the atomized style attribute token, updating the target component referencing the atomized style attribute token through the token dynamic style update schema. The invention improves maintainability, flexibility and cooperation efficiency of a design system by introducing a multi-level token structure and a dynamic style quotation mechanism.

Description

A multi-layer atomic visual design method and device based on style reference

Technical Field

The present invention relates to the technical field of software design, and in particular to a multi-layer atomic visual design method and device based on style reference.

Background Art

As the complexity of digital product design and development increases, collaboration between designers and developers becomes more critical. Traditional design delivery processes, such as manually coding design specifications and relying on visual reviews to ensure consistency, can no longer meet the needs of rapid iteration and efficient collaboration. The traditional design delivery process is not only time-consuming and error-prone, but also greatly reduces the team's work efficiency and the product's market responsiveness.

Although existing design software or systems have a certain degree of standardization and automation functions such as color, font, spacing, etc. (can be used across platforms), they still face many challenges: First, the limitations of a single-level structure. Most existing systems have a single-level structure, which limits their flexibility and scalability when dealing with complex design systems. For example, when a color needs to be used in different ways in different contexts (such as button background color and text color), a single-level structure is difficult to manage effectively; second, the difficulty of updating and maintenance. In traditional design systems, when design decisions change, a large number of files need to be manually modified, which is not only inefficient but also easy to miss, resulting in inconsistencies between implementation and design; third, the challenge of cross-platform consistency. With the popularity of multi-platform applications, how to maintain consistency between different platforms has become a challenge. Existing design methods often lack an effective cross-platform support mechanism, which increases the cost of maintaining consistency.

Therefore, a new software design method and device are urgently needed to solve the above problems, so as to achieve flexible management of multi-layer atomic visual design and improve the collaboration efficiency and product quality in the process from design to development.

Summary of the invention

In view of the above problems, the present invention is proposed to provide a multi-level atomic visual design method and device based on style reference with a multi-level token style reference mechanism.

According to one aspect of the present invention, a multi-layer atomic visual design method based on style reference is provided, comprising:

Dividing the visual design into multiple atomic levels of a global level, a scene level, and a component level, wherein the component level includes a base component level and a variant component level; the multiple atomic levels of each level include a set of atomic style attribute tokens;

At least one target component is created in the design-side page, and the style attribute of the target component references the atomic style attribute token through a token dynamic style reference mode;

Performing dependency data link analysis on the atomic style attribute tokens referenced by each of the target components to obtain a decision data state so that the designer can adjust the reference tokens of the target components according to the decision data state;

In response to the update of the atomic style attribute token, a target component that references the atomic style attribute token is updated through a token dynamic style update mode.

In an optional manner, the method further includes:

The atomized style attribute token is converted into style code, wherein the style code includes CSS variables, Swift code, and XML resources.

In an optional manner, the global level, scene level, and component level include but are not limited to the following style attributes: brand color, font, basic spacing, background color, border style, text style, hover state, click state, and disabled state.

In an optional manner, the atomized style attribute token includes a name, an alias, and a variable attribute set;

The name adopts a naming convention consisting of a multi-layer atomic-level style attribute set of the global level, the scene level, and the component level;

The style attribute sets of the multiple layers of atomic levels are spliced by a first preset specific symbol, and the style attributes of the multiple layers of atomic levels are spliced by a second preset specific symbol;

The name and the variable attribute set form a key-value pair structure.

In an optional manner, the style attribute of the target component references the atomic style attribute token through the token dynamic style reference mode, further comprising:

After the target component determines to reference the atomic style attribute token, the style attribute alias of the target component is the name of the referenced atomic style attribute token;

The style attribute of the target component only refers to the atomic style attribute token with the same attribute style, and the name of the atomic style attribute token is unique in the design library.

In an optional manner, the performing dependency data link analysis on the atomic style attribute tokens referenced by each target component further includes:

According to each of the target components and the atomic style attribute tokens referenced by them, a token reference directed graph is constructed, wherein the vertices of the token reference directed graph are the target components and the paths are the token reference relationships;

Determine whether there is a circular dependency loop in the token reference directed graph; if so, update the dependent data link of the circular dependency loop to eliminate the loop; wherein only the self-loop in the circular dependency loop and the attribute style of the token referenced by each of the target components are retained, and the token referenced by the self-loop is deleted;

The updated dependent data link is used as the decision data state.

In an optional manner, updating the target component that references the atomic style attribute token through the token dynamic style update mode further includes:

Determine whether the variable attribute and name of the atomic style attribute token have changed. When the variable attribute changes, the style value of the target component that references the token changes synchronously. When the name changes, the style value of the target component that references the token remains unchanged.

Determine whether the atomic style attribute token of the target component is released, and if so, assign the style value of the atomic style attribute token when it is released.

In an optional manner, the method further includes:

Determine whether the first atomic style attribute token referenced by the target component is modified to a second atomic style attribute token. If so, the style attribute of the target component continues to reference the first atomic style attribute token, and the update of the second atomic style attribute token no longer affects the style attribute of the target component.

If the first atomic style attribute token is recreated, a token reference relationship is automatically established between the style attribute of the target component and the first atomic style attribute token; and the style attribute of the target component and the first atomic style attribute token are synchronously updated.

In an optional manner, the method further includes:

When multiple designers collaboratively reference multiple atomic style attribute tokens, the dependency data links of the multiple atomic style attribute tokens are merged to obtain a merged dependency data link;

It is determined whether there is a circular dependency loop in the merged dependency data link. If so, a modal pop-up window is used to remind the designer to perform a loop-breaking operation.

According to another aspect of the present invention, a multi-layer atomic visual design device based on style reference is provided, comprising:

A token definition module, configured to divide the visual design into multiple atomic levels of a global level, a scene level, and a component level, wherein the component level includes a base component level and a variant component level; the multiple atomic levels of each level include a set of atomic style attribute tokens;

A token reference module, used for creating at least one target component in a design-side page, wherein the style attribute of the target component references the atomic style attribute token through a token dynamic style reference mode;

A token analysis module, used for performing dependency data link analysis on the atomic style attribute tokens referenced by each target component to obtain a decision data state, so that the designer can adjust the reference token of the target component according to the decision data state;

The token updating module is used to update the target component that references the atomic style attribute token through a token dynamic style updating mode in response to the update of the atomic style attribute token.

The solution provided by the above embodiment of the present invention divides the visual design into multiple atomic levels of global level, scene level and component level, wherein the component level includes a basic component level and a variant component level; the multiple atomic levels of each level include a set of atomic style attribute tokens; at least one target component is created in the design end page, and the style attributes of the target component reference the atomic style attribute token through a token dynamic style reference mode; the atomic style attribute tokens referenced by each target component are subjected to dependency data link analysis to obtain a decision data state so that the designer can adjust the reference token of the target component according to the decision data state; in response to the update of the atomic style attribute token, the target component that references the atomic style attribute token is updated through a token dynamic style update mode. The present invention improves the maintainability, flexibility and collaboration efficiency of the design system by introducing a multi-level token structure and a dynamic style reference mechanism.

The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above description and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below.

BRIEF DESCRIPTION OF THE DRAWINGS

Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present invention. Also, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

FIG1 is a schematic diagram showing a flow chart of a multi-layer atomic visual design method based on style reference according to an embodiment of the present invention;

FIG2 is a schematic diagram showing the relationship between multiple atomization levels according to an embodiment of the present invention;

FIG3 shows a schematic diagram of atomic style attribute token reference according to an embodiment of the present invention;

FIG4 shows a schematic diagram of the structure of an atomic style attribute token according to an embodiment of the present invention;

FIG5 shows a second schematic diagram of the structure of an atomic style attribute token according to an embodiment of the present invention;

FIG. 6 shows an example diagram of an atomic style attribute token reference according to an embodiment of the present invention;

FIG7 shows a schematic diagram of de-looping of an atomic style attribute token according to an embodiment of the present invention;

FIG8 is a schematic diagram showing a style reference loop removal operation according to an embodiment of the present invention;

FIG9 is a schematic diagram showing an update process of an atomic style attribute token according to an embodiment of the present invention;

FIG10 shows a schematic diagram of a code of an atomized style attribute token according to an embodiment of the present invention;

FIG11 is a schematic diagram showing the import of an atomic style attribute token according to an embodiment of the present invention;

FIG. 12 shows a schematic structural diagram of a multi-layer atomic visual design device based on style reference according to an embodiment of the present invention.

DETAILED DESCRIPTION

The exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present invention are shown in the accompanying 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 in order to enable a more thorough understanding of the present invention and to enable the scope of the present invention to be fully communicated to those skilled in the art.

Before implementing the embodiments of the present invention, the technical terms or custom terms involved below are uniformly explained here:

Components: They allow the UI to be divided into independent, reusable parts. In practical applications, components are often organized into a nested tree structure.

Container: Formerly known as "drawing board", it is an important design component of design software, such as iPhone container and A4 paper container.

Instance: An instance refers to a specific reference to a component. What the user drags from the component list or copies and pastes from a component is an "instance" rather than the component itself.

Component attributes: Component attributes originated in the R&D and production process, such as Button attributes and form-input attributes in Element VUE 2.0. They are divided into parameters, types, and optional values in the code. Component attributes prepend the attributes in the code to the canvas editor, allowing the editor to add parameters, types, and values in the property panel.

Variable component: A component placed in a component set container and given multiple attributes (defining the properties and relationships of the variable component) and values (defining specific characteristics or parameters of the attributes).

Mutable instance: An instance of a mutable component.

Token: In computer terminology, a token refers to a string of characters generated by the server. The present invention uses the concept of "token" to define complex design elements (regarded as an atomic visual design language). That is, the visual mode and interface attributes are reorganized and summarized for semantic naming, replacing the hard-coded constants in the front-end code (such as hexadecimal color codes), which facilitates designers to carry out unified management and expansion, ensure product consistency, and improve the efficiency of design and development. For example: color is used to define the color values used in the product, such as primary color, secondary color, background color, etc.; font is used to define the font, font size, line height and other attributes used in the product, as well as the corresponding class name or variable name; border is used to define the border color, width, style and other attributes used in the product, as well as the corresponding class name or variable name; spacing is used to define the spacing, inner margin, outer margin and other attributes used in the product, as well as the corresponding class name or variable name; icon is used to define the icon used in the product, such as icon name, color, size and other attributes, as well as the corresponding class name or variable name; layout is used to define the layout method used in the product, such as grid, typesetting method, etc., as well as the corresponding class name or variable name.

This application aims to build a comprehensive and highly available design system, deeply understand the real needs of users, combine product requirements with actual usage scenarios, and propose an innovative method for implementing multi-layer atomic visual design management based on style reference capabilities to meet the challenges encountered in the current design and development process, especially in improving the maintainability, flexibility and cross-platform consistency of styles. The specific contents of the present invention are described in detail below through specific embodiments.

Embodiment 1:

FIG1 shows a schematic flow chart of a multi-layer atomic visual design method based on style reference according to an embodiment of the present invention. Specifically, as shown in FIG1 , the method includes the following steps:

Step S101, divide the visual design into multiple atomic levels of global level, scene level and component level, wherein the component level includes a basic component level and a variant component level; the multiple atomic levels of each level include a set of atomic style attribute tokens.

In this embodiment, the visual design is divided into multiple atomic levels of global level, scene level and component level, wherein the component level includes the basic component level and the variant component level, and a set of atomic style attribute tokens is set for each level. Through the division of multiple atomic levels, designers can clearly and quickly build style elements. Among them, the global level contains style attribute tokens such as fonts, brand colors, border background colors, rounded corners, layout rules, etc. to ensure the uniformity of visual style. Different scene levels are divided according to different application scenarios or functional requirements. Different scenes require different design elements and styles. For example, the brand color of the global level of a certain brand of coffee is green. For some pages (such as product details pages, shopping pages and other multiple page scenes) or radio and check states, gray colors may be required. It is difficult to make differentiated designs using global level tokens. If the colors of some pages, or radio buttons and check boxes are manually changed, engineers will spend a lot of work. Therefore, on the basis of the global-level token, the scene-level token is added (such as adding "second-level" and "third-level" "aliases" to distinguish each component), and the color of the page or check box and radio button can be modified again to solve the risk problem that may need to be modified at any time in subsequent products. The component level is further subdivided and expanded on the basis of the global level and the scene level (that is, the intensity or fineness of control is different). For example, it is divided into multiple independent components (such as buttons, input boxes, etc.) according to the scene. Each component is customized and expanded according to specific needs based on the styles and rules of the global level and the scene level to form component-specific styles and rules. In this embodiment, the component level includes a basic component level and a variant component level. The basic component level sets the basic component style, including style attribute tokens of components such as buttons and input boxes, which can be adjusted on the basis of the global level and the scene level (that is, referencing the tokens of the global level and the scene level), or a preset component style can be created separately to meet the specific needs of the component. The variant component level is a further subdivision of the component level. It fine-tunes or expands the variants of the basic components according to specific needs or scenarios. For example, to handle component styles in different states, a button can have normal state, hover state, click state, shadow effect and other variants. Each variant has its own specific style attribute token, which makes the component present different visual effects in different states. Atomic style attribute tokens split style attributes into the smallest, reusable units, and each token corresponds to a specific style attribute. During the design process, by selecting and applying these atomic style attribute tokens, you can quickly build visual elements of various levels that meet the specifications to improve the efficiency of style attribute setting.

For example, $ui-controls-color-text-error=$color-feedback-error

(＝$color-red-36)

(＝#B90000)

The global level token is color-feedback-error (the error color under feedback conditions), which is one level lower than the color-red-36 (the red color named for color 36). The scene level token (second level alias) is ui-controls-color-text-error (the error color of text in UI controls), which is one level lower than the global level. The naming conventions followed by tokens at different levels are usually different. Generally speaking, satisfying design management with fewer levels is an important goal of token naming conventions. Table 1 gives a reference to a naming convention.

Table 1

Specifically, as shown in Figure 2, the atomic style attribute tokens defined at the global level are usually the most basic and widely used style attributes in the entire design system, such as brand colors (such as primary colors, secondary colors, neutral colors, etc.), primary fonts, basic spacing (such as margins, padding, line height, etc.), etc. These global tokens provide a unified visual and feel foundation for the entire design system.

The scene level creates a "second layer" of scene level tokens based on different demand scenarios, and can also modify the global level tokens to form scene level tokens.

Tokens at the component level define the style properties of specific UI components, and can inherit (reference) tokens at the global level. By adding or overriding specific style properties to meet the needs of specific components, you can quickly customize UI components that meet specific scenarios or needs while maintaining overall design consistency. For example, the background color, border style (border width, color, solid line, dashed line, etc.) and text style (such as font size, color, alignment, etc.) tokens of button components. Although these tokens are based on the global level definition, they allow customization for specific components.

Variant level tokens inherit component level tokens (variant level 1, variant level n can inherit component level n at the same time, variant level 1 can inherit component level 1 and component level n at the same time), allowing you to define styles for different states or variants of a component, such as hover, active, or disabled. These tokens keep components visually consistent in different interactive states while increasing the flexibility of style definition.

In an optional manner, the atomized style attribute token includes a name, an alias, and a variable attribute set;

The name adopts a naming convention consisting of a multi-layer atomic-level style attribute set of the global level, the scene level, and the component level;

The style attribute sets of the multiple layers of atomic levels are spliced by a first preset specific symbol, and the style attributes of the multiple layers of atomic levels are spliced by a second preset specific symbol;

The name and the variable attribute set form a key-value pair structure.

In this embodiment, as shown in Figures 4 and 5, the atomic style attribute token includes a name, an alias, a reference, and a variable attribute set. Among them, the name follows a specific naming convention and is used to uniquely identify a style attribute set. The naming convention consists of multiple atomic levels, including a global level, a scene level, and a component level. The multiple atomic levels are spliced by a first preset specific symbol (such as a hyphen "-" or an underscore "_"). At the same time, the style attributes of the multiple atomic levels are spliced by a second preset specific symbol (such as a dot "."). This naming method improves the readability, maintainability, and search efficiency of the style. Aliases allow short names to be defined for commonly used style attribute sets. These aliases can be used as shortcuts to replace lengthy style attribute names. Aliases can be defined according to the specific needs of the project and the usage habits of the team. They can be a short name for a specific style attribute or a general name for a group of related style attributes. References are used to display the name of the specific token being referenced. For example, a button component references a token named button-primary-background-color to set the background color. The reference name is button-primary-background-color, which can track the source of the style attribute reference. The variable attribute collection describes the style value in the atomic style attribute token, which contains a series of specific style attribute values (such as color, font size, margin, padding, and other style attributes). The variable attribute collection and the name are stored in the variable attribute collection as a key-value pair.

Step S102: at least one target component is created in the design end page, and the style attribute of the target component references the atomic style attribute token through the token dynamic style reference mode.

Register and introduce the target component in the parent component or page on the design side, and use the token dynamic style reference mode to reference the atomic style attribute token to change the component's style attributes to adapt to different design requirements. That is, you only need to adjust the value of the atomic style attribute token to achieve rapid update of the style.

When using tokens, as shown in Figure 3, the global level, scene level, and component level include tokens such as brand color ({brand-color}), basic spacing, rounded button {button-primary-corner}, text style, hover {hover}, and disabled. A default button is created in the canvas. After the default button references the brand color token in the global level, the rounded button token in the component level, and the hover token in the variant level, the reference token of the default button is {brand-color.button-primary-corner.hover}. After re-rendering, its style is adjusted to a rounded button. The rounded button protects the brand color, rounded corners, and hover state at the same time. As shown in Figure 6, the rounded corner properties of the standard rounded corners can be changed by setting the reference style token (--corner-tiny 2,2,2,2). It can be seen that the style can be quickly updated by simply adjusting the value of the atomic style attribute token.

In an optional manner, the style attribute of the target component references the atomic style attribute token through the token dynamic style reference mode, further comprising:

After the target component determines to reference the atomic style attribute token, the style attribute alias of the target component is the name of the referenced atomic style attribute token;

The style attribute of the target component only refers to the atomic style attribute token with the same attribute style, and the name of the atomic style attribute token is unique in the design library.

In this embodiment, when the target component determines to reference a certain atomic style attribute token, the style attribute alias of the component is set to the name of the referenced atomic style attribute token. The alias is used to describe the source of the style attribute referenced by the target component, which enhances the readability and maintainability of the style attribute. The style attribute of the target component only references atomic style attribute tokens with the same attribute style. If the target component has a style attribute about font color, it can only reference atomic style attribute tokens related to font color in the design library to avoid style conflicts and override issues. Since each token describes a specific set of style attributes, the name of the atomic style attribute token is unique in the design library, which can avoid confusion and incorrect references to style attributes.

Step S103, performing dependency data link analysis on the atomic style attribute tokens referenced by each target component to obtain a decision data state so that the designer can adjust the reference tokens of the target component according to the decision data state.

In this embodiment, the decision data state reflects the dependency between the tokens referenced by the component style attributes. Based on the decision data state, the designer can identify which components depend on specific style tokens, and can track the reference sources and changes of style attributes. And which components share the same style token, so as to achieve style reuse. At the same time, potential style conflicts or inconsistencies can also be discovered, and adjustments can be made in time to ensure the style consistency of the entire design draft.

Specifically, all target components in the design project are traversed, the atomic style attribute tokens referenced by each component are retrieved, and a dependency data link diagram between the target components and the style tokens is constructed based on the token information referenced by each target component. The dependency data link diagram can be a visual diagram or a data structure such as a graph or adjacency list to represent the dependency relationship between components and tokens. Based on the dependency data link diagram, the decision data status of each target component is analyzed, including checking whether the component references a deleted token and whether the referenced token conflicts with other components. Based on the analysis results of the decision data status, suggestions are provided to the designer to adjust the reference tokens of the target components so that the designer can adjust the reference tokens of the target components according to the decision data status.

In an optional manner, the performing dependency data link analysis on the atomic style attribute tokens referenced by each target component further includes:

According to each of the target components and the atomic style attribute tokens referenced by them, a token reference directed graph is constructed, wherein the vertices of the token reference directed graph are the target components and the paths are the token reference relationships;

Determine whether there is a circular dependency loop in the token reference directed graph; if so, update the dependent data link of the circular dependency loop to eliminate the loop; wherein only the self-loop in the circular dependency loop and the attribute style of the token referenced by each of the target components are retained, and the token referenced by the self-loop is deleted;

The updated dependent data link is used as the decision data state.

In this embodiment, a token reference directed graph is constructed to display the reference relationship between the target component and the atomic style attribute token, so as to determine whether there is a circular dependency loop in the token reference directed graph, and timely discover potential style reference problems, such as circular references that cause the style to be unable to be correctly applied. By updating the dependency data link of the circular dependency loop, the circular dependency is eliminated, the necessary attribute styles are retained, and the correctness of the style reference is ensured. The updated dependency data link is used as the decision data state, and the designer can make decisions quickly based on this information and adjust the reference token of the component.

Specifically, traverse all target components and record the atomic style attribute tokens referenced by each component. Construct a token reference directed graph with the target components as vertices and the token reference relationship as the path. Use a depth-first search or breadth-first search algorithm to traverse the token reference directed graph. If a vertex is visited repeatedly and the path forms a closed loop, it means that there is a circular dependency loop. Only the self-loops in the circular dependency loop and the attribute styles of the tokens referenced by each target component are retained, and the tokens referenced by the self-loops are deleted. Convert the updated token reference directed graph into a decision data state and present it to the designer in a visual form to adjust the reference tokens of the components.

As shown in Figure 7, the token reference relationship is: A->B->C->B->D. Only the self-loop in the circular dependency loop and the attribute styles of the tokens referenced by each target component are retained, and the tokens referenced by the self-loop are deleted, that is, A->B, B->B, C->B.

Step S104 , in response to the update of the atomic style attribute token, the target component referencing the atomic style attribute token is updated through the token dynamic style update mode.

When the atomic style property token is updated, the style update of the target component is triggered. Due to the token dynamic style update mode, designers can easily adjust the atomic style property token without manually modifying the style property value of each target component. Managing style properties through atomic style property tokens makes style modification and maintenance more centralized and efficient.

Specifically, an event listener is set to listen to the update of the atomic style attribute token. When the atomic style attribute token is updated, the target components that reference the token are determined by analyzing the token reference relationship or querying the token reference record. The style attributes and values in the token are parsed and converted into style codes that can be recognized by the target component, and the target component is re-rendered according to the generated new style code.

In an optional manner, updating the target component that references the atomic style attribute token through the token dynamic style update mode further includes:

Determine whether the variable attribute and name of the atomic style attribute token have changed. When the variable attribute changes, the style value of the target component that references the token changes synchronously. When the name changes, the style value of the target component that references the token remains unchanged.

Determine whether the atomic style attribute token of the target component is released, and if so, assign the style value of the atomic style attribute token when it is released.

In this embodiment, when it is detected that the variable attribute of the atomic style attribute token has changed, all target components that reference the token are traversed, and the style values of these components are synchronously updated. As shown in Figure 9, if the name of the atomic style attribute token changes, the token reference record is updated to ensure that the new name matches the reference of the component. For the target components that have already referenced the token, their style values remain unchanged to avoid unnecessary style updates. When the atomic style attribute token of the target component is released, the style value at the time of release is recorded and assigned to the target component. After the token is released, the style of the component remains consistent, and there will be no style loss or confusion.

In an optional manner, the method further includes:

Determine whether the first atomic style attribute token referenced by the target component is modified to a second atomic style attribute token. If so, the style attribute of the target component continues to reference the first atomic style attribute token, and the update of the second atomic style attribute token no longer affects the style attribute of the target component.

If the first atomic style attribute token is recreated, a token reference relationship is automatically established between the style attribute of the target component and the first atomic style attribute token; and the style attribute of the target component and the first atomic style attribute token are synchronously updated.

In this embodiment, when the first atomic style attribute token is replaced by the second atomic style attribute token, the reference of the target component to the first atomic style attribute token remains unchanged. That is, the style attribute of the target component is disconnected from the influence of the new token, and the style definition of the first atomic style attribute token will continue to be used instead of the new second atomic style attribute token. As shown in Figure 9, if the first atomic style attribute token is recreated, a token reference relationship is established between the style attribute of the target component and the recreated first atomic style attribute token. Once a new token reference relationship is established, the style attribute of the target component will be updated synchronously with the first atomic style attribute token. For example: component A references token B, and after token B is modified to token C, A still references token B, and A is displayed as token B. The update of token C no longer affects A; if a new token B is created at this time, A and token B are automatically associated, and A is updated with token B. In addition, when the reference relationship is released, the style value referenced at the time of release is directly assigned, and the content of the alias field is deleted. The modification of the style reference relationship triggers the update of the team library.

In an optional manner, the method further includes:

When multiple designers collaboratively reference multiple atomic style attribute tokens, the dependency data links of the multiple atomic style attribute tokens are merged to obtain a merged dependency data link;

It is determined whether there is a circular dependency loop in the merged dependency data link. If so, a modal pop-up window is used to remind the designer to perform a loop-breaking operation.

When multiple designers work together, merging the dependency data links of multiple atomic style attribute tokens and reminding designers through modal pop-ups when circular dependency loops are found is an important strategy to improve team collaboration efficiency and reduce potential errors. The following is a detailed explanation and advantage analysis of this process.

In this embodiment, when multiple designers work together and each references a different atomic style attribute token, the token reference data of each designer is collected, including the dependency relationship between tokens. Then, these scattered dependency data links are merged to form an overall merged dependency data link. After merging the dependency data link, a graph theory algorithm is used to detect whether there is a circular dependency loop. A circular dependency loop refers to a closed loop formed in a token reference relationship, thereby discovering potential circular dependency problems. If there is a circular dependency loop, as shown in Figure 8, a modal pop-up window is used to remind the designer to perform a loop-breaking operation (there is a closed loop between corner-normal and corner-tiny, and since the two are in a parallel relationship, the loop needs to be broken). The modal pop-up window is a pop-up interface that can block other user operations. The pop-up window displays specific information about the circular dependency loop, including the tokens and dependencies involved, so that the designer can quickly locate the problem, such as modifying the token reference relationship or deleting unnecessary dependencies. By merging the dependency data links of multiple designers, the circular dependency reference operations caused by information asynchrony between designers are reduced, so as to improve the work efficiency of designers and reduce potential errors.

In an optional manner, the method further includes:

The atomized style attribute token is converted into style code, wherein the style code includes CSS variables, Swift code, and XML resources.

As shown in Figure 10, when editing the rounded corner style, the code of the style is automatically generated, including position, width, height, rounded corners (border-radius:--corner-normal), etc. The style code includes CSS variables, Swift code, and XML resources.

For CSS variables, set each style attribute in the token as a CSS variable, and use the var() function in the CSS file to reference the CSS variable to replace the hard-coded style value. For example:

In iOS development, use Swift code to define the styles of views and components, and encapsulate atomic style attribute tokens according to the defined Swift structure or class. For example:

//Button reference token

let button = UIButton()

button.backgroundColor=(brand-color.button-primary-corner.hover)

In Android development, XML files are used to define the styles of views and layouts. Use the @style/ prefix to reference tokens in the directory of the Android project. For example:

In addition, it also supports CSS variables, Swift code, and XML resource import functions. As shown in Figure 11, the CSS code is imported into the corresponding control, and these imported variables are directly applied to the corresponding control. The style of the control is updated by extracting the variables and matching and binding them with the properties of the control. By importing, the same style and logic are applied on different platforms, thereby achieving cross-platform consistency, while reducing the workload of manual code writing, and being able to quickly build and modify design drafts.

The solution provided by the above embodiment of the present invention divides the visual design into multiple atomic levels of global level, scene level and component level, wherein the component level includes a basic component level and a variant component level; the multiple atomic levels of each level include a set of atomic style attribute tokens; at least one target component is created in the design end page, and the style attributes of the target component reference the atomic style attribute token through a token dynamic style reference mode; the atomic style attribute tokens referenced by each target component are subjected to dependency data link analysis to obtain a decision data state so that the designer can adjust the reference token of the target component according to the decision data state; in response to the update of the atomic style attribute token, the target component that references the atomic style attribute token is updated through a token dynamic style update mode. The present invention improves the maintainability, flexibility and collaboration efficiency of the design system by introducing a multi-level token structure and a dynamic style reference mechanism.

Embodiment 2:

12 shows a schematic diagram of the structure of a multi-layer atomic visual design device based on style reference according to an embodiment of the present invention. The multi-layer atomic visual design device based on style reference 12 comprises: a token definition module 1201 , a token reference module 1202 , a token analysis module 1203 and a token update module 1204 .

The token definition module 1201 is used to divide the visual design into multiple atomic levels of a global level, a scene level and a component level, wherein the component level includes a basic component level and a variant component level; the multiple atomic levels of each level include a set of atomic style attribute tokens;

The token reference module 1202 is used to create at least one target component in the design end page, and the style attribute of the target component references the atomic style attribute token through the token dynamic style reference mode;

The token analysis module 1203 is used to perform dependency data link analysis on the atomic style attribute tokens referenced by each target component to obtain a decision data state so that the designer can adjust the reference token of the target component according to the decision data state;

The token updating module 1204 is configured to update the target component that references the atomic style attribute token through a token dynamic style updating mode in response to the update of the atomic style attribute token.

In an optional manner, the method further includes:

The atomized style attribute token is converted into style code, wherein the style code includes CSS variables, Swift code, and XML resources.

In an optional manner, the global level, scene level and component level include but are not limited to the following style attributes: brand color, font, basic spacing, background color, border style, text style, hover state, click state and disabled state.

In an optional manner, the atomized style attribute token includes a name, an alias, and a variable attribute set;

The name adopts a naming convention consisting of a multi-layer atomic-level style attribute set of the global level, the scene level, and the component level;

The style attribute sets of the multiple layers of atomic levels are spliced by a first preset specific symbol, and the style attributes of the multiple layers of atomic levels are spliced by a second preset specific symbol;

The name and the variable attribute set form a key-value pair structure.

In an optional manner, the style attribute of the target component references the atomic style attribute token through the token dynamic style reference mode, further comprising:

After the target component determines to reference the atomic style attribute token, the style attribute alias of the target component is the name of the referenced atomic style attribute token;

The style attribute of the target component only refers to the atomic style attribute token with the same attribute style, and the name of the atomic style attribute token is unique in the design library.

In an optional manner, the performing dependency data link analysis on the atomic style attribute tokens referenced by each target component further includes:

According to each of the target components and the atomic style attribute tokens referenced by them, a token reference directed graph is constructed, wherein the vertices of the token reference directed graph are the target components and the paths are the token reference relationships;

Determine whether there is a circular dependency loop in the token reference directed graph; if so, update the dependent data link of the circular dependency loop to eliminate the loop; wherein only the self-loop in the circular dependency loop and the attribute style of the token referenced by each of the target components are retained, and the token referenced by the self-loop is deleted;

The updated dependent data link is used as the decision data state.

In an optional manner, updating the target component that references the atomic style attribute token through the token dynamic style update mode further includes:

Determine whether the variable attribute and name of the atomic style attribute token have changed. When the variable attribute changes, the style value of the target component that references the token changes synchronously. When the name changes, the style value of the target component that references the token remains unchanged.

Determine whether the atomic style attribute token of the target component is released, and if so, assign the style value of the atomic style attribute token when it is released.

In an optional manner, the method further includes:

Determine whether the first atomic style attribute token referenced by the target component is modified to a second atomic style attribute token. If so, the style attribute of the target component continues to reference the first atomic style attribute token, and the update of the second atomic style attribute token no longer affects the style attribute of the target component.

If the first atomic style attribute token is recreated, a token reference relationship is automatically established between the style attribute of the target component and the first atomic style attribute token; and the style attribute of the target component and the first atomic style attribute token are synchronously updated.

In an optional manner, the method further includes:

When multiple designers collaboratively reference multiple atomic style attribute tokens, the dependency data links of the multiple atomic style attribute tokens are merged to obtain a merged dependency data link;

It is determined whether there is a circular dependency loop in the merged dependency data link. If so, a modal pop-up window is used to remind the designer to perform a loop-breaking operation.

The solution provided by the above embodiment of the present invention divides the visual design into multiple atomic levels of global level, scene level and component level, wherein the component level includes a basic component level and a variant component level; the multiple atomic levels of each level include a set of atomic style attribute tokens; at least one target component is created in the design end page, and the style attributes of the target component reference the atomic style attribute token through a token dynamic style reference mode; the atomic style attribute tokens referenced by each target component are subjected to dependency data link analysis to obtain a decision data state so that the designer can adjust the reference token of the target component according to the decision data state; in response to the update of the atomic style attribute token, the target component that references the atomic style attribute token is updated through a token dynamic style update mode. The present invention improves the maintainability, flexibility and collaboration efficiency of the design system by introducing a multi-level token structure and a dynamic style reference mechanism.

The algorithm or display provided herein is not inherently related to any particular computer, virtual system or other equipment. Various general purpose systems can also be used together with the teachings based on this. According to the above description, it is obvious to construct the structure required for this type of system. In addition, the embodiment of the present invention is not directed to any specific programming language yet. It should be understood that various programming languages can be utilized to realize the content of the present invention described herein, and the description made to specific languages above is for disclosing the best mode of the present invention.

In the description provided herein, a large number of specific details are described. However, it is understood that embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.

Similarly, it should be understood that in order to streamline the present invention and aid in understanding one or more of the various inventive aspects, in the above description of 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, this disclosed method should not be interpreted as reflecting the following intention: that the claimed invention requires more features than the features explicitly recited in each claim. More specifically, as reflected in the claims below, inventive aspects lie in less than all the features of the individual embodiments disclosed above. Therefore, the claims that follow the specific embodiment are hereby expressly incorporated into the specific embodiment, with each claim itself serving as a separate embodiment of the present invention.

Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and/or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.

In addition, those skilled in the art will appreciate that, although some embodiments herein include certain features included in other embodiments but not other features, the combination of features of different embodiments is meant to be within the scope of the present invention and form different embodiments. For example, in the following claims, any one of the claimed embodiments may be used in any combination.

The various component embodiments of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or 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 an embodiment of the present invention. The present invention can also be implemented as a device or apparatus program (e.g., computer program and 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 have the form of one or more signals. Such a signal can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

It should be noted that the above embodiments illustrate the present invention rather than limit it, and that those skilled in the art may design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets shall not be construed as a limitation on the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "one" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention may be implemented by means of hardware comprising a number of different elements and by means of a suitably programmed computer. In a unit claim that lists a number of devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be understood as limitations on the order of execution.

Claims (10)

1. A style-referencing-based multi-layered atomized visual design method, comprising:

dividing the visual design into a global hierarchy, a scene hierarchy, and a multi-layered atomization hierarchy of component hierarchies, wherein the component hierarchies include a base component hierarchy and a variant component hierarchy; the multi-layered atomization hierarchy of each hierarchy comprises a set of atomization style attribute tokens;

Creating at least one target component in a design end page, wherein the style attribute of the target component refers to the atomization style attribute token through a token dynamic style reference mode;

Performing dependency data link analysis on the atomization style attribute tokens referenced by each target component to obtain a decision data state, so that a designer adjusts the reference tokens of the target components according to the decision data state;

in response to the updating of the atomized style attribute token, updating a target component referencing the atomized style attribute token through a token dynamic style update schema.

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

the atomized style attribute token is converted into style codes, wherein the style codes comprise CSS variables, swift codes and XML resources.

3. The method of claim 1 or 2, wherein the global hierarchy, scene hierarchy, and component hierarchy include, but are not limited to, the following style attributes: brand color, font, base spacing, background color, border style, text style, hover state, click state, and disable state.

4. The method of claim 3, wherein the atomized style attribute token includes a name, an alias, and a set of variable attributes;

the name adopts a naming specification formed by a style attribute set of a multi-layered atomization level of a global level, a scene level and a component level;

A first preset specific Fu Pinjie is adopted among the style attribute sets of the multi-layer atomization hierarchy, and a second preset specific Fu Pinjie is adopted among the style attributes of the multi-layer atomization hierarchy;

And the name and the variable attribute set form a key value pair structure.

5. The method of claim 1, wherein the style properties of the target component reference the atomized style property token through a token dynamic style reference schema further comprises:

After the target component determines the reference atomization style attribute token, the style attribute gender name of the target component is the name of the referenced atomization style attribute token;

Wherein, the style attribute of the target component only refers to an atomization style attribute token of the same attribute style, and the name of the atomization style attribute token is unique in a design library.

6. The method of claim 1, wherein said relying data link analysis of the atomized style attribute tokens referenced by each of said target components further comprises:

constructing a token reference directed graph according to each target component and the atomization style attribute token referenced by the target component, wherein the vertex of the token reference directed graph is each target component, and the path is a token reference relation;

Judging whether a circularly dependent ring exists in the token reference directed graph or not; if so, updating the dependent data link of the circularly dependent ring to eliminate the circle; wherein only the self-loop in the circularly dependent loop and the attribute style of the token referenced by each target component are reserved, and the token referenced by the self-loop is deleted;

the dependent data link after the update is taken as the decision data state.

7. The method of claim 1, wherein the updating the target component referencing the atomized style attribute token via a token dynamic style update schema further comprises:

Judging whether the variable attribute and the name of the atomization style attribute token are changed, and synchronously changing the style value of a target component referring to the token when the variable attribute is changed; when the name changes, the style value of the target component referencing the token remains unchanged;

Judging whether the atomization style attribute token of the target component is released, if so, assigning according to the style value of the atomization style attribute token when the atomization style attribute token is released.

8. The method of claim 7, wherein the method further comprises:

Judging whether a first atomization style attribute token referenced by the target component is modified into a second atomization style attribute token, if so, continuing to reference the first atomization style attribute token by the style attribute of the target component, wherein the updating of the second atomization style attribute token does not influence the style attribute of the target component;

If the first atomization style attribute token is re-created, automatically establishing a token reference relation between the style attribute of the target component and the first atomization style attribute token; the style attribute of the target component is updated synchronously with the first atomized style attribute token.

9. The method according to claim 1 or 5, characterized in that the method further comprises:

When a plurality of designers cooperatively quote a plurality of atomization style attribute tokens, merging the dependent data links of the atomization style attribute tokens to obtain a merged dependent data link;

judging whether a cyclic dependency ring exists in the merging dependency data link, and if so, reminding a designer of carrying out ring-opening operation in a mode of a modal popup window.

10. A style-referencing-based multi-layered atomized visual design apparatus, comprising:

A token definition module for partitioning the visual design into a global hierarchy, a scene hierarchy, and a multi-layered atomization hierarchy of component hierarchies, wherein the component hierarchies include a base component hierarchy and a variant component hierarchy; the multi-layered atomization hierarchy of each hierarchy comprises a set of atomization style attribute tokens;

The token quotation module is used for creating at least one target component in the design end page, and the style attribute of the target component quotes the atomized style attribute token through a token dynamic style quotation mode;

The token analysis module is used for carrying out dependency data link analysis on the atomization style attribute tokens referenced by each target component to obtain a decision data state so that a designer can adjust the reference tokens of the target components according to the decision data state;

And the token updating module is used for responding to the updating of the atomization style attribute token and updating a target component referencing the atomization style attribute token through a token dynamic style updating mode.