CN117707495A - Method, device, equipment and storage medium for generating design manuscript based on page reverse direction - Google Patents
Method, device, equipment and storage medium for generating design manuscript based on page reverse direction Download PDFInfo
- Publication number
- CN117707495A CN117707495A CN202311798908.7A CN202311798908A CN117707495A CN 117707495 A CN117707495 A CN 117707495A CN 202311798908 A CN202311798908 A CN 202311798908A CN 117707495 A CN117707495 A CN 117707495A
- Authority
- CN
- China
- Prior art keywords
- design
- component
- target
- page
- technical
- 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
Links
- 238000013461 design Methods 0.000 title claims abstract description 316
- 238000000034 method Methods 0.000 title claims abstract description 51
- 230000002441 reversible effect Effects 0.000 title claims description 17
- 230000015654 memory Effects 0.000 claims description 29
- 238000004590 computer program Methods 0.000 claims description 18
- 238000005516 engineering process Methods 0.000 claims description 11
- 230000004048 modification Effects 0.000 claims description 9
- 238000012986 modification Methods 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 9
- 230000009467 reduction Effects 0.000 abstract description 14
- 238000011161 development Methods 0.000 abstract description 12
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 7
- 230000007246 mechanism Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 4
- 230000003993 interaction Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 2
- 239000000463 material Substances 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000012937 correction Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000002372 labelling Methods 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000008439 repair process Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 239000004984 smart glass Substances 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- 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/34—Graphical or visual programming
-
- 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
-
- 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
-
- 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)
- Processing Or Creating Images (AREA)
Abstract
The specification relates to the technical field of internet finance, and provides a method, a device, equipment and a storage medium for generating a design draft based on page reversal, wherein the method comprises the following steps: displaying a design component library corresponding to the target page on a plug-in interface of the UI design tool; when a first operation event of a target design component in the design component library is detected, the target design component is moved to a drawing board interface of the UI design tool; matching a target technical component corresponding to the target design component from a technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component; and correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component, and displaying the modified target design component. According to the embodiment of the specification, the page reduction walking efficiency in front-end page development can be improved.
Description
Technical Field
The present disclosure relates to the field of internet finance technologies, and in particular, to a method, an apparatus, a device, and a storage medium for generating a design draft based on page reversal.
Background
Currently, when web and h5 pages are developed at the front end, page rendering development is required based on design manuscripts of front end development tools (such as sktech). The following collaborative process is needed between the designer of the design draft and the front-end developer of the page rendering development: a designer designs a sketch of a related page according to business requirements, and a corresponding design draft is derived after the design is completed and provided for a front-end developer; front-end developers develop pages according to the file marking information of the design manuscript; after the development is completed, a designer performs a reduction-through (walk-through) on the page to confirm whether the developed page is consistent with a design draft or not; if the problem exists, prompting a developer to repair the problem until the walking-checking method has no problem and the next working flow can be performed.
In the collaboration process, since the designer is generally unfamiliar with the front-end development technology, and because deviation may exist between the developed page and the design draft, the designer and the front-end developer often need to perform collaboration for multiple times, and the efficiency of the designer in performing reduction walking on the page containing the component code is low.
Disclosure of Invention
An object of an embodiment of the present disclosure is to provide a method, an apparatus, a device, and a storage medium for generating a design draft based on page reversal, so as to improve page reduction walking efficiency during front-end page development.
In order to achieve the above object, in one aspect, an embodiment of the present disclosure provides a method for generating a design draft based on page reversal, including:
displaying a design component library corresponding to the target page on a plug-in interface of the UI design tool;
when a first operation event of a target design component in the design component library is detected, the target design component is moved to a drawing board interface of the UI design tool;
matching a target technical component corresponding to the target design component from a technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component;
and correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component, and displaying the modified target design component.
In the method for generating the design draft based on the page reversal in the embodiment of the present disclosure, a design component library corresponding to a target page is displayed on a plug-in interface of a UI design tool, including:
reading a design component library corresponding to the target page after the UI design tool is started;
parsing one or more design components from the library of design components;
and displaying the parsed design components in a thumbnail form on a plug-in interface of the UI design tool.
In the method for generating a design draft based on page reversal in the embodiment of the present disclosure, the first operation event includes: and dragging the target design component from the plug-in interface to the drawing board interface.
In the method for generating the design manuscript based on the page reverse direction according to the embodiment of the present disclosure, correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component includes:
reading attribute values of the target technical components;
adding the attribute value of the target technical component to the design component name of the target design component in the form of a key value pair;
and correspondingly modifying the attribute value of the target design component according to the attribute value recorded in the design component name.
In the method for generating the design draft based on the page reversal in the embodiment of the present disclosure, each DIV block element is further configured with a second operation event in advance; after rendering the modified target design component, further comprising:
when a second operation event of the modified target design component is detected, displaying an attribute operation interface of the modified target design component;
correspondingly correcting the attribute value of the modified target design component according to the externally input attribute value;
and marking the corrected target design component so that the page developer can adjust the corresponding technical component according to the marking.
In the method for generating a design draft based on page reversal in the embodiment of the present disclosure, the second operation event includes: click events.
On the other hand, the embodiment of the specification also provides a device for generating design manuscripts based on page reversals, which comprises:
the display module is used for displaying a design component library corresponding to the target page on a plug-in interface of the UI design tool;
the moving module is used for moving the target design component to a drawing board interface of the UI design tool when a first operation event of the target design component in the design component library is detected;
the matching module is used for matching the target technical component corresponding to the target design component from the technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component;
and the modification module is used for correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component and displaying the modified target design component.
In another aspect, embodiments of the present disclosure further provide a computer device including a memory, a processor, and a computer program stored on the memory, which when executed by the processor, performs the instructions of the above method.
In another aspect, embodiments of the present disclosure also provide a computer storage medium having stored thereon a computer program which, when executed by a processor of a computer device, performs instructions of the above method.
In another aspect, the present description embodiment also provides a computer program product comprising a computer program which, when executed by a processor of a computer device, performs the instructions of the above method.
As can be seen from the technical solutions provided in the embodiments of the present disclosure, after a front-end developer develops a corresponding page based on a design draft, a design component library corresponding to the page may be displayed on a plug-in interface of a UI design tool, based on a specific operation performed by a user on the design component library, a corresponding design component may be moved to a drawing board interface of the UI design tool, a corresponding technical component may be matched from a technical component library corresponding to the page, and an attribute value of the design component may be modified according to an attribute value of the technical component, and then the modified design component may be re-rendered in the drawing board interface; when the page corresponds to a plurality of design components, the attribute modification and rendering of all the design components corresponding to the page can be completed by repeating the steps, so that the design draft can be automatically generated based on the page reversal; therefore, a designer can directly conduct reduction degree walking on the design manuscript generated automatically based on page reverse, and compared with a page, the designer is more familiar with the design manuscript, so that the page reduction degree walking efficiency in front-end page development can be improved, and the page reduction degree walking cost is reduced.
Drawings
In order to more clearly illustrate the embodiments of the present description or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described below, it being obvious that the drawings in the following description are only some of the embodiments described in the present description, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art. In the drawings:
FIG. 1 illustrates a schematic diagram of a plug-in interface and palette interface within a UI design component in some embodiments of the disclosure;
FIG. 2 illustrates an application environment diagram for generating design manuscripts based on page reverse in some embodiments of the present description;
FIG. 3 illustrates a flow chart of a method of generating a design script based on page reversing in some embodiments of the present description;
FIG. 4 is a flow chart illustrating a library of design components corresponding to a target page presented at a plug-in interface of a UI design tool in the method of FIG. 2;
FIG. 5 illustrates a flow chart for modifying the property values of a target design component based on the property value correspondence of the target technology component in the method of FIG. 2;
FIG. 6 illustrates a flow chart of a method of generating a design script based on page reversing in other embodiments of the present description;
FIG. 7 illustrates a block diagram of an apparatus for generating a design script based on page reversing in some embodiments of the present description;
fig. 8 illustrates a block diagram of a computer device in some embodiments of the present description.
[ reference numerals description ]
10. A client;
20. a server;
71. a display module;
72. a mobile module;
73. a matching module;
74. modifying the module;
802. a computer device;
804. a processor;
806. a memory;
808. a driving mechanism;
810. an input/output interface;
812. an input device;
814. an output device;
816. a presentation device;
818. a graphical user interface;
820. a network interface;
822. a communication link;
824. a communication bus.
Detailed Description
In order to make the technical solutions in the present specification better understood by those skilled in the art, the technical solutions in the embodiments of the present specification will be clearly and completely described below with reference to the drawings in the embodiments of the present specification, and it is obvious that the described embodiments are only some embodiments of the present specification, not all embodiments. All other embodiments, which can be made by one of ordinary skill in the art without undue burden from the present disclosure, are intended to be within the scope of the present disclosure.
The embodiment of the specification relates to a technology for generating design manuscripts based on page reversals in the development process of front-end pages (hereinafter referred to as pages) so as to improve the page reduction walking efficiency in the development process of the front-end pages. For ease of understanding, prior to describing embodiments of the present specification, related concepts of the embodiments of the present specification are described.
In embodiments of the present disclosure, a page may include an ordered set of technical components (hereinafter referred to as a technical component library) formed by combining and nesting one or more technical components. Each technical component in the technical component library is a User Interface (UI) element + component code (logical code block); the UI element may refer to a DIV block element (i.e., layer element); the logical code blocks may refer to layer data codes (e.g., may contain HTML, CSS, javascript code, etc.). For example, a menu bar in a web page may be packaged as a technical component that is used by encapsulating the same UI element and logical code block, configuring different API attribute values. The technical components may be reused, combined and nested as needed for building pages. Pages may be developed by front-end developers based on design manuscripts.
In the embodiment of the present specification, a design draft refers to a page design draft, and the design draft may include an ordered set of design components (hereinafter referred to as a design component library) formed of one or more design components. Each design component in the library of design components may be a DIV block element. In some embodiments of the present disclosure, a library of design components may include patterns of different design components in different states, where each state design component may be ordered according to business, function, and/or attribute. The design components can also be reused and disassembled and reassembled in different ways. The design script may be drawn by a designer based on a UI design tool (e.g., sktech, figma, etc.) or other tool.
For example, a button is drawn in the design draft, in the design component library, the corresponding design component is a button layer formed by adding text to a rectangle, and in the technical component library, the component codes of the corresponding technical component are as follows: < Button width= "100px" height= "30px" backgroup color= "#000" > Button, technical component of Button exposes three configurable properties to the outside: wide, high, background color.
Referring to fig. 1, in some embodiments of the present disclosure, a plug-in of a UI design tool may be developed in advance and installed or configured into the UI design tool, where the plug-in may introduce a technical component library and a design component library corresponding to a page; after the UI design tool is started, the plug-in can display a design component library corresponding to the target page on a plug-in interface of the UI design tool; when a first operation event of a target design component in the design component library is detected, the target design component is moved to a drawing board interface of the UI design tool; matching a target technical component corresponding to the target design component from a technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component; and correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component, and displaying the modified target design component, thereby realizing the automatic generation of the design draft based on page reversal.
FIG. 2 illustrates an application environment diagram for generating design manuscripts based on page reverse in some embodiments of the present description; the application environment includes a client 10 and a server 20. The server 20 may be a server of a UI design tool in which the above plug-ins are installed or configured; the client 10 provides an interactive interface between the user and the server 20, for example, may display a design component library corresponding to a target page provided by the server 20, and initiate an operation instruction corresponding to a first operation event to the server 20.
In some embodiments of the present disclosure, the client 10 may be a display, a desktop computer, a tablet computer, a notebook computer, a mobile terminal (i.e., a smart phone), a smart wearable device, or the like. Wherein the smart wearable device may include smart glasses or smart helmets, etc. Of course, the client 10 is not limited to the electronic device with a certain entity, and may be software running in the electronic device. The server 20 may be an electronic device with operation and network interaction functions; software running in the electronic device that provides business logic for data processing and network interactions may also be used.
The embodiment of the present disclosure provides a method for generating a design draft based on page reversal, which may be applied to the server side (i.e., the plug-in of the server side), as shown in fig. 3, and in some embodiments of the present disclosure, the method for generating a design draft based on page reversal may include the following steps:
step 301, displaying a design component library corresponding to the target page on a plug-in interface of the UI design tool. Each design component in the library of design components is a DIV block element pre-configured with a first operational event.
And 302, when a first operation event of a target design component in the design component library is detected, the target design component is moved to a drawing board interface of the UI design tool.
Step 303, matching a target technical component corresponding to the target design component from a technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component.
And step 304, correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component, and displaying the modified target design component.
In the embodiment of the specification, after a front-end developer develops a corresponding page based on a design draft, a design component library corresponding to the page can be displayed on a plug-in interface of a UI design tool, based on specific operation of a user on the design component library, a corresponding design component can be moved to a drawing board interface of the UI design tool, a corresponding technical component is matched from a technical component library corresponding to the page, the attribute value of the design component is modified according to the attribute value of the technical component, and then the modified design component is re-rendered in the drawing board interface; when the page corresponds to a plurality of design components, the attribute modification and rendering of all the design components corresponding to the page can be completed by repeating the steps, so that the design draft can be automatically generated based on the page reversal; therefore, a designer can directly conduct reduction degree walking on the design manuscript generated automatically based on page reverse, and compared with a page, the designer is more familiar with the design manuscript, so that the page reduction degree walking efficiency in front-end page development can be improved, and the page reduction degree walking cost is reduced.
In the embodiment of the specification, the plug-in interface is a visual interaction interface of a plug-in, and the drawing board interface is a main visual user interface of the UI design tool, and the drawing board interface can be seen by opening the UI design tool.
Referring to fig. 4, in some embodiments of the present disclosure, displaying, on a plug-in interface of a UI design tool, a design component library corresponding to a target page may include the following steps:
and step 401, reading a design component library corresponding to the target page after the UI design tool is started.
In the embodiment of the present specification, the target page is the page that needs to be checked for the page reduction degree currently. Taking sktech as an example in an exemplary embodiment, after sktech starts, the library of design components may be read by a method that invokes the library. It should be understood that, in the embodiment of the present specification, the subsequent processing (including parsing, modifying the attribute, rendering, etc.) of the design component by the plug-in may also call the implementation of the Sketch related API, which will not be described in detail.
In some embodiments of the present disclosure, the design component library corresponding to the target page may refer to a set formed by all design components included in the target page. In other embodiments of the present disclosure, the design component library corresponding to the target page may also refer to a generic design component template library of the UI design tool.
Step 402, parsing out one or more design components from the library of design components.
Design component library data may be obtained by parsing, including design component names, design component IDs, design component thumbnails, and the like.
The technical component library corresponding to the target page may refer to a set formed by all design components contained in the target page.
And 403, displaying the parsed design components in a thumbnail form on a plug-in interface of the UI design tool.
By rendering this data into a visualization page and presenting it in thumbnail form (i.e., each design component is rendered in thumbnail plus text in one DIV block element) it is convenient for the designer to view and select.
In some embodiments of the present description, the first operation event may refer to a drag operation of the target design component from the plug-in interface to the palette interface. Correspondingly, each design component needs to be preconfigured with a drag event so that when a user drags the design component, a corresponding response action can be made. In the traditional technology, if a designer wants to reversely generate a design draft from a page and walks under the reversely generated design draft, the designer needs to move the corresponding layer element to a drawing board interface through copy and paste operations from a technical assembly of the page, so that the efficiency is low; in some embodiments of the present disclosure, the drawing board interface may be moved by drag operation, and thus a series of actions for automatically generating the design draft may be triggered, which is more convenient and efficient, and has a higher degree of automation.
Referring to fig. 5, in some embodiments of the present disclosure, modifying the attribute values of the target design component according to the attribute value correspondence of the target technology component may include the steps of:
step 501, reading attribute values of the target technology component.
In some embodiments of the present description, attributes of a technical or design component may include, but are not limited to, configurable attributes of size, layout, background color, etc.
Step 502, adding the attribute value of the target technical component to the design component name of the target design component in the form of a key value pair.
By adding the attribute value of the target technical component to the design component name of the target design component in the form of key/value pair (key/value), a designer can conveniently and quickly know whether the corresponding attribute value meets the expected requirement or not during walking, and the attribute value modification can be conveniently and automatically carried out subsequently.
And step 503, correspondingly modifying the attribute value of the target design component according to the attribute value recorded in the name of the design component.
I.e., modifying the attribute values of the target design component based on the attribute values recorded in the design component name.
The embodiment of the present disclosure also provides another method for generating a design draft based on page reverse, which may be applied to the server side (i.e., the plug-in of the server side), as shown in fig. 6, and in some embodiments of the present disclosure, the method for generating a design draft based on page reverse may include the following steps:
and 601, displaying a design component library corresponding to the target page on a plug-in interface of the UI design tool.
And 602, when a first operation event of a target design component in the design component library is detected, moving the target design component to a drawing board interface of the UI design tool.
Step 603, matching a target technical component corresponding to the target design component from a technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component.
Step 604, correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component, and displaying the modified target design component.
Step 605, when a second operation event is detected for the modified target design component, displaying an attribute operation interface of the modified target design component.
Step 606, correspondingly correcting the attribute value of the modified target design component according to the externally input attribute value.
In the embodiment of the present disclosure, the externally input attribute value may be an attribute value input by a designer in the attribute configuration panel corresponding to the attribute configuration item.
Step 607, marking the modified target design component, so that the page developer adjusts the corresponding technical component accordingly.
In some embodiments of the present disclosure, any form of labeling may be performed on the modified target design component, so as to remind the page developer to adjust the corresponding technical component accordingly, and solve the problems that the design draft cannot correspond to the design component library, and the number is missed and misprinted.
Unlike the method for generating design manuscripts based on page reverse shown in fig. 3, in consideration of possible deviation between the developed page and the design manuscripts, in order to facilitate correction and reminding when a problem is found, each design component of the design component library may be further configured with a second operation event (such as a click event) in advance, and the event callback may call up a corresponding attribute configuration panel and render according to the click design component, so as to facilitate the configuration of related attributes by a designer; the attributes of different design components are displayed and configured in the attribute configuration panel in a Key/Value mode, and after the attributes are modified or configured, the currently configured attributes can be saved by clicking a save button, namely, the attribute values of the design components are changed according to the configured attributes.
While the process flows described above include a plurality of operations occurring in a particular order, it should be apparent that the processes may include more or fewer operations, which may be performed sequentially or in parallel (e.g., using a parallel processor or a multi-threaded environment).
Corresponding to the method for generating the design manuscript based on the page reverse direction, the embodiment of the present disclosure further provides an apparatus for generating the design manuscript based on the page reverse direction, as shown in fig. 7, in some embodiments of the present disclosure, the apparatus for generating the design manuscript based on the page reverse direction may include:
the display module 71 is configured to display, on a plug-in interface of the UI design tool, a design component library corresponding to the target page;
a moving module 72, configured to move the target design component to a drawing board interface of the UI design tool when a first operation event for the target design component in the design component library is detected;
a matching module 73, configured to match a target technical component corresponding to the target design component from a technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component;
and a modification module 74, configured to correspondingly modify the attribute value of the target design component according to the attribute value of the target technology component, and display the modified target design component.
After a front-end developer develops a corresponding page based on a design draft, the device for generating the design draft based on the page reversely can display a design component library corresponding to the page on a plug-in interface of a UI design tool, can move the corresponding design component to a drawing board interface of the UI design tool based on specific operation of a user on the design component library, matches the corresponding technical component from a technical component library corresponding to the page, modifies the attribute value of the design component according to the attribute value of the technical component, and re-renders the modified design component in the drawing board interface; when the page corresponds to a plurality of design components, the attribute modification and rendering of all the design components corresponding to the page can be completed by repeating the steps, so that the design draft can be automatically generated based on the page reversal; therefore, a designer can directly conduct reduction degree walking on the design manuscript generated automatically based on page reverse, and compared with a page, the designer is more familiar with the design manuscript, so that the page reduction degree walking efficiency in front-end page development can be improved, and the page reduction degree walking cost is reduced.
In some embodiments of the present disclosure, a device for generating a design draft based on page reversal, displaying a design component library corresponding to a target page on a plug-in interface of a UI design tool, includes:
reading a design component library corresponding to the target page after the UI design tool is started;
parsing one or more design components from the library of design components;
and displaying the parsed design components in a thumbnail form on a plug-in interface of the UI design tool.
In the apparatus for generating a design draft based on page reversing according to some embodiments of the present specification, the first operation event includes: and dragging the target design component from the plug-in interface to the drawing board interface.
In the method for generating the design manuscript based on the page reverse direction according to the embodiment of the present disclosure, correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component includes:
reading attribute values of the target technical components;
adding the attribute value of the target technical component to the design component name of the target design component in the form of a key value pair;
and correspondingly modifying the attribute value of the target design component according to the attribute value recorded in the design component name.
The device for generating design manuscripts based on page reversing in some embodiments of the present specification further comprises:
the second display module is used for displaying an attribute operation interface of the modified target design component when detecting a second operation event of the modified target design component;
the second display module is used for correspondingly correcting the attribute value of the modified target design component according to the externally input attribute value;
the marking module is used for marking the corrected target design component so that the page developer can adjust the corresponding technical component according to the marking module.
In the apparatus for generating a design draft based on page reversing according to some embodiments of the present specification, the second operation event includes: click events.
For convenience of description, the above devices are described as being functionally divided into various units, respectively. Of course, the functions of each element may be implemented in one or more software and/or hardware elements when implemented in the present specification.
In the embodiments of the present disclosure, the user information (including, but not limited to, user device information, user personal information, etc.) and the data (including, but not limited to, data for analysis, stored data, presented data, etc.) are information and data that are authorized by the user and are sufficiently authorized by each party.
Embodiments of the present description also provide a computer device. As shown in fig. 8, in some embodiments of the present description, the computer device 802 may include one or more processors 804, such as one or more Central Processing Units (CPUs) or Graphics Processors (GPUs), each of which may implement one or more hardware threads. The computer device 802 may also include any memory 806 for storing any kind of information, such as code, settings, data, etc., and in a particular embodiment, a computer program on the memory 806 and executable on the processor 804, which when executed by the processor 804, may perform the instructions of the page-reversing-based design draft method described in any of the embodiments above. For example, and without limitation, memory 806 may include any one or more of the following combinations: any type of RAM, any type of ROM, flash memory devices, hard disks, optical disks, etc. More generally, any memory may store information using any technique. Further, any memory may provide volatile or non-volatile retention of information. Further, any memory may represent fixed or removable components of computer device 802. In one case, the computer device 802 may perform any of the operations of the associated instructions when the processor 804 executes the associated instructions stored in any memory or combination of memories. The computer device 802 also includes one or more drive mechanisms 808, such as a hard disk drive mechanism, an optical disk drive mechanism, and the like, for interacting with any memory.
The computer device 802 may also include an input/output interface 810 (I/O) for receiving various inputs (via an input device 812) and for providing various outputs (via an output device 814). One particular output mechanism may include a presentation device 816 and an associated graphical user interface 818 (GUI). In other embodiments, input/output interface 810 (I/O), input device 812, and output device 814 may not be included, but merely as a computer device in a network. The computer device 802 may also include one or more network interfaces 820 for exchanging data with other devices via one or more communication links 822. One or more communications buses 824 couple the above-described components together.
The communication link 822 may be implemented in any manner, such as, for example, through a local area network, a wide area network (e.g., the internet), a point-to-point connection, etc., or any combination thereof. Communication link 822 may include any combination of hardwired links, wireless links, routers, gateway functions, name servers, etc., governed by any protocol or combination of protocols.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), computer-readable storage media, and computer program products according to some embodiments of the specification. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processor to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processor, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processor to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processor to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In a typical configuration, a computer device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include volatile memory in a computer-readable medium, random Access Memory (RAM) and/or nonvolatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of computer-readable media.
Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Disks (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computer device. Computer readable media, as defined in the specification, does not include transitory computer readable media (transmission media), such as modulated data signals and carrier waves.
It will be appreciated by those skilled in the art that embodiments of the present description may be provided as a method, system, or computer program product. Accordingly, the present specification embodiments may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present description embodiments may take the form of a computer program product on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.
The present embodiments may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The embodiments of the specification may also be practiced in distributed computing environments where tasks are performed by remote processors that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
It should also be understood that, in the embodiments of the present specification, the term "and/or" is merely one association relationship describing the association object, meaning that three relationships may exist. For example, a and/or B may represent: a exists alone, A and B exist together, and B exists alone. In addition, the character "/" herein generally indicates that the front and rear associated objects are an "or" relationship.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for system embodiments, since they are substantially similar to method embodiments, the description is relatively simple, as relevant to see a section of the description of method embodiments.
In the description of the present specification, a description referring to terms "one embodiment," "some embodiments," "examples," "specific examples," or "some examples," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the embodiments of the present specification. In this specification, schematic representations of the above terms are not necessarily directed to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, the different embodiments or examples described in this specification and the features of the different embodiments or examples may be combined and combined by those skilled in the art without contradiction.
The foregoing is merely exemplary of the present application and is not intended to limit the present application. Various modifications and changes may be made to the present application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc. which are within the spirit and principles of the present application are intended to be included within the scope of the claims of the present application.
Claims (10)
1. A method for generating a design draft based on page reversal, comprising:
displaying a design component library corresponding to the target page on a plug-in interface of the UI design tool;
when a first operation event of a target design component in the design component library is detected, the target design component is moved to a drawing board interface of the UI design tool;
matching a target technical component corresponding to the target design component from a technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component;
and correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component, and displaying the modified target design component.
2. The method for generating a design draft based on page reversal according to claim 1, wherein the displaying the design component library corresponding to the target page on the plug-in interface of the UI design tool includes:
reading a design component library corresponding to the target page after the UI design tool is started;
parsing one or more design components from the library of design components;
and displaying the parsed design components in a thumbnail form on a plug-in interface of the UI design tool.
3. The method for generating a design draft based on a page reverse direction according to claim 1, wherein said first operation event includes: and dragging the target design component from the plug-in interface to the drawing board interface.
4. The method for generating a design script based on page reversing of claim 1, wherein modifying the attribute value of the target design component according to the attribute value correspondence of the target technology component comprises:
reading attribute values of the target technical components;
adding the attribute value of the target technical component to the design component name of the target design component in the form of a key value pair;
and correspondingly modifying the attribute value of the target design component according to the attribute value recorded in the design component name.
5. The method for generating a design draft based on page reversing of claim 4, wherein each DIV block element is further preconfigured with a second operation event; after rendering the modified target design component, further comprising:
when a second operation event of the modified target design component is detected, displaying an attribute operation interface of the modified target design component;
correspondingly correcting the attribute value of the modified target design component according to the externally input attribute value;
and marking the corrected target design component so that the page developer can adjust the corresponding technical component according to the marking.
6. The method for generating a design draft based on a page reverse direction according to claim 5, wherein said second operation event includes: click events.
7. An apparatus for generating a design draft based on page reversal, comprising:
the display module is used for displaying a design component library corresponding to the target page on a plug-in interface of the UI design tool;
the moving module is used for moving the target design component to a drawing board interface of the UI design tool when a first operation event of the target design component in the design component library is detected;
the matching module is used for matching the target technical component corresponding to the target design component from the technical component library corresponding to the target page; each technical group in the technical component library is a component code segment of a corresponding design component;
and the modification module is used for correspondingly modifying the attribute value of the target design component according to the attribute value of the target technical component and displaying the modified target design component.
8. A computer device comprising a memory, a processor, and a computer program stored on the memory, characterized in that the computer program, when being executed by the processor, performs the instructions of the method according to any of claims 1-6.
9. A computer storage medium having stored thereon a computer program, which, when executed by a processor of a computer device, performs the instructions of the method according to any of claims 1-6.
10. A computer program product, characterized in that the computer program product comprises a computer program which, when being executed by a processor of a computer device, carries out the instructions of the method according to any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311798908.7A CN117707495A (en) | 2023-12-25 | 2023-12-25 | Method, device, equipment and storage medium for generating design manuscript based on page reverse direction |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311798908.7A CN117707495A (en) | 2023-12-25 | 2023-12-25 | Method, device, equipment and storage medium for generating design manuscript based on page reverse direction |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117707495A true CN117707495A (en) | 2024-03-15 |
Family
ID=90153180
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311798908.7A Pending CN117707495A (en) | 2023-12-25 | 2023-12-25 | Method, device, equipment and storage medium for generating design manuscript based on page reverse direction |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117707495A (en) |
-
2023
- 2023-12-25 CN CN202311798908.7A patent/CN117707495A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8555186B2 (en) | Interactive thumbnails for transferring content among electronic documents | |
| US10572581B2 (en) | System and method for web content presentation management | |
| US10331765B2 (en) | Methods and apparatus for translating forms to native mobile applications | |
| US11797273B2 (en) | System and method for enhancing component based development models with auto-wiring | |
| US8296673B2 (en) | Collapsible tabbed user interface | |
| US10614155B2 (en) | Single page application authoring in a content management system | |
| US20070222783A1 (en) | Declarative definition enabling graphical designer reuse | |
| US8767020B1 (en) | Content representation sharing across applications | |
| US11030385B2 (en) | Enhanced preview technology for application add-ins | |
| CN104704468A (en) | Cross system installation of WEB applications | |
| CN113032708A (en) | Code-free Web development system | |
| WO2013109858A1 (en) | Design canvas | |
| CN113196275A (en) | Network-based collaborative ink writing via computer network | |
| CN114168238A (en) | Method, system, and computer-readable storage medium implemented by a computing device | |
| CN115935925A (en) | Form adapting method, electronic device and computer readable storage medium | |
| US10896161B2 (en) | Integrated computing environment for managing and presenting design iterations | |
| CN117707495A (en) | Method, device, equipment and storage medium for generating design manuscript based on page reverse direction | |
| US11662874B2 (en) | Method and system for transforming wireframes to as-is screens with responsive behaviour | |
| US20100218122A1 (en) | Asynchronously uploading and resizing content in web-based applications | |
| US12124820B1 (en) | Grid layout setting method for multi device responsive page and computer-readable medium for performing the same | |
| JP7536248B1 (en) | Method and program for setting grid layout for responsive pages for multiple devices | |
| CN116595284B (en) | Webpage system operation method, device, equipment, storage medium and program | |
| US20240126577A1 (en) | Visualization of application capabilities | |
| US11526366B2 (en) | Dynamically binding data in an application | |
| CN112380281B (en) | Platform layer code generation method and device, electronic equipment and storage medium |
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 |