CN114594936A

CN114594936A - Page design method and device, storage medium and computer equipment

Info

Publication number: CN114594936A
Application number: CN202111622635.1A
Authority: CN
Inventors: 曾国栋; 闫嘉璞
Original assignee: Yuanguang Software Co Ltd
Current assignee: Yuanguang Software Co Ltd
Priority date: 2021-12-28
Filing date: 2021-12-28
Publication date: 2022-06-07

Abstract

The embodiment of the application discloses a method and a device for designing a page, a storage medium and computer equipment, and relates to the field of interface design. The method of the present application comprises: drawing interface elements of a page in a design canvas; selecting one or more interface elements from the drawn interface elements to add a guide mark; traversing all interface elements added with guide marks in the design canvas, and generating an interface element list according to the traversed interface elements; selecting an interface element from the interface element list; selecting one or more model fields in the data model, and binding the selected model fields and the selected interface elements; the method and the device have the advantages that the values of the selected model fields are read in the data instance, the values are displayed in the selected interface elements, the page elements can be flexibly configured under the condition that codes of the page elements are not modified, the difficulty of page design is reduced, and the design efficiency is improved.

Description

Page design method and device, storage medium and computer equipment

Technical Field

The present application relates to the field of interface design, and in particular, to a method and an apparatus for designing a page, a storage medium, and a computer device.

Background

UI designers, when designing front-end pages, typically design pages that contain multiple elements for presenting data (e.g., reports, bills, etc.). If the structure of the element is updated, the UI designer needs to modify the code of the component correspondingly, the UI designer generally does not have programming capability, and the modification mode has the problems of complex operation and low efficiency.

Disclosure of Invention

The application provides a design method and device of a page, a storage medium and computer equipment, which can solve the problems of complex operation and low efficiency in the prior art of modifying elements in the page. The technical scheme is as follows:

in a first aspect, the present application provides a method for designing a page, where the method includes:

drawing interface elements of a page in a design canvas;

selecting one or more interface elements from the drawn interface elements to add a guide mark;

when a guide instruction is received, traversing all interface elements added with guide marks in the design canvas, and generating an interface element list according to the traversed interface elements;

selecting an interface element from the list of interface elements;

selecting one or more model fields in the data model, and binding the selected model fields and the selected interface elements;

and when a page preview instruction is received, reading the value of the selected model field in a data instance, and displaying the value in the selected interface element.

In a second aspect, the present application provides an apparatus for designing a page, the apparatus comprising:

the drawing unit is used for drawing interface elements of the page in the design canvas;

an adding unit, configured to select one or more interface element adding guide marks from the rendered interface elements;

the generating unit is used for traversing all interface elements added with the guide marks in the design canvas when receiving a guide instruction, and generating an interface element list according to the traversed interface elements;

the selection unit is used for selecting one interface element in the interface element list;

the binding unit is used for selecting one or more model fields in the data model and binding the selected model fields and the selected interface elements;

and the preview unit is used for reading the value of the selected model field in a data instance and displaying the value in the selected interface element when a page preview instruction is received.

In a third aspect, the present application provides a computer storage medium having stored thereon a plurality of instructions adapted to be loaded by a processor and to carry out the above-mentioned method steps.

In a fourth aspect, the present application provides a computer device, which may include: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and to perform the above-mentioned method steps.

The beneficial effects brought by the technical scheme provided by some embodiments of the application at least comprise:

when a designer needs to design a page, the data model bound by the page is determined, then one or more model fields are selected from the data model configured for the interface elements based on a guide instruction for binding, and when the page is displayed, the numerical values of the model fields are read and displayed in the interface elements, so that the model fields and the numerical values of the interface elements can be flexibly configured according to the actual requirements of the page, the codes of the page elements do not need to be modified, the difficulty of page design can be reduced, and the design efficiency can be improved.

Drawings

In order to more clearly illustrate the technical solutions in the present application or the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly described 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 based on these drawings without creative efforts.

FIG. 1 is a schematic flow chart diagram of a page design method provided in the present application;

FIG. 2 is a schematic diagram of a wizard interface provided by the present application;

FIG. 3 is a schematic illustration of a configuration interface of the data model provided herein;

FIG. 4 is a schematic diagram of a binding interface of the data model provided herein;

FIG. 5 is a schematic illustration of a preview of a page provided herein;

FIG. 6 is a schematic structural diagram of a page design device provided in the present application;

fig. 7 is a schematic structural diagram of a computer device provided in the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more clear, embodiments of the present application will be described in further detail below with reference to the accompanying drawings.

It should be noted that, the method for designing a page provided in the present application is generally executed by a computer device, and accordingly, the apparatus for designing a page is generally disposed in the computer device.

