CN116204184B - UI editing method, system and storage medium for improving page style adaptation - Google Patents
UI editing method, system and storage medium for improving page style adaptation Download PDFInfo
- Publication number
- CN116204184B CN116204184B CN202310473726.6A CN202310473726A CN116204184B CN 116204184 B CN116204184 B CN 116204184B CN 202310473726 A CN202310473726 A CN 202310473726A CN 116204184 B CN116204184 B CN 116204184B
- Authority
- CN
- China
- Prior art keywords
- component
- layout
- visual layout
- interface
- style
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a UI editing method, a system and a storage medium for improving page style adaptation, which relate to the technical field of UI design and are characterized in that a plurality of interfaces are set for each product according to product attributes; constructing a product UI instruction file according to the function of the product; establishing at least one visual layout UI component according to the product UI instruction file; establishing a mapping relation between each visual layout UI component and an interface to be laid out; calculating style parameters of the visual layout UI component and style adaptation degree between interfaces; assigning the size parameter and the layout parameter of the visual layout UI component; a number of visual UI interfaces corresponding to the platform on which each product is to be published are established. The invention has the advantages that: through designing uniform style adaptation judgment standards, the uniformity of styles of different visual layout UI components for developing the software products of the multi-UI interface is maintained, and further, the software development efficiency can be effectively improved.
Description
Technical Field
The invention relates to the technical field of UI design, in particular to a UI editing method, a system and a storage medium for improving page style adaptation.
Background
The UI (User Interface) resource is a special software art resource, which is responsible for the interaction between software and players, is an indispensable content of a software product, and cannot avoid the development of UI Interface layout and interaction logic thereof in the development process of a new software product.
In the development process of a software product, in order to improve the development efficiency, multiple people are usually required to develop multiple UI interfaces of the software at the same time, and in the development process, due to the fact that unified judging standards are lacking for the styles of the UI interfaces, large gaps exist among the styles of the multiple UI interfaces of the multiple software in the development process, the subsequent workload of adjusting and adapting the styles of the UI is increased, and the software development efficiency is affected.
Disclosure of Invention
In order to solve the technical problems, the technical scheme solves the problems that in the development process of a software product, a plurality of UI interfaces of the software are required to be developed simultaneously by a plurality of people in order to improve the development efficiency, and in the development process, due to the lack of uniform judging standards for the UI interface styles, a large gap exists among the plurality of UI interfaces of the plurality of software in the development process, the subsequent workload for adjusting and adapting the UI styles is increased, and the development efficiency of the software is affected.
In order to achieve the above purpose, the invention adopts the following technical scheme:
a UI editing method for improving page style adaptation, comprising:
setting a plurality of interfaces for each product according to the product attribute;
constructing a product UI instruction file according to the function of the product, wherein the UI instruction file comprises all UI event elements for realizing the function of the product;
establishing at least one visual layout UI component according to the product UI instruction file, wherein the visual layout UI component is a standardized visual layout UI component and/or a customized visual layout UI component;
establishing a mapping relation between each visual layout UI component and an interface to be laid out, wherein each visual layout UI component corresponds to one or more interfaces;
calculating style parameters of the visual layout UI component and style adaptation degree between interfaces, obtaining stylized matching data of the visual layout UI component, and adjusting the visual layout UI component based on the stylized matching data;
assigning values to the size parameters and the layout parameters of the visual layout UI components according to the mapping relation between the visual layout UI components and the platform to be laid out to obtain assignment data of the visual layout UI components, wherein the assignment data of the visual layout UI components corresponds to the mapping relation between the visual layout UI components and the platform to be laid out one by one;
based on assignment data of visual layout UI components, establishing a plurality of visual UI interfaces corresponding to a platform to be published of each product;
the method for establishing at least one visual layout UI component according to the product UI instruction file specifically comprises the following steps:
acquiring the operation of each UI event element on a corresponding interface of each platform, and acquiring UI configuration operation data;
judging whether the standardized visual layout UI component can meet the operation according to the UI configuration operation data, if so, calling the standardized visual layout UI component, and if not, establishing a customized visual layout UI component;
the step of establishing the user-defined visual layout UI component specifically comprises the following steps:
generating a UI interface element corresponding to the UI event element according to the UI configuration operation data, wherein the UI interface element is one or more of a UI interface button, a static UI interface pattern and a dynamic UI interface pattern;
determining a trigger action of the UI event element based on the type of the UI interface element and the UI configuration operation data;
generating size parameters and layout parameters of the UI interface elements based on the UI configuration operation data and interfaces corresponding to the UI event elements;
generating style parameters of the UI interface element based on the UI interface element;
packaging the size parameter, the layout parameter and the style parameter of the UI interface element into attribute data of the UI interface element;
packaging the UI interface element, the attribute data of the UI interface element and the trigger action of the UI event element into a visual layout UI component;
the style parameter of the visual layout UI component and the style adaptation degree between interfaces are calculated specifically comprising:
according to the mapping relation between the visual layout UI component and the platform to be laid out, acquiring a to-be-laid out interface associated with the visual layout UI component, and acquiring style parameters of the to-be-laid out interface;
performing index assignment on style parameters of the UI interface elements and style parameters of the interface to be laid out according to the set rules to obtain one or more parameter index values corresponding to each style parameter;
calculating the similarity of each style parameter of the visual layout UI component and the interface to be laid associated with the visual layout UI component according to a parameter similarity calculation formula;
adding different weight values to each style parameter, and calculating the style adaptation degree between the style parameters of the visual layout UI component and the interface according to a style adaptation degree calculation formula;
the parameter similarity calculation formula is as follows:
in the method, in the process of the invention,
to visualize the similarity of the layout UI component and the ith style parameter of the interface to be laid out associated therewith, and (2)>
A j-th parameter index value for visualizing the i-th style parameter of the UI interface element in the layout UI component,/I>
The method comprises the steps that (1) a j-th parameter index value of an i-th style parameter of an interface to be laid out is used, and n is the total number of parameter index values of the i-th style parameter;
the style fitness calculation formula is as follows:
wherein, C is the style parameter of the visual layout UI component and the style adaptation degree between interfaces,
the weight value of the ith style parameter, and m is the total number of style parameters.
Preferably, the adjusting the visual layout UI component based on the stylized matching data specifically includes:
judging whether the style adaptation degree between the style parameters of the visual layout UI component and the interface is larger than a preset value, if so, judging that the style adaptation degree between the style parameters of the visual layout UI component and the interface is low, and if not, judging that the style adaptation degree between the style parameters of the visual layout UI component and the interface is high;
screening out visual layout UI components with low style adaptation degree between style parameters of the visual layout UI components and interfaces
And (3) the style parameter corresponding to the largest value is obtained, the parameter index value of the style parameter corresponding to the UI interface element of the visual layout UI component is adjusted, and whether the style adaptation degree between the style parameter of the visual layout UI component and the interface is larger than a preset value is repeatedly judged.
Preferably, the assigning the size parameter and the layout parameter of the visual layout UI component according to the mapping relationship between the visual layout UI component and the platform to be laid out specifically includes:
according to the mapping relation between the visual layout UI component and the interface to be laid out, acquiring the interface to be laid out associated with the visual layout UI component, and acquiring the size of the interface to be laid out;
assigning the size parameters of the visual layout UI component according to the size of the interface to be laid out and the types of the UI interface elements;
setting the visual layout UI component at a layout position on the interface to be laid out corresponding to the visual layout UI component;
and setting layout parameters of the visual layout UI component on the corresponding interface to be laid out according to the layout position of the visual layout UI component.
Preferably, the setting the layout parameters of the visual layout UI component on the interface to be laid out corresponding to the visual layout UI component specifically includes:
setting a component coordinate system in the visual layout UI component, and setting an interface basic coordinate system on an interface to be laid out;
setting at least two layout anchor points in the visual layout UI component, and calculating coordinates of the layout anchor points in a component coordinate system;
adjusting the position and angle of the visual layout UI component on the corresponding interface to be laid out, and calculating offset data of the component coordinate system relative to the interface basic coordinate system when the visual layout UI component is positioned at the layout position, wherein the offset data comprises offset distance of the origin of the component coordinate system relative to the interface basic coordinate system and the rotation angle of the component coordinate system;
the coordinates of the layout anchor in the interface base coordinate system are calculated based on the coordinates of the layout anchor in the component coordinate system and the offset data of the component coordinate system relative to the interface base coordinate system.
Further, a UI editing system for improving page style adaptation is provided, including:
the front-end development module is used for constructing a product UI instruction file according to the function of the product;
the UI editing module is used for setting a plurality of interfaces for each product platform to be released according to product attributes, establishing at least one visual layout UI component according to product UI instruction files, establishing a mapping relation between each visual layout UI component and the platform to be laid, calculating style parameters of the visual layout UI components and style adaptation degree between the interfaces, assigning the size parameters and layout parameters of the visual layout UI components according to the mapping relation between the visual layout UI components and the platform to be laid, and establishing a plurality of visual UI interfaces corresponding to each product platform to be released based on assignment data of the visual layout UI components and stylized matching data of the visual layout UI components.
Optionally, the UI editing module is integrated with:
the system comprises a standard component unit, wherein at least one standard component library is stored in the standard component unit, and a plurality of standardized visual layout UI components are stored in the standard component library;
the self-grinding component unit is used for establishing a self-defined visual layout UI component;
the visual editing unit is used for setting a plurality of interfaces for the platform to be released of each product according to the product attribute and realizing the visual dragging layout of the visual layout UI component on the interfaces;
the component importing unit is used for importing the standardized visual layout UI component and/or the customized visual layout UI component into the visual editing unit;
the style adaptation calculation unit is used for calculating the style adaptation degree between the style parameters of the visual layout UI component and the interface;
the layout assignment unit is used for assigning the size parameters of the visual layout UI component according to the size of the interface to be laid out and the types of the UI interface elements, and setting the layout parameters of the visual layout UI component on the corresponding interface to be laid out according to the layout position of the visual layout UI component;
UI interface generation unit: the UI interface generating unit is used for establishing a plurality of visual UI interfaces corresponding to the platform to be released of each product based on assignment data of the visual layout UI component.
Still further, a computer-readable storage medium having stored thereon a computer-readable program that, when invoked, performs the UI editing method of improving page style adaptation as described above is provided.
Compared with the prior art, the invention has the beneficial effects that:
according to the UI editing scheme for improving page style adaptation, unified style adaptation judging standards are designed, when a software product with multiple UI interfaces is developed, a plurality of interfaces with unified styles are preset, and then when a developer performs layout design of visual layout UI components, style adaptation between the visual layout UI components and the interfaces can be intuitively calculated through calculating style adaptation degree between the visual layout UI components and the interfaces, and in the mode, different visual layout UI components developed by multiple persons can be effectively ensured to keep style uniformity, subsequent adjustment workload of the artistic style of the software product can be effectively reduced, and further software development efficiency can be effectively improved.
Drawings
FIG. 1 is a block diagram of a UI editing system architecture for improving page style adaptation in the present invention;
FIG. 2 is a flowchart of a UI editing method for improving page style adaptation in the present invention;
FIG. 3 is a flow chart of a method of style adaptation calculation between style parameters and interfaces of a visual layout UI component;
FIG. 4 is a flow diagram of a method of adjusting visual layout UI components based on stylized matching data;
FIG. 5 is a flow chart of a method of assigning a dimension parameter and a layout parameter of a visual layout UI component;
FIG. 6 is a flow chart of a method of setting layout parameters of a visual layout UI component on a corresponding interface to be laid out.
Detailed Description
The following description is presented to enable one of ordinary skill in the art to make and use the invention. The preferred embodiments in the following description are by way of example only and other obvious variations will occur to those skilled in the art.
Referring to fig. 1, a UI editing system for improving page style adaptation includes:
the front-end development module is used for constructing a product UI instruction file according to the function of the product;
the UI editing module is used for setting a plurality of interfaces for each product platform to be released according to product attributes, establishing at least one visual layout UI component according to product UI instruction files, establishing a mapping relation between each visual layout UI component and the platform to be laid, calculating style parameters of the visual layout UI components and style adaptation degree between the interfaces, assigning the size parameters and layout parameters of the visual layout UI components according to the mapping relation between the visual layout UI components and the platform to be laid, and establishing a plurality of visual UI interfaces corresponding to each product platform to be released based on assignment data of the visual layout UI components and style matching data of the visual layout UI components.
Wherein, UI editing module is integrated with inside:
the standard component unit is internally provided with at least one standard component library, and the standard component library is internally provided with a plurality of standardized visual layout UI components;
the self-grinding component unit is used for establishing a self-defined visual layout UI component;
the visual editing unit is used for setting a plurality of interfaces for the platform to be released of each product according to the product attribute and realizing the visual dragging layout of the visual layout UI component on the interfaces;
the component importing unit is used for importing the standardized visual layout UI component and/or the customized visual layout UI component into the visual editing unit;
the style adaptation calculation unit is used for calculating style parameters of the visual layout UI component and style adaptation degree between interfaces;
the layout assignment unit is used for assigning the size parameters of the visual layout UI component according to the size of the interface to be laid out and the types of the UI interface elements, and setting the layout parameters of the visual layout UI component on the corresponding interface to be laid out according to the layout position of the visual layout UI component;
UI interface generation unit: the UI interface generating unit is used for establishing a plurality of visual UI interfaces corresponding to the platform to be released of each product based on the assignment data of the visual layout UI component.
The UI editing system for improving page style adaptation comprises the following using processes:
step one: front-end development staff uses a front-end development module to construct a product UI instruction file according to the function of a product;
step two: a back-end developer uses a visual editing unit to set a plurality of interfaces for each product platform to be released according to the product attribute;
step three: based on the style parameters of the visual layout UI components and the style adaptation degree between interfaces calculated by the style adaptation calculation unit, the plurality of back-end developers use the component importing unit to import the standardized visual layout UI components and/or the customized visual layout UI components into the visual editing unit, and perform visual dragging layout of the visual layout UI components on the interfaces;
step four: the layout assignment unit carries out assignment on the size parameters of the visual layout UI component according to the size of the interface to be laid out and the types of the UI interface elements, and sets the layout parameters of the visual layout UI component on the corresponding interface to be laid out according to the layout position of the visual layout UI component;
step five: the UI interface generating unit establishes a plurality of visual UI interfaces corresponding to the platform to be released of each product based on the assignment data of the visual layout UI component.
For further explanation of the present solution, referring to fig. 2, a UI editing method for improving page style adaptation is provided based on the UI editing system for improving page style adaptation described above, which includes:
setting a plurality of interfaces for each product according to the product attribute;
constructing a product UI instruction file according to the function of the product, wherein the UI instruction file comprises all UI event elements for realizing the function of the product;
establishing at least one visual layout UI component according to the product UI instruction file, wherein the visual layout UI component is a standardized visual layout UI component and/or a customized visual layout UI component;
establishing a mapping relation between each visual layout UI component and an interface to be laid out, wherein each visual layout UI component corresponds to one or more interfaces;
calculating style parameters of the visual layout UI component and style adaptation degree between interfaces, obtaining stylized matching data of the visual layout UI component, and adjusting the visual layout UI component based on the stylized matching data;
assigning values to the size parameters and the layout parameters of the visual layout UI components according to the mapping relation between the visual layout UI components and the platform to be laid out, and obtaining assignment data of the visual layout UI components, wherein the assignment data of the visual layout UI components corresponds to the mapping relation between the visual layout UI components and the platform to be laid out one by one;
based on the assignment data of the visual layout UI components, a plurality of visual UI interfaces corresponding to the platform to be published of each product are established.
Through designing unified style adaptation judging standards, when software products of multiple UI interfaces are developed, through presetting a plurality of interfaces of unified style, and then when a developer performs layout design of visual layout UI components, style adaptation between the visual layout UI components and the interfaces can be intuitively calculated through calculating style adaptation degree between the visual layout UI components and the interfaces, and by the mode, different visual layout UI components developed by multiple persons can be effectively guaranteed to keep style uniformity.
Referring to fig. 3, the step of creating at least one visual layout UI component according to the product UI instruction file specifically includes the following steps:
acquiring the operation of each UI event element on a corresponding interface of each platform, and acquiring UI configuration operation data;
judging whether the standardized visual layout UI component can meet the operation according to the UI configuration operation data, if so, calling the standardized visual layout UI component, and if not, establishing a customized visual layout UI component;
the method for establishing the user-defined visual layout UI component specifically comprises the following steps:
generating a UI interface element corresponding to the UI event element according to the UI configuration operation data, wherein the UI interface element is one or more of a UI interface button, a static UI interface pattern or a dynamic UI interface pattern;
determining a trigger action of the UI event element based on the type of the UI interface element and the UI configuration operation data;
generating size parameters and layout parameters of the UI interface elements based on the UI configuration operation data and interfaces corresponding to the UI event elements;
generating style parameters of the UI interface element based on the UI interface element;
packaging the size parameter, the layout parameter and the style parameter of the UI interface element into attribute data of the UI interface element;
and packaging the UI interface element, the attribute data of the UI interface element and the trigger action of the UI event element into a visual layout UI component.
According to the technical scheme, through the standardized visual layout UI component and the customized visual layout UI component, a user can generate a page wanted by the user, labor and time cost can be effectively saved, development efficiency is improved, and UI editing flexibility is improved by not limiting the use of the components.
Referring to fig. 3, calculating style parameters of a visual layout UI component and style adaptation between interfaces specifically includes:
according to the mapping relation between the visual layout UI component and the platform to be laid out, acquiring a to-be-laid out interface associated with the visual layout UI component, and acquiring style parameters of the to-be-laid out interface;
performing index assignment on style parameters of the UI interface elements and style parameters of the interface to be laid out according to the set rules to obtain one or more parameter index values corresponding to each style parameter;
calculating the similarity of each style parameter of the visual layout UI component and the interface to be laid associated with the visual layout UI component according to a parameter similarity calculation formula;
and adding different weight values to each style parameter, and calculating the style adaptation degree between the style parameters of the visual layout UI component and the interface according to a style adaptation degree calculation formula.
The parameter similarity calculation formula is as follows:
in the method, in the process of the invention,
to visualize the similarity of the layout UI component and the ith style parameter of the interface to be laid out associated therewith, and (2)>
A j-th parameter index value for visualizing the i-th style parameter of the UI interface element in the layout UI component,/I>
The method comprises the steps that (1) a j-th parameter index value of an i-th style parameter of an interface to be laid out is used, and n is the total number of parameter index values of the i-th style parameter;
the style fitness calculation formula is:
wherein, C is the style parameter of the visual layout UI component and the style adaptation degree between interfaces,
the weight value of the ith style parameter, and m is the total number of style parameters.
It will be appreciated that one style parameter may represent the similarity between a visual layout UI component and its associated interface to be laid out by calculating the differential distance of parameter index values between the visual layout UI component and the interface to be laid out by having different parameter indices, e.g., color style parameters, common parameter indices thereof including RGB three-color parameter indices,
the larger the value of (c) is, the larger the differential distance representing the parameter index value between the visual layout UI component and the interface to be laid out is, and the lower the similarity between the visual layout UI component and the interface to be laid out is.
Meanwhile, for different UI design requirements, each style parameter has different important weight values, so that different weight values are applied to different style parameters in the style adaptation degree calculation process.
Referring to fig. 4, the adjusting a visual layout UI component based on stylized matching data specifically includes:
judging whether the style adaptation degree between the style parameters of the visual layout UI component and the interface is larger than a preset value, if so, judging that the style adaptation degree between the style parameters of the visual layout UI component and the interface is low, and if not, judging that the style adaptation degree between the style parameters of the visual layout UI component and the interface is high;
screening out visual layout UI components with low style adaptation degree between style parameters of the visual layout UI components and interfaces
And (3) the style parameter corresponding to the largest value is obtained, the parameter index value of the style parameter corresponding to the UI interface element of the visual layout UI component is adjusted, and whether the style adaptation degree between the style parameter of the visual layout UI component and the interface is larger than a preset value is repeatedly judged.
It will be appreciated that the number of components,
the larger the value of (2), the larger the differential distance representing the parameter index value between the visual layout UI component and the interface to be laid out, the lower the similarity between the visual layout UI component and the interface to be laid out, the +_>
The larger the style parameter is represented the more important, therefore, the style adjustment for the visual layout UI component is made for +.>
And the style parameters corresponding to the maximum values are adjusted, so that the adaptation degree between the visual layout UI component and the interface to be laid out can be effectively and rapidly improved.
Referring to fig. 5, assigning the size parameter and the layout parameter of the visual layout UI component according to the mapping relationship between the visual layout UI component and the platform to be laid out specifically includes:
according to the mapping relation between the visual layout UI component and the interface to be laid out, acquiring the interface to be laid out associated with the visual layout UI component, and acquiring the size of the interface to be laid out;
assigning the size parameters of the visual layout UI component according to the size of the interface to be laid out and the types of the UI interface elements;
setting the visual layout UI component at a layout position on the interface to be laid out corresponding to the visual layout UI component;
and setting layout parameters of the visual layout UI component on the corresponding interface to be laid out according to the layout position of the visual layout UI component.
Referring to fig. 6, the layout parameters of the visual layout UI component on the corresponding interface to be laid out specifically include:
setting a component coordinate system in the visual layout UI component, and setting an interface basic coordinate system on an interface to be laid out;
setting at least two layout anchor points in the visual layout UI component, and calculating coordinates of the layout anchor points in a component coordinate system;
adjusting the position and angle of the visual layout UI component on the corresponding interface to be laid out, and calculating offset data of the component coordinate system relative to the interface basic coordinate system when the visual layout UI component is positioned at the layout position, wherein the offset data comprises offset distance of the origin of the component coordinate system relative to the interface basic coordinate system and the rotation angle of the component coordinate system;
the coordinates of the layout anchor in the interface base coordinate system are calculated based on the coordinates of the layout anchor in the component coordinate system and the offset data of the component coordinate system relative to the interface base coordinate system.
Through realizing the visual drag layout design of the visual layout UI component, a UI designer can intuitively feel the design result of the UI interface, so that the real-time adjustment and design of the UI interface are convenient for the staff, and the efficient design of the UI interface is realized.
Further, still further, the present disclosure further provides a computer readable storage medium having a computer readable program stored thereon, where the computer readable program when invoked performs the UI editing method for improving page style adaptation as described above;
it is understood that the computer readable storage medium may be a magnetic medium, e.g., floppy disk, hard disk, tape; optical media such as DVD; or a semiconductor medium such as a solid state disk SolidStateDisk, SSD, etc.
In summary, the invention has the advantages that: through designing uniform style adaptation judgment standards, the uniformity of styles of different visual layout UI components for developing the software products of the multi-UI interface is maintained, and further, the software development efficiency can be effectively improved.
The foregoing has shown and described the basic principles, principal features and advantages of the invention. It will be understood by those skilled in the art that the present invention is not limited to the embodiments described above, and that the above embodiments and descriptions are merely illustrative of the principles of the present invention, and various changes and modifications may be made therein without departing from the spirit and scope of the invention, which is defined by the appended claims. The scope of the invention is defined by the appended claims and equivalents thereof.
Claims (7)
1. A UI editing method for improving page style adaptation, comprising:
setting a plurality of interfaces for each product according to the product attribute;
constructing a product UI instruction file according to the function of the product, wherein the UI instruction file comprises all UI event elements for realizing the function of the product;
establishing at least one visual layout UI component according to the product UI instruction file, wherein the visual layout UI component is a standardized visual layout UI component and/or a customized visual layout UI component;
establishing a mapping relation between each visual layout UI component and an interface to be laid out, wherein each visual layout UI component corresponds to one or more interfaces;
calculating style parameters of the visual layout UI component and style adaptation degree between interfaces, obtaining stylized matching data of the visual layout UI component, and adjusting the visual layout UI component based on the stylized matching data;
assigning values to the size parameters and the layout parameters of the visual layout UI components according to the mapping relation between the visual layout UI components and the platform to be laid out to obtain assignment data of the visual layout UI components, wherein the assignment data of the visual layout UI components corresponds to the mapping relation between the visual layout UI components and the platform to be laid out one by one;
based on assignment data of visual layout UI components, establishing a plurality of visual UI interfaces corresponding to a platform to be published of each product;
the step of establishing at least one visual layout UI component according to the product UI instruction file specifically comprises the following steps:
acquiring the operation of each UI event element on a corresponding interface of each platform, and acquiring UI configuration operation data;
judging whether the standardized visual layout UI component can meet the operation according to the UI configuration operation data, if so, calling the standardized visual layout UI component, and if not, establishing a customized visual layout UI component;
the step of establishing the user-defined visual layout UI component specifically comprises the following steps:
generating a UI interface element corresponding to the UI event element according to the UI configuration operation data, wherein the UI interface element is one or more of a UI interface button, a static UI interface pattern and a dynamic UI interface pattern;
determining a trigger action of the UI event element based on the type of the UI interface element and the UI configuration operation data;
generating size parameters and layout parameters of the UI interface elements based on the UI configuration operation data and interfaces corresponding to the UI event elements;
generating style parameters of the UI interface element based on the UI interface element;
packaging the size parameter, the layout parameter and the style parameter of the UI interface element into attribute data of the UI interface element;
packaging the UI interface element, the attribute data of the UI interface element and the trigger action of the UI event element into a visual layout UI component;
the style parameter of the visual layout UI component and the style adaptation degree between interfaces are calculated specifically comprising:
according to the mapping relation between the visual layout UI component and the platform to be laid out, acquiring a to-be-laid out interface associated with the visual layout UI component, and acquiring style parameters of the to-be-laid out interface;
performing index assignment on style parameters of the UI interface elements and style parameters of the interface to be laid out according to the set rules to obtain one or more parameter index values corresponding to each style parameter;
calculating the similarity of each style parameter of the visual layout UI component and the interface to be laid associated with the visual layout UI component according to a parameter similarity calculation formula;
adding different weight values to each style parameter, and calculating the style adaptation degree between the style parameters of the visual layout UI component and the interface according to a style adaptation degree calculation formula;
the parameter similarity calculation formula is as follows:
in the method, in the process of the invention,
to visualize the similarity of the layout UI component and the ith style parameter of the interface to be laid out associated therewith, and (2)>
A j-th parameter index value for visualizing the i-th style parameter of the UI interface element in the layout UI component,/I>
The j-th parameter index value of the i-th style parameter of the interface to be laid out is +.>
The total number of parameter index values for the ith style parameter;
the style fitness calculation formula is as follows:
wherein, C is the style parameter of the visual layout UI component and the style adaptation degree between interfaces,
the weight value of the ith style parameter, and m is the total number of style parameters.
2. The UI editing method for improving page style adaptation according to claim 1, wherein the adjusting the visual layout UI component based on the stylized matching data specifically includes:
judging whether the style adaptation degree between the style parameters of the visual layout UI component and the interface is larger than a preset value, if so, judging that the style adaptation degree between the style parameters of the visual layout UI component and the interface is low, and if not, judging that the style adaptation degree between the style parameters of the visual layout UI component and the interface is high;
screening out visual layout UI components with low style adaptation degree between style parameters of the visual layout UI components and interfaces
And (3) the style parameter corresponding to the largest value is obtained, the parameter index value of the style parameter corresponding to the UI interface element of the visual layout UI component is adjusted, and whether the style adaptation degree between the style parameter of the visual layout UI component and the interface is larger than a preset value is repeatedly judged.
3. The UI editing method for improving page style adaptation according to claim 2, wherein the assigning the size parameter and the layout parameter of the visual layout UI component according to the mapping relationship between the visual layout UI component and the platform to be laid out specifically includes:
according to the mapping relation between the visual layout UI component and the interface to be laid out, acquiring the interface to be laid out associated with the visual layout UI component, and acquiring the size of the interface to be laid out;
assigning the size parameters of the visual layout UI component according to the size of the interface to be laid out and the types of the UI interface elements;
setting the visual layout UI component at a layout position on the interface to be laid out corresponding to the visual layout UI component;
and setting layout parameters of the visual layout UI component on the corresponding interface to be laid out according to the layout position of the visual layout UI component.
4. The UI editing method for improving page style adaptation according to claim 3, wherein the setting layout parameters of the visual layout UI component on the interface to be laid out corresponding to the visual layout UI component specifically includes:
setting a component coordinate system in the visual layout UI component, and setting an interface basic coordinate system on an interface to be laid out;
setting at least two layout anchor points in the visual layout UI component, and calculating coordinates of the layout anchor points in a component coordinate system;
adjusting the position and angle of the visual layout UI component on the corresponding interface to be laid out, and calculating offset data of the component coordinate system relative to the interface basic coordinate system when the visual layout UI component is positioned at the layout position, wherein the offset data comprises offset distance of the origin of the component coordinate system relative to the interface basic coordinate system and the rotation angle of the component coordinate system;
the coordinates of the layout anchor in the interface base coordinate system are calculated based on the coordinates of the layout anchor in the component coordinate system and the offset data of the component coordinate system relative to the interface base coordinate system.
5. A UI editing system for improving page style adaptation, for implementing the UI editing method for improving page style adaptation according to any one of claims 1 to 4, comprising:
the front-end development module is used for constructing a product UI instruction file according to the function of the product;
the UI editing module is used for setting a plurality of interfaces for each product platform to be released according to product attributes, establishing at least one visual layout UI component according to product UI instruction files, establishing a mapping relation between each visual layout UI component and the platform to be laid, calculating style parameters of the visual layout UI components and style adaptation degree between the interfaces, assigning the size parameters and layout parameters of the visual layout UI components according to the mapping relation between the visual layout UI components and the platform to be laid, and establishing a plurality of visual UI interfaces corresponding to each product platform to be released based on assignment data of the visual layout UI components and stylized matching data of the visual layout UI components.
6. The UI editing system for improving page style adaptation according to claim 5, wherein the UI editing module is internally integrated with:
the system comprises a standard component unit, wherein at least one standard component library is stored in the standard component unit, and a plurality of standardized visual layout UI components are stored in the standard component library;
the self-grinding component unit is used for establishing a self-defined visual layout UI component;
the visual editing unit is used for setting a plurality of interfaces for the platform to be released of each product according to the product attribute and realizing the visual dragging layout of the visual layout UI component on the interfaces;
the component importing unit is used for importing the standardized visual layout UI component and/or the customized visual layout UI component into the visual editing unit;
the style adaptation calculation unit is used for calculating the style adaptation degree between the style parameters of the visual layout UI component and the interface;
the layout assignment unit is used for assigning the size parameters of the visual layout UI component according to the size of the interface to be laid out and the types of the UI interface elements, and setting the layout parameters of the visual layout UI component on the corresponding interface to be laid out according to the layout position of the visual layout UI component;
UI interface generation unit: the UI interface generating unit is used for establishing a plurality of visual UI interfaces corresponding to the platform to be released of each product based on assignment data of the visual layout UI component.
7. A computer-readable storage medium having a computer-readable program stored thereon, wherein the computer-readable program when invoked performs the UI editing method for improving page style adaptation as claimed in any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310473726.6A CN116204184B (en) | 2023-04-28 | 2023-04-28 | UI editing method, system and storage medium for improving page style adaptation |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310473726.6A CN116204184B (en) | 2023-04-28 | 2023-04-28 | UI editing method, system and storage medium for improving page style adaptation |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116204184A CN116204184A (en) | 2023-06-02 |
| CN116204184B true CN116204184B (en) | 2023-07-14 |
Family
ID=86513252
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310473726.6A Active CN116204184B (en) | 2023-04-28 | 2023-04-28 | UI editing method, system and storage medium for improving page style adaptation |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116204184B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117215584B (en) * | 2023-11-07 | 2024-01-26 | 江西格如灵科技股份有限公司 | UI automatic arrangement method, system, storage medium and electronic equipment |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111930370A (en) * | 2020-06-17 | 2020-11-13 | 石化盈科信息技术有限责任公司 | Visualized page processing method and device, computer equipment and storage medium |
Family Cites Families (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US11188509B2 (en) * | 2012-02-20 | 2021-11-30 | Wix.Com Ltd. | System and method for generating a visual data structure associated with business information based on a hierarchy of components |
| US9934204B2 (en) * | 2012-11-30 | 2018-04-03 | Lenovo Enterprise Solutions (Singapore) Pte. Ltd. | Conditionally reload workarea user interfaces using a flag indicator to balance performance and stability of web applications |
| CN105022615B (en) * | 2014-04-21 | 2018-09-11 | 大唐软件技术股份有限公司 | A kind of generation method and system at interface |
| CN106873965A (en) * | 2016-12-25 | 2017-06-20 | 北京通途永久科技有限公司 | A kind of method suitable for the monitoring service class application dynamic construction page |
| CN108363572B (en) * | 2018-01-03 | 2021-06-04 | 网易（杭州）网络有限公司 | Method for automatically arranging UI (user interface) |
| US10860603B2 (en) * | 2018-06-29 | 2020-12-08 | Lucid Software, Inc. | Visualization customization |
| US10789052B2 (en) * | 2018-10-29 | 2020-09-29 | Salesforce.Com, Inc. | User interface (UI) design system mapping platform for automatically mapping design system components to a design document file from a design tool to generate a mapped specification |
| CN111352623B (en) * | 2018-12-20 | 2023-05-26 | 阿里巴巴集团控股有限公司 | Page generation method and device |
| US11226834B2 (en) * | 2019-04-24 | 2022-01-18 | Salesforce.Com, Inc. | Adjusting emphasis of user interface elements based on user attributes |
| CN110069257B (en) * | 2019-04-25 | 2022-02-11 | 腾讯科技（深圳）有限公司 | Interface processing method and device and terminal |
| CN110334163B (en) * | 2019-05-22 | 2020-09-04 | 平安国际智慧城市科技股份有限公司 | Map background optimization method, device, equipment and storage medium for big data |
| US11256872B2 (en) * | 2019-10-29 | 2022-02-22 | International Business Machines Corporation | Natural language polishing using vector spaces having relative similarity vectors |
| US11137985B2 (en) * | 2020-01-31 | 2021-10-05 | Salesforce.Com, Inc. | User interface stencil automation |
| US20210286921A1 (en) * | 2020-03-16 | 2021-09-16 | Accenture Global Solutions Limited | Generating style grammars for generative design |
| CN114090149B (en) * | 2020-08-21 | 2023-08-18 | 完美世界(重庆)互动科技有限公司 | Interface adjustment method, device, computer equipment and computer readable storage medium |
| CN112506500B (en) * | 2020-12-03 | 2022-08-23 | 武汉蓝星科技股份有限公司 | Visual control creating method and device |
| CN112540763A (en) * | 2020-12-24 | 2021-03-23 | 贵阳货车帮科技有限公司 | Front-end page generation method and device, platform equipment and storage medium |
| CN113608740A (en) * | 2021-08-09 | 2021-11-05 | 车主邦（北京）科技有限公司 | Icon replacement method, device and equipment and readable storage medium |
| CN114089999A (en) * | 2021-10-29 | 2022-02-25 | 青岛海尔科技有限公司 | Front-end page generation method and system |
| CN114880238A (en) * | 2022-05-27 | 2022-08-09 | 平安普惠企业管理有限公司 | Mobile terminal interface testing method, device, equipment and storage medium |
-
2023
- 2023-04-28 CN CN202310473726.6A patent/CN116204184B/en active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111930370A (en) * | 2020-06-17 | 2020-11-13 | 石化盈科信息技术有限责任公司 | Visualized page processing method and device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116204184A (en) | 2023-06-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2019109485A1 (en) | Echarts tool-based chart making method, apparatus and device, and medium | |
| CN105511873B (en) | User interface control display method and device | |
| WO2022007919A1 (en) | Flow processing method and device, and computer system | |
| CN116204184B (en) | UI editing method, system and storage medium for improving page style adaptation | |
| JP2005346722A (en) | Method and apparatus for generating form using form type | |
| CN113934820A (en) | Visual processing system, method, storage medium and terminal for unstructured data | |
| CN111047509A (en) | Image special effect processing method and device and terminal | |
| WO2023213037A1 (en) | Hair virtual model rendering method and apparatus, computer device, and storage medium | |
| CN102142152A (en) | Method, apparatus, and program for displaying an object on a computer screen | |
| CN104885095B (en) | Hand-written document processing device and method | |
| JP7480076B2 (en) | Content Creation System and Method | |
| CN114924822B (en) | Screenshot method and device of three-dimensional topological structure, electronic equipment and storage medium | |
| WO2022228211A1 (en) | Method and apparatus for constructing visual view | |
| CN112348955B (en) | Object rendering method | |
| US7401299B2 (en) | Method and apparatus for providing a presumptive drafting solution | |
| CN114797109A (en) | Object editing method and device, electronic equipment and storage medium | |
| CN113221499A (en) | Mask layout generation method and device, computer equipment and storage medium | |
| CN113126866A (en) | Object determination method and device, electronic equipment and storage medium | |
| CN117933214A (en) | Method and system for editing dynamic template based on word document | |
| CN113986112B (en) | Soft keyboard display method, related device and computer program product | |
| JP7473780B2 (en) | Information processing system, information processing method, and program | |
| TWI840700B (en) | Method for analyzing motivation characteristics | |
| CN112507671B (en) | Method, apparatus, and readable medium for adjusting text distance | |
| WO2024045090A1 (en) | Product model simulation method and device | |
| CN117032696A (en) | Knowledge payment platform interactive interface design method and system for dynamic data update |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |