CN115390976A

CN115390976A - Layout method of interface design, display method of interface and related equipment

Info

Publication number: CN115390976A
Application number: CN202211065747.6A
Authority: CN
Inventors: 陈林兵
Original assignee: BOE Technology Group Co Ltd
Current assignee: BOE Technology Group Co Ltd
Priority date: 2022-08-31
Filing date: 2022-08-31
Publication date: 2022-11-25

Abstract

The disclosure provides a layout method of an interface design, a display method of an interface and related equipment. The layout method of the interface design comprises the following steps: providing a page for laying out the interface design, wherein the page comprises at least one icon for dragging an interface object for generating the interface design; responding to a drag operation aiming at a target icon in the at least one icon, and generating a target interface object corresponding to the target icon at a position, corresponding to the drag operation, of a display area of the page; the display area comprises a plurality of cells, the target interface object is laid out in the display area in a form of occupying cells, and the target interface object occupies at least one cell; and generating an interface corresponding to the interface design based on the display area and the target interface object.

Description

Layout method of interface design, display method of interface and related equipment

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a layout method of an interface design, an interface display method, and a related device.

Background

The interface design (or called UI design) generally refers to the overall design of human-computer interaction, operation logic and interface beauty of software.

In the related art, when an interface is designed, the position and size of an interface object are usually set manually. Such a designed interface may be difficult for a non-professional interface designer to achieve the desired results.

Disclosure of Invention

The present disclosure provides a layout method of an interface design, a display method of an interface, and related devices, so as to solve or partially solve the above problems.

In a first aspect of the present disclosure, a layout method of an interface design is provided, including:

providing a page for laying out the interface design, wherein the page comprises at least one icon for dragging an interface object for generating the interface design;

responding to a drag operation aiming at a target icon in the at least one icon, and generating a target interface object corresponding to the target icon at a position, corresponding to the drag operation, of a display area of the page; the display area comprises a plurality of cells, the target interface object is laid out in the display area in a form of occupying cells, and the target interface object occupies at least one cell; and

and generating an interface corresponding to the interface design based on the display area and the target interface object.

In a second aspect of the present disclosure, a method for displaying an interface is provided, where the interface includes at least one interface object, and the method includes:

receiving a first instruction for displaying the interface; and

displaying the interface object in the interface according to the first instruction;

the display area comprises a plurality of cells, and the interface object is arranged in the display area in a form of occupying cells and occupies at least one cell.

In a third aspect of the disclosure, a computer device is provided, comprising one or more processors, a memory; and one or more programs, wherein the one or more programs are stored in the memory and executed by the one or more processors, the programs comprising instructions for performing the method according to the first or second aspects.

In a fourth aspect of the disclosure, a non-transitory computer-readable storage medium containing a computer program is provided, which, when executed by one or more processors, causes the processors to perform the method of the first or second aspect.

In a fifth aspect of the present disclosure, there is provided a computer program product comprising computer program instructions which, when run on a computer, cause the computer to perform the method of the first or second aspect.

According to the interface design layout method, the interface display method and the related equipment, the display area is divided into the plurality of cells, corresponding interface objects are automatically generated at corresponding positions of the display area through dragging operation when the interface design is laid out, and the interface objects are laid out in the display area in a cell occupation mode, so that the layout can be regularly realized in the interface, a better interface effect can be formed, and the problem that the interface is not attractive enough due to manual adjustment is avoided.

Drawings

In order to more clearly illustrate the technical solutions in the present disclosure or related technologies, the drawings needed to be used in the description of the embodiments or related technologies are briefly introduced below, and it is obvious that the drawings in the following description are only embodiments of the present disclosure, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.

Fig. 1 illustrates a schematic diagram of an exemplary system provided by an embodiment of the present disclosure.

FIG. 2A shows a schematic diagram of an exemplary page in accordance with an embodiment of the present disclosure.

FIG. 2B shows a schematic diagram of an exemplary page in accordance with an embodiment of the present disclosure.

FIG. 2C shows a schematic diagram of an exemplary page in accordance with an embodiment of the present disclosure.

FIG. 2D shows a schematic diagram of an exemplary page in accordance with an embodiment of the present disclosure.

FIG. 2E shows a schematic diagram of an exemplary page in accordance with an embodiment of the present disclosure.

FIG. 2F shows a schematic diagram of an exemplary page in accordance with an embodiment of the present disclosure.

FIG. 3 illustrates a schematic diagram of an exemplary interface according to an embodiment of the disclosure.

Fig. 4 shows a flow diagram of an exemplary method provided by an embodiment of the present disclosure.

Fig. 5 shows another flow diagram of an exemplary method provided by an embodiment of the present disclosure.

Fig. 6 shows a hardware structure diagram of an exemplary computer device provided by the embodiment of the present disclosure.

Detailed Description

For the purpose of promoting a better understanding of the objects, aspects and advantages of the present disclosure, reference is made to the following detailed description taken in conjunction with the accompanying drawings.

