An interface display method, electronic device and computer readable storage medium

Abstract

The application provides an interface display method, an electronic device and a computer readable storage medium, and relates to the technical field of terminals. With the use of a user, the interface elements in the interface of an electronic device such as a mobile phone are generally more and more, and the electronic device can display a second interface in response to a user instruction for adjusting the layout of the interface, the second interface being an interface in which all or part of the interface elements of a first interface are arranged according to a second layout; the area proportion of all the interface elements in the second interface in the second interface is less than the area proportion of all the interface elements in the first interface in the first interface; the second layout includes a plurality of layout regions for displaying interface elements, each of the plurality of layout regions displays an interface element, the plurality of layout regions correspond one by one to a plurality of matching rules, and the interface elements are rearranged in part of the entire interface according to a relatively neat preset layout according to the matching rules, which is conducive to reducing the density of the interface elements and improving the user experience.

Description

Technical Field

[0001] This application relates to the field of terminals, and more particularly to an interface display method, electronic device, and computer-readable storage medium. Background Technology

[0002] Mobile phones and other electronic devices offer a variety of interface elements, including app icons, shortcuts, cards, card stacks, large folders, and small folders. As users use these devices, the number of interface elements typically increases. This proliferation of elements can almost completely cover the screen, resulting in a high density of elements and a cluttered, unpleasant interface, leading to a poor user experience.

[0003] For example, Figure 1 This diagram illustrates a mobile phone interface, showing the layout of interface elements. Figure 1 As shown in Figure (a), a row of application icons is fixedly arranged at the bottom of the interface 101 of the mobile phone 100. This area 1011, composed of these application icons, can be called the "Dock" or "Quick Access Bar". Above the area 1011, various interface elements are arranged: YOYO suggested application card sets (such as weather card sets and sports and health card sets), reading application icons, music application icons, utility tool folders, featured application folders, contact application icons, browser 1 application icons, video 1 application icons, sports and health application icons, YOYO suggested large folders, daily application large folders, etc. It can be seen that the interface 101 is filled with various interface elements from left to right and top to bottom. These various interface elements almost cover the entire interface 101, resulting in a high density of interface elements and a cluttered appearance, leading to a poor user experience. Summary of the Invention

[0004] This application provides an interface display method, an electronic device, and a computer-readable storage medium, which helps to reduce the density of interface elements and improve user experience.

[0005] To achieve the above objectives, this application adopts the following technical solution:

[0006] In a first aspect, this application provides an interface display method applied to an electronic device, the method comprising:

[0007] The first interface of the electronic device is displayed, and the interface elements in the first interface are arranged according to a first layout; in response to a first operation of the user to adjust the interface layout, such as the trigger operation of the breathable layout, a second interface is displayed, which is an interface after all or part of the interface elements of the first interface are arranged according to the second layout; the area ratio of all interface elements in the second interface is less than the area ratio of all interface elements in the first interface in the first interface.

[0008] The second layout includes multiple layout areas for displaying interface elements. Each layout area displays an interface element. The multiple layout areas correspond one-to-one with multiple matching rules. The interface element in each layout area is the interface element in the first interface that matches the matching rule corresponding to the layout area.

[0009] In the above solution, a second interface is displayed in response to the user's operation of adjusting the interface layout. The area used to display interface elements in the second interface after the layout adjustment is smaller than the area used to display interface elements in the first interface. Therefore, after the layout adjustment, the blank area on the desktop of the electronic device that does not display interface elements is greater than before the layout adjustment. In this way, the density of interface elements on the electronic device's interface can be reduced, thereby improving the user experience.

[0010] In one possible implementation of the first aspect, both the first interface and the second interface correspond to the first sub-screen of the desktop; before displaying the second interface, the method further includes:

[0011] Determine the target sub-screen and target layout method. The target sub-screen includes one or more sub-screens on the desktop of the electronic device. The one or more sub-screens include a first sub-screen. The target layout method corresponds to multiple layout areas. For each sub-screen in the target sub-screen, rearrange all or part of the interface elements of the sub-screen according to the target layout method to obtain the layout information corresponding to the sub-screen. Display the second interface, including: displaying the second interface based on the layout information corresponding to the first sub-screen included in the target sub-screen.

[0012] In the above solution, by rearranging all or part of the interface elements of each sub-screen in the target sub-screen according to the target layout method, the layout information corresponding to each sub-screen in the target sub-screen is obtained, and then the second interface is displayed. In this way, the layout of each sub-screen can be adjusted according to the layout information of each sub-screen, and then the second interface of the electronic device can be displayed based on the first sub-screen. The interface elements in the entire interface can be rearranged in a neater preset layout in a certain area of ​​the entire interface.

[0013] In one possible implementation of the first aspect, for each sub-screen in the target sub-screen, the following process is performed to obtain the layout information corresponding to each sub-screen:

[0014] Obtain matching rules that correspond one-to-one with multiple layout regions;

[0015] For each of the multiple layout regions, based on the matching rules corresponding to the layout region, all or part of the interface elements of the sub-screen are matched to obtain the layout information corresponding to the layout region, thereby obtaining the layout information corresponding to the sub-screen; wherein, the layout information corresponding to the layout region includes: information of the interface elements in the sub-screen that match the matching rules corresponding to the layout region.

[0016] In the above solution, layout information is obtained by matching all or part of the interface elements of the sub-screen using a one-to-one matching rule with the layout area. Therefore, after the interface layout is adjusted, the blank area on the desktop of the electronic device that does not display interface elements is larger than before the layout adjustment. In this way, the interface elements in the electronic device's interface can be rearranged in a neater preset layout in a part of the entire interface, which helps to improve the user experience.

[0017] In one possible implementation of the first aspect, before matching all or part of the interface elements of the sub-screen based on the matching rules corresponding to the layout region, the method further includes:

[0018] The interface elements of the sub-screens are categorized according to their type information.

[0019] Based on one or more of the usage and location information of each interface element in the sub-screen, the interface elements of the sub-screen are sorted. According to the sorting of the interface elements in the sub-screen, and based on the matching rules corresponding to the layout area, all or some of the interface elements of the sub-screen are matched.

[0020] In the above solution, by classifying interface elements and sorting them according to usage and location information, the cluttered interface elements can be rearranged into a neat layout according to the preset layout. This also helps users quickly find and access their frequently used functions or content, further improving the user experience.

[0021] In one possible implementation of the first aspect, based on the type information, usage information, and position information of each interface element in the first interface, the layout of each interface element or some interface elements in the first interface is adjusted to obtain the layout information corresponding to the target sub-screen.

[0022] The interface elements of the sub-screens are categorized according to their type information.

[0023] Based on multiple layout regions and corresponding matching rules, the interface elements of the categorized sub-screens are matched with multiple layout regions in turn to obtain the layout information corresponding to the target sub-screen.

[0024] In the above solution, by classifying interface elements and sorting them according to usage and location information, the cluttered interface elements can be rearranged into a neat layout according to the preset layout. This also helps users quickly find and access their frequently used functions or content, further improving the user experience.

[0025] In one possible implementation of the first aspect, the interface elements of the categorized sub-screens are sequentially matched with the multiple layout regions and corresponding matching rules to obtain the layout information corresponding to the target sub-screen, including:

[0026] If there are multiple interface elements of the same type that match the layout area, then according to the usage information of the interface elements, the interface elements with higher usage rates of the same type are matched with the layout area in the second interface, and the layout information corresponding to the target sub-screen is obtained.

[0027] If the usage information of the same type of interface element is the same, then the interface element of the same type that is close to the top of the electronic device display screen is matched with the layout area in the second interface, and the layout information of the target sub-screen is matched.

[0028] In the above solution, by classifying interface elements and sorting them according to usage and location information, the cluttered interface elements can be rearranged into a neat layout according to the preset layout. This also helps users quickly find and access their frequently used functions or content, further improving the user experience.

[0029] In one possible implementation of the first aspect, before displaying the first interface in response to a first user action to adjust the interface layout, the method further includes:

[0030] In response to a second user action, a third interface is displayed, the third interface including a first control for triggering adjustments to the interface layout; in response to a third user action on the first control, a fourth interface is displayed, the fourth interface including one or more of a first editing option, a second editing option, and a third editing option;

[0031] The first editing option is used by the user to select and adjust the sub-screen of the interface layout; the second editing option is used by the user to select the arrangement method, and the area ratio of all interface elements in the different second interfaces generated by different arrangement methods is different; the third editing option is used by the user to select whether to display preset components in the second interface.

[0032] Determining the target subscreen includes: in response to the user's fourth operation on the first editing option, determining the target subscreen, which is the subscreen whose interface layout needs to be adjusted, the target subscreen is the first subscreen of the desktop, all subscreens of the desktop, or other subscreens of the desktop other than the first subscreen, and the target subscreen varies depending on the user's selection of the first editing option.

[0033] Determining the target layout includes: responding to the user's action on the second editing option to determine the target layout. Candidate layouts include two-line and three-line layouts.

[0034] In the above solution, users can select the area of ​​the sub-screen of the second interface, choose the area ratio of the second interface used to display interface elements, and also choose whether to display preset components such as text widgets on the second interface. This provides users with multiple layout editing options, helping them obtain a second interface that suits their usage habits and improving the user experience.

[0035] In one possible implementation of the first aspect, the multiple layout regions include a first layout region, a second layout region, a third layout region, and a fourth region; wherein the first layout region corresponds to a first matching rule, the second layout region corresponds to a second matching rule, the third layout region corresponds to a third matching rule, and the fourth layout region corresponds to a fourth matching rule;

[0036] The first matching rule matches the first interface element, the second interface element, the third interface element, the fourth interface element, the fifth interface element, the sixth interface element, and the seventh interface element in descending order of priority.

[0037] The second matching rule matches the third, fourth, fifth, and seventh interface elements in descending order of priority.

[0038] The third matching rule matches the second, third and fourth, fifth, sixth and seventh interface elements in descending order of priority.

[0039] The fourth matching rule matches the fourth, fifth, sixth, and seventh interface elements in descending order of priority.

[0040] The first interface element is the application's suggested folders; the second interface element is the card set; the third interface element is the individual cards; the fourth interface element is the shortcut; the fifth interface element is the large folder; the sixth interface element is the small folder; and the seventh interface element is the application icon.

[0041] In the above scheme, different layout areas correspond one-to-one with matching rules. Different matching rules prioritize matching different types of interface elements. This is beneficial for arranging the interface elements in the first interface in a neater preset layout according to the type information of various interface elements in the current interface, thereby rearranging the messy interface element layout into a neat layout according to the preset layout, which improves the user experience.

[0042] In one possible implementation of the first aspect, the second interface also includes one or more interface elements from a preset component or application suggestion card set.

[0043] In the above solution, preset components or application suggestion card sets can also be set outside the layout area of ​​the second interface, which helps users obtain a second interface that conforms to their usage habits and improves the user experience.

[0044] Secondly, this application provides an interface display method applied to an electronic device, the method comprising:

[0045] The first interface is displayed, and the interface elements in the first interface are arranged according to the first layout.

[0046] In response to the user's first operation to adjust the interface layout, a second interface is displayed. The second interface is an interface in which all or part of the interface elements of the first interface are arranged according to the second layout. The area ratio of all interface elements in the second interface is less than the area ratio of all interface elements in the first interface.

[0047] In the above solution, after the interface layout is adjusted, the blank area on the desktop of the electronic device that does not display interface elements is greater than before the layout adjustment. This reduces the density of interface elements across the entire interface, which helps improve the user experience.

[0048] In one possible implementation of the second aspect, the second interface includes a first area and a second area. The first area includes preset components and / or a set of application suggestion cards. The interface elements in the second area are arranged in two or three rows. The preset components can be text widgets.

[0049] In the above solution, preset components or application suggestion card sets can also be set outside the layout area of ​​the second interface, which helps users obtain a second interface that conforms to their usage habits and improves the user experience.

[0050] In one possible implementation of the second aspect, before displaying the first interface in response to the user's first operation of adjusting the interface layout, the method further includes:

[0051] In response to the user's second action, a third interface is displayed, which includes a first control for triggering adjustments to the interface layout.

[0052] In response to a third user action on the first control, a fourth interface is displayed, which includes one or more of the first editing options, the second editing options, and the third editing options;

[0053] The first editing option is used by the user to select and adjust the sub-screen of the interface layout; the second editing option is used by the user to select the arrangement method, and the area ratio of all interface elements in the different second interfaces generated by different arrangement methods is different; the third editing option is used by the user to select whether to display preset components in the second interface.

[0054] The candidate arrangement methods include two-row and three-row arrangements.

[0055] In the above solution, users can select the area of ​​the sub-screen of the second interface, choose the area ratio of the second interface used to display interface elements, and also choose whether to display preset components such as text widgets on the second interface. This provides users with multiple layout editing options, helping them obtain a second interface that suits their usage habits and improving the user experience.

[0056] In one possible implementation of the second aspect, in response to a user's setting operation on one or more of the first editing option, the second editing option, and the third editing option, a preview interface is displayed. This preview interface is a preview interface after all or part of the interface elements of the first interface have been rearranged based on the user's setting operation. Alternatively, the preview interface is a preview image of the interface element arrangement corresponding to the user's setting operation, which illustrates the layout of the interface and may not include the interface elements.

[0057] In the above solution, a preview interface can be displayed to the user, thereby helping the user to understand the preview of the second interface in advance, which helps to improve the user experience.

[0058] Thirdly, this application provides an electronic device comprising at least a memory and one or more processors. The memory stores computer instructions, which, when executed by the one or more processors, cause the electronic device to perform the method described in either the first or second aspect above.

[0059] Fourthly, this application provides a computer storage medium including computer instructions that, when executed on an electronic device, cause the electronic device to perform the method described in either the first or second aspect above.

[0060] Fifthly, this application provides a computer program product that, when run on an electronic device, causes the electronic device to perform the method described in either the first or second aspect above. Attached Figure Description

[0061] Figure 1 A schematic diagram of a mobile phone interface is shown;

[0062] Figure 2 A schematic diagram of various interface elements is shown;

[0063] Figure 3 A schematic diagram of the structure of the mobile phone 100 provided in an embodiment of this application is shown;

[0064] Figure 4 This illustration shows a schematic diagram of a mobile phone with an outward-folding screen according to an embodiment of this application;

[0065] Figure 5 A flowchart of an interface display is shown. Figure 1 ;

[0066] Figure 6 This diagram illustrates a process of setting the desktop to desktop editing mode.

[0067] Figure 7 This diagram illustrates an interface for setting layout parameters for breathable arrangement. Figure 1 ;

[0068] Figure 8 This diagram illustrates an interface for setting layout parameters for breathable arrangement. Figure 2 ;

[0069] Figure 9 A schematic diagram of a process for applying a breathable layout is shown;

[0070] Figure 10 The illustration shows four layout options for foldable phones in their unfolded split-screen display mode. Figure 1 ;

[0071] Figure 11 The illustration shows four layout options for foldable phones in their unfolded split-screen display mode. Figure 2 ;

[0072] Figure 12 The diagram shows four different layouts of a single-screen mobile phone.

[0073] Figure 13 The diagram illustrates two different arrangements of the flat plates. Figure 1 ;

[0074] Figure 14The diagram illustrates two different arrangements of the flat plates. Figure 2 ;

[0075] Figure 15 A diagram of the matching rules is shown. Figure 1 ;

[0076] Figure 16 A diagram of the matching rules is shown. Figure 2 ;

[0077] Figure 17 A diagram of the matching rules is shown. Figure 3 ;

[0078] Figure 18 A diagram of the matching rules is shown. Figure 4 ;

[0079] Figure 19 A diagram of the matching rules is shown. Figure 5 ;

[0080] Figure 20 A diagram of the matching rules is shown. Figure 6 ;

[0081] Figure 21 A diagram of the matching rules is shown. Figure 7 ;

[0082] Figure 22 A diagram of the matching rules is shown. Figure 8 ;

[0083] Figure 23 A diagram of the matching rules is shown. Figure 9 ;

[0084] Figure 24 A diagram of the matching rules is shown. Figure 10 ;

[0085] Figure 25 A diagram of the matching rules is shown. Figure 10 one;

[0086] Figure 26 A diagram of the matching rules is shown. Figure 10 two;

[0087] Figure 27 A diagram of the matching rules is shown. Figure 10 three;

[0088] Figure 28 A diagram of the matching rules is shown. Figure 10 Four;

[0089] Figure 29 A flowchart of an interface display is shown. Figure 2 . Detailed Implementation

[0090] The technical solutions of the embodiments of this application are described below with reference to the accompanying drawings. In the description of the embodiments of this application, the terminology used in the following embodiments is for the purpose of describing specific embodiments only and is not intended to limit the application. As used in the specification and appended claims of this application, the singular expressions "a," "the," "the," "the," and "this" are intended to also include expressions such as "one or more," unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of this application, "at least one" and "one or more" refer to one or more (including two). The term "and / or" is used to describe the relationship between related objects, indicating that three relationships can exist; for example, A and / or B can represent: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship.

[0091] References to "one embodiment" or "some embodiments" in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized. The term "connection" includes direct connections and indirect connections, unless otherwise stated. "First" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated.

[0092] In the embodiments of this application, the words "exemplarily" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplarily" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of the words "exemplarily" or "for example" is intended to present the relevant concepts in a specific manner.

[0093] The following is a brief overview of the terminology used in the embodiments of this application.

[0094] User interface elements (UI elements) are the visual and interactive components that make up the user interface.

[0095] In user interface design, application icons, shortcuts, cards, card stacks, large folders, and small folders are collectively referred to as interface elements. These elements are designed to improve the convenience and efficiency of user interaction. Below is a brief explanation of these interface elements:

[0096] App icons: App icons are small graphics on electronic devices that represent applications. Typically, an electronic device opens the corresponding application when clicked by the user. Each application has a unique icon on an electronic device to identify and access the application; the app icon is the entry point to the application. Figure 2 A schematic diagram of various interface elements is shown. For example... Figure 2 As shown, for example, the application icon can be a reading application icon for a reading application, a music application icon for a music application, and a browser application icon for a browser application, etc.

[0097] Cards: Cards are UI elements that display information within an application as standalone units. Cards can contain text, images, links, or even interactive elements such as buttons or sliders. Cards are commonly used to display news summaries, weather updates, schedule reminders, social media activity, etc. Cards allow users to quickly browse large amounts of information without having to delve into individual applications. Figure 2 As shown, for example, the card can be a card corresponding to a calendar application, which displays date information such as Wednesday, the 8th, and schedule reminders such as no schedules today, as well as schedule addition controls.

[0098] Large folders: Large folders are folders that can contain multiple application icons. Using large folders to organize application icons allows direct access to the application without expanding the folder. The size of a large folder is generally larger than the size of a single application icon displayed on an electronic device. For example... Figure 2 As shown, for example, a large folder named "Daily Applications" contains multiple application icons. For instance, the large folder could be a first "Daily Applications" folder with a size of 3x3, or a second "Daily Applications" folder with a size of 4x3.

[0099] Small folders: Similar to large folders, small folders can also contain multiple application icons. The difference between small and large folders is that the electronic device needs to expand and display the application icons in the small folder before the user can select the corresponding application. The size of a small folder is generally the same as the size of the application icon displayed individually on the electronic device. For example... Figure 2As shown, for example, a folder named "Utilities" contains multiple app icons. A folder named "Featured Apps" contains multiple app icons. A folder named "Everyday Apps" contains multiple app icons. A folder named "Folder 1" contains multiple app icons.

[0100] Shortcuts: Shortcuts are function icons or folders containing the application icon and multiple function icons for specific features within an application. They provide quick access to specific functions of the application. For example, a social media application might have a shortcut to directly open the application's "New Messages" or "Upload Photo" functions instead of opening the application's main interface. Another example is... Figure 2 As shown, for example, a phone application includes phone and contact functions, with the contact icon serving as the entry point for the contact function within the phone application. A settings application includes toggles for Wi-Fi, Bluetooth, and data; a shortcut to the settings application could be an icon containing both the settings app icon and icons for the Wi-Fi, Bluetooth, and data toggles. For example... Figure 2 As shown, the size of the shortcut can be a 1*1 application icon, a 2*2 setting, or a 1*2 or 2*1 setting.

[0101] Application suggestions: Application suggestions are an intelligent service feature that proactively provides relevant information and service recommendations by analyzing user behavior and usage patterns. For example, YOYO suggestions include card sets and folders for application suggestions.

[0102] Card Stacks: This feature appears on the negative one screen and desktop of electronic devices, providing real-time reminders based on user needs, such as schedules, travel (e.g., train), boarding information, etc. If the user is not in the relevant context, the card stack will display information such as time and weather. Card stacks can also be called stacked cards or card piles: a series of stacked cards, typically used to display multiple related pieces of content, which users can swipe or click to view different cards. These interface elements are designed to help users quickly find and access the functions or content they need, while maintaining a clean and organized interface.

[0103] Application Recommendations: Based on users' recent, medium-term, and long-term application usage patterns, YOYO Recommendations predicts and recommends the applications users are most likely to use when their electronic devices are in specific times, places, and states (such as when connected to Bluetooth headphones). For example, ... Figure 2As shown, YOYO's suggested folders include icons for the Settings app, Browser app, Weather app, and Video app.

[0104] As mentioned in the background technology section above, as users use mobile phones and other electronic devices, the number of interface elements in the interface generally increases. These elements can cover almost the entire interface, resulting in a high density of elements and a cluttered and unpleasant appearance, leading to a poor user experience.

[0105] To address the technical problems in the background art, embodiments of this application provide an interface display method. This method includes: an electronic device responding to a user's instruction to adjust the interface layout, and, based on the type, usage, and position information of various interface elements in the current interface, rearranging the interface elements in a neater, preset layout in a portion of the entire interface. This reduces the density of interface elements and rearranges the cluttered layout into a neat arrangement according to the preset layout, thus improving the user experience.

[0106] For example, mobile phone 100 can respond to user commands to adjust the interface layout, such as... Figure 1 The interface 101 shown in Figure (a) is adjusted as follows: Figure 1 Interface 101 is shown in Figure (b). (See Figure 101 below.) Figure 1 As shown in Figure (b), there are interface elements arranged / displayed according to a preset layout above area 1011. The preset layout includes layout area 1012. In order to reduce the density of interface elements in the entire interface, there is an area 1013 on layout area 1012 where no interface elements are displayed.

[0107] As an example, layout area 1012 can include areas 1012-1, 1012-2, 1012-3, and 1012-4. Areas 1012-1, 1012-2, 1012-3, and 1012-4 are arranged from left to right. Area 1012-1 can display a large folder containing multiple application icons, such as a folder named "YOYO Suggestions," which can contain four application icons arranged in rows and columns. Area 1012-2 can display three individual application icons and one shortcut, such as a reading application icon, a music application icon, a contacts shortcut icon, and a browser application icon. Area 1012-3 can display a large folder containing multiple application icons, such as a folder named "Everyday Applications," which can contain five application icons arranged in rows and columns. Area 1012-4 can display multiple small folders, such as a folder named "Utilities," a folder named "Featured Apps," a folder named "Folder 1," and a folder named "Folder 2." The interface elements displayed in areas 1012-1, 1012-2, 1012-3, and 1012-4 all originate from... Figure 1 The interface 101 shown in Figure (a) is or Figure 1 The deformation of the interface elements displayed in interface 101 shown in Figure (a) is shown.

[0108] For example, the mobile phone 100 can respond to user commands to adjust the interface layout, such as... Figure 1 Interface 101 in (a) is adjusted as follows: Figure 1 Interface 101 in (c) of the document. (e.g.) Figure 1 As shown in Figure (c), there are interface elements displayed in a preset layout above area 1011. The preset layout includes layout area 1012. In order to reduce the density of interface elements in the entire interface, there is an area 1013 on layout area 1012 where no interface elements are displayed.

[0109] As an example, layout area 1012 may include areas 1012-5, 1012-6, 1012-7, 1012-8, 1012-9, 1012-10, 1012-11, and 1012-12. Areas 1012-5, 1012-6, 1012-7, and 1012-8 are arranged sequentially from left to right in the first row. Areas 1012-9, 1012-10, 1012-11, and 1012-12 are arranged sequentially from left to right in the second row. The first and second rows are arranged sequentially along the length of the mobile phone 100.

[0110] Zone 1012-5 can display a large folder containing multiple application icons, such as a folder named "YOYO Suggestions" containing 4 application icons, arranged in rows and columns. Zone 1012-6 can display 3 individual application icons and 1 shortcut, such as a reading application icon, a music application icon, a contacts shortcut icon, and a browser 1 application icon. Zone 1012-7 can display a large folder containing multiple application icons, such as a folder named "Everyday Applications" containing 5 application icons arranged in rows and columns. Zone 1012-8 can display 4 individual application icons, such as a shopping application icon, an app store application icon, a video 1 application icon, and a browser 2 application icon. Zones 1012-9, 1012-10, 1012-11, and 1012-12 can each display a small folder, with each small folder containing only one row of application icons. For example, area 1012-9 can display a folder named "Utilities," area 1012-10 can display a folder named "Featured Applications," area 1012-11 can display a folder named "Folder 1," and area 1012-12 can display a folder named "Folder 2." The interface elements arranged in areas 1012-5, 1012-6, 1012-7, 1012-8, 1012-9, 1012-10, 1012-11, and 1012-12 all originate from... Figure 1 Interface 101 shown in Figure (a) or as shown in Figure (a) Figure 1 The deformation of the interface elements displayed in interface 101 shown in Figure (a) is shown.

[0111] From the above Figure 1 As shown in Figures (b) and (c), there is an area in layout area 1012 where no interface elements are displayed, which reduces the density of interface elements in the overall interface. Furthermore, by setting layout area 1012 in the preset layout, this layout area 1012 is a pre-configured layout that appears neater based on actual conditions. The phone 100 can then allocate the originally numerous interface elements to layout area 1012 according to the layout rules within this area, thus improving the neatness of the interface layout and enhancing the user experience.

[0112] In this application embodiment, the aforementioned electronic device is a type of electronic device that supports interface display. Specifically, the electronic device can be a portable electronic device or other suitable electronic device. For example, the electronic device can be a mobile phone, tablet computer, laptop computer, personal digital assistant (PDA), camera, personal computer, laptop computer, in-vehicle equipment, wearable device, augmented reality (AR) glasses, AR headset, virtual reality (VR) glasses, or VR headset, etc.

[0113] The following uses a mobile phone as an example to illustrate the interface display method provided in the embodiments of this application.

[0114] Taking mobile phones as an example, Figure 3 A schematic diagram of the structure of the mobile phone 100 provided in an embodiment of this application is shown.

[0115] like Figure 3 As shown, the mobile phone 100 may include: a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, a display screen 170, etc.

[0116] It is understood that the structure illustrated in this embodiment does not constitute a specific limitation on the mobile phone 100. In other embodiments, the mobile phone 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0117] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. The different processing units may be independent devices or integrated into one or more processors.

[0118] The controller can be the nerve center and command center of the mobile phone 100. The controller can generate operation control signals based on the instruction operation code and timing signals to complete the control of fetching and executing instructions.

[0119] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can directly retrieve it from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system. In this embodiment, the processor 110 can be used to execute an interface display method.

[0120] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an Inter-Integrated Circuit (I2C) interface, an Inter-Integrated Circuit Sound (I2S) interface, a Pulse Code Modulation (PCM) interface, a Universal Asynchronous Receiver / Transmitter (UART) interface, a Mobile Industry Processor Interface (MIPI) interface, a General Purpose Input / Output (GPIO) interface, a Subscriber Identity Module (SIM) interface, and / or a USB interface, etc.

[0121] The external storage interface 120 can be used to connect an external storage card, such as a Micro SD card, to expand the storage capacity of the mobile phone 100. The external storage card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external storage card.

[0122] The internal memory 121 can be used to store computer executable program code, which includes instructions. The processor 110 executes various functional applications and data processing of the mobile phone 100 by running the instructions stored in the internal memory 121. For example, in this embodiment, the processor 110 can implement the interface display method of this application by executing the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area.

[0123] The program storage area can store the operating system, at least one application program required for a function (such as sound playback function, image playback function, etc.). The data storage area can store data created during the use of the mobile phone 100 (such as audio data, phonebook, etc.). In addition, the internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0124] USB port 130 is a USB standard compliant interface, specifically a Mini USB port, Micro USB port, or USB Type-C port. USB port 130 can be used to connect a charger to charge mobile phone 100, and can also be used for data transfer between mobile phone 100 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other terminal devices, such as AR devices.

[0125] The charging management module 140 receives charging input from a charger, which can be either a wireless charger or a wired charger. While charging the battery 142, the charging management module 140 can also supply power to the terminal device via the power management module 141.

[0126] The power management module 141 is used to connect the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140 to power the processor 110, internal memory 121, display screen 170, and wireless communication module 160, etc. In some embodiments, the power management module 141 and the charging management module 140 may also be housed in the same device.

[0127] The wireless communication function of mobile phone 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor.

[0128] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in mobile phone 100 can be used to cover one or more communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with a tuning switch.

[0129] The mobile communication module 150 can provide solutions for wireless communication applications including 2G / 3G / 4G / 5G on the mobile phone 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low-noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves via the antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to the modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via the antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 may be housed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be housed in the same device.

[0130] The modem processor may include a modulator and a demodulator. The modulator modulates the low-frequency baseband signal to be transmitted into a mid-to-high frequency signal. The demodulator demodulates the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After processing by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs sound signals through an audio device (not limited to speaker 170A, receiver 170B, etc.) or displays images or videos through the display screen 194. In some embodiments, the modem processor may be a separate device. In other embodiments, the modem processor may be independent of the processor 110 and may be housed in the same device as the mobile communication module 150 or other functional modules.

[0131] The wireless communication module 160 can provide solutions for wireless communication applications on the mobile phone 100, including wireless local area networks (WLAN) (such as Wi-Fi), Bluetooth, Global Navigation Satellite System (GNSS), frequency modulation (FM), near-field communication (NFC), and infrared (IR). The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0132] In some embodiments, the antenna 1 of the mobile phone 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the mobile phone 100 can communicate with the network and other devices through wireless communication technology.

[0133] The mobile phone 100 implements display functions through a GPU, a display screen 170, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 170 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0134] The display screen 170 is used to display images, videos, etc. The display screen 170 includes a display panel. In this embodiment, the mobile phone 100 can be a foldable phone or a single-screen phone.

[0135] Please refer to Figure 4 , Figure 4 This illustration shows a schematic diagram of a mobile phone with an outward-folding screen according to an embodiment of this application. Figure 4 (a) in the diagram is a schematic of the outward-folding screen when fully unfolded. This outward-folding screen can be folded along the folding edge... Figure 4 Folding in directions 1a and 1b as shown in (a) can form Figure 4The first screen 1001 (e.g., the rear screen) and the second screen 1002 (e.g., the main screen) are shown in (b) above. This outward-folding screen can be folded along the folding edge, according to... Figure 4 If directions 1a and 1b, as shown in (b), are continued to be folded, they can form Figure 4 The outward-folding screen shown in (c) is a folded design. For example... Figure 4 As shown in (c), after the foldable screen of the mobile phone 100 is completely folded, the first screen 1001 and the second screen 1002 are facing away from each other and are visible to the user. Figure 4 (c) and Figure 4 (d) in the diagram is merely a schematic representation of the outward-folding screen as seen by the user from different perspectives. The mobile phone 100 with the aforementioned outward-folding screen can include multiple display modes: unfolded full-screen display mode, unfolded split-screen display mode, and folded single-screen display mode. In unfolded full-screen display mode, the outward-folding screen displays a complete interface (such as the display interface of an application) as a whole. In unfolded split-screen display mode, the outward-folding screen can display multiple interfaces in a split-screen manner. In folded single-screen display mode, the main screen of the outward-folding screen can display the interface, while the back screen remains black. When there is only one display screen, the mobile phone 100 can be either a single-screen phone or a foldable phone. Both foldable and single-screen displays are adaptable to the interface display method provided in the embodiments of this application.

[0136] Figure 5 A flowchart of an interface display is shown. Figure 1 .like Figure 5 As shown, the process includes the following steps:

[0137] 501. Mobile phone 100 displays sub-screen 1 of the desktop, and the interface elements in sub-screen 1 are arranged according to the first layout.

[0138] The sub-screen 1 can be the first interface in the embodiments of this application.

[0139] 502. Mobile phone 100 receives the user's trigger operation and, in response, displays an interface including breathable arrangement options.

[0140] 503. Mobile phone 100 receives the user's trigger operation on the breathable layout option and displays an interface including the option to edit the layout.

[0141] The interface including the breathable arrangement options can be the third interface in this application. The trigger operation can be used to trigger entry into the desktop editing state, and the trigger operation can include one or more operations. Taking the trigger operation as an example, which includes multiple operations, the trigger operation can include trigger operations executed on the sub-screen in S501, such as a two-finger pinch operation, and can also include trigger operations on corresponding controls in the interface displayed in response to the two-finger pinch operation.

[0142] For example, in combination Figure 6 This section describes the process of setting the desktop to desktop editing mode. Figure 6 This diagram illustrates a process of setting the desktop to desktop editing mode. (For example...) Figure 6 As shown in Figure (a), on the interface 102 of the mobile phone 100, the mobile phone 100 can respond to a user's two-finger pinch touch operation on the interface 102, displaying an interface including layout options for indicating the layout desktop, such as... Figure 6 The interface 103 is shown in Figure (b). In interface 103, the mobile phone 100 displays layout options 1031. The mobile phone 100 can respond to a user's click on layout options 1031 by displaying an interface including a breathable arrangement option, i.e., a first control. This interface can be used to execute the interface display method provided in the embodiments of this application. Figure 6 The interface 104 shown in Figure (c) includes a breathable layout option 1041, i.e., the fourth interface. The mobile phone 100 can respond to a user's click on the breathable layout option 1041, displaying an interface including editable layout options for triggering the setting of layout parameters for the breathable layout, such as... Figure 6 The interface 105 is shown in Figure (d). In interface 105, the mobile phone 100 displays the edit layout option 1051. The mobile phone 100 can respond to the user's click operation on the edit layout option 1051 and the application option to enter an interface where the layout parameters of the breathable layout can be set, allowing the user to set the layout parameters of the breathable layout.

[0143] After receiving the user's selection of the layout option 1051, the default text widget is opened.

[0144] Figure 7 This diagram illustrates an interface for setting layout parameters for breathable arrangement. Figure 1 ,like Figure 7 As shown, in interface 106, only the first screen uses a breathable layout. When the user actively closes / opens the "Use Text Widget" button, the first screen text widget 1061 disappears / appears.

[0145] It should be noted that turning the "Use Text Widget" button on / off only affects system-added text widgets, causing them to disappear / appear. User-created text widgets do not disappear / appear with the "Use Text Widget" button being turned on / off.

[0146] 504. Based on the user's triggering operation on the editing layout options, the mobile phone 100 determines the target sub-screen and the target layout method.

[0147] Based on the user's trigger action on the first edit option, the target sub-screen is determined. The target sub-screen is the sub-screen whose interface layout needs to be adjusted. The target sub-screen can be the home screen of the phone's 100 desktop, all sub-screens on the desktop, or sub-screens other than the home screen.

[0148] Figure 8 This diagram illustrates an interface for setting layout parameters for breathable arrangement. Figure 2 ,like Figure 8 As shown, in interface 106, layout parameters may include one or more of the following: the screen range where the layout is effective, the number of rows (e.g., using a three-row layout), and whether a text widget is used. The screen range where the layout is effective includes all screens, screens other than the first screen, and the first screen. The number of rows option includes using a three-row layout and a toggle control for using a three-row layout. The text widget option includes using a text widget and a toggle control for using a text widget.

[0149] When the mobile phone 100 receives a user's selection of the "All Screens" option within the screen range where the arrangement is effective, it indicates that the user wants to arrange all sub-screens in a breathable manner. At this time, the mobile phone 100 can determine that the target sub-screen is all sub-screens.

[0150] When the screen range where the breathable layout of the phone 100 is effective is "excluding the first screen", when the user selects the "all screens" option, the desktop preview area of ​​the phone 100 jumps to the first screen to display the refreshed layout of the page content of the first screen to the user.

[0151] When the breathable layout of the phone 100 is effective on the "first screen", when the user selects the "all screens" option, the desktop preview area of ​​the phone 100 jumps to the second screen to display the refreshed layout of the page content of the second screen to the user.

[0152] When the phone 100 receives a user's selection of the "except for the first screen" option within the screen range where the layout is effective, the first screen of the phone 100 will not use the open layout, while the other screens of the phone 100 will use the open layout. The desktop preview area of ​​the phone 100 will jump to the first screen to display the effect of refreshing the layout of the page content of the first screen to the user.

[0153] When the phone receives a user's selection of the "first screen" option within the screen range where the layout is effective, the phone only applies the breathable layout to the first screen and does not apply it to other screens. The phone's desktop preview area jumps to the second screen to display the refreshed layout of the second screen's page content to the user.

[0154] Based on the user's action on the second editing option, the layout method selected by the user in the second layout is determined. Different layout methods result in different area proportions for all interface elements in the generated second interface. For example, if the user selects a two-row layout, the target layout is determined to be a two-row layout. Similarly, if the user selects a three-row layout, the target layout is determined to be a three-row layout.

[0155] For different types of terminals, such as foldable phones or single-screen phones, the specific layout of the two-row or three-row array can be the same or different. The following will combine... Figures 10-14 The specific layout of different types of terminals will be described in detail here, but will not be repeated here.

[0156] Figure 9 A schematic diagram illustrating the application of a breathable layout is shown. For example... Figure 9 In the interface 104 shown in (a), the mobile phone 100 displays a ventilation arrangement option 1041. The mobile phone 100 can respond to the user's click on the ventilation arrangement option 1041, obtain the total number of screens on the mobile phone 100, and when the total number of screens on the mobile phone 100 exceeds a preset threshold, the mobile phone 100 can display a toast notification message. For example, when the total number of screens exceeds 18, such as... Figure 9 As shown in (b1), the user can be prompted that "the number of screens exceeds the limit after layout, and this layout will only be used on the first screen." Upon receiving a user's operation on the edit layout option 1051, such as a click, the phone can display interface 106 in response. In interface 106, the desktop preview area displays the effect of applying the breathable layout to the interface elements on the first screen. Simultaneously, the "Except for the first screen" and "All screens" options in the layout parameters that allow the layout to take effect can be set to unavailable; for example, "Except for the first screen" and "All screens" can be grayed out.

[0157] For example, when the total number of screens exceeds 18, such as Figure 9 As shown in (b2), you can apply the ventilated layout only to the first screen. If applying the ventilated layout only to the first screen cannot meet the screen number limit, a toast message can be displayed: "The number of screens exceeds the limit after layout. Please readjust the desktop icon positions and try again." At the same time, you can set the ventilated layout to an unavailable state, for example, you can gray out "ventilated layout".

[0158] If the phone receives a user's selection of "breathable layout" and the breathable layout is unavailable, the phone 100 maintains the initial layout. If the phone first receives a user's selection of "original layout" and then receives a user's selection of "breathable layout," and the breathable layout is unavailable, the phone 100 applies the original layout.

[0159] 505. For each sub-screen in the target sub-screen, obtain the layout information of each sub-screen according to the target arrangement.

[0160] The target layout includes multiple layout regions. These multiple layout regions may include a first layout region, a second layout region, a third layout region, and a fourth layout region. The number of layout regions may be more or less, and this application does not limit the number of layout regions for each sub-screen.

[0161] For each sub-screen, perform steps 1 and 2 as follows to achieve a breathable arrangement for that sub-screen:

[0162] Step 1: Obtain the matching rules corresponding to multiple layout areas under the target layout method.

[0163] In one possible implementation, information about different layout methods, the correspondence between different layout methods and matching rules, and the matching rules are pre-stored in the mobile phone 100 in the form of a configuration file. Upon receiving a user's selection of a target layout method, the system can retrieve information about the selected target layout method and the corresponding matching rules from the configuration file. The layout method information includes the size and position of the layout area included in that layout method.

[0164] For different types of terminals and different layout methods, the matching rules for multiple layout areas can be the same or different. The following will combine... Figures 10-14 This paper provides a detailed introduction to the correspondence between multiple layout areas and matching rules for different types of terminals, and combines this with... Figures 15-28 The different matching rules will be explained in detail here, but will not be elaborated upon here.

[0165] Step 2: For each of the multiple layout areas, match the interface elements to be arranged on the sub-screen based on the matching rules corresponding to the layout area, and obtain the layout information corresponding to the layout area, thereby obtaining the layout information corresponding to the sub-screen.

[0166] The matching rules include: matching priority and the type of the UI element to be matched.

[0167] Understandably, the types of interface elements can be application-suggested folders, card sets, individual cards, large folders, small folders, shortcuts, or standalone app icons. For example, the first interface element could be an application-suggested folder, and the second interface element could be a card set. The layout information corresponding to a sub-screen refers to the layout information of the sub-screen after layout adjustments.

[0168] 506. Display a preview interface based on the layout information corresponding to sub-screen 2 in the target sub-screen.

[0169] It is understandable that sub-screen 2 is the sub-screen whose interface layout needs to be adjusted based on the trigger operation of the first editing option.

[0170] 507. Receive user trigger operations on application options in the preview interface, and display the second interface based on the layout information corresponding to sub-screen 2.

[0171] Sub-screen 2 and sub-screen 1 can be the same sub-screen or different sub-screens.

[0172] It is understandable that after adjusting the interface layout using the above solution, the mobile phone 100 can display interface elements in a relatively sparse manner. In this embodiment, this arrangement can be referred to as a breathable arrangement. That is to say, when the mobile phone 100 applies this breathable arrangement, the interface elements on the mobile phone 100's desktop will be displayed according to the corresponding arrangement.

[0173] The above example only illustrates the interface changes when setting the desktop to edit mode and adjusting layout parameters for a foldable phone in its unfolded split-screen mode. It's understandable that this process also applies to single-screen phones, and will not be repeated here.

[0174] Understandably, the first layout could be as follows: Figure 9 The initial layout of mobile phone 100 is shown in (a) above. The second layout can be as follows: Figure 9 The layout of the mobile phone 100 application after ventilation arrangement is shown in (c). The first interface can be Figure 9 In the interface 104 shown in (a), the first control can be the breathable arrangement 1041, and the first operation can be a click operation on the breathable arrangement 1041.

[0175] The phone 100 can be a single-screen phone or a foldable phone. The following will use single-screen phones and foldable phones as examples to illustrate various ways of arranging the application ventilation layout for these two different types of phones.

[0176] The following section will introduce the layout and interface elements of foldable screen phone applications when using a breathable layout.

[0177] For example, Figure 10 The illustration shows four layout options for foldable phones in their unfolded split-screen display mode. Figure 1 .like Figure 10As shown in Figure (a), the layout can include layout area 1, layout area 2, layout area 3, layout area 4, layout area 5 and layout area 6.

[0178] Among them, layout area 1, layout area 2, layout area 3, layout area 4, layout area 5 and layout area 6 are arranged from left to right.

[0179] Layout area 1 can be a 2x2 grid, with each grid cell being the same size as a single application icon. Layout area 2 can be a 2x2 grid. Layout area 3 can be a 1x2 grid. Layout area 4 can be a 2x2 grid. Layout area 5 can be a 2x2 grid. Layout area 6 can be a 1x2 grid. Each grid cell is the same size as the display area occupied by an application icon.

[0180] A layout area can also be called a rule unit; therefore, a layout area of ​​2x2 grids can also be called a 2x2 rule unit. A layout area of ​​1x2 grids can also be called a 1x2 rule unit, and so on. Further details will not be elaborated here. For a detailed introduction to matching rules, please see [link to relevant documentation]. Figures 15-28 This will not be elaborated upon here.

[0181] Layout region 1 corresponds to matching rule 7, layout region 2 corresponds to matching rule 8, layout region 3 corresponds to matching rule 3, layout region 4 corresponds to matching rule 9, layout region 5 corresponds to matching rule 8, and layout region 6 corresponds to matching rule 4.

[0182] Layout area 1 corresponds to matching rule 7. Matching rule 7 indicates that the highest priority for interface elements is the app-suggested large folder, followed by stacked cards of the same size as layout area 1, independent cards and shortcuts, large folders, small folders, and independent application icons. If a 2x2 app-suggested large folder exists, the phone 100 will display the 2x2 app-suggested large folder in layout area 1. If no 2x2 app-suggested large folder exists but a 2x2 stacked card exists, the phone 100 will display the 2x2 stacked card in layout area 1.

[0183] For example, such as Figure 10 As shown in Figure (b), the second layout includes layout area 1, layout area 2, layout area 3, and layout area 4. Layout areas 1, 2, 3, and 4 are arranged from left to right.

[0184] In this context, layout region 1 corresponds to matching rule 7, layout region 2 corresponds to matching rule 8, layout region 3 corresponds to matching rule 9, and layout region 4 corresponds to matching rule 10.

[0185] For example, such as Figure 10 As shown in Figure (c), the second layout includes layout region 1, layout region 2, and layout region 3. Layout region 1, layout region 2, and layout region 3 are arranged sequentially from left to right.

[0186] Among them, layout region 1 corresponds to matching rule 7, layout region 2 corresponds to matching rule 8, and layout region 3 corresponds to matching rule 4.

[0187] For example, such as Figure 10 As shown in Figure (d), the second layout includes layout area 1 and layout area 2; wherein layout area 1 and layout area 2 are arranged from left to right.

[0188] Among them, layout region 1 corresponds to matching rule 7, and layout region 2 corresponds to matching rule 10.

[0189] For example, Figure 11 The illustration shows four layout options for foldable phones in their unfolded split-screen display mode. Figure 2 .like Figure 11 As shown in Figure (a), the second layout includes layout region 1, layout region 2, layout region 3, layout region 4, layout region 5, layout region 6, layout region 7 and layout region 8.

[0190] Among them, layout area 1, layout area 2, layout area 3, layout area 4, layout area 5 and layout area 6 are arranged from left to right in the first row, and layout area 7 and layout area 8 are arranged from left to right in the second row. The first row and the second row are respectively away from the top of the foldable screen phone 100.

[0191] Specifically, layout area 1 can match corresponding interface elements according to matching rule 7; layout area 2 can match corresponding interface elements according to matching rule 9; layout area 3 can match corresponding interface elements according to matching rule 3; layout area 4 can match corresponding interface elements according to matching rule 8; layout area 5 can match corresponding interface elements according to matching rule 9; layout area 6 can match corresponding interface elements according to matching rule 3; layout area 7 can match corresponding interface elements according to matching rule 16; and layout area 8 can match corresponding interface elements according to matching rule 17. Matching rules 16 and 17 will be described in detail below.

[0192] like Figure 11As shown in Figure (b), the second layout includes layout area 1, layout area 2, layout area 3, layout area 4, layout area 5, and layout area 6. Layout areas 1, 2, 3, and 4 are arranged sequentially from left to right in the first row, while layout areas 5 and 6 are arranged sequentially from left to right in the second row. The first and second rows are positioned further away from the top of the foldable phone 100.

[0193] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7; layout area 2 can match the corresponding interface elements according to matching rule 9; layout area 3 can match the corresponding interface elements according to matching rule 8; layout area 4 can match the corresponding interface elements according to matching rule 9; layout area 5 can match the corresponding interface elements according to matching rule 16; and layout area 6 can match the corresponding interface elements according to matching rule 17.

[0194] like Figure 11 As shown in Figure (C), the second layout includes layout area 1, layout area 2, layout area 3, and layout area 4. Layout areas 1, 2, and 3 are arranged sequentially from left to right in the first row, and layout area 4 is arranged in the second row. The first and second rows are respectively located away from the top of the foldable screen phone 100.

[0195] Specifically, layout area 1 can be matched with corresponding interface elements according to matching rule 7; layout area 2 can be matched with corresponding interface elements according to matching rule 8; layout area 3 can be matched with corresponding interface elements according to matching rule 4; and layout area 4 can be matched with corresponding interface elements according to matching rule 12. Matching rule 12 will be described below.

[0196] like Figure 11 As shown in Figure (d), the second layout includes layout area 1, layout area 2, and layout area 3. Layout area 1 and layout area 2 are arranged sequentially from left to right in the first row, and layout area 3 is arranged in the second row. The first and second rows are respectively located away from the top of the foldable screen phone 100.

[0197] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7; layout area 2 can match the corresponding interface elements according to matching rule 8; and layout area 3 can match the corresponding interface elements according to matching rule 12.

[0198] For example, Figure 12 The diagram illustrates two layout options for a single-screen mobile phone. For example... Figure 12As shown in Figure (a), the second layout includes layout area 1, layout area 2 and layout area 3; wherein layout area 1 and layout area 2 are arranged from left to right in the first row, and layout area 3 is arranged from left to right in the second row, with the first row and the second row being located away from the top of the foldable screen phone 100.

[0199] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7; layout area 2 can match the corresponding interface elements according to matching rule 8; and layout area 3 can match the corresponding interface elements according to matching rule 12.

[0200] like Figure 12 As shown in Figure (b), the second layout includes layout area 1, layout area 2, and layout area 3. Layout areas 1, 2, and 3 are arranged sequentially from left to right in the first row, and layout area 4 is arranged sequentially from left to right in the second row. The first and second rows are respectively located away from the top of the foldable screen phone 100.

[0201] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7; layout area 2 can match the corresponding interface elements according to matching rule 9; layout area 3 can match the corresponding interface elements according to matching rule 3; and layout area 4 can match the corresponding interface elements according to matching rule 17.

[0202] like Figure 12 As shown in Figure (c), the second layout includes layout area 1, layout area 2, layout area 3, and layout area 4. Layout area 1 and layout area 2 are arranged sequentially from left to right in the first row, and layout area 3 and layout area 4 are arranged sequentially from left to right in the second row. The first and second rows are respectively located away from the top of the foldable screen phone 100.

[0203] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7; layout area 2 can match the corresponding interface elements according to matching rule 9; layout area 3 can match the corresponding interface elements according to matching rule 5; and layout area 4 can match the corresponding interface elements according to matching rule 6.

[0204] like Figure 12 As shown in Figure (d), the second layout includes layout area 1, layout area 2, layout area 3, layout area 4, and layout area 5. Layout areas 1, 2, and 3 are arranged sequentially from left to right in the first row, while layout areas 4 and 5 are arranged sequentially from left to right in the second row. The first and second rows are positioned away from the top of the foldable phone 100.

[0205] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7; layout area 2 can match the corresponding interface elements according to matching rule 9; layout area 3 can match the corresponding interface elements according to matching rule 3; layout area 4 can match the corresponding interface elements according to matching rule 5; and layout area 5 can match the corresponding interface elements according to matching rule 6.

[0206] The following describes a two-row arrangement of the flat panel.

[0207] For example, Figure 13 The diagram illustrates two different arrangements of the flat plates. Figure 1 .like Figure 13 As shown in Figure (a), the second layout includes layout region 1, layout region 2, layout region 3 and layout region 4; wherein layout region 1, layout region 2, layout region 3 and layout region 4 are arranged from left to right.

[0208] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7; layout area 2 can match the corresponding interface elements according to matching rule 3; layout area 3 can match the corresponding interface elements according to matching rule 9; and layout area 4 can match the corresponding interface elements according to matching rule 4.

[0209] like Figure 13 As shown in Figure (b), the second layout includes layout region 1, layout region 2, layout region 3 and layout region 4; wherein layout region 1, layout region 2, layout region 3 and layout region 4 are arranged from left to right.

[0210] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7; layout area 2 can match the corresponding interface elements according to matching rule 3; layout area 3 can match the corresponding interface elements according to matching rule 9; and layout area 4 can match the corresponding interface elements according to matching rule 8.

[0211] The following describes a three-row layout for a flat panel.

[0212] For example, Figure 14 The diagram illustrates two different arrangements of the flat plates. Figure 2 .like Figure 14 As shown in Figure (a), the second layout includes layout area 1, layout area 2, layout area 3, layout area 4, layout area 5, and layout area 6; wherein layout area 1, layout area 2, layout area 3, and layout area 4 are arranged sequentially from left to right in the first row, and layout area 5 and layout area 6 are arranged sequentially from left to right in the second row. The first row and the second row are respectively located away from the top of the foldable screen phone 100.

[0213] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7, layout area 2 can match the corresponding interface elements according to matching rule 5, layout area 3 can match the corresponding interface elements according to matching rule 9, layout area 4 can match the corresponding interface elements according to matching rule 8, layout area 5 can match the corresponding interface elements according to matching rule 5, and layout area 6 can match the corresponding interface elements according to matching rule 17.

[0214] like Figure 14 As shown in Figure (b), the second layout includes layout area 1, layout area 2, layout area 3, layout area 4, layout area 5, and layout area 6; wherein layout area 1, layout area 2, layout area 3, and layout area 4 are arranged sequentially from left to right in the first row, and layout area 5 and layout area 6 are arranged sequentially from left to right in the second row. The first row and the second row are respectively located away from the top of the foldable screen phone 100.

[0215] Among them, layout area 1 can match the corresponding interface elements according to matching rule 7, layout area 2 can match the corresponding interface elements according to matching rule 3, layout area 3 can match the corresponding interface elements according to matching rule 9, layout area 4 can match the corresponding interface elements according to matching rule 3, layout area 5 can match the corresponding interface elements according to matching rule 5, and layout area 6 can match the corresponding interface elements according to matching rule 12.

[0216] The different matching rules will be introduced in detail below.

[0217] Figure 15 A diagram of the matching rules is shown. Figure 1 .

[0218] like Figure 15 As shown in Figure (a), matching rule 1 can be to first match a 1x1 small folder, and then match a 1x1 application icon.

[0219] For example, for a certain layout area, such as a 1x1 rule unit, the process by which mobile phone 100 determines the interface elements to be displayed in the 1x1 rule unit based on the matching rule corresponding to the 1x1 rule unit, such as matching rule 1, can be as follows: Mobile phone 100 can determine whether there are 1x1 folders among the interface elements to be arranged in the sub-screen. If there are 1x1 folders among the interface elements to be arranged in the sub-screen, it can be determined that the 1x1 folders among the interface elements to be arranged will be displayed in the 1x1 rule unit. When displaying the corresponding interface, the 1x1 folders can be displayed in the 1x1 rule unit. If there are no 1x1 folders among the interface elements to be arranged in the first layout of mobile phone 100, it is determined whether there are independent application icons, i.e., 1x1 application icons, among the interface elements to be arranged in the first layout. If there are independent application icons among the interface elements to be arranged in the first layout, the application icon with the highest frequency of use among all the 1x1 application icons among the interface elements to be arranged will be displayed in the 1x1 rule unit.

[0220] like Figure 15 As shown in Figure (b), the interface element type of the content that is prioritized for matching under matching rule 2 can be a 1*1 application icon.

[0221] For example, for a certain layout area, such as a 1x1 rule unit, the process of determining which interface elements to display in the 1x1 rule unit based on the matching rule corresponding to the 1x1 rule unit, such as matching rule 2, can be as follows: The phone 100 determines whether there are 1x1 application icons among the interface elements to be arranged in the first layout. If there are 1x1 application icons among the interface elements to be arranged in the first layout of the phone 100, and the number of 1x1 application icons is greater than 1, it can be determined that multiple 1x1 application icons among the interface elements to be arranged will be displayed in the 1x1 rule unit. When displaying the corresponding interface, all the application icons among these multiple 1x1 application icons can be turned into application icons in a small file, and the small folder can be displayed in the 1x1 rule unit. If there are 1x1 application icons among the interface elements to be arranged in the first layout of the phone 100, and the number of 1x1 application icons is equal to 1, then the 1x1 application icons among the interface elements to be arranged will be displayed independently in the 1x1 rule unit.

[0222] The following will introduce two matching rules for 1*2 units: matching rule A and matching rule B; where matching rule A for 1*2 units can be simply referred to as the matching rule for 1*2 unit A, and matching rule B for 1*2 units can be simply referred to as the matching rule for 1*2 unit B.

[0223] Figure 16 A diagram of the matching rules is shown. Figure 2 .

[0224] like Figure 16As shown in Figure (a), matching rule 3 can first match a 2*1 shortcut or a 1*2 shortcut, and then match a 1*2 large folder, a small folder, and an independent application icon.

[0225] For example, for a certain layout area, such as a 1*2 rule unit, the process by which mobile phone 100 determines the interface elements to be displayed in the 1*2 rule unit based on the matching rule corresponding to the 1*2 rule unit, such as matching rule 3, can be as follows: Mobile phone 100 can determine whether there is a 1*2 shortcut or a 2*1 shortcut among the interface elements to be arranged in the first layout. If there is a 1*2 shortcut or a 2*1 shortcut among the interface elements to be arranged in the first layout of mobile phone 100, it can be determined that the 1*2 shortcut or the 2*1 shortcut among the interface elements to be arranged will be displayed in the 1*2 rule unit. When displaying the corresponding interface, the 2*1 shortcut can be changed into a 1*2 shortcut and displayed in the 1*2 rule unit, or the 1*2 shortcut among the interface elements to be arranged in the first layout can be displayed in the 1*2 rule unit.

[0226] If the interface elements to be arranged in the first layout of mobile phone 100 do not contain 1*2 shortcuts or 2*1 shortcuts, mobile phone 100 can determine whether there are large folders among the interface elements to be arranged in the first layout. If there are large folders among the interface elements to be arranged in the first layout of mobile phone 100, it can determine to display the large folders among the interface elements to be arranged in a 1*2 rule cell. When displaying the corresponding interface, the most frequent large folders among the interface elements to be arranged can be turned into 1*2 shortcuts and displayed in a 1*2 rule cell.

[0227] If there are no large folders among the interface elements to be arranged in the first layout of the phone 100, it can be determined whether there are small folders among the interface elements to be arranged in the first layout. If there are small folders among the interface elements to be arranged in the first layout, it can be determined that the small folders among the interface elements to be arranged will be displayed in a 1*2 rule cell. When displaying the corresponding interface, the most frequently occurring small folders among the interface elements to be arranged can be turned into 1*2 large folders and displayed in a 1*2 rule cell.

[0228] If there are no small folders among the interface elements to be arranged in the first layout of the phone 100, it can be determined whether there are independent application icons among the interface elements to be arranged in the first layout. If there are independent application icons among the interface elements to be arranged in the first layout, the two most frequent independent application icons among the interface elements to be arranged can be directly tiled vertically and displayed in a 1*2 rule cell.

[0229] Matching rule 4, when there are extra apps to arrange on a sub-screen, as shown in the first example, first matches large or small folders, then individual app icons. Matching rule 4, when there are no extra apps to arrange on a sub-screen, as shown in the second example, first matches 2x1 or 1x2 shortcuts, then large and small folders.

[0230] like Figure 16 As shown in Figure (b), in the first example, the process by which mobile phone 100 determines the interface elements to be displayed in a 1*2 rule cell for a certain layout area, such as a 1*2 rule cell, based on the matching rule corresponding to the 1*2 rule cell, such as matching rule 4, can be as follows: Mobile phone 100 can determine whether there are large or small folders among the interface elements to be arranged in the first layout. If there are large folders among the interface elements to be arranged in the first layout of mobile phone 100, it can be determined that the large folders among the interface elements to be arranged will be displayed in the 1*2 rule cell. When displaying the corresponding interface, the most frequent large folder among the interface elements to be arranged can be turned into a small folder and displayed in the 1*2 rule cell. If there are small folders among the interface elements to be arranged in the first layout of mobile phone 100, the most frequent small folder among the interface elements to be arranged can be displayed in the 1*2 rule cell.

[0231] If the interface elements to be arranged in the first layout of the phone 100 do not contain large or small folders, it can be determined whether there are independent application icons among the interface elements to be arranged in the first layout. If there are independent application icons among the interface elements to be arranged in the first layout, and the number of independent application icons is greater than two, then it can be determined that these multiple application icons among the interface elements to be arranged will be displayed in a 1*2 rule unit. When displaying the corresponding interface, these multiple icons can be turned into a 1*2 large folder and displayed in a 1*2 rule unit. If there are independent application icons among the interface elements to be arranged in the first layout, and the number of independent application icons is greater than or equal to two, then one or two icons can be displayed as independent application icons in a 1*2 rule unit.

[0232] Mobile Phone 100 can determine whether there are large or small folders among the interface elements to be arranged in the first layout. If there are large or small folders among the interface elements to be arranged in the first layout of Mobile Phone 100, the most frequently occurring large or small folders among the interface elements to be arranged can be turned into small folders and displayed in a 1*2 rule cell.

[0233] In the second example, for a certain layout area, such as a 1*2 rule cell, the process by which the mobile phone 100 determines the interface elements to be displayed in the 1*2 rule cell based on the matching rule corresponding to the 1*2 rule cell, such as matching rule 4, can be as follows: The mobile phone 100 can determine whether there is a 2*1 shortcut or a 1*2 shortcut among the interface elements to be arranged in the first layout. If there is a 2*1 shortcut or a 1*2 shortcut among the interface elements to be arranged in the first layout of the mobile phone 100, it can be determined that the 1*2 shortcut or the 2*1 shortcut among the interface elements to be arranged will be displayed in the 1*2 rule cell. When displaying the corresponding interface, the 2*1 shortcut can be changed into a 1*2 shortcut and displayed in the 1*2 rule cell, or the 1*2 shortcut among the interface elements to be arranged in the first layout can be displayed in the 1*2 rule cell.

[0234] If the interface elements to be arranged in the first layout of mobile phone 100 do not contain 2*1 or 1*2 shortcuts, mobile phone 100 can determine whether there are large or small folders among the interface elements to be arranged in the first layout. If there are large or small folders among the interface elements to be arranged in the first layout of mobile phone 100, and the number of large or small folders is greater than or equal to 2, then it can be determined that multiple large or small folders among the interface elements to be arranged will be displayed in a 1*2 rule unit. When displaying the corresponding interface, these multiple large or small folders can be converted into small folders and displayed in the 1*2 rule unit. If the number of large or small folders is less than 2, then it can be determined that the number of these fewer than 2 large or small folders among the interface elements to be arranged will be displayed in a 1*2 rule unit. When displaying the corresponding interface, these fewer than 2 large or small folders can be converted into 1*2 large folders and displayed in the 1*2 rule unit.

[0235] Figure 17 A diagram of the matching rules is shown. Figure 3 .

[0236] like Figure 17 As shown in Figure (a), matching rule 5 can be to match 2*1 cards first, followed by 2*1 shortcuts or 1*2 shortcuts, large folders, and independent application icons.

[0237] For example, for a certain layout area, such as a 2*1 rule cell, the process by which mobile phone 100 determines the interface elements to be displayed in the 2*1 rule cell based on the matching rule corresponding to the 2*1 rule cell, such as matching rule 5, can be as follows: Mobile phone 100 can determine whether there is a 2*1 card among the interface elements to be arranged in the first layout. If there is a 2*1 card among the interface elements to be arranged in the first layout of mobile phone 100, then the 2*1 card among the interface elements to be arranged in the first layout can be displayed in the 2*1 rule cell.

[0238] If the interface elements to be arranged in the first layout of mobile phone 100 do not contain 2*1 cards, mobile phone 100 can determine whether there is a 2*1 shortcut or a 1*2 shortcut among the interface elements to be arranged in the first layout. If there is a 2*1 shortcut or a 1*2 shortcut among the interface elements to be arranged in the first layout of mobile phone 100, then it can be determined to display the 1*2 shortcut or the 2*1 shortcut among the interface elements to be arranged in the 2*1 rule unit. When displaying the corresponding interface, the 2*1 shortcut transformed from the 1*2 shortcut can be displayed in the 2*1 rule unit, or the 2*1 shortcut among the interface elements to be arranged in the first layout can be displayed in the 2*1 rule unit.

[0239] If the interface elements to be arranged in the first layout of mobile phone 100 do not contain 2*1 or 1*2 shortcuts, mobile phone 100 can determine whether there are large folders among the interface elements to be arranged in the first layout. If there are large folders among the interface elements to be arranged in the first layout of mobile phone 100, it can determine to display the large folders among the interface elements to be arranged in a 2*1 rule cell. When displaying the corresponding interface, the most frequent large folders among the interface elements to be arranged can be turned into 2*1 shortcuts and displayed in a 2*1 rule cell.

[0240] If there is no large folder among the interface elements to be arranged in the first layout of the phone 100, it can be determined whether there are independent application icons among the interface elements to be arranged in the first layout. If there are independent application icons among the interface elements to be arranged in the first layout, the two most frequent independent application icons among the interface elements to be arranged can be directly tiled vertically and displayed in a 2*1 rule cell.

[0241] Matching rule 6, when there are extra apps to arrange on a sub-screen, as shown in the third example, first matches large and small folders, then individual app icons. Matching rule 6, when there are no extra apps to arrange on a sub-screen, as shown in the fourth example, first matches 2x1 shortcuts and 1x2 shortcuts, then large and small folders.

[0242] like Figure 17 As shown in Figure (b), in the third example, the process by which mobile phone 100 determines the interface elements to be displayed in a certain layout area, such as a 2*1 rule cell, based on the matching rule corresponding to the 2*1 rule cell, such as matching rule 6, can be as follows: Mobile phone 100 can determine whether there are large or small folders among the interface elements to be arranged in the first layout. If there are large or small folders among the interface elements to be arranged in the first layout of mobile phone 100, it can be determined that the large folder among the interface elements to be arranged will be displayed in the 2*1 rule cell. When displaying the corresponding interface, the most frequent large folder among the interface elements to be arranged can be changed into a small folder and displayed in the 2*1 rule cell, or the most frequent small folder among the interface elements to be arranged can be displayed in the 2*1 rule cell.

[0243] If the interface elements to be arranged in the first layout of the phone 100 do not contain large or small folders, it can be determined whether there are independent application icons among the interface elements to be arranged in the first layout. If there are independent application icons among the interface elements to be arranged in the first layout, and the number of independent application icons is greater than two, then it can be determined that these multiple application icons among the interface elements to be arranged will be displayed in a 2*1 rule unit. When displaying the corresponding interface, these multiple icons can be turned into a 2*1 large folder and displayed in a 2*1 rule unit. If there are independent application icons among the interface elements to be arranged in the first layout, and the number of independent application icons is greater than or equal to two, then one or two icons can be displayed as independent application icons in a 2*1 rule unit.

[0244] In the fourth example, for a certain layout area, such as a 2*1 rule cell, the process by which the mobile phone 100 determines the interface elements to be displayed in the 2*1 rule cell based on the matching rule corresponding to the 2*1 rule cell, such as matching rule 6, can be as follows: The mobile phone 100 can determine whether there is a 2*1 shortcut or a 1*2 shortcut among the interface elements to be arranged in the first layout. If there is a 2*1 shortcut or a 1*2 shortcut among the interface elements to be arranged in the first layout of the mobile phone 100, it can be determined that the 1*2 shortcut or the 2*1 shortcut among the interface elements to be arranged will be displayed in the 2*1 rule cell. When displaying the corresponding interface, the 2*1 shortcut transformed from the 1*2 shortcut can be displayed in the 2*1 rule cell, or the 2*1 shortcut among the interface elements to be arranged in the first layout can be displayed in the 2*1 rule cell.

[0245] If the interface elements to be arranged in the first layout of mobile phone 100 do not contain 2*1 shortcuts or 1*2 shortcuts, mobile phone 100 can determine whether there are large and small folders among the interface elements to be arranged in the first layout. If there are large and small folders among the interface elements to be arranged in the first layout of mobile phone 100, and the number of large or small folders is greater than 2, then it can be determined that the larger than 2 large or small folders among the interface elements to be arranged will be displayed in a 2*1 rule unit. When displaying the corresponding interface, the larger than 2 large or small folders among the interface elements to be arranged can be transformed into small folders and displayed in a 2*1 rule unit. If the number of large or small folders is less than 2, then it can be determined that the smaller than 2 large folders among the interface elements to be arranged will be displayed in a 2*1 rule unit. When displaying the corresponding interface, the smaller than 2 large or small folders among the interface elements to be arranged can be transformed into 2*1 large folders and displayed in a 2*1 rule unit.

[0246] Figure 18 A diagram of the matching rules is shown. Figure 4 .

[0247] like Figure 18 As shown, matching rule 7 can be to first match the large folder suggested by the APP, followed by 2*2 stacked cards, independent 2*2 cards, the most frequent 2*2 shortcuts, the most frequent large folders, the most frequent small folders, independently displayed application icons, and two 2*1 shortcuts.

[0248] For example, for a certain layout area, such as a 2x2 rule cell, the process by which mobile phone 100 determines the interface elements to be displayed in the 2x2 rule cell based on the matching rule corresponding to the 2x2 rule cell, such as matching rule 7, can be as follows: Mobile phone 100 can determine whether there is a large folder suggested by the APP among the interface elements to be arranged in the first layout. If there is a large folder suggested by the APP among the interface elements to be arranged in the first layout of mobile phone 100, it can be determined that the large folder suggested by the APP among the interface elements to be arranged will be displayed in the 2x2 rule cell. When displaying the corresponding interface, the large folder suggested by the APP among the interface elements to be arranged in the first layout can be transformed into a 2x2 large folder and displayed in the 2x2 rule cell.

[0249] If the interface elements to be arranged in the first layout of mobile phone 100 do not include the large folder suggested by the APP, then it is determined whether there are 2*2 stacked cards among the interface elements to be arranged in the first layout of mobile phone 100. If there are 2*2 stacked cards among the interface elements to be arranged in the first layout of mobile phone 100, then the 2*2 stacked cards are displayed in a 2*2 rule cell.

[0250] If there are no 2x2 stacked cards among the interface elements to be arranged in the first layout of mobile phone 100, then it is determined whether there are any 2x2 independent cards among the interface elements to be arranged in the first layout of mobile phone 100. If there are 2x2 independent cards among the interface elements to be arranged in the first layout of mobile phone 100, then the 2x2 independent cards are displayed in a 2x2 regular cell.

[0251] If there are no 2x2 independent cards among the interface elements to be arranged in the first layout of mobile phone 100, mobile phone 100 can determine whether there are 2x2 shortcuts among the interface elements to be arranged in the first layout. If there are 2x2 shortcuts among the interface elements to be arranged in the first layout of mobile phone 100, then the most frequent 2x2 shortcut among the interface elements to be arranged in the first layout can be displayed in a 2x2 regular cell.

[0252] If the interface elements to be arranged in the first layout of mobile phone 100 do not contain 2x2 shortcuts, mobile phone 100 can determine whether there are large folders among the interface elements to be arranged in the first layout. If there are large folders among the interface elements to be arranged in the first layout of mobile phone 100, it can determine to display the large folders among the interface elements to be arranged in a 2x2 rule cell. When displaying the corresponding interface, the most frequent large folders among the interface elements to be arranged can be turned into 2x2 shortcuts and displayed in a 2x2 rule cell.

[0253] If there are no large folders among the interface elements to be arranged in the first layout of the phone 100, it can be determined whether there are small folders among the interface elements to be arranged in the first layout. If there are small folders among the interface elements to be arranged in the first layout, it can be determined that the small folders among the interface elements to be arranged will be displayed in a 2*2 rule cell. When displaying the corresponding interface, the most frequently occurring small folders among the interface elements to be arranged can be transformed into 2*2 large folders and displayed in a 2*2 rule cell.

[0254] If there are no small folders among the interface elements to be arranged in the first layout of the phone 100, it can be determined whether there are independent application icons among the interface elements to be arranged in the first layout. If there are independent application icons among the interface elements to be arranged in the first layout, the number A of all independently displayed application icons is calculated: If A is greater than (remaining grid number + 4), it can be determined that A application icons from the interface elements to be arranged will be displayed in a 2*2 rule cell. When displaying the corresponding interface, A application icons can be turned into a 2*2 large folder and displayed in the 2*2 rule cell. This 2*2 large folder displays 8 application icons, and the 8 application icons are arranged in order of usage frequency. If A is less than or equal to (remaining grid number + 4), 4 application icons are directly displayed in the 2*2 rule cell.

[0255] If it is determined that there is no independent application icon among the interface elements to be arranged in the first layout, then it can be determined whether there are two 2*1 shortcuts among the interface elements to be arranged in the first layout. If there are two 2*1 shortcuts among the interface elements to be arranged in the first layout, then the two 2*1 shortcuts are displayed in a 2*2 regular cell according to the row and column.

[0256] Figure 19 A diagram of the matching rules is shown. Figure 5 .

[0257] like Figure 19 As shown, matching rule 8 can be to first match 2*1 cards, then 1*2 or 2*1 shortcuts, the most frequent large folders, and the most frequent independent application icons.

[0258] For example, for a specific layout area, such as a 2x2 rule cell, the process of determining which interface elements to display in a 2x2 rule cell based on the matching rule corresponding to the 2x2 rule cell, such as matching rule 8, can be as follows: If there is a 2x1 card among the interface elements to be arranged in the first layout, first determine if there is a most frequent shortcut among the interface elements to be arranged in the first layout. If there is a shortcut, then display the 2x1 card and the most frequent shortcut in the 2x2 rule cell. If there is no shortcut among the interface elements to be arranged in the first layout, then determine if there are large or small folders among the interface elements to be arranged in the first layout. If there are large or small folders among the interface elements to be arranged in the first layout, then display the 2x1 card and the most frequent large or small folder in the 2x2 rule cell. If there are no large or small folders among the interface elements to be arranged in the first layout, then determine if there is an independent application icon among the interface elements to be arranged in the first layout. If there are independent application icons among the interface elements to be arranged in the first layout, then the 2*1 card and the most frequently used independent application icon will be displayed in a 2*2 rule cell.

[0259] If the interface elements to be arranged in the first layout do not contain 2x1 cards, but contain 1x2 or 2x1 shortcuts, then it can be determined that the 1x2 or 2x1 shortcuts from the interface elements to be arranged will be displayed in the 2x2 rule unit. When displaying the corresponding interface, the 1x2 shortcut can be changed to a 2x1 shortcut and placed in the first row, or the 2x1 shortcut can be placed in the first row. Next, it is determined whether the interface elements to be arranged in the first layout contain the most frequent 2x1 shortcut. If so, the most frequent 2x1 shortcut is displayed in the second row of the 2x2 rule unit. If the interface elements to be arranged in the first layout do not contain the most frequent 2x1 shortcut, then it is determined whether the interface elements to be arranged in the first layout contain large or small folders. If the interface elements to be arranged in the first layout include large or small folders, then the large or small folders from the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, the most frequently occurring large or small folders will be transformed into 2x1 large folders and displayed in the second row of the 2x2 rule cell. If the interface elements to be arranged in the first layout do not include large or small folders, then it is determined whether there are independent application icons in the interface elements to be arranged in the first layout. If there are independent application icons in the interface elements to be arranged in the first layout, then the two most frequently occurring independent application icons will be displayed in the second row of the 2x2 rule cell.

[0260] If the interface elements to be arranged in the first layout do not contain 1x2 or 2x1 shortcuts, but contain large folders, then the large folders among the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, the most frequently used large folders will be transformed into 2x2 large folders and displayed in a 2x2 rule cell.

