CN114579223A

CN114579223A - Interface layout method, electronic equipment and computer readable storage medium

Info

Publication number: CN114579223A
Application number: CN202011401053.6A
Authority: CN
Inventors: 杨婉艺; 李春东; 孟德泉; 周星辰
Original assignee: Huawei Technologies Co Ltd
Current assignee: Huawei Technologies Co Ltd
Priority date: 2020-12-02
Filing date: 2020-12-02
Publication date: 2022-06-03
Also published as: WO2022116936A1

Abstract

In the technical solution of the interface layout method, the electronic device and the computer-readable storage medium provided in the embodiments of the present invention, when a first terminal device is connected to a second terminal device, a display resolution of the second terminal device is obtained; calculating the screen width-height ratio of the second terminal device according to the display resolution, and determining a proportional interval in which the screen width-height ratio is located from a plurality of pre-divided proportional intervals; acquiring a display layout style corresponding to a proportional interval according to the proportional interval in which the screen width-height ratio is positioned; selecting a first visual element from an application page of the first terminal device based on the display layout style; the first visual elements are distributed according to the display layout style to generate a display interface of the second terminal device, and the display layout styles corresponding to different proportion intervals are set, so that when the first visual elements are distributed according to the display layout styles, the first visual elements can be guaranteed to achieve the visual effects of tidiness, attractiveness and high usability.

Description

Interface layout method, electronic equipment and computer readable storage medium

[ technical field ] A method for producing a semiconductor device

The present invention relates to the field of electronic technologies, and in particular, to an interface layout method, an electronic device, and a computer-readable storage medium.

[ background of the invention ]

In a distributed scenario, an interface displayed on an original mobile phone needs to be expanded to other devices for display, such as a car machine, a tablet, a computer, a television, an AR, and a VR. In the related art, methods of experiencing the same service on a plurality of devices generally include the following two methods: one is to install a client of a service application on multiple devices, however, this approach requires a designer to design and export interface resources on multiple devices, and a developer also needs to develop multiple sets of layout resources, thereby resulting in a problem of consuming large manpower and material resources. In addition, in this way, once an interface which is not adaptive in a targeted manner is encountered, the problems of misplaced interface display elements, incomplete display and the like can occur. The other is screen projection distribution, however, the traditional screen projection method easily causes the problems of poor visual effect, various modules on the application interface being uneven, staggered and overlapped, and poor usability when the same application interface is distributed on different devices.

[ summary of the invention ]

In view of this, the present invention provides an interface layout method, an electronic device, and a computer-readable storage medium, which set display layout patterns corresponding to different scale intervals, so that when a first visual element is laid out according to the display layout patterns, the first visual element is guaranteed to achieve the visual effects of being neat, beautiful, easy to use, and adaptive to a second terminal device.

In one aspect, an embodiment of the present invention provides an interface layout method, applied to a first terminal device, including:

when the first terminal equipment is connected with second terminal equipment, acquiring the display resolution of the second terminal equipment;

calculating the screen width-height ratio of the second terminal device according to the display resolution, and determining a proportional interval in which the screen width-height ratio is located from a plurality of pre-divided proportional intervals;

acquiring a display layout style corresponding to the proportional interval according to the proportional interval in which the screen width-height ratio is positioned;

selecting a first visual element from an application page of the first terminal device based on the display layout style;

and laying out the first visual elements according to the display layout style to generate a display interface of the second terminal device.

As a possible implementation manner, the display layout style includes the number of display windows, the number of grids, a grid width, an edge distance, and a space, where the number of grids included in each display window is different, the edge distance is used to indicate a distance between a first visual element and an edge of a display interface of the second terminal device, and the space is used to indicate a distance between the first visual elements;

before the laying out the first visual element according to the display layout style to generate the display interface of the second terminal device, the method includes:

determining the number of grids occupied by the first visual element according to the type of the first visual element, the acquired attribute information of the first visual element and a preset element layout rule, wherein the element layout rule comprises layout rules corresponding to a plurality of types of first visual elements.

As a possible implementation manner, after determining the number of grids occupied by the first visual element according to the type of the first visual element, the obtained attribute information of the first visual element, and a preset element layout rule, the method includes:

acquiring equipment information of the second terminal equipment, wherein the equipment information comprises the size of a display area, the position of the display area and the equipment type;

and determining the position of the first visual element according to the equipment information and the number of the grids occupied by the first visual element, wherein the position comprises a display window where the first visual element is located and the position where the display window is located in the display area of the second terminal equipment.

As a possible implementation manner, the laying out the first visual element according to the display layout style to generate a display interface of the second terminal device includes:

in the display layout style, according to the acquired position of each first visual element and the number of the grids occupied by each first visual element, the plurality of first visual elements are laid out to generate a display interface of the second terminal device, wherein the total number of the grids occupied by the plurality of first visual elements is less than or equal to the number of the grids.

As a possible implementation manner, before determining the number of grids occupied by the first visual element according to the type of the first visual element, the obtained attribute information of the first visual element, and a preset element layout rule, the method further includes:

identifying a type of each of the first visual elements;

and determining attribute information of each first visual element according to the acquired number of the first visual elements of each type and the ratio of the width to the height of the screen, wherein the attribute information comprises a display state, an element width, a font size and a scroll state.

As a possible implementation manner, after determining attribute information of each first visual element according to the obtained number of the first visual elements of each type and the ratio of the screen width to the height, the method further includes:

and modifying the attribute information of the first visual element to be displayed according to the display resolution and the display requirement, wherein the display requirement is used for indicating the display requirement of the user on the content displayed on the display interface of the second terminal device.

As a possible implementation manner, after the laying out the first visual element according to the display layout style to generate the display interface of the second terminal device, the method further includes:

and displaying the display interface in a virtual screen, and projecting the display interface to the second terminal equipment so that the display interface is displayed on a display screen of the second terminal equipment.

and receiving an event which is sent by the second terminal equipment and used for switching a display interface, selecting a second visual element from an application page of the first terminal equipment based on the display layout style according to the event for switching the display interface, and laying out the second visual element according to the display layout style to generate the display interface of the second terminal equipment.

In a second aspect, an embodiment of the present invention provides an electronic device, including: a display screen; one or more processors; a memory; a plurality of application programs; and one or more computer programs, wherein the one or more computer programs are stored in the memory, the one or more computer programs comprising instructions which, when executed by the apparatus, cause the apparatus to perform the interface layout method in any of the possible implementations of any of the above aspects.

In a third aspect, an embodiment of the present invention provides a computer-readable storage medium for storing program code executed by a device, where the program code includes instructions for executing the method in the first aspect or any possible implementation manner of the first aspect.

In the technical scheme provided by the embodiment of the invention, when the first terminal equipment is connected with the second terminal equipment, the display resolution of the second terminal equipment is obtained; calculating the screen width-height ratio of the second terminal device according to the display resolution, and determining a proportional interval in which the screen width-height ratio is located from a plurality of pre-divided proportional intervals; acquiring a display layout style corresponding to a proportional interval according to the proportional interval in which the screen width-height ratio is positioned; selecting a first visual element from an application page of the first terminal device based on the display layout style; the first visual elements are distributed according to the display layout style to generate a display interface of the second terminal device, and the display layout styles corresponding to different proportion intervals are set, so that when the first visual elements are distributed according to the display layout styles, the first visual elements can be guaranteed to achieve the visual effects of being neat, attractive, high in usability and adaptive to the second terminal device.

[ description of the drawings ]

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive labor.

FIG. 1 is a diagram of a display layout of the related art showing poor visual effect;

FIG. 2 is an architecture diagram of an interface layout system according to an embodiment of the present invention;

FIG. 3 is a flowchart of an interface layout method according to an embodiment of the present invention;

FIG. 4 is a diagram illustrating a display layout style according to an embodiment of the present invention;

FIG. 5 is a diagram illustrating a display layout style according to an embodiment of the present invention;

FIG. 6 is a diagram illustrating a display layout style according to an embodiment of the present invention;

FIG. 7 is a diagram illustrating a display layout style according to an embodiment of the present invention;

FIG. 8 is a diagram illustrating a display layout style according to an embodiment of the present invention;

FIG. 9 is a diagram illustrating a display layout style according to an embodiment of the present invention;

FIG. 10a is a diagram illustrating a display interface of an application according to an embodiment of the present invention;

FIG. 10b is a diagram illustrating an effect of selecting a first visual element from a display interface of an application according to an embodiment of the present invention;

FIGS. 11 a-11 c are schematic diagrams of different numbers of tab elements at different display resolutions according to an embodiment of the present invention;

FIG. 12 is a diagram illustrating an effect of laying out a first visual element according to an embodiment of the present invention;

FIG. 13 is a diagram illustrating an effect of laying out a first visual element according to an embodiment of the present invention;

FIG. 14 is a diagram illustrating an effect of laying out a first visual element according to an embodiment of the present invention;

FIG. 15 is a diagram illustrating an effect of laying out a first visual element according to an embodiment of the present invention;

FIG. 16 is a diagram illustrating an effect of laying out a first visual element according to an embodiment of the present invention;

FIG. 17 is a diagram illustrating an effect of laying out a plurality of first visual elements according to an embodiment of the present invention;

FIG. 18 is a diagram illustrating an effect of laying out a plurality of first visual elements according to an embodiment of the present invention;

FIG. 19 is a schematic block diagram of an electronic device provided by an embodiment of the invention;

fig. 20 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.

[ detailed description ] embodiments

For better understanding of the technical solutions of the present invention, the following detailed descriptions of the embodiments of the present invention are provided with reference to the accompanying drawings.

It should be understood that the described embodiments are only some embodiments of the invention, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

The terminology used in the embodiments of the invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. As used in the examples of the present invention and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise.

It should be understood that the term "and/or" as used herein is merely one type of associative relationship that describes an associated object, meaning that three types of relationships may exist, e.g., A and/or B, may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" herein generally indicates that the former and latter related objects are in an "or" relationship.

Before the interface layout method provided by the invention is introduced, the interface layout method in the related art is briefly introduced.

In a distributed scenario, it is often necessary to extend an interface exposed by an application on a certain device to other devices for exposure, for example, the other devices may include a car machine, a tablet, a computer, a television, or an Augmented Reality (AR)/Virtual Reality (VR) device.

In the related art, a designer is usually required to derive a resource corresponding to a display interface of an application, where the resource includes information of a plurality of first visual elements, and a developer performs layout according to device information of other devices and the resource corresponding to the display interface, so as to generate display interfaces of different devices. Since the first visual element is not screened in the related art, the problem of poor visual effect is easily caused, for example, as shown in fig. 1, this approach easily causes the problems of various modules on the application interface being jagged, overlapped by misalignment, and poor usability when the same application interface is distributed to different devices for display. For example, the text and the picture in fig. 1 have a problem of overlapping with each other in a misaligned state, thereby causing a problem of poor visual effect.

Further, in the related art, if the virtual screen selects different first visual elements according to different device sizes, the selected first visual elements cannot be linearly adaptive during layout, so that it is difficult to cover devices of all sizes. That is to say, in the related art, the virtual screen can select the first visual elements which are relatively most suitable according to the difference of the sizes of the devices, and stretch or zoom the first visual elements in equal proportion, so that the problems of shielding, disordered typesetting and the like among the first visual elements easily occur, and the display effect cannot be guaranteed.

Therefore, the technical problem to be solved by the invention is how to ensure that the display interface achieves the visual effect of being tidy, beautiful, easy to use and adaptive to the second terminal equipment when the interface of the plurality of second terminal equipment is adapted. Therefore, the embodiment of the present invention provides an interface layout method, which enables a second terminal device to layout a first visual element according to a display layout style corresponding to a different proportion interval, and ensures that a display interface of the second terminal device can achieve a neat, beautiful, easy-to-use and visual effect adaptive to the second terminal device.

The following briefly introduces a scenario applied by the interface layout method provided by the embodiment of the present invention.

Displaying a display interface of the same application to scenes of second terminal equipment with different sizes through the first terminal equipment:

the first terminal device of the embodiment of the present invention may be a device having a display function, such as a mobile phone, a tablet computer, a television, a desktop computer, a wearable device (e.g., a watch), an in-vehicle device, an Augmented Reality (AR)/Virtual Reality (VR) device, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, or a Personal Digital Assistant (PDA).

The second terminal device of the embodiment of the present invention may also be a device having a display function, such as a mobile phone, a tablet computer, a television, a desktop computer, a wearable device (e.g., a watch), an in-vehicle device, an Augmented Reality (AR)/Virtual Reality (VR) device, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, or a Personal Digital Assistant (PDA). The embodiment of the present application does not set any limit to the specific type of the first terminal device or the second terminal device.

In a distributed scenario, it is often necessary to present the display interface of the same application to a second terminal device of a different size. For example, taking the example that the second terminal devices with different sizes include the second terminal device a, the second terminal device B, and the second terminal device C, the display interfaces of the same application need to be respectively presented to the second terminal device a, the second terminal device B, and the second terminal device C, and the pages presented between each second terminal device have differences.

Based on the above scenario, an embodiment of the present invention provides an interface layout method, where a display resolution of a second terminal device is obtained, a screen width-height ratio of the second terminal device is calculated according to the display resolution, a proportional interval where the screen width-height ratio is located is determined from a plurality of pre-divided proportional intervals, a display layout style corresponding to the proportional interval is obtained according to the proportional interval where the screen width-height ratio is located, a first visual element is selected from an application page, the first visual element is laid out according to the display layout style to generate a display interface of the second terminal device, and the display layout styles corresponding to different proportional intervals are set, so that when the first visual element is laid out according to the display layout style, the display interface presented between the second terminal devices of each size is different, and the display interface is guaranteed to be neat, The appearance is attractive, the usability is strong, and the visual effect of the second terminal device is matched.

Compared with the related art, the interface layout method provided by the embodiment of the invention can determine the display layout style corresponding to the second terminal device by calculating the ratio of the screen width to the height of the second terminal device aiming at the scene that the first terminal device presents the display interface of the same application to the second terminal devices with different sizes, and set the display layout styles corresponding to different proportional intervals, so that when the first visual elements are laid out according to the display layout styles, the display interfaces presented between the second terminal devices with different sizes have differences, namely, the technical scheme of the embodiment of the invention is not the scheme of reducing or amplifying the first visual elements according to the display resolution of the second terminal devices in the related art, and the embodiment of the invention recombines and arranges the first visual elements, thereby ensuring that the display interface can be neatly and orderly, The appearance is attractive, the usability is strong, and the visual effect of the second terminal device is matched.

Fig. 2 is an architecture diagram of an interface layout system according to an embodiment of the present invention, as shown in fig. 2, the system 100 includes: a first terminal device 110 and a second terminal device 120.

In this embodiment of the present invention, the first terminal device 110 includes an interaction module 1101, a processing module 1102, a storage module 1103, a display module 1104, and a screen projection module 1105. The interaction module 1101 is configured to interact with the second terminal device 120, and the processing module 1102 is configured to calculate a screen width-to-height ratio of the second terminal device 120, determine a proportional interval where the screen width-to-height ratio is located, and acquire a display layout style corresponding to the proportional interval from the storage module 1103. The storage module 1103 is configured to store a display layout style corresponding to each scale interval. The display module 1104 is configured to display a display interface in a virtual screen. The screen projecting module 1105 is configured to project the display interface of the virtual screen to the second terminal device 120 through the screen projecting module 1105, so that the second terminal device 120 displays the display interface.

In this embodiment of the present invention, the second terminal device 120 includes an interaction module 1201 and a display module 1202. The interactive module 1201 is configured to send the display resolution of the terminal (the second terminal device 120) to the first terminal device 110. The interaction module 1201 is further configured to receive a display interface projected by the first terminal device 110 through the virtual screen. The display module 1202 is configured to display a display interface.

Specifically, the first terminal device 110 generates an information acquisition request to the second terminal device 120 through the interaction module 1101, and the second terminal device 120 generates the display resolution of the second terminal device 120 to the first terminal device 110 in response to the information acquisition request, so that the first terminal device 110 acquires the display resolution of the second terminal device 120.

Further, the first terminal device 110 calculates, through the processing module 1102, the screen width-height ratio of the second terminal device 120 according to the display resolution, determines a ratio interval where the screen width-height ratio is located from a plurality of pre-divided ratio intervals, and acquires a display layout style corresponding to the ratio interval according to the ratio interval where the screen width-height ratio is located.

The first terminal device 110 further selects a first visual element from an application page through the interaction module 1101, where the application page may include an application page of the first terminal device or an application page of a second terminal device, that is, the present invention does not limit a device to which the application page belongs.

The first terminal device 110 lays out the first visual element according to the display layout style through the processing module 1102 to generate a display interface of the second terminal device 120.

The first terminal device 110 displays a display interface in the virtual screen through the display module 1104, and projects the display interface to the second terminal device through the projection module 1105 of the virtual screen, so that the display screen of the second terminal device 120 displays the display interface.

In the embodiment of the present invention, through the system architecture 100, the display resolution of the second terminal device is obtained, the screen width-height ratio of the second terminal device is calculated according to the display resolution, a proportional interval where the screen width-height ratio is located is determined from a plurality of pre-divided proportional intervals, a display layout style corresponding to the proportional interval is obtained according to the proportional interval where the screen width-height ratio is located, a first visual element is selected from an application page, and the first visual element is laid out according to the display layout style, so as to generate the display interface of the second terminal device. The process of the interface layout method will be described in detail below with reference to fig. 3, which includes steps 102 to 114.

Fig. 3 is a flowchart of an interface layout method according to an embodiment of the present invention, which is applied to a first terminal device, and as shown in fig. 3, the method includes:

and 102, when the first terminal equipment is connected with second terminal equipment, acquiring the display resolution of the second terminal equipment.

In the embodiment of the present invention, based on fig. 2, when the first terminal device is connected to the second terminal device, the display resolution of the second terminal device can be obtained. For example, the display resolution of the second terminal device a is 2160 × 1620, and it can be determined that the width of the second terminal device a is 2160 and the height of the second terminal device a is 1620.

And 104, calculating the screen width-height ratio of the second terminal device according to the display resolution, and determining the proportional interval in which the screen width-height ratio is located from a plurality of pre-divided proportional intervals.

In the embodiment of the present invention, for example, after determining that the width of the second terminal device a is 2160 and the height of the second terminal device a is 1620 according to the display resolution of the second terminal device a, the screen width-height ratio of the second terminal device a can be calculated according to the width and the height of the second terminal device a, that is, the screen width-height ratio is 2160/1620 ≈ 1.33. After the screen width-height ratio of the second terminal device a is calculated, the ratio interval in which the screen width-height ratio is located is determined from the plurality of pre-divided ratio intervals.

The process of determining a plurality of pre-divided proportional intervals may include: the method comprises the steps of counting the width-height ratio of common equipment, and dividing a proportion interval according to the width-height ratio of the common equipment to determine a plurality of proportion intervals. In particular, table 1 below shows the resolution and corresponding aspect ratio of a common device, as shown in table 1 below:

TABLE 1

That is, through the statistics of table 1 above, 6 proportional intervals can be determined, where the 6 proportional intervals respectively include a first proportional interval, a second proportional interval, a third proportional interval, a fourth proportional interval, a fifth proportional interval, and a sixth proportional interval. Wherein, the first proportional interval: the width-height ratio is less than 1, and the second proportion interval is as follows: the width-height ratio is more than or equal to 1 and less than 1.33, and the third proportion interval is as follows: the width-height ratio is more than or equal to 1.33 and less than 1.78, and the fourth proportion interval is as follows: the width-height ratio is more than or equal to 1.78 and less than 2.66, and the fifth proportional interval is as follows: the width-height ratio is more than or equal to 2.66 and less than 3, and the sixth proportion interval is as follows: the width-height ratio is more than or equal to 3. In addition, other proportion intervals may be further divided according to the aspect ratio of other devices, which is not limited in the embodiment of the present invention.

Therefore, when the screen width-to-height ratio of the second terminal device a is calculated to be 1.33, the proportional interval in which the screen width-to-height ratio is located is determined to be the third proportional interval from the plurality of proportional intervals.

And 106, acquiring a display layout style corresponding to the proportional interval according to the proportional interval in which the screen width-height ratio is positioned.

In the embodiment of the invention, the display layout style comprises display windows, the number of grids, the grid width, the edge distance and the space, wherein the number of the grids contained in each display window is different, the edge distance is used for indicating the distance between the first visual elements, and the space is used for indicating the distance between the first visual elements and the edge of the display interface. It should be noted that the number of display windows, the number of grids, the grid width, the margin size, and the pitch size included in the display layout style corresponding to each proportional interval may be set according to requirements, which is not limited in the embodiment of the present invention.

As an alternative, for example, as shown in fig. 4, when the ratio of the screen width to the screen height is in the first ratio range, that is, when the ratio of the screen width to the screen height is in the ratio of the width to the height < 1, the display layout style corresponding to the ratio range includes: the number of display windows 1 includes 1, the number of grids 2 includes 8, the size of the margin 3 includes 34dp, and the size of the margin 4 includes 20 dp. The grid width may be calculated by integrating the width of the display resolution, the number of grids, the size of the margin, and the size of the pitch. Specifically, the grid width (display window width- (number of edges × size of edges) - (number of pitches × pitch size))/grid data, taking the width of the display window 1 as 760dp as an example, when the number of grids 2 includes 8, the size of edges 3 includes 34dp, and the size of pitches 4 includes 20dp, it is known that when the number of grids is 8, the pitch data formed between the grids is 7, and the edge data is 2, the grid width (760dp- (2 × 34dp) - (7 × 20 dp))/8) is 69 dp.

For example, as shown in fig. 5, when the ratio of the width to the height of the screen is in the second ratio range, that is, when the ratio of the width to the height of the screen is in the ratio range of 1 ≦ to < 1.33, the display layout style corresponding to the ratio range includes: the number of display windows 1 includes 1, the number of grids 2 includes 8, the size of the margin 3 includes 40dp, and the size of the margin 4 includes 20 dp. The grid width may be calculated by integrating the width of the display resolution, the number of grids, the size of the margin, and the size of the pitch. Taking the width of the display window 1 as 760dp as an example, when the number of the cells 2 includes 8, the size of the margin 3 includes 40dp, and the size of the space 4 includes 20dp, the cell width is (760dp- (2 × 40dp) - (7 × 20dp))/8 ≈ 67 dp.

For example, as shown in fig. 6, when the ratio of the screen width to the screen height is in the third ratio range, that is, when the ratio of the screen width to the screen height is in the ratio range of 1.33 ≦ to < 1.78, the display layout style corresponding to the ratio range includes: the number of display windows 1 includes 1, the number of grids 2 includes 8, the size of the margin 3 includes 50dp, and the size of the margin 4 includes 30 dp. The grid width may be calculated by integrating the width of the display resolution, the number of grids, the size of the margin, and the size of the pitch. Taking the width of the display window 1 as 760dp as an example, when the number of the cells 2 includes 8, the size of the margin 3 includes 50dp, and the size of the space 4 includes 30dp, the cell width is (760dp- (2 × 50dp) - (7 × 30dp))/8 ≈ 56 dp.

For example, as shown in fig. 7, when the ratio of the screen width to the screen height is in the fourth ratio range, that is, when the ratio of the screen width to the screen height is in the ratio range of 1.78 ≤ and the ratio of the width to the height < 2.66, the display layout style corresponding to the ratio range includes: the number of display windows 1 includes 1, the number of grids 2 includes 12, the size of margin 3 includes 54dp, and the size of margin 4 includes 32 dp. The grid width may be calculated by integrating the width of the display resolution, the number of grids, the size of the margin, and the size of the pitch. Taking the width of the display window 1 as 760dp as an example, when the number of the cells 2 includes 12, the size of the margin 3 includes 34dp, and the size of the space 4 includes 20dp, the cell width is (760dp- (2 × 34dp) - (11 × 20dp))/12 ≈ 39 dp.

For example, as shown in fig. 8, when the ratio of the screen width to the screen height is in the fifth ratio range, that is, when the ratio of the screen width to the screen height is in the ratio range of 2.66 ≦ to the ratio of the width to the height < 3, the display layout style corresponding to the ratio range includes: the number of display windows comprises 2, the number of grids 2 of the first display window 1 comprises 12, the pitch 3 size of the first display window 1 comprises 21dp, the pitch 4 size of the first display window 1 comprises 16dp, the number of grids 6 of the second display window 5 comprises 4, the pitch 7 size of the second display window 5 comprises 21dp, the pitch 8 size of the second display window 5 comprises 16dp, and the column pitch 9 between the second display window 5 and the first display window 1 comprises 16 dp. The grid width may be calculated by integrating the width of the display resolution, the number of grids, the size of the margin, and the size of the pitch. Taking the width of the first display window 1 as 760dp as an example, when the number of the cells 2 includes 12, the size of the margin 3 includes 21dp, and the size of the margin 4 includes 16dp, the cell width in the first display window 1 is (760dp- (2 × 21dp) - (11 × 16dp))/12 ≈ 45 dp. Taking the width of the second display window 5 as 300dp as an example, when the number of the cells 6 includes 4, the size of the margin 7 includes 21dp, and the size of the margin 8 includes 16dp, the cell width in the second display window 5 is (300dp- (2 dp) - (3 dp))/4 ≈ 52 dp.

For example, as shown in fig. 9, when the ratio of the width to the height of the screen is in the sixth ratio range, that is, when the ratio of the width to the height of the screen is in the width to the height ratio ≧ 3, the display layout style corresponding to the ratio range includes: the number of display windows includes 2, the number of grids 2 of the first display window 1 includes 12, the size of the margin 3 of the first display window 1 includes 28dp, the size of the pitch 4 of the first display window 1 includes 14dp, the number of grids 6 of the second display window 5 includes 4, the size of the margin 7 of the second display window 5 includes 28dp, the size of the pitch 8 of the second display window 5 includes 14dp, and the column pitch 9 between the second display window 5 and the first display window 1 includes 16 dp. The grid width may be calculated by integrating the width of the display resolution, the number of grids, the size of the margin, and the size of the pitch. Taking the width of the first display window 1 as 760dp as an example, when the number of the cells 2 includes 12, the size of the margin 3 includes 28dp, and the size of the margin 4 includes 14dp, the cell width in the first display window 1 is (760dp- (2 × 28dp) - (11 × 14dp))/12 ≈ 69 dp. Taking the width of the second display window 5 as 300dp as an example, when the number of the grids 6 includes 4, the size of the margin 7 includes 28dp, and the size of the margin 8 includes 14dp, the grid width in the second display window 5 is (300dp- (2 dp 28dp) - (3 dp))/4 ≈ 50 dp.

It should be noted that when the aspect ratio is greater than or equal to 2.66, the display interface needs to be divided into columns, that is, the display interface in the initial state includes 1 display window, and after the display interface is divided into columns, the display interface may include 2 display windows. For example, taking 2 display windows including a first display window and a second display window as an example, the column pitch between the first display window and the second display window (a new display window generated after column division) is assumed to be 16dp by default.

Further, in addition to the above-described column dividing operation, the aspect ratio of the second display window needs to be defined. For example, as shown in FIG. 8, when the aspect ratio is 2.66 ≦ 3, the screen width-to-height ratio of the second display window 5 defaults to 4:3, and as shown in FIG. 9, when the aspect ratio is ≧ 3, the screen width-to-height ratio of the second display window 5 defaults to 1: 1.

In the embodiment of the invention, the problem of poor layout effect caused by too wide or too narrow display interfaces in the subsequent layout process is solved by column dividing of the display interfaces, that is, the divided display windows are not too narrow or too wide by column dividing of the display interfaces, so that the first visual element can be ensured to achieve the visual effects of tidiness, attractiveness, strong usability and suitability for the second terminal equipment when the first visual element is subsequently laid out.

And 108, selecting a first visual element from the application page of the first terminal device based on the display layout style.

In this step, the first visual element may comprise one visual element or may comprise a group of visual elements.

In the embodiment of the invention, when the display interface of the same application is displayed on the equipment with different sizes through the virtual screen, the virtual screen can select different first visual elements according to the different sizes of the equipment. For example, when the display interface of a certain application is larger than the display interface of the second terminal device, if the first visual element is directly scaled down in an equal proportion, the first visual element may be blocked, and the layout may be disordered, so that the display effect cannot be guaranteed.

For example, fig. 10a is a schematic diagram of a display interface of an application, as shown in fig. 10a, the display interface of the application includes a plurality of first visual elements, for example, the plurality of first visual elements includes a first visual element a, a first visual element B, a first visual element C, a first visual element D, a first visual element E, a first visual element F, a first visual element G, a first visual element H, a first visual element I, a first visual element J, a first visual element K, a first visual element L, a first visual element M, a first visual element N, a first visual element O, a first visual element P, a first visual element Q, a first visual element R, a first visual element S, a first visual element T, a first visual element U, and a first visual element V. Fig. 10b is a schematic diagram of selecting a first visual element from the display interface of the application, as shown in fig. 10b, only 12 first visual elements are selected from the display interface of the application, where the 12 first visual elements include: a first visual element G, a first visual element H, a first visual element I, a first visual element J, a first visual element K, a first visual element L, a first visual element Q, a first visual element R, a first visual element S, a first visual element T, a first visual element U, and a first visual element V. It should be noted that the first visual element selected in fig. 10b is only an example, and besides, the specific element can be selected according to the requirement.

And 110, laying out the first visual elements according to the display layout style to generate a display interface of the second terminal device.

In the embodiment of the present invention, for example, in the above embodiment, only the first visual element G, the first visual element H, the first visual element I, the first visual element J, the first visual element K, the first visual element L, the first visual element Q, the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V are selected from the display interface of the application, so that the execution process of step 110 is to lay out the first visual element G, the first visual element H, the first visual element I, the first visual element J, the first visual element K, the first visual element L, the first visual element Q, the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V according to the display layout style corresponding to the second terminal device a, to generate a display interface of the second terminal device a.

Specifically, the execution process of step 110 may include:

step 1101, identifying a type of each first visual element.

In an embodiment of the present invention, the type of the first visual element may include a card, a tab, a play bar, and the like. In particular, the manner of identifying the type of each first visual element may include: and acquiring the characteristic information of the first visual element, and determining the type of the first visual element according to the characteristic information. For example, the first visual element R is a "recommend" button, and by clicking the "recommend" button, the next page can be skipped to, that is, the feature information of the first visual element R includes the link to be skipped, and it is determined that the type of the first visual element R includes a tab, that is, the first visual element R is a tab element. Similarly, by acquiring the feature information of each first visual element, the type of each first visual element is determined according to the feature information, for example, it can be determined that the types of the first visual element G, the first visual element H, the first visual element I, the first visual element J, the first visual element K, and the first visual element L include a card, the type of the first visual element Q includes a play bar, and the types of the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V include a tab.

Step 1102, determining attribute information of each first visual element according to the obtained number of the first visual elements of each type and the ratio of the screen width to the height, wherein the attribute information includes a display state, an element width, a font size and a scroll state.

In the embodiment of the present invention, it can be determined through the step 1101 that the types of the first visual element G, the first visual element H, the first visual element I, the first visual element J, the first visual element K, and the first visual element L include cards, the type of the first visual element Q includes a play bar, and the types of the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V include tabs. That is, the number of card elements is 6, the number of play bar elements is 1, and the number of tab elements is 5.

Further, on the basis of determining the number of the first visual elements of each type, the screen width and height ratios are aggregated, and the attribute information of each first visual element is determined. The attribute information includes a display state, an element width, a font size, and a scroll state. It should be noted that the attribute information may include other information besides the above information, and this is not limited in the embodiment of the present invention.

Wherein the display status is used to indicate whether the first visual element is displayed, and the display status may include displaying or not displaying. The "determining the display state of the first visual element" may be performed by determining a corresponding relationship between each aspect ratio and the number of the first visual elements of each type, so that after the second terminal device of a certain aspect ratio is determined, the number of the corresponding first visual elements can be determined. That is, the display state of the first visual elements within the predetermined number is display, and the display state of the first visual elements outside the predetermined number is non-display. For example, when the aspect ratio of a certain second terminal device is less than 1, the number of the corresponding card elements is 6, and when the number of the card elements acquired in step 1102 is 8, the display states of the first 6 card elements are displayed, and the display states of the remaining 2 card elements are not displayed. Wherein the element width is used to indicate the width of the first visual element. The way of calculating the element width can be realized by the following two steps:

the first step, set the reference resolution (e.g., horizontal screen 1920 x 720, vertical screen 720 x 1920), set the reference width of each type element, and pass the formula one: calculating the standard number of elements per line by DEFALT _ SIZEx + gap (X1-1) width/scale-margin-margin, wherein DEFALT _ SIZE represents the reference width of the element, gap represents the pitch, width represents the width of the second terminal device, scale represents the coefficient of the aspect ratio of the second terminal device to the aspect ratio of the reference device, margin represents the margin, and X1 represents the standard number of elements per line;

secondly, after the number of elements in each standard row is calculated, assuming that the element width of the element is y, and calculating the number of the elements in each standard row according to a formula II: and (5) y/scale x + gap (x-1) width/scale-margin-margin, and calculating the element width of the elements and the number of the actual elements in each line. In the second step, two X values are substituted to determine the y value, and the substituted calculated X values are two integers closest to X1, and then the width closest to DEFAULT _ SIZE is determined according to the calculation result of formula two, the element width is used as the element width of the element, and the number of elements in each row corresponding to the element width is used as the number of elements in each row of the second terminal device. For example, if X1 calculated by equation one is 3.2, then X is 3 and X is 4 are respectively substituted into equation two to obtain two widths, the width closest to DEFAULT _ SIZE is taken as the element width of the element, and the number of elements per line corresponding to the element width is taken as the number of elements per line of the second terminal device.

By the method, the element width corresponding to the first visual element of each type and the number of the elements in each row in the second terminal equipment with different aspect ratios can be determined.

Wherein the font size is adjustable based on a factor of the aspect ratio of the second terminal device relative to the aspect ratio of the reference device. For example, if the font size of a first visual element in an application is 5, and if the aspect ratio of the second terminal device is 1.5, the initial font size of the first visual element is increased by 1.5 times to obtain the font size of the first visual element in the second terminal device.

Wherein the scroll state is used to indicate whether the first visual element supports scrolling, and the scroll state may include whether scrolling is supported or not. The scroll state of the first visual element can be determined by determining the corresponding relationship between each screen width-height ratio and the number of the first visual elements of each type, so that after the second terminal equipment with a certain width-height ratio is determined, the number of the corresponding first visual elements can be determined. That is, the scroll state of the first visual elements within the prescribed number is no support of scrolling, and the scroll state of the first visual elements exceeding the prescribed number is support of scrolling. For example, when the aspect ratio of a certain second terminal device is less than 1, the number of the corresponding card elements is 6, and when the number of the card elements acquired in step 1102 is 8, the display states of the first 6 card elements are displayed, and the display states of the remaining 2 card elements are not displayed. Therefore, it is necessary to set the scrolling states of the 8 card elements to support scrolling, so that the remaining two card elements are displayed in a sliding manner.

Note that the attribute information includes other information such as color information, in addition to the display state, the element width, the font size, and the scroll state. In addition, it should be noted that, the process of determining the attribute information is different according to different types of first visual elements, and the following process of determining the attribute information for different types of first visual elements is described as an example:

as an optional solution, taking the card element as an example, before performing step 1102, the method further includes: a correspondence between each screen width-to-height ratio value and the number of first visual elements of each type is determined. For example, on the premise of ensuring that the card elements can achieve the visual effects of being neat, beautiful, strong in usability and adaptive to the second terminal device, the corresponding relationship between the ratio of the width to the height of each screen and the number of the card elements, which is determined through research and development tests, is as shown in the following table 2:

TABLE 2

Aspect ratio	Number of card columns	Card line number	Number of cards
				Width-to-height ratio of less than 1	3	2	6
The ratio of width to height is more than or equal to 1 and less than 1.33	3	2	6
				The ratio of width to height is more than or equal to 1.33 and less than 1.78	4	1	4
The ratio of width to height is more than or equal to 1.78 and less than 2.66	4	1	4
				The width-height ratio of 2.66-3	4	1	4
The ratio of width to height is more than or equal to 3	6	1	6

Specifically, as shown in table 2 above, when the screen width-height ratio includes a width-height ratio < 1, the number of card columns is 3, the number of card rows is 2, that is, the number of cards is 6; when the ratio of the width to the height of the screen comprises that the ratio of the width to the height is more than or equal to 1 and less than 1.33, the number of card columns is 3, the number of card rows is 2, and the number of cards is 6; when the ratio of the width to the height of the screen comprises that the ratio of the width to the height is more than or equal to 1.33 and less than 1.78, the number of card columns is 4, the number of card rows is 1, and the number of cards is 4; when the ratio of the width to the height of the screen comprises that the ratio of the width to the height is more than or equal to 1.78 and less than 2.66, the number of card columns is 4, the number of card rows is 1, and the number of cards is 4; when the ratio of the width to the height of the screen comprises that the ratio of the width to the height is more than or equal to 2.66 and less than 3, the number of card columns is 4, the number of card rows is 1, and the number of cards is 4; when the screen width-height ratio includes a width-height ratio of 3 or more, the number of card columns is 6, the number of card rows is 1, i.e., the number of cards is 6. That is to say, can guarantee that card element can reach the visual effect neat, pleasing to the eye, the ease for use is strong, adaptation second terminal equipment based on table 2. For example, taking the aspect ratio including the aspect ratio < 1 as an example, if the number of card columns is set to be 4 and the number of card rows is set to be 2, the problem of blurred display and poor usability of card elements is easily caused because the width of the display interface is not large enough to clearly display 4 cards.

Based on the above table 2, in the process of executing step 1102, when the number of the acquired card elements is 6 (the first visual element G, the first visual element H, the first visual element I, the first visual element J, the first visual element K, and the first visual element L) and the screen width-to-height ratio includes that the width-to-height ratio is greater than or equal to 1.33 and less than 1.78, it is determined that the number of displayable card elements is 4, and therefore, it is necessary to set the display states of the first 4 card elements as display and set the display states of the remaining two card elements as non-display from among the acquired 6 card elements. For example, the first visual element K and the first visual element L are set to the display state of non-display. Further, since the number of displayable card elements is 6, the attribute information of two card elements, the first visual element K and the first visual element L, may be set to support scrolling. That is, the remaining two card elements (the first visual element K and the first visual element L) can be displayed in a sliding manner.

Further, after the display state and the scroll state of the card elements are determined, the element widths and the font sizes corresponding to the 4 displayed card elements also need to be calculated. Specifically, the element widths corresponding to the 4 displayed card elements may be calculated in the above manner, and in addition, the font size may be correspondingly adjusted according to the coefficient of the aspect ratio of the second terminal device with respect to the aspect ratio of the reference device.

As another alternative, taking the tab element as an example, before performing step 1102, the method further includes: and determining the change rule of different numbers of tab elements in the same screen width-height ratio.

For example, fig. 11a provides a variation rule of 0.75 (e.g., 960 × 1280 in display resolution) for different numbers of tab elements, and as shown in fig. 11a, the number of displayable tab elements is set to 4 for a display interface with 0.75 in screen width/height ratio. So that when the number of tab elements is less than or equal to 4, the tab elements can be fully displayed and scrolling is not supported, as shown, for example, in fig. 11a for tab a 1-tab B1, tab a 2-tab C2, and tab A3-tab D3, each tab can be fully displayed without scrolling the tab because the number of tabs in each group is less than 4. It should be noted that the number of displayable tab elements can be set according to requirements, and the above description is only for illustration and is not limited specifically.

For example, as shown in fig. tab a 4-tab E4, when the number of tab elements is greater than 4, the display screen is not wide enough to display more than 4 tab elements, so the remaining tab elements (tab E4) need to be set to be not displayed, and support scrolling is set for the displayed tab elements (tab a 4-tab D4) so that the user can display the remaining tab elements (tab E4) by sliding, it should be noted that, since the number of displayable tab elements is 4, after the remaining tab elements (tab E4) are displayed, tab a4 is not displayed for scrolling, and tab B4 and tab C4 continue to be displayed.

Further, if the number of the tab elements capable of being displayed is not limited, after the display state and the scrolling state of the tab elements are determined according to the number of the tab elements and the ratio of the width to the height of the screen, the width of each tab element can be determined according to the display layout style and the number of the displayed tab elements. For example, as shown in fig. 11a, tab a 5-tab E5, taking 5 tab elements as an example, the element width of each tab element is calculated according to the width of the second terminal device and the pitch and margin of the display layout pattern, i.e. by the formula W ═ W-2L-4S)/5, where W represents the element width of each tab element, W represents the width of the target device, L represents the margin, and S represents the margin, which can be understood as an even state among a plurality of tab elements, i.e. as shown in fig. 11a, tab a 5-tab E5, tab a 5-tab E5 can be completely displayed, and the element width of each tab is less than 2 grids, and an even state among tabs. In addition, in the process of using the method, if the number of tab elements is large, the number of displayed tab elements may be set (for example, to 4 or 5), so that other non-displayed tab elements may be displayed in a manner of sliding by the user.

It should be noted that, if the number of tab elements is less than 4, the element width of the tab element may be determined according to the set reference width and the display resolution of the second terminal device, for example, the element width of the tab element adopted in the embodiment of the present invention is 2 grids, and in addition, the element width of the tab element may be set according to the requirement, for example, the set reference width is 2 grids, and when the display interface of the second terminal device is wide, the element width of the tab element may be set to 3 grids. Furthermore, it should be noted that the element width of the tab element is not greater than the maximum width boundary value nor less than the minimum width boundary value, that is, the element width of the tab element is not infinitely increased or decreased as the width of the second terminal device is increased or decreased.

Specifically, for example, when the number of displayable tab elements is set to be 5, and the number of the obtained tab elements (the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V) is 5, if the screen width-height ratio of the second terminal device is 0.75 and the number of the displayable tabs is 5 at this time, the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V may all be displayed in the display interface of the second terminal device, that is, the attribute information of the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V is all displayed, and on the basis that a plurality of tab elements can be completely displayed, the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V are all displayed, and on the basis that a plurality of tab elements can be completely displayed, the first visual element R, the first visual element U, the second visual element U, and the second visual element V are displayed in the second visual element V, and the second visual element is displayed in the second visual element, and the second visual, The attribute information of the first visual element S, the first visual element T, the first visual element U, and the first visual element V are all non-scrolling capable.

Similarly, based on the above method, by determining the variation rules of different numbers of tab elements in other screen width-height ratios, the attribute information of different numbers of tab elements in different screen width-height ratios is determined, and as to the variation rules of different numbers of tab elements in other screen width-height ratios, the manner how to determine the attribute information of different numbers of tab elements in different screen width-height ratios is specifically described with reference to fig. 11b and 11 c.

For example, fig. 11b provides a variation rule of the screen width to height ratio of 1.33 (for example, the display resolution is 1024 × 768) for different numbers of tab elements, and taking fig. 11b as an example, the number of tab elements that can be displayed is set to 4 for the display interface with the screen width to height ratio of 1.33. So that when the number of tab elements is less than or equal to 4, the tab elements can be fully displayed and scrolling is not supported, as shown, for example, in fig. 11B for tab a 1-tab B1, tab a 2-tab C2, and tab A3-tab D3, each tab can be fully displayed without scrolling the tab because the number of tabs in each group is less than 4. It should be noted that the number of displayable tab elements can be set according to requirements, and the above description is only for illustration and is not limited specifically.

