CN115543322A - UI component processing method and device and storage medium - Google Patents

UI component processing method and device and storage medium Download PDF

Info

Publication number
CN115543322A
CN115543322A CN202211497355.7A CN202211497355A CN115543322A CN 115543322 A CN115543322 A CN 115543322A CN 202211497355 A CN202211497355 A CN 202211497355A CN 115543322 A CN115543322 A CN 115543322A
Authority
CN
China
Prior art keywords
master
design
modified
instance
canvas
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.)
Pending
Application number
CN202211497355.7A
Other languages
Chinese (zh)
Inventor
孟小江
刘松
代金
李祥云
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Chengdu Mockplus Technology Co ltd
Original Assignee
Chengdu Mockplus Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Chengdu Mockplus Technology Co ltd filed Critical Chengdu Mockplus Technology Co ltd
Priority to CN202211497355.7A priority Critical patent/CN115543322A/en
Publication of CN115543322A publication Critical patent/CN115543322A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming

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 application discloses a processing method and device of a UI component and a storage medium, which are used for creating and managing the UI component and improving the efficiency of design work. The method comprises the following steps: creating basic components in a design canvas, wherein the number of the basic components is single or multiple; combining the basic assemblies to obtain an assembly master plate, and storing the master plate into a master plate library through a preset storage path; defining the master as an independent container, and creating an instance in a canvas according to the master when the master is dragged from the master library into the canvas, wherein the instance has an association relationship with the master; when the master is modified, determining all instances associated with the master according to the association relation; and according to the modified master and the overwriting data in the examples, carrying out batch reassembly on all the associated examples.

Description

UI component processing method and device and storage medium
Technical Field
The present application relates to the field of UI technologies, and in particular, to a method and an apparatus for processing a UI component, and a storage medium.
Background
The UI design (or interface design) refers to the overall design of human-computer interaction, operation logic and interface attractiveness of software. The UI design is divided into an entity UI and a virtual UI, the common UI design of the Internet is the virtual UI, and the UI is short for User Interface (User Interface).
The UI refers to a medium for human interaction with information, and is a functional carrier and typical features of information products. The UI exists as a usable form of system, such as a visual-oriented interface, emphasizing the organization and presentation of visual elements. This is the design of the physical presentation layer, and every product or interactive form appears in this form, including graphics, icons (Icon), colors, text design, etc., through which the user uses the system. At this level, the UI can be understood as a User Interface, i.e. a User Interface, which is the basic level of UI as human-computer interaction.
In the UI design project, there are a large number of repeated or similar design structures or interfaces, if repeated elements are needed, the conventional method is to directly copy the elements, and the copied elements are used as a new independent content, however, the conventional method has a certain limitation, and if a designer needs to perform differential modification or batch processing on each element, each content still needs to be processed separately, which obviously is not beneficial to improving the design work efficiency.
Disclosure of Invention
In order to solve the technical problem, the application provides a processing method and device of a UI component, and a storage medium.
The application provides a method for processing a UI component, which comprises the following steps:
creating base components in a design canvas, wherein the number of the base components is single or multiple;
combining the basic assemblies to obtain an assembly master plate, and storing the master plate into a master plate library through a preset storage path;
defining the master as an independent container, and creating an instance in a canvas according to the master when the master is dragged from the master library into the canvas, wherein the instance has an association relationship with the master;
when the master is modified, determining all instances associated with the master according to the association relation;
and according to the modified master and the overwriting data in the examples, carrying out batch reassembly on all the associated examples.
Optionally, before the batch reassembly of all the associated instances according to the modified master and the overwriting data in the instances, the method further includes:
and pushing the modified content to the instance in an updating message mode according to the modified master.
Optionally, when editing the property and style of the instance, the editing operation is only effective for the instance.
Optionally, after the batch reassembly of all the associated instances according to the modified master and the overwriting data in the instances, the method further includes:
creating a reference relationship between the overwriting data and the instance;
constructing a design project according to the created examples, and uploading the design project to a shared space;
when the design item is shared, the reference relation and the association relation between the instance and the master are shared together.
Optionally, after the design items are shared, if the original design items are modified by a sharing party, determining whether the design items corresponding to the shared space have usage records of a user, and if the design items have usage records, comparing the modified design items with the used design items to obtain comparison results;
and pushing the comparison result to the user.
Optionally, after the determining whether the usage record of the user exists in the design item corresponding to the shared space, the method further includes:
and if the use record does not exist, directly updating the shared space according to the modified design project.
A second aspect of the present application provides a processing apparatus for a UI component, including:
the device comprises a first creating unit, a second creating unit and a third creating unit, wherein the first creating unit is used for creating basic components in a design canvas, and the number of the basic components is single or multiple;
the combination unit is used for combining the basic assemblies to obtain an assembly master plate and storing the master plate into a master plate library through a preset storage path;
the second creating unit is used for defining the master as an independent container, when the master is dragged from the master library to a canvas, an instance is created in the canvas according to the master, and the instance and the master have an association relationship;
the association unit is used for determining all instances associated with the master according to the association relation when the master is modified;
and the assembling unit is used for performing batch reassembly on all the associated examples according to the modified master and the overwriting data in the examples.
A third aspect of the present application provides an apparatus for processing a UI component, the apparatus comprising:
the device comprises a processor, a memory, an input and output unit and a bus;
the processor is connected with the memory, the input and output unit and the bus;
the memory holds a program that the processor calls to perform the method of any of the first aspect and the first aspect.
A fourth aspect of the present application provides a computer readable storage medium having a program stored thereon, which when executed on a computer performs the method of any one of the first aspect and the first aspect.
According to the technical scheme, the method has the following advantages:
according to the UI component processing method, a plurality of basic components can be combined into the master and stored in the master library through the preset path, so that the master can be reused from the master library infinitely, the design efficiency can be improved, meanwhile, when the instance is created through the master, the master and the instance have the association relationship, if a designer modifies the master, all associated instances can be modified in batches according to the association relationship, and therefore data can be managed in batches conveniently, if the instance is modified, the instance is reassembled according to the modified master and the overwriting data in the instance, and the overwriting data are matched with the instance. The method provided by the application can effectively improve the design working efficiency.
Drawings
In order to more clearly illustrate the technical solutions in the present application, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings without creative efforts.
FIG. 1 is a flow diagram illustrating an embodiment of a method for processing UI components provided herein;
FIG. 2 is a flowchart illustrating an embodiment of a method for processing UI components provided herein;
FIG. 3 is a schematic structural diagram of an embodiment of a processing apparatus for a UI component provided in the present application;
fig. 4 is a schematic structural diagram of another embodiment of a processing apparatus for UI components provided in the present application.
Detailed Description
Based on the above, the application provides a processing method of the UI component, which is used for creating and managing the UI component and improving the efficiency of design work.
The UI component processing method provided by the present application may be applied to a terminal, a system, or a server, for example, the terminal may be a fixed terminal such as a smart phone or a computer, a tablet computer, a smart television, a smart watch, a portable computer terminal, or a desktop computer. For convenience of explanation, the terminal is taken as an execution subject for illustration in the present application.
The following first explains the terms that may be used in the present application:
UI design tool will need some common design elements to use, roughly divided into: and storing the design resources of four types of colors, text styles, layer styles and components.
Assembly of: layer object for bearing design elements with different design forms and functions in UI design tool
Including common shapes, vector paths, pictures, function bearing containers, etc. The components can use the resources in the design resource library to carry out rapid design, and the working efficiency is improved.
Master (symbol master): the components formed by the basic design components store data sources of the design structures to be multiplexed, and can be managed, edited and viewed in projects.
Example (symbol instant) components generated based on a master, which do not themselves store design structures, copy data from the master to build own data prior to actual rendering (graphical rendering process) by associating IDs with the master.
Overwriting of the example: for design diversity considerations, the instances are allowed to redefine the master during dynamic construction (acquiring and assembling data in real time) by redefining portions of the design structure.
Referring to fig. 1, fig. 1 is a schematic flowchart illustrating an embodiment of a processing method of a UI component provided in the present application, where the processing method of the UI component includes:
101. creating base components in a design canvas, wherein the number of the base components is single or multiple;
in an actual design job, a base component is created in the canvas of the job, which may be created by designing elements in a resource library,
102. combining the basic assemblies to obtain an assembly master plate, and storing the master plate into a master plate library through a preset storage path;
in actual design work, basic components are created in a working canvas, the basic components can be created through elements in a design resource library, the number of the created basic components can be one or more, a designer combines the created basic components to form a fixed group, the group is defined as a master plate, the designer stores the master plate into the master plate library through a preset storage path, and the stored master plate is displayed on a software interface in a graphical mode, so that subsequent viewing and editing are facilitated.
103. Defining the master as an independent container, and creating an instance in a canvas according to the master when the master is dragged from the master library into the canvas, wherein the instance has an association relationship with the master;
after the master is stored in the master library, a designer can directly use the master, and when the master is used, the master is dragged into a canvas from the master library, so that an example corresponding to the master is created in the canvas, after the master is stored in the master library, the master is defined as an independent container, namely, only the attribute and style information of the master are provided, and data is not overwritten, after the master is dragged into the canvas, the initially generated example only has interface data such as the position, the size and the associated ID of the master, and the data of the actual design content is obtained from the master in real time before being rendered, wherein the example created through the master and the master have the associated relationship, and the example created through the master can be specifically associated through the ID.
104. When the master is modified, determining all instances associated with the master according to the association relation;
105. and according to the modified master and the overwriting data in the examples, carrying out batch reassembly on all the associated examples.
In the design process, if the same type of instances need to be modified, the existing method needs to modify one by one, the process is complicated, and the efficiency is low. If the designer directly modifies an instance, the modification to the instance may only work on the corresponding instance. In the method, the attribute and the style of the example can be adjusted on the structure of the example, the example is overwritten, corresponding data can be stored on the example and combined with the master data before rendering, and appearance difference under similar design structures is realized.
In the above description, an embodiment of a processing method for a device in the present application is described, and the present application provides another embodiment, in which a designer can share a created design item in a shared space, and the following detailed description refers to fig. 2:
201. creating basic components in a design canvas, wherein the number of the basic components is single or multiple;
202. combining the basic assemblies to obtain an assembly master plate, and storing the master plate into a master plate library through a preset storage path;
203. defining the master as an independent container, and creating an instance in a canvas according to the master when the master is dragged from the master library into the canvas, wherein the instance and the master have an association relationship;
204. when the master is modified, determining all instances associated with the master according to the association relation;
205. according to the modified master and the overwriting data in the examples, performing batch reassembly on all the associated examples;
206. creating a reference relationship between the overwrite data and the instance;
207. constructing a design project according to the created examples, and uploading the design project to a shared space;
208. when the design project is shared, the reference relation and the incidence relation between the instance and the master are shared together;
the design project described in this embodiment is a design resource library, and resources stored in an existing project can be shared in a team in a sharing manner, so that other projects can directly refer to the existing design resources of the shared project. Before the design item is shared to the shared space, a reference relationship between the overwriting data and the instance is created firstly, when the design item is shared, all the instances, the corresponding overwriting data, the application relationship between the instances and the overwriting data and the association relationship between the instances and the master are also packaged and shared to the shared space, other parties can directly use the data after downloading the data or directly create the data based on the original format, and further, if a receiving party edits the design item in the shared space and shares the edited design item to other parties again, the reference relationship between the design item and the initial sharing party is also preserved and shared together with the content during sharing.
209. Judging whether the design items corresponding to the shared space have usage records of users or not,
210. comparing the modified design project with the used design project to obtain a comparison result;
211. pushing the comparison result to the user;
212. directly updating the shared space according to the modified design project;
after the design items are shared, if the sharing party modifies the design items for the second time, the design items in the shared space can be selectively updated, specifically, whether the corresponding design items in the shared space have usage records or not is judged, if the usage records exist, the design items are already used or edited by other parties in the specification, at this time, the modified design items and the used design items are compared to obtain a comparison result, the comparison result can be a difference between the two, the comparison result is pushed to the using party in a message mode, and the using party can select to update or not update.
If the usage record does not exist, the design item is not used, and the shared space can be updated by directly using the modified design item, namely the modified design item is directly shown.
The method provided by the embodiment can effectively improve the working efficiency in the collaborative design of the UI component.
The above-described embodiments describe a processing method of a UI component provided in the present application, and the apparatus and storage medium referred to in the present application will be described below.
Referring to fig. 3, the present application provides a processing apparatus for a UI component, including:
a first creating unit 301, configured to create base components in the design canvas, where the number of the base components is single or multiple;
the combining unit 302 is configured to combine the basic components to obtain a component master, and store the master into a master library through a preset storage path;
a second creating unit 303, configured to define the master as an independent container, and when the master is dragged from the master library into a canvas, create an instance in the canvas according to the master, where the instance has an association relationship with the master;
an association unit 304, configured to determine, according to the association relationship, all instances associated with the master when the master is modified;
an assembling unit 305, configured to perform batch reassembly on all the associated instances according to the modified master and the overwriting data in the instances.
Optionally, a message pushing unit 306 is further included, configured to:
and pushing the modified content to the instance in an updating message mode according to the modified master.
Optionally, the system further includes a sharing unit 307, specifically configured to:
creating a reference relationship between the overwrite data and the instance;
constructing a design project according to the created examples, and uploading the design project to a shared space;
when the design item is shared, the reference relation and the association relation between the instance and the master are shared together.
Optionally, the system further includes a determining unit 308, specifically configured to:
after the design items are shared, if the original design items are modified by a sharing party, judging whether the design items corresponding to the shared space have the use records of a using party, if so, comparing the modified design items with the used design items to obtain a comparison result;
and pushing the comparison result to the user.
The determining unit 308 is further configured to:
and if the use record does not exist, directly updating the shared space according to the modified design project.
Referring to fig. 4, the present application also provides a processing apparatus of a UI component, including:
a processor 401, a memory 402, an input-output unit 403, a bus 404;
the processor 401 is connected to the memory 402, the input/output unit 403, and the bus 404;
the memory 402 holds a program that the processor 401 calls to execute the processing method of any of the UI components as described above.
The present application also relates to a computer-readable storage medium having a program stored thereon, wherein the program, when executed on a computer, causes the computer to execute a processing method of any of the UI components as described above.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the several embodiments provided in the present application, it should be understood that the disclosed system, apparatus and method may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the units is only one logical division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit may be implemented in the form of hardware, or may also be implemented in the form of a software functional unit.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application may be substantially implemented or contributed to by the prior art, or all or part of the technical solution may be embodied in a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a read-only memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and the like.

