Abstraction style management method and device based on style variables and modes

Abstract

The invention discloses an abstract style management method and device based on style variables and modes, and the method comprises the steps: creating a style variable set in a canvas page, the style variable set comprising single attribute style variables and composite attribute style variables; creating at least one pattern mode according to the pattern variable set, wherein the pattern mode comprises a color mode, a size mode, a language mode and an interaction mode; associating a layer of a design draft in a canvas page with the style mode so as to switch according to the style mode of the layer; wherein when the pattern switching is carried out on the pattern layer, if the child-level pattern layer is set to be in a non-automatic mode, the pattern mode of the child-level pattern layer does not carry out mode switching along with the parent-level pattern layer; the type of the layer comprises a container, a component, an instance and a region. According to the method, flexible switching between multiple themes and multiple languages is realized through the style set and the mode, and the user experience and the management efficiency are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and particularly to an abstract style management method and device based on style variables and patterns. Background Art

[0002] With the growth of users' personalized needs, modern product design faces two core challenges: multi-theme adaptation (such as light / dark mode switching, brand theme variants) and multi-language support (dynamic adaptation of interface text). Traditional design systems usually adopt the "team library switching" paradigm to implement theme management, that is, by creating multiple independent component libraries corresponding to different themes respectively. Designers usually need to switch the team library to achieve theme color switching, which has deficiencies in the management experience and cannot achieve precise switching under some pages or directly manage in a single team library, affecting the user experience and management efficiency. The reason is that style assets such as theme colors and language packs are scattered in different library files, and traditional methods cannot achieve parallel preview and local adjustment of multiple themes within the same design file (for example, designers cannot directly compare the visual effects of the same page under light / dark themes), and need to switch library files repeatedly, with low operation efficiency. Composite styles such as component spacing and rounded corner combinations are defined in a hard-coded manner and cannot be reused across components. When the brand specifications are upgraded, component parameters need to be modified one by one, and the maintenance cost increases exponentially. In addition, when multiple designers collaborate, library file switching is likely to lead to version confusion, and usually simplifies style management to a two-dimensional mapping relationship of "component-library", ignoring the abstract level and dynamic characteristics of the style itself.

[0003] To solve the above problems, the present invention develops an abstract style management method and device based on style variables and patterns, which can flexibly switch multiple themes and multiple languages through style sets and patterns to improve the user experience and management efficiency. Summary of the Invention

[0004] In view of the above problems, an abstract style management method and device based on style variables and patterns are proposed to facilitate improving the user experience and management efficiency.

[0005] According to one aspect of the present invention, an abstract style management method based on style variables and patterns is provided, including:

[0006] Creating a style variable set in the canvas page, wherein the style variable set includes single-attribute style variables and composite-attribute style variables;

[0007] Creating at least one style pattern according to the style variable set, the style pattern including a color pattern, a size pattern, a language pattern, and an interaction pattern;

[0008] Associate the layers of the design draft in the canvas page with the style mode for switching according to the style mode of the layers. Among them, when the mode of the layer is switched, if the child layer is set to non-automatic mode, the style mode of the child layer does not follow the mode switch of the parent layer. The types of the layers include containers, components, instances, and regions.

[0009] In an alternative manner, the single-attribute style variable includes a numerical style, a text style, a color style, and a boolean style.

[0010] The composite-attribute style variable includes a rounded-corner style, a text style, a stroke style, a special-effect style, a margin style, a fill style, and a grid style. Among them, the rounded-corner style and the margin style adopt a four-numerical composite value format. The text style includes font weight, font size, line height, and font format. The special-effect style includes special-effect type, x value, y value, blur, spread, and color format. The fill style includes single color, gradient color, multi-layer color, and picture fill format. The grid style includes grid type, quantity, and column width format.

[0011] In an alternative manner, the composite-attribute style variable supports referencing the single-attribute style variable and presents the referenced style during display.

[0012] Among them, when the mouse hovers over the target layer, the style reference or unbinding style operation is displayed.

[0013] In an alternative manner, when the selected layer uses multiple style modes, a switchable set and style mode are displayed through the property bar of the layer.

[0014] Among them, after the style mode is switched, the states of the selected layer and its internal child layers are changed to the values after the mode switch. If the child layer of the layer is set separately, it does not change following the state of its parent.

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

[0016] If the composite-attribute style variable in the style variable set references a variable of the numerical style, the referenced numerical style is displayed in the composite-attribute style variable set.

[0017] If the composite-attribute style variable as a whole references an attribute style variable of a non-numerical style, the name of the attribute style variable is displayed in the composite-attribute style variable set.

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

[0019] When the parent layer applies a style mode, its child layers inherit the style mode by default, unless the child layers are explicitly set to non-automatic mode or a separate style override rule is defined;

[0020] Among them, when the child layer makes partial modifications or complete replacements to the inherited style variables, the inheritance relationship of the unmodified parts is retained.

[0021] In an optional manner, the style variables include style variable inheritance, style variable override, and override priority order;

[0022] Among them, for style variable inheritance, when a new layer is created in the canvas page, the layer inherits the style mode and associated style variables of its parent layer by default;

[0023] For style variable override, the child layer overrides the style variables inherited from the parent layer. The override operations include explicit override and conditional override. Explicit override means selecting different style variables or modifying the values of the associated style variables in the property bar of the child layer to override the style variables of the parent layer; Conditional override means dynamically overriding style variables according to preset conditions;