When the computer equipment is hardware, the computer equipment can also be provided with display equipment and a camera, the display equipment can display various equipment capable of realizing the display function, and the camera is used for collecting video streams; for example: the display device may be a cathode ray tube (CR) display, a light-emitting diode (LED) display, an electronic ink panel, a Liquid Crystal Display (LCD), a Plasma Display Panel (PDP), or the like. A user may utilize a display device on a computer device to view information such as displayed text, pictures, videos, and the like.

The method for designing the page provided by the embodiment of the present application will be described in detail below with reference to fig. 1. The page design apparatus in the embodiment of the present application may be a computer device shown in fig. 1.

Referring to fig. 1, a schematic flow chart of a page design method is provided in an embodiment of the present application. As shown in fig. 1, the method of the embodiment of the present application may include the steps of:

and S101, drawing interface elements of the page in the design canvas.

When a user needs to design a page, a webpage editing interface is displayed through a display unit, the webpage editing interface comprises a design canvas, the user draws page elements on the design canvas through input devices such as a mouse and a keyboard, and the page elements are controls which can be displayed on the page and include, but are not limited to, cells, tables, buttons or other controls. The user may place interface elements in the design canvas and set the locations of the interface elements.

In one or more possible embodiments, the computer device provides a component library, the component library includes a plurality of different types of components, and the user may also edit attributes of the components in the component library and drag selected components in the component library into the design canvas through a drag instruction. For example: the component library comprises the tables, after the number of rows and the number of columns of the tables are set by a user, the tables are dragged to the designated positions of the design canvas through the dragging instruction triggered by the mouse, the interface elements are dragged to the design canvas from the component library through dragging operation, the drawing of the interface elements is realized, and the page drawing efficiency can be improved.

And S102, selecting one or more interface elements from the drawn interface elements to add guide marks.

The guide mark is used for marking the interface elements needing data binding, and the user can add the guide mark to the selected interface elements in a foreground or background mode.

In one or more possible embodiments, a user may select one or more interface elements in a design canvas in a manner of performing frame selection by using a mouse, a frame selection instruction is generated based on the frame selection operation of the mouse, the interface elements in the frame are the selected interface elements, the computer device automatically adds a guide mark to the selected interface elements, and the efficiency of operation can be improved by adding the guide mark in a frame selection manner.

S103, when a guide instruction is received, traversing all interface elements added with guide marks in the design canvas, and generating an interface element list according to the traversed interface elements.

The guidance instruction may be triggered by a user based on an input device such as a mouse or a keyboard, for example: the design method comprises the steps that a guide button is arranged in a design canvas, a user clicks the guide button through a mouse to generate a guide instruction, the computer equipment traverses all interface elements added with guide marks in the design canvas based on the guide instruction, and an interface element list is generated according to the traversed interface elements.

For example, referring to the schematic diagram of the wizard interface shown in fig. 2, the interface element list generated after traversing the design canvas includes 11 interface elements, which are: form 8767 — Main Table area. 11 interface elements are displayed at the top of the wizard interface.

And S104, selecting one interface element from the interface element list.

Wherein, the user can select one interface element in the interface element list through the mouse.

For example, referring to the schematic diagram of the wizard interface shown in fig. 2, the user selects the 1 st interface element in the list of interface elements by mouse: and a form 8767 in which the selected interface element is highlighted to distinguish other interface elements that are not selected.

And S105, selecting one or more model fields in the data model, and binding the selected model fields and the selected interface elements.

The computer device presets and stores a mapping relation among pages, data models and data instances, and obtains the data models related to the pages according to the mapping relation, wherein the data models comprise a plurality of model fields, and the model fields are determined by data items related to page elements. The user selects one or more model fields from the data model according to the design requirements of the current page, and then binds the selected model fields with the selected interface elements.

Further, the computer equipment adjusts the layout mode of the selected model field based on the editing instruction of the user; and/or deleting one or more of the selected model fields.

For example, referring to the schematic diagram of the wizard interface shown in fig. 2, where the selected interface element is a form 8767, the computer device obtains a plurality of model fields contained in the model data in the wizard interface: in the new item 1, the new item 2, …, and the new item 6, check boxes are provided in front of each model field, and when a user checks a certain model field with a mouse, a check box of the model field displays √ while the selected model field is guided into the interaction area on the right side. The interactive area comprises a deleting control, an upward moving control, a downward moving control, a top placing control and a bottom placing control, wherein the deleting control is used for deleting the existing model fields in the interactive area, and the upward moving control, the downward moving control, the top placing control and the bottom placing control are all used for adjusting the positions of the model fields in the interactive area.

In one or more possible embodiments, before S101, the method further includes:

setting a plurality of model fields and data instances included in a data model; wherein the data instance comprises the plurality of model fields and values of each model field;

and binding the data model, the data instance and the page.

For example, referring to the configuration interface of the data model shown in fig. 3, a user may configure a plurality of model fields (i.e., item titles) of the data model at the configuration interface, the plurality of model fields including: new item 1 to new item 11, and in addition, the item name, item type, and inputter type and inputter setting of each model field may be configured. Meanwhile, a data instance is set, and the data instance comprises a plurality of model fields and specific values, such as: including the values of new item 1 to new item 11.

Referring to the binding interface of the data model shown in fig. 4, a user selects a data model to bind with a page through the binding interface.

And S106, when a page preview instruction is received, reading the value of the selected model field in the data instance, and displaying the value in the selected interface element.

Wherein, the user triggers a page preview instruction through an input device, for example: the design canvas is provided with a preview button, a page preview instruction is generated after the preview button is clicked by a mouse, the value of the selected model field is read in the data example, and the value is displayed in the selected page element. Further, the values of the data instance are derived from a database, a data file, or user input, such as: the database is an SQL database, and the data file is an excel file or a word file and the like.

For example, referring to the preview diagram of the page shown in fig. 5, items 1 to 6 are selected model fields in the data model, the interface element bound between item 1 and item 6 is a cell, the interface element table includes items 6 to 13, and the values of items 6 to 13 are shown in fig. 5.

Further, receiving a page export instruction, and exporting a page file based on the page elements in the design canvas; the page file comprises page codes of all the page elements and interface codes of the data instances. The format of the page file can be json format or html format, and the interface code is used for representing the interface address of the data source (i.e. data instance), such as: the interface code is an API call instruction. When the interface elements on the page file are rendered, the numerical values are acquired from the data examples according to the interface codes and displayed in the interface elements, so that the coupling between the data source and the page can be reduced, and the data in the page elements can be maintained at a later stage conveniently.

According to the embodiment of the application, when a designer needs to design a page, the data model bound by the page is determined, then one or more model fields are selected from the data model configured for the interface elements based on the guide instruction to be bound, when the page is displayed, the numerical value of the model field is read and displayed in the interface elements, so that the model field and the numerical value of each interface element can be flexibly configured according to the actual requirement of the page, the code of the page element does not need to be modified, the difficulty of page design can be reduced, and the design efficiency can be improved.

The following are embodiments of the apparatus of the present application that may be used to perform embodiments of the method of the present application. For details which are not disclosed in the embodiments of the apparatus of the present application, reference is made to the embodiments of the method of the present application.

Referring to fig. 6, a schematic structural diagram of a page design apparatus provided in an exemplary embodiment of the present application is shown, which is hereinafter referred to as an apparatus 6. The apparatus 6 may be implemented as all or part of a computer device in software, hardware or a combination of both. The device 6 comprises: a drawing unit 601, an adding unit 602, a generating unit 603, a selecting unit 604, a binding unit 605, and a preview unit 606.

A drawing unit 601, configured to draw an interface element of a page in a design canvas;

an adding unit 602, configured to select one or more interface element adding guide marks from the rendered interface elements;

a generating unit 603, configured to traverse all interface elements added with a guidance mark in the design canvas when receiving a guidance instruction, and generate an interface element list according to the traversed interface elements;

a selecting unit 604, configured to select an interface element in the interface element list;

a binding unit 605, configured to select one or more model fields in the data model, and bind the selected model fields and the selected interface elements;

and a preview unit 606, configured to, when a page preview instruction is received, read a value of the selected model field in a data instance, and display the value in the selected interface element.

In one or more possible embodiments, the binding the selected model field and the selected interface element further includes:

adjusting the layout mode of the selected model field based on an editing instruction of a user; and/or deleting one or more of the selected model fields.

In one or more possible embodiments, the binding unit 605 is further configured to:

setting a plurality of model fields and data instances included by a data model; wherein the data instance comprises the plurality of model fields and values of each model field;

and binding the data model, the data instance and the page.

In one or more possible embodiments, the drawing the interface element of the page in the design canvas includes:

displaying a design canvas;

one or more interface elements are dragged from the component library based on a drag instruction of a user to be placed in the design canvas.

In one or more possible embodiments, the values of the data instances are derived from a database, a data file, or user input.

In one or more possible embodiments, the method further comprises:

the exporting unit is used for receiving a page exporting instruction and exporting a page file based on the page elements in the design canvas; wherein the page file includes page codes of the respective page elements and interface codes of the data instances.

In one or more possible embodiments, the selecting one or more interface elements among the rendered interface elements adds a guide mark, including:

selecting one or more interface elements in the design canvas based on a user's box selection instruction, and adding wizard markup for the one or more interface elements.

It should be noted that, when the device 6 provided in the foregoing embodiment executes a page design method, only the division of the functional modules is illustrated, and in practical applications, the above functions may be distributed and completed by different functional modules according to needs, that is, the internal structure of the apparatus is divided into different functional modules, so as to complete all or part of the functions described above. In addition, the page design apparatus provided in the above embodiments and the page design method embodiments belong to the same concept, and details of implementation processes thereof are referred to in the method embodiments and are not described herein again.

The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.

An embodiment of the present application further provides a computer storage medium, where multiple instructions may be stored in the computer storage medium, where the instructions are suitable for being loaded by a processor and for executing the method steps in the embodiment shown in fig. 1, and a specific execution process may refer to a specific description of the embodiment shown in fig. 1, which is not described herein again.

The present application further provides a computer program product storing at least one instruction, which is loaded and executed by the processor to implement the design method of the page as described in the above embodiments.

Referring to fig. 7, a schematic structural diagram of a computer device is provided in an embodiment of the present application. As shown in fig. 7, the computer device 700 may include: at least one processor 701, at least one network interface 704, a user interface 703, a memory 705, at least one communication bus 702.

Wherein a communication bus 702 is used to enable connective communication between these components.

The user interface 703 may include a Display screen (Display) and a Camera (Camera), and the optional user interface 703 may also include a standard wired interface and a standard wireless interface.

The network interface 704 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface), among others.

Processor 701 may include one or more processing cores, among other things. The processor 701 connects various parts within the overall terminal 700 using various interfaces and lines, and performs various functions of the terminal 700 and processes data by executing or executing instructions, programs, code sets, or instruction sets stored in the memory 705, as well as calling data stored in the memory 705. Optionally, the processor 701 may be implemented in at least one hardware form of Digital Signal Processing (DSP), Field-Programmable gate Array (FPGA), and Programmable Logic Array (PLA). The processor 701 may integrate one or a combination of a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), a modem, and the like. Wherein, the CPU mainly processes an operating system, a user interface, an application program and the like; the GPU is used for rendering and drawing the content required to be displayed by the display screen; the modem is used to handle wireless communications. It is understood that the modem may not be integrated into the processor 701, and may be implemented by a single chip.

The Memory 705 may include a Random Access Memory (RAM) or a Read-Only Memory (Read-Only Memory). Optionally, the memory 705 includes a non-transitory computer-readable medium. The memory 705 may be used to store instructions, programs, code sets or instruction sets. The memory 705 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as a touch function, a sound playing function, an image playing function, etc.), instructions for implementing the various method embodiments described above, and the like; the storage data area may store data and the like referred to in the above respective method embodiments. The memory 705 may optionally be at least one memory device located remotely from the processor 701. As shown in fig. 7, the memory 705, which is a kind of computer storage medium, may include therein an operating system, a network communication module, a user interface module, and an application program.

In the computer device 700 shown in fig. 7, the user interface 703 is mainly used as an interface for providing input for a user, and acquiring data input by the user; the processor 701 may be configured to call the application program stored in the memory 705 and specifically execute the method shown in fig. 1, and the specific process may refer to fig. 1 and is not described herein again.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program that can be stored in a computer-readable storage medium and includes processes of the embodiments of the methods described above when the computer program is executed. The storage medium may be a magnetic disk, an optical disk, a read-only memory or a random access memory.

The above disclosure is only for the purpose of illustrating the preferred embodiments of the present application and should not be construed as limiting the scope of the present application, so that the present application can be covered by the claims which follow and the equivalent variations of the claims.

Claims

1. A method for designing a page, comprising:

drawing interface elements of a page in a design canvas;

selecting an interface element from the list of interface elements;

2. The method of claim 1, wherein binding the selected model field to the selected interface element further comprises:

3. The method of claim 1 or 2, wherein prior to drawing the interface element in the design canvas, further comprising:

and binding the data model, the data instance and the page.

4. The method of claim 3, wherein drawing the interface element of the page in the design canvas comprises:

displaying a design canvas;

5. The method of claim 1, 2 or 4, wherein the value of the data instance is derived from a database, a data file, or user input.

6. The method of claim 5, further comprising:

receiving a page export instruction, and exporting a page file based on page elements in the design canvas; the page file comprises page codes of all the page elements and interface codes of the data instances.

7. The method of claim 6, wherein selecting one or more interface elements among the rendered interface elements adds a wizard markup comprising:

8. An apparatus for designing a page, comprising:

the generating unit is used for traversing all interface elements added with the guide marks in the design canvas when a guide instruction is received, and generating an interface element list according to the traversed interface elements;

the binding unit is used for selecting one or more model fields in the data model and binding the selected model fields with the selected interface elements;

9. A computer storage medium, characterized in that it stores a plurality of instructions adapted to be loaded by a processor and to carry out the method steps according to any one of claims 1 to 7.

10. A computer device, comprising: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and to perform the method steps of any of claims 1 to 7.