Claims (9)

1. A method for processing UI components, the method comprising:
creating basic components in a design canvas, wherein the number of the basic components is single or multiple;
combining the basic assemblies to obtain an assembly master plate, and storing the master plate into a master plate library through a preset storage path;
defining the master as an independent container, and creating an instance in a canvas according to the master when the master is dragged from the master library into the canvas, wherein the instance has an association relationship with the master;
when the master is modified, determining all instances associated with the master according to the association relation;
and according to the modified master and the overwriting data in the examples, carrying out batch reassembly on all the associated examples.
2. The method for processing the UI component according to claim 1, wherein before the batch reassembly of all the associated instances according to the modified master and the overwriting data in the instances, the method further comprises:
and pushing the modified content to the instance in an updating message mode according to the modified master.
3. The method for processing a UI component according to claim 1, wherein when editing the property and style of the instance, the editing operation is effective only for the instance.
4. The method for processing the UI component according to claim 1, wherein after the batch reassembly of all the associated instances according to the modified masters and the overwriting data in the instances, the method further comprises:
creating a reference relationship between the overwrite data and the instance;
constructing a design project according to the created examples, and uploading the design project to a shared space;
when the design item is shared, the reference relation and the association relation between the instance and the master are shared together.
5. The method for processing the UI component according to claim 4, wherein after the design items are shared, if the original design items are modified by a sharing party, whether the usage records of the usage party exist in the design items corresponding to the shared space is judged, and if the usage records exist, the modified design items and the used design items are compared to obtain a comparison result;
and pushing the comparison result to the user.
6. The method for processing the UI component according to claim 5, wherein after the determining whether the usage record of the user exists in the design item corresponding to the shared space, the method further comprises:
and if the use record does not exist, directly updating the shared space according to the modified design project.
7. A processing apparatus of a UI component, comprising:
the device comprises a first creating unit, a second creating unit and a third creating unit, wherein the first creating unit is used for creating basic components in a design canvas, and the number of the basic components is single or multiple;
the combination unit is used for combining the basic assemblies to obtain an assembly master plate and storing the master plate into a master plate library through a preset storage path;
the second creating unit is used for defining the master as an independent container, when the master is dragged from the master library to a canvas, an instance is created in the canvas according to the master, and the instance and the master have an association relationship;
the association unit is used for determining all instances associated with the master according to the association relation when the master is modified;
and the assembling unit is used for performing batch reassembly on all the associated examples according to the modified master and the overwriting data in the examples.
8. An apparatus for processing a UI component, the apparatus comprising:
the device comprises a processor, a memory, an input and output unit and a bus;
the processor is connected with the memory, the input and output unit and the bus;
the memory holds a program that the processor calls to perform the method of any of claims 1 to 6.
9. A computer-readable storage medium, having a program stored thereon, which when executed on a computer performs the method of any one of claims 1 to 6.
CN202211497355.7A 2022-11-28 2022-11-28 UI component processing method and device and storage medium Pending CN115543322A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211497355.7A CN115543322A (en) 2022-11-28 2022-11-28 UI component processing method and device and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211497355.7A CN115543322A (en) 2022-11-28 2022-11-28 UI component processing method and device and storage medium

Publications (1)

Publication Number Publication Date
CN115543322A true CN115543322A (en) 2022-12-30

Family

ID=84722706

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211497355.7A Pending CN115543322A (en) 2022-11-28 2022-11-28 UI component processing method and device and storage medium

Country Status (1)

Country Link
CN (1) CN115543322A (en)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102841780A (en) * 2011-06-23 2012-12-26 阿里巴巴集团控股有限公司 Method and equipment for creating and calling universal components
CN111124375A (en) * 2019-12-27 2020-05-08 杭州东方通信软件技术有限公司 Autonomous front-end design and display system
CN111782315A (en) * 2020-06-09 2020-10-16 北京磨刀刻石科技有限公司 Method, device and storage medium for sharing design object

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102841780A (en) * 2011-06-23 2012-12-26 阿里巴巴集团控股有限公司 Method and equipment for creating and calling universal components
CN111124375A (en) * 2019-12-27 2020-05-08 杭州东方通信软件技术有限公司 Autonomous front-end design and display system
CN111782315A (en) * 2020-06-09 2020-10-16 北京磨刀刻石科技有限公司 Method, device and storage medium for sharing design object

Similar Documents

Publication Publication Date Title
TWI808393B (en) Page processing method, device, apparatus and storage medium
US9037974B2 (en) Creating and editing dynamic graphics via a web interface
EP1868149B1 (en) Improved computerized collaborative work
US11763076B2 (en) Document applet generation
US7152207B1 (en) Method and apparatus for providing conditional customization for generating a web site
US8942679B2 (en) Method and system for providing pattern based enterprise applications for organizing, automating, and synchronizing processes for mobile communication devices
CN111598533A (en) Process approval processing method and device, electronic equipment and storage medium
CA2153964A1 (en) Object-oriented audio record/playback system
CN105574735A (en) Internet-based display material system and display material manufacturing method
CN115712413A (en) Low code development method, device, equipment and storage medium
WO2024002222A1 (en) Application management method and related device
CN112272137B (en) Method, computing device and computer readable memory device for mass data management in a communication application via multiple mailboxes
WO2024067319A1 (en) Method and system for creating stickers from user-generated content
CN110673827B (en) Resource calling method and device based on android system and electronic equipment
CN114816082A (en) Input control method and device applied to cloud application and electronic equipment
CN115543322A (en) UI component processing method and device and storage medium
US20180341717A1 (en) Providing instant preview of cloud based file
CN117751347A (en) Techniques for distributed interface component generation
Geyer et al. The Trade-Offs of Blending Synchronous and Asynchronous Communication Services to Support Contextual Collaboration.
CN113595872B (en) Message component configuration method, device, system, equipment and storage medium
CN112464126B (en) Method for generating panoramic chart based on Threejs, terminal equipment and storage medium
KR100366380B1 (en) 3D-Object sharing method using 3D Studio max plug-in in distributed collaborative work systems
US20240126577A1 (en) Visualization of application capabilities
WO2023234859A2 (en) Method and system for creating social media content collections
Brendel et al. Exploring the immediate mode GUI concept for graphical user interfaces in mixed reality applications

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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20221230