It is to be noted that technical terms or scientific terms used in the embodiments of the present disclosure should have a general meaning as understood by those having ordinary skill in the art to which the present disclosure belongs, unless otherwise defined. The use of "first," "second," and similar terms in the embodiments of the disclosure is not intended to indicate any order, quantity, or importance, but rather to distinguish one element from another. The word "comprising" or "comprises", and the like, means that the element or item listed before the word covers the element or item listed after the word and its equivalents, but does not exclude other elements or items. The terms "connected" or "coupled" and the like are not restricted to physical or mechanical connections, but may include electrical connections, whether direct or indirect. "upper", "lower", "left", "right", and the like are used merely to indicate relative positional relationships, and when the absolute position of the object being described is changed, the relative positional relationships may also be changed accordingly.

Fig. 1 illustrates a schematic diagram of an exemplary system 100 provided by an embodiment of the present disclosure.

As shown in fig. 1, the system 100 may include a terminal device 102, a server 104, and a terminal device 106. Optionally, the system 100 may also include a database server 108 for storing data.

The terminal device 102 and the terminal device 106 may be any terminal devices, such as a fixed terminal (e.g., a personal computer) or a mobile terminal (e.g., a notebook computer, a mobile phone, etc.). The server 104 may be a single server device or a cluster of servers. When implemented as a server cluster, a distributed architecture may be employed. Similarly, database server 108 may be a single server device or a cluster of servers and may employ a distributed architecture.

As an alternative embodiment, the terminal device 102 may correspond to a development end, and is configured to perform layout on an interface design, so as to complete interface development of a corresponding product. The end device 106 may correspond to a user end for a user to use a product developed by the end device 102 and to present a corresponding interface during use.

For example, one interface development process for the system 100 may be: the developer designs an interface of a computer product by using the terminal device 102, and then uploads the designed interface information to the server 104 and can store the information in the database server 108. The terminal device 106 may be utilized by the terminal user to obtain a corresponding product from the server 104 for use, and during the use process, interface information corresponding to the product may also be obtained from the server 104, so as to display a corresponding interface in the terminal device 106.

In order to design the interface more conveniently, one way is to design the interface object into a card form, and then perform interface layout by dragging.

When interface layout is carried out, if a reference object is not arranged in a display area, a developer needs to manually drag a card to realize alignment, although the mode is suitable for many scenes, when the sizes of display screens are different, the size of the card cannot be changed in a self-adaptive mode, and the card cannot be well adapted to the condition of large and small screens. An alternative solution may be to add an auxiliary suction alignment function, i.e. to automatically fill the size of the card in a certain direction when it is smaller than a desired threshold. Although the processing method has auxiliary adsorption calibration, the effect of the card space and the card size formed by dragging by a developer is still inferior to the interface effect designed by a professional UI team.

In view of this, an embodiment of the present disclosure provides a layout method for an interface design, in which a display area is divided into a plurality of cells, and when the interface design is laid out, a corresponding interface object is automatically generated at a corresponding position of the display area through a dragging operation, and the interface object is laid out in the display area in a form of occupying the cells, so that the layout can be regularly implemented in an interface, a better interface effect can be formed, and a problem that the interface is not beautiful enough due to manual adjustment is avoided.

Returning to fig. 1, in an initial state, the developer may send a request to the server 104 to start the layout of the interface design using the terminal device 102, and the server 104 may respond to the request and return a page for the layout of the interface design to the terminal device 102.

In some embodiments, the developer may utilize a browser installed in the terminal device 102 to send the request to the server 104. For example, a corresponding address may be entered in an address bar of the browser, so that the request is sent to the server 104, and in response to the request, the server 104 may return data (e.g., an HTML file) for generating the aforementioned page to the browser of the terminal device 102, so that the browser of the terminal device 102 may present the page.

As an alternative embodiment, the data returned by the server 104 to the browser of the terminal device 102 for generating the page may be an HTML file written in advance, and the browser may generate the corresponding page by running the file.

FIG. 2A shows a schematic diagram of an exemplary page 200 according to an embodiment of the disclosure.

As shown in fig. 2A, the page 200 may include a presentation area 202 over which at least one icon 204 for dragging an interface object that generates an interface design may be arranged. As shown in fig. 2A, the icons 204 may further include

icons

2042, 2044, 2046, 2048, 2050, 2052. It is understood that when the page 200 is presented by a browser, the page 200 may also include the basic elements of the browser, and these elements are omitted here for simplicity of drawing, and do not represent that these elements are not included in the page 200 implemented by the embodiments of the present application.

In some embodiments, the presentation area 202 may be divided into a plurality of cells 2022 so that the interface object may be generated in units of cells.

As an alternative embodiment, the size of the presentation area 202 of the page 200 may be determined, and the presentation area 202 may be divided into a plurality of cells 2022 according to the size. In this way, when the cells are divided, the cells can be divided according to the size of the presentation area 202, so that when the sizes of the presentation areas 202 are different, the sizes of the cells can be adaptively adjusted.