[0261] If the interface elements to be arranged in the first layout do not contain large folders but have individual application icons, first determine the number of individual application icons in the interface elements to be arranged in the first layout, and then determine whether there are small folders in the interface elements to be arranged in the first layout. If the number of individual application icons is 1 and the number of small folders is 1, then it can be determined that 1 small folder and 1 application icon from the interface elements to be arranged will be displayed in a 2*2 rule cell. When displaying the corresponding interface, the 1 individual application icon and 1 small folder will be transformed into a 2*1 large folder and displayed in a 2*2 rule cell. If the number of individual application icons is 1 and the number of small folders is 2 or more, then it can be determined that 2 or more small folders and 1 application icon from the interface elements to be arranged will be displayed in a 2*2 rule cell. When displaying the corresponding interface, the 1 small folder will be transformed into a 2*1 large folder, and the individual application icon, the 1*1 small folder, and the 2*1 large folder will be displayed sequentially in a 2*2 rule cell. If the number of individual application icons is 1 and the number of small folders is 0, then the remaining three grids will be left empty. If there are 2 independent application icons and 1 small folder, then one small folder and two application icons from the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, the two independent application icons and one small folder will be transformed into a 2x1 large folder and displayed sequentially in the 2x2 rule cell. If there are 2 independent application icons and 0 small folders, the remaining two grids will be left empty. If there are 3 independent application icons and at least one small folder, then at least one small folder and 3 application icons from the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, the most frequently used small folder will be transformed into a 1x1 small folder, and the 3 independent application icons and one 1x1 small folder will be displayed in the 2x2 rule cell. If there are 3 independent application icons and 0 small folders, the remaining one grid will be left empty. If there are 4 independent application icons, then all 4 independent application icons will be displayed in the 2x2 rule cell.

[0262] Figure 20 A diagram of the matching rules is shown. Figure 6 .

[0263] like Figure 20As shown, matching rule 9 can be to first match 2*2 stacked cards, then standalone 2*2 cards, 2*1 or 2*2 shortcuts.

[0264] For example, for a certain layout area, such as a 2*2 rule cell, the process of determining the interface elements to be displayed in the 2*2 rule cell based on the matching rules corresponding to the 2*2 rule cell, such as matching rule 9, can be as follows: if there are 2*2 stacked cards among the interface elements to be arranged in the first layout, then the 2*2 stacked cards will be displayed in the 2*2 rule cell.

[0265] If the interface elements to be arranged in the first layout do not contain any 2x2 stacked cards, but contain multiple 2x2 cards, then the multiple 2x2 cards from the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, the multiple 2x2 cards can be stacked and displayed in a 2x2 rule cell.

[0266] If there are no 2x2 cards but there are 2x2 shortcuts among the interface elements to be arranged in the first layout, then display the most frequent 2x2 shortcut in the 2x2 regular unit.

[0267] If the interface elements to be arranged in the first layout do not include any 2x2 cards, but do include 2x1 shortcuts, then the most frequently used 2x1 shortcut will be displayed in the 2x2 regular unit. The remaining two empty spaces can then be used to display the most frequently used 2x1 large folder. If there is no large folder, then the two empty spaces can be used to display the most frequently used small folder. When displaying the corresponding interface, this most frequently used small folder will be transformed into a 2x1 large folder and displayed in the two empty spaces. If there is no small folder, then the two empty spaces can be used to display two independent application icons.

[0268] If there are no 2x1 or 2x2 shortcuts among the interface elements to be arranged in the first layout, four empty spaces remain. If there is a large folder, these four empty spaces can display the large folder. When displaying the corresponding interface, the large folder is transformed into a 2x2 large folder and displayed in these four empty spaces. If there is no large folder, first determine the number of independent application icons among the interface elements to be arranged in the first layout, and then determine whether there are small folders among the interface elements to be arranged in the first layout. If the number of independent application icons is 1 and the number of small folders is 1, then it can be determined that one small folder and one application icon from the interface elements to be arranged can be displayed in a 2x2 rule cell. When displaying the corresponding interface, one independent application icon and one 2x1 large folder transformed from a small folder can be displayed in a 2x2 rule cell. If the number of independent application icons is 1 and the number of small folders is 2 or more, then it can be determined that one application icon and two small folders from the interface elements to be arranged can be displayed in a 2x2 rule cell. When displaying the corresponding interface, a small folder can be transformed into a 2x1 large folder. One independent application icon, one small folder, and one 2x1 large folder are then displayed sequentially in a 2x2 rule cell. If there is one independent application icon and zero small folders, the remaining three grid cells are left empty. If there are two independent application icons and one small folder, then two application icons and one small folder from the interface elements to be arranged will be displayed in the 2x2 rule cell. When displaying the corresponding interface, two independent application icons and one 2x1 large folder (transformed from a small folder) can be displayed sequentially in a 2x2 rule cell. If there are two independent application icons and two small folders, then two independent application icons and two small folders are displayed sequentially in the 2x2 rule cell. If there are two independent application icons and zero small folders, the remaining two grid cells are left empty. If there are three independent application icons, then three independent application icons and one of the most frequently used 1x1 small folders are displayed in the 2x2 rule cell. If there are 3 individual app icons and 0 small folders, then leave 1 grid cell empty. If there are 4 individual app icons, then display the 4 individual app icons in a 2x2 rule cell.

[0269] Figure 21 A diagram of the matching rules is shown. Figure 7 .

[0270] Matching rule 10, when there are extra applications to arrange in the sub-screen, as shown in the fifth example, first matches 2*1 or 1*2 shortcuts. Matching rule 10, when there are no extra applications to arrange in the sub-screen, as shown in the sixth example, first matches 2*1 shortcuts and 1*2 shortcuts.

[0271] like Figure 21 As shown in Figure (a), in the fifth example, the process by which the mobile phone 100 determines the interface elements to be displayed in a 2*2 rule cell for a certain layout area, such as a 2*2 rule cell, based on the matching rule corresponding to the 2*2 rule cell, such as matching rule 10, can be as follows: if there are 2*1 or 1*2 shortcuts among the interface elements to be arranged in the first layout, then one 2*1 or 1*2 shortcut is displayed in the 2*2 rule cell, or two 2*1 or 1*2 shortcuts are displayed in the 2*2 rule cell.

[0272] If the interface elements to be arranged in the first layout include 2x1 or 1x2 shortcuts, and there are still empty spaces remaining in the 2x2 rule unit after arranging the 2x1 or 1x2 shortcuts, then the large folder will be transformed into a small folder and displayed in the 2x2 rule unit, or the small file will be directly displayed in the 2x2 rule unit. If there are still empty spaces remaining in the 2x2 rule unit after arranging the 2x1 or 1x2 shortcuts, and there are no large or small folders to be arranged but there are independent application icons to be arranged, if the number of independent application icons to be arranged is greater than 2, it can be determined that these more than 2 independent application icons from the interface elements to be arranged will be displayed in the 2x2 rule unit. When displaying the corresponding interface, these more than 2 independent application icons will be transformed into a 2x1 large folder and displayed in the 2x2 rule unit. If the number of independent application icons to be arranged is less than or equal to 2, then these independent application icons will be displayed in the 2x2 rule unit.

[0273] If the interface elements to be arranged in the first layout do not have 2*1 or 1*2 shortcuts, but have large folders and / or small folders with independent application icons to be arranged, and the number of large / small folders to be arranged exceeds three, then it can be determined that the more than three large / small folders and the independent application icons from the interface elements to be arranged will be displayed in a 2*2 rule cell. When displaying the corresponding interface, according to priority, the three highest priority large folders will be turned into small folders and displayed sequentially in the 2*2 rule cell, or the three highest priority small folders will be displayed sequentially in the 2*2 rule cell. At the same time, the independent application icon to be arranged will be turned into a 1*1 small folder and displayed in the 2*2 rule cell.

[0274] If the interface elements to be arranged in the first layout do not have 2*1 and 1*2 shortcuts, but there are two large / small folders with independent application icons to be arranged, it can be determined that the two large / small folders and the independent application icons from the interface elements to be arranged will be displayed in the 2*2 rule unit. When displaying the corresponding interface, the most frequently used independent application icon will be displayed in the 2*2 rule unit, and the other independent application icons to be arranged will be transformed into 2*1 large folders and displayed in the remaining empty spaces in the 2*2 rule unit.

[0275] If the interface elements to be arranged in the first layout do not have 2*1 or 1*2 shortcuts, but there is a large / small folder with an independent application icon to be arranged, it can be determined that the large / small folder and the independent application icon from the interface elements to be arranged will be displayed in a 2*2 rule cell. When displaying the corresponding interface, the large folder will be transformed into a 2*1 large folder and displayed in the 2*2 rule cell, or the small folder will be directly displayed in the 2*2 rule cell. If the number of independent application icons to be arranged is less than or equal to 2, then the less than or equal to 2 independent application icons will be displayed in the remaining two empty spaces in the 2*2 rule cell. If the number of independent application icons to be arranged is greater than 2, then when displaying the corresponding interface, the greater than 2 independent application icons will be transformed into a 2*1 large folder and displayed in the remaining two empty spaces in the 2*2 rule cell.

[0276] If the interface elements to be arranged in the first layout do not include 2x1 or 1x2 shortcuts, do not have large / small folders, and have individual application icons to be arranged, then the number of individual application icons is determined. If the number of individual application icons to be arranged is greater than or equal to 4, then these 4 or more individual application icons from the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, these four individual application icons will be transformed into a 2x2 large folder and displayed in the 2x2 rule cell. If the number of individual application icons to be arranged is less than 4, then these individual application icons will be directly displayed in the 2x2 rule cell.

[0277] like Figure 21As shown in Figure (b) of the sixth example, for a certain layout area, such as a 2*2 rule cell, the process of determining the interface elements to be displayed in the 2*2 rule cell based on the matching rule corresponding to the 2*2 rule cell, such as matching rule 10, can be as follows: If there are 2*1 or 1*2 shortcuts among the interface elements to be arranged in the first layout, it can be determined that the 2*1 or 1*2 shortcuts among the interface elements to be arranged will be displayed in the 2*2 rule cell. When displaying the corresponding interface, the 1*2 shortcut is transformed into a 2*1 shortcut and displayed in the 2*2 rule cell, or the 2*1 shortcut is displayed in the 2*2 rule cell.

[0278] If the interface elements to be arranged in the first layout include large or small folders but no independent application icons to be arranged, and if the number of large and small folders to be arranged is greater than two, it can be determined that two large or small folders from the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, the two large folders to be arranged will be displayed as small folders in the 2x2 rule cell, or the two small folders to be arranged will be displayed in the 2x2 rule cell.

[0279] If the number of large or small folders to be arranged is less than or equal to 2, then it can be determined that 2 or more large or small folders from the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, the large folders will be converted into small files and displayed in the 2x2 rule cell, or the small folders will be displayed in the 2x2 rule cell.

[0280] If the interface elements to be arranged in the first layout do not have 2*1 or 1*2 shortcuts, but have large folders and / or small folders without independent application icons to be arranged, and the number of large folders and / or small folders to be arranged exceeds four, it can be determined that these more than four large folders / small folders from the interface elements to be arranged will be displayed in a 2*2 rule cell. When displaying the corresponding interface, the four largest folders with the highest priority will be converted into small folders and displayed sequentially in the 2*2 rule cell, or the four smallest folders with the highest priority will be displayed sequentially in the 2*2 rule cell. If the number of large folders and / or small folders to be arranged is three, it can be determined that these three large folders / small folders from the interface elements to be arranged will be displayed in a 2*2 rule cell. When displaying the corresponding interface, the most frequently used large folder or small folder will be converted into a 2*1 rule cell and displayed in the 2*2 rule cell, and the remaining large folders and / or small folders will be converted into small folders and displayed sequentially in the remaining grid of the 2*2 rule cell. If there is only one large and / or small folder to be arranged, it can be determined that the large / small folder from the interface elements to be arranged will be displayed in a 2x2 rule cell. When displaying the corresponding interface, the large and / or small folder will be transformed into a single 2x2 large folder and displayed in the 2x2 rule cell. If there are zero large and / or small folders to be arranged, the 2x2 rule cell will be left empty.

[0281] Figure 22 A diagram of the matching rules is shown. Figure 8 .

[0282] like Figure 22 As shown, matching rule 11 matches 2*1 cards first, followed by 1*2 or 2*1 shortcuts.

[0283] For example, for a certain layout area, such as a 4x1 rule unit, the process of determining the interface elements to be displayed in the 4x1 rule unit based on the matching rule corresponding to the 4x1 rule unit, such as matching rule 11, can be as follows: If there is a 2x1 card among the interface elements to be arranged in the first layout, then first determine if there is a 1x2 or 2x1 shortcut among the interface elements to be arranged in the first layout. If there is a 1x2 shortcut among the interface elements to be arranged in the first layout, it can be determined that the 1x2 shortcut among the interface elements to be arranged will be displayed in the 4x1 rule unit. When displaying the corresponding interface, the 1x2 shortcut is transformed into a 2x1 shortcut, and the 2x1 card and the 2x1 shortcut are displayed in the 4x1 rule unit. If there is a 2x1 shortcut among the interface elements to be arranged in the first layout, then the 2x1 card and the 2x1 shortcut are displayed in the 4x1 rule unit.

[0284] If the interface elements to be arranged in the first layout do not contain 1x2 or 2x1 shortcuts, then it checks if there are large or small folders among the interface elements to be arranged in the first layout. If there are large or small folders among the interface elements to be arranged in the first layout, it can be determined that the large or small folder among the interface elements to be arranged will be displayed in a 4x1 rule cell. When displaying the corresponding interface, the large or small folder is transformed into a 2x1 large folder, and the 2x1 card and the 2x1 large folder are displayed sequentially in the 4x1 rule cell. If there are no large or small folders among the interface elements to be arranged in the first layout, then it checks if there are independent application icons among the interface elements to be arranged in the first layout. If there are independent application icons among the interface elements to be arranged in the first layout, then the 2x1 card and the two independent application icons are displayed in the 4x1 rule cell.

[0285] If the interface elements to be arranged in the first layout do not contain any 2x1 cards, but contain 1x2 or 2x1 shortcuts. If the interface elements to be arranged in the first layout contain two 1x2 and / or 2x1 shortcuts, it can be determined that these two 1x2 and / or 2x1 shortcuts will be displayed in a 4x1 rule cell. When displaying the corresponding interface, the 1x2 shortcut is transformed into a 2x1 shortcut, and the 2x1 shortcut and the 2x1 shortcut are displayed sequentially in the 4x1 rule cell. If the interface elements to be arranged in the first layout contain one 1x2 or 2x1 shortcut, it can be determined that this one 1x2 and / or 2x1 shortcut will be displayed in a 4x1 rule cell. When displaying the corresponding interface, the 1x2 shortcut is transformed into a 2x1 shortcut, and then the number of large and / or small folders to be arranged is determined. If the number of large and / or small folders to be arranged is greater than or equal to one, then that large and / or small folder from the interface elements to be arranged can be displayed in a 4x1 rule cell. When displaying the corresponding interface, a large folder and / or small folder are selected, transformed into a 2x1 large folder, and a 2x1 shortcut are displayed in the 4x1 rule cell. If there are no large and / or small folders to be arranged, then the two independent application icons to be arranged and the 2x1 shortcut are displayed in the 4x1 rule cell.