[0024] For the override priority order, when there are multiple levels of inheritance and override, the explicit override of the child layer takes precedence over the style variables of the parent layer, and the conditional override takes precedence over the default inheritance. The override closer to the current layer has a higher priority.

[0025] In an optional manner, when multiple associated layers are selected and the style mode of a certain layer is switched or the style variables are modified, identify the logical association relationship between the associated layers and provide a strict synchronization linkage mode and an intelligent adaptation linkage mode;

[0026] Among them, in the strict synchronization linkage mode, all associated layers are forced to apply the same style adjustment; in the intelligent adaptation linkage mode, adjust the inheritance ratio or conversion rules of the style parameters according to the layer type and design specifications to ensure visual consistency while retaining personalized expression.

[0027] In an optional manner, the method further includes:

[0028] When the user adjusts the styles of multiple associated layers through the linkage mode, analyze the style propagation path and potential conflicts and display the propagation influence range and conflict levels in real time in the property bar; Among them, in the strict synchronization linkage mode, display the propagation path of the style adjustment in the form of a dynamic heat map, and the color depth represents the inheritance distance of the affected layers;

[0029] When style propagation is detected, resulting in excessive color contrast or imbalanced size ratios, a graded warning is issued based on the severity of the conflict. The system also supports tracing back the historical propagation trajectory of style propagation operations. The impact of each linkage adjustment is displayed in a timeline format, allowing users to go back to any historical state and compare the effects of different adjustment schemes.

[0030] According to another aspect of the present application, an abstract style management device based on style variables and patterns is provided, comprising:

[0031] A style variable set creation module, configured to create a style variable set in a canvas page, wherein the style variable set includes single attribute style variables and compound attribute style variables;

[0032] a style mode creation module, configured to create at least one style mode according to the style variable set, wherein the style mode includes a color mode, a size mode, a language mode, and an interaction mode;

[0033] A style mode association module is used to associate the layer of the design draft in the canvas page with the style mode so as to switch according to the style mode of the layer; wherein, when the mode of the layer is switched, if the child layer is set to non-automatic mode, the style mode of the child layer will not follow the mode switching of the parent layer; the types of layers include containers, components, instances and regions.

[0034] The solution provided by the above embodiments of the present invention creates a set of style variables in the canvas page, where the set of style variables includes single-attribute style variables and composite-attribute style variables; creates at least one style mode according to the set of style variables, and the style mode includes a color mode, a size mode, a language mode, and an interaction mode; associates the layers of the design draft in the canvas page with the style mode to perform switching according to the style mode of the layer; among them, when the mode of the layer is switched, if the sub-layer is set to a non-automatic mode, the style mode of the sub-layer does not follow the mode switching of the parent layer; the types of the layer include containers, components, instances, and regions. The present invention realizes flexible switching of multiple themes and multiple languages through style sets and modes, improving user experience and management efficiency. Specifically, by introducing the concepts of single-attribute styles and composite-attribute styles, users are allowed to create and manage single-attribute styles such as numerical values and strings, as well as composite-attribute styles such as rounded corners and margins. By designing the concepts of style sets and modes, users can define and switch different theme and language settings in different sets, realizing flexible management of multiple themes and multiple languages. Moreover, the functions of style reference and unbinding are realized, allowing composite styles to reference single-style values and be reused in different scenarios, and supporting conditional judgment and interactive prototype production in prototyping. By adjusting the style order and hierarchy, the flexibility and efficiency of style management are improved. Support directly applying and adding styles in the canvas, providing a new style application interaction method while maintaining the user's usage habits.

[0035] 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 describes the embodiments of the present invention. Brief Description of the Drawings

[0036] 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. And throughout the drawings, the same reference numerals are used to represent the same components. In the drawings:

[0037] Figure 1 Shows a schematic flow chart of the abstract style management method based on style variables and modes according to an embodiment of the present invention; <B

[0038] Figure 2 Shows a schematic diagram of grouping variables through a set according to an embodiment of the present invention;

[0039] Figure 3 Shows a schematic diagram of a numerical style according to an embodiment of the present invention;

[0040] Figure 4 Shows the schematic diagram of mode switching in an embodiment of the present invention;

[0041] Figure 5 Shows the schematic diagram of the rounded corner style in an embodiment of the present invention;

[0042] Figure 6 Shows the schematic diagram of the numerical style reference in an embodiment of the present invention;

[0043] Figure 7 Shows the schematic diagram of the modification operation after reference in an embodiment of the present invention;

[0044] Figures 8a to 8b Respectively show the schematic diagrams of single style reference and composite style reference in an embodiment of the present invention;

[0045] Figure 9 Shows the schematic diagram of style unbinding in an embodiment of the present invention;

[0046] Figure 10 Shows the schematic diagram of mode switching in an embodiment of the present invention; <S

[0047] Figure 11 Shows the functional structure schematic diagram of the abstract style management method device based on style variables and modes in an embodiment of the present invention. Detailed implementation manners

[0048] 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 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 actual applications, components are often organized into a tree-like structure of nested layers.

[0051] Instance: An instance refers to a specific reference to a component. What is dragged out from the component list by the user or copied and pasted from the component is an "instance", rather than the component itself.

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

[0053] Layer: In a UI design draft, each layer can be regarded as a stacked layer of multiple design elements such as text, images, shapes, colors, etc. Different layers can be edited independently without affecting other layers. By adjusting the order, transparency, and other properties of the layers, various complex visual effects and interactive designs can be achieved. In this application, the layer includes components, instances, and containers.

