Folding screen page layout method and device

Abstract

The invention relates to the technical field of page layout, and provides a folding screen page layout method and device. The method comprises the following steps: forming a plurality of breakpoint areas by taking horizontal widths of a plurality of screens in the folding screen as breakpoint bases based on a global grid system; based on a display scene of the page component, displaying the page component in a plurality of breakpoint areas by adopting a layout strategy matched with the display scene; the layout strategy comprises a self-adaptive dynamic layout strategy and a response type dynamic layout strategy. According to the method and device, it can be ensured that the screen content smoothly adapts to different forms of the folding screen, the compatibility of screen content display in all forms of the folding screen is improved, the screen content can meet the requirements for matching rationality, style consistency, interface clarity, reading comfort and the like in all forms of the folding screen, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of page layout technology, and in particular to a folding screen page layout method and device. Background Art

[0002] With the development of foldable screen technology, more and more users are choosing to use foldable screen devices, which can provide a wider field of view when unfolded and are easy to carry when folded.

[0003] However, the existing page layout method cannot ensure that the screen content can smoothly adapt to the different forms of the folding screen, so that the screen content cannot meet the requirements of adaptability, style consistency, interface clarity, reading comfort, etc. under different forms of the folding screen, resulting in a poor user experience. Summary of the invention

[0004] The embodiments of the present application provide a folding screen page layout method and device to solve the technical problem that the existing page layout method cannot ensure that the screen content can smoothly adapt to the different forms of the folding screen, so that the screen content cannot meet the requirements of adaptability, style consistency, interface clarity, reading comfort, etc. under different forms of the folding screen, resulting in poor user experience.

[0005] In a first aspect, an embodiment of the present application provides a folding screen page layout method, comprising: Based on the global grid system, the horizontal widths of multiple screens in the folding screen are used as breakpoints to form multiple breakpoint areas; Based on the display scenario of the page component, the page component is displayed in the plurality of breakpoint areas by adopting a layout strategy adapted to the display scenario; The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies, wherein the adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies, and the responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

[0006] In one embodiment, the display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of the basic component, a stretch layout strategy is adopted to display the basic component in a stretch layout in the multiple breakpoint areas with a fixed height and a stretch width.

[0007] In one embodiment, the display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of the detail component, an enlarged layout strategy is adopted to enlarge and layout the detail component in the plurality of breakpoint areas with a fixed aspect ratio.

[0008] In one embodiment, the display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of the independent space component, an extended layout strategy is adopted to display the independent space component in a horizontally incremental layout in the multiple breakpoint areas with a fixed aspect ratio.

[0009] In one embodiment, the display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In a display scenario of a simple hierarchical component, a shift layout strategy is adopted to determine whether the overall aspect ratio of the multiple breakpoint areas is greater than a preset aspect ratio; If not, the simple hierarchical components are displayed in a top-down layout in the multiple breakpoint areas; If so, determining whether the total width of the plurality of breakpoint regions is greater than the total width of a preset number of simple level components; If not, the simple hierarchical components are displayed in a top-down layout in the multiple breakpoint areas; If so, the simple hierarchical components are displayed in a left-right layout in the multiple breakpoint areas.

[0010] In one embodiment, the display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of components with the same attributes, a repeated layout strategy is adopted. When the total width of the multiple breakpoint areas is greater than the total width of a preset number of components with the same attributes, the components with the same attributes are horizontally repeated and displayed in the multiple breakpoint areas.

[0011] In one embodiment, the display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of the secondary components, a fluid layout strategy is adopted. When the total width of the multiple breakpoint areas is greater than the total width of a single row of secondary components with a preset number of columns, the secondary components are displayed in a multi-column vertical layout in the multiple breakpoint areas.

[0012] In one embodiment, it further includes: Establish a standard component library for commonly used page components for subsequent development calls.

[0013] In a second aspect, an embodiment of the present application provides a folding screen page layout device, including: A display area division module is used to: use the horizontal widths of multiple screens in the folding screen as breakpoints based on a global grid system to form multiple breakpoint areas; A page layout display module, used to: based on a display scenario of a page component, display the page component in the plurality of breakpoint areas by adopting a layout strategy adapted to the display scenario; The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies, wherein the adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies, and the responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

[0014] In a third aspect, an embodiment of the present application provides an electronic device, comprising a processor and a memory storing a computer program, wherein when the processor executes the program, the steps of the folding screen page layout method described in the first aspect are implemented.

[0015] The folding screen page layout method and device provided in the present application use the horizontal width of multiple screens in the folding screen as the breakpoint basis based on the global grid system to form multiple breakpoint areas. Based on the display scene of the page component, a layout strategy adapted to the display scene is adopted to display the page component in multiple breakpoint areas. Since the layout strategy includes an adaptive dynamic layout strategy and a responsive dynamic layout strategy, wherein the adaptive dynamic layout strategy includes a stretching layout strategy, an enlargement layout strategy and an extension layout strategy, and the responsive dynamic layout strategy includes a shifting layout strategy, a repeating layout strategy and a flowing layout strategy, and each screen display area is divided, it is possible to match an applicable layout strategy among multiple layout strategies based on the display scene of the page component, and then based on the layout strategy, the page component is adaptively displayed in each screen display area, so that the display requirements of the page component can be met to the maximum extent under different forms of the folding screen. In addition, since the information of the display area of ​​each screen is obtained in advance, when the page component is displayed, it is possible to avoid displaying key information at the connection of each display area, that is, at the connection of the breakpoint area, so as to prevent the connection from being easily worn and creased, which will have an adverse effect on the display of key information. To sum up, the present application can ensure that the screen content can smoothly adapt to the different forms of the folding screen, improve the compatibility of the screen content display under various forms of the folding screen, so that the screen content can meet the requirements of adaptability, style consistency, interface clarity, reading comfort and other requirements under various forms of the folding screen, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the present application or the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0017] Figure 1 It is a flowchart of a folding screen page layout method provided in an embodiment of the present application; Figure 2 It is a schematic diagram of a stretched layout of a folding screen page layout method provided in an embodiment of the present application; Figure 3 is an enlarged layout diagram of the folding screen page layout method provided in an embodiment of the present application; Figure 4 It is a schematic diagram of an extended layout of the folding screen page layout method provided in an embodiment of the present application; Figure 5 It is a schematic diagram of the shifting layout of the folding screen page layout method provided in an embodiment of the present application; Figure 6 It is a fluid layout diagram of the folding screen page layout method provided in an embodiment of the present application; Figure 7 is a schematic diagram of the structure of a folding screen page layout device provided in an embodiment of the present application; Figure 8 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0018] In order to make the purpose, technical solutions and advantages of this application clearer, the technical solutions in this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the described embodiments are part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0019] It should be noted that in the description of the embodiments of the present application, the terms "include", "comprise" or any other variant thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "including one..." do not exclude the existence of other identical elements in the process, method, article or device including the elements. The orientation or position relationship indicated by the terms "upper", "lower" and the like is based on the orientation or position relationship shown in the drawings, which is only for the convenience of describing the present application and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as a limitation on the present application. Unless otherwise clearly specified and limited, the terms "installed", "connected" and "connected" should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be directly connected, or indirectly connected through an intermediate medium, or it can be a connection between the two elements. For those skilled in the art, the specific meanings of the above terms in this application can be understood according to specific circumstances.

[0020] The terms "first", "second", etc. in this application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.

[0021] Figure 1 is a flow chart of the folding screen page layout method provided in the embodiment of the present application. Figure 1 , the present application embodiment provides a folding screen page layout method, which may include: 101. Based on the global grid system, the horizontal widths of multiple screens in the folding screen are used as breakpoint basis to form multiple breakpoint areas; 102. Based on the display scenario of the page component, a layout strategy adapted to the display scenario is adopted to display the page component in multiple breakpoint areas.

[0022] The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies. The adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies. The responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

[0023] In step 101, the global grid system is a system that can adapt to screens of any size, such as narrow screens and wide screens. The folding screen can be a folding screen of a mobile phone or a folding screen of other electronic devices, which is not limited here.

[0024] The global grid system is used as the front-end basic layout architecture of the entire folding screen, so that the folding screen has a regular layout structure when the page is adapted, as follows: 1. Provide unified positioning annotations: ensure the consistency of layout of each page component on different devices; 2. Flexible spacing adjustment method: to meet the needs of layout adjustment in special scenarios; 3. Automatic line wrapping and adaptation of one-to-many layout: When the number of page components exceeds the capacity of a row or column, it will automatically wrap to the next row or column, and adaptively layout on different devices, making the page layout more flexible and adaptable; 4. Reduce the complexity of design and development and improve work efficiency.

[0025] Based on the horizontal width of the screen in the folding screen, the total screen area available for display in different forms of the folding screen can be confirmed. For example, for a three-folding screen, its height is H, where the horizontal width of the first screen is D1, the horizontal width of the second screen is D2, and the horizontal width of the third screen is D3. Then its breakpoint areas are D1*H, D2*H and D3*H. When the first screen is used as the main screen, when the three-folding screen is fully folded, the total screen area available for display is D1*H. When the second screen of the three-folding screen is unfolded, the total screen area available for display is D1*H+D2*H. When all three screens are unfolded, the total screen area available for display is D1*H+D2*H+D3*H.

[0026] In step 102, based on the display scene of the page component, a layout strategy adapted to the display scene can be used to achieve different page layout effects in different screen total areas. Further, based on the three breakpoint areas, the connection of the breakpoint areas can be distinguished. Since the connection often needs to be folded, it is easy to have creases and wear, and the touch effect is relatively poor. The display of the page component at the connection needs to be more cautious.

[0027] For the page component display of the folding screen, the following design requirements can be met: 1. The information display should be complete to avoid component deformation, and the expanded content should not be less than 3 / 4 of the folded content; 2. Rotation adaptation, the layout of the screen is consistent in both horizontal and vertical states; 3. The interaction is uninterrupted, and the application is smoothly adapted between the folded and expanded states, and the expanded state avoids adding more user operation steps; 4. On the basis of ensuring readability, the component maintains the same size in the expanded and folded states; 5. For pictures and videos displayed in a list, the number of columns in the expanded state is increased to twice that of the folded state; 6. The component should not be too large, and the main content should conform to the user's reading habits, with the main focus on improving the user's reading efficiency.

[0028] It should be noted that the above design requirements are not necessary to follow and can be adjusted and adapted according to specific circumstances.

[0029] The adaptive dynamic layout strategy is mainly aimed at the situation where the amount of information presented in the total area increases as the total area of ​​the screen changes, but the information architecture remains unchanged. For basic components and common components, the layout strategies such as stretch layout, enlarge layout, and extend layout are uniformly adopted in the expanded state, and the reverse change strategy of the above layout strategies can be adopted in the folded state.

[0030] The responsive dynamic layout strategy can automatically adjust its page layout according to the size, direction and resolution of the total screen area, use media queries to obtain the width of the total screen area, and use layout strategies such as shift layout, repeated layout, and fluid layout for the expanded state. In the folded state, the reverse change strategy of the above layout strategies can be used, thereby achieving a more reasonable layout in more complex scenarios and improving user experience. For other controls on the folding screen, such as pop-up windows and floating windows, to avoid them getting stuck at the hinge, that is, the connection of the breakpoint area, when the folding screen is unfolded, causing recognition problems, you can call the system's pop-up box control and place it on the left or right screen.

[0031] For the adaptive dynamic layout strategy and the responsive dynamic layout strategy, the two can be used in combination. When the page components are generally the same and the structure is simple, the adaptive dynamic layout strategy is mainly used. For individual complex and special page components, the responsive dynamic layout strategy can be used separately according to the situation to reduce development costs.

[0032] The folding screen page layout method provided in this embodiment uses the horizontal width of multiple screens in the folding screen as the breakpoint basis based on the global grid system to form multiple breakpoint areas. Based on the display scene of the page component, a layout strategy adapted to the display scene is adopted to display the page component in multiple breakpoint areas. Since the layout strategy includes an adaptive dynamic layout strategy and a responsive dynamic layout strategy, wherein the adaptive dynamic layout strategy includes a stretching layout strategy, an enlargement layout strategy and an extension layout strategy, and the responsive dynamic layout strategy includes a shifting layout strategy, a repeating layout strategy and a flowing layout strategy, and each screen display area is divided, it is possible to match an applicable layout strategy among multiple layout strategies based on the display scene of the page component, and then based on the layout strategy, the page component is adaptively displayed in each screen display area, so that the display requirements of the page component can be met to the maximum extent under different forms of the folding screen. In addition, since the information of the display area of ​​each screen is obtained in advance, when the page component is displayed, it is possible to avoid displaying key information at the connection of each display area, that is, at the connection of the breakpoint area, so as to prevent the connection from being easily worn and creased, which will have an adverse effect on the display of key information. To sum up, this embodiment can ensure that the screen content can smoothly adapt to the different forms of the folding screen, improve the compatibility of the screen content display under various forms of the folding screen, so that the screen content can meet the requirements of adaptability, style consistency, interface clarity, reading comfort and other requirements under various forms of the folding screen, thereby improving the user experience.

[0033] Figure 2 Schematic diagram of the stretched layout of the folding screen page layout method provided in the embodiment of the present application. Figure 2 In one embodiment, based on the display scenario of the page component, a layout strategy adapted to the display scenario is adopted to display the page component in multiple breakpoint areas, which may include: In the display scenario of basic components, a stretch layout strategy is adopted to display the basic components in multiple breakpoint areas with a fixed height and stretch width.

[0034] Under this layout strategy, the display width of the page component is not a fixed value, but the start and end positions of the display width are determined based on the reference. When the size of the total screen area changes, the display width of the page component also changes accordingly, such as Figure 2 As shown, relative to the folded state, in the expanded state, the display width of the page component is stretched along the expansion direction, while the display height remains fixed.

[0035] This layout strategy is generally applicable to most basic components, such as lists, buttons, search bars, tooltips, input boxes, navigation bars, tab bars, tabs, etc. This layout strategy will not affect user operations and is suitable for style content with relatively simple relationships.

[0036] For the basic components in this embodiment, a stretching layout strategy is adopted in the expanded state, which can ensure the smooth adaptation of the basic components to the expanded state of the folding screen, meet the display requirements of the page components, and improve the user experience.

[0037] Figure 3 is an enlarged layout diagram of the folding screen page layout method provided in an embodiment of the present application. Figure 3 In one embodiment, based on the display scenario of the page component, a layout strategy adapted to the display scenario is adopted to display the page component in multiple breakpoint areas, which may include: In the display scenario of the detail component, an enlarged layout strategy is adopted to enlarge the detail component in multiple breakpoint areas with a fixed aspect ratio.

[0038] Under this layout strategy, the display width and height of the page components are not fixed values, but are determined based on the reference object. When the size of the total screen area changes, the display size of the page components also changes accordingly. For example, Figure 3 As shown, compared with the folded state, the display width and height of the page components in the expanded state are both enlarged.

[0039] This layout strategy is generally applicable to page display scenarios such as page details that require users to be fully immersed in the task, such as article details, shopping product details, about us, etc.

[0040] For the detail component in this embodiment, an enlarged layout strategy is adopted in the expanded state, which can ensure the smooth adaptation of the detail component to the expanded state of the folding screen, meet the display requirements of the page component, and improve the user experience.

[0041] Figure 4 Schematic diagram of the extended layout of the folding screen page layout method provided in the embodiment of the present application. Figure 4 In one embodiment, based on the display scenario of the page component, a layout strategy adapted to the display scenario is adopted to display the page component in multiple breakpoint areas, which may include: In the display scenario of independent space components, an extended layout strategy is adopted to display independent space components in multiple breakpoint areas in a horizontally incremental layout with a fixed aspect ratio.

[0042] Under this layout strategy, page components are laid out horizontally, with fixed spacing between components. The number of displayable components changes with the width of the total screen area. While keeping the size of page components unchanged, more components are displayed horizontally as the total screen area width increases. Figure 4 As shown, compared with the folded state, the number of displayed page components in the expanded state is increased horizontally.

[0043] This layout strategy is generally suitable for visually independent space components, such as topic lists, event lists, product lists, advertising banners, etc.

[0044] For independent space components, this embodiment adopts an extended layout strategy in the expanded state, which can ensure smooth adaptation of independent space components to the expanded state of the folding screen, meet the display requirements of page components, and improve user experience.

[0045] Figure 5 Schematic diagram of the layout of the folding screen page layout method provided in the embodiment of the present application. Figure 5 In one embodiment, based on the display scenario of the page component, a layout strategy adapted to the display scenario is adopted to display the page component in multiple breakpoint areas, which may include: In the display scenario of simple hierarchical components, the shift layout strategy is used to determine whether the overall aspect ratio of multiple breakpoint areas is greater than the preset aspect ratio; If not, the simple hierarchical components are displayed in multiple breakpoint areas in a top-down layout; If so, determining whether the total width of the multiple breakpoint areas is greater than the total width of a preset number of simple level components; If not, the simple hierarchical components are displayed in a top-down layout in the multiple breakpoint areas; If so, the simple hierarchical components are displayed in a left-right layout in the multiple breakpoint areas.

[0046] Under this layout strategy, when the folding screen is in the unfolded state, it can be determined whether the total screen area has obvious "width-height features", that is, whether the aspect ratio is greater than 4:3. If not, the original top-bottom layout is maintained for the simple hierarchical components. If not, it is determined whether the horizontal width of the total screen area can accommodate a preset number of simple hierarchical components. If not, the original top-bottom layout is maintained for the simple hierarchical components. If so, the original top-bottom layout is switched to a left-right layout, such as Figure 5 As shown, compared with the folded state, the layout of the page components in the expanded state is switched from a top-to-bottom layout to a left-to-right layout.

[0047] This layout strategy is generally suitable for components with simple information hierarchy, and card-style design is best.

[0048] For simple hierarchical components, this embodiment adopts a shift layout strategy in the expanded state, which can ensure smooth adaptation of simple hierarchical components to the expanded state of the folding screen, meet the display requirements of page components, and improve user experience.

[0049] In one embodiment, based on the display scenario of the page component, the page component is displayed in multiple breakpoint areas using a layout strategy adapted to the display scenario, which may include: In the display scenario of components with the same attributes, a repeated layout strategy is adopted. When the total width of multiple breakpoint areas is greater than the total width of a preset number of components with the same attributes, components with the same attributes are horizontally repeated and displayed in multiple breakpoint areas.

[0050] Under this layout strategy, the width advantage of the total area of ​​the expanded screen is utilized to arrange components with the same attributes horizontally and in parallel. The width condition of a single component can be defined. As the width of the total area of ​​the screen changes, the number of components that can be repeatedly arranged is automatically calculated. When the width condition is met, the components are repeatedly arranged horizontally.

[0051] This layout strategy is generally applicable to components with the same attributes, such as content operation list information and cards, to improve reading efficiency.

[0052] For components with the same attributes, this embodiment adopts a repeated layout strategy in the expanded state, which can ensure smooth adaptation of components with the same attributes to the expanded state of the folding screen, meet the display requirements of page components, and improve user experience.

[0053] Figure 6 is a schematic diagram of the fluid layout of the folding screen page layout method provided in the embodiment of the present application. Figure 6 In one embodiment, based on the display scenario of the page component, a layout strategy adapted to the display scenario is adopted to display the page component in multiple breakpoint areas, which may include: In the display scenario of secondary components, a fluid layout strategy is adopted. When the total width of multiple breakpoint areas is greater than the total width of a single row of secondary components with a preset number of columns, the secondary components are displayed in a multi-column vertical layout in multiple breakpoint areas.

[0054] Under this layout strategy, when the foldable screen is in the unfolded state, the original single-column vertical layout is expanded to a two-column or multi-column vertical layout by taking advantage of the width of the total screen area. The width condition of a single component can be defined. As the total screen area width changes, the number of components that can be repeatedly laid out is automatically calculated. When the width condition is met, more columns of components are arranged horizontally, such as Figure 6 As shown, compared with the folded state, the layout of the page components in the expanded state is expanded from a single-column vertical layout to a two-column vertical layout.

[0055] This layout strategy is generally applicable to secondary components, such as the details page after a function operation. The extra screen area after the screen is expanded can be filled by adjusting the page components.

[0056] For secondary components, this embodiment adopts a fluid layout strategy in the expanded state, which can ensure smooth adaptation of secondary components to the expanded state of the folding screen, meet the display requirements of page components, and improve user experience.

[0057] In one embodiment, the folding screen page layout method further includes: Establish a standard component library for commonly used page components for subsequent development calls.

[0058] This embodiment establishes a standard component library for page components that are frequently used in different forms of folding screens. By sorting out and analyzing usage scenarios, unified components can be formulated for conventional adaptation strategies, thereby reducing repetitive work and helping effect designers to formulate design plans in advance based on adaptation strategies, thereby reducing front-end development costs.

[0059] The folding screen page layout device provided in an embodiment of the present application is described below. The folding screen page layout device described below and the folding screen page layout method described above can be referenced to each other.

[0060] Figure 7 Schematic diagram of the structure of the folding screen page layout device provided in the embodiment of the present application. Figure 7 , an embodiment of the present application provides a folding screen page layout device, which may include: The display area division module 701 is used to: use the horizontal widths of multiple screens in the folding screen as breakpoints based on the global grid system to form multiple breakpoint areas; The page layout display module 702 is used to: based on the display scenario of the page component, use a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas; The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies, wherein the adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies, and the responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

[0061] The folding screen page layout device provided in this embodiment uses the horizontal width of multiple screens in the folding screen as the breakpoint basis based on the global grid system to form multiple breakpoint areas. Based on the display scene of the page component, the layout strategy adapted to the display scene is adopted to display the page component in multiple breakpoint areas. Since the layout strategy includes an adaptive dynamic layout strategy and a responsive dynamic layout strategy, wherein the adaptive dynamic layout strategy includes a stretching layout strategy, an enlargement layout strategy and an extension layout strategy, and the responsive dynamic layout strategy includes a shifting layout strategy, a repeating layout strategy and a flowing layout strategy, and each screen display area is divided, it is possible to match an applicable layout strategy among multiple layout strategies based on the display scene of the page component, and then based on the layout strategy, the page component is adaptively displayed in each screen display area, so that the display requirements of the page component can be met to the maximum extent under different forms of the folding screen. In addition, since the information of the display area of ​​each screen is obtained in advance, when the page component is displayed, it is possible to avoid displaying key information at the connection of each display area, that is, at the connection of the breakpoint area, so as to prevent the connection from being easily worn and creased, which will have an adverse effect on the display of key information. To sum up, this embodiment can ensure that the screen content can smoothly adapt to the different forms of the folding screen, improve the compatibility of the screen content display under various forms of the folding screen, so that the screen content can meet the requirements of adaptability, style consistency, interface clarity, reading comfort and other requirements under various forms of the folding screen, thereby improving the user experience.

[0062] In one embodiment, the page layout display module 702 is specifically used to: In the display scenario of the basic component, a stretch layout strategy is adopted to display the basic component in a stretch layout in the multiple breakpoint areas with a fixed height and a stretch width.

[0063] In one embodiment, the page layout display module 702 is specifically used to: In the display scenario of the detail component, an enlarged layout strategy is adopted to enlarge and layout the detail component in the plurality of breakpoint areas with a fixed aspect ratio.

[0064] In one embodiment, the page layout display module 702 is specifically used to: In the display scenario of the independent space component, an extended layout strategy is adopted to display the independent space component in a horizontally incremental layout in the multiple breakpoint areas with a fixed aspect ratio.

[0065] In one embodiment, the page layout display module 702 is specifically used to: In a display scenario of a simple hierarchical component, a shift layout strategy is adopted to determine whether the overall aspect ratio of the multiple breakpoint areas is greater than a preset aspect ratio; If not, the simple hierarchical components are displayed in a top-down layout in the multiple breakpoint areas; If so, determining whether the total width of the plurality of breakpoint regions is greater than the total width of a preset number of simple level components; If not, the simple hierarchical components are displayed in a top-down layout in the multiple breakpoint areas; If so, the simple hierarchical components are displayed in a left-right layout in the multiple breakpoint areas.

[0066] In one embodiment, the page layout display module 702 is specifically used to: In the display scenario of components with the same attributes, a repeated layout strategy is adopted. When the total width of the multiple breakpoint areas is greater than the total width of a preset number of components with the same attributes, the components with the same attributes are horizontally repeated and displayed in the multiple breakpoint areas.

[0067] In one embodiment, the page layout display module 702 is specifically used to: In the display scenario of the secondary components, a fluid layout strategy is adopted. When the total width of the multiple breakpoint areas is greater than the total width of a single row of secondary components with a preset number of columns, the secondary components are displayed in a multi-column vertical layout in the multiple breakpoint areas.

[0068] In one embodiment, a component library building module (not shown in the figure) is further included, which is used to: Establish a standard component library for commonly used page components for subsequent development calls.

[0069] FIG8 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Figure 8 As shown, the electronic device may include: a processor 810, a communication interface 820, a memory 830 and a communication bus 840, wherein the processor 810, the communication interface 820, and the memory 830 communicate with each other through the communication bus 840. The processor 810 may call a computer program in the memory 830 to execute the steps of the folding screen page layout method, for example, including: Based on the global grid system, the horizontal widths of multiple screens in the folding screen are used as breakpoints to form multiple breakpoint areas; Based on the display scenario of the page component, the page component is displayed in the plurality of breakpoint areas by adopting a layout strategy adapted to the display scenario; The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies, wherein the adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies, and the responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

[0070] In addition, the logic instructions in the above-mentioned memory 830 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on this understanding, the technical solution of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art. The computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0071] On the other hand, an embodiment of the present application further provides a computer program product, the computer program product including a computer program, the computer program can be stored on a non-transitory computer-readable storage medium, and when the computer program is executed by a processor, the computer can perform the steps of the folding screen page layout method provided in the above embodiments, for example, including: Based on the global grid system, the horizontal widths of multiple screens in the folding screen are used as breakpoints to form multiple breakpoint areas; Based on the display scenario of the page component, the page component is displayed in the plurality of breakpoint areas by adopting a layout strategy adapted to the display scenario; The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies, wherein the adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies, and the responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

[0072] On the other hand, an embodiment of the present application further provides a non-transitory computer-readable storage medium on which a computer program is stored, and the computer program is used to enable a processor to execute the steps of the folding screen page layout method provided in the above embodiments, for example, including: Based on the global grid system, the horizontal widths of multiple screens in the folding screen are used as breakpoints to form multiple breakpoint areas; Based on the display scenario of the page component, the page component is displayed in the plurality of breakpoint areas by adopting a layout strategy adapted to the display scenario; The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies, wherein the adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies, and the responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

