CN120406936A

CN120406936A - Abstract style management method and device based on style variables and patterns

Info

Publication number: CN120406936A
Application number: CN202510536977.3A
Authority: CN
Inventors: 李琦
Original assignee: Beijing Creative Beautiful Technology Co ltd
Current assignee: Beijing Creative Beautiful Technology Co ltd
Priority date: 2025-04-27
Filing date: 2025-04-27
Publication date: 2025-08-01

Abstract

The invention discloses an abstract style management method and device based on style variables and modes, wherein the method comprises the steps of creating a style variable set in a canvas page, wherein the style variable set comprises a single attribute style variable and a compound attribute style variable, creating at least one style mode according to the style variable set, wherein the style mode comprises a color mode, a size mode, a language mode and an interaction mode, associating a layer of a design draft in the canvas page with the style mode to switch according to the style mode of the layer, wherein when the layer is switched, if a sub-level layer is set to be a non-automatic mode, the style mode of the sub-level layer does not switch along with a parent level layer, and the type of the layer comprises a container, a component, an instance and a region. The invention realizes the flexible switching of multiple subjects and multiple languages through the style set and the mode, and improves the user experience and the management efficiency.

Description

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

Technical Field

The invention relates to the technical field of software design, in particular to an abstract style management method and device based on style variables and modes.

Background

With the growing demand for user personalization, modern product design faces two major challenges, multi-topic adaptation (e.g., bright/dark mode switching, brand topic variation) and multi-language support (interface text dynamic adaptation). The traditional design system generally adopts a team library switching paradigm to realize theme management, namely, a designer generally needs to switch the team libraries to realize theme color switching by creating a plurality of independent component libraries to respectively correspond to different themes, and the management experience is insufficient, so that accurate switching under part of pages can not be realized or direct management in a single team library is not realized, and the user experience and management efficiency are affected. The reason is that style assets such as theme colors, language packs and the like are scattered in different library files, the traditional method cannot realize parallel preview and local adjustment of multiple themes in the same design file (for example, a designer cannot directly compare the visual effect of the same page under a bright/dark theme), the library files need to be repeatedly switched, and the operation efficiency is low. If the composite patterns such as component spacing, fillet combination and the like are defined by a hard coding mode, the components cannot be reused, component parameters are required to be modified one by one when brand specifications are upgraded, and maintenance cost increases exponentially. In addition, when multiple designers work cooperatively, library file switching is easy to cause version disorder, and style management is generally simplified into a two-dimensional mapping relation of 'component-library', so that the abstraction level and dynamic characteristics of styles are ignored.

In order to solve the problems, the invention develops an abstract style management method and device based on style variables and modes, and realizes flexible multi-theme and multi-language switching through style sets and modes so as to improve user experience and management efficiency.

Disclosure of Invention

In view of the above problems, an abstract style management method and apparatus based on style variables and modes are provided, so as to improve user experience and management efficiency.

According to one aspect of the present invention, there is provided an abstract style management method based on style variables and modes, including:

Creating a set of style variables in a canvas page, wherein the set of style variables comprises a single attribute style variable and a composite attribute style variable;

creating at least one style pattern according to the style variable set, wherein the style pattern comprises a color pattern, a size pattern, a language pattern and an interaction pattern;

And associating the pattern layer of the design manuscript in the canvas page with the pattern mode so as to switch according to the pattern mode of the pattern layer, wherein when the pattern layer is switched, if a sub-level pattern layer is set to be a non-automatic mode, the pattern mode of the sub-level pattern layer does not follow a parent level pattern layer to switch, and the pattern layer comprises a container, a component, an instance and a region.

In an alternative manner, the single attribute style variables include a numeric style, a text style, a color style, and a boolean style;

The compound attribute style variables comprise a fillet style, a word style, a tracing style, a special effect style, a margin style, a filling style and a grid style, wherein the fillet style and the margin style adopt four numerical composite value formats, the word style comprises a word weight, a word size, a line height and a font format, the special effect style comprises a special effect type, an x value, a y value, blurring, expanding and color formats, the filling style comprises single color, gradient color, multi-layer color and picture filling format, and the grid style comprises a grid type, a number and a column width format.

In an alternative manner, the composite property style variable supports referencing a single property style variable, rendering the referenced style at presentation;

wherein the style referencing or unbinding style operation is exposed when the mouse hovers over the target layer.

In an alternative way, when the selected layer uses a plurality of style modes, a switchable set and style mode are displayed through an attribute column of the layer;

After the style mode is switched, the states of the selected image layer and the internal sub-image layer are changed into values after the mode is switched, and if the sub-image layer of the image layer is independently set, the states of the parent layers are not changed.

In an alternative, the method further comprises:

If the compound attribute style variable of the style variable set refers to a variable of the numerical style, displaying the referenced numerical style in the compound attribute style variable set;

And if the composite attribute style variable integrally refers to the attribute style variable of the non-numerical style, displaying the name of the attribute style variable in the composite attribute style variable set.

In an alternative, the method further comprises:

When the parent layer applies a style mode, its child layer inherits the style mode by default unless the child layer is explicitly set to a non-automatic mode or a style overlay rule is defined separately;

wherein, when the sub-level layer carries out partial modification or complete replacement on the inherited style variable, the inheritance relation of the unmodified part is reserved.

In an alternative manner, the style variables include style variable inheritance, style variable override, and override priority;

wherein, for style variable inheritance, when a new layer is created in the canvas page, the layer inherits the style mode and associated style variable of its parent layer by default;

For style variable coverage, a child level layer covers style variables inherited from a parent level layer, and the coverage operation comprises display coverage and conditional coverage, wherein explicit coverage refers to selecting different style variables in attribute fields of the child level layer or modifying values of associated style variables so as to cover the style variables of the parent level layer;

For override priorities, when there is multi-layer inheritance and override, explicit overrides of child level layers take precedence over style variables of parent level layers, conditional overrides take precedence over default inheritance, overriding the priority of the current layer closer to it.

In an optional manner, when a plurality of associated layers are selected and a certain layer is subjected to pattern mode switching or pattern variable modification, identifying a logic association relationship between the associated layers and providing a strictly synchronous linkage mode and an intelligent adaptation linkage mode;

And in the intelligent adaptation linkage mode, the inheritance proportion or the conversion rule of the style parameters is adjusted according to the layer type and the design specification so as to ensure the visual consistency and retain the personalized expression.

In an alternative, the method further comprises:

When a user carries out style adjustment on a plurality of associated layers through a linkage mode, analyzing a style propagation path and potential conflict, and displaying a propagation influence range and a conflict level in real time in an attribute column, wherein the style-adjusted propagation path is displayed in a dynamic thermodynamic diagram mode in a strictly synchronous linkage mode, and the color depth represents the inheritance distance of the affected layer;

When detecting that the pattern transmission leads to color contrast exceeding or size proportion imbalance, carrying out grading early warning according to the conflict severity, and supporting historical transmission track backtracking of pattern transmission operation, wherein the influence range of each linkage adjustment is displayed in a time axis mode, and a user can backtrack to any historical state and compare effect differences of different adjustment schemes.

According to another aspect of the present application, there is provided an abstract style management apparatus based on style variables and modes, comprising:

a style variable set creation module for creating a style variable set in a canvas page, wherein the style variable set comprises a single attribute style variable and a composite attribute style variable;

a style pattern creation module for creating at least one style pattern according to the style variable set, wherein the style pattern comprises a color pattern, a size pattern, a language pattern and an interaction pattern;

The pattern mode association module is used for associating a layer of a design draft in a canvas page with the pattern mode so as to switch according to the pattern mode of the layer, wherein when the pattern mode is switched, if a sub-level layer is set to be a non-automatic mode, the pattern mode of the sub-level layer does not follow a parent level layer to switch, and the type of the layer comprises a container, a component, an instance and a region.

The method comprises the steps of creating a style variable set in a canvas page, wherein the style variable set comprises a single attribute style variable and a compound attribute style variable, creating at least one style mode according to the style variable set, wherein the style mode comprises a color mode, a size mode, a language mode and an interaction mode, associating a layer of a design draft in the canvas page with the style mode to switch according to the style mode of the layer, wherein when the layer is switched, if a sub-level layer is set to be in a non-automatic mode, the style mode of the sub-level layer does not switch along with a parent level layer, and the type of the layer comprises a container, a component, an instance and an area. The invention realizes the flexible switching of multiple subjects and multiple languages through the style set and the mode, and improves the user experience and the management efficiency. Specifically, by introducing concepts of single attribute styles and compound attribute styles, a user is allowed to create and manage single attribute styles such as numeric values, character strings, and compound attribute styles such as fillets and margins. Through the concept of design style set and mode, the user can define and switch different theme and language settings in different sets, and flexible management of multiple themes and multiple languages is realized. And realizing the quoting and unbinding functions of the style, allowing the style to be consistent with the quoting of a single style value and multiplexing in different scenes, and supporting the condition judgment and interactive prototyping in the prototyping. By adjusting the style order and hierarchy, the flexibility and efficiency of style management are improved. The method supports direct application and style addition in the canvas, and provides a new style application interaction mode while keeping the use habit of the user.

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

Drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to designate like parts throughout the figures. In the drawings:

FIG. 1 is a flow diagram of an abstract style management method based on style variables and patterns according to an embodiment of the invention;

FIG. 2 shows a schematic diagram of grouping variables by set in accordance with an embodiment of the present invention;

FIG. 3 shows a numerical pattern diagram of an embodiment of the present invention;

FIG. 4 shows a schematic diagram of mode switching according to an embodiment of the present invention;

FIG. 5 shows a schematic diagram of a rounded corner pattern of an embodiment of the present invention;

FIG. 6 illustrates a numerical style referencing schematic of an embodiment of the present invention;

FIG. 7 illustrates a schematic diagram of a referenced modification operation of an embodiment of the present invention;

FIGS. 8 a-8 b show single style reference and compound style reference schematics, respectively, of embodiments of the present invention;

FIG. 9 shows a style unbinding schematic of an embodiment of the present invention;

FIG. 10 shows a schematic diagram of mode switching according to an embodiment of the present invention;

Fig. 11 is a schematic functional structure diagram of an abstract style management method device based on style variables and modes according to an embodiment of the invention.

Detailed Description

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

Prior to implementing the embodiments of the present invention, technical terms or custom terms referred to below are explained in detail:

components that allow the UI to be divided into separate, reusable parts, in practice components are often organized into a hierarchical nested tree structure.

Examples an instance refers to a specific reference to a component, and a user pulls from a list of components, or copies and pastes from a component, is an "instance" and not the body of the component.

The container is called a drawing board, and is an important design component of design software, such as an iPhone container and an A4 paper container.

In the UI design manuscript, each layer can be regarded as a stacked layer of a plurality of design elements such as characters, pictures, shapes, colors and the like, and different layers can be independently edited without affecting other layers. By adjusting the sequence, transparency and other attributes of the layers, various complex visual effects and interactive designs can be realized. In the present application, the layers include components, instances, and containers.

Child layer in a layer structure, if one layer is nested inside another layer, then the nested layer is the child layer and the outer layer is the parent layer. The child layer may inherit the properties of the parent layer in whole or in part.

The abstract style management method and device based on the style variable and the mode provided by the invention are described in detail below through specific embodiments.

Embodiment one:

Fig. 1 is a functional structural diagram of an abstract style management method based on style variables and modes according to an embodiment of the present invention. Specifically, as shown in fig. 1, the method comprises the following steps:

Step S101, creating a style variable set in a canvas page, wherein the style variable set comprises a single attribute style variable and a compound attribute style variable.

In this embodiment, by defining a common style in a design draft as a variable, the common style is reused in multiple layers or components, avoiding repeated definition of the same style, and improving design consistency. When a certain style needs to be modified, only the corresponding style variable needs to be modified, all layers or components referring to the variable are automatically updated, the flow of style modification is greatly simplified, and the design efficiency is improved. And a more complex style structure is constructed by combining a single attribute style variable and a composite attribute style variable, so that the overall style of the design draft is quickly changed, and different scenes and requirements are met. Wherein the composite attribute style variable references a single attribute style variable to form a layer-by-layer nested structure.

Specifically, a "style variable" panel or option is provided in a region of the canvas page (e.g., a sidebar or toolbar) that contains a list of style variables that display the created style variables. Clicking on the "new style variable" creates a single attribute style variable (e.g., numerical, text, color, or boolean value) or a compound attribute style variable (e.g., rounded, literal, stroked, special effects, margins, padding, or grid). For example, for a corner pattern variable, four values are entered, representing the corner radii of the upper left, upper right, lower right, and lower left corners, respectively. For the text style variables, attribute values such as word weight, word size, line height and the like are input. The support composite property style variable references a single property style variable. For example, a font size in a text style variable may reference a style variable heading font size of a numeric type. In addition, classification, grouping (e.g., classification by color, font, size) and renaming, copying, deleting functions of style variables are supported. For example, a text style of a button is associated with buttonStyle composite-attribute style variables, a shadow style of a card is associated with shadowStyle composite-attribute style variables, and an inside margin of a card is associated with CARDPADDING composite-attribute style variables. If the color of the button is modified, only the value of the single attribute style variable need be modified primaryColor and all button colors associated with that variable are automatically updated. If the shadow effect of the card needs to be modified, only the value of the shadowStyle composite attribute style variable needs to be modified, and all the card shadows related to the variable are automatically updated.

In this embodiment, a single attribute variable (e.g., color, word size) supports independent adjustment, avoiding affecting other attributes when modifying the composite style (e.g., without redefining margins when adjusting button colors). The compound attribute variables (such as fillets and text styles) package and manage the associated attributes, and reduce repeated operations (such as uniformly modifying the fillet radii of all cards). Predefined variables (e.g., color-primary, spacing-md) can be multiplexed among different components and modes, ensuring brand consistency. The composite variables support multi-layer definitions (e.g., fill patterns comprise single colors and gradient colors) that can be adapted to different design requirements. And intelligent style adjustment is realized through conditional coverage (text-left or text-right is switched according to the language mode). For example, a cross-platform e-commerce card component is designed to support different sizes and theme modes. As shown in FIGS. 2-7, a single variable is defined, color-primary-light: #2196F3 (light theme dominant color), color-primary-dark: # BB16F86 (dark theme dominant color), spacing-card:16px (card margin), a composite variable is defined, border-radius-card:8px (card fillet), text-style-title: { fontSize:18px, fontWeight:600} (title text style), fill-card-river: { type: "gradient", colors: "#2196F3", #1976D2 "} (hover gradient fill). Color patterns are created, light (color-primary-Light associated) and Dark (color-primary-Dark associated), and size patterns are created, compact (spacing-card: 12 px) and Default (spacing-card: 16 px). And when the card layer is associated with a reader-radius-card and a spacing-card variable and the title text is associated with text-style-title, and the card layer is switched to a Dark mode, the character color of the card is automatically changed into color-primary-Dark, and the background filling is switched to a Dark adaptation mode. When the mode is adjusted to Compact mode, the margin of the card is reduced from 16px to 12px, but the title text style is kept unchanged. And the designer automatically updates the colors of the light-colored subjects of all the associated layers by modifying the color-primary-light variable value, adjusts the corner-radius-card variable, uniformly changes all the card fillets, and does not need to adjust layer by layer, thereby obviously improving the design iteration efficiency.

The single attribute variables are shown in table 1:

TABLE 1

In this embodiment, as shown in fig. 8a to 8b, the compound variable realizes cross-component style unification by referring to a single variable, and all references are automatically updated when the single variable is modified, so as to avoid repeated design. The compound variable automatically inherits the conditional logic without layer-by-layer configuration. Hovering the presentation reference relationship (such as filling style→main color variable) helps the designer to quickly locate the variable source, simplifying the debugging process. As shown in FIG. 9, sub-level layers unbind references (e.g., button hover state uses independent colors), enabling localized customization on an inherited basis.

For example, a single variable is referenced in the composite variable definition by the @ symbol:

Resolving @ color-primary and associating its current value, displaying style sources (such as fill color → dominant color variable) in the property bar and providing a "unbind" button when the mouse hovers over the layer. Wherein, a reference link (such as fill-style-primary → color-primary →#2196F 3) is shown in the variable management panel and supports click jump definition. After clicking "unbinding", the reference field in the compound variable is converted into an independent value (for example, the color of the fill-style-primary is changed from @ color-primary to #2196F 3), and the reference value is directly modified in the sub-level layer attribute column (for example, the color-primary is temporarily changed to #FF 5722).

In an alternative, the method further comprises:

In this embodiment, the numerical variables in the composite variable panel calculate previews in real time (e.g., padding: @ spacing-unit x2 → 24 px), and the non-numerical variables provide jump links to definitions, reducing multi-panel switching. The numerical variable can be associated with a conditional logic (such as @ spacing-unit-mobile), the calculated value is automatically refreshed when the device mode is switched, and the non-numerical variable retains a name reference, so that global effectiveness is ensured when the theme is switched. Through the differentiated display of type perception, a designer can quickly locate numerical parameters and non-numerical theme variables, and the collaboration efficiency is remarkably improved while the style flexibility is maintained.

In an alternative, the method further comprises:

In this embodiment, the parent style mode may be applied to all child layers in a single key, avoiding layer-by-layer duplicate configurations (e.g., global theme colors, font specifications). When a child level layer is newly built, the parent level style is automatically inherited, and manual operation of a designer (such as inheriting a dominant color by default of buttons in a component library) is reduced. The child level only modifies specific style variables (such as button text colors), and the rest variables (such as margins and fillets) are still synchronous with the parent level, so that style fragmentation is avoided. Allowing the child level to fully depart from parent level control while retaining local inheritance capabilities. The coverage priority is explicit coverage > conditional coverage > default inheritance, and when the father-level style is updated, the father-level style can be selectively pushed to the child level (the child level is not explicitly covered), so that the version iteration cost is reduced.

For example, a commodity card assembly is designed, which comprises sub-level layers of pictures, titles, prices, etc. The parent container style model is a background color @ color-card-bg (non-numerical variable), an inner margin @ spacing-unit @ 2 (numerical variable), and a rounded angle @ corner-radius-card (numerical variable). The title layer inherits the background color of the parent level and the inner margin, the color of the explicit covering text is @ color-text-primary (non-numerical variable), the price layer is set to be in a non-automatic mode, and the size and the color of the text are completely customized. The picture layer condition covers the fillet, the fillet is 0 when the mobile terminal (viewportWidth < 768), and the desktop terminal inherits the parent fillet. After the father level is adjusted, the @ spacing-unit is changed from 8px to 12px, the inner margin of the title layer is automatically updated to 24px, the character color is unchanged, the price layer is unchanged (due to explicit coverage), the desktop end fillet of the picture layer is synchronously updated, and the mobile end is kept at 0. Through the inheritance and coverage modes, a designer can efficiently manage the style consistency of complex components, and meanwhile, the local style can be flexibly adjusted when needed.

Step S102, at least one style mode is created according to the style variable set, wherein the style mode comprises a color mode, a size mode, a language mode and an interaction mode.

In this embodiment, colors, sizes, languages, and interactive styles are dimension-decoupled into independent modes, so as to avoid style conflicts caused by mixed configuration (e.g., modifying dominant colors in color modes does not affect size parameters). The same pattern can be multiplexed across items (e.g., a brand red theme color pattern adapts multiple product lines), reducing duplicate definition costs. The size mode can be related to the size variable of the viewport, parameters such as margin, fonts and the like are automatically adjusted, the language mode integrates multiple language variables, and the text content is dynamically replaced when the mode is switched. Only the associated layer is redrawn when the mode is changed, and rendering overhead is reduced (e.g., the size-related layer does not need to be updated when only the color mode is changed).

For example, for a multi-lingual social App, theme color switching and responsive layout are supported. The color modes are web-theme, dominant color #2196F3, auxiliary color #FF4081, mobile-theme, dominant color #4CAF50, auxiliary color #FFC107, size mode, desktop-layout, font 16px, mobile-layout, font 14px, language mode, zh-CN, button text "Confirm", en-US, button text "Confirm", container layer association web-theme color mode and desktop-layout size mode, button component inherits container color mode, but explicit overlay size mode is mobile-layout (adapting mobile end click area), text layer association zh-CN language mode, and set conditional overlay (automatically switch to en-US when English environment is detected), all associated web layer dominant colors of-theme change to #2196F3 when global switch color mode inherits, button component automatically switches to font width when the button is automatically updated due to inherited relationship, and button width is automatically switched to the button-768. When the language mode is switched to English, the text layers of all associated zh-CNs are automatically replaced by en-US content, and the button text is changed to 'Confirms'. The designer finishes brand upgrading by switching the color mode without manually modifying a plurality of layers one by one, the mobile terminal button inherits the space specification of the mobile-layout, keeps visual proportion coordination with the Web terminal, and only needs to define variables and associate the layers when the dark-theme color mode is newly added, so that the existing logic does not need to be adjusted.

In this embodiment, the newly created layer automatically inherits the parent level style, and reduces the repeated setting operation. Explicit coverage and conditional coverage allow local adjustment on an inheritance basis, which maintains the uniformity of the overall style, supports personalized expression, and avoids style confusion. Fine control is achieved by overriding the priority order (explicit > condition > default inheritance), e.g., child layers may explicitly override parent colors, while parent undefined margins are controlled by higher-level style variables, accommodating complex design requirements. For example, a responsive button assembly is designed that supports default state, hover state, and brand activity theme, the button assembly inherits the "dominant color" (blue) and "rounded corner style" (4 px) of the parent container, sets the hover state for the button, explicitly overlays the "dominant color" as green, retains the inherited rounded corner style, defines the "brand activity" condition, overlays the "dominant color" as brand activity theme color (orange), and modifies the "rounded corner style" as 8px. When the activity theme is enabled, the button turns orange in color with a rounded corner of 8px (condition override is active). Upon hovering, the color turns green (explicit override priority over conditional override), the rounded corners remain 8px (conditional override unmodified hover state pattern). The buttons keep visual consistency (inherit default patterns) in different states, meanwhile, different scenes are flexibly adapted in an overlay mode, and when a parent level 'main color' or 'rounded pattern' is modified, all sub-layers which are not explicitly overlaid are automatically updated.

Step S103, associating a layer of a design draft in a canvas page with the pattern mode so as to switch according to the pattern mode of the layer, wherein when the pattern mode is switched, if a sub-level layer is set to be a non-automatic mode, the pattern mode of the sub-level layer does not follow a parent level layer to switch, and the type of the layer comprises a container, a component, an instance and an area.

In this embodiment, the style mode ensures that the associated layer complies with a predetermined design specification (e.g., brand color, font specification), and reduces style deviation caused by human error. When the parent layer switches style modes, the child layer follows by default (unless set to non-automatic mode), maintaining visual consistency between layers. The sub-level layers are set to a non-automatic mode, supporting localized personalization (e.g., hover state individual design of a button assembly) in a unified fashion. For example, responsive web pages include navigation bars (containers), button assemblies (components), card areas (regions), and instances thereof. The navigation bar is associated with a brand color mode and a desktop end size mode, the button component is associated with an interaction mode (defining hovering and clicking effects) and a mobile end size mode, the card area is set to be a non-automatic mode, and the card theme color mode is independently defined. Globally switching brand colors, modifying the dominant color in the "brand color mode" to red, the navigation bar and button assembly (automatic mode) is automatically updated to red, and the card area (non-automatic mode) remains the original blue. After switching the button assembly to the "mobile end size mode", the button size is reduced, but the hovering effect (interaction mode definition) is still maintained, and the "highlight color mode" is independently set for the instance of the card area, so that the theme color is orange, and other instances are not affected. As shown in fig. 10, global style updates (e.g., brand color adjustment) are quickly achieved by style mode switching, and non-automatic modes support local personalization (e.g., card region independent color matching).

In this embodiment, a single layer is allowed to associate multiple style patterns (e.g., such as associated "brand color patterns" and "interaction patterns") and a designer can freely combine style patterns according to a scene without creating separate styles for different combinations. And the switchable pattern mode set is displayed uniformly through the attribute bar, so that the search patterns are prevented from being switched among a plurality of panels, and after the patterns are switched by one key, the association patterns of the layers and sub-layers thereof are automatically updated without layer-by-layer adjustment. The child layer independently sets the style mode or keeps the non-automatic mode, so that the parent mode switching does not affect the independent design, the child layer modification only acts on the child layer, and the unexpected coverage of the parent mode is avoided.

In this embodiment, the intelligent mode automatically adapts style parameters (e.g., linkage adjustment of button size and text size) according to the layer type, and the strict mode forces the application of the same style rule, so as to ensure visual uniformity (e.g., title level specification) of multiple pages/components. And automatically analyzing the layer logic association (such as parent-child containers and repeated components), and reducing the workload of manually marking the association relationship.

In an alternative, the method further comprises:

In this embodiment, the dynamic thermodynamic diagram displays the style propagation path (such as the influence range of color and size adjustment) in real time, and the color depth reflects the inheritance hierarchy, so as to help the designer to pre-judge the potential risk. The key indexes such as color contrast, size proportion and the like are monitored in real time, and early warning (such as yellow warning and red error) is carried out in a grading manner according to the severity degree, so that design accidents are avoided. The time axis records the influence range of each linkage operation, supports one-key rollback to any historical state, and is convenient for comparing the effects of different adjustment schemes. For example, an e-commerce platform commodity card is designed, which comprises pictures, titles, prices and buttons, and supports multi-theme switching (such as dark mode and holiday theme). In the strict synchronization mode, the background color of the card container is switched from white to dark gray (# 333), the contrast of the title text color (white) in the dark gray background is detected to be 3:1 (lower than the AA standard by 4.5:1), and a red warning is ejected. Dynamic thermodynamic diagrams show that button sizing will affect 3 sub-components (icons, text, hovering area), orange highlighting cues to check interaction status. The user tries 3 kinds of dark color mode schemes (adjust background color, text color, button pattern), the time axis records the influence range of each adjustment, backtracks to the first adjustment state, and the button hovering effect (zoom+color change) of the scheme 3 is more remarkable under dark color background.

Embodiment two:

Fig. 11 is a schematic functional structure diagram of an abstract style management method device based on style variables and modes according to an embodiment of the invention. As shown in fig. 11, the apparatus includes:

a style variable set creation module 1101 configured to create a style variable set in a canvas page, wherein the style variable set includes a single attribute style variable and a composite attribute style variable;

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;

The style mode association module 1103 is configured to associate a layer of a design draft in a canvas page with the style mode to switch according to the style mode of the layer, where when the layer is switched, if a sub-level layer is set to a non-automatic mode, the style mode of the sub-level layer does not follow a parent level layer to switch, and the type of the layer includes a container, a component, an instance, and a region.

In an alternative manner, the style pattern association module 1103 is further configured to:

When the selected layer uses a plurality of style modes, displaying a switchable set and style modes through an attribute column of the layer;

In an alternative manner, if a compound attribute style variable of the set of style variables references a variable of a numeric style, then the referenced numeric style is presented in the set of compound attribute style variables;

when a plurality of associated layers are selected and a certain layer is subjected to pattern mode switching or pattern variable modification, identifying a logic association relation between the associated layers and providing a strictly synchronous linkage mode and an intelligent adaptation linkage mode;

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

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

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

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

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

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

It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The invention may be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means may be embodied by one and the same item of hardware. The use of the words first, second, third, etc. do not denote any order. These words may be interpreted as names. The steps in the above embodiments should not be construed as limiting the order of execution unless specifically stated.

Claims

1. An abstract style management method based on style variables and patterns, characterized by comprising:

Creating a style variable set in a canvas page, wherein the style variable set includes single attribute style variables and compound attribute style variables;

creating 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;

The layer of the design draft in the canvas page is associated with the style mode 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 does not follow the mode switching of the parent layer; the types of the layer include container, component, instance and region.

2. The abstract style management method based on style variables and patterns according to claim 1, wherein the single attribute style variable includes a numerical style, a text style, a color style, and a Boolean value style;

The composite attribute style variables include rounded corner style, text style, stroke style, special effect style, margin style, fill style and grid style; wherein, the rounded corner style and the margin style adopt four numerical composite value formats, 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, expansion and color format, the fill style includes monochrome, gradient color, multi-layer color and picture fill format, and the grid style includes grid type, quantity and column width format.

3. The abstract style management method based on style variables and patterns according to claim 1, wherein the composite attribute style variable supports referencing a single attribute style variable, and the referenced style is presented during display;

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

4. The abstract style management method based on style variables and modes according to claim 1, wherein when the selected layer uses multiple style modes, the switchable sets and style modes are displayed through the property bar of the layer;

Among them, after the style mode is switched, the status of the selected layer and its internal sublayers is changed to the value after the mode switch. If the sublayers of the layer are set separately, they will not change with the status of their parent.

5. The abstract style management method based on style variables and patterns according to claim 1, further comprising:

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

If the composite attribute pattern variable as a whole refers to an attribute pattern variable of a non-numeric style, the name of the attribute pattern variable is displayed in the composite attribute pattern variable set.

6. The abstract style management method based on style variables and patterns according to claim 1, further comprising:

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

Among them, when the child layer partially modifies or completely replaces the inherited style variables, 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, wherein the style variables include style variable inheritance, style variable overwriting, and overwriting priority;

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 modes according to claim 1 is characterized in that, when multiple associated layers are selected and a style mode is switched or a style variable is modified for a layer, the logical relationship between the associated layers is identified and a strict synchronization linkage mode and an intelligent adaptive 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, further comprising:

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, comprising:

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.