Display page generation method and device, computer program product and electronic equipment

Abstract

The embodiment of the invention provides a display page generation method and device, a computer program product and electronic equipment, and relates to the technical field of computers. The display page generation method comprises the following steps: acquiring a security area in a reference display page; according to display parameters of host equipment, determining an actual safety area capable of accommodating the safety area; determining a scaling according to the safe area and the actual safe area; and scaling the reference display page based on the scaling, and generating a target display page for the host device. According to the technical scheme, the accuracy of page display can be improved.

Description

Technical Field

[0001] Embodiments of the present disclosure relate to the field of computer technology, and more specifically, embodiments of the present disclosure relate to a display page generation method, a display page generation device, a computer program product, and an electronic device. Background Art

[0002] This section is intended to provide a background or context to the embodiments of the disclosure that are recited in the claims. No description herein is admitted to be prior art by inclusion in this section.

[0003] With the development of big data, designers can provide visual drafts, which can then be restored on the host device.

[0004] In related technologies, the visual draft provided by the designer can be restored on the host device through adaptive layout technology or responsive layout technology. Summary of the invention

[0005] In some embodiments, adaptive layout technology and responsive layout technology need to formulate different layouts and display content for host devices with different resolutions and DPIs, and the layout is only implemented based on the resolution. At the boundary DPI, the display effect may be inconsistent with the visual draft.

[0006] Therefore, an improved display page generation method is needed to solve the problem that different layouts and display contents need to be formulated for host devices with different resolutions and DPIs, and the display effect may be inconsistent with the visual draft at the boundary DPI.

[0007] In this context, embodiments of the present disclosure are intended to provide a display page generating method, a display page generating device, a computer program product, and an electronic device.

[0008] According to one aspect of the present disclosure, a display page generation method is provided, including: obtaining a safe area in a reference display page; determining an actual safe area that can accommodate the safe area according to display parameters of a host device; determining a scaling ratio according to the safe area and the actual safe area; scaling the reference display page based on the scaling ratio to generate a target display page for the host device.

[0009] In an exemplary embodiment of the present disclosure, the display parameters include a display resolution of the host device and a number of pixels per inch of a display screen in the host device; determining an actual safety area that can accommodate the safety area based on the display parameters of the host device includes: determining a logical resolution of the host device based on a product of the display resolution and the number of pixels per inch of a display screen; determining the maximum display area based on the logical resolution; and determining an actual safety area corresponding to the safety area within the maximum display area.

[0010] In an exemplary embodiment of the present disclosure, determining the maximum display area according to the logical resolution includes: determining the shortest length in the logical resolution; and determining a square area with the shortest length as the side length as the maximum display area.

[0011] In an exemplary embodiment of the present disclosure, determining the actual safety area corresponding to the safety area within the maximum display area includes: determining, within the maximum display area, an area scaled in proportion to the safety area as the actual safety area.

[0012] In an exemplary embodiment of the present disclosure, determining the scaling ratio according to the safety area and the actual safety area includes: determining a ratio between a length of the actual safety area and a length of the safety area as the scaling ratio.

[0013] In an exemplary embodiment of the present disclosure, scaling the reference display page based on the scaling ratio to generate a target display page for the host device includes: using the scaling ratio as a global constant, scaling the element size and spacing of each element in the reference display page according to the global constant to obtain a scaling result, and generating the target display page for the host device according to the scaling result.

[0014] In an exemplary embodiment of the present disclosure, generating a target display page for the host device according to the scaling result includes: when the scaling result is a decimal, rounding the scaling result to generate the target display page.

[0015] In an exemplary embodiment of the present disclosure, the method further includes: determining a display style of the target display page according to a scene parameter of an application scene presented on the host device.

[0016] In an exemplary embodiment of the present disclosure, the reference display page also includes a non-safe area, and the method further includes: determining the display status of elements in the actual non-safe area of ​​the target display page in combination with element attributes of the non-safe area in the reference display page and the display style of the target display page.

[0017] In an exemplary embodiment of the present disclosure, the method also includes: determining the position of each element in the security area of ​​the reference display page and the attribute information of each element; inputting the position, the attribute information and the display parameters of the host device into a machine learning model to determine the scaling ratio of each element; wherein the machine learning model is trained based on a sample reference display page and the position of each element in the sample display page and the attribute information of each element; the sample display page is a sample reference display page restored on the host device.

[0018] According to one aspect of the present disclosure, there is provided a display page generating device, comprising: a safe area acquisition module, used to acquire a safe area in a reference display page; an actual safe area determination module, used to determine, according to display parameters of a host device, an actual safe area that can accommodate the safe area; a scaling ratio determination module, used to determine a scaling ratio according to the safe area and the actual safe area; and a restoration module, used to scale the reference display page based on the scaling ratio to generate a target display page for the host device.

[0019] According to one aspect of the present disclosure, a computer program product is provided, including a computer program, wherein when the computer program is executed by a processor, the display page generating method as described in any one of the above is implemented.

[0020] According to one aspect of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions; wherein the processor is configured to execute any one of the above-mentioned display page generation methods by executing the executable instructions.

[0021] The technical solution in the disclosed embodiment, on the one hand, since the actual safe area of ​​the safe area accommodating the reference display page can be determined according to the display parameters of the host device, and then the scaling ratio is determined according to the safe area and the actual safe area, and the reference display page is restored based on the scaling ratio, it is avoided that the process of separately formulating layouts and displaying content for host devices of different resolutions and dpi is needed, thereby improving the versatility of the reference display page, improving the efficiency of designing the reference display page, and also improving the development efficiency of restoring to the target display page. On the other hand, since the actual safe area of ​​the safe area accommodating the reference display page can be determined according to the display parameters of the host device, and then the scaling ratio is determined according to the safe area and the actual safe area, and the reference display page is restored based on the scaling ratio, it is avoided that the display effect may be inconsistent with the visual draft at the boundary dpi, and it can improve the consistency between the target display page and the reference display page, and improve the page restoration effect. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] The above and other objects, features and advantages of the exemplary embodiments of the present disclosure will become readily understood by reading the detailed description below with reference to the accompanying drawings. In the accompanying drawings, several embodiments of the present disclosure are shown in an exemplary and non-limiting manner, in which:

[0023] Figure 1 The following is a schematic diagram schematically showing an application scenario of an embodiment of the present disclosure.

[0024] Figure 2 The flowchart of the display page generation method according to the embodiment of the present disclosure is schematically shown.

[0025] Figure 3 A schematic diagram schematically shows a reference display page according to an embodiment of the present disclosure.

[0026] Figure 4 The flowchart of determining the maximum safety area according to an embodiment of the present disclosure is schematically shown.

[0027] Figure 5 A schematic diagram of determining a scaling ratio according to an embodiment of the present disclosure is schematically shown.

[0028] Figure 6A-6C The schematic diagram of the restored display page in the related art is schematically shown.

[0029] Figure 7 The schematic diagram schematically shows a target display page restored according to an embodiment of the present disclosure.

[0030] Figure 8 The block diagram of the display page generating device according to the embodiment of the present disclosure is schematically shown.

[0031] Fig. 9 A schematic diagram of an electronic device according to an embodiment of the present disclosure is schematically shown.

[0032] In the drawings, the same or corresponding reference numerals represent the same or corresponding parts. DETAILED DESCRIPTION

[0033] The principles and spirit of the present disclosure will be described below with reference to several exemplary embodiments. It should be understood that these embodiments are provided only to enable those skilled in the art to better understand and implement the present disclosure, and are not intended to limit the scope of the present disclosure in any way. On the contrary, these embodiments are provided to make the present disclosure more thorough and complete, and to fully convey the scope of the present disclosure to those skilled in the art.

[0034] Those skilled in the art will appreciate that the embodiments of the present disclosure may be implemented as a system, device, apparatus, method or computer program product. Therefore, the present disclosure may be specifically implemented in the following forms, namely: complete hardware, complete software (including firmware, resident software, microcode, etc.), or a combination of hardware and software.

[0035] According to an embodiment of the present disclosure, a display page generating method, a display page generating device, a computer program product and an electronic device are proposed.

[0036] Furthermore, any number of elements in the drawings is for illustrative purposes only and not limiting, and any naming is for distinction only and does not have any limiting meaning.

[0037] The principle and spirit of the present disclosure are explained in detail below with reference to several representative embodiments of the present disclosure.

[0038] The inventors have found that adaptive layout technology refers to designers defining layouts for different screen resolutions, that is, creating multiple static layouts, each of which corresponds to a screen resolution range. Changing the screen resolution can switch different static parts, and the position of page elements changes. However, in each static layout, the page elements do not change with the adjustment of the window size. Developers use different codes to restore the visual effects for each static layout. In the above method, designers need to formulate different layouts and display content for different resolutions, and developers need to restore the corresponding visual effects for each layout, which has a high time cost and low design efficiency. In addition, if the layout is implemented only based on the display resolution, there may be a problem that the display effect is inconsistent with the visual draft at the boundary dpi.

[0039] Responsive layout technology refers to designers developing different layouts and display content for host devices with different resolutions and dpi, and developers using the same set of code to restore corresponding visual effects for different host devices through media query and other technologies. This technology can provide different visual effects based on the window size changes of the application interface on the same host device.

[0040] Among them, in responsive layout technology, designers need to develop different layouts and display content for different host devices, and developers need to make special processing for each layout situation, which is time-consuming. Considering the time and development costs, designers usually only provide adaptation for mainstream host devices, resulting in user experience problems such as application interface truncation and layout disproportion on certain specific host devices, and poor compatibility. Layout based only on display resolution may cause the display effect to be inconsistent with the visual draft at the boundary dpi.

[0041] Based on the above content, the basic idea of ​​the present invention is to design a set of visual solutions and use a set of codes for host devices with different resolutions and dpi to ensure a good visual experience on all host devices, without incomplete display or disproportion of key page elements.

[0042] More specifically, in the present disclosure, first, a safe area in a reference display page can be obtained; based on the display parameters of the host device, an actual safe area that can accommodate the safe area is determined; a scaling ratio is determined based on the safe area and the actual safe area; and the reference display page is scaled based on the scaling ratio to generate a target display page for the host device.

[0043] After introducing the basic principles of the present disclosure, various non-limiting embodiments of the present disclosure are described in detail below.

[0044] It should be noted that the following application scenarios are only shown to facilitate understanding of the spirit and principle of the present disclosure, and the embodiments of the present disclosure are not limited in this respect. On the contrary, the embodiments of the present disclosure can be applied to any applicable scenario.

[0045] First reference Figure 1 , Figure 1 A schematic diagram of an exemplary application scenario of an embodiment of the present disclosure is shown. The display page generation method can be used to restore a display reference display page on various types of host devices to generate a target display page for the host device.

[0046] like Figure 1As shown, the reference display page 101 may be acquired, and a scaling ratio of the reference display page 101 may be further determined, so that the reference display page is scaled according to the scaling ratio to obtain a target display page 103 matching the host device 102 .

[0047] Those skilled in the art should understand that Figure 1 The schematic framework shown is only an example in which the embodiments of the present disclosure can be implemented. The scope of application of the embodiments of the present disclosure is not limited in any aspect by the framework.

[0048] It should be noted that the host device 101 can be an intelligent device with data processing and display functions, such as a smart phone, a computer, a tablet computer, a vehicle-mounted device, a smart speaker, a wearable device, etc. The host device can also be called a mobile terminal, a terminal, a mobile device, etc. The present disclosure does not limit the type of the host device.

[0049] Combine the following Figure 1 For application scenarios, refer to Figure 2 To describe a display page generation method according to an exemplary embodiment of the present disclosure. It should be noted that the above application scenarios are only shown to facilitate understanding of the spirit and principle of the present disclosure, and the embodiments of the present disclosure are not limited in this respect. On the contrary, the embodiments of the present disclosure can be applied to any applicable scenario.

[0050] Figure 2 A flow chart of a method for generating a display page according to an embodiment of the present disclosure is shown. Figure 2 As shown, the display page generation method may include the following steps:

[0051] In step S210, a safety area in a reference display page is obtained;

[0052] In step S220, an actual security area that can accommodate the security area is determined according to display parameters of the host device;

[0053] In step S230, a scaling ratio is determined according to the safety area and the actual safety area;

[0054] In step S240, the reference display page is scaled based on the scaling ratio to generate a target display page for the host device.

[0055] In the disclosed embodiments, on the one hand, since the actual safe area of ​​the safe area accommodating the reference display page can be determined according to the display parameters of the host device, and then the scaling ratio is determined according to the safe area and the actual safe area, and the reference display page is restored based on the scaling ratio, the process of separately formulating layouts and displaying content for host devices of different resolutions and dpi is avoided, thereby improving the versatility of the reference display page, improving the efficiency of designing the reference display page, and improving the development efficiency of restoring to the target display page. On the other hand, since the actual safe area of ​​the safe area accommodating the reference display page can be determined according to the display parameters of the host device, and then the scaling ratio is determined according to the safe area and the actual safe area, and the reference display page is restored based on the scaling ratio, the problem of inconsistency between the display effect and the visual draft that may occur at the boundary dpi is avoided, and the consistency between the target display page and the reference display page can be improved, and the page restoration effect is improved.

[0056] Next, the display page generation method in the embodiment of the present disclosure is explained in detail with reference to the accompanying drawings.

[0057] In step S210, a safety area in a reference display page is obtained.

[0058] In the disclosed embodiment, the reference display page refers to a visual page provided by a designer, that is, a pre-designed visual draft. The reference display page may include multiple elements, and the multiple elements refer to page elements, which may specifically include core elements and non-core elements. The reference display page may be a page of a certain application, such as a display page of a music application; it may also be a display page of the device itself, which is not specifically limited here. The reference display page may include a safe area and a non-safe area. The safe area refers to an area containing core elements, and the non-safe area refers to other areas except the safe area. The elements displayed in the safe area are core elements, and the core elements of the safe area need to be fully displayed; the elements displayed in the non-safe area are non-core elements, and the non-core elements in the non-safe area do not need to be fully displayed, and the non-safe area can be cropped according to actual needs. Reference Figure 3 As shown in , the reference display page can be a display page of a music application, and the reference display page may include a cover, operation bubbles, song title, lyrics, etc.

[0059] In some embodiments, it is necessary to ensure that the core elements to be presented by the application are within the safe area, and to ensure that the elements in the safe area are fully restored. Elements in the non-safe area can be cropped without affecting the user experience, and the non-safe area can be flexibly cropped according to the actual situation of the host device. The non-safe area has flexible adaptation rules and can adapt to unlimited expansion, such as gradients, decorative patterns, etc., and the visual restoration of the non-safe area can be flexibly adjusted according to the actual situation of the host device.

[0060] In step S220, an actual security area that can accommodate the security area is determined according to the display parameters of the host device.

[0061] In the disclosed embodiments, the host device refers to a physical device that hosts the running of the application, and it provides a display device for displaying the application interface, such as a display, a touch screen, and the like. The host device refers to a device used to restore and display the reference display page. The host device may be a display device different from the device where the reference display page is located, and the host device may have display parameters, which may include the display resolution of the host device and the number of pixels per inch dpi of the display screen in the host device. The display resolution refers to the number of pixels that the host device can display in the horizontal and vertical directions of the screen, and the display resolution can reflect the aspect ratio of the host device. dpi (Dots Per Inch) refers to the number of pixels per inch of the display screen, which can reflect the degree of sophistication of the application interface displayed by the host device.

[0062] When the display parameters of the host device include the display resolution of the host device and the number of pixels per inch of the display screen of the host device, the maximum safe area that can accommodate the safe area in the reference display area can be determined from the two dimensions of display resolution and dpi according to the display resolution of the host device and the number of pixels per inch of the display screen of the host device. Figure 4 As shown in , determining the maximum safe area may include the following steps:

[0063] Step S410, determining the logical resolution of the host device according to the product of the display resolution and the number of pixels per inch of the display screen;

[0064] Step S420, determining the maximum display area according to the logical resolution;

[0065] Step S430: determining, within the maximum display area, an actual safety area corresponding to the safety area in the reference display page.

[0066] For example, the possibility of switching between horizontal and vertical screens exists on the same host device, so the actual safe area that can accommodate the maximum safe area can be determined according to the logical resolution. Logical resolution refers to the resolution that the software can achieve at a specific screen size, which can be adjusted according to the display resolution of the host device. Considering that even with the same display resolution, the maximum display area of ​​the application varies greatly at different dpi. In order to achieve unified processing, the display resolution and dpi of the host device need to be combined and converted into the logical resolution of the host device. The calculation formula for logical resolution is: logical resolution = display resolution * dpi.

[0067] In some embodiments, after calculating the logical resolution, the length of the shorter side of the calculated logical resolution can be used as the shortest length, and the square area with the shortest length as the side length can be determined as the maximum display area, and then the actual safe area that can accommodate the maximum safe area is determined within the maximum display area. Exemplarily, within the square area represented by the maximum display area, the area that is completely enlarged / reduced in proportion to the safe area on the reference display page defined in the visual draft is determined as the actual safe area for the developer to perform visual restoration.

[0068] Taking a smartphone as the host device as an example, the logical resolution of the smartphone is first determined based on the product of the display resolution of the smartphone and the number of pixels per inch of the display screen in the smartphone. The square area with the shorter side as the length in the logical resolution corresponding to the smartphone is used as the maximum display area, that is, the square area with the width of the smartphone as the length is determined as the maximum display area, and the area in the maximum display area that is scaled in proportion to the safe area is determined as the actual safe area.

[0069] In step S230, a scaling ratio is determined according to the safety area and the actual safety area.

[0070] In the disclosed embodiment, after determining the safety area of ​​the reference display page and the actual safety area on the host device, the scaling ratio can be determined according to the ratio of the actual safety area to the safety area. For example, the ratio between the length of the actual safety area and the length of the safety area in the reference display page can be calculated to obtain the scaling ratio. By determining the actual safety area by referring to the safety area of ​​the display page and the display parameters of the host device, and then calculating the scaling ratio according to the actual safety area and the safety area, the accuracy and reliability of the scaling ratio can be improved.

[0071] In other embodiments, the scaling ratio of each element can also be determined by referring to the position of each element in the safe area of ​​the display page, the attribute information of each element, and the display parameters of the host device. Exemplarily, the position of each element in the safe area of ​​the reference display page and the attribute information of each element can be determined; the position and attribute information, and the display parameters of the host device are input into the machine learning model to determine the scaling ratio of each element. Among them, the machine learning model is trained based on the sample reference display page and the position of each element and the attribute information of each element in the sample display page. The sample reference display page may be the same as or different from the reference display page, and the sample reference display page may be a historical visual draft provided by the designer. The sample display page is a sample reference display page restored on the host device, specifically referring to a display page that matches the host device when the sample reference display page is restored to the corresponding host device.

[0072] In some embodiments, the position of each element in the sample reference display page and the attribute information of each element, and the display parameters of the host device can be input into the machine learning model to be trained to determine the predicted zoom ratio. The standard zoom ratio is determined based on the position of each element in the sample display page and the attribute information of each element, and the position of each element in the sample reference display page and the attribute information of each element. Based on the difference between the standard zoom ratio and the predicted zoom ratio, the model parameters of the machine learning model to be trained are adjusted until the predicted zoom ratio is consistent with the standard zoom ratio or the difference between the predicted zoom ratio and the standard zoom ratio meets the preset threshold to obtain a machine learning model. Among them, the preset threshold can be a smaller value, which is determined according to actual needs.

[0073] After obtaining the machine learning model, the position of each element in the security area of ​​the reference display page, the attribute information of each element, and the display parameters of the host device can be input into the machine learning model to output the scaling ratio of each element in the reference display page. Among them, the attribute information of each element can be used to indicate the type of element, such as image element, text element, symbol element, etc. The scaling ratio of each element can be the same or different, and is not specifically limited here. The scaling ratio of each element can be determined based on the importance of the element to the reference display page. The importance of elements varies depending on the type of reference display page. For example, when the reference display page is a display page of an application, the importance of text elements is higher than that of image elements. When the reference display page is a display page of a shopping application, the importance of image elements is higher than that of text elements.

[0074] In the disclosed embodiment, the scaling ratio of each element in the safety area is determined by a machine learning model, which can improve the accuracy of the determined scaling ratio.

[0075] Figure 5 A schematic diagram for determining the scaling ratio is shown schematically in FIG. Figure 5 As shown in , first, the safe area in the reference display page, such as the safe area 501, can be determined. For the host device, the logical resolution of the host device can be determined based on the product of the display resolution of the host device and the number of pixels per inch of the display screen. Different host devices may have the same or different logical resolutions, which are specifically determined based on the display resolution of the host device 502 and the number of pixels per inch of the display screen. Further, the length of the shorter side in the logical resolution is taken as the shortest length, and the square area with the shortest length as the side length can be used as the maximum display area 503. And in the maximum display area, the area scaled in proportion to the safe area is determined as the actual safe area 504 that can accommodate the safe area.

[0076] In step S240, the reference display page is scaled based on the scaling ratio to generate a target display page for the host device.

[0077] In the disclosed embodiment, after determining the scaling ratio of the safety area of ​​the reference display page relative to the host device, the reference display page can be scaled based on the scaling ratio to generate a target display page for the host device. Exemplarily, the reference display page can be scaled as a whole to obtain a target display page. In some embodiments, the scaling ratio can be used as a global constant, and the element size and spacing of each element in the reference display page can be scaled according to the global constant to obtain a scaling result, and the target display page for the host device can be generated according to the scaling result. Specifically, the calculated scaling ratio can be used as a global constant, and the element size and element spacing of each element in the reference display page corresponding to the visual draft can be uniformly multiplied by the global variable to obtain the scaling result. Further, depending on whether the scaling result is an integer, the scaling result can be directly determined as the target display page or the scaling result can be processed to determine the processed scaling result as the target display page. Exemplarily, when the scaling result is an integer, the target display page for the host device can be directly generated according to the scaling result. When the scaling result is a decimal, the scaling result cannot be directly used as the target display page. The scaling result can be rounded to an integer to obtain the target display page, thereby achieving visual restoration of the actual size of the host device.

[0078] In addition, when the number of elements in the safe area of ​​the reference display page is less than the preset number, it can be considered that the elements in the safe area are dispersed. In this case, the embodiment of the present disclosure can also perform scaling processing in units of elements. The preset number can be determined according to actual needs. Specifically, the safe area of ​​the reference display page contains at least one element, and each element has corresponding display reference data; the display reference data and the scaling ratio of each element are input into the calculation component to obtain the scaling results of each element calculated and output by the calculation component. Exemplarily, the display reference data of each element can be used as input data, and the scaling ratio is multiplied by the display reference data to obtain the scaling result of each element. The display reference data at least includes: the coordinates, element size and spacing of the element. The coordinates, element size and spacing of each element in the safe area are input into the calculation component to calculate the coordinates, element size and spacing of the proportionally adjusted elements.

[0079] In other embodiments, when the number of elements in the safe area of ​​the reference display page is greater than a preset number, it can be considered that the elements in the safe area are concentratedly distributed. In this case, the scaling process can also be performed in units of blocks. Specifically, the safe area of ​​the reference display page contains elements located in each block, each element has corresponding relative display reference data, and each block has corresponding display reference data. In units of blocks, the display reference data of each element belonging to the same block is obtained according to the relative display reference data and the scaling ratio of each element belonging to the same block, that is, the scaling result. If the safe area of ​​the reference display page contains multiple blocks, the scaling process can be performed in the same processing method. Among them, the relative display reference data is the layout data of the elements located in the block relative to the block. The relative display reference data may include coordinates, element size, and spacing. For example, when the element contains text and pictures, the relative display reference data may include: text coordinates, font size, picture coordinates, picture size and other data related to the layout position and size of the element.

[0080] In some embodiments, the display style of the target display page may also be determined according to the scene parameters of the application scene presented on the host device. The scene parameters are used to indicate the scene type of the application scene. The scene type may be any one of a music scene, a video scene, a news scene, a novel scene, or a shopping scene. The display style may be a simple style, a grid style, a cartoon style, a card style, and the like. Depending on the scene type, the display style of the target display page restored from the reference display page to the host device may also be different.

[0081] In some embodiments, in addition to the security area, the reference display page may also include a non-security area. For the non-security area, the display state of the element in the actual non-security area of ​​the target display page can be determined in combination with the element attributes of the non-security area of ​​the reference display page and the display style of the target display page. The display state is used to describe whether the element is displayed and the display method. The display method may include distinctive display or hidden display. The distinctive display may include bold display or one or more of highlight display and dynamic display. Hidden display may include periodic display or reduced display. The element attributes of the non-security area are used to describe the importance of the elements of the non-security area. When the elements of the non-security area are high-importance elements, the display state may be determined as one or more of bold display or highlight display and dynamic display. When the elements of the non-security area are low-importance elements, the low-importance elements may not be displayed or may be displayed. When displaying, the display state may be determined as hidden display, periodic display or reduced display.

[0082] In some embodiments, if design and development efficiency is prioritized, designers design the reference display page based on the most common display devices (16:9 display ratio, 1080P screen resolution). The technical solutions and responsive layout solutions provided in the embodiments of the present disclosure can ensure completely consistent restoration effects under the same host device.

[0083] On a 360P display device with the same 16:9 display ratio, since there are fewer pixels for display, the space occupied by each layout element on the reference display page provided by the visual draft in the related technology becomes relatively larger, and a large amount of overlap may occur between the elements, which cannot fully meet the requirements of designers.

[0084] On a 4K display device with the same 16:9 display ratio, since more pixels are used for display, the space occupied by each layout element on the reference display page provided by the visual draft in the relevant technology becomes relatively smaller, which may cause the text in the lyrics area to shrink and become difficult to see clearly. The spacing between elements becomes larger, making the page as a whole sparse and unable to fully meet the requirements of designers.

[0085] Based on this, the method provided in the embodiment of the present disclosure to determine the scaling ratio according to the reference display page and then determine the objection of the target display page of the host device can eliminate the influence of the screen clarity (dpi) and ensure the consistency of the visual restoration effect under different screen clarity dpi.

[0086] If the design restoration is prioritized, designers in the responsive layout solution need to prepare visual drafts for common dpi / display resolutions (720P, 960P, 1080P, 2K, 4K), and developers use branch codes to achieve 100% restoration of the visual drafts, which increases the overall design and development costs. The technical solution provided in the disclosed embodiment does not require the design of multiple branch codes. For different resolutions, only one general code needs to be designed to achieve the restoration of the reference display page, thereby reducing costs.

[0087] For example, for Figure 3 For the 1080P reference display page provided in the , if the solution in the related art is used for restoration, the elements of the restored display page at 360P will overlap seriously, for example Fig. 6A If the solution in the related art is used for restoration, the restored display page under 1080P is completely consistent with the reference display page, for example Figure 6B If the solution in the related art is used for restoration, the elements of the restored display page at 4K are sparsely arranged, for example Figure 6C shown.

[0088] for Figure 3For the 1080P reference display page provided in the specification, if the technical solution in the embodiment of the present disclosure is used to calculate the scaling ratio according to the safe area and the actual safe area, and the safe area is restored according to the calculated ratio, the target display page restored at any resolution of 360P / 1080P / 4K is the same as Figure 3 The reference display page provided in is exactly the same, for example, reference Figure 7 as shown in .

[0089] In the disclosed embodiment, by designing a visual draft, the scaling ratio is determined based on the safe area in the reference display page represented by the visual draft and the actual safe area on the host device, and then the target display page for the host device is determined based on the scaling ratio. In the safe area, only one design is required and one page development is completed to achieve accurate restoration of the reference display page, which improves the restoration effect and avoids the problem of low efficiency caused by multiple page developments. Developers only need to calculate the scaling ratio, and do not need to process the properties of the host device such as different display resolutions separately, which improves convenience and development efficiency. Designers only need to provide a reference display page for a specific safe area, which improves design efficiency. The influence of screen clarity can be avoided, and a target display page that is completely consistent with the reference display page can be provided on different host devices, ensuring the consistency of visual restoration effects at different resolutions and improving the quality of visual effects.

[0090] The technical solution in the disclosed embodiment realizes one-time design and one-time development to complete page delivery through the design visual draft of the scheme in the safe area, thereby improving the efficiency of page generation. In the safe area, combined with the display resolution of the host device and the DPI calculation scaling ratio, it is possible to achieve consistent restoration of the reference display page at any resolution, thereby improving the display consistency of the generated target display page. Outside the safe area, the method of enriching the overall aesthetics of the page through decorative elements is used. Outside the safe area, the target display page is enriched through decorative elements to improve the overall aesthetics and display effect of the page.

[0091] Next, refer to Figure 8 The display page generation device according to the exemplary embodiment of the present disclosure is described. Figure 8 As shown, the display page generating device 800 may include:

[0092] The safety area acquisition module 801 is used to acquire the safety area in the reference display page;

[0093] An actual safety area determination module 802, configured to determine an actual safety area that can accommodate the safety area according to display parameters of a host device;

[0094] A scaling ratio determining module 803, configured to determine a scaling ratio according to the safety area and the actual safety area;

[0095] The restoration module 804 is configured to scale the reference display page based on the scaling ratio to generate a target display page for the host device.

[0096] In an exemplary embodiment of the present disclosure, the display parameters include the display resolution of the host device and the number of pixels per inch of the display screen in the host device; the actual safety area determination module includes: a logical resolution determination module, used to determine the logical resolution of the host device according to the product of the display resolution and the number of pixels per inch of the display screen; a maximum display area determination module, used to determine the maximum display area according to the logical resolution; an actual determination module, used to determine the actual safety area corresponding to the safety area within the maximum display area.

[0097] In an exemplary embodiment of the present disclosure, the maximum display area determination module includes: a shortest length determination module, used to determine the shortest length in the logical resolution; and a maximum determination module, used to determine a square area with the shortest length as the side length as the maximum display area.

[0098] In an exemplary embodiment of the present disclosure, the actual determination module is configured to: determine, in the maximum display area, an area scaled in proportion to the safety area as the actual safety area.

[0099] In an exemplary embodiment of the present disclosure, the scaling ratio determination module is configured to: determine the ratio between the length of the actual safety area and the length of the safety area as the scaling ratio.

[0100] In an exemplary embodiment of the present disclosure, the restoration module includes: a scaling module, which is used to use the scaling ratio as a global constant, scale the element size and spacing of each element in the reference display page according to the global constant to obtain a scaling result, and generate a target display page for the host device according to the scaling result.

[0101] In an exemplary embodiment of the present disclosure, the zoom module includes: a rounding module, which is used to round the zoom result to generate the target display page when the zoom result is a decimal.

[0102] In an exemplary embodiment of the present disclosure, the apparatus further includes: a display style determination module, configured to determine a display style of the target display page according to a scene parameter of an application scene presented on the host device.

[0103] In an exemplary embodiment of the present disclosure, the reference display page also includes a non-safe area, and the device also includes: a display status determination module, which is used to determine the display status of elements in the actual non-safe area of ​​the target display page based on the element attributes of the non-safe area in the reference display page and the display style of the target display page.

[0104] In an exemplary embodiment of the present disclosure, the device also includes: an attribute determination module, used to determine the position of each element in the safe area of ​​the reference display page and the attribute information of each element; a scaling ratio prediction module, used to input the position, the attribute information and the display parameters of the host device into a machine learning model to determine the scaling ratio of each element; wherein the machine learning model is trained based on a sample reference display page and the position of each element in the sample display page and the attribute information of each element; the sample display page is a sample reference display page restored on the host device.

[0105] It should be noted that the corresponding details in the above-mentioned display page generating device have been elaborated in detail in the display page generating method, and will not be repeated here.

[0106] Refer to the following Fig. 9 The electronic device 900 according to this embodiment of the present disclosure is described. Fig. 9 The electronic device 900 shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0107] like Fig. 9 As shown, the electronic device 900 is in the form of a general computing device. The components of the electronic device 900 may include, but are not limited to: the at least one processing unit 910, the at least one storage unit 920, a bus 930 connecting different system components (including the storage unit 920 and the processing unit 910), and a display unit 940. The bus 930 may include a data bus, an address bus, and a control bus.

[0108] The storage unit stores a program code, which can be executed by the processing unit 910, so that the processing unit 910 performs the steps according to various exemplary embodiments of the present disclosure described in the above “Exemplary Method” section of this specification. For example, the processing unit 910 can perform the following steps: Figure 2 Steps shown.

[0109] The storage unit 920 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 9201 and / or a cache storage unit 9202 , and may further include a read-only storage unit (ROM) 9203 .

[0110] The storage unit 920 may also include a program / utility 9204 having a set (at least one) of program modules 9205, such program modules 9205 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0111] Bus 930 may represent one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, a graphics acceleration interface, a processing unit, or a local bus using any of a variety of bus architectures.

[0112] The electronic device 900 may also communicate with one or more external devices 1000 (e.g., keyboards, pointing devices, Bluetooth devices, etc.). Such communication may be performed via an input / output (I / O) interface 950. Furthermore, the electronic device 900 may also communicate with one or more networks (e.g., local area networks (LANs), wide area networks (WANs), and / or public networks, such as the Internet) via a network adapter 960. As shown, the network adapter 960 communicates with other modules of the electronic device 900 via a bus 930. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 900, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, etc.

[0113] It should be noted that, in some embodiments of the present disclosure, a computer program product is also provided. The computer program product includes a computer program. When the computer program is executed by a processor, the above method is implemented.