For example, fig. 11c provides a variation rule of the different number of tab elements at a ratio of the width to the height of the screen of 1.77 (for example, a display resolution of 1920 × 1080), and taking fig. 11c as an example, the number of tab elements that can be displayed is set to 6 for a display interface with a ratio of the width to the height of the screen of 1.77. So that when the number of tab elements is less than or equal to 6, the tab elements can be fully displayed and scrolling is not supported, as shown, for example, in fig. 11C for tab a 1-tab B1, tab a 2-tab C2, and tab A3-tab D3, each tab can be fully displayed without scrolling the tab because the number of tabs in each group is less than 4. It should be noted that the number of displayable tab elements can be set according to requirements, and the above description is only for illustration and is not limited specifically.

For example, as shown in fig. tab a 4-tab G4, when the number of tab elements is greater than 6, the remaining tab elements (tab G4) need to be set to not be displayed because the width of the display screen is not large enough to display more than 6 tab elements, and the displayed tab elements (tab a 4-tab F4) are set with support scrolling so that the user displays the remaining tab elements (tab G4) by sliding.

The change rule of the tab elements with different numbers in other screen width-height ratios is also applicable to the display interfaces of a plurality of display windows, and the number of displayable tabs can be set by determining the width-height ratio of each display window.

It should be noted that, in addition to the tab element and the card element, other types of elements may specifically determine the process of determining the attribute information of each first visual element on the basis of determining the attribute information of each first visual element according to the number of the acquired first visual elements of each type and the ratio of the screen width to the height. For example, for a playitem element, the number of playitem elements is generally 1, and thus the playitem element can be accommodated regardless of the screen size. Further, according to the number of the play bar elements and the ratio of the width to the height of the screen, determining attribute information of the play bar elements, wherein the attribute information is used for displaying the play bar elements, the element width is the screen width, the font size is adjustable, and the scroll is not supported. It should be noted that the attribute information may include other information besides the display state, the element width, the font size, and the scroll state, for example, the attribute information may also include color information, which is not limited in this embodiment of the present invention.

In this embodiment of the present invention, after step 1102, the method further includes: and modifying the attribute information of the first visual element to be displayed according to the display resolution and the display requirement, wherein the display requirement is used for indicating the display requirement of the user on the content displayed on the display interface of the second terminal device.

In the embodiment of the present invention, for example, in the above-described embodiment, the displayed tab elements include the first visual element R, the first visual element S, the first visual element T, the first visual element U, and the first visual element V, for example, taking the tab element of which the tab element includes music software as an example, the first visual element R is represented as "recommendation", the first visual element S is represented as "ranking", the first visual element T is represented as "station", the first visual element U is represented as "finding", and the first visual element V is represented as "my". For example, when the current scene is the car-mounted scene, the amount of demand for the contents such as "find" and "arrange" is low according to the display requirement of the car-mounted scene, and therefore the attribute information of the first visual element S and the first visual element U may be modified to be not displayed according to the display requirement. In addition, for displayable card elements (the first visual element R, the first visual element T, and the first visual element V), the font size and the scroll state of the first visual element may be set as required. For example, the font size of the acquired first visual element R is 20, and since the display resolution of the second terminal device is smaller than that of the application interface, the size of the first visual element R may be adjusted accordingly, for example, the font size of the first visual element R is adjusted to 15.

Furthermore, the attribute information of the displayable first visual element may be modified according to the display resolution. For example, when the width of the display resolution of the second terminal device is smaller than the width of the display interface of the application, if the acquired first visual elements are all displayed, the displayed first visual elements may overlap due to the fact that the width of the second terminal device is not enough to accommodate all the first visual elements. Therefore, on the basis of determining the attribute information of each first visual element, the attribute information of the displayable first visual elements can be modified according to the display resolution.

Step 1103, determining the number of grids occupied by the first visual element according to the type of the first visual element, the obtained attribute information of the first visual element, and a preset element layout rule, where the element layout rule includes layout rules corresponding to a plurality of types of first visual elements.

In an embodiment of the present invention, the element layout rule includes layout rules corresponding to a plurality of types of first visual elements. In step 1103, it is first determined whether the attribute information of the first visual element is displayable, and further, the number of grids occupied by the displayable first visual element is determined. That is, for the first visual element whose attribute information is not displayed, it is not necessary to determine the number of grids occupied by the first visual element. It should be noted that the process of determining the number of grids occupied by the first visual element is different for different types of first visual elements, and the specific process is as follows:

as an alternative, taking card elements as an example, the element layout rule includes a correspondence between the number of card elements and the grid. The specific derivation process of the corresponding relationship can determine the relationship between the number of the first visual elements of each type and the number of the grids through the corresponding relationship between each screen width-height ratio and the number of the card elements and the number of the grids and the width of the grids corresponding to each screen width-height ratio. For example, when the screen width-to-height ratio includes 1.33 ≦ width-to-height ratio < 1.78, the number of columns of cards is 4, the number of rows of cards is 1, i.e., the number of cards is 4, the number of display windows includes 1, the number of grids includes 8, the margin size includes 50dp, and the margin size includes 30 dp. Since the number of grids is 8 and the number of cards is 4, the number of grids occupied by each card element can be calculated to be 2, that is, the height of each card element is 2 times the width of the grid.

For example, based on the above-described embodiment, when the screen width-to-height ratio includes 1.33 ≦ width-to-height ratio < 1.78, the displayable first visual elements include: a first visual element G, a first visual element H, a first visual element I, and a first visual element J. Because the display layout style corresponding to the screen width-height ratio includes 8 grids, the number of the grids occupied by the first visual element G, the first visual element H, the first visual element I and the first visual element J can be calculated to be 2, that is, the height of each card element is 2 times of the grid width. As shown in fig. 12, 2 is a grid, 3 is a margin, 4 is a pitch, and 1 is a display interface 1 of the second terminal device in fig. 12, and the number of grids occupied by the first visual element G, the first visual element H, the first visual element I, and the first visual element J in fig. 12 is 2. Similarly, the number of the grids occupied by the first visual element G, the first visual element H, the first visual element I, and the first visual element J in other screen width-to-height ratios can be determined, for example, when the screen width-to-height ratio is 2.66 (the display resolution is 1920 × 1080), the number of the grids occupied by the first visual element G, the first visual element H, the first visual element I, and the first visual element J is 3.

As another alternative, taking the tab element as an example, the element layout rule includes the correspondence between different numbers of tab elements and different screen width-height ratios. For example, as shown in fig. 11a to 11c, as can be seen from fig. 11a to 11c, when the number of tab elements is 2, the number of grids occupied by the display screens at different screen width-height ratios is 2. When the number of the tab elements is 3, the number of the grids occupied by the display screens with different screen width-height ratios is 2. When the number of the tab elements is 4, the number of the grids occupied by the display screens with different screen width-height ratios is 2. When the number of the tab elements is 5, the calculated element width may be determined as the number of the grids occupied by the tab elements, and it should be noted that the number of the grids occupied by the tab elements is not an integer.

For example, based on the above embodiment, it is determined that the displayable tab elements include the first visual element R, the first visual element T, and the first visual element V according to the display requirement, that is, the number of the displayable tab elements is 3. According to the corresponding relationship between different numbers of tab elements and different screen width-height ratios shown in fig. 11a to 11c, it can be known that the number of grids occupied by the first visual element R, the first visual element T, and the first visual element V is 2. Therefore, taking the display resolution including 1920 × 1080 as an example, that is, the ratio of the screen width to the height is 1.77, as shown in fig. 13, 2 is denoted as a grid, 3 is denoted as a margin, 4 is denoted as a space, and 1 is denoted as a display interface 1 of the second terminal device in fig. 13, and in fig. 13, the number of grids occupied by the first visual element R, the first visual element T, and the first visual element V is 2 grids.

As another alternative, taking the playitem element as an example, the number of playitem elements is generally 1, so that the playitem element can be accommodated regardless of the screen size. Therefore, when the element type is determined to be the play bar, it can be determined that the number of grids occupied by the play bar element is the number of grids in the display layout style corresponding to the second terminal device.

For example, based on the above embodiment, it is determined that the displayable playbar elements include the first visual element Q according to the display requirement, that is, the number of displayable playbar elements is 1. Taking the example that the display resolution includes 1920 × 1080, that is, the ratio of the screen width to the height is 1.77, as shown in fig. 14, 2 is denoted as a grid, 3 is denoted as a margin, 4 is denoted as a space, and 1 is denoted as a display interface 1 of the second terminal device in fig. 14, and in fig. 14, the number of grids occupied by the first visual element Q is 12. Taking the display resolution including 1920 × 720 as an example, that is, the ratio of the screen width to the height is 2.66, as shown in fig. 15, 2 is represented as a grid of the

first display window

1, 3 is represented as a margin of the

first display window

1, 4 is represented as a pitch of the

first display window

1, 1 is represented as the first display window 1 of the second terminal device, 5 is represented as the second display window of the second terminal device, 6 is represented as a grid of the

second display window

5, 7 is represented as a pitch of the

second display window

5, 8 is represented as a pitch of the

second display window

5, and 9 is represented as a column pitch between the first display window 1 and the second display window 5. In fig. 15, when the first visual element Q is placed in the second display window 5, the number of the grids occupied by the first visual element Q is 4. That is, the number of grids occupied by the playitem element is the number of grids of the display window on which the playitem element is located.

It should be noted that, when a plurality of sub-elements are included in a playitem element, the positions of the sub-elements may be adaptively adjusted according to the size of the occupied grid, and each sub-element occupies a specific number of grids. The layout of the sub-elements is not described in the embodiment of the invention, and the layout between the sub-elements can be obtained by referring to the layout between the elements. For example, taking the "play" button, the "next" button, and the "song list" button in fig. 15 as an example, when the number of grids is 4 and the number of buttons is 3, the buttons may be equally divided with reference to the above-mentioned embodiment, so as to obtain the width of each button (the number of occupied grids), specifically, by the formula W ═ W-2L-3S)/3, where W represents the width of each button, W represents the width of the second display window 5, L represents the margin, S represents the space, 2 represents the second display window 5 has 2 margins, and 3 represents the second display window 5 has 3 margins, and the number of grids occupied by each button is obtained by calculating the width of the button. It should be noted that the number of grids acquired by this process is not an integer.

And 1104, acquiring device information of the second terminal device, where the device information includes a size of a display area, a position of the display area, and a device type.

In this embodiment of the present invention, the device information may include other information besides the size of the display area, the position of the display area, or the type of the device, which is not limited in this embodiment of the present invention.

Step 1105, determining the position of the first visual element according to the device information and the number of grids occupied by the first visual element, where the position includes the display window where the first visual element is located and the location of the display window in the display area of the second terminal device.

In the embodiment of the present invention, when the first visual element, for example, the device type of the second terminal device includes a car-in machine, for a car-in machine scene, the first visual element generally needs to be laid out and displayed on a left half portion of a display interface (a driver is located on the left side of a vehicle), and on this basis, the location of the first visual element is determined according to the size and the location of a display interval in the device information, where the location includes a display window where the first visual element is located and the location of the display window.

As an alternative, taking a car-mounted device scene as an example, as shown in fig. 16, the first visual element R, the first visual element T, and the first visual element V are located on the left side for display, so that a driver can operate a display interface conveniently, and user experience is improved.

Step 1106, in the display layout style, according to the position of each first visual element and the number of the grids occupied by each first visual element, laying out the plurality of first visual elements to generate a display interface of the second terminal device.

In an embodiment of the invention, the edge distance is used for indicating the distance between the first visual elements, and the space distance is used for indicating the distance between the first visual elements and the edge of the display interface. The total number of the grids occupied by the plurality of first visual elements is less than or equal to the number of the grids.

In the embodiment of the present invention, based on the above steps, after positions and occupied grid numbers of a plurality of tab elements (a first visual element R, a first visual element T, and a first visual element V), a plurality of card elements (a first visual element G, a first visual element H, a first visual element I, and a first visual element J), and a playbar element (a first visual element Q) are respectively determined, the plurality of first visual elements are laid out by performing step 1106, so as to generate a display interface of the second terminal device.

For example, taking the display layout style corresponding to the display resolution 1920 × 1080 as an example, as shown in fig. 17, 2 is represented as a grid, 3 is represented as an edge distance, 4 is represented as a space, and 1 is represented as a display interface 1 of the second terminal device, in fig. 17, the number of grids occupied by the first visual element R, the first visual element T, and the first visual element V is 2 grids, the first visual element R, the first visual element T, and the first visual element V are located at the upper left corner of the display interface 1, the number of grids occupied by the first visual element G, the first visual element H, the first visual element I, and the first visual element J is 3 grids, and the number of grids occupied by the first visual element Q is 12 grids, that is, the first visual element Q occupies the grid of the display interface 1.

For example, taking the display layout style corresponding to the display resolution 1920 × 720 as an example, as shown in fig. 18, 2 is represented by a grid of the

first display window

1, 3 is represented by a margin of the

first display window

1, 4 is represented by a pitch of the

first display window

1, 1 is represented by the first display window 1 of the second terminal device, 5 is represented by the second display window of the second terminal device, 6 is represented by a grid of the

second display window

5, 7 is represented by a pitch of the

second display window

5, 8 is represented by a pitch of the

second display window

5, and 9 is represented by a column pitch between the first display window 1 and the second display window 5. In fig. 18, the number of the grids occupied by the first visual element R, the first visual element T, and the first visual element V is 2, the first visual element R, the first visual element T, and the first visual element V are located in the upper left corner of the first display window 1, the number of the grids occupied by the first visual element G, the first visual element H, the first visual element I, and the first visual element J is 3, the first visual element G, the first visual element H, the first visual element I, and the first visual element J are located in the first display window 1, the number of the grids occupied by the first visual element Q is 4, and the first visual element Q is located in the second display window 5, that is, the first visual element Q occupies the grid of the second display window 5.

It should be noted that the arrangement order among the above tab elements, card elements, and play bar elements may be set according to the requirement, for example, the play bar elements are preferentially displayed, the card elements are displayed, and the tab elements are displayed finally. It should be further noted that, when the display interface includes a plurality of display windows, the positions of the first visual elements can be adjusted according to the number of the displayable first visual elements, so as to avoid the problem that the layout effect is poor because the plurality of first visual elements are all placed in the same display window.

In the embodiment of the invention, the first visual elements are distributed by the method, compared with the related art, the embodiment of the invention adopts the division standard of the width-to-height ratio, and can be adapted to a plurality of second terminal devices with different sizes by the method.

In the embodiment of the present invention, after step 110, further, the method further includes:

and 112, displaying the display interface in a virtual screen, and projecting the display interface to the second terminal device so that the display interface is displayed on a display screen of the second terminal device.

In the embodiment of the invention, a virtual screen is created on the first terminal device, and the virtual screen is used for projecting the display interface to the second terminal device so as to realize mirror image presentation of the second terminal device.

step 114, receiving an event for switching a display interface sent by the second terminal device, selecting a second visual element from the application page of the first terminal device based on the display layout style according to the event for switching the display interface, and laying out the second visual element according to the display layout style to generate the display interface of the second terminal device.

In this step, the second visual element may comprise one visual element or a group of visual elements.

In the embodiment of the invention, the user can slide on the second terminal device to replace the next display interface. Therefore, in order to ensure that the next display interface can also achieve the visual effect that the second visual element can achieve tidiness, attractiveness and strong usability, the second terminal device needs to send an event for switching the display interface to the first terminal device, so that the next display interface of the second terminal device can be generated based on the processing operation of the first terminal device. It is also understood that the interface layout method provided by the embodiment of the present invention can be performed each time a page is switched.

It should be noted that, except that the interface layout method may be executed by an event for switching the display interface, other events for ensuring the friendliness of the display interface are all within the scope protected by the embodiment of the present invention.

In the embodiment of the invention, when the first terminal equipment is connected with the second terminal equipment, the display resolution of the second terminal equipment is obtained; calculating the screen width-height ratio of the second terminal device according to the display resolution, and determining a proportional interval in which the screen width-height ratio is located from a plurality of pre-divided proportional intervals; acquiring a display layout style corresponding to a proportional interval according to the proportional interval in which the screen width-height ratio is positioned; selecting a first visual element from an application page of the first terminal device based on the display layout style; the first visual elements are distributed according to the display layout style to generate a display interface of the second terminal device, and the display layout styles corresponding to different proportion intervals are set, so that when the first visual elements are distributed according to the display layout styles, the first visual elements can be guaranteed to achieve the visual effects of being neat, attractive, high in usability and adaptive to the second terminal device.

Fig. 19 is a schematic block diagram of an electronic device 110 according to an embodiment of the present invention. It should be understood that the electronic device 110 is capable of performing the various steps in the interface layout method of fig. 3, and will not be described in detail herein to avoid repetition. As shown in fig. 19, the electronic device 110 includes: an interaction unit 401, a processing unit 402 and a display unit 403.

The interaction unit 401 is configured to obtain a display resolution of a second terminal device when the first terminal device is connected to the second terminal device.

The processing unit 402 is configured to calculate a screen width-to-height ratio of the second terminal device according to the display resolution, and determine a proportional interval in which the screen width-to-height ratio is located from a plurality of pre-divided proportional intervals; and acquiring a display layout style corresponding to the proportional interval according to the proportional interval in which the screen width-height ratio is positioned.

The interaction unit 401 is further configured to select a first visual element from an application page of the first terminal device based on the display layout style.

The processing unit 402 is further configured to lay out the first visual element according to the display layout style to generate a display interface of the second terminal device.