[0073] The non-transitory computer-readable storage medium can be any available medium or data storage device that can be accessed by the processor, including but not limited to magnetic storage (such as floppy disks, hard disks, magnetic tapes, magneto-optical disks (MO), etc.), optical storage (such as CD, DVD, BD, HVD, etc.), and semiconductor storage (such as ROM, EPROM, EEPROM, non-volatile memory (NAND FLASH), solid-state drive (SSD)), etc.

[0074] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0075] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0076] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A folding screen page layout method, characterized in that: include: Based on the global grid system, the horizontal widths of multiple screens in the folding screen are used as breakpoints to form multiple breakpoint areas; Based on the display scenario of the page component, the page component is displayed in the plurality of breakpoint areas by adopting a layout strategy adapted to the display scenario; The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies, wherein the adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies, and the responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

2. The folding screen page layout method according to claim 1, characterized in that: The display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of the basic component, a stretch layout strategy is adopted to display the basic component in a stretch layout in the multiple breakpoint areas with a fixed height and a stretch width.

3. The folding screen page layout method according to claim 1, characterized in that: The display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of the detail component, an enlarged layout strategy is adopted to enlarge and layout the detail component in the plurality of breakpoint areas with a fixed aspect ratio.

4. The folding screen page layout method according to claim 1, characterized in that: The display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of the independent space component, an extended layout strategy is adopted to display the independent space component in a horizontally incremental layout in the multiple breakpoint areas with a fixed aspect ratio.

5. The folding screen page layout method according to claim 1, characterized in that: The display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In a display scenario of a simple hierarchical component, a shift layout strategy is adopted to determine whether the overall aspect ratio of the multiple breakpoint areas is greater than a preset aspect ratio; If not, the simple hierarchical components are displayed in a top-down layout in the multiple breakpoint areas; If so, determining whether the total width of the plurality of breakpoint regions is greater than the total width of a preset number of simple level components; If not, the simple hierarchical components are displayed in a top-down layout in the multiple breakpoint areas; If so, the simple hierarchical components are displayed in a left-right layout in the multiple breakpoint areas.

6. The folding screen page layout method according to claim 1, characterized in that: The display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of components with the same attributes, a repeated layout strategy is adopted. When the total width of the multiple breakpoint areas is greater than the total width of a preset number of components with the same attributes, the components with the same attributes are horizontally repeated and displayed in the multiple breakpoint areas.

7. The folding screen page layout method according to claim 1, characterized in that: The display scenario based on the page component, using a layout strategy adapted to the display scenario to display the page component in the multiple breakpoint areas, includes: In the display scenario of the secondary components, a fluid layout strategy is adopted. When the total width of the multiple breakpoint areas is greater than the total width of a single row of secondary components with a preset number of columns, the secondary components are displayed in a multi-column vertical layout in the multiple breakpoint areas.

8. The folding screen page layout method according to claim 1, characterized in that: Also includes: Establish a standard component library for commonly used page components for subsequent development calls.

9. A folding screen page layout device, characterized in that: include: A display area division module is used to: use the horizontal widths of multiple screens in the folding screen as breakpoints based on a global grid system to form multiple breakpoint areas; A page layout display module, used to: based on a display scenario of a page component, display the page component in the plurality of breakpoint areas by adopting a layout strategy adapted to the display scenario; The layout strategies include adaptive dynamic layout strategies and responsive dynamic layout strategies, wherein the adaptive dynamic layout strategies include stretching layout strategies, enlarging layout strategies and extending layout strategies, and the responsive dynamic layout strategies include shifting layout strategies, repeating layout strategies and flowing layout strategies.

10. An electronic device comprising a processor and a memory storing a computer program, characterized in that: When the processor executes the computer program, the steps of the folding screen page layout method described in any one of claims 1 to 8 are implemented.

Images