[0054] Sub-layer: In the layer structure, if a layer is nested inside another layer, then the nested layer is the sub-layer, and the outer layer is the parent layer. The sub-layer can inherit all or part of the properties of the parent layer.

[0055] The following uses specific embodiments to elaborate in detail on the abstract style management method and device based on style variables and patterns proposed by the present invention.

[0056] Embodiment 1:

[0057] Figure 1 Shows a functional structure diagram of the abstract style management method based on style variables and patterns according to an embodiment of the present invention. Specifically, as Figure 1 shown, it includes the following steps:

[0058] Step S101, create a set of style variables in the canvas page, where the set of style variables includes single-property style variables and composite-property style variables.

[0059] In this embodiment, by defining common styles in the design draft as variables and reusing them in multiple layers or components, the repeated definition of the same style is avoided, and the consistency of the design is improved. When it is necessary to modify a certain style, only the corresponding style variable needs to be modified, and all layers or components that reference this variable will be automatically updated, greatly simplifying the style modification process and improving the design efficiency. Combining single-property style variables and composite-property style variables to construct a more complex style structure, quickly changing the overall style of the design draft to adapt to different scenarios and requirements. Among them, the composite-property style variable references the single-property style variable to form a nested structure layer by layer.

[0060] Specifically, a "style variable" panel or option is provided in a certain area of the canvas page (such as the sidebar or toolbar). The panel contains a list of style variables, showing the created style variables. Click "New Style Variable" to create a single-property style variable (such as a numeric value, text, color, or boolean value) or a composite-property style variable (such as rounded corners, text, stroke, special effects, margins, padding, or grid). For example, for a rounded-corner style variable, enter four numeric values representing the radii of the upper-left, upper-right, lower-right, and lower-left corners respectively. For a text style variable, enter property values such as font weight, font size, line height, etc. Support for composite-property style variables to reference single-property style variables. For example, the font size in a text style variable can reference the title font size of a numeric-type style variable. In addition, classification, grouping (such as classification by color, font, size), renaming, copying, and deleting functions of style variables are also supported. For example, associate the text style of a button with the buttonStyle composite-property style variable, associate the shadow style of a card with the shadowStyle composite-property style variable, and associate the inner padding of a card with the cardPadding composite-property style variable. If the color of the button is modified, only the value of the primaryColor single-property style variable needs to be modified, and the colors of all buttons associated with this variable will be automatically updated. If the shadow effect of the card needs to be modified, only the value of the shadowStyle composite-property style variable needs to be modified, and the shadows of all cards associated with this variable will be automatically updated.

[0061] In an alternative approach, the single-property style variables include numeric styles, text styles, color styles, and boolean value styles;

[0062] The composite-property style variables include rounded-corner styles, text styles, stroke styles, special effects styles, margin styles, padding styles, and grid styles; among them, the rounded-corner style and the margin style adopt a four-numeric composite value format, the text style includes font weight, font size, line height, and font format, the special effects style includes special effects type, x value, y value, blur, spread, and color format, the padding style includes single color, gradient color, multi-layer color, and picture filling format, and the grid style includes grid type, quantity, and column width format.

[0063] In this embodiment, single-attribute variables (such as color and font size) support independent adjustment, avoiding affecting other attributes when modifying composite styles (for example, when adjusting the button color, there is no need to redefine the margin). Composite-attribute variables (such as rounded corners and text styles) manage associated attributes in a bundled manner, reducing repetitive operations (such as uniformly modifying the rounded corner radius of all cards). Predefined variables (such as color-primary and spacing-md) can be reused in different components and modes to ensure brand consistency. Composite variables support multi-level definitions (such as fill styles including solid color and gradient color) to adapt to different design requirements. And intelligent style adjustment is achieved through conditional override (switching between text-left or text-right according to the language mode). For example, design an e-commerce card component across platforms to support different sizes and theme modes. As Figures 2 to 7 shown, define single variables: color-primary-light: #2196F3 (the main color for the light theme); color-primary-dark: #BB86FC (the main color for the dark theme); spacing-card: 16px (the inner margin of the card), define composite variables: border-radius-card: 8px (the rounded corner of the card); text-style-title: {fontSize: 18px, fontWeight: 600} (the text style of the title); fill-card-hover: {type: "gradient", colors: ["#2196F3", "#1976D2"]} (the gradient fill on hover). Create color modes: Light (associated with color-primary-light) and Dark (associated with color-primary-dark), create size modes: Compact (spacing-card: 12px) and Default (spacing-card: 16px). The card layer is associated with the border-radius-card and spacing-card variables, and the title text is associated with text-style-title. When switching to the Dark mode, the text color of the card automatically becomes color-primary-dark, and the background fill switches to a dark-adapted style. When adjusted to the Compact mode, the inner margin of the card is reduced from 16px to 12px, but the title text style remains unchanged. By modifying the value of the color-primary-light variable, the light theme colors of all associated layers are automatically updated; by adjusting the border-radius-card variable, the rounded corners of all cards change uniformly without the need for layer-by-layer adjustment, thus significantly improving the design iteration efficiency.

[0064] The single-attribute variables are shown in Table 1:

[0065] Table 1

[0066]

[0067]

[0068] In an alternative manner, the composite attribute style variable supports referencing a single attribute style variable and presents the referenced style during display;

[0069] Among them, when the mouse hovers over the target layer, the style reference or unbinding operation is displayed.

[0070] In this embodiment, as Figures 8a to 8b shown, the composite variable achieves unified cross-component styles by referencing a single variable. When the single variable is modified, all reference locations are automatically updated, avoiding duplicate designs. The composite variable automatically inherits conditional logic without the need for layer-by-layer configuration. The hover display of the reference relationship (such as fill style → primary color variable) helps designers quickly locate the variable source and simplifies the debugging process. As Figure 9 shown, the child layer unbinds the reference (such as using an independent color for the button hover state), achieving local customization on the basis of inheritance.

[0071] For example, in the composite variable definition, a single variable is referenced through the @ symbol:

[0072]

[0073]

[0074] Parse @color-primary and associate its current value. When the mouse hovers over the layer, the style source is displayed in the property bar (such as fill color → primary color variable) and a "Unbind" button is provided. Among them, the reference link is displayed in the variable management panel (such as fill-style-primary → color-primary → #2196F3) and clicking is supported to jump to the definition. After clicking "Unbind", the reference field in the composite variable is converted to an independent value (such as the color of fill-style-primary changes from @color-primary to #2196F3), and the reference value is directly modified in the child layer property bar (such as temporarily changing color-primary to #FF5722).

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

[0076] If the composite attribute style variable of the style variable set references a variable of numerical style, then the referenced numerical style is displayed in the composite attribute style variable set;

[0077] If the composite attribute style variable as a whole references an attribute style variable of a non - numerical style, the name of the attribute style variable is displayed in the set of the composite attribute style variables.

[0078] In this embodiment, in the composite variable panel, numerical variables are calculated and previewed in real - time (e.g., padding: @spacing - unit×2 → 24px), and non - numerical variables provide jump links to the definition locations, reducing multi - panel switching. Numerical variables can be associated with conditional logic (e.g., @spacing - unit - mobile), and the calculated values are automatically refreshed when the device mode is switched. Non - numerical variables retain name references to ensure global effectiveness when the theme is switched. Through the differential display of type perception, designers can quickly locate numerical parameters and non - numerical theme variables, significantly improving collaboration efficiency while maintaining style flexibility.

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

[0080] When the parent layer applies a style mode, its child layers inherit this style mode by default, unless the child layer is explicitly set to a non - automatic mode or a separate style override rule is defined;

[0081] Among them, after the child layer locally modifies or completely replaces the inherited style variable, the inheritance relationship of the unmodified part is retained.

[0082] In this embodiment, the parent - level style mode can be applied to all child layers with one key, avoiding repeated configuration layer by layer (such as global theme colors, font specifications). When a new child layer is created, it automatically inherits the parent - level style, reducing manual operations by designers (e.g., buttons in the component library default to inherit the main color). The child layer only modifies specific style variables (such as button text color), and the remaining variables (such as margins, rounded corners) are still synchronized with the parent level, avoiding style fragmentation. The child layer is allowed to completely break away from the control of the parent level while retaining the ability of partial inheritance. The override priority is: explicit override > conditional override > default inheritance. When the parent - level style is updated, it can be selectively pushed to the child layer (the child layer is not explicitly overridden), reducing the cost of version iteration.

[0083] For example, design a product card component that includes child layers such as images, titles, and prices. The style mode of the parent container is as follows: background color: @color - card - bg (non - numerical variable); padding: @spacing - unit * 2 (numerical variable); border radius: @border - radius - card (numerical variable). The title layer inherits the background color and padding of the parent and explicitly overrides the text color to @color - text - primary (non - numerical variable). The price layer is set to non - automatic mode and completely customizes the text size and color. The image layer conditionally overrides the border radius, with a border radius of 0 on mobile (viewportWidth < 768) and inherits the parent border radius on the desktop. When the parent is adjusted and @spacing - unit is changed from 8px to 12px, the padding of the title layer is automatically updated to 24px, and the text color remains unchanged. The price layer remains unchanged (due to explicit override), and the desktop border radius of the image layer is updated synchronously while remaining 0 on mobile. Through the above inheritance and override methods, designers can efficiently manage the style consistency of complex components and flexibly adjust local styles when needed.

[0084] Step S102, create at least one style mode according to the set of style variables, where the style mode includes a color mode, a size mode, a language mode, and an interaction mode.

[0085] In this embodiment, the color, size, language, and interaction style dimensions are decoupled into independent modes to avoid style conflicts caused by mixed configurations (e.g., modifying the main color in the color mode does not affect the size parameters). The same mode can be reused across projects (e.g., the brand red theme color mode is adapted to multiple product lines), reducing the cost of repeated definition. The size mode can be associated with viewport size variables to automatically adjust parameters such as margins and fonts. The language mode integrates multi - language variables and dynamically replaces text content when switching modes. When the mode changes, only the associated layers are redrawn, reducing the rendering overhead (e.g., when only the color mode changes, the size - related layers do not need to be updated).

[0086] For example, for multilingual social apps, theme color switching and responsive layout are supported. The color mode is: web-theme: primary color #2196F3, secondary color #FF4081; mobile-theme: primary color #4CAF50, secondary color #FFC107; the size mode is: desktop-layout: spacing 24px, font 16px; mobile-layout: spacing 16px, font 14px; the language mode is: zh-CN: button text "Confirm", en-US: button text "Confirm"; the container layer is associated with the web-theme color mode and desktop-layout size mode; the button component inherits the container color mode, but explicitly overrides the size mode to mobile-layout (adapting to the mobile click area); the text layer is associated with the zh-CN language mode, and conditional override is set (automatically switches to en-US when an English environment is detected); when the color mode is switched globally, the primary color of all layers associated with the web-theme becomes #2196F3, and the button component is updated synchronously due to the inheritance relationship. When the viewport width is <768px, it automatically switches to mobile-layout, and the button spacing and font are automatically reduced. When the language mode is switched to English, all text layers associated with zh-CN are automatically replaced with en-US content, and the button text changes to "Confirm." Designers can complete brand upgrades by switching color modes without having to manually modify multiple layers. Mobile buttons inherit the spacing specifications of mobile-layout to maintain visual proportions consistent with the web version. When adding the dark-theme color mode, simply define the variable and associate it with the layer, without adjusting existing logic.

[0087] In an optional manner, the style variables include style variable inheritance, style variable overriding, and overriding priority;

[0088] Among them, for style variable inheritance, when a new layer is created in the canvas page, the layer inherits the style mode and associated style variables of its parent layer by default;

[0089] For style variable overrides, a child layer overrides the style variables inherited from the parent layer. Override operations include explicit overrides and conditional overrides. Explicit overrides refer to selecting a different style variable in the child layer's property bar or modifying the value of an associated style variable to override the parent layer's style variable. Conditional overrides refer to dynamically overriding style variables based on preset conditions.

[0090] Regarding override priority, when there are multiple layers of inheritance and overrides, explicit overrides of child layers take precedence over style variables of parent layers, and conditional overrides take precedence over default inheritance. The closer the override is to the current layer, the higher its priority.

[0091] In this embodiment, the newly created layer automatically inherits the parent style, reducing repetitive setting operations. Explicit override and conditional override allow for local adjustments on the basis of inheritance, maintaining overall style unity while supporting personalized expression and avoiding style chaos. Fine-grained control is achieved through the override priority order (explicit > conditional > default inheritance). For example, a child layer can explicitly override the parent color, while the margin undefined by the parent is controlled by the style variable of the upper layer, adapting to complex design requirements. For example, design a responsive button component that supports the default state, hover state, and brand event theme. The button component inherits the "main color" (blue) and "rounded corner style" (4px) of the parent container. Set the hover state for the button, explicitly override the "main color" to green, retain the inherited rounded corner style, define the "brand event" condition, override the "main color" to the brand event theme color (orange), and modify the "rounded corner style" to 8px. When the event theme is enabled, the button color becomes orange and the rounded corners are 8px (conditional override takes effect). When hovering, the color becomes green (explicit override has a higher priority than conditional override), and the rounded corners remain 8px (conditional override does not modify the hover state style). The button maintains visual consistency in different states (inheriting the default style), while flexibly adapting to different scenarios through override. When the parent "main color" or "rounded corner style" is modified, all child layers that are not explicitly overridden are automatically updated.

[0092] Step S103: Associate the layers of the design draft in the canvas page with the style mode for switching according to the style mode of the layers. When switching the mode of a layer, if the child layer is set to a non-automatic mode, the style mode of the child layer does not follow the mode switch of the parent layer. The types of the layers include containers, components, instances, and regions.

[0093] In this embodiment, the style mode ensures that associated layers follow preset design specifications (such as brand colors and font specifications), reducing style deviations caused by human errors. When the style mode of the parent layer is switched, the child layers follow by default (unless set to non-automatic mode), maintaining visual consistency between levels. The child layers are set to non-automatic mode, supporting local personalization under a unified style (such as separately designing the hover state of button components). For example, a responsive web page includes a navigation bar (container), button components (components), a card area (area), and their instances. The navigation bar is associated with the "brand color mode" and the "desktop size mode", the button components are associated with the "interaction mode" (defining hover and click effects) and the "mobile size mode", and the card area is set to non-automatic mode, independently defining the "card theme color mode". When the brand color is globally switched and the main color in the "brand color mode" is modified to red, the navigation bar and button components (automatic mode) are automatically updated to red, while the card area (non-automatic mode) remains the original blue. After switching the button components to the "mobile size mode", the button size is reduced, but the hover effect (defined by the interaction mode) remains. The "highlight color mode" is separately set for the instances of the card area, overriding its theme color to orange, and other instances are not affected. As Figure 10 shown, global style updates (such as brand color adjustment) can be quickly achieved through style mode switching, and the non-automatic mode supports local personalization (such as independent color matching for the card area). [[ID=,4]]

[0094] In an alternative approach, when the selected layer uses multiple style modes, a switchable set of style modes is displayed through the property bar of the layer;

[0095] wherein, after the style mode is switched, the state of the selected layer and its internal child layers changes to the value after the mode switch. If the child layers of the layer have been separately set, they do not change following the state of their parent layer.

[0096] In this embodiment, it is allowed for a single layer to be associated with multiple style modes (such as simultaneously associating the "brand color mode" and the "interaction mode"). Designers can freely combine style modes according to the scenario without creating independent styles for different combinations. The switchable set of style modes is uniformly displayed through the property bar, avoiding switching between multiple panels to find styles. After switching the mode with one key, the layer and its child layers are automatically updated with the associated styles without the need to adjust layer by layer. The child layers are separately set with style modes or remain in non-automatic mode to ensure that the parent mode switch does not affect their independent designs. The modification of the child layers only affects themselves, avoiding accidentally overwriting the parent styles.

[0097] In an alternative approach, when multiple associated layers are selected and the style mode of a certain layer is switched or the style variables are modified, the logical association relationships between the associated layers are identified and a strict synchronization linkage mode and an intelligent adaptation linkage mode are provided;

[0098] Among them, in strict synchronization linkage mode, all associated layers are forced to apply the same style adjustments; in intelligent adaptation linkage mode, the inheritance ratio or conversion rules of style parameters are adjusted according to the layer type and design specifications to ensure visual consistency while retaining personalized expression.

[0099] In this embodiment, Smart Mode automatically adapts style parameters based on layer type (e.g., button and text size adjustments), while Strict Mode enforces the same style rules to ensure visual consistency across multiple pages / components (e.g., header hierarchy specifications). It also automatically analyzes logical relationships between layers (e.g., parent-child containers, repeating components), reducing the workload of manually marking relationships.

[0100] In an optional manner, the method further includes:

[0101] When users adjust the styles of multiple related layers in linkage mode, the style propagation path and potential conflicts are analyzed, and the propagation impact range and conflict level are displayed in real time in the property bar. In strict synchronization linkage mode, the propagation path of the style adjustment is displayed in the form of a dynamic heat map, and the color depth indicates the inheritance distance of the affected layers.

[0102] When style propagation is detected, resulting in excessive color contrast or unbalanced size ratios, a graded warning is issued based on the severity of the conflict. The system also supports tracing back the historical propagation trajectory of style propagation operations. The impact of each linkage adjustment is displayed in a timeline format, allowing users to go back to any historical state and compare the effects of different adjustment schemes.

[0103] In this embodiment, the dynamic heat map displays the style propagation path in real time (such as the influence range of color and size adjustment), and the color depth reflects the inheritance level, helping designers predict potential risks. Key indicators such as color contrast and size ratio are monitored in real time, and early warnings are graded according to the severity level (such as yellow warning and red error) to avoid design accidents. The timeline records the influence range of each linkage operation and supports one-key rollback to any historical state, facilitating the comparison of the effects of different adjustment schemes. For example, design a product card for an e-commerce platform, which includes pictures, titles, prices, and buttons, and supports multi-theme switching (such as dark mode and festival theme). In the strict synchronization mode, when the background color of the card container is switched from white to dark gray (#333), it is detected that the contrast ratio of the title text color (white) against the dark gray background is 3:1 (lower than the AA standard of 4.5:1), and a red warning is popped up. The dynamic heat map shows that the button size adjustment will affect 3 sub-components (icon, text, hover area), and an orange highlight prompts to check the interaction status. The user tries 3 dark mode schemes (adjusting the background color, text color, and button style), and the timeline records the influence range of each adjustment. By rolling back to the first adjustment state, it is found that the button hover effect (scaling + color change) of Scheme 3 is more prominent on the dark background.

[0104] The solution provided in the above embodiment of the present invention creates a style variable set in the canvas page, where the style variable set includes single-attribute style variables and composite-attribute style variables; at least one style mode is created according to the style variable set, and the style mode includes a color mode, a size mode, a language mode, and an interaction mode; the layers of the design draft in the canvas page are associated with the style mode to perform switching according to the style mode of the layer; among them, when the mode of the layer is switched, if the sub-layer is set to a non-automatic mode, the style mode of the sub-layer does not follow the parent layer for mode switching; the types of the layer include a container, a component, an instance, and a region. The present invention realizes flexible switching between multiple themes and multiple languages through the style set and mode, improving the user experience and management efficiency. Specifically, by introducing the concepts of single-attribute styles and composite-attribute styles, users are allowed to create and manage single-attribute styles such as numerical values and strings, as well as composite-attribute styles such as rounded corners and margins. By designing the concepts of style sets and modes, users can define and switch different theme and language settings in different sets, realizing flexible management of multiple themes and multiple languages. In addition, the functions of style reference and unbinding are realized, allowing composite styles to reference single-style values and be reused in different scenarios, and supporting conditional judgment and interactive prototyping in prototyping. By adjusting the style order and hierarchy, the flexibility and efficiency of style management are improved. It supports directly applying and adding styles in the canvas, providing a new style application interaction method while maintaining the user's usage habits.

[0105] Embodiment 2:

[0106] Figure 11 shows a schematic functional structure diagram of an abstract style management method and apparatus based on style variables and patterns according to an embodiment of the present invention. As Figure 11 shown, the apparatus includes:

[0107] A style variable set creation module 1101, configured to create a style variable set in a canvas page, where the style variable set includes single-attribute style variables and composite-attribute style variables;

[0108] A style pattern creation module 1102, configured to create at least one style pattern according to the style variable set, where the style pattern includes a color pattern, a size pattern, a language pattern, and an interaction pattern;

[0109] A style pattern association module 1103, configured to associate a layer of a design draft in a canvas page with the style pattern for switching according to the style pattern of the layer; wherein, when performing mode switching on the layer, if a sub-layer is set to a non-automatic mode, the style pattern of the sub-layer does not follow the mode switching of the parent layer; the types of the layer include a container, a component, an instance, and a region.

[0110] In an optional manner, the single-attribute style variables include a numeric style, a text style, a color style, and a boolean value style;

[0111] The composite-attribute style variables include a rounded corner style, a text style, a stroke style, a special effect style, a margin style, a fill style, and a grid style; wherein, the rounded corner style and the margin style adopt a four-numeric composite value format, the text style includes font weight, font size, line height, and font format, the special effect style includes special effect type, x value, y value, blur, spread, and color format, the fill style includes single color, gradient color, multi-layer color, and picture fill format, and the grid style includes grid type, quantity, and column width format.

[0112] In an optional manner, the composite-attribute style variables support referencing single-attribute style variables and present the referenced styles during display;

[0113] wherein, when the mouse hovers over a target layer, a style reference or unbinding style operation is displayed.

[0114] In an optional manner, the style pattern association module 1103 is further configured to:

[0115] When the selected layer uses multiple style patterns, display a switchable set and style pattern through the property bar of the layer;

[0116] Among them, after the style mode is switched, the states of the selected layer and its internal sub-layers are changed to the values after the mode switch. If the sub-layers of the layer are set separately, they do not change following the state of their parent layer.

[0117] In an optional manner, if the composite attribute style variable of the style variable set references a variable of the numeric style, the referenced numeric style is displayed in the composite attribute style variable set;

[0118] If the composite attribute style variable as a whole references an attribute style variable of a non-numeric style, the name of the attribute style variable is displayed in the composite attribute style variable set.

[0119] In an optional manner, the style mode association module 1103 is further configured to:

[0120] When the parent layer applies a style mode, its child layers inherit the style mode by default, unless the child layers are explicitly set to a non-automatic mode or a separate style override rule is defined;

[0121] Among them, when the child layer makes partial modifications or complete replacements to the inherited style variables, the inheritance relationship of the unmodified part is retained.

[0122] In an optional manner, the style variables include style variable inheritance, style variable override, and override precedence;

[0123] Among them, for style variable inheritance, when a new layer is created on the canvas page, the layer inherits the style mode and associated style variables of its parent layer by default;

[0124] For style variable override, the child layer overrides the style variables inherited from the parent layer. The override operations include explicit override and conditional override. Explicit override means selecting different style variables or modifying the values of the associated style variables in the property bar of the child layer to override the style variables of the parent layer; Conditional override means dynamically overriding style variables according to preset conditions;

[0125] For override precedence, when there are multiple levels of inheritance and override, the explicit override of the child layer takes precedence over the style variables of the parent layer, and the conditional override takes precedence over the default inheritance. The override closer to the current layer has a higher priority.

[0126] In an optional manner, the style mode association module 1103 is further configured to:

[0127] When multiple associated layers are selected and a style mode switch or style variable modification is performed on a certain layer, identify the logical association relationship between the associated layers and provide a strict synchronization linkage mode and an intelligent adaptation linkage mode;

[0128] Among them, in strict synchronization linkage mode, all associated layers are forced to apply the same style adjustments; in intelligent adaptation linkage mode, the inheritance ratio or conversion rules of style parameters are adjusted according to the layer type and design specifications to ensure visual consistency while retaining personalized expression.

[0129] In an optional manner, the style mode association module 1103 is further configured to:

[0130] When users adjust the styles of multiple related layers in linkage mode, the style propagation path and potential conflicts are analyzed, and the propagation impact range and conflict level are displayed in real time in the property bar. In strict synchronization linkage mode, the propagation path of the style adjustment is displayed in the form of a dynamic heat map, and the color depth indicates the inheritance distance of the affected layers.

[0131] When style propagation is detected, resulting in excessive color contrast or unbalanced size ratios, a graded warning is issued based on the severity of the conflict. The system also supports tracing back the historical propagation trajectory of style propagation operations. The impact of each linkage adjustment is displayed in a timeline format, allowing users to go back to any historical state and compare the effects of different adjustment schemes.

[0132] The solution provided by the above-mentioned embodiment of the present invention creates a style variable set on a canvas page, wherein the style variable set includes single-attribute style variables and compound-attribute style variables; creates at least one style mode based on the style variable set, wherein the style modes include color mode, size mode, language mode, and interaction mode; associates the design layer on the canvas page with the style mode, and switches according to the style mode of the layer; wherein, when switching the mode of the layer, if the child layer is set to non-automatic mode, the style mode of the child layer does not follow the mode switching of the parent layer; the layer types include container, component, instance, and region. The present invention uses style sets and modes to achieve flexible switching between multiple themes and multiple languages, improving user experience and management efficiency. Specifically, by introducing the concepts of single-attribute styles and compound-attribute styles, users are allowed to create and manage single-attribute styles such as numbers and strings, as well as compound-attribute styles such as rounded corners and margins. By designing the concepts of style sets and modes, users can define and switch between different themes and language settings in different sets, achieving flexible management of multiple themes and multiple languages. Furthermore, we've implemented style referencing and unbinding functionality, allowing styles to reference a single style value and reuse it in different scenarios. This also supports conditional judgment and interactive prototyping during prototyping. By adjusting the order and hierarchy of styles, we've improved the flexibility and efficiency of style management. We've also added support for applying and adding styles directly within the canvas, maintaining user experience while providing new interactive ways to apply styles.

[0133] The algorithms or displays provided herein are not inherently related to any particular computer, virtual system, or other device. A variety of general-purpose systems may also be used in conjunction with the teachings provided herein. The structure required to construct such systems will be apparent from the above description. In addition, embodiments of the present invention are not directed to any particular programming language. It should be understood that the teachings of the present invention described herein can be implemented in a variety of programming languages, and the description of a particular language above is for the purpose of disclosing the best mode of the present invention.

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

[0135] 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 in a single embodiment, figure, or description thereof. However, the disclosed method should not be construed as reflecting an 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 of 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.

[0136] Those skilled in the art will appreciate that the modules in the devices in the embodiments can be adaptively changed and disposed in one or more devices different from 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 expressly 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.

[0137] In addition, those skilled in the art can understand that although some embodiments herein include certain features included in other embodiments rather than other features, the combination of 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.

[0138] 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 apparatus program (for example, a computer program and a computer program product) for executing part or all of the methods described herein. Such a program for 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.

[0139] 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 a unit claim listing several devices, several of these devices can 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 can 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 abstract style management method based on style variables and patterns, characterized in that, Including: Create a set of style variables in the canvas page, where the set of style variables includes single-property style variables and composite-property style variables; Create at least one style mode according to the set of style variables, where the style mode includes a color mode, a size mode, a language mode, and an interaction mode; Associate the layers of the design draft in the canvas page with the style mode to switch according to the style mode of the layer; among them, when the mode of the layer is switched, if the sub-layer is set to a non-automatic mode, the style mode of the sub-layer does not follow the parent layer for mode switching; the types of the layer include a container, a component, an instance, and a region.

2. The abstract style management method based on style variables and patterns according to claim 1, wherein The single-property style variables include a numeric style, a text style, a color style, and a boolean style; The composite-property style variables include a rounded-corner style, a text style, a stroke style, a special-effect style, a margin style, a fill style, and a grid style; among them, the rounded-corner style and the margin style adopt a four-numeric composite value format, the text style includes font weight, font size, line height, and font format, the special-effect style includes a special-effect type, an x value, a y value, blur, spread, and a color format, the fill style includes a single color, a gradient color, a multi-layer color, and a picture fill format, and the grid style includes a grid type, a quantity, and a column width format.

3. The abstract style management method based on style variables and patterns according to claim 1, characterized in that The composite-property style variables support referencing single-property style variables and presenting the referenced styles during display; Among them, when the mouse hovers over the target layer, a style reference or style unbinding operation is displayed.

4. The abstract style management method based on style variables and patterns according to claim 1, wherein When the selected layer uses multiple style modes, a switchable set and style mode are displayed through the property bar of the layer; Among them, after the style mode is switched, the states of the selected layer and its internal sub-layers are changed to the values after the mode switch. If the sub-layer of the layer is set separately, it does not change following the state of its parent layer.

5. The abstract style management method based on style variables and patterns according to claim 1, characterized in that The method further includes: If the composite-property style variable of the set of style variables references a variable of the numeric style, the referenced numeric style is displayed in the set of composite-property style variables; If the composite-property style variable as a whole references an attribute style variable of a non-numeric style, the name of the attribute style variable is displayed in the set of composite-property style variables.

6. The abstract style management method based on style variables and patterns according to claim 1, characterized in that The method further includes: When the parent layer applies a style mode, its sub-layers inherit the style mode by default, unless the sub-layer is explicitly set to a non-automatic mode or a separate style override rule is defined; Among them, when the sub-layer locally modifies or completely replaces the inherited style variable, the inheritance relationship of the unmodified part is retained.

7. The abstract style management method based on style variables and patterns according to claim 1, characterized in that The style variables include style variable inheritance, style variable override, and override precedence; Among them, for style variable inheritance, when a new layer is created in the canvas page, the layer inherits the style mode and associated style variables of its parent layer by default; For style variable overrides, a child layer overrides the style variables inherited from the parent layer. Override operations include explicit overrides and conditional overrides. Explicit overrides refer to selecting a different style variable in the child layer's property bar or modifying the value of an associated style variable to override the parent layer's style variable. Conditional overrides refer to dynamically overriding style variables based on preset conditions. Regarding override priority, when there are multiple layers of inheritance and overrides, explicit overrides of child layers take precedence over style variables of parent layers, and conditional overrides take precedence over default inheritance. The closer the override is to the current layer, the higher its priority.

8. The abstract style management method based on style variables and patterns according to claim 1, characterized in that When multiple associated layers are selected and the style mode is switched or the style variables of a layer are modified, the logical relationship between the associated layers is identified and a strict synchronization linkage mode and an intelligent adaptation linkage mode are provided; Among them, in strict synchronization linkage mode, all associated layers are forced to apply the same style adjustments; in intelligent adaptation linkage mode, the inheritance ratio or conversion rules of style parameters are adjusted according to the layer type and design specifications to ensure visual consistency while retaining personalized expression.

9. The abstract style management method based on style variables and patterns according to claim 8, characterized in that The method further comprises: When users adjust the styles of multiple related layers in linkage mode, the style propagation path and potential conflicts are analyzed, and the propagation impact range and conflict level are displayed in real time in the property bar. In strict synchronization linkage mode, the propagation path of the style adjustment is displayed in the form of a dynamic heat map, and the color depth indicates the inheritance distance of the affected layers. When style propagation is detected, resulting in excessive color contrast or unbalanced size ratios, a graded warning is issued based on the severity of the conflict. The system also supports tracing back the historical propagation trajectory of style propagation operations. The impact of each linkage adjustment is displayed in a timeline format, allowing users to go back to any historical state and compare the effects of different adjustment schemes.

10. An abstract style management device based on style variables and patterns, characterized in that, include: A style variable set creation module, configured to create a style variable set in a canvas page, wherein the style variable set includes single attribute style variables and compound attribute style variables; a style mode creation module, configured to create at least one style mode according to the style variable set, wherein the style mode includes a color mode, a size mode, a language mode, and an interaction mode; A style mode association module is used to associate the layer of the design draft in the canvas page with the style mode so as to switch according to the style mode of the layer; wherein, when the mode of the layer is switched, if the child layer is set to non-automatic mode, the style mode of the child layer will not follow the mode switching of the parent layer; the types of layers include containers, components, instances and regions.

Images