In the embodiment of the present invention, the display layout style includes a number of display windows, a number of grids, a grid width, an edge distance, and a distance, where the number of grids included in each display window is different, the edge distance is used to indicate a distance between a first visual element and a display interface edge of the second terminal device, and the distance is used to indicate a distance between the first visual elements;

the processing unit 402 is specifically configured to determine the number of grids occupied by the first visual element according to the type of the first visual element, the acquired attribute information of the first visual element, and a preset element layout rule, where the element layout rule includes layout rules corresponding to multiple types of first visual elements.

In this embodiment of the present invention, the interaction unit 401 is further configured to obtain device information of the second terminal device, where the device information includes a size of a display area, a position of the display area, and a device type.

The processing unit 402 is further configured to determine, according to the device information and the number of grids occupied by the first visual element, a position of the first visual element, where the position includes a display window where the first visual element is located and a location of the display window in a display area of the second terminal device.

In the embodiment of the present invention, the first and second substrates,

the processing unit 402 is specifically configured to, in the display layout style, layout the plurality of first visual elements according to the acquired position of each first visual element and the number of grids occupied by each first visual element, so as to generate a display interface of the second terminal device, where a total number of the grids occupied by the plurality of first visual elements is smaller than or equal to the number of the grids.

In an embodiment of the present invention, the processing unit 402 is further configured to identify a type of each of the first visual elements; and determining attribute information of each first visual element according to the acquired number of the first visual elements of each type and the ratio of the width to the height of the screen, wherein the attribute information comprises a display state, an element width, a font size and a scroll state.

In this embodiment of the present invention, the processing unit 402 is further configured to modify attribute information of the first visual element to be displayed according to the display resolution and a display requirement, where the display requirement is used to indicate a display requirement of a user for content displayed on a display interface of the second terminal device.

In this embodiment of the present invention, the display unit 403 is configured to display the display interface in a virtual screen.

The processing unit 402 is further configured to project the display interface to the second terminal device, so that the display screen of the second terminal device displays the display interface.

The interaction unit 401 is further configured to receive an event sent by the second terminal device and used for switching a display interface, select a second visual element from an application page of the first terminal device based on the display layout style according to the event for switching the display interface, and layout the second visual element according to the display layout style to generate the display interface of the second terminal device.

In the embodiment of the invention, the counter control event comprises a display interface switching event.

It should be understood that the electronic device 110 herein is embodied in the form of a functional unit. The term "unit" herein may be implemented by software and/or hardware, and is not particularly limited thereto. For example, a "unit" may be a software program, a hardware circuit, or a combination of both that implement the above-described functions. The hardware circuitry may include an Application Specific Integrated Circuit (ASIC), an electronic circuit, a processor (e.g., a shared processor, a dedicated processor, or a group of processors) and memory that execute one or more software or firmware programs, a combinational logic circuit, and/or other suitable components that support the described functionality.

Accordingly, the units of the respective examples described in the embodiments of the present invention can be realized in electronic hardware, or a combination of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.

The embodiment of the invention also provides the electronic equipment, which can be the first terminal equipment or the circuit equipment arranged in the first terminal equipment. The device may be adapted to perform the functions/steps of the above-described method embodiments.

Fig. 20 is a schematic structural diagram of an electronic device according to an embodiment of the present invention, and as shown in fig. 20, the electronic device 900 includes a processor 910 and a transceiver 920. Optionally, the electronic device 900 may also include a memory 930. The processor 910, the transceiver 920 and the memory 930 may communicate with each other via internal connection paths to transmit control and/or data signals, the memory 930 may be used for storing a computer program, and the processor 910 may be used for calling and running the computer program from the memory 930.

Optionally, the electronic device 900 may further include an antenna 940 for transmitting the wireless signal output by the transceiver 920.

The processor 910 and the memory 930 may be combined into a single processing device, or more generally, separate components, and the processor 910 is configured to execute the program code stored in the memory 930 to implement the functions described above. In particular implementations, the memory 930 may be integrated with the processor 910 or may be separate from the processor 910. The processor 910 may correspond to the processing unit 402 in the electronic device 110 in fig. 19.

In addition, to further improve the functionality of the electronic device 900, the electronic device 900 may further comprise one or more of an input unit 960, a display unit 970, an audio circuit 980, a camera 990, a sensor 901, etc., which may further comprise a speaker 982, a microphone 984, etc. The display unit 970 may include a display screen, and the display unit 970 may correspond to the display unit 403 in the electronic device 110 in fig. 19.

Optionally, the electronic device 900 may further include a power supply 950 for supplying power to various devices or circuits in the first terminal device.

It should be understood that the electronic device 900 shown in fig. 20 is capable of implementing the processes of the method embodiment shown in fig. 3. The operations and/or functions of the units in the electronic device 900 are respectively for implementing the corresponding flows in the above-described method embodiments. Reference may be made specifically to the description of the above method embodiments, and a detailed description is appropriately omitted herein to avoid redundancy.

It should be understood that the processor 910 in the electronic device 900 shown in fig. 20 may be a system on a chip (SOC), and the processor 910 may include a Central Processing Unit (CPU), and may further include other types of processors, and the CPU may be a main CPU. The respective portions of the processor cooperate to implement the preceding method flow and each portion of the processor may selectively execute a portion of the software driver.

In summary, various portions of the processors or processing units within the processor 910 may cooperate to implement the foregoing method flows, and corresponding software programs for the various portions of the processors or processing units may be stored in the memory 930.

The present invention also provides a computer-readable storage medium having stored therein instructions which, when run on a computer, cause the computer to perform the steps of the interface layout method as described above in fig. 3.

In the above embodiments, the processor 910 may include, for example, a Central Processing Unit (CPU), a microprocessor, a microcontroller, or a digital signal processor, and may further include a GPU, an NPU, and an ISP, and the processor may further include necessary hardware accelerators or logic processing hardware circuits, such as an application-specific integrated circuit (ASIC), or one or more integrated circuits for controlling the execution of the program according to the present invention. Further, the processor may have the functionality to operate one or more software programs, which may be stored in the memory.

The memory may be a read-only memory (ROM), other types of static storage devices that may store static information and instructions, a Random Access Memory (RAM), or other types of dynamic storage devices that may store information and instructions, an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compact disc, laser disc, optical disc, digital versatile disc, blu-ray disc, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, etc.

In the embodiments of the present invention, "at least one" means one or more, "a plurality" means two or more. "and/or" describes the association relationship of the associated objects, and indicates that three relationships may exist, for example, a and/or B, and may indicate that a exists alone, a and B exist simultaneously, and B exists alone. Wherein A and B can be singular or plural. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship. "at least one of the following" and similar expressions refer to any combination of these items, including any combination of singular or plural items. For example, at least one of a, b, and c may represent: a, b, c, a-b, a-c, b-c, or a-b-c, wherein a, b, c may be single or multiple.

Those of ordinary skill in the art will appreciate that the various elements and algorithm steps described in connection with the embodiments disclosed herein can be implemented as electronic hardware, computer software, or combinations of electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.

It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.

In the several embodiments provided by the present invention, any function, if implemented in the form of a software functional unit and sold or used as a separate product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a read-only memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.

The above description is only an embodiment of the present invention, and any person skilled in the art can easily conceive of changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the protection scope of the present invention. The protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. An interface layout method is applied to a first terminal device, and is characterized by comprising the following steps:

2. The method of claim 1, wherein the display layout style comprises a number of display windows, a number of grids, a grid width, an edge distance and a spacing, wherein each display window comprises a different number of grids, the edge distance is used for indicating a distance between the first visual element and an edge of the display interface of the second terminal device, and the spacing is used for indicating a distance between the first visual elements;

3. The method according to claim 2, wherein after determining the number of grids occupied by the first visual element according to the type of the first visual element, the obtained attribute information of the first visual element, and a preset element layout rule, the method comprises:

4. The method according to claim 2, wherein the laying out the first visual element according to the display layout style to generate the display interface of the second terminal device comprises:

5. The method according to claim 2, before determining the number of grids occupied by the first visual element according to the type of the first visual element, the obtained attribute information of the first visual element, and a preset element layout rule, further comprising:

identifying a type of each of the first visual elements;

6. The method according to claim 5, after determining attribute information of each first visual element according to the obtained number of each type of first visual element and the screen width-height ratio, further comprising:

7. The method of claim 1, further comprising, after the laying out the first visual element according to the display layout style to generate the display interface of the second terminal device:

8. The method of claim 1, further comprising, after said laying out the first visual element according to the display layout style to generate the display interface of the second terminal device:

9. An electronic device, comprising:

a display screen;

one or more processors;

a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory, the one or more computer programs comprising instructions which, when executed by the apparatus, cause the apparatus to perform a method comprising the interface layout of any of claims 1 to 8.

10. A computer-readable storage medium, comprising a stored program, wherein the program, when executed, controls an apparatus in which the computer-readable storage medium is located to perform the interface layout method of any one of claims 1 to 8.