In some embodiments, the current size of the presentation area 202 may be obtained by registering a browser's change event and executing the event in an initial state. As an alternative embodiment, the size of the presentation area 202 of the browser may be obtained by a showpaea () method. An exemplary piece of code for the ShowArea () method is as follows:

for example, the corresponding code of the showpaea () method may be written into the foregoing HTML file, so that the browser may automatically obtain the size of the current presentation area 202 when running the HTML file, and further divide the current presentation area into a plurality of cells. Since the change event of the browser is registered in the foregoing step, the size of the presentation area 202, and thus the size of the divided cells, can be updated each time the browser changes.

In some embodiments, when dividing the cells, the size of the display area 202 of the page, the number of cells (e.g., 4) arranged in a first direction (e.g., a transverse direction), a distance d1 between a cell near a first edge of the display area 202 perpendicular to the first direction (e.g., the leftmost cell in fig. 2A) and the first edge, and a distance d3 between adjacent cells may be determined. As shown in fig. 2A, a spacing d4 between adjacent cells along a second direction (e.g., the longitudinal direction) and a spacing d2 between a cell adjacent to a second edge of the display area 202 perpendicular to the second direction (e.g., the uppermost cell in fig. 2A) and the second edge are also shown. It is understood that these distances d 1-d 4 may be unequal. As an alternative, in order to make the layout interface more beautiful, the distances d1 to d4 may be equal, for example, all occupy the width of 16 pixels (pixels).

After determining the above parameters, the length w of the cell 2022 in the first direction may be further determined according to the above parameters. As an alternative, assuming that the number of cells arranged along the first direction is 4, the length of the display area 202 along the first direction may be subtracted by 4 times the pitch d3 (assuming that the pitch d1 is equal to d 3), and then divided by 4 using the subtracted number, to obtain the length w of the cell 2022 along the first direction.

After obtaining the length w of the cell 2022 along the first direction, the length h of the cell 2022 along the second direction may be further determined.

As an alternative embodiment, the aspect ratio of the cell (i.e. the ratio of the length w in the first direction to the length h in the second direction) may be determined and the length h of the cell in the second direction may be determined based on the aspect ratio.

To ensure that the overall proportion of the cells does not change, a fixed aspect ratio may be set. For example, the aspect ratio of a cell may be specified using a native fixed aspect ratio attribute (aspect ratio) of a browser's Cascading Style Sheets (CSS). The aspect ratio of the cell is specified based on the CSS native fixed aspect ratio attribute (aspect ratio), and the interface object based on the cell layout can be scaled according to the fixed aspect ratio, without the problem that the aspect ratio changes when the size of the interface object is adjusted. As an alternative, considering that the size scale of present displays is typically 16:9, the aspect ratio may be set here to 16:9, thereby enabling the layout to be done on a cell basis to better fill the presentation area and to have a size ratio that matches the display, with better results.

It will be appreciated that the corresponding code for setting the fixed aspect ratio may be written into the aforementioned HTML file so that the browser may automatically retrieve the fixed aspect ratio when running the HTML file. The corresponding code example is as follows:

thus, after determining the aspect ratio of the cell, the length h of the cell 2022 in the second direction can be calculated by using the aspect ratio and combining the length w of the cell 2022 in the first direction.

After the length h of the cell 2022 along the second direction is obtained, the size of the cell 2022 is obtained, so that the display area 202 can be divided into a plurality of cells 2022 based on the size of the cell 2022 and the size of the display area 202, as shown in fig. 2A.

For convenience of writing code, the cell 2022 and the left-side pitch and the upper-side pitch thereof may be collectively combined into one cell (or cell assembly) 2024, and the cell 2024 is shown as a single gray rectangle in fig. 2A for convenience of illustration. Cell 2022 is in the cell 2024, actually the content field of the cell 2024. Thus, the presentation area 202 can be divided into a grid shape based on the cells 2024.

After the division of the cell 2022 is completed, the cell 2022 may be displayed in the page 200 for the developer to complete the layout of the interface design based on the visualized cell 2022.

FIG. 2B illustrates another schematic diagram of an exemplary page 200, according to an embodiment of the disclosure.

As shown in fig. 2B, a plurality of cells 2022 arranged in an array are shown in the presentation area 202 of the page 200. Also, a plurality of icons 204 are arranged in the non-display area of the page 200. These icons 204 correspond one-to-one to the corresponding interface objects that need to be laid out in the interface. As an alternative embodiment, the association relationship between the icon 204 and the interface object may be set in advance, and the interface object may be subjected to parameter setting.

In some embodiments, each interface object that can be used for interface design layout may be first subjected to parameter setting. Exemplary code for parameter setting of interface objects is shown below:

in the above code, w is shorthand of width and means the number of cells occupied by the interface object along the first direction, and h is shorthand of height and means the number of cells occupied by the interface object along the second direction. In view of this, the interface object is implemented in the above code in the form of a card, i.e., a rectangular area sized by w and h. In this way, interface objects may be laid out in the presentation area 202 in the form of occupied cells and interface objects may occupy at least one cell 2022, so that more regularly shaped interface objects may be formed.

Each interface object in the code has a corresponding name, and the names correspond to the icons 204 one by one, and the code can be written into the HTML file, so that the interface object name corresponding icon 204 can be rendered in the page 200 when the browser runs the HTML file, as shown in fig. 2B.

W and h in the code may be preset, and may be specifically set according to a size occupied by the interface object. It is understood that the interface objects listed in the above codes can be used for layout of interface design for the platform interface of the park management system, but this example is only illustrative, and when the other interface designs are laid out, the interface objects can be set according to specific requirements.

With continued reference to FIG. 2B, in page 200, the layout of the interface design can be achieved by dragging icon 204. As an alternative embodiment, the dragging of the icon 204 may be implemented using a native drag event of the browser HTML 5.

Assume that the developer has selected icon 2042 in fig. 2B (pointing to the selected icon with a hand icon in fig. 2B) and dragged icon 2042 in the direction of the arrow in fig. 2B.

In some embodiments, in the process of dragging the icon 2042, if the current dragging position of the dragging operation is in the display area 202, a virtual image 2026 of the interface object corresponding to the icon 2042 may be generated at a position of the display area 202 corresponding to the current dragging position, as shown in fig. 2C. The size of the virtual image 2026 is the same as the size of the corresponding interface object, so that by generating the virtual image 2026, a developer can know the size of the finally generated interface object in the process of dragging the icon 2042, and the developer is assisted in determining the position where the interface object can be placed. It is to be appreciated that, in light of the foregoing, the size of the virtual image 2026 is the same as the size of the corresponding interface object, and thus, the corresponding virtual image 2026 can be generated by taking the size of the interface object.

As an alternative embodiment, in the process of dragging the icon 2042, if the current dragging position of the dragging operation is changed, for example, moved to another cell, a virtual image 2026 may be regenerated by the cell, as shown in fig. 2D. In this way, during the process of dragging the icon 2042, the position of the virtual image 2026 can be changed in real time according to the change of the dragged position, and the developer can be better assisted in realizing the layout.

Next, when the developer releases the icon 2042, for example, at the position shown in fig. 2D, an interface object 2028 corresponding to the icon 2042 may be generated at the drag operation release position of the display area 202 of the page 200, as shown in fig. 2E. As an optional embodiment, since the icon 2042 has a one-to-one correspondence relationship with the interface object 2028, and the number of the cells 2022 occupied by the interface object 2028 is preset, the interface object 2028 related to the total area of the corresponding number of cells may be generated at the drag operation release position.

Specifically, taking the interface object 2028 shown in fig. 2E as an example, if w of the interface object 2028 is 1, and h is 2, it indicates that the interface object 2028 should occupy one cell in the first direction and two cells in the second direction. Thus, the area specifically occupied by the interface object 2028 includes at least two cells adjacent in the second direction and the space between the two adjacent cells, as shown in fig. 2E.

In some embodiments, when determining the specific layout position of the interface object 2028, the following steps may be specifically adopted to implement:

first, a release position of the drag operation in the display area is determined, then a target cell (for example, a cell pointed by the hand icon in fig. 2D) is determined according to the release position, and then the interface object 2028 is generated according to the position of the target cell and the number of cells occupied by the interface object 2028 (w is 1, h is 2).

For example, the target cell may be used as a starting cell, a corresponding number of cells may be determined along a first direction or a second direction, and then a region enclosed by the cells may be used as a corresponding interface object. Taking the interface object 2028 shown in fig. 2E as an example, if the number of cells occupied by the interface object 2028 in the second direction is 2, the target cell and one cell adjacent to the target cell in the second direction are used as cells for generating the interface object. Meanwhile, if the number of cells occupied by the interface object 2028 in the first direction is 1, no extension may be made. Thus, a 1 × 2 area (including the space area between the cells) is formed as the occupied area of the interface object 2028.

It can be understood that the real-time position of the drag operation may be represented by coordinates, and as an alternative embodiment, the position coordinates may be determined by using the upper left corner of the display area 202 as the origin of coordinates, the first direction as the x-axis, and the second direction as the y-axis, so as to determine the position relationship between the drag operation and the corresponding cell.

Specifically, assuming that the width of the presentation area 202 is 1664px (pixel), then subtracting the margin 16px × 4 and dividing by 4, i.e., the width of the cell 2022 is 400px, we can obtain that the height of the cell 2022 is 225px by the aspect ratio of 16. Suppose the current coordinate of the drag operation is (716, 100), 716 is greater than 400+16 and less than (400 + 16) × 2, the target cell is located in the second vertical column, the ordinate is 100, and 100 is less than 225+16. The target cell is in the first row. In summary, the target cell is determined.

After the layout of the interface object 2028 is completed, in some embodiments, the information of the icon 2042, the position information of the target cell, and the number of cells occupied by the interface object 2028 may also be stored, so that the data may be called when the interface is subsequently presented, thereby generating the interface object 2028 at the corresponding position of the interface. Exemplary structural data submitted to the backend by the save commit phase is shown below:

then, the developer may further continue to select another icon 204 to drag the layout, and further generate an interface object corresponding to the icon 204 until the overall layout of the interface design is completed. FIG. 2F shows yet another schematic diagram of an exemplary page in accordance with an embodiment of the present disclosure. As shown in FIG. 2F, in the presentation area 202 of the page 200, the developer has completed the layout of an interface design.

At this time, the developer may generate a corresponding interface based on the display area 202 and the interface objects already laid out therein, and may store the interface as a file and then upload the file to the server 104 for the corresponding computer product to call to generate the corresponding interface.

Further, returning to fig. 1, the user may use the terminal device 106 to send a request for using a corresponding computer product to the server 104, the server 104 responds to the request and returns a file for implementing each function of the computer product to the terminal device 106, the file may correspondingly include a file of the visual interface, and the visual interface may be laid out in the manner described in the foregoing embodiment. It will be appreciated that the corresponding data that generates the interface may include the aforementioned exemplary structural data. The terminal device 106 may complete interface rendering based on the structure data by running the file returned by the server 104, and generate a corresponding interface object at a corresponding position of the interface, thereby displaying a corresponding interface 300, as shown in fig. 3.

The process of generating the interface 300 will now be described with the foregoing example structural data taken as an example.

Firstly, the size of the display area of the browser is obtained, and then the width and the height of the cell are calculated. This step is similar to the method employed in the previous embodiment, and is not described herein again.

Next, from the foregoing exemplary structure data, the width and height of the interface object are calculated:

width: cell width × w +16 × (w-1);

height: cell height × h +16 × (h-1).

The starting cell of the interface object is then determined.

Calculating the left distance: x × cell width + (x + 1) × 16, x is the number of cells from the left edge.

Calculating the upper side distance: y x cell height + y x 16, y is the number of cells from the upper edge.

From this point, the interface object is fully exposed in the interface 300.

Then, the interface objects of the interface 300 are displayed in the manner described above, and the display of the interface 300 is completed.

As can be seen from the foregoing embodiments, the solution provided by some embodiments of the present disclosure is a grid layout with a distance, the size of the cells used for implementing the layout is adaptive, and the aspect ratio is a fixed value (e.g., 16. In addition, because the embodiment designs the edge distance between the cells, the visual effect can be better assisted during dragging, and the interface objects can be better typeset.

In some embodiments of the present disclosure, all interface objects have preset initial values, that is, how many cells it occupies in the first direction and how many cells it occupies in the first direction. Compared with the traditional method, the method for setting the interface object to occupy the fixed cells has the advantages that deformation is avoided, and the visual effect can be better presented. The interface object in the embodiment of the present disclosure may be understood as a container storing corresponding content, different interface objects store different content, and corresponding content may be correspondingly filled in the interface object when a specific program interface is implemented.

Some embodiments of the present disclosure provide a solution to set the aspect ratio of the cells by using the CSS native fixed aspect ratio attribute (aspect ratio), so that the aspect ratio of each cell is specified by using this aspect ratio attribute, and after the width of the cell is calculated, the height of the cell can be conveniently calculated according to the aspect ratio.

Some embodiments of the present disclosure provide a solution that all interface objects occupy a fixed number of cells with a fixed aspect ratio at the beginning of the design. The design has the advantages that the interface object generated by dragging is the optimal proportion designed by UI vision, so that the size proportion maladjustment caused by the arbitrariness of dragging operation can be avoided, the user operation can be minimized, and the user can conveniently realize the layout of the interface design.

According to the scheme provided by some embodiments of the present disclosure, the gridding layout can be automatically aligned horizontally or vertically, and the cells required to be occupied by the interface object are automatically prompted through the virtual image, so that the drawing effect (that is, the effect of aligning by cells) is the same as that of adsorption. In addition, the edge distances are arranged among the unit grids, so that a user can visually determine the placing position of the interface object more conveniently. Since the cells are of a fixed aspect ratio design, they can be varied in size, and thus visually, can fit more screens of different sizes.

The embodiment of the disclosure also provides a layout method of the interface design. Fig. 4 illustrates a flow diagram of an exemplary method 400 provided by an embodiment of the present disclosure. The method 400 may be applied to the terminal device 102 of fig. 1, and as shown in fig. 4, the method 400 may further include the following steps.

At step 402, a page (e.g., page 200 of fig. 2A) for laying out the interface design is provided, the page including at least one icon (e.g., icon 204 of fig. 2A) for dragging an interface object that generates the interface design.

In some embodiments, the method 400 further comprises: the size of the presentation area (e.g., presentation area 202 of fig. 2A) of the page is determined and the presentation area is divided into a plurality of cells (e.g., cell 2022 of fig. 2A) according to the size of the presentation area so that a user can implement the layout of the interface design on a cell basis.

In some embodiments, determining a size of a display area of the page and dividing the display area into a plurality of cells according to the size of the display area includes:

determining a size of a display area of the page, a number of cells arranged in a first direction, a spacing between a cell near a first edge of the display area perpendicular to the first direction and the first edge (e.g., spacing d1 of fig. 2A), and a spacing between adjacent cells (e.g., spacing d3 of fig. 2A);

determining a length of a cell along a first direction (e.g., length w of fig. 2A) of a display area of the page according to a size of the display area, a number of cells arranged along the first direction, a spacing between a cell near a first edge of the display area perpendicular to the first direction and the first edge, and a spacing between adjacent cells;

determining an aspect ratio of the cell, and determining a length of the cell in a second direction (e.g., length h of fig. 2A) based on the aspect ratio; and

and dividing the display area into a plurality of cells according to the length of the cells along the first direction, the length of the cells along the second direction and the size of the display area.

In this way, the cells can be divided based on the size of the display area, so that the interface which can be laid out can be adapted to the size of the display screen through the cells.

In step 404, in response to a drag operation on a target icon (e.g., the icon 2042 of fig. 2B) of the at least one icon, a target interface object (e.g., the interface object 2028 of fig. 2E) corresponding to the target icon is generated at a position, corresponding to the drag operation, of the display area of the page; the display area comprises a plurality of cells, the target interface object is arranged in the display area in a form of occupying cells, and the target interface object occupies at least one cell.

In some embodiments, before generating the target interface object corresponding to the target icon at the position of the display area of the page corresponding to the drag operation, the method further includes: in response to the current drag position of the drag operation being in the presentation area, generating a virtual image (e.g., virtual image 2026 of fig. 2C and 2D) of the target interface object at a position of the presentation area corresponding to the current drag position. Therefore, the size of the interface object to be generated can be reminded by the user through the virtual image in the dragging process, and the user can conveniently perform layout.

In some embodiments, in response to a drag operation for a target icon of the at least one icon, generating a target interface object corresponding to the target icon at a position of a display area of the page corresponding to the drag operation includes: in response to a drag operation for a target icon in the at least one icon, determining a target interface object corresponding to the target icon and the number of cells occupied by the target interface object; and generating the target interface object at the position, corresponding to the dragging operation, of the display area, wherein the size of the target interface object is related to the total area of the number of cells.

In some embodiments, the number of cells occupied by the target interface object includes a number of cells occupied by the target interface object in a first direction and a number of cells occupied by the target interface object in a second direction, the first direction being perpendicular to the second direction.

In some embodiments, generating the target interface object at a position of the presentation area corresponding to the drag operation includes: determining a release position of the drag operation in the display area; determining a target cell according to the release position; and generating the target interface object according to the position of the target cell and the number of the cells occupied by the target interface object.

In some embodiments, the method 400 further comprises: and storing the information of the target icon, the position information of the target cell and the number of the cells occupied by the target interface object, so that the data can be called when the interface is displayed subsequently, and further an interface object is generated at the corresponding position of the interface.

At step 406, an interface (e.g., interface 300 of fig. 3) corresponding to the interface design is generated based on the presentation area and the target interface object.

It should be noted that the method of the embodiments of the present disclosure may be executed by a single device, such as a computer or a server. The method of the embodiment can also be applied to a distributed scene and completed by the mutual cooperation of a plurality of devices. In such a distributed scenario, one of the devices may only perform one or more steps of the method of the embodiments of the present disclosure, and the devices may interact with each other to complete the method.

It should be noted that the above describes some embodiments of the disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments described above and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.

The embodiment of the disclosure also provides an interface display method. Fig. 5 illustrates a flow diagram of an exemplary method 500 provided by an embodiment of the present disclosure. The method 500 may be applied to the terminal device 106 of fig. 1, and as shown in fig. 5, the method 500 may further include the following steps.

In step 502, a first instruction to present the interface is received, the interface including at least one interface object.

In step 504, the interface object is displayed in the interface according to the first instruction; the display area comprises a plurality of cells, and the interface object is arranged in the display area in a form of occupying cells and occupies at least one cell.

In some embodiments, the method 500 further comprises: determining the size of a display area of the page, and dividing the display area into a plurality of cells according to the size of the display area.

determining the size of a display area of the page, the number of cells arranged along a first direction, the distance between a cell close to a first edge of the display area, which is perpendicular to the first direction, and the first edge, and the distance between adjacent cells;

determining the length of the unit cells along a first direction according to the size of a display area of the page, the number of the unit cells arranged along the first direction, the distance between the unit cells close to a first edge of the display area, which is perpendicular to the first direction, and the first edge, and the distance between adjacent unit cells;

determining the aspect ratio of the unit cell, and determining the length of the unit cell along a second direction according to the aspect ratio; and

In some embodiments, presenting the interface object in the interface includes: determining the position of the interface object in the display area and the number of occupied cells; and displaying the interface object in the interface according to the position of the interface object in the display area and the number of occupied cells.

In some embodiments, the method is applied to a browser, and the method further comprises: registering a change event of the browser; and updating the size of the display area according to the change event of the browser, so that the interface can adapt to the size of the display screen.

It should be noted that the method of the embodiments of the present disclosure may be executed by a single device, such as a computer or a server. The method of the embodiment can also be applied to a distributed scene and is completed by the mutual cooperation of a plurality of devices. In such a distributed scenario, one of the devices may only perform one or more steps of the method of the embodiments of the present disclosure, and the devices may interact with each other to complete the method.

The embodiment of the present disclosure also provides a computer device for implementing the

method

400 or 500 described above. Fig. 6 shows a hardware structure diagram of an exemplary computer device 600 provided by the embodiments of the present disclosure. The computer device 600 may be used to implement the terminal device 102 of fig. 1. In some scenarios, the computer device 600 may also be used to implement the server 104, the terminal device 106, and the database server 108 of fig. 1.

As shown in fig. 6, the computer device 600 may include: a processor 602, a memory 604, a network module 606, a peripheral interface 608, and a bus 610. The processor 602, memory 604, network module 606, and peripheral interface 608 are communicatively coupled to each other within the computer device 600 via bus 610.

Processor 602 may be a Central Processing Unit (CPU), an image processor, a neural Network Processor (NPU), a Microcontroller (MCU), a programmable logic device, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), or one or more Integrated circuits. The processor 602 may be used to perform functions related to the techniques described in this disclosure. In some embodiments, processor 602 may also include multiple processors integrated into a single logic component. For example, as shown in FIG. 6, the processor 602 may include a plurality of processors 602a, 602b, and 602c.

The memory 504 may be configured to store data (e.g., instructions, computer code, etc.). As shown in fig. 5, the data stored by the memory 604 may include program instructions (e.g., for implementing the methods of embodiments of the present disclosure) as well as data to be processed (e.g., the memory may store configuration files for other modules, etc.). The processor 602 may also access program instructions and data stored by the memory 604 and execute the program instructions to operate on the data to be processed. Memory 604 may include volatile memory devices or nonvolatile memory devices. In some embodiments, the memory 604 may include Random Access Memory (RAM), read Only Memory (ROM), optical disks, magnetic disks, hard disks, solid State Disks (SSDs), flash memory, memory sticks, and the like.

The network module 606 may be configured to provide communications with other external devices to the computer device 600 via a network. The network may be any wired or wireless network capable of transmitting and receiving data. For example, the network may be a wired network, a local wireless network (e.g., bluetooth, wiFi, near Field Communication (NFC), etc.), a cellular network, the internet, or a combination of the above. It is to be understood that the type of network is not limited to the specific examples described above.

Peripheral interface 608 may be configured to connect computer device 600 with one or more peripheral devices for the input and output of information. For example, the peripheral devices may include input devices such as a keyboard, mouse, touch pad, touch screen, microphone, various sensors, and output devices such as a display, speaker, vibrator, indicator light.

The bus 610 may be configured to transfer information between various components of the computer device 600 (e.g., the processor 602, the memory 604, the network module 606, and the peripheral interface 608), such as internal buses (e.g., processor-memory buses), external buses (USB ports, PCI-E buses), and so forth.

It should be noted that although the architecture of the computer device 600 described above only shows the processor 602, the memory 604, the network module 606, the peripheral interface 608 and the bus 610, in a specific implementation, the architecture of the computer device 600 may also include other components necessary for normal operation. Moreover, those skilled in the art will appreciate that the architecture of the computer device 600 described above may also include only the components necessary to implement the embodiments of the present disclosure, and need not include all of the components shown in the figures.

Based on the same inventive concept, corresponding to any of the above-described embodiment methods, the present disclosure also provides a non-transitory computer-readable storage medium storing computer instructions for causing the computer to perform the

method

400 or 500 according to any of the above embodiments.

Computer-readable media of the present embodiments, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Disks (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device.

The computer instructions stored in the storage medium of the foregoing embodiment are used to enable the computer to execute the

method

400 or 500 described in any embodiment, and have the beneficial effects of the corresponding method embodiment, which are not described in detail herein.

The present disclosure also provides a computer program product comprising a computer program, corresponding to any of the

embodiment methods

400 or 500 described above, based on the same inventive concept. In some embodiments, the computer program is executable by one or more processors to cause the processors to perform the

method

400 or 500. Corresponding to the execution subject corresponding to each step in the embodiments of the

method

400 or 500, the processor executing the corresponding step may be of the corresponding execution subject.

The computer program product of the above embodiment is used to enable a processor to execute the

method

400 or 500 according to any of the above embodiments, and has the advantages of the corresponding method embodiments, which are not described herein again.

Those of ordinary skill in the art will understand that: the discussion of any embodiment above is meant to be exemplary only, and is not intended to intimate that the scope of the disclosure, including the claims, is limited to these examples; within the idea of the present disclosure, also technical features in the above embodiments or in different embodiments may be combined, steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present disclosure as described above, which are not provided in detail for the sake of brevity.

In addition, well-known power/ground connections to Integrated Circuit (IC) chips and other components may or may not be shown within the provided figures for simplicity of illustration and discussion, and so as not to obscure the embodiments of the disclosure. Furthermore, devices may be shown in block diagram form in order to avoid obscuring embodiments of the present disclosure, and this also takes into account the fact that specifics with respect to implementation of such block diagram devices are highly dependent upon the platform within which the embodiments of the present disclosure are to be implemented (i.e., specifics should be well within purview of one skilled in the art). Where specific details (e.g., circuits) are set forth in order to describe example embodiments of the disclosure, it should be apparent to one skilled in the art that the embodiments of the disclosure can be practiced without, or with variation of, these specific details. Accordingly, the description is to be regarded as illustrative instead of restrictive.

While the present disclosure has been described in conjunction with specific embodiments thereof, many alternatives, modifications, and variations of these embodiments will be apparent to those of ordinary skill in the art in light of the foregoing description. For example, other memory architectures, such as Dynamic RAM (DRAM), may use the discussed embodiments.

The disclosed embodiments are intended to embrace all such alternatives, modifications and variances which fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalents, improvements, and the like that may be made within the spirit and principles of the embodiments of the disclosure are intended to be included within the scope of the disclosure.

Claims

1. A layout method of an interface design comprises the following steps:

responding to a drag operation of a target icon in the at least one icon, and generating a target interface object corresponding to the target icon at a position, corresponding to the drag operation, of a display area of the page; the display area comprises a plurality of cells, the target interface object is arranged in the display area in an occupied cell mode and occupies at least one cell; and

2. The method of claim 1, further comprising:

determining the size of a display area of the page, and dividing the display area into a plurality of cells according to the size of the display area.

3. The method of claim 2, wherein determining a size of a presentation area of the page and dividing the presentation area into a plurality of cells according to the size of the presentation area comprises:

determining the size of a display area of the page, the number of unit cells arranged along a first direction, the distance between a unit cell close to a first edge of the display area, the first edge being perpendicular to the first direction, and the distance between adjacent unit cells;

4. The method of claim 1, wherein in response to a drag operation for a target icon of the at least one icon, generating a target interface object corresponding to the target icon at a position of a presentation area of the page corresponding to the drag operation comprises:

in response to a drag operation for a target icon in the at least one icon, determining a target interface object corresponding to the target icon and the number of cells occupied by the target interface object; and

and generating the target interface object at a position of the display area corresponding to the dragging operation, wherein the size of the target interface object is related to the total area of the number of cells.

5. The method of claim 4, wherein the number of cells occupied by the target interface object includes a number of cells occupied by the target interface object in a first direction and a number of cells occupied by the target interface object in a second direction, the first direction being perpendicular to the second direction.

6. The method of claim 4, wherein generating the target interface object at a location of the presentation area corresponding to the drag operation comprises:

determining a release position of the drag operation in the display area;

determining a target cell according to the release position; and

and generating the target interface object according to the position of the target cell and the number of the cells occupied by the target interface object.

7. The method of claim 6, further comprising:

and storing the information of the target icon, the position information of the target cell and the number of the cells occupied by the target interface object.

8. The method of claim 1, wherein before generating the target interface object corresponding to the target icon at the position of the display area of the page corresponding to the drag operation, the method further comprises:

and responding to the current dragging position of the dragging operation in the display area, and generating a virtual image of the target interface object at the position, corresponding to the current dragging position, of the display area.

9. A method of presenting an interface, the interface comprising at least one interface object, the method comprising:

receiving a first instruction for displaying the interface; and

10. The method of claim 9, further comprising:

11. The method of claim 10, wherein determining a size of a presentation area of the page and dividing the presentation area into a plurality of cells according to the size of the presentation area comprises:

determining the length of the unit cell along a first direction according to the size of a display area of the page, the number of the unit cells arranged along the first direction, the distance between the unit cell close to a first edge of the display area, which is perpendicular to the first direction, and the first edge, and the distance between adjacent unit cells;

12. The method of claim 11, wherein presenting the interface object in the interface comprises:

determining the position of the interface object in the display area and the number of occupied cells; and

and displaying the interface object in the interface according to the position of the interface object in the display area and the number of occupied cells.

13. The method of claim 9, wherein the method is applied to a browser, and the method further comprises:

registering a change event of the browser; and

and updating the size of the display area according to the change event of the browser.

14. A computer device comprising one or more processors, memory; and one or more programs, wherein the one or more programs are stored in the memory and executed by the one or more processors, the programs comprising instructions for performing the method of any of claims 1-8 or any of claims 9-13.

15. A non-transitory computer-readable storage medium containing a computer program which, when executed by one or more processors, causes the processors to perform the method of any one of claims 1-8 or the method of any one of claims 9-13.

16. A computer program product comprising computer program instructions which, when run on a computer, cause the computer to perform the method of any of claims 1-8 or the method of any of claims 9-13.