CN116450119B - Page layout method, page layout system, electronic device and storage medium - Google Patents
Page layout method, page layout system, electronic device and storage medium Download PDFInfo
- Publication number
- CN116450119B CN116450119B CN202310614380.7A CN202310614380A CN116450119B CN 116450119 B CN116450119 B CN 116450119B CN 202310614380 A CN202310614380 A CN 202310614380A CN 116450119 B CN116450119 B CN 116450119B
- Authority
- CN
- China
- Prior art keywords
- panel
- layout
- target
- dragging
- response
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/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/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for 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)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a page layout method, a system, electronic equipment and a storage medium, wherein an initial layout is generated by displaying a candidate layout tool in response to an operation of selecting the candidate layout and is provided with a custom layout tool, a layout editing workbench is displayed in response to an operation of confirming the initial layout, the initial layout is displayed in the layout editing workbench, the page layout editing workbench can be entered for fine adjustment change of the initial layout after the initial layout is confirmed, and the page of the initial layout is clear at a glance, so that the operation of a user is facilitated, and the efficiency of service layout is improved. According to the embodiment of the invention, the business page design can be rapidly performed by dragging or dividing the page panel, the page layout can be completed without professional knowledge such as editing codes, the layout efficiency is improved, and the user experience is further improved. The embodiment of the invention can be widely applied to the technical field of computers.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a page layout method, a system, an electronic device, and a storage medium.
Background
In the field of computer technology, to realize the layout of a business page, various attribute configurations of layout modes, such as a stream layout, a fixed width layout, an adaptive layout, a grid layout, a Flexbox layout, etc., need to be known and mastered, and these layouts have respective working principles. In addition, the existing layout mode often needs to add other containers from scratch to form a layout style, so that the efficiency is low, the complexity of a user layout process is high, and a new business page layout cannot be completed quickly.
Disclosure of Invention
In view of this, embodiments of the present invention provide a page layout method, system, electronic device, and storage medium that are efficient and easy to operate.
The embodiment of the invention provides a page layout method, which comprises the following steps: displaying a candidate layout tool, generating an initial layout in response to an operation of selecting the candidate layout; the candidate layout tools comprise at least one of a single-panel layout tool, a preset layout style tool, a custom layout tool, a local layout style tool or a shop layout style tool; in response to an operation of confirming the initial layout, displaying a layout editing workbench in which the initial layout is displayed; responding to the operation of dividing the target divided panel in the layout editing workbench, and displaying the divided panel combinations in a stop area where the target divided panel is positioned according to the dividing quantity and dividing mode; wherein the target segmentation panel is any selected panel; responding to the operation of dragging the target dragging panel in the layout editing workbench, moving the target dragging panel to a target parking area or a target response area and changing the specification parameters of the target dragging panel according to the specification parameters of the target parking area or the target response area; the target dragging panel is any selected panel.
Optionally, the display candidate layout tool generates an initial layout in response to an operation of selecting a candidate layout, including one of: in response to clicking the operation of the single-panel layout tool, displaying a layout editing workbench, and displaying a single-panel page in the layout editing workbench; wherein the single panel page comprises a main panel; or, in response to clicking the preset layout style tool, displaying the layout editing workbench, and displaying a preset layout style in the layout editing workbench; or, in response to clicking the custom layout tool, displaying an initial layout workbench; displaying the layout editing workbench in response to completion of an operation of an initial layout in the initial layout workbench, and displaying the initial layout in the layout editing workbench; or, in response to clicking the local layout style tool and selecting a local layout style, displaying the layout editing workbench and displaying the selected local layout style in the layout editing workbench; or, in response to an operation of clicking the shop layout style tool and selecting a shop layout style, displaying the layout editing workbench, and displaying the selected shop layout style in the layout editing workbench.
Optionally, the responding to clicking the custom layout tool and completing the operation of the initial layout, displaying the layout editing workbench, and displaying the initial layout in the layout editing workbench comprises: in response to clicking the operation of the custom layout tool, displaying an initial layout workbench, and displaying an initial layout preview area and an initial layout configuration tool in the initial layout workbench; displaying an initial layout preview in the initial layout preview area in response to the operation of the configuration in the initial layout configuration tool; in response to an operation of confirming an initial layout, the layout editing workbench is displayed, and the initial layout is displayed in the layout editing workbench.
Optionally, in response to the operation of dividing the target divided panel in the layout editing workbench, displaying the divided panel combination in a stop area where the target divided panel is located according to the dividing number and dividing mode, including one of the following: in response to the operation of selecting horizontal segmentation, dividing the region of a target segmentation panel into a plurality of subareas up and down according to the number of the horizontal segmentation, paving the target segmentation panel on any subarea, and newly creating a panel to be full of the rest subareas; or, in response to the operation of selecting vertical segmentation, uniformly dividing the region of the target segmentation panel into a plurality of subareas according to the number of vertical segmentation, paving the target segmentation panel on any newly segmented subarea, and newly paving the rest subareas; or, in response to an operation of selecting multi-label segmentation, when the target segmentation panel is not segmented by the multi-labels, displaying a multi-label assembly at the boundary position of the target segmentation panel, displaying n labels in the multi-label assembly, and creating a sub-region corresponding to each label; spreading the target segmentation panel on any subarea and newly building a panel to spread the rest subareas; when the target segmentation panel is segmented by the multi-label, inserting new labels with the number of n-1 into the multi-label assembly of the target segmentation panel, and generating a new panel for the subarea corresponding to the new labels; where n is the number of multi-tag divisions.
Optionally, the method further comprises: and in response to the operation of clicking the deleting panel, reallocating the space occupied by the target deleting panel to the panel in the same level with the target deleting panel.
Optionally, the responding to the operation of dragging the target dragging panel in the layout editing workbench, moving the target dragging panel to the target parking area or the target response area and changing the specification parameters of the target dragging panel according to the specification parameters of the target parking area or the target response area, including: responding to the operation of selecting the target to drag the panel, and displaying the panel to drag the interactive tool; responding to the operation of dragging the panel to drag the interactive tool, and moving the target dragging panel to a target parking area or a target response area; or, in response to an operation of dragging the label of the multi-label assembly, separating a panel corresponding to the selected label from the multi-label panels as the target dragging panel, and moving the target dragging panel to the target parking area or the target response area
Optionally, the method further comprises: in response to an operation of clicking the selection panel, displaying a first-sized interactive tool in which an input box is displayed; responding to the operation of inputting pixel unit values or percentage proportions, and adjusting the height or width of the selected panel; displaying a second-sized interactive tool in response to operation of the cursor between any two adjacent panels; and responding to the operation of dragging the cursor to the second-size interactive tool, and changing the width or the height of the panels on two sides of the second-size interactive tool along the cursor dragging direction.
The embodiment of the invention also provides a page layout system, which comprises: a first module that displays a candidate layout tool, and generates an initial layout in response to an operation of selecting a candidate layout; the candidate layout tools comprise at least one of a single-panel layout tool, a preset layout style tool, a custom layout tool, a local layout style tool or a shop layout style tool; a second module for displaying a layout editing workbench in which the initial layout is displayed in response to an operation of confirming the initial layout; a third module, configured to respond to an operation of dividing the target division panel in the layout editing workbench, and display the divided panel combination in a stop area where the target division panel is located according to the division number and the division manner; wherein the target segmentation panel is any selected panel; a fourth module for moving the target drag panel to a target parking area or a target response area and changing specification parameters of the target drag panel according to the specification parameters of the target parking area or the target response area in response to an operation of dragging the target drag panel in the layout editing workbench; the target dragging panel is any selected panel.
The embodiment of the invention also provides electronic equipment, which comprises a processor and a memory; the memory is used for storing programs; the processor executes the program to implement the method as described above.
Embodiments of the present invention also provide a computer-readable storage medium storing a program that is executed by a processor to implement the method as described above.
The embodiment of the invention has the following beneficial effects: the initial layout is generated by displaying the candidate layout tool in response to the operation of selecting the candidate layout and the user-defined layout tool is provided, the layout editing workbench is displayed in response to the operation of confirming the initial layout, the initial layout can be displayed in the layout editing workbench, the page layout editing workbench can be initially reentered after confirmation to carry out fine adjustment change on the initial layout, the page of the initial layout is clear at a glance, the user operation is facilitated, and the efficiency of the business layout is improved. According to the embodiment of the invention, the business page design can be rapidly performed by dragging or dividing the page panel, the page layout can be completed without professional knowledge such as editing codes, the layout efficiency is improved, and the user experience is further improved.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for the description of the embodiments will be briefly described below, and it is apparent that the drawings in the following description are only some embodiments of the present invention, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a flow chart of method steps provided by an embodiment of the present invention;
FIG. 2 is a schematic diagram of a page base element provided by an embodiment of the present invention;
FIG. 3 is a schematic view of a magnetic attraction zone provided by an embodiment of the invention;
FIG. 4 is a schematic view of a drag panel magnetically attracted into a left landing zone provided by an embodiment of the present invention;
FIG. 5 is a schematic diagram of a type I layout of docking areas provided by an embodiment of the present invention;
FIG. 6 is a schematic diagram of an H-type layout of docking areas provided by an embodiment of the present invention;
FIG. 7 is a schematic diagram of basic elements of a panel provided by an embodiment of the present invention;
FIG. 8 is a schematic diagram of a candidate layout tool provided by an embodiment of the present invention;
FIG. 9 is a schematic diagram of an initial layout table provided by an embodiment of the present invention;
FIG. 10 is a schematic diagram of an editing interactive tool provided by an embodiment of the present invention;
Fig. 11 is a schematic view of horizontal division of a main panel according to an embodiment of the present invention;
FIG. 12 is a schematic diagram of a multi-tag assembly provided by an embodiment of the present invention;
FIG. 13 is a schematic diagram of a split layout provided by an embodiment of the present invention;
FIG. 14 is a schematic diagram of a panel drag interactive tool provided by an embodiment of the present invention;
FIG. 15 is a schematic drawing of drag docking provided by an embodiment of the present invention;
FIG. 16 is a diagram of a second size interactive tool according to an embodiment of the present invention, wherein (a) is a high interactive tool diagram and (b) is a wide interactive tool diagram.
Reference numerals illustrate: 201 represents an upper landing zone; 202 represents a lower landing zone; 203 represents a left landing zone; 204 represents a right landing zone; 205 represents a primary dock; 301 represents a magnetic attraction zone; 401 represents a panel; 701 represents the outer margin of the panel; 702 represents the inner margin of the panel; 703 represents a panel frame; 1001 denotes a vertical segmentation tool; 1002 represents a horizontal segmentation tool; 1003 denotes a multi-label segmentation tool; 1004 represents a delete pane tool; 1005 represents an expanded display of the interactive tool; 1101 represents a sub-panel obtained by horizontal division; 1102 represents the upper panel of 1101; 1201 represents a multi-tag assembly; 1211 represents a tag; 1301 represents a sub-panel obtained by vertically dividing one sub-panel which has been divided horizontally; 1302 represents a sub-panel horizontally divided in a label corresponding panel divided by a plurality of labels; 1401 represents a panel drag interactive tool; 1501 represents a target drag panel; 1601 represents a high interaction tool; 1602 represent a width interactive tool.
Detailed Description
The present invention will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present invention more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.
In view of at least one problem existing at present, an embodiment of the present invention provides a page layout method, referring to fig. 1, including: displaying a candidate layout tool, generating an initial layout in response to an operation of selecting the candidate layout; the candidate layout tools comprise at least one of a single-panel layout tool, a preset layout style tool, a custom layout tool, a local layout style tool or a shop layout style tool; in response to an operation of confirming the initial layout, displaying a layout editing workbench, and displaying the initial layout in the layout editing workbench; responding to the operation of dividing the target divided panel in the layout editing workbench, and displaying the divided panel combinations in a stop area where the target divided panel is positioned according to the dividing quantity and dividing mode; the target segmentation panel is any selected panel; in response to an operation of dragging the target drag panel in the layout editing workbench, moving the target drag panel to the target parking area or the target response area and changing specification parameters of the target drag panel according to the specification parameters of the target parking area or the target response area; the target dragging panel is any selected panel.
Specifically, first, the page base element of the embodiment of the present invention is described. Referring to fig. 2, fig. 2 is a schematic diagram of a page base element according to an embodiment of the present invention. The page foundation element of the embodiment of the invention comprises one or more panels, an upper parking area, a lower parking area, a left parking area, a right parking area and a main parking area, wherein the panels can be parked in the parking areas, and the parking areas are in a hidden state. Controls for business requirements, such as forms, images, text boxes, or browser web pages, etc., may be configured in the panel; there may also be sub-panels in the panel. Referring to fig. 3, fig. 3 is a schematic diagram of a magnetic attraction area provided in an embodiment of the present invention, in which an area with a designated width is allocated as a magnetic attraction area at a position where an upper parking area, a lower parking area, a left parking area, and a right parking area are connected to a page boundary, and referring to fig. 4, fig. 4 is a schematic diagram of a dragging panel magnetically attracted into a left parking area provided in an embodiment of the present invention, and when the panel is dragged into the magnetic attraction area and released, the panel will be parked in a parking area corresponding to the magnetic attraction area.
In the description of the embodiments of the present invention, unless otherwise specified, a panel that is docked in an upper docking area is referred to as an upper panel, a panel that is docked in a lower docking area is referred to as a lower panel, a panel that is docked in a left docking area is referred to as a left panel, a panel that is docked in a right docking area is referred to as a right panel, and a panel that is docked in a main docking area is referred to as a main panel. Referring to fig. 5 and 6, fig. 5 is a schematic diagram of an I-type layout of each parking area provided in an embodiment of the present invention, and fig. 6 is a schematic diagram of an H-type layout of each parking area provided in an embodiment of the present invention, and exemplary, each parking area may be configured in an I-type layout as in fig. 5 or an H-type layout as in fig. 6.
For the panel base element, referring to fig. 7, fig. 7 is a schematic diagram of the panel base element according to an embodiment of the present invention, where each panel has an inner margin and a frame, and each panel has an outer margin. The inner margin refers to the distance between the content element of the panel and the frame of the panel, the inner margin can influence the size of the visible frame of the panel, the background of the panel can extend to the inner margin, namely, the color of the inner margin can change along with the change of the color of the background; the outer margin refers to the distance between the current panel and other panels, and the outer margin does not affect the specification of the visible frame, but affects the position of the panel. The inner edge distance and the outer edge distance respectively comprise an upper value, a lower value, a left value and a right value, and the edge distance values respectively correspond to the edge distance values in four directions.
In an embodiment of the present invention, there are the following definitions:
(1) And (3) horizontal segmentation: the method is characterized in that an original panel is transversely cut and divided into sub-panels of upper and lower parts;
(2) Vertical segmentation: the method is characterized in that an original panel is longitudinally cut into a left sub-panel and a right sub-panel;
(3) Multi-tag segmentation: the method includes that a plurality of sub-panels are generated in a panel area where an original panel is located, the sub-panels are arranged in a stacked mode, and a label corresponding to one sub-panel is clicked to be switched to the sub-panel for display.
The page layout method of the embodiment of the invention comprises the following steps S100-S500.
S100, displaying a candidate layout tool, and generating an initial layout in response to the operation of selecting the candidate layout.
Specifically, referring to fig. 8, fig. 8 is a schematic diagram of a candidate layout tool according to an embodiment of the present invention, where the candidate layout tool includes at least one of a single panel layout tool, a preset layout style tool, a custom layout tool, a local layout style tool, or a shop layout style tool, and step S100 includes one of the following steps S110 to S150.
S110, in response to the operation of clicking the single-panel layout tool, displaying a layout editing workbench, and displaying a single-panel page in the layout editing workbench, wherein the single-panel page comprises a main panel, and the main panel is stopped at a main stopping area.
S120, in response to clicking the preset layout style tool, displaying a layout editing workbench, and displaying a preset layout style in the layout editing workbench.
Specifically, the layout style is a preset common layout, and may include an H-type layout, an I-type layout, a master-slave table, a multi-detail table, and the like.
S130, in response to clicking the custom layout tool and completing the operation of the initial layout, displaying the layout editing workbench, and displaying the initial layout in the layout editing workbench.
Specifically, when selecting the custom layout, the user may perform an initial layout custom operation. Step S130 includes the following steps S131 to S133.
S131, in response to clicking the operation of the custom layout tool, displaying an initial layout workbench, and displaying an initial layout preview area and an initial layout configuration tool in the initial layout workbench.
Specifically, referring to fig. 9, fig. 9 is a schematic diagram of an initial layout workbench according to an embodiment of the present invention. In the initial layout workbench, displaying a first panel selection tool for configuring the panel in the initial layout and the docking area of the panel; and displaying a first panel segmentation tool, wherein the first panel segmentation tool is used for acquiring panel segmentation parameters input by a user to segment the panel in the initial layout, and the panel segmentation parameters comprise the segmentation number and the segmentation mode.
S132, or, in response to the operation of the configuration in the initial layout configuration tool, displaying the initial layout preview image in the initial layout preview area.
Specifically, the user may adjust panel selections and parameters in the initial layout configuration tool to adjust the initial layout before confirming the initial layout. The first panel selecting tool comprises options for displaying an upper panel, a lower panel, a left panel, a right panel and a main panel, wherein the options can be selected, and each option is provided with a first panel dividing tool for dividing the corresponding panel rapidly. For example, when the upper panel is selected for display by clicking, the upper panel may be divided, for example, the division number is set to 2, and the division manner is horizontal division, and then the upper panel which rests on the upper rest area and is divided up and down is displayed in the initial layout preview area, and the sum of the area areas of the two sub-panels of the upper panel is smaller than or equal to the area of the upper panel.
The initial layout is customized through the initial workbench, so that a user can conveniently and quickly determine the general arrangement position of the layout panel when carrying out service layout, and the subsequent adjustment or content filling is carried out in the layout editing workbench, thereby being beneficial to improving the layout efficiency.
S133, in response to the operation of confirming the initial layout, displaying a layout editing workbench, and displaying the initial layout in the layout editing workbench.
Step S130 may further include the following step S134.
S134, displaying a help tool in the initialization workbench, wherein the help tool is used for displaying function prompt characters of the panel selection tool and the panel segmentation tool; in response to a mouse click or movement of the mouse over the help tool, a help prompt box pops up.
S140, or, in response to an operation of clicking the local layout style tool and selecting the local layout style, displaying the layout editing workbench, and displaying the selected local layout style in the layout editing workbench.
S150, or, in response to an operation of clicking the shop layout style tool and selecting the shop layout style, displaying the layout editing workbench, and displaying the selected shop layout style in the layout editing workbench.
Specifically, the local layout style and the shop layout style are beneficial to sharing service layout among users, and meanwhile layout efficiency can be improved.
Through the generation of the initial layout in step S100, the user can conveniently obtain the rough style of the page layout wanted by himself in different ways, and when the custom layout is selected, the initial layout can be obtained quickly by adjusting parameters, so that the subsequent detailed design is facilitated.
After entering the layout editing workbench, in response to the operation of selecting the panel, displaying an editing interaction tool, referring to fig. 10, fig. 10 is a schematic diagram of the editing interaction tool provided by the embodiment of the invention, where the editing interaction tool includes a panel segmentation tool (a horizontal segmentation tool, a vertical segmentation tool and a multi-label segmentation tool), a panel dragging interaction tool, and a panel deletion tool.
S200, in response to the operation of dividing the target divided panel in the layout editing workbench, displaying the divided panel combinations in the stop area where the target divided panel is located according to the dividing number and the dividing mode.
Specifically, in response to an operation of selecting a target division panel by a mouse, a display panel division tool for performing horizontal division, vertical division, or multi-label division on the selected target division panel; the panel dividing tool displays the dividing number and dividing modes, and a user can specify the dividing number and the dividing modes when dividing the panel, wherein the dividing modes comprise horizontal dividing, vertical dividing and multi-label dividing. Step S200 includes any of the following steps S210 to S230.
S210, in response to the operation of selecting horizontal segmentation, dividing the region of the target segmentation panel into a plurality of subareas up and down according to the number of the horizontal segmentation, paving the target segmentation panel on any subarea, and newly building the panel to be full of the rest subareas.
Specifically, referring to fig. 11, fig. 11 is a schematic diagram of horizontal division of a main panel according to an embodiment of the present invention, where a region of the main panel is divided into 3 sub-regions according to a number of horizontal divisions of 3.
In some embodiments, when the selected target division panel is already a sub-panel of a certain panel, that is, it is already a panel after division, the total area occupied by the rest k panels of the target division panel and the area where the target division panel is located is divided into x (x is greater than or equal to k+1) sub-areas up and down according to the horizontal division number x, the target division panel and the panel of the same level are respectively paved in any k+1 sub-areas newly divided, and the rest sub-areas are fully paved with newly built panels.
S220, or in response to the operation of selecting vertical segmentation, uniformly dividing the region of the target segmentation panel into a plurality of subareas according to the number of vertical segmentation, paving the target segmentation panel on any newly segmented subarea, and newly paving the rest subareas with the newly-built panel.
Specifically, the process of vertical segmentation is similar to that of horizontal segmentation of step S210, and will not be described here.
S230, or in response to the operation of selecting multi-label segmentation, when the target segmentation panel is not segmented by the multi-labels, displaying a multi-label assembly at the boundary position of the target segmentation panel, displaying n labels in the multi-label assembly and creating a sub-region corresponding to each label; spreading the target segmentation panel on any subarea and newly building a panel to spread the rest subareas; when the target segmentation panel is segmented by the multi-label, inserting new labels with the number of n-1 into the multi-label assembly of the target segmentation panel, and generating a new panel for the subarea corresponding to the new labels; where n is the number of multi-tag divisions.
Specifically, referring to fig. 12, fig. 12 is a schematic diagram of a multi-label assembly according to an embodiment of the present invention, where the generated multi-label assembly may be located at an upper left side of an outer side of a panel, and in other embodiments, may be located at any position of attaching to the panel, such as an upper right side, a lower left side, or a lower right side of the outer side of the panel.
By dividing the panel in the page in step S200, various complex layouts can be effectively obtained. Referring to fig. 11 and 13, fig. 13 is a schematic diagram of a split layout according to an embodiment of the present invention; FIG. 11 is a view of a horizontal division layout in which a main panel is a panel of a higher stage, by the horizontal division of the panel; in fig. 13, a multi-label dividing layout is formed by multi-label dividing of the panel, then horizontal dividing is performed on the panel corresponding to one label to obtain a nested dividing layout, and then vertical dividing is performed on the bottom horizontal dividing sub-panel to obtain the dividing layout shown in fig. 13.
S300, responding to the operation of clicking the deleting panel, and reallocating the space occupied by the target deleting panel to the panel in the same level with the target deleting panel.
Specifically, the target delete panel is the selected current panel. When the target deletion panel is segmented, the remaining peer panels need to be modified after deletion, and step S300 includes one of the following steps S310 to S330.
And S310, when the target deletion panel is a sub panel after being horizontally divided, according to the step S210, taking the number m of the rest peer panels as the horizontal division number, and taking the total area as the sum of the areas where m+1 peer panels are respectively located, so as to perform division adjustment, and adjusting the space left after deleting the target deletion panel to other panels.
S320, or when the target deletion panel is a vertically divided sub-panel, processing is performed according to step S220 in a manner similar to the manner of the horizontal division in step S310 described above.
S330, or when the target deletion panel is a multi-label panel, deleting the multi-label tool and recovering the multi-label panel as a panel of the splitting method of the corresponding upper panel, where the splitting method of the corresponding upper panel of the multi-label panel may be horizontal splitting or vertical splitting or not splitting.
By deleting the panel in step S300, the layout can be modified, and the fault tolerance of the layout can be improved.
S400, responding to the operation of dragging the target dragging panel in the layout editing workbench, moving the target dragging panel to the target parking area and changing the specification parameters of the target dragging panel according to the specification parameters of the target parking area.
Specifically, the target drag panel represents a click selected panel, which may be an upper panel, a lower panel, a left panel, a right panel, or a main panel, and the target rest area represents a rest area where the target drag panel is to rest, which may be an upper rest area, a lower rest area, a left rest area, a right rest area, or a main rest area. When the target drag panel stops at the target stop zone, the specification parameters of the target stop zone, such as width and height, are adapted to the specification parameters of the target stop zone.
S410, responding to the operation of selecting the target drag panel, and displaying the panel drag interactive tool.
Specifically, referring to fig. 14, fig. 14 is a schematic view of a panel dragging interactive tool provided in an embodiment of the present invention, in which the panel dragging interactive tool is displayed in the upper left corner in response to an operation of selecting a target dragging panel, and in other embodiments, the panel dragging interactive tool may be displayed in other positions, for example, in the upper right corner, the lower right corner, or the lower left corner. Further, the panel dragging interactive tool of the embodiment of the invention can be displayed in various colors so as to facilitate the user to clearly identify that the current panel is selected and can be dragged.
S420, responding to the operation of dragging the panel to drag the interactive tool, and moving the target dragging panel to a target parking area or a target response area.
Specifically, when a user drags a panel to drag an interactive tool, the selected target drag panel can be dragged within the page range, referring to fig. 15, fig. 15 is a schematic drawing of dragging stop provided in the embodiment of the present invention, and when the target drag panel enters a magnetic area of a target stop area and is released, the panel is paved with the target stop area. In other embodiments, the user may be prompted graphically or literally to stop at a stop zone corresponding to the current magnetic region when the target drag panel enters the magnetic region.
Each panel of the embodiment of the invention is provided with an upper response area, a lower response area, a left response area, a right response area and a middle response area, and a target dragging panel and other panels can be formed into a horizontal segmentation, vertical segmentation or multi-label segmentation mode in response to the operation of dragging the panel dragging interaction tool.
Specifically, in response to dragging the target drag panel into an upper response area of any other undetermined panel in the page, displaying a horizontally segmented pattern of the target drag panel-undetermined panel from top to bottom; when the response area in which the drag panel enters is a lower response area, displaying a horizontally-divided pattern of the undetermined panel-target drag panel from top to bottom; when the response area which the drag panel enters is a left response area, displaying a vertically-divided pattern of the target drag panel-to-be-determined panel from left to right; when the response area entered by the drag panel is a right response area, displaying a vertical segmentation pattern of the drag panel-undetermined panel which is a target from right to left; when the response area of the dragged panel is the middle response area, a multi-label segmentation mode is formed by the dragged panel and the panel to be determined.
S430, or in response to the operation of dragging the labels of the multi-label assembly, separating the panel corresponding to the selected label from the multi-label panel as a target dragging panel, and moving the target dragging panel to a target parking area or a target response area.
Specifically, the drag operation after the target drag panel in step S430 is separated is similar to that in step S420, and will not be described again here.
The target dragging panel is dragged through the step S400 to change the parking position, so that visual layout can be conveniently carried out by a user, and the layout efficiency and the layout convenience are improved.
S500, adjusting the height or width of the panel in response to the operation of the size-adjusting interactive tool.
Specifically, the size interactive tool according to the embodiment of the present invention is divided into a first size interactive tool and a second size interactive tool, and the operation of adjusting the size interactive tool in response to the operation includes one of steps S510 to S520.
S510, responding to the operation of clicking the selection panel, displaying a first-size interactive tool, displaying an input box in the first-size interactive tool, and inputting a specific pixel unit value or percentage in the input box; and adjusting the height or width of the selected panel in response to the operation of inputting the pixel unit value or the percentage.
The height of the panel in the upper parking area or the lower parking area of the page can be adjusted; the width size of the panel in the left parking area or the right parking area of the page can be adjusted; the size of the main panel stopped (i.e. paved) in the main stopping area is the passive calculated size, and the width value W of the main panel C The calculation formula of (2) is as follows:
W C =W A - (W L + W R + W G )
wherein W is C Is the width value of the main panel, W A Is the width value of the page, W L Is the width value of the left panel, W R Is the width value of the right panel, W G The sum of outer margin widths representing the presence in the page width dimension.
Height value H of main panel C The calculation formula of (2) is as follows:
H C =H A - (H U + H D + H G )
wherein H is C Is the height value of the main panel, H A Is the height value of the page, H U Is the height value of the upper panel, H D Is the height value of the lower panel, H G The sum of the outside stand-off heights representing the presence in the page height dimension.
The horizontally divided panels may also be height-sized. After the height is adjusted, the height value of other panels which are divided by the same level is similarly adjusted according to the calculation method; the vertically divided panels may be width-sized. After adjusting the width, the other panels with the same level being divided similarly adjust the width value according to the calculation method; the panel size after being divided may be adjusted in an equal ratio or may be decreased according to the panel size.
S520, responding to the operation of moving the mouse between the two panels, and displaying a second-size interaction tool; and responding to the operation of selecting and dragging the second-size interactive tool by the mouse, and changing the width or the height of the panels on two sides of the second-size interactive tool along the dragging direction of the mouse.
Referring to fig. 16, fig. 16 is a schematic diagram of a second size interactive tool according to an embodiment of the present invention, which has two types of width interactive tools (e.g., (b) of fig. 16) and height interactive tools (e.g., (a) of fig. 16); the second size interactive tool is displayed between the two panels, specifically at the position where the cursor moves, so that the user can click and drag conveniently.
The sub-panels obtained through segmentation and the panels which are stopped at the upper, lower, left and right stopping areas of the page can be adjusted in size through a second size interaction tool.
When the cursor is moved to a position where two adjacent segmented panels intersect, a second size interactive tool is automatically displayed. If the two sub-panels are obtained by horizontal segmentation, displaying a high interactive tool, and prompting a user to drag so as to adjust the heights of the two panels; in the case of a vertically split panel, a width interactive tool is displayed, prompting the user to drag to adjust the width of both panels. When the cursor drags the second interactive tool, the adjacent two panels are equally scaled.
When the cursor moves to a position where the panel of the up-down left-right stopping area is adjacent to the panel of the main stopping area, automatically displaying a second-size interactive tool, and prompting a user to drag so as to adjust the size of the stopping area. The position of the upper stopping area or the lower stopping area adjacent to the main stopping area is displayed with a height interaction tool; the left landing zone or the right landing zone displays a width interactive tool. When the cursor drags the second size interactive tool, the size value of the stopping area can be adjusted in an equal ratio.
The panel size adjustment performed through step S500 can facilitate the user to perform adaptive adjustment according to the content specifically placed in the panel, thereby further improving the convenience of layout.
The embodiment of the invention can further comprise step S600.
S600, responding to the operation of selecting the panel, and changing the color of the basic element of the panel.
Specifically, in response to the operation of selecting the panel, the color of the frame of the panel or the color of the background of the panel or the color of the panel dragging interactive tool can be changed, so that the selected characteristics of the panel are displayed obviously, and the user can conveniently recognize the selected panel.
The embodiment of the invention also provides a page layout system, which comprises: a first module that displays a candidate layout tool, and generates an initial layout in response to an operation of selecting a candidate layout; the candidate layout tools comprise at least one of a single-panel layout tool, a preset layout style tool, a custom layout tool, a local layout style tool or a shop layout style tool; a second module for displaying the layout editing workbench in response to the operation of confirming the initial layout, and displaying the initial layout in the layout editing workbench; a third module, configured to respond to an operation of dividing the target division panel in the layout editing workbench, and display the divided panel combinations in a parking area where the target division panel is located according to the division number and the division manner; the target segmentation panel is any selected panel; a fourth module for moving the target drag panel to the target parking area or the target response area and changing the specification parameters of the target drag panel according to the specification parameters of the target parking area or the target response area in response to the operation of dragging the target drag panel in the layout editing workbench; the target dragging panel is any selected panel.
The embodiment of the invention also provides electronic equipment, which comprises a processor and a memory; the memory is used for storing programs; the processor executes the program to implement the method as described above.
Embodiments of the present invention also provide a computer-readable storage medium storing a program that is executed by a processor to implement the method as described above.
The embodiment of the invention has the following beneficial effects:
1. the user can see the required approximate layout in the same page adjustment parameters, enter the layout editing workbench to carry out fine adjustment change on the initial layout after confirmation, the page of the initial layout is clear at a glance, the operation of the user is convenient, and the service layout efficiency is improved;
2. according to the embodiment of the invention, the service page design can be rapidly performed by dragging or dividing the panel of the page, the professional knowledge reserve threshold for the user to perform the service page design can be reduced, the layout efficiency and the layout convenience are further improved, and the user experience is improved.
The following is an application example provided by the embodiment of the present invention.
Displaying a candidate layout tool, displaying an initial layout workbench in response to clicking on the custom layout tool in the candidate layout tool, displaying an initial layout preview area and an initial layout configuration tool in the initial layout workbench, displaying an initial layout preview in the initial layout preview area in response to performing configuration operation in the initial layout configuration tool, displaying a layout editing workbench in response to confirming the initial layout operation, and displaying the initial layout in the layout editing workbench; in response to an operation of confirming the initial layout, displaying a layout editing workbench, and displaying the initial layout in the layout editing workbench; responding to the operation of dividing the target divided panel in the layout editing workbench, and displaying the divided panel combinations in a stop area where the target divided panel is positioned according to the dividing quantity and dividing mode; deleting the target deletion panel in response to an operation of clicking the deletion panel; in response to an operation of dragging the target drag panel in the layout editing workbench, the target drag panel is moved to the target landing zone and the specification parameters of the target drag panel are changed according to the specification parameters of the target landing zone.
In some alternative embodiments, the functions/acts noted in the block diagrams may occur out of the order noted in the operational illustrations. For example, two blocks shown in succession may in fact be executed substantially concurrently or the blocks may sometimes be executed in the reverse order, depending upon the functionality/acts involved. Furthermore, the embodiments presented and described in the flowcharts of the present invention are provided by way of example in order to provide a more thorough understanding of the technology. The disclosed methods are not limited to the operations and logic flows presented herein. Alternative embodiments are contemplated in which the order of various operations is changed, and in which sub-operations described as part of a larger operation are performed independently.
Logic and/or steps represented in the flowcharts or otherwise described herein, e.g., a ordered listing of executable instructions for implementing logical functions, can be embodied in any computer-readable medium for use by or in connection with an instruction execution system, apparatus, or device, such as a computer-based system, processor-containing system, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions. For the purposes of this description, a "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device.
More specific examples (a non-exhaustive list) of the computer-readable medium would include the following: an electrical connection (electronic device) having one or more wires, a portable computer diskette (magnetic device), a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disc read-only memory (CDROM). In addition, the computer readable medium may even be paper or other suitable medium on which the program is printed, as the program may be electronically captured, via, for instance, optical scanning of the paper or other medium, then compiled, interpreted or otherwise processed in a suitable manner, if necessary, and then stored in a computer memory.
It is to be understood that portions of the present invention may be implemented in hardware, software, firmware, or a combination thereof. In the above-described embodiments, the various steps or methods may be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, may be implemented using any one or combination of the following techniques, as is well known in the art: discrete logic circuits having logic gates for implementing logic functions on data signals, application specific integrated circuits having suitable combinational logic gates, programmable Gate Arrays (PGAs), field Programmable Gate Arrays (FPGAs), and the like.
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 present invention. In this specification, schematic representations of the above terms do not necessarily refer to the same embodiments or examples. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.
While embodiments of the present invention have been shown and described, it will be understood by those of ordinary skill in the art that: many changes, modifications, substitutions and variations may be made to the embodiments without departing from the spirit and principles of the invention, the scope of which is defined by the claims and their equivalents.
While the preferred embodiment of the present invention has been described in detail, the present invention is not limited to the embodiments described above, and those skilled in the art can make various equivalent modifications or substitutions without departing from the spirit of the present invention, and these equivalent modifications or substitutions are included in the scope of the present invention as defined in the appended claims.
Claims (10)
1. A method of page layout, comprising:
displaying a candidate layout tool, generating an initial layout in response to an operation of selecting the candidate layout; the candidate layout tools comprise at least one of a single-panel layout tool, a preset layout style tool, a custom layout tool, a local layout style tool or a shop layout style tool;
in response to an operation of confirming the initial layout, displaying a layout editing workbench in which the initial layout is displayed;
responding to the operation of dividing the target divided panel in the layout editing workbench, and displaying the divided panel combinations in a stop area where the target divided panel is positioned according to the dividing quantity and dividing mode; wherein the target segmentation panel is any selected panel;
responding to the operation of dragging the target dragging panel in the layout editing workbench, moving the target dragging panel to a target parking area or a target response area and changing the specification parameters of the target dragging panel according to the specification parameters of the target parking area or the target response area; wherein the target dragging panel is any selected panel;
Wherein the responding to the operation of dividing the target divided panel in the layout editing workbench displays the divided panel combination in the stop area where the target divided panel is located according to the dividing quantity and the dividing mode, and comprises the following steps:
responding to the operation of selecting multi-label segmentation, when the target segmentation panel is not segmented by the multi-labels, displaying a multi-label assembly at the boundary position of the target segmentation panel, displaying n labels in the multi-label assembly, and creating a subarea corresponding to each label; spreading the target segmentation panel on any subarea and newly building a panel to spread the rest subareas; when the target segmentation panel is segmented by the multi-label, inserting new labels with the number of n-1 into the multi-label assembly of the target segmentation panel, and generating a new panel for a subarea corresponding to the new labels; wherein n is the number of multi-label divisions;
wherein the moving the target drag panel to the target docking area or the target response area and changing the specification parameters of the target drag panel according to the specification parameters of the target docking area or the target response area in response to the operation of dragging the target drag panel in the layout editing workbench comprises:
Responding to dragging the target dragging panel to enter an upper response area of any other undetermined panel in the page, and displaying a horizontal segmentation pattern of the target dragging panel and the undetermined panel from top to bottom;
responding to the dragging of the target dragging panel to enter a lower response area of any other undetermined panel in the page, and displaying a horizontal segmentation pattern of the undetermined panel and the target dragging panel from top to bottom;
responding to dragging the target dragging panel to enter a left response area of any other undetermined panel in the page, and displaying a vertical segmentation pattern of the target dragging panel and the undetermined panel from left to right;
responding to the dragging of the target dragging panel to enter a right response area of any other undetermined panel in the page, and displaying a vertical segmentation pattern of the target dragging panel and the undetermined panel from right to left;
and responding to dragging the target dragging panel to enter the middle response area of any other undetermined panel in the page, and forming a multi-label segmentation mode by the target dragging panel and the undetermined panel.
2. The page layout method according to claim 1, wherein the displaying candidate layout tool, in response to the operation of selecting the candidate layout, generates an initial layout comprising one of:
In response to clicking the operation of the single-panel layout tool, displaying a layout editing workbench, and displaying a single-panel page in the layout editing workbench; wherein the single panel page comprises a main panel;
or, in response to clicking the preset layout style tool, displaying the layout editing workbench, and displaying a preset layout style in the layout editing workbench;
or, in response to clicking the custom layout tool, displaying an initial layout workbench; displaying the layout editing workbench in response to completion of an operation of an initial layout in the initial layout workbench, and displaying the initial layout in the layout editing workbench;
or, in response to clicking the local layout style tool and selecting a local layout style, displaying the layout editing workbench and displaying the selected local layout style in the layout editing workbench;
or, in response to an operation of clicking the shop layout style tool and selecting a shop layout style, displaying the layout editing workbench, and displaying the selected shop layout style in the layout editing workbench.
3. A page layout method in accordance with claim 2, wherein said responsive to clicking on said local layout style tool and selecting a local layout style, displaying said layout editing workstation and displaying said selected local layout style in said layout editing workstation comprises:
in response to clicking the operation of the custom layout tool, displaying an initial layout workbench, and displaying an initial layout preview area and an initial layout configuration tool in the initial layout workbench;
displaying an initial layout preview in the initial layout preview area in response to the operation of the configuration in the initial layout configuration tool;
in response to an operation of confirming an initial layout, the layout editing workbench is displayed, and the initial layout is displayed in the layout editing workbench.
4. The page layout method according to claim 1, wherein in response to the operation of dividing the target divided panel in the layout editing workbench, the divided panel combination is displayed in a stop area where the target divided panel is located according to the dividing number and dividing manner, and further comprising one of:
In response to the operation of selecting horizontal segmentation, dividing the region of a target segmentation panel into a plurality of subareas up and down according to the number of the horizontal segmentation, paving the target segmentation panel on any subarea, and newly creating a panel to be full of the rest subareas;
or in response to the operation of selecting vertical segmentation, uniformly dividing the region of the target segmentation panel into a plurality of subareas according to the number of vertical segmentation, paving the target segmentation panel on any newly segmented subarea, and newly paving the rest subareas.
5. The page layout method in accordance with claim 4, further comprising:
and in response to the operation of clicking the deleting panel, reallocating the space occupied by the target deleting panel to the panel in the same level with the target deleting panel.
6. The page layout method according to claim 1, wherein the moving the target drag panel to the target landing zone or the target response zone and changing the specification parameters of the target drag panel according to the specification parameters of the target landing zone or the target response zone in response to the operation of dragging the target drag panel in the layout editing workbench comprises:
Responding to the operation of selecting the target to drag the panel, and displaying the panel to drag the interactive tool;
responding to the operation of dragging the panel to drag the interactive tool, and moving the target dragging panel to a target parking area or a target response area;
or in response to the operation of dragging the labels of the multi-label assembly, separating the panel corresponding to the selected label from the multi-label panel as the target dragging panel, and moving the target dragging panel to the target parking area or the target response area.
7. A method of page layout as claimed in claim 1, wherein the method further comprises:
in response to an operation of clicking the selection panel, displaying a first-sized interactive tool in which an input box is displayed; responding to the operation of inputting pixel unit values or percentage proportions, and adjusting the height or width of the selected panel;
displaying a second-sized interactive tool in response to operation of the cursor between any two adjacent panels; and responding to the operation of dragging the cursor to the second-size interactive tool, and changing the width or the height of the panels on two sides of the second-size interactive tool along the cursor dragging direction.
8. A page layout system, comprising:
a first module that displays a candidate layout tool, and generates an initial layout in response to an operation of selecting a candidate layout; the candidate layout tools comprise at least one of a single-panel layout tool, a preset layout style tool, a custom layout tool, a local layout style tool or a shop layout style tool;
a second module for displaying a layout editing workbench in which the initial layout is displayed in response to an operation of confirming the initial layout;
a third module, configured to respond to an operation of dividing the target division panel in the layout editing workbench, and display the divided panel combination in a stop area where the target division panel is located according to the division number and the division manner; wherein the target segmentation panel is any selected panel;
wherein the responding to the operation of dividing the target divided panel in the layout editing workbench displays the divided panel combination in the stop area where the target divided panel is located according to the dividing quantity and the dividing mode, and comprises the following steps:
responding to the operation of selecting multi-label segmentation, when the target segmentation panel is not segmented by the multi-labels, displaying a multi-label assembly at the boundary position of the target segmentation panel, displaying n labels in the multi-label assembly, and creating a subarea corresponding to each label; spreading the target segmentation panel on any subarea and newly building a panel to spread the rest subareas; when the target segmentation panel is segmented by the multi-label, inserting new labels with the number of n-1 into the multi-label assembly of the target segmentation panel, and generating a new panel for a subarea corresponding to the new labels; wherein n is the number of multi-label divisions;
A fourth module for moving the target drag panel to a target parking area or a target response area and changing specification parameters of the target drag panel according to the specification parameters of the target parking area or the target response area in response to an operation of dragging the target drag panel in the layout editing workbench; wherein the target dragging panel is any selected panel;
wherein the fourth module is further configured to:
responding to dragging the target dragging panel to enter an upper response area of any other undetermined panel in the page, and displaying a horizontal segmentation pattern of the target dragging panel and the undetermined panel from top to bottom;
responding to the dragging of the target dragging panel to enter a lower response area of any other undetermined panel in the page, and displaying a horizontal segmentation pattern of the undetermined panel and the target dragging panel from top to bottom;
responding to dragging the target dragging panel to enter a left response area of any other undetermined panel in the page, and displaying a vertical segmentation pattern of the target dragging panel and the undetermined panel from left to right;
responding to the dragging of the target dragging panel to enter a right response area of any other undetermined panel in the page, and displaying a vertical segmentation pattern of the target dragging panel and the undetermined panel from right to left;
And responding to dragging the target dragging panel to enter the middle response area of any other undetermined panel in the page, and forming a multi-label segmentation mode by the target dragging panel and the undetermined panel.
9. An electronic device comprising a processor and a memory;
the memory is used for storing programs;
the processor executing the program implements the method of any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that the storage medium stores a program that is executed by a processor to implement the method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310614380.7A CN116450119B (en) | 2023-05-29 | 2023-05-29 | Page layout method, page layout system, electronic device and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310614380.7A CN116450119B (en) | 2023-05-29 | 2023-05-29 | Page layout method, page layout system, electronic device and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116450119A CN116450119A (en) | 2023-07-18 |
| CN116450119B true CN116450119B (en) | 2023-09-01 |
Family
ID=87125793
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310614380.7A Active CN116450119B (en) | 2023-05-29 | 2023-05-29 | Page layout method, page layout system, electronic device and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116450119B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103064683A (en) * | 2013-02-19 | 2013-04-24 | 福建榕基软件股份有限公司 | Method and device for custom layout of multiple tabs under WEB environment |
| CN111857717A (en) * | 2020-07-29 | 2020-10-30 | 网易（杭州）网络有限公司 | UI editing method, device, equipment and computer readable storage medium |
| CN115390976A (en) * | 2022-08-31 | 2022-11-25 | 京东方科技集团股份有限公司 | Layout method of interface design, display method of interface and related equipment |
| CN116009837A (en) * | 2022-12-29 | 2023-04-25 | 易视腾科技股份有限公司 | Method for realizing front page by using multi-layer conditional combination |
| CN116126450A (en) * | 2023-04-07 | 2023-05-16 | 小米汽车科技有限公司 | Interface layout method and device, vehicle and storage medium |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8612890B2 (en) * | 2007-12-14 | 2013-12-17 | Koninklijke Philips N.V. | Labeling a segmented object |
| CN112632942B (en) * | 2020-08-19 | 2021-09-28 | 腾讯科技（深圳）有限公司 | Document processing method, device, equipment and medium |
-
2023
- 2023-05-29 CN CN202310614380.7A patent/CN116450119B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103064683A (en) * | 2013-02-19 | 2013-04-24 | 福建榕基软件股份有限公司 | Method and device for custom layout of multiple tabs under WEB environment |
| CN111857717A (en) * | 2020-07-29 | 2020-10-30 | 网易（杭州）网络有限公司 | UI editing method, device, equipment and computer readable storage medium |
| CN115390976A (en) * | 2022-08-31 | 2022-11-25 | 京东方科技集团股份有限公司 | Layout method of interface design, display method of interface and related equipment |
| CN116009837A (en) * | 2022-12-29 | 2023-04-25 | 易视腾科技股份有限公司 | Method for realizing front page by using multi-layer conditional combination |
| CN116126450A (en) * | 2023-04-07 | 2023-05-16 | 小米汽车科技有限公司 | Interface layout method and device, vehicle and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116450119A (en) | 2023-07-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US5299307A (en) | Controls for drawing images on computer displays | |
| US7480872B1 (en) | Method and apparatus for dynamically resizing windows | |
| US7320104B2 (en) | Text grid creation tools | |
| US5796401A (en) | System for designing dynamic layouts adaptable to various display screen sizes and resolutions | |
| KR100821449B1 (en) | Layout adjustment method and device | |
| DE69725346T2 (en) | DEVICE AND METHOD FOR PRODUCING A SHEET BENDING MODEL | |
| US7770125B1 (en) | Methods and apparatus for automatically grouping graphical constructs | |
| US6308144B1 (en) | Method and apparatus for providing three-dimensional model associativity | |
| US5357603A (en) | Method and system for changing a shape type while maintaining existing graphic characteristics | |
| US8438495B1 (en) | Methods and systems for creating wireframes and managing containers | |
| US6304272B1 (en) | Graphics system and method having objects conformed to a template | |
| US10037131B2 (en) | Facilitating object set replication | |
| US9710938B2 (en) | Graph expansion mini-view | |
| US6993709B1 (en) | Smart corner move snapping | |
| US20080123897A1 (en) | Apparatus for simultaneously storing area selected in image and apparatus for creating an image file by automatically recording image information | |
| US7305617B2 (en) | Method for aligning text to baseline grids and to CJK character grids | |
| US20140210944A1 (en) | Method and apparatus for converting 2d video to 3d video | |
| CN116450119B (en) | Page layout method, page layout system, electronic device and storage medium | |
| US20060066610A1 (en) | Method, device, and computer program product for displaying 3D grid in designing configuration model | |
| CN111580729B (en) | Processing method and system for selecting overlapped graphics primitives, readable storage medium and electronic equipment | |
| KR101933886B1 (en) | Program developer and object editing method | |
| US7574664B2 (en) | Methods for recursive spacing and touch transparency of onscreen objects | |
| US7042450B1 (en) | Interactive user interface guides | |
| CN110990005B (en) | Webpage element positioning method | |
| US6239799B1 (en) | Method and system for providing a splitter bar control |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |