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

Abstract

Embodiments of the present disclosure provide a display page generation method and display page generation method, device, computer program product and electronic equipment, relating to the technical field of computer. The display page generation method comprises: obtaining a safe area in a reference display page; determining an actual safe area capable of accommodating the safe area according to a display parameter of a host device; determining a scaling ratio according to the safe area and the actual safe area; and generating a target display page for the host device by scaling the reference display page based on the scaling ratio. The technical scheme of the embodiments of the present disclosure can improve the accuracy of the display page.

Description

Technical Field

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

[0002] This section is intended to provide background or context for the embodiments of this disclosure as set forth in the claims. The description herein is not intended to be a prior art simply because it is included in this section.

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

[0004] Among related technologies, adaptive layout technology or responsive layout technology can be used to reproduce the visual drafts provided by the designer on the host device. Summary of the Invention

[0005] In some embodiments, adaptive layout technology and responsive layout technology require different layouts and display content for host devices with different resolutions and dpi, and the layout is only based on the resolution. At the boundary dpi, the display effect may be inconsistent with the visual design.

[0006] Therefore, there is a great need for an improved method for generating display pages to address the need to develop different layouts and display content for host devices with different resolutions and dpi, as well as the issue of inconsistencies between the display effect and the visual design that may occur at boundary dpi.

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

[0008] According to one aspect of this disclosure, a method for generating a display page is provided, comprising: obtaining a safe area in a reference display page; determining an actual safe area capable of accommodating the safe area based on display parameters of a host device; determining a scaling ratio based on the safe area and the actual safe area; and scaling the reference display page based on the scaling ratio to generate a target display page for the host device.

[0009] In one exemplary embodiment of this 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; determining the actual safe area that can accommodate the safe area based on the display parameters of the host device includes: determining the logical resolution of the host device based on the product of the display resolution and the number of pixels per inch of the display screen; determining the maximum display area based on the logical resolution; and determining the actual safe area corresponding to the safe area within the maximum display area.

[0010] In one exemplary embodiment of this disclosure, determining the maximum display area based on the logical resolution includes: determining the shortest length in the logical resolution; and determining a square area with the shortest length as its side length as the maximum display area.

[0011] In one exemplary embodiment of this disclosure, determining the actual safe area corresponding to the safe area within the maximum display area includes: determining the actual safe area as an area scaled proportionally to the safe area within the maximum display area.

[0012] In one exemplary embodiment of this disclosure, determining the scaling ratio based on the security region and the actual security region includes: determining the scaling ratio as the ratio between the length of the actual security region and the length of the security region.

[0013] In one exemplary embodiment of this 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 a target display page for the host device based on the scaling result.

[0014] In one exemplary embodiment of this disclosure, generating a target display page for the host device based on the scaling result includes: if the scaling result is a decimal, performing a rounding operation on the scaling result to generate the target display page.

[0015] In one exemplary embodiment of this disclosure, the method further includes: determining the display style of the target display page based on scene parameters of the application scenario presented on the host device.

[0016] In one exemplary embodiment of this disclosure, the reference display page further includes a non-safe area, and the method further includes: determining the display state of elements in the actual non-safe area of ​​the target display page by combining the element attributes of the non-safe area in the reference display page and the display style of the target display page.

[0017] In one exemplary embodiment of this disclosure, the method further includes: determining the position of each element in the safe 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 the sample reference display page and the position and attribute information of each element in the sample display page; the sample display page is a sample reference display page restored on the host device.

[0018] According to one aspect of this disclosure, a display page generation apparatus is provided, comprising: a security area acquisition module for acquiring a security area in a reference display page; an actual security area determination module for determining an actual security area capable of accommodating the security area based on display parameters of a host device; a scaling ratio determination module for determining a scaling ratio based on the security area and the actual security area; and a restoration module for scaling 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 this disclosure, a computer program product is provided, comprising a computer program that, when executed by a processor, implements the display page generation method as described in any of the preceding claims.

[0020] According to one aspect of this disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions; wherein the processor is configured to perform the display page generation method described in any of the preceding claims by executing the executable instructions.

[0021] The technical solution in this disclosure, on the one hand, allows for the determination of the actual safe area to accommodate the reference display page based on the host device's display parameters. Furthermore, the scaling ratio is determined based on the safe area and the actual safe area, and the reference display page is then reconstructed based on the scaling ratio. This avoids the need to separately define layouts and display content for host devices with different resolutions and dpi, improving the versatility of the reference display page, increasing the efficiency of designing the reference display page, and also improving the development efficiency of reconstructing the target display page. On the other hand, since the actual safe area to accommodate the reference display page can be determined based on the host device's display parameters, and the scaling ratio is determined based on the safe area and the actual safe area, the reference display page is reconstructed based on the scaling ratio. This avoids the problem of inconsistencies between the display effect and the visual design at boundary dpi, improving the consistency between the target display page and the reference display page, and enhancing the page reconstruction effect. Attached Figure Description

[0022] The above and other objects, features, and advantages of this disclosure will become readily apparent from the following detailed description of exemplary embodiments, taken in conjunction with the accompanying drawings. Several embodiments of this disclosure are illustrated in the drawings by way of example and not limitation, in which:

[0023] Figure 1 The diagram illustrates an application scenario of an embodiment of this disclosure.

[0024] Figure 2 The schematic diagram illustrates a flowchart of a display page generation method according to an embodiment of the present disclosure.

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

[0026] Figure 4 The schematic diagram illustrates a process for determining the maximum safe area according to an embodiment of the present disclosure.

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

[0028] Figures 6A-6C A schematic diagram illustrating a restored display page in related technologies is shown.

[0029] Figure 7 A schematic diagram illustrating the target display page restored according to an embodiment of the present disclosure is shown.

[0030] Figure 8 A schematic block diagram of a display page generation apparatus according to an embodiment of the present disclosure is shown.

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

[0032] In the accompanying drawings, the same or corresponding reference numerals indicate the same or corresponding parts. Detailed Implementation

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

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

[0035] According to embodiments of this disclosure, a display page generation method, a display page generation apparatus, a computer program product, and an electronic device are proposed.

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

[0037] The principles and spirit of this disclosure will be explained in detail below with reference to several representative embodiments.

[0038] The inventors have discovered that adaptive layout technology refers to designers defining layouts for different screen resolutions, i.e., creating multiple static layouts, each corresponding to a specific screen resolution range. Changing the screen resolution switches between different static sections, and the positions of page elements change. However, within each static layout, page elements do not change with window size adjustments. Developers use different code to reproduce the visual effect for each static layout. In this approach, designers need to create different layouts and display content for different resolutions, and developers need to reproduce the corresponding visual effect for each layout, resulting in high time costs and low design efficiency. Furthermore, implementing layouts solely based on display resolution may lead to inconsistencies between the displayed effect and the visual design at lower DPI limits.

[0039] Responsive layout technology refers to designers creating different layouts and display content for host devices with different resolutions and dpi, while developers use the same codebase and techniques such as media queries to recreate the corresponding visual effects for different host devices. This technology can provide different visual effects based on changes in the window size of the application interface on the same host device.

[0040] In responsive layout technology, designers need to create different layouts and display content for different host devices, and developers need to handle each layout case specially, resulting in high time costs. Considering time and development costs, designers usually only provide adaptations for mainstream host devices, leading to user experience issues such as application interface truncation and layout imbalance on certain specific host devices, resulting in poor compatibility. Layouts based solely on display resolution may have discrepancies between the displayed effect and the visual design at lower DPI limits.

[0041] Based on the above, the basic idea of ​​this disclosure is to design a visual solution and use a set of code for host devices with different resolutions and dpi, so as to ensure a good visual experience on all host devices and prevent the incomplete display or disproportionate display of key page elements.

[0042] More specifically, in this disclosure, a secure area in a reference display page can first be obtained; an actual secure area that can accommodate the secure area is determined based on the display parameters of the host device; a scaling ratio is determined based on the secure area and the actual secure 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 this disclosure, various non-limiting embodiments of this disclosure will be described in detail below.

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

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

[0046] like Figure 1As shown, a reference display page 101 can be obtained, and the scaling ratio of the reference display page 101 can be further determined so as to scale the reference display page according to the scaling ratio to obtain a target display page 103 that matches the host device 102.

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

[0048] It should be noted that the host device 101 can be a smart device with data processing and display functions, such as a smartphone, computer, tablet, in-vehicle device, smart speaker, wearable device, etc. The host device can also be referred to as a mobile terminal, terminal, mobile device, etc. This disclosure does not limit the type of host device.

[0049] The following is combined Figure 1 Application scenarios, refer to Figure 2 This document describes a method for generating a display page according to exemplary embodiments of the present disclosure. It should be noted that the above application scenarios are shown only to facilitate understanding of the spirit and principles of the present disclosure, and the embodiments of the present disclosure are not limited in any way. Rather, the embodiments of the present disclosure can be applied to any applicable scenario.

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

[0051] In step S210, the safe area in the reference display page is obtained;

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

[0053] In step S230, the scaling ratio is determined based on the safe area and the actual safe 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 this embodiment, on the one hand, since the actual safe area for accommodating the reference display page can be determined based on the display parameters of the host device, and the scaling ratio can be determined based on the safe area and the actual safe area, and the reference display page can be restored based on the scaling ratio, the process of separately formulating layouts and display content for host devices with different resolutions and dpi is avoided. This improves the versatility of the reference display page, increases the efficiency of designing the reference display page, and also improves the development efficiency of restoring it to the target display page. On the other hand, since the actual safe area for accommodating the reference display page can be determined based on the display parameters of the host device, and the scaling ratio can be determined based on the safe area and the actual safe area, and the reference display page can be restored based on the scaling ratio, the problem of inconsistency between the display effect and the visual draft that may occur at boundary dpi is avoided. This improves the consistency between the target display page and the reference display page and enhances the page restoration effect.

[0056] Next, the display page generation method in the embodiments of this disclosure will be explained in detail with reference to the accompanying drawings.

[0057] In step S210, the safe area in the reference display page is obtained.

[0058] In this embodiment, the reference display page refers to a visual page provided by the designer, i.e., a pre-designed visual draft. The reference display page may include multiple elements, which refer to page elements, specifically core elements and non-core elements. The reference display page can be a page of an application, such as the display page of a music application; it can also be the display page of the device itself, without specific limitations. The reference display page may include a secure area and an insecure area. The secure area refers to the area containing the core elements, and the insecure area refers to other areas besides the secure area. The elements displayed in the secure area are core elements, and the core elements in the secure area must be fully displayed; the elements displayed in the insecure area are non-core elements, and the non-core elements in the insecure area do not need to be fully displayed, and the insecure area can be cropped according to actual needs. Figure 3 As shown, the reference display page can be the display page of a music application, which may include album art, pop-up ads, song titles, and lyrics, etc.

[0059] In some embodiments, it is necessary to ensure that all core elements to be presented by the application are within the safe area, and to guarantee the complete restoration of elements within the safe area. 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 infinite 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, the actual security area that can accommodate the security area is determined based on the display parameters of the host device.

[0061] In this embodiment of the disclosure, the host device refers to the physical device that hosts the application and provides a display device for displaying the application interface, such as a monitor, touchscreen, etc. The host device refers to the device used to reproduce and display a reference display page. The host device can be a different display device from the device where the reference display page is located. 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. Display resolution refers to the number of pixels that the host device can display in the horizontal and vertical directions of the screen, and it reflects the aspect ratio of the host device. Dpi (Dots Per Inch) refers to the number of pixels per inch of the display screen, and it reflects the level of detail of the application interface displayed by the host device.

[0062] When the host device's display parameters include the host device's display resolution and the number of pixels per inch (dpi) on the screen, the maximum safe area that can accommodate the safe area within the reference display area can be determined based on both the display resolution and dpi dimensions. Reference Figure 4 As shown, determining the maximum safe area may include the following steps:

[0063] Step S410: Determine the logical resolution of the host device based on the product of the display resolution and the number of pixels per inch of the display screen.

[0064] Step S420: Determine the maximum display area based on the logical resolution;

[0065] Step S430: Within the maximum display area, determine the actual safe area corresponding to the safe area in the reference display page.

[0066] For example, the same host device may switch between landscape and portrait modes, therefore the actual safe area that can accommodate the maximum safe area can be determined based on the logical resolution. Logical resolution refers to the resolution that software can achieve at a specific screen size, and it can be adjusted according to the host device's display resolution. Considering that even with the same display resolution, the maximum display area of ​​an application can vary significantly at different dpi (dpi), to achieve unified processing, the host device's display resolution and dpi need to be combined and converted into the host device's logical resolution. The formula for calculating logical resolution is: Logical resolution = Display resolution * dpi.

[0067] In some embodiments, after calculating the logical resolution, the shorter side of the calculated logical resolution can be used as the shortest length. The square area with the shortest length as its side length is determined as the maximum display area, and then the actual safe area that can accommodate the largest safe area is determined within the maximum display area. For example, within the square area represented by this maximum display area, the area that is scaled up / down to the same size as the safe area on the reference display page defined in the visual draft is determined as the actual safe area for visual reproduction by the developer.

[0068] Taking a smartphone as the host device as an example, the logical resolution of the smartphone is first determined by multiplying its display resolution by the number of pixels per inch (pixels per inch) on the screen. The maximum display area is a square region with the shorter side of the smartphone's logical resolution as its side length. Within this maximum display area, the area scaled proportionally to the security area is defined as the actual security area.

[0069] In step S230, the scaling ratio is determined based on the safe area and the actual safe area.

[0070] In this embodiment of the disclosure, after determining the secure area of ​​the reference display page and the actual secure area on the host device, the scaling ratio can be determined based on the ratio of the actual secure area to the total secure area. For example, the scaling ratio can be obtained by calculating the ratio between the length of the actual secure area and the length of the secure area in the reference display page. By determining the actual secure area using the secure area of ​​the reference display page and the display parameters of the host device, and then calculating the scaling ratio based on the actual secure area and the secure area, the accuracy and reliability of the scaling ratio can be improved.

[0071] In other embodiments, the scaling ratio of each element can be determined by the position of each element in the safe area of ​​the reference display page, the attribute information of each element, and the display parameters of the host device. For example, 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 a machine learning model to determine the scaling ratio of each element. The machine learning model is trained based on the sample reference display page and the position and 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 can be a historical visual draft provided by the designer. The sample display page is the sample reference display page restored on the host device; specifically, it refers to the 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 and attribute information of each element in the sample reference display page, along with the display parameters of the host device, can be input into the machine learning model to be trained to determine the predicted scaling ratio. A standard scaling ratio is determined based on the position and attribute information of each element in the sample display page, and the position and attribute information of each element in the sample reference display page. The model parameters of the machine learning model to be trained are adjusted based on the difference between the standard scaling ratio and the predicted scaling ratio until the predicted scaling ratio matches the standard scaling ratio or the difference between the predicted scaling ratio and the standard scaling ratio meets a preset threshold, thus obtaining the machine learning model. The preset threshold can be a small value, specifically determined according to actual needs.

[0073] After obtaining the machine learning model, the position of each element in the safe 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. The attribute information of each element can be used to represent the element type, such as image element, text element, symbol element, etc. The scaling ratio of each element can be the same or different; no specific limitation is made here. The scaling ratio of each element can be determined based on its importance to the reference display page. Different types of reference display pages have different levels of element importance. For example, when the reference display page is the display page of an application, text elements are more important than image elements. When the reference display page is the display page of a shopping application, image elements are more important than text elements.

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

[0075] Figure 5 The diagram illustrates the determination of the scaling ratio. (See reference) Figure 5 As shown, a safe area, such as safe area 501, can first be determined in the reference display page. For the host device, the logical resolution of the host device can be determined based on the product of the host device's display resolution and the number of pixels per inch of the display screen. Different host devices may have the same or different logical resolutions, 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 shorter side of the logical resolution is taken as the shortest length, and a square area with the shortest length as its side can be taken as the maximum display area 503. Within the maximum display area, an area scaled proportionally 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 this embodiment of the disclosure, after determining the scaling ratio of the safe 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. For example, the reference display page can be scaled as a whole to obtain the 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 based on the scaling result. Specifically, the calculated scaling ratio can be used as a global constant, and the element size and spacing of each element in the reference display page corresponding to the visual draft can be uniformly multiplied by this 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. For example, when the scaling result is an integer, the target display page for the host device can be directly generated based on the scaling result. When the scaling result is a decimal, it cannot be directly used as the target display page. Instead, the scaling result can be rounded to obtain the target display page, thus achieving visual restoration based on 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 a preset number, the elements in the safe area can be considered to be scattered. In this case, the embodiments of this disclosure can also perform scaling processing on an element-by-element basis. 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 scaling ratio of each element are input into the calculation component to obtain the scaling result of each element calculated and output by the calculation component. For example, the display reference data of each element can be used as input data, and the scaling ratio can be multiplied by the display reference data to obtain the scaling result of each element. The display reference data includes at least: the coordinates of the element, the element size, and the spacing. By inputting the coordinates, element size, and spacing of each element in the safe area into the calculation component, the coordinates, element size, and spacing of the element after proportional adjustment are calculated.

[0079] In other embodiments, when the number of elements in the safe area of ​​the reference display page exceeds a preset number, the elements in the safe area can be considered to be concentrated. In this case, scaling can be performed on a block-by-block basis. Specifically, the safe area of ​​the reference display page contains elements located within various blocks. Each element has corresponding relative display reference data, and each block has corresponding display reference data. Using blocks as units, based on the relative display reference data and scaling ratio of each element belonging to the same block, the display reference data of each element belonging to the same block is obtained, i.e., the scaling result. If the safe area of ​​the reference display page contains multiple blocks, scaling can be performed using the same method. The relative display reference data is the layout data of the elements within a block relative to the block. The relative display reference data can include coordinates, element size, and spacing. For example, when the elements contain text and images, the relative display reference data can include: text coordinates, font size, image coordinates, image size, and other data related to the element's layout position and size.

[0080] In some embodiments, the display style of the target display page can also be determined based on the scene parameters of the application scenario presented on the host device. Scene parameters represent the scene type of the application scenario. The scene type can be any one of a music scene, video scene, news scene, novel scene, or shopping scene. The display style can be a minimalist style, grid style, cartoon style, card style, etc. Different scene types may result in different display styles for the target display page restored from the reference display page to the host device.

[0081] In some embodiments, the reference display page may include non-safe areas in addition to safe areas. For non-safe areas, the display state of elements in the actual non-safe area of ​​the target display page can be determined by combining the element attributes of the non-safe area of ​​the reference display page and the display style of the target display page. The display state describes whether an element is displayed and how it is displayed. The display method may include differential display or hidden display. Differential display may include bold display, highlight display, or dynamic display, or one or more of these. Hidden display may include periodic display or minimized display. The element attributes of the non-safe area describe the importance of the elements in the non-safe area. When an element in the non-safe area is of high importance, the display state may be determined as bold display, highlight display, or dynamic display, or one or more of these. When an element in the non-safe area is of low importance, it may be either hidden or displayed; in this case, the display state may be determined as hidden display, or displayed periodically or minimized.

[0082] In some embodiments, if design and development efficiency is prioritized, designers use the most common display devices (16:9 aspect ratio, 1080P screen resolution) as a benchmark when designing the reference display page. The technical solutions and responsive layout schemes provided in this disclosure can guarantee completely consistent reproduction effects on the same host device.

[0083] On a 360P display device with the same 16:9 aspect ratio, due to fewer pixels used for display, the space occupied by each layout element on the reference display page provided by the visual draft in related technologies becomes relatively larger, and there may be a lot of overlap between elements, which cannot fully meet the requirements of designers.

[0084] On a 4K display device with the same 16:9 aspect ratio, due to the increased number of pixels used for display, the space occupied by each layout element on the reference display page provided in the visual design is relatively smaller. This may result in text, such as lyrics, appearing smaller and harder to read. Furthermore, the increased spacing between elements makes the overall page appear sparse, failing to fully meet the designer's requirements.

[0085] Based on this, the method provided in this embodiment for determining the scaling ratio based on the reference display page, and then determining the target display page of the host device, can eliminate the impact of screen resolution (dpi) and ensure the consistency of visual reproduction effect under different screen resolution dpi.

[0086] If design fidelity is prioritized, responsive layout solutions require designers to create separate visual mockups for common dpi / display resolutions (720P, 960P, 1080P, 2K, 4K). Developers then use branching code to achieve 100% fidelity to these mockups, increasing overall design and development costs. The technical solution provided in this disclosure eliminates the need for multiple branching codes; a single, universal codebase is sufficient to reproduce the reference display page for different resolutions, thus reducing costs.

[0087] For example, for Figure 3 Regarding the 1080P reference display page provided, if the solution in the related technology is used for restoration, the display page elements restored under 360P will have severe overlap, for example... Figure 6A As shown. If the solution in the relevant technology is used for restoration, the restored display page at 1080P is completely consistent with the reference display page, for example... Figure 6B As shown. If the solution in the relevant technology is used for restoration, the layout of the displayed page elements in the restored 4K image is sparse, for example... Figure 6C As shown.

[0088] for Figure 3Regarding the 1080P reference display page provided, if the scaling ratio is calculated based on the safe area and the actual safe area using the technical solution in this embodiment, and the safe area is restored according to the calculated ratio, the target display page restored at any resolution of 360P / 1080P / 4K will be identical to... Figure 3 The reference display page provided is completely identical to the one provided, for example, the reference... Figure 7 As shown in the image.

[0089] In this embodiment, by designing a visual draft, a 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. Then, based on the scaling ratio, a target display page for the host device is determined. Within the safe area, only one design and one page development are needed to accurately reproduce the reference display page, improving the reproduction effect and avoiding the inefficiency caused by multiple page developments. Developers only need to calculate the scaling ratio, without needing to handle different host device attributes such as different display resolutions, improving convenience and development efficiency. Designers only need to provide one reference display page for a specific safe area, improving design efficiency. It avoids the impact of screen resolution, ensuring a target display page completely consistent with the reference display page on different host devices, guaranteeing consistent visual reproduction effects at different resolutions, and improving visual quality.

[0090] The technical solution in this disclosure improves page generation efficiency by enabling page delivery through a single design and development phase using a visual draft of the secure area. Within the secure area, the scaling ratio is calculated based on the host device's display resolution and DPI, ensuring consistent reproduction of the reference display page at any resolution and improving the display consistency of the generated target display page. Outside the secure area, decorative elements are used to enrich the overall aesthetics of the target display page, enhancing its overall visual appeal and display effect.

[0091] Next, refer to Figure 8 The display page generation apparatus according to exemplary embodiments of this disclosure will be described. For example... Figure 8 As shown, the page generation device 800 may include:

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

[0093] The actual security area determination module 802 is used to determine the actual security area that can accommodate the security area based on the display parameters of the host device.

[0094] The scaling ratio determination module 803 is used to determine the scaling ratio based on the safe area and the actual safe area;

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

[0096] In one exemplary embodiment of this 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 security area determination module includes: a logical resolution determination module, configured to determine the logical resolution of the host device based on the product of the display resolution and the number of pixels per inch of the display screen; a maximum display area determination module, configured to determine the maximum display area based on the logical resolution; and an actual determination module, configured to determine the actual security area corresponding to the security area within the maximum display area.

[0097] In one exemplary embodiment of this disclosure, the maximum display area determination module includes: a minimum length determination module, configured to determine the minimum length in the logical resolution; and a maximum determination module, configured to determine a square area with the minimum length as its side length as the maximum display area.

[0098] In one exemplary embodiment of this disclosure, the actual determination module is configured to: determine the area scaled proportionally to the safe area as the actual safe area within the maximum display area.

[0099] In one exemplary embodiment of this disclosure, the scaling ratio determination module is configured to determine the scaling ratio as the ratio between the length of the actual safe area and the length of the safe area.

[0100] In one exemplary embodiment of this disclosure, the restoration module includes a scaling module, configured 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 one exemplary embodiment of this disclosure, the scaling module includes: a rounding module, configured to round the scaling result when the scaling result is a decimal, so as to generate the target display page.

[0102] In one exemplary embodiment of this disclosure, the apparatus further includes: a display style determination module, configured to determine the display style of the target display page based on scene parameters of the application scenario presented on the host device.

[0103] In one exemplary embodiment of this disclosure, the reference display page further includes a non-safe area, and the device further includes: a display state determination module, configured to determine the display state of elements in the actual non-safe area of ​​the target display page by combining the element attributes of the non-safe area in the reference display page and the display style of the target display page.

[0104] In one exemplary embodiment of this disclosure, the apparatus further includes: an attribute determination module, configured to determine the position of each element in the safe area of ​​the reference display page and the attribute information of each element; and a scaling ratio prediction module, configured 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 the sample reference display page and the position and attribute information of each element in the sample display page; and the sample display page is a sample reference display page restored on the host device.

[0105] It should be noted that the details of the aforementioned display page generation device have been elaborated in the display page generation method, and will not be repeated here.

[0106] The following reference Figure 9 To describe an electronic device 900 according to such an embodiment of the present disclosure. Figure 9 The electronic device 900 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments disclosed herein.

[0107] like Figure 9 As shown, the electronic device 900 is presented in the form of a general-purpose computing device. The components of the electronic device 900 may include, but are not limited to: at least one processing unit 910, 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 program code that can be executed by the processing unit 910, causing the processing unit 910 to perform the steps described in the "Exemplary Methods" section of this specification according to various exemplary embodiments of this disclosure. For example, the processing unit 910 can perform actions such as... Figure 2 The steps are shown.

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

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

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

[0112] Electronic device 900 can also communicate with one or more external devices 1000 (e.g., keyboard, pointing device, Bluetooth device, etc.). This communication can be performed through input / output (I / O) interface 950. Furthermore, electronic device 900 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public network, such as the Internet) via network adapter 960. As shown, network adapter 960 communicates with other modules of electronic device 900 via bus 930. It should be understood that, although not shown in the figure, other hardware and / or software modules can be used in conjunction with 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.

[0113] It should be noted that some embodiments of this disclosure also provide a computer program product, which includes a computer program that implements the above-described method when executed by a processor.

[0114] In one implementation, the computer program product can be a tangible product containing a computer program, such as a computer-readable storage medium storing the computer program. The readable storage medium can 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, hard disk drive (HDD), solid-state drive (SSD), etc. For example, the computer program product can be implemented as a non-volatile storage medium storing the computer program, such as read-only memory, NAND flash memory, etc.

[0115] In one implementation, the computer program product can be an intangible product containing a computer program. For example, the computer program product can be implemented as a virtual digital product, such as an executable file, installation package, or other digital file storing the computer program.

[0116] Computer program code can be written in one or more programming languages. Examples of programming languages ​​include C, Java, and C++. Program code can execute entirely on the user's computing device, partially on the user's computing device, or as a standalone software package. It can also execute partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, such as a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via an internet connection provided by a mobile network operator).

[0117] Computer programs can be carried or transmitted via signals such as electrical, magnetic, optical, electromagnetic, and infrared rays. Electronic devices can convert signals carrying computer programs into digital signals, thereby running the computer programs. When a computer program runs on an electronic device, its code is used to cause the electronic device to execute (more specifically, to be executed by the processor of the electronic device) the method steps of various exemplary embodiments of this disclosure.

[0118] From the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, terminal device, or network device, etc.) to execute the methods according to the embodiments of this disclosure.

[0119] Furthermore, the above figures are merely illustrative of the processes included in the method according to exemplary embodiments of this disclosure and are not intended to be limiting. It is readily understood that the processes shown in the above figures do not indicate or limit the temporal order of these processes. Additionally, it is readily understood that these processes may be executed synchronously or asynchronously, for example, in multiple modules.

[0120] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0121] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the disclosure herein. This application is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the claims.

[0122] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A display page generation method characterized by comprising: The method comprises: obtaining a safe area in a reference display page; the safe area is an area containing core elements; determining an actual safe area capable of accommodating 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; wherein the display parameters comprise a display resolution of the host device and a number of pixels per inch of the display screen in the host device; and the determining of the actual safe area capable of accommodating the safe area according to the display parameters of the host device comprises: determining a logical resolution of the host device according to a product of the display resolution and the number of pixels per inch of the display screen; determining a shortest length in the logical resolution, and determining a square area with the shortest length as a side length as a maximum display area; determining an actual safe area corresponding to the safe area in the maximum display area.

2. The display page generation method of claim 1, wherein, The determining of the actual safe area corresponding to the safe area in the maximum display area comprises: determining an area scaled at a same ratio as the safe area in the maximum display area as the actual safe area.

3. The display page generation method of claim 1, wherein, The determining of the scaling ratio according to the safe area and the actual safe area comprises: determining a ratio between lengths of the actual safe area and the safe area as the scaling ratio.

4. The display page generation method of claim 1, wherein, The scaling of the reference display page based on the scaling ratio to generate the target display page for the host device comprises: taking the scaling ratio as a global constant, scaling element sizes and spacings 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.

5. The display page generation method of claim 4, wherein, The generating of the target display page for the host device according to the scaling result comprises: in a case where the scaling result is a decimal number, performing an integer operation on the scaling result to generate the target display page.

6. The display page generation method of claim 1, wherein, The method further comprises: determining a display style of the target display page according to scene parameters of an application scenario presented on the host device.

7. The display page generation method of claim 6, wherein, The reference display page further comprises a non-safe area, and the method further comprises: determining display states of elements in an 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.

8. The display page generation method of claim 1, wherein, The method further comprises: determining positions of each element and attribute information of each element in the safe area of the reference display page; inputting the positions, the attribute information and the display parameters of the host device into a machine learning model to determine scaling ratios of the elements; wherein the machine learning model is trained according to positions of each element and attribute information of each element in a sample reference display page and a sample display page; and the sample display page is a sample reference display page restored on a host device.

9. A display page generating apparatus characterized by comprising: The method comprises: The security area acquisition module is configured to acquire a security area in the reference display page; The security area is an area containing a core element; The actual security area determination module is configured to determine an actual security area capable of containing the security area according to a display parameter of the host device; The scaling ratio determination module is configured to determine a scaling ratio according to the security area and the actual security area; The restoration module is configured to scale the reference display page based on the scaling ratio to generate a target display page for the host device; The display parameter includes a display resolution of the host device and a number of pixels per inch of a display screen of the host device; and the actual security area determination module is configured to determine the actual security area capable of containing the security area according to the display parameter of the host device, including: determining a logical resolution of the host device according to a product of the display resolution and the number of pixels per inch of the display screen; determining a shortest length in the logical resolution, and determining a square area with the shortest length as a side length as a maximum display area; determining the actual security area corresponding to the security area in the maximum display area.

10. A computer program product comprising a computer program, characterized in that, The computer program, when executed by a processor, implements the display page generation method of any one of claims 1 to 8.

11. An electronic device, comprising: comprising: a processor; and a memory configured to store executable instructions; wherein the processor is configured to execute the display page generation method of any one of claims 1 to 8 via execution of the executable instructions.

Images