[0114] In one embodiment, the computer program product may be a tangible product containing a computer program, such as a computer-readable storage medium storing a computer program. The readable storage medium may be a storage medium based on electrical, magnetic, optical, electromagnetic, infrared, or other signals, including but not limited to: random access memory (RAM), read-only memory (ROM), magnetic tape, floppy disk, flash memory (Flash), mechanical hard disk (HDD), solid-state drive (SSD), and the like. Exemplarily, the computer program product may be implemented as a non-volatile storage medium storing a computer program, such as a read-only memory, a NAND flash memory, and the like.

[0115] In one embodiment, the computer program product may be an intangible product including a computer program. Exemplarily, the computer program product may be implemented as a virtual digital product, such as a digital file storing an executable file, an installation package, etc. of the computer program.

[0116] The code of the computer program can be written in one or more programming languages. Programming languages ​​such as C language, Java, C++, etc. The program code can be executed entirely on the user computing device, or partially on the user computing device, or as a separate software package, or partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device can be connected to the user computing device through any type of network, such as a local area network (LAN), a wide area network (WAN), etc., or can be connected to an external computing device (e.g., an Internet connection provided by an operator).

[0117] The computer program may be carried or transmitted via electrical, magnetic, optical, electromagnetic, infrared, or other signals. The electronic device may convert the signal carrying the computer program into a digital signal, thereby running the computer program. When the computer program is run on an electronic device, its code is used to enable the electronic device to execute (more specifically, the processor of the electronic device may execute) the method steps of various exemplary embodiments of the present disclosure.

[0118] Through the description of the above implementation, it is easy for those skilled in the art to understand that the example implementation described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the implementation of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, including several instructions to enable a computing device (which can be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the implementation of the present disclosure.

[0119] In addition, the above-mentioned figures are only schematic illustrations of the processes included in the method according to the exemplary embodiments of the present disclosure, and are not intended to be limiting. It is easy to understand that the processes shown in the above-mentioned figures do not indicate or limit the time sequence of these processes. In addition, it is also easy to understand that these processes can be performed synchronously or asynchronously, for example, in multiple modules.

[0120] It should be noted that, although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into multiple modules or units to be embodied.

[0121] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing what is disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary technical means in the art that are not disclosed in the present disclosure. The specification and embodiments are to be considered merely as exemplary, and the true scope and spirit of the present disclosure are indicated by the claims.

[0122] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for generating a display page, characterized in that: include: Get the safe area in the reference display page; Determining an actual security area that can accommodate the security area according to display parameters of the host device; Determine a scaling ratio according to the safety area and the actual safety area; The reference display page is scaled based on the scaling ratio to generate a target display page for the host device.

2. The display page generation method according to claim 1, characterized in that: The display parameters include the display resolution of the host device and the number of pixels per inch of the display screen in the host device; The determining, according to the display parameters of the host device, an actual security area that can accommodate the security area includes: Determining the logical resolution of the host device according to the product of the display resolution and the number of pixels per inch of the display screen; Determine the maximum display area according to the logical resolution; An actual safety area corresponding to the safety area is determined within the maximum display area.

3. The display page generation method according to claim 2, characterized in that: The determining the maximum display area according to the logical resolution includes: determining the shortest length within the logical resolution; A square area with the shortest length as the side length is determined as the maximum display area.

4. The display page generation method according to claim 2, characterized in that: Determining, within the maximum display area, an actual safety area corresponding to the safety area includes: In the maximum display area, an area that is scaled in proportion to the safety area is determined as the actual safety area.

5. The display page generation method according to claim 1, characterized in that: The determining the scaling ratio according to the safety area and the actual safety area includes: The ratio between the length of the actual safety area and the length of the safety area is determined as the scaling ratio.

6. The display page generation method according to claim 1, characterized in that: The step of scaling the reference display page based on the scaling ratio to generate a target display page for the host device includes: The scaling ratio is used as a global constant, and the element size and spacing of each element in the reference display page are scaled according to the global constant to obtain a scaling result, and a target display page for the host device is generated according to the scaling result.

7. The display page generation method according to claim 6, characterized in that: The generating a target display page for the host device according to the scaling result includes: In the case that the scaling result is a decimal, the scaling result is rounded to an integer to generate the target display page.

8. A display page generating device, characterized in that: include: A safety area acquisition module, used to acquire the safety area in the reference display page; An actual safety area determination module, used to determine an actual safety area that can accommodate the safety area according to display parameters of the host device; A scaling ratio determination module, configured to determine a scaling ratio according to the safety area and the actual safety area; The restoration module is used to scale the reference display page based on the scaling ratio to generate a target display page for the host device.

9. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the display page generation method according to any one of claims 1 to 7 is implemented.

10. An electronic device, characterized in that: include: processor; as well as A memory for storing executable instructions; The processor is configured to execute the display page generating method according to any one of claims 1 to 7 by executing the executable instructions.

Images