[0286] If the interface elements to be arranged in the first layout do not include any 2x1 cards, nor any 1x2 or 2x1 shortcuts, then determine the number of large and / or small folders to be arranged. If the number of large and / or small folders to be arranged exceeds two, then these two or more large and / or small folders from the interface elements to be arranged can be displayed in a 4x1 rule cell. When displaying the corresponding interface, select two large and / or small folders, transform them into 2x1 large folders, and display them in the 4x1 rule cell. If the number of large and / or small folders to be arranged is one, then prioritize displaying the large folder in the first two grids of the 4x1 rule cell, and display the independent application icon in the remaining two grids. If there are no large and / or small folders to be arranged, then display the independent application icon to be arranged in the 4x1 rule cell.

[0287] Figure 23 A diagram of the matching rules is shown. Figure 9 .

[0288] When there are extra applications to arrange in the sub-screen, as shown in the seventh example, matching rule 12 first matches 2*1 or 1*2 shortcuts. When there are no extra applications to arrange in the sub-screen, as shown in the eighth example, matching rule 12 first matches 2*1 shortcuts and 1*2 shortcuts.

[0289] like Figure 23 As shown in (a) of the seventh example, for a certain layout area, such as a 4*1 rule cell, the process of determining the interface elements to be displayed in the 4*1 rule cell based on the matching rule corresponding to the 4*1 rule cell, such as matching rule 12, can be as follows: If there are 1*2 or 2*1 shortcuts among the interface elements to be arranged in the first layout, it can be determined that the 2*1 or 1*2 shortcuts among the interface elements to be arranged will be displayed in the 4*1 rule cell. When displaying the corresponding interface, the 1*2 shortcut is transformed into a 2*1 shortcut, and it is determined whether there are large folders and / or small folders among the interface elements to be arranged. If there are large folders and / or small folders among the interface elements to be arranged, it can be determined that the large folders and / or small folders among the interface elements to be arranged will be displayed in the 4*1 rule cell. When displaying the corresponding interface, the most frequently used large or small folders are transformed into 1x1 small folders. All remaining independent application icons are placed into a single 1x1 small folder. The 2x1 shortcut and the two small folders are displayed in a 4x1 rule cell. If there are no large or small folders among the interface elements to be arranged, the number of remaining independent application icons is determined. If the number of remaining independent application icons is greater than two, all remaining independent application icons are placed into a single 2x1 large folder. The 2x1 shortcut and the single 2x1 large folder are displayed in a 4x1 rule cell. If the number of remaining independent application icons is two or less, the 2x1 shortcut and the remaining independent application icons are displayed in a 4x1 rule cell.

[0290] If there are no 1x2 or 2x1 shortcuts among the interface elements to be arranged in the first layout, then determine the number of large and / or small folders. If the number of large and / or small folders is greater than or equal to 3, then it can be determined that these 3 or more large and / or small folders among the interface elements to be arranged will be displayed in a 4x1 rule cell. When displaying the corresponding interface, according to priority, the 3 largest and / or smallest folders with the highest priority will be turned into 3 smaller folders, all remaining independent application icons will be placed into a 1x1 smaller folder, and the 4 smaller folders will be displayed sequentially in the 4x1 rule cell. If the number of large and / or small folders is 2, then the most frequently used independent application icon will be displayed, and the remaining interface elements to be arranged will be placed into a 2x1 large folder and displayed in the 4x1 rule cell. If the number of large or small folders is 1, then it can be determined that this 1 large and / or small folder among the interface elements to be arranged will be displayed in the 4x1 rule cell. When displaying the corresponding interface, the large or small folder is transformed into a 2x1 large folder, and the number of remaining independent application icons is determined. If the number of remaining independent application icons is greater than 2, all remaining independent application icons are placed into a single 2x1 large folder, and these two 2x1 large folders are displayed in a 4x1 rule cell. If the number of remaining independent application icons is 2 or less, the 2x1 large folder and the remaining independent application icons are displayed in a 4x1 rule cell. If the number of large or small folders is 0, the 3 most frequently used application icons are displayed, and all remaining independent application icons are placed into a single 1x1 small folder and displayed in a 4x1 rule cell.

[0291] like Figure 23As shown in (b) of the example, in the eighth example, the process by which the mobile phone 100 determines the interface elements to be displayed in a 4*1 rule cell based on the matching rule corresponding to the 4*1 rule cell, such as matching rule 12, can be as follows: If there are 2*1 or 1*2 shortcuts among the interface elements to be arranged in the first layout, it can be determined that the 2*1 or 1*2 shortcuts among the interface elements to be arranged will be displayed in the 4*1 rule cell. When displaying the corresponding interface, the 1*2 shortcut is transformed into a 2*1 shortcut, and the number of large folders and / or small folders is determined. If the number of large folders and / or small folders is greater than or equal to 2, it can be determined that the greater than or equal to 2 large folders and / or small folders among the interface elements to be arranged will be displayed in the 4*1 rule cell. When displaying the corresponding interface, the interface elements to be arranged are transformed into two smaller folders. The 2x1 shortcut and the two smaller folders are then displayed sequentially in a 4x1 rule cell. If there is only one large or small folder, one large folder and / or one small folder from the interface elements to be arranged will be displayed in the 4x1 rule cell. When displaying the corresponding interface, the large or small folder is transformed into a 2x1 large folder, and the 2x1 shortcut and the 2x1 large folder are displayed in the 4x1 rule cell. If there are zero large or small folders, the 2x1 shortcut is displayed in the 4x1 rule cell, and the remaining two grid cells are left empty.

[0292] If there are no 1x2 or 2x1 shortcuts among the interface elements to be arranged in the first layout, then determine the number of large and / or small folders. If the number of large or small folders is greater than or equal to 4, then these 4 or more large or small folders from the interface elements to be arranged can be displayed in a 4x1 rule cell. When displaying the corresponding interface, the 4 most frequent large or small folders are transformed into 4 small folders and displayed sequentially in the 4x1 rule cell. If the number of large or small folders is 3, then these 3 large or small folders from the interface elements to be arranged can be displayed in a 4x1 rule cell. When displaying the corresponding interface, then the most frequent large or small folders are transformed into 2x1 large folders, the remaining 2 are transformed into small folders, and the 2x1 large folders and 2 small folders are displayed sequentially in the 4x1 rule cell. If the number of large or small folders is 2, then these 2 large or small folders from the interface elements to be arranged can be displayed in a 4x1 rule cell. When displaying the corresponding interface, both large and small folders are transformed into 2x1 large folders, and these two 2x1 large folders are displayed in a 4x1 rule cell. If there is only one large or small folder, it is certain that this one large or small folder from the interface elements to be arranged will be displayed in a 4x1 rule cell. When displaying the corresponding interface, this one large or small folder is transformed into a 2x1 large folder, and the 2x1 large folder is displayed in a 4x1 rule cell, leaving the remaining two grid cells empty. If there are zero large or small folders, the 4x1 rule cell is left empty.

[0293] Figure 24 A diagram of the matching rules is shown. Figure 10 .

[0294] like Figure 24 As shown, matching rule 13 first matches the 4*2 large folder suggested by the APP, followed by 4*2 stacked cards, independent 4*2 cards, and two 2*2 units A.

[0295] For example, for a certain layout area, such as a 4x2 rule cell, the process by which mobile phone 100 determines the interface elements to be displayed in the 4x2 rule cell based on the matching rule corresponding to the 4x2 rule cell, such as matching rule 13, can be as follows: Mobile phone 100 can determine whether there is a 4x2 large folder of APP suggestions among the interface elements to be arranged in the first layout. If there is a 4x2 large folder of APP suggestions among the interface elements to be arranged in the first layout of mobile phone 100, then the 4x2 large folder of APP suggestions among the interface elements to be arranged in the first layout can be displayed in the 4x2 rule cell.

[0296] If there is no 4x2 large folder for suggested apps among the interface elements to be arranged in the first layout of mobile phone 100, then it is determined whether there is a 4x2 stacked card among the interface elements to be arranged in the first layout of mobile phone 100. If there is a 4x2 stacked card among the interface elements to be arranged in the first layout of mobile phone 100, then the 4x2 stacked card is displayed in a 4x2 rule cell.

[0297] If there are no 4x2 stacked cards among the interface elements to be arranged in the first layout of mobile phone 100, then it is determined whether there are any independent 4x2 cards among the interface elements to be arranged in the first layout of mobile phone 100. If there are independent 4x2 cards among the interface elements to be arranged in the first layout of mobile phone 100, then the 4x2 cards are displayed in the 4x2 rule cells.

[0298] If the interface elements to be arranged in the first layout of mobile phone 100 do not contain independent 4*2 cards, mobile phone 100 can reference matching rule 7 twice to display two 2*2 rule units in the 4*2 rule unit. Matching rule 7 is described above and will not be repeated here.

[0299] Figure 25 A diagram of the matching rules is shown. Figure 10 one.

[0300] like Figure 25 As shown, matching rule 14 is largely the same as matching rule 13. The only difference is that when the interface elements to be arranged do not include a 4x2 APP-suggested large folder, a 4x2 stacked card, or a standalone 4x2 card, the phone 100 can reference matching rule 7 once and matching rule 9 once to display two 2x2 rule units within a 4x2 rule unit. Matching rules 7 and 9 are detailed above and will not be repeated here.

[0301] Figure 26 A diagram of the matching rules is shown. Figure 10 two.

[0302] like Figure 26 As shown, matching rule 15 includes two cases. The first case is when there are no extra applications to be listed, so the page can be filled directly. The rule is exactly the same as matching rule 13, as described above, and will not be repeated here. The second case is when there are still extra applications to be listed, and at least one empty space must be left on the page to display the extra applications. The rule is: mobile phone 100 can reference matching rule 7 once and matching rule 10 once, displaying two 2*2 rule units in a 4*2 rule unit. Matching rule 7 and matching rule 10 are described above, and will not be repeated here.

[0303] Figure 27 A diagram of the matching rules is shown. Figure 10 three.

[0304] like Figure 27 As shown, matching rule 16 first matches 2*1 cards, and then matches 2*1 or 1*2 shortcuts.

[0305] For example, for a certain layout area, such as a 5x1 rule cell, the process by which mobile phone 100 determines the interface elements to be displayed in the 5x1 rule cell based on the matching rule corresponding to the 5x1 rule cell, such as matching rule 16, can be as follows: Mobile phone 100 can determine whether there is a 2x1 card among the interface elements to be arranged in the first layout. If there is a 2x1 card, it can then determine whether there is a 1x2 or 2x1 shortcut among the interface elements to be arranged in the first layout. If there is a 1x2 or 2x1 shortcut, it can be determined that the 2x1 or 1x2 shortcut among the interface elements to be arranged will be displayed in the 5x1 rule cell. When displaying the corresponding interface, the 1x2 shortcut is transformed into a 2x1 shortcut, and it is determined whether there is a small folder. If there is a small folder, the 2x1 card, the 2x1 shortcut, and the small folder are displayed sequentially in the 5x1 rule cell. If no 1x2 or 2x1 shortcut exists, determine if there are large or small folders among the interface elements to be arranged. If there are two large or small folders, it can be determined that these two large or small folders from the interface elements to be arranged will be displayed in a 5x1 rule cell. When displaying the corresponding interface, the two large or small folders will be transformed into a 2x1 large folder and a 1x1 small folder respectively, and the 2x1 card, the 2x1 large folder, and the 1x1 small folder will be displayed sequentially in the 5x1 rule cell. If there is one large or small folder and the remaining independent application icon, it can be determined that this large or small folder from the interface elements to be arranged will be displayed in a 5x1 rule cell. When displaying the corresponding interface, the large or small folder will be transformed into a 2x1 large folder, and the 2x1 card, the 2x1 large folder, and the application icon will be displayed sequentially in the 5x1 rule cell. If there are no large or small folders, and only the remaining independent application icons, then the 2*1 card and the 3 independent application icons will be displayed sequentially in the 5*1 rule cell.

[0306] If there are no 2x1 cards among the interface elements to be arranged in the first layout, then the phone 100 determines the number of 1x2 or 2x1 shortcuts among the interface elements to be arranged. If there are two 1x2 or 2x1 shortcuts, it can be determined that these two 2x1 or 1x2 shortcuts from the interface elements to be arranged will be displayed in a 5x1 rule unit. When displaying the corresponding interface, the 1x2 shortcut is transformed into a 2x1 shortcut, and it is determined whether there is a small folder among the interface elements to be arranged. If there is a small folder, then the two 2x1 shortcuts and one small folder are displayed sequentially in the 5x1 rule unit. If there is no small folder, but there is an independent application icon, then the two 2x1 shortcuts and one application icon are displayed sequentially in the 5x1 rule unit. If there is one 1x2 or 2x1 shortcut, the 1x2 shortcut is transformed into a 2x1 shortcut, and the number of large or small folders in the interface elements to be arranged is determined. If there are more than two large or small folders, it can be determined that these more than two large or small folders in the interface elements to be arranged will be displayed in a 5x1 rule cell. When displaying the corresponding interface, the two large or small folders are selected and transformed into a 2x1 large folder and a 1x1 small folder respectively, and the 2x1 shortcut, the 2x1 large folder, and the 1x1 small folder are displayed sequentially in the 5x1 rule cell. If there is only one large or small folder and it has an independent application icon, it can be determined that the one large or small folder and the independent application icon in the interface elements to be arranged will be displayed in the 5x1 rule cell. When displaying the corresponding interface, the large or small folder will be transformed into a 2x1 large folder. The 2x1 shortcut, the 2x1 large folder, and one independent application icon will then be displayed sequentially in a 5x1 rule cell. If there are zero large or small folders and each has an independent application icon, the 2x1 shortcut and three independent application icons will be displayed sequentially in a 5x1 rule cell.

[0307] If there are no 1*2 or 2*1 shortcuts among the interface elements to be arranged in the first layout, then the phone determines the number of large or small folders among the interface elements to be arranged. If the number of large or small folders exceeds three, it can be determined that these more than three large or small folders among the interface elements to be arranged will be displayed in a 5*1 rule unit. When displaying the corresponding interface, the two most frequently used large or small folders are transformed into two 2*1 large folders, and the application icons from the remaining large or small folders are placed into one small folder. The two 2*1 large folders and one small folder are then displayed sequentially in the 5*1 rule unit. If there are two large or small folders and each has an independent application icon, it can be determined that the two large or small folders and the independent application icon among the interface elements to be arranged will be displayed in the 5*1 rule unit. When displaying the corresponding interface, the two large or small folders are transformed into two 2*1 large folders, and the two 2*1 large folders and one application icon are then displayed sequentially in the 5*1 rule unit. If there is one large or small folder and it has a unique application icon, then that large or small folder and its unique application icon will be displayed in a 5x1 rule cell as part of the interface elements to be arranged. When displaying the corresponding interface, the large or small folder will be transformed into a 2x1 large folder, and the 2x1 large folder and three application icons will be displayed sequentially in the 5x1 rule cell. If there are zero large or small folders and they each have a unique application icon, then the unique application icons will be displayed sequentially in the 5x1 rule cell.

[0308] Figure 28 A diagram of the matching rules is shown. Figure 10 Four.

[0309] Matching rule 17, when there are extra applications to arrange in the sub-screen, as shown in example 9, first matches 2*1 or 1*2 shortcuts. Matching rule 17, when there are no extra applications to arrange in the sub-screen, as shown in example 10, first matches 2*1 shortcuts and 1*2 shortcuts.

[0310] like Figure 28As shown in (a) of the ninth example, the process by which the mobile phone 100 determines the interface elements to be displayed in a 5*1 rule cell based on the matching rule corresponding to the 5*1 rule cell, such as matching rule 17, can be as follows: The mobile phone 100 can determine whether there are 2*1 or 1*2 shortcuts among the interface elements to be arranged in the first layout. If there are 2*1 or 1*2 shortcuts, it can determine that the 2*1 or 1*2 shortcuts among the interface elements to be arranged will be displayed in the 5*1 rule cell. When displaying the corresponding interface, the 1*2 shortcut is transformed into a 2*1 shortcut. The mobile phone 100 then determines the number of large folders or small folders among the interface elements to be arranged. If the number of large folders or small folders is greater than or equal to 2, it can determine that the greater than or equal to 2 large folders or small folders among the interface elements to be arranged will be displayed in the 5*1 rule cell. When displaying the corresponding interface, the two highest-priority large or small folders are transformed into smaller folders according to priority. The remaining independent application icons are then placed into one small folder. One 2x1 shortcut and three small folders are then displayed sequentially within a 5x1 rule cell. If there is only one large or small folder, it can be determined that this one large or small folder from the interface elements to be arranged will be displayed within a 5x1 rule cell. When displaying the corresponding interface, this one large or small folder is transformed into one small folder, and the remaining independent application icons are placed into a 2x1 large folder. One 2x1 shortcut, one small folder, and one 2x1 large folder are then displayed sequentially within a 5x1 rule cell.

[0311] If there are no 1*2 or 2*1 shortcuts among the interface elements to be arranged in the first layout, then the phone determines the number of large or small folders among the interface elements to be arranged. If the number of large or small folders is greater than or equal to 4, it can be determined that these 4 or more large or small folders among the interface elements to be arranged will be displayed in a 5*1 rule unit. When displaying the corresponding interface, according to priority, the 4 large or small folders with the highest priority are turned into 4 small folders, and the remaining independent application icons are placed into 1 small folder. The 5 small folders are then displayed sequentially in the 5*1 rule unit. If the number of large or small folders is 3, it can be determined that these 3 large or small folders among the interface elements to be arranged will be displayed in the 5*1 rule unit. When displaying the corresponding interface, the 3 large or small folders are turned into 3 small folders, and the remaining independent application icons are placed into a 2*1 large folder. The 3 small folders and the 2*1 large folder are then displayed sequentially in the 5*1 rule unit. If there are two large or small folders, they will be displayed in a 5x1 rule cell. When displaying the corresponding interface, the two large or small folders will be converted into two small folders, and the most frequently used independent application icon will be displayed. The remaining independent application icons will be placed in a 2x1 large folder. The two small folders, the most frequently used independent application icon, and the 2x1 large folder will then be displayed sequentially in a 5x1 rule cell. If there is only one large or small folder, it will be displayed in a 5x1 rule cell. When displaying the corresponding interface, the large or small folder will be converted into one small folder, and the three most frequently used independent application icons will be displayed. The remaining independent application icons will be placed in one small folder. The one small folder, the three most frequently used independent application icons, and the one small folder will then be displayed sequentially in a 5x1 rule cell. If there are 0 large folders or small folders, display the 4 most frequently used independent application icons, put the remaining independent application icons into 1 small folder, and display the 4 most frequently used independent application icons and 1 small folder in a 5*1 rule cell.

[0312] like Figure 28As shown in (b) of the example, in the tenth example, the process by which the mobile phone 100 determines the interface elements to be displayed in a certain layout area, such as a 5*1 rule cell, based on the matching rule corresponding to the 5*1 rule cell, such as matching rule 17, can be as follows: The mobile phone 100 can determine whether there are 2*1 or 1*2 shortcuts among the interface elements to be arranged in the first layout. If there are 2*1 or 1*2 shortcuts, it can determine that the 2*1 or 1*2 shortcuts among the interface elements to be arranged will be displayed in the 5*1 rule cell. When displaying the corresponding interface, the 1*2 shortcut is transformed into a 2*1 shortcut. The mobile phone 100 then determines the number of large folders or small folders among the interface elements to be arranged. If the number of large folders or small folders is greater than or equal to 3, the icons in the large folders or small folders are placed into the 3 small folders, and the 2*1 shortcuts and the 3 small folders are displayed sequentially in the 5*1 rule cell. If there are two large or small folders, they will be displayed in a 5x1 rule cell. When displaying the corresponding interface, the higher-priority large or small folder will be converted into a 2x1 large folder, the lower-priority large or small folder into a small folder, and the 2x1 shortcut, the 2x1 large folder, and the small folder will be displayed sequentially in the 5x1 rule cell. If there is only one large or small folder, it will be displayed in a 5x1 rule cell. When displaying the corresponding interface, this large or small folder will be converted into a 2x1 large folder, and the 2x1 shortcut and the 2x1 large folder will be displayed in the 5x1 rule cell, leaving one grid cell empty. If there are zero large or small folders, the 2x1 shortcut will be displayed in the 5x1 rule cell, leaving three grid cells empty.

[0313] If the interface elements to be arranged in the first layout do not contain 2*1 or 1*2 shortcuts, the phone then determines the number of large or small folders in the interface elements to be arranged. If the number of large or small folders is greater than or equal to 5, the icons in the large or small folders are placed into 5 small folders, and the 5 small folders are displayed sequentially in a 5*1 rule cell. If the number of large or small folders is 4, it can be determined that the 4 large or small folders in the interface elements to be arranged will be displayed in a 5*1 rule cell. When displaying the corresponding interface, the most frequently used large or small folder is turned into a 2*1 large folder, the remaining 3 large or small folders are turned into 3 small folders, and the 1 2*1 large folder and 3 small folders are displayed sequentially in a 5*1 rule cell. If the number of large or small folders is 3, it can be determined that the 3 large or small folders in the interface elements to be arranged will be displayed in a 5*1 rule cell. When displaying the corresponding interface, the two most frequently used large or small folders are transformed into two 2x1 large folders, and the remaining large or small folder is transformed into one small folder. The two 2x1 large folders and one small folder are then displayed sequentially within a 5x1 rule cell. If there are two large or small folders, they will be displayed within the 5x1 rule cell, representing the interface elements to be arranged. When displaying the corresponding interface, the two large or small folders are transformed into two 2x1 large folders, and displayed sequentially within the 5x1 rule cell, leaving one grid cell empty. If there is only one large or small folder, it will be displayed within the 5x1 rule cell, representing the interface elements to be arranged. When displaying the corresponding interface, this single large or small folder is transformed into a 2x1 large folder and displayed within the 5x1 rule cell, leaving three grid cells empty. If the number of large or small folders is 0, then leave the 5*1 rule cell blank.

[0314] Figure 29 A flowchart of an interface display is shown. Figure 2 .like Figure 29 The process includes the following steps:

[0315] 2901: Mobile phone 100 responds to the user's first operation on the first control in the first interface and activates the breathable layout.

[0316] It should be noted that before activating the breathable layout, the phone can record the current screen count and obtain the usage rate of various interface elements. The phone can then sort the usage rates of each interface element in advance.

[0317] 2902: Mobile phone 100 classifies each or part of the interface elements in the first layout according to the screen index and interface element type.

[0318] It should be understood that Mobile100 categorizes all interface elements according to screen index and interface element type. This means that the interface elements on each page of the screen are classified according to the page number in the screen index. The types of interface elements can include large folders suggested by the app, stacked cards, individual cards, shortcuts, large folders, small folders, and independently displayed application icons. Various sizes can correspond to different types of interface elements. For example, a shortcut can be a 2x2 shortcut, a 2x1 shortcut, a 1x2 shortcut, or other sizes; there are no restrictions on this.

[0319] If the phone sorts the usage rates of various interface elements before 2901, then 2904 will be executed; otherwise, 2903 will be executed.

[0320] 2903: Mobile phone 100 sorts the same type of interface elements on each screen according to usage rate or original position.

[0321] For example, UI elements of the same type can refer to UI elements that are both large folders or both small folders. Original position refers to the position of the UI element within the first layout.

[0322] 2904: Obtain the layout information of each screen according to the target arrangement.

[0323] Specifically, the layout information for each screen is obtained according to the target arrangement method, as detailed above. Figures 10 to 28 As shown, it will not be elaborated upon here.

[0324] 2905: The interface elements suggested for generating apps on the home screen of mobile phone 100.

[0325] Specifically, the interface elements of the app suggestions generated on the first screen can be a card set, such as the YOYO Suggestions Card Set, or a large folder of YOYO Suggestions.

[0326] 2906: Mobile phone 100 performs new splash screen processing, fill-in processing and / or widget generation.

[0327] The new splash screen processing involves creating a new screen to display any remaining un-arranged interface elements after a well-organized layout of all screens. The fill-in processing involves filling in empty spaces not part of the well-organized layout. Widgets can be text widgets, widgets displaying cartoon characters, or other types of widgets; there are no restrictions.

[0328] 2907: Mobile phone 100 generates a breathable layout preview object.

[0329] A breathable layout can be considered equivalent to the second breathable layout described above. The breathable layout preview object can be a List. <screenlayout>Object.

[0330] 2908: Mobile phone 100 receives user input on the application of the breathable layout.

[0331] The user's application of the breathable layout can be achieved by clicking on the application controls of the mobile phone 100, thus applying the breathable layout to the mobile phone 100.

[0332] 2909: Mobile phone 100 display breathable layout.

[0333] The interface display method provided in this application, by responding to user operations, displays a first layout as a second layout after the interface elements have been organized, which helps to reduce the density of interface elements, making the mobile phone interface easier for users to use and improving the user experience.

[0334] This application also provides a computer storage medium that includes computer instructions. When the computer instructions are executed on the terminal device, the terminal device performs various functions or steps performed by the mobile phone in the above method embodiment.

[0335] This application also provides a computer program product that, when run on a computer, causes the computer to perform the various functions or steps performed by the mobile phone in the above method embodiments.

[0336] It is understood that the terminal device provided in this application embodiment includes hardware structures and / or software modules corresponding to the execution of each function in order to achieve the above-mentioned functions. Those skilled in the art should readily recognize that, in conjunction with the units and algorithm steps of the various examples described in the embodiments disclosed herein, the embodiments of this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed by hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the embodiments of this application.

[0337] This application embodiment can divide the terminal device into functional modules according to the above method example. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this application embodiment is illustrative and only represents one logical functional division. In actual implementation, there may be other division methods.

[0338] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0339] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another device, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0340] The units described as separate components may or may not be physically separate. A component shown as a unit can be one or more physical units; that is, it can be located in one place or distributed in multiple different locations. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0341] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0342] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, essentially, or the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. This software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0343] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.< / screenlayout>

Claims

1. A method for displaying an interface, characterized in that, Applied to electronic devices, the method includes: The first interface is displayed, and the interface elements in the first interface are arranged according to a first layout; the interface elements include at least one of the following: application-suggested folders, card sets, individual cards, large folders, small folders, shortcuts, or individual application icons; In response to a user's first operation to adjust the interface layout, a second interface is displayed. The second interface is an interface in which all or part of the interface elements of the first interface are arranged according to the second layout. The area ratio of all interface elements in the second interface is less than the area ratio of all interface elements in the first interface. The second layout includes multiple layout areas, each of which corresponds to a matching rule. The matching rule includes a matching priority and the type of the interface element to be matched. The matching rules corresponding to different layout areas prioritize matching different types of interface elements. The interface elements in each layout area are the interface elements in the first interface that match the matching rule corresponding to the layout area.

2. The method according to claim 1, characterized in that, Both the first interface and the second interface correspond to the first sub-screen of the desktop; Before displaying the second interface, the method further includes: Determine the target sub-screen and target layout, wherein the target sub-screen includes one or more sub-screens of the desktop, the one or more sub-screens include the first sub-screen, and the target layout corresponds to the plurality of layout areas; For each sub-screen in the target sub-screen, rearrange all or part of the interface elements of the sub-screen according to the target layout method to obtain the layout information corresponding to the sub-screen; The second interface display includes: The second interface is displayed based on the layout information corresponding to the first sub-screen.

3. The method according to claim 2, characterized in that, For each sub-screen in the target sub-screen, the following process is performed to obtain the layout information corresponding to each sub-screen: Obtain the matching rules that correspond one-to-one with the multiple layout regions; For each of the multiple layout regions, based on the matching rules corresponding to the layout region, all or part of the interface elements of the sub-screen are matched to obtain the layout information corresponding to the layout region, thereby obtaining the layout information corresponding to the sub-screen. The layout information corresponding to the layout area includes: information about the interface elements in the sub-screen that match the matching rules corresponding to the layout area.

4. The method according to claim 3, characterized in that, Before matching all or part of the interface elements of the sub-screen based on the matching rules corresponding to the layout area, the method further includes: The interface elements of the sub-screen are classified according to the type information of the interface elements; Based on one or more of the usage rate and position information of each interface element in the sub-screen, the interface elements of the sub-screen are sorted.

5. The method according to any one of claims 2-4, characterized in that, Before displaying the first interface in response to the user's first operation of adjusting the interface layout, the method further includes: In response to a second user action, a third interface is displayed, the third interface including a first control for triggering an adjustment of the interface layout; In response to a third operation by the user on the first control, a fourth interface is displayed, the fourth interface including one or more of a first editing option, a second editing option, and a third editing option; The first editing option is used by the user to select and adjust the sub-screen of the interface layout; the second editing option is used by the user to select the arrangement method, and the area ratio of all interface elements in the different second interfaces generated by different arrangement methods is different; the third editing option is used by the user to select whether to display preset components in the second interface.

6. The method according to any one of claims 1-4, characterized in that, The plurality of layout regions include a first layout region, a second layout region, a third layout region, and a fourth layout region; wherein, the first layout region corresponds to a first matching rule, the second layout region corresponds to a second matching rule, the third layout region corresponds to a third matching rule, and the fourth layout region corresponds to a fourth matching rule; The first matching rule matches the first interface element, the second interface element, the third interface element, the fourth interface element, the fifth interface element, the sixth interface element, and the seventh interface element in descending order of priority; The second matching rule matches the third interface element, the fourth interface element, the fifth interface element, and the seventh interface element in descending order of priority; The third matching rule matches the second interface element, the third interface element, the fourth interface element, the fifth interface element, the sixth interface element, and the seventh interface element in descending order of priority. The fourth matching rule matches the fourth interface element, the fifth interface element, the sixth interface element, and the seventh interface element in descending order of priority; The first interface element is a folder suggested by the application, the second interface element is a card set, the third interface element is an individual card, the fourth interface element is a shortcut, the fifth interface element is a large folder, the sixth interface element is a small folder, and the seventh interface element is an application icon.

7. The method according to any one of claims 1-4, characterized in that, The second interface also includes one or more interface elements from a preset component or application suggestion card set.

8. An electronic device, characterized in that, The electronic device includes at least a memory and one or more processors; the memory is used to store computer instructions, which, when executed by the one or more processors, cause the electronic device to perform the method as described in any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that, Includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 7.

10. A computer program product, characterized in that, When the computer program product is run on an electronic device, it causes the electronic device to perform the method as described in any one of claims 1 to 7.

Images