Interface display method and device, computer device, and storage medium

Abstract

The application discloses an interface display method and device, computer equipment and a storage medium, and belongs to the technical field of software. The method comprises the following steps: displaying a page card display area on a user interface, the page card display area being in an unfolded state or a folded state, and display content being displayed on the page card display area and being slidable; receiving a first sliding operation triggered on the page card display area; and in the case that the display content of the page card display area has been slid to the end, switching the page card display area between the unfolded state and the folded state according to the first sliding operation. The interface display method provided in the embodiment of the application is more in line with the natural process of user sliding interaction, and the efficiency of human-computer interaction is improved. The interface display method provided in the embodiment of the application can be applied to the interface display process of a map application program.

Description

Technical Field

[0001] This application relates to the field of software technology, and in particular to an interface display method, apparatus, computer device, and storage medium. Background Technology

[0002] With the development of internet technology, terminals now support the installation of map applications to meet users' navigation needs.

[0003] The map interface includes a separate tab switching hotspot and a tab display area. Users trigger the tab switching hotspot to change the tab status corresponding to the tab display area, such as switching the tab display area from collapsed to expanded, or vice versa.

[0004] The tab switching hotspot typically occupies a small area on the map interface. Based on the tab switching method provided by the above technical solution, users need to precisely move their gestures to the tab switching hotspot to trigger it, resulting in low efficiency of human-computer interaction. Summary of the Invention

[0005] This application provides a method, apparatus, computer device, and storage medium for displaying an interface, which better aligns with the natural flow of user swipe interaction and improves the efficiency of human-computer interaction. The technical solution is as follows:

[0006] According to one aspect of this application, a method for displaying an interface is provided, the method comprising:

[0007] A tab display area is displayed on the user interface. The tab display area can be in an expanded or collapsed state, and scrollable content is displayed on the tab display area.

[0008] Receive a first swipe operation triggered on the page display area;

[0009] When the content displayed in the tab display area has been slid to the end, the tab display area is switched between the expanded state and the folded state according to the first sliding operation.

[0010] According to another aspect of this application, an interface display device is provided, the device comprising:

[0011] The display module is used to display a tab display area on the user interface. The tab display area can be in an expanded or collapsed state, and the tab display area displays slidable content.

[0012] A receiving module is configured to receive a first sliding operation triggered on the page display area;

[0013] The switching module is used to switch the page display area between the expanded state and the folded state according to the first sliding operation when the displayed content of the page display area has been slid to the end.

[0014] According to another aspect of this application, a computer device is provided, the computer device including a processor and a memory, the memory storing at least one instruction, at least one program, code set or instruction set, the at least one instruction, the at least one program, the code set or instruction set being loaded and executed by the processor to implement the interface display method as described above.

[0015] According to another aspect of this application, a computer-readable storage medium is provided, wherein at least one instruction, at least one program, code set, or instruction set is stored therein, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement the interface display method described above.

[0016] According to another aspect of this application, a computer program product or computer program is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the interface display methods provided in various optional implementations of the above aspects.

[0017] The beneficial effects of the technical solution provided in this application include at least the following:

[0018] When the content displayed in the tab display area has been scrolled to the end, if the user continues to scroll in the tab display area, the expanded or collapsed state of the tab display area will be switched smoothly directly, without the user having to switch gestures to a dedicated tab state switching hotspot to trigger it. This is more in line with the natural flow of user swiping interaction and improves the efficiency of human-computer interaction. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a structural block diagram of an implementation environment provided by an exemplary embodiment of this application;

[0021] Figure 2This is a flowchart illustrating an exemplary embodiment of the interface display method provided in this application;

[0022] Figure 3 This is a schematic diagram illustrating the sliding of display content within a page display area according to an exemplary embodiment of this application;

[0023] Figure 4 This is a schematic diagram illustrating the sliding of display content within a page display area according to an exemplary embodiment of this application;

[0024] Figure 5 This is a schematic diagram illustrating the switching of the tab display area from an expanded state to a collapsed state according to an exemplary embodiment of this application;

[0025] Figure 6 This is a schematic diagram illustrating the switching of the tab display area from a folded state to an unfolded state according to an exemplary embodiment of this application;

[0026] Figure 7 This is a flowchart illustrating an exemplary embodiment of the interface display method provided in this application;

[0027] Figure 8 This is a flowchart illustrating an exemplary embodiment of the interface display method provided in this application;

[0028] Figure 9 This is a flowchart illustrating an exemplary embodiment of the interface display method provided in this application;

[0029] Figure 10 This is a schematic diagram illustrating the linkage between the information display area and the page card display area, provided in an exemplary embodiment of this application.

[0030] Figure 11 This is a schematic diagram illustrating the linkage between the information display area and the page card display area, provided in an exemplary embodiment of this application.

[0031] Figure 12 This is a flowchart illustrating an exemplary embodiment of the interface display method provided in this application;

[0032] Figure 13 This is a flowchart illustrating an exemplary embodiment of the interface display method provided in this application;

[0033] Figure 14 This is a schematic diagram of the structure of an interface display device provided in an exemplary embodiment of this application;

[0034] Figure 15 This is a schematic diagram of the structure of a terminal provided in an exemplary embodiment of this application.

[0035] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. Detailed Implementation

[0036] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0037] First, let's introduce the terms used in the embodiments of this application:

[0038] Page tab display area: This is a display area on the user interface that is displayed based on the page tab sliding view.

[0039] In this embodiment, the tab display area includes a folded state and an unfolded state. The area of ​​the tab display area in the folded state is larger than the area of ​​the tab display area in the unfolded state. It is understood that this embodiment only illustrates the two tab states of the tab display area (folded and unfolded) for illustrative purposes; the tab display area may also include three or more tab states, with different areas for each state.

[0040] In this embodiment, the tab display area displays scrollable content. For example, the display content includes one or more content list items, each including a set of associated display content information. For example, when a user performs a swipe operation on the tab display area, the display content can be triggered to slide within the tab display area, thereby allowing different portions of the display content to be displayed within the tab display area.

[0041] Page offset: This is the offset corresponding to the page card display area. The page offset is used to indicate the degree of expansion of the page card display area.

[0042] For example, the terminal determines the tab offset corresponding to the tab display area based on the position of the top of the tab display area along the vertical axis. For example, the position of the bottom of the tab display area along the vertical axis is fixed, position 'a'. If the position of the top of the tab display area along the vertical axis is 'b', then the tab offset is 'ba'; if the position of the top of the tab display area along the vertical axis is 'c', then the tab offset is 'ca', where 'a', 'b', and 'c' are all positive numbers.

[0043] Content offset: This is the offset of the displayed content on the page card display area, used to indicate the sliding of the displayed content within the page card display area.

[0044] For example, the terminal determines the current content offset based on the content displayed at the bottom of the tab display area. For example, if there are 10 content list items, and the content displayed at the bottom of the tab display area is the 10th content list item, then the content offset is 0; if the content displayed at the bottom of the tab display area is the 5th content list item, then the content offset is a value determined based on the distance between the 5th and 10th content list items.

[0045] Optimal viewpoint: This refers to the most comfortable and convenient viewing angle for users when viewing elements on a map. Optimal viewpoint involves adjusting the map's center point and the visible range of map elements.

[0046] Endpoint Sub-point Recommendation Page: This page is used to recommend endpoints for destinations such as parks or airports that have multiple endpoints (e.g., parking lot, east gate, west gate).

[0047] For example, the endpoint sub-point recommendation page includes endpoint recommendation bubbles corresponding to each endpoint sub-point; after the user clicks on the endpoint recommendation bubble, they enter the endpoint sub-point recommendation function.

[0048] Marker: In map applications, a marker can be a special location point in a map area set by the application service provider or the user.

[0049] For example, the aforementioned markers could be location points recommended to users by map application service providers, such as at least one entrance or exit corresponding to the user's queried destination. Alternatively, the aforementioned markers could also be location points marked on the map by the current user.

[0050] In this embodiment, when the content displayed in the tab display area has been slid to the end, if the user continues to swipe in the tab display area, the expanded or collapsed state of the tab display area will be switched smoothly directly without the user having to switch gestures to a dedicated tab state switching hotspot to trigger it. This better fits the natural flow of the user's swiping interaction and improves the efficiency of human-computer interaction.

[0051] The technical solutions provided in the embodiments of this application will be described by way of example below based on the following embodiments.

[0052] Please refer to Figure 1 This diagram illustrates an implementation environment provided by an exemplary embodiment of this application. This implementation environment can be implemented as a system architecture for a map-type application. The implementation environment may include a terminal 102 and a server 104.

[0053] The number of terminals 102 is typically multiple, and each terminal 102 can be an electronic device such as a mobile phone, desktop computer, tablet computer, game console, e-book reader, multimedia playback device, wearable device MP3 player (Moving Picture Experts Group Audio Layer III), MP4 player (Moving Picture Experts Group Audio Layer IV), or laptop computer. A client for a map application can be installed and run on each terminal 102. Map applications typically provide users with services such as map browsing, location search, and route navigation. It should be noted that the term "map application" in this application refers to an application that includes map functionality, such as an application that provides map browsing, location search, and route navigation services. Furthermore, this application does not limit the form of the application; for example, the application can be a dedicated map application or other types of applications with the aforementioned functions, such as instant messaging applications or social networking applications. The form of the application includes, but is not limited to, apps and mini-programs installed on terminals (such as handheld terminals, in-vehicle terminals, and portable computers).

[0054] Additionally, terminal 102 is equipped with a display screen (also called a screen) to display the user interface. Optionally, the display screen is a touch screen capable of responding to user touch operations.

[0055] Server 104 can be a standalone physical server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server providing cloud computing services. Server 104 can be the backend server for the aforementioned map applications, providing backend services to the clients of the map applications.

[0056] Terminal 102 and server 104 can communicate via a network, such as a wireless network.

[0057] Figure 2 A flowchart illustrating an exemplary embodiment of the present application provides a method for displaying an interface, which can be applied to, for example... Figure 1 In the terminal shown, the method may include (steps 202 to 206):

[0058] Step 202: Display the tab display area on the user interface. The tab display area can be in an expanded or collapsed state, and scrollable content can be displayed on the tab display area.

[0059] The user interface is the interface corresponding to the application. This user interface can be the application's home page or other pages that the user jumps to from the home page after performing a triggered action in the application.

[0060] The tab display area is a display area on the user interface. For example, the tab display area is displayed based on a tab slide view, which is primarily used to implement the function of sliding displayed content. For example, the tab display area occupies part or all of the user interface.

[0061] In this embodiment, the tab display area includes two page states: an expanded state and a collapsed state. The area of ​​the tab display area in the collapsed state is larger than that in the expanded state. For example, the vertical axis length of the tab display area in the expanded state is greater than that in the collapsed state.

[0062] The displayed content is the content shown in the tab display area, and the displayed content can be scrolled within the tab display area. For example, the displayed content is based on a content display view, which is primarily used for information presentation. For example, the content display view is a subview of the tab sliding view, and the display of the content is adjusted based on the switching between the expanded and collapsed states of the tab display area.

[0063] For example, the displayed content can be slid to the top of the tab display area, and there is no more displayed content above the top; or, the displayed content can be slid to the bottom of the tab display area, and there is no more displayed content below the bottom.

[0064] Reference Figure 3 The tab display area 301 is in the expanded state, and the displayed content can be scrolled within the tab display area 301, such as... Figure 3 As shown in (a), the user can slide from bottom to top, that is, from bottom to top, to slide the displayed content to the bottom within the tab display area 301. The bottommost content is the list item 302 related to the North Second Gate; as shown in (a). Figure 3 As shown in (b), the user can slide from top to bottom, that is, the sliding direction is from top to bottom, so that the displayed content can be slid to the top within the page display area 301. The topmost displayed content is the list item 303 related to the North Gate.

[0065] Reference Figure 4 The page display area 401 is in a collapsed state, and the displayed content can be slid within the page display area 401, such as... Figure 4 As shown in (a), the page display area 401 displays the content that has been slid to the top, and the topmost content is the list item 402 related to the North Gate; as shown in (a). Figure 4 As shown in (b), the user can slide from bottom to top, that is, from bottom to top, to pull up the content displayed in the page display area 401; as Figure 4 As shown in (c), the page display area 401 displays the content that has been slid to the bottom, and the bottom content is the content list item 403 related to the North Second Gate.

[0066] For example, the user interface is the map interface corresponding to a map application, and the content displayed on the tab display area is the relevant information of each location.

[0067] Step 204: Receive the first swipe operation triggered on the page display area.

[0068] The first swipe operation is a swipe action applied by the user on the tab display area. For example, the first swipe operation is a swipe operation in the vertical axis direction, such as a swipe operation from top to bottom, or a swipe operation from bottom to top.

[0069] Step 206: When the content displayed in the tab display area has been slid to the end, switch the tab display area between the expanded state and the collapsed state according to the first sliding operation.

[0070] That is, at the time of receiving the first swipe operation, if the content displayed in the tab display area has already been swiped to the end, the terminal will switch the tab display area from the expanded state to the collapsed state based on the first swipe operation, or switch the tab display area from the collapsed state to the expanded state.

[0071] Here, "end" refers to the very top or bottom of the displayed content. "The content in the tab display area has slid to the end" includes: the displayed content has slid to the very top of the tab display area; or, the displayed content has slid to the very bottom of the tab display area.

[0072] In summary, the method provided in this embodiment allows for a smooth and direct switch between the expanded and collapsed states of the tab display area when the content in the tab display area has been slid to the end. This eliminates the need for the user to manually switch to a dedicated tab state switching hotspot, thus better aligning with the natural flow of user interaction and improving the efficiency of human-computer interaction.

[0073] In the illustrative embodiment, the switching between the expanded and collapsed states of the page display area includes the following two possible implementations:

[0074] Implementation Method 1:

[0075] When the topmost content is displayed in the expanded tab display area, and the sliding direction of the first sliding operation is from top to bottom, the terminal switches the tab display area from the expanded state to the collapsed state according to the first sliding operation.

[0076] In other words, since the sliding direction of the first sliding operation is from top to bottom, which corresponds to continuing to pull down the displayed content, if the displayed content of the expanded tab display area has already been slid to the top at the time the first sliding operation is received, the first sliding operation cannot continue to pull down the displayed content. Therefore, the purpose of the user applying the first sliding operation is to switch the tab state of the tab display area. The terminal then switches the tab display area from the expanded state to the collapsed state based on the first sliding operation.

[0077] For example, in conjunction with reference Figure 5 ,like Figure 5 As shown in (a), the tab display area 501 is in an expanded state, and the tab display area 501 displays the content that has been slid to the top. The topmost content is the list item 502 related to the North Gate; as shown in (a). Figure 5 As shown in (b), the user can slide from top to bottom, that is, the sliding direction is from top to bottom. Since the page display area 501 displays content that has been slid to the top, the sliding operation causes the page display area 501 to slide downwards; as shown in (b), the user can slide from top to bottom. Figure 5 As shown in (c), when the user releases the gesture, the tab display area 501 switches from an expanded state to a collapsed state.

[0078] Implementation Method Two:

[0079] When the page display area is in a folded state and the bottom content is displayed, and the sliding direction of the first sliding operation is from bottom to top, the terminal switches the page display area from a folded state to an unfolded state according to the first sliding operation.

[0080] In other words, since the sliding direction of the first sliding operation is from bottom to top, which corresponds to continuing to pull up the displayed content, if the displayed content of the page display area in the folded state has already slid to the bottom at the time the first sliding operation is received, the first sliding operation cannot continue to pull up the displayed content. Therefore, the purpose of the user applying the first sliding operation is to switch the page state of the page display area. The terminal then switches the page display area from the folded state to the unfolded state based on the first sliding operation.

[0081] For example, in conjunction with reference Figure 6 ,like Figure 6As shown in (a), the page display area 601 is in a collapsed state, and the page display area 601 displays the content that has been slid to the bottom. The content displayed at the bottom is the list item 602 related to the North Second Gate; as shown in (a). Figure 6 As shown in (b), the user can slide from bottom to top, that is, the sliding direction is from bottom to top. Since the page display area 601 displays content that has been slid to the bottom, the sliding operation causes the page display area 601 to slide upward; as Figure 6 As shown in (c), when the user releases the gesture, the tab display area 601 switches from a folded state to an unfolded state.

[0082] In the illustrative embodiment, the adjustment of the page card status in the page card display area is based on the page card offset.

[0083] Figure 7 A flowchart illustrating an exemplary embodiment of the present application provides a method for displaying an interface, which can be applied to, for example... Figure 1 In the terminal shown, the method may include (steps 702 to 708):

[0084] Step 702: Display the tab display area on the user interface. The tab display area is either expanded or collapsed, and scrollable content is displayed on the tab display area.

[0085] Step 704: Receive the first swipe operation triggered on the page display area.

[0086] In one possible implementation, before step 704, the terminal receives a second sliding operation triggered on the page display area, the second sliding operation having the same sliding direction as the first sliding operation; the terminal displays the slidable content on the page display area according to the second sliding operation.

[0087] The second swipe operation is a swipe operation applied by the user on the tab display area before the first swipe operation is applied. For example, the second swipe operation is a swipe operation in the vertical axis direction, such as a swipe operation from top to bottom, or a swipe operation from bottom to top.

[0088] For example, the second swipe operation is performed from top to bottom, corresponding to continuing to pull down the displayed content. If, at the moment the second swipe operation is received, the displayed content in the tab display area has not yet been scrolled to the top, and the user's purpose in applying the second swipe operation is to scroll the displayed content in the tab display area, then the terminal will continue to pull down the displayed content based on the second swipe operation until the displayed content is scrolled to the top. Subsequently, if the received first swipe operation is also performed from top to bottom, the terminal will switch the tab display area from an expanded state to a collapsed state based on the first swipe operation.

[0089] For example, the second swipe operation is performed from bottom to top, corresponding to continuing to pull up the displayed content. If, at the moment the second swipe operation is received, the displayed content in the tab display area has not yet reached the bottom, and the user's purpose in applying the second swipe operation is to slide the displayed content in the tab display area, then the terminal will continue to pull up the displayed content based on the second swipe operation until the displayed content reaches the bottom. Subsequently, if the received first swipe operation is also performed from bottom to top, the terminal will switch the tab display area from a collapsed state to an expanded state based on the first swipe operation.

[0090] In another possible implementation, before step 706 or step 708, if the content displayed in the page display area has not been slid to the end, the terminal displays the slid content on the page display area according to the first sliding operation.

[0091] In one example, the terminal receives a first swipe operation triggered on the tab display area based on touch events. Each touch event includes the touch event type and the coordinates of the touch event. Touch event types include: touch down, touch move, and touch release. An illustrative "first swipe operation" corresponds to: one touch down event, multiple touch move events, and one touch release event. The coordinates in each touch event are sequentially connected to form the swipe trajectory of the "first swipe operation." Specifically, based on the earlier part of the touch move events in the time domain of the "first swipe operation," the terminal swipes the displayed content on the tab display area until it reaches the end, and then, based on the later part of the touch move events in the time domain of the "first swipe operation," switches the tab display area between an expanded state and a collapsed state.

[0092] Normally, when browsing information in a tab display area, users use up-and-down swipe gestures to scroll through the displayed content. Based on the above example, the method provided in this application extends the swiping action beyond the natural scrolling process to achieve the user's desired effect. Specifically:

[0093] 1. When the displayed content has reached the top (i.e., more information cannot be displayed by scrolling down), if the user continues to scroll down, the tab display area will change from an expanded state to a collapsed state.

[0094] 2. When the displayed content has reached the bottom (i.e., no more information can be displayed by swiping up), if the user continues to swipe up, the tab display area will change from a collapsed state to an expanded state, clearly informing the user that all data has been loaded and showing the user more display content.

[0095] Step 706: When the topmost content is displayed in the expanded tab display area and the sliding direction of the first sliding operation is from top to bottom, adjust the tab offset from the first tab offset to the second tab offset, and display the collapsed tab display area based on the second tab offset.

[0096] The tab display area has a corresponding tab offset, which indicates the extent to which the tab display area is expanded. For example, the terminal determines the tab offset based on the position of the top of the tab display area along the vertical axis.

[0097] The offset of the first page card corresponds to the unfolded state, and the offset of the second page card corresponds to the folded state.

[0098] Optionally, the page card offset can be adjusted from the first page card offset to the second page card offset, including:

[0099] At the start and end times of the first sliding operation, the page offset corresponding to the page display area is recorded respectively; in response to the change value of the page offset based on the first sliding operation being greater than the first change threshold, the page offset is adjusted from the first page offset to the second page offset.

[0100] For example, at the start time of the first sliding operation, the page offset corresponding to the page display area is A. Based on the first sliding operation, at the end time of the first sliding operation, the page offset corresponding to the page display area is B. If the absolute value of A and B is greater than the first change threshold, the terminal will adjust the page offset from the first page offset to the second page offset. Both A and B are positive numbers.

[0101] Step 708: When the bottom content is displayed in the folded tab display area and the sliding direction of the first sliding operation is from bottom to top, adjust the tab offset from the second tab offset to the first tab offset, and display the unfolded tab display area based on the first tab offset.

[0102] The offset of the first page card corresponds to the unfolded state, and the offset of the second page card corresponds to the folded state.

[0103] Optionally, the page card offset can be adjusted from the second page card offset to the first page card offset, including:

[0104] At the start and end times of the first sliding operation, the page offset corresponding to the page display area is recorded respectively; in response to the change value of the page offset based on the first sliding operation being greater than the second change threshold, the page offset is adjusted from the second page offset to the first page offset.

[0105] For example, at the start time of the first sliding operation, the page offset corresponding to the page display area is C. Based on the first sliding operation, at the end time of the first sliding operation, the page offset corresponding to the page display area is D. If the value of DC is greater than the second change threshold, the terminal will adjust the page offset from the second page offset to the first page offset. Both C and D are positive numbers.

[0106] In other words, the change in the tab offset is determined based on the start and end times of the user's first swipe operation, thereby handling some judgment logic related to switching between the tab display area and the collapsed state. For example, the judgment logic includes: handling gesture conflicts between switching the tab display area and swiping the displayed content, determining whether a tab state switch has occurred, and limiting the tab offset when the tab display area is in the collapsed and expanded states.

[0107] Compared to traditional solutions, which process the aforementioned logic whenever the offset of the page tab display area or content changes, and since offset changes occur frequently, the processing frequency of this logic is high. The solution provided in this application avoids processing this logic whenever the page tab offset changes, instead distributing it across two points: when the user's swipe gesture is triggered and when the gesture is completely finished. This significantly reduces the frequency of the logic processing and improves the efficiency of page tab state switching.

[0108] Optionally, the first change threshold is greater than the second change threshold. The first change threshold is the change threshold corresponding to the case where the offset of the first page card is switched to the offset of the second page card, and the second change threshold is the change threshold corresponding to the case where the offset of the second page card is switched to the offset of the first page card.

[0109] From the perspective of swipe gesture operation habits, the range of upward swipes is generally smaller than the range of downward swipes. Since upward swipes correspond to switching the tab display area from a collapsed state to an expanded state (i.e., the second tab offset is adjusted to the first tab offset), and downward swipes correspond to switching the tab display area from an expanded state to a collapsed state (i.e., the first tab offset is adjusted to the second tab offset), in order to conform to swipe gesture operation habits, the first change threshold is greater than the second change threshold.

[0110] Optionally, before step 706 or 708 above, whether the content displayed in the page card display area has been slid to the end is determined based on the following method:

[0111] The terminal obtains the content offset corresponding to the displayed content. The content offset is used to identify the sliding status of the displayed content in the page display area. Based on the content offset, the terminal determines that the displayed content in the page display area has slid to the end.

[0112] Optionally, if the content offset is a preset value, the terminal determines that the displayed content in the tab display area has slid to the end. For example, the terminal determines the current content offset based on the content displayed at the bottom of the tab display area. For example, the content offset ranges from [0, X], where X is a positive number. If the content offset is 0, it indicates that the displayed content in the tab display area has slid to the bottom; if the content offset is X, it indicates that the displayed content in the tab display area has slid to the top.

[0113] Optionally, during the adjustment of the tab offset based on the first sliding operation, a view sliding animation is displayed on the user interface. The tab offset corresponding to the end of the view sliding animation is recorded as the tab target offset.

[0114] For example, the target offset of the tab is limited to ensure that when the height of the tab display area exceeds the maximum or minimum value due to user gestures, a spring-like drop effect in the view sliding animation can be achieved. For example, the target offset of the tab is limited to max(min(target offset of tab, m), n). Here, m is the tab offset of the display area in the expanded state, and n is the tab offset of the display area in the collapsed state.

[0115] Compared to traditional solutions, when the height of the tab display area exceeds the maximum or minimum value due to user gestures, the height can only be fixed at the maximum or minimum value. This disables the bounce-back effect of some view sliding animations to the standard tab position, thus impairing the user experience. The technical solution provided in this application limits the target offset of the tab to ensure that when the height of the tab display area exceeds the maximum or minimum value due to user gestures, a spring-like bounce-back effect for view sliding animations can be achieved. This results in a smoother animation display effect that better matches the user's gestures, thereby enhancing gesture feedback and improving the user experience.

[0116] In summary, the method provided in this embodiment allows for a smooth and direct switch between the expanded and collapsed states of the tab display area when the content in the tab display area has been slid to the end. This eliminates the need for the user to manually switch to a dedicated tab state switching hotspot, thus better aligning with the natural flow of user interaction and improving the efficiency of human-computer interaction.

[0117] Meanwhile, the method provided in this embodiment receives a second sliding operation with the same sliding direction as the first sliding operation before receiving the first sliding operation for switching the tab state, so as to slide the displayed content on the tab display area to the end. Thus, through continuous gesture recognition, the effect of smoothly folding or unfolding the tab display area can be achieved, thereby quickly completing the switching of the tab state, reducing unnecessary user operations, and improving the convenience of switching the tab state.

[0118] Meanwhile, the method provided in this embodiment slides the content displayed on the card display area to the end based on the first sliding operation, and then switches the card display area between an expanded state and a folded state. Thus, through continuous gesture recognition, the effect of smoothly folding or expanding the card display area can be achieved, thereby quickly completing the switching of card states, reducing unnecessary user operations, and improving the convenience of switching card states.

[0119] Meanwhile, the method provided in this embodiment adjusts the page card status of the page card display area based on the page card offset, which makes it easier for the terminal to accurately adjust the page card status.

[0120] Meanwhile, the method provided in this embodiment distributes the processing of the judgment logic corresponding to the page card state adjustment to two times: when the user's swipe gesture is triggered and when the adjustment is completely finished. Compared with the technical solution that processes the judgment logic as soon as the page card offset changes, this reduces the frequency of judgment logic processing and improves the logic execution efficiency of page card state switching.

[0121] Meanwhile, the method provided in this embodiment determines whether the displayed content has slid to the bottom or top by obtaining the content offset corresponding to the displayed content, which helps the terminal determine whether the page card state of the page card display area should be adjusted based on the first touch operation, thus avoiding erroneous adjustment of the page card state.

[0122] In an illustrative embodiment, the user interface also includes an information display area located below the tab display area, which adjusts its display based on changes in the tab status of the tab display area.

[0123] Figure 8 A flowchart illustrating an exemplary embodiment of the present application provides a method for displaying an interface, which can be applied to, for example... Figure 1 In the terminal shown, the method may include (steps 802 to 810):

[0124] Step 802: Display the tab display area on the user interface. The tab display area can be in an expanded or collapsed state, and scrollable content can be displayed on the tab display area.

[0125] Step 804: Receive the first swipe operation triggered on the page display area.

[0126] Step 806: When the content displayed in the tab display area has been slid to the end, switch the tab display area between the expanded state and the collapsed state according to the first sliding operation.

[0127] Step 808: In response to the page display area switching from an expanded state to a collapsed state, display the increased information display area on the user interface.

[0128] Optionally, in response to the page display area switching from an expanded state to a collapsed state, the terminal determines the increased area of ​​the information display area; the terminal displays the information display area on the user interface, with the content updated based on the increased area.

[0129] For example, if the information display area is a map area, then when the tab display area switches from an expanded state to a collapsed state, the area of ​​the map area is increased accordingly, and the displayed content of the map area is adjusted in a timely manner so that the displayed content of the map area conforms to the optimal map view corresponding to the increased area. (Refer to the reference.) Figure 5 When the tab display area 501 switches from an expanded state to a collapsed state, the area of ​​the map area 503 increases, and the displayed content of the map area 503 corresponds to the best view of the map before and after the switch.

[0130] Step 810: In response to the page display area switching from a collapsed state to an expanded state, display the information display area with the reduced area on the user interface.

[0131] Optionally, in response to the page display area switching from a collapsed state to an expanded state, the terminal determines the reduced area of ​​the information display area; the terminal displays the information display area on the user interface, with the content updated based on the reduced area.

[0132] For example, if the information display area is a map area, then when the tab display area switches from a collapsed state to an expanded state, the area of ​​the map area is reduced accordingly, and the displayed content of the map area is adjusted in a timely manner so that the displayed content of the map area conforms to the optimal map view corresponding to the reduced area. (Refer to the reference.) Figure 6 When the page display area 601 switches from a folded state to an unfolded state, the area of ​​the map area 603 decreases, and the displayed content of the map area 603 corresponds to the best view of the map before and after the switch.

[0133] For example, in this embodiment of the application, the user interface of the map application installed on the terminal includes the following three parts: a map area, a tab display area, and the content displayed on the tab display area. These three parts will be explained below.

[0134] 1) Map area

[0135] The map area is located at the bottom of the user interface and is used to provide a detailed explanation of the content displayed on the tab display area in the form of images.

[0136] For example, a map area includes various types of map information and markers.

[0137] 2) Page Card Display Area

[0138] The tab display area is located above the map area. The tab display area supports sliding based on swipe operations, thereby changing the tab state of the tab display area. The tab state includes: collapsed state and expanded state.

[0139] 3) Display content

[0140] The content is displayed in the tab display area. The tab slide view corresponding to the tab display area serves as the root view for the content display view.

[0141] The displayed content supports showing an unlimited number of list items, and these list items are interactive. For example, the list items in the displayed content are used to show information about marker points in a map area.

[0142] In this embodiment, there is a correlation between the map area, the tab display area, and the content displayed on the tab display area. Changes in the tab state corresponding to the tab display area affect the display of the map area and the content on the user interface.

[0143] For example, the user interface is a destination sub-point recommendation page. This page is used to recommend destination sub-points for destinations such as parks or airports that have multiple destination sub-points (such as parking lots, east gates, and west gates). The map area includes destination recommendation bubbles corresponding to each destination sub-point. The displayed content includes a list of items corresponding to each destination sub-point, including: the name of the destination sub-point, whether the destination sub-point has a corresponding parking lot, the entry and exit methods supported by the destination sub-point, the proportion of the destination sub-point selected by the user among all the destination sub-points, and the current distance of the destination sub-point, etc.

[0144] The tab status of the tab display area affects the number of list items displayed and the area of ​​the map display. For example, collapsing the tab display area increases the map area and reduces the number of list items; conversely, expanding the tab display area reduces the map area and increases the exposure of list items. The map area emphasizes graphic presentation, while the displayed content emphasizes text information. These two tab statuses cater to users with different usage needs.

[0145] In summary, the method provided in this embodiment allows for a smooth and direct switch between the expanded and collapsed states of the tab display area when the content in the tab display area has been slid to the end. This eliminates the need for the user to manually switch to a dedicated tab state switching hotspot, thus better aligning with the natural flow of user interaction and improving the efficiency of human-computer interaction.

[0146] Meanwhile, the method provided in this embodiment also includes an information display area located below the tab display area on the user interface. The information display area adjusts its display based on changes in the tab state of the tab display area. On the one hand, adjusting the tab state of the tab display area will not have a significant impact on the display of the information display area. On the other hand, since the content displayed on the information display area and the tab display area is generally used to express different aspects of information, adjusting the tab state of the tab display area will correspondingly adjust the display focus on the user interface, thereby meeting different user needs.

[0147] Meanwhile, the method provided in this embodiment, when the area of ​​the information display area is adjusted based on the page card status of the page card display area, adaptively updates the display content of the information display area based on the adjusted area of ​​the information display area, so as to avoid the adjustment of the page card status affecting the display content in the information display area.

[0148] In an illustrative embodiment, the user interface also includes an information display area located below the tab display area, and the content displayed in the information display area and the tab display area can be displayed in a linked manner.

[0149] Figure 12 A flowchart illustrating an exemplary embodiment of the present application provides a method for displaying an interface, which can be applied to, for example... Figure 1 In the terminal shown, the method may include (step 902 or step 904):

[0150] Step 902: Receive the first selection operation for the information identifier; update the display content of the page display area according to the first selection operation.

[0151] The information display area includes information identifiers. For example, an information identifier is a label provided by the application service provider within the information area that relates to the graphics or text within the information area.

[0152] The page card display area includes a list of content items corresponding to information identifiers. For example, each content list item includes a set of display content information associated with the information identifier.

[0153] For example, if the information display area is a map area and the information identifiers are markers in the map area, then the content displayed in the tab display area includes a list of items corresponding to the markers. These list items are used to display relevant information about the markers. For example, users can move and zoom the map area to view locations more precisely, thus helping them select information identifiers based on their viewing results.

[0154] For example, the information identifier corresponds to an interaction entry point. When a trigger operation is received for the interaction entry point, the terminal determines to receive the first selection operation for the information identifier.

[0155] In one possible implementation, the content list item corresponding to the information identifier selected by the first selection operation is highlighted in the page display area.

[0156] For example, if the information display area is a map area and the information identifiers are markers in the map area, then the content displayed in the tab display area includes a list of items corresponding to the markers. For instance... Figure 10As shown in (a), when a user clicks on a clickable location (South Gate) in the map area, the icon 1001 of the clickable location on the map area becomes a prominent selected state. At the same time, the tab display area will update the status of the displayed content, cancel the previously selected content list item, reselect the content list item 1002 related to the South Gate corresponding to icon 1001, and highlight the content list item 1002.

[0157] In one possible implementation, the content displayed in the scroll tab display area is scrolled until the content displayed in the scroll tab display area includes the content list item corresponding to the information identifier selected by the first selection operation, and the content list item is highlighted.

[0158] For example, if the information display area is a map area and the information identifiers are markers in the map area, then the content displayed in the tab display area includes a list of items corresponding to the markers. For instance... Figure 10 As shown in (b), icon 1001 on the map area was originally selected. When the user clicks on a clickable location (North Gate) in the map area, icon 1003 of that clickable location on the map area becomes prominently selected, while icon 1001 corresponding to the South Gate becomes unselected. Since the content list item corresponding to icon 1003 is not currently within the visible range of the tab display area, the content displayed in the tab display area is scrolled, so that the content list item 1004 related to the North Gate corresponding to icon 1003 appears within the visible range of the tab display area.

[0159] Step 904: Receive a second selection operation for a content list item; based on the second selection operation, highlight the information identifier corresponding to the content list item selected by the second selection operation in the information display area.

[0160] The information display area includes information identifiers, and the page display area includes a list of content items corresponding to the information identifiers.

[0161] For example, if the information display area is a map area and the information identifier is a marker point in the map area, then the content displayed in the tab display area includes a content list item corresponding to the marker point, and the content list item is used to display the relevant information of the marker point.

[0162] For example, each content list item has an interactive entry point. Upon receiving a trigger operation on the interactive entry point, the terminal determines to receive a second selection operation for the content list item.

[0163] For example, if the information display area is a map area and the information identifiers are markers in the map area, then the content displayed in the tab display area includes a list of items corresponding to the markers. For instance... Figure 11As shown, when the user clicks on the content list item 101 related to the South Gate in the tab display area, the icon 1102 of that location on the map area becomes a prominent selected state.

[0164] It is understood that steps 902 or 904 can be performed whether the page display area is in an expanded or collapsed state.

[0165] In summary, the method provided in this embodiment also includes an information display area located below the page card display area on the user interface. The information display area and the display content on the page card display area support linked display, thereby providing a more comprehensive and detailed display of information on the user interface, helping users obtain information more efficiently and improving the user experience.

[0166] Meanwhile, the method provided in this embodiment, when the user selects an information identifier in the information display area, and the terminal adjusts the displayed content on the page display area based on the user's selection, since the displayed content includes multiple content list items, if the content list item corresponding to the information identifier selected by the user is not currently displayed in the page display area, the displayed content on the page display area is scrolled until the content list item is included in the page display area, thereby helping the user obtain relevant information about the information identifier more efficiently.

[0167] Based on the scheme described in the above embodiments, Figure 12 A flowchart of a method for displaying an interface is shown.

[0168] The terminal corresponding to this embodiment mainly includes the following business modules: map view module, gesture management module, page card sliding view module, and content display view module.

[0169] The functions of each business module in this terminal will be described below as an example.

[0170] The map view module is primarily responsible for displaying map areas.

[0171] The gesture management module is mainly responsible for receiving and transmitting user gesture operations, such as swipe gestures.

[0172] The tab sliding view module is mainly responsible for switching the state of the tabs corresponding to the tab display area.

[0173] The content display view module is mainly responsible for displaying the content on the tab display area.

[0174] The following is an exemplary description of the method for switching the page display area from a collapsed state to an expanded state for the terminal under this structure. For example... Figure 12 As shown, the method may include the following steps:

[0175] In step 1201, the user slides the tab display area to a collapsed state.

[0176] In step 1202, the gesture management module receives a swipe operation from the user to swipe up to display content.

[0177] In step 1203, the gesture management module determines whether the touch event can continue to be passed to the tab sliding view module.

[0178] In step 1204, the page slide view module and the content display view module are not allowed to interact if the displayed content has not been scrolled to the bottom.

[0179] In step 1205, the content display view module slides down to display content based on the instruction from the gesture management module.

[0180] In step 1206, the gesture management module continues to receive swipe operations from the user from bottom to top to display content.

[0181] In step 1207, the gesture management module determines whether the touch event can continue to be passed to the tab sliding view module.

[0182] In step 1208, when the displayed content has been slid to the bottom, the tab sliding view module and the content display view module are allowed to work together.

[0183] For example, in steps 1203 and 1204 (or steps 1207 and 1208) above, the content offset corresponding to the content display view is obtained to determine whether the displayed content has slid to the bottom.

[0184] For example, when the tab display area is in a collapsed state, and the displayed content has been slid to the bottom, the user's sliding gesture can continue to be transmitted to the tab sliding view module, preparing for the logical judgment of switching the tab state in steps 1209 to 1220.

[0185] In step 1209, the user is about to begin the swipe gesture.

[0186] For example, at the moment when the user is about to begin a swipe gesture, the tab swipe view module records the current tab offset.

[0187] In step 1210, the user is about to stop the swipe gesture.

[0188] In step 1211, the tab sliding view module limits the tab target offset.

[0189] During the user's swipe gesture, the tab sliding view module displays a view sliding animation.

[0190] The target offset of the tab is the tab offset at the end of the view sliding animation. Limiting the target offset ensures that when the height of the tab display area exceeds the maximum or minimum value due to user gestures, a spring-like drop effect can be achieved in the view sliding animation.

[0191] Understandably, steps 1210 and 1211 can be omitted to save on terminal processing overhead.

[0192] In step 1212, the user has stopped the swipe gesture.

[0193] For example, at the point in time when the user has stopped swiping, the tab sliding view module records the current tab offset.

[0194] In step 1213, the page card sliding view module dynamically adjusts the page card offset to change the page card state.

[0195] In step 1214, the tab sliding view module notifies the content display view module of the tab status change.

[0196] In step 1215, the content display view module changes the layout of the displayed content.

[0197] In step 1216, the tab sliding view module notifies the map view module of the tab status change.

[0198] In step 1217, the map view module changes the optimal view of the map.

[0199] For example, in steps 1214 to 1217, the changes in the page status of the map view module and the content display view module are notified, so that the map view module and the content display view module can adjust the corresponding interface display in a timely manner.

[0200] In step 1218, the tab sliding view module displays a stopped view sliding animation.

[0201] In step 1219, the page card sliding view module dynamically adjusts the page card offset.

[0202] In step 1220, the tab sliding view module notifies the content display view module to stop scrolling the tab display area.

[0203] In other words, the tab sliding view module notifies the content display view module that the tab display area has completed the switch from the collapsed state to the expanded state.

[0204] In summary, the method provided in this embodiment allows for a smooth and direct switch between the expanded and collapsed states of the tab display area when the content in the tab display area has been slid to the end. This eliminates the need for the user to manually switch to a dedicated tab state switching hotspot, thus better aligning with the natural flow of user interaction and improving the efficiency of human-computer interaction.

[0205] Based on the scheme described in the above embodiments, Figure 13 A flowchart of a method for displaying an interface is shown. This method corresponds to switching the page display area from a collapsed state to an expanded state, and may include the following steps:

[0206] In step 1301, begin.

[0207] In step 1302, the slide tab display area is folded.

[0208] In step 1303, the user swipes from bottom to top to display content.

[0209] In step 1304, it is determined whether the displayed content has scrolled to the bottom.

[0210] If the displayed content has been scrolled to the bottom, proceed to step 1305; if the displayed content has not been scrolled to the bottom, proceed to step 1318.

[0211] In step 1305, the user is about to begin the swipe gesture.

[0212] In step 1306, the page card offset A is recorded.

[0213] In step 1307, the user is about to end the swipe gesture.

[0214] In step 1308, the target offset of the page card is limited to max(min(target offset of page card, m), n).

[0215] Where m is the offset of the page card display area in the expanded state, and n is the offset of the page card display area in the collapsed state.

[0216] In step 1309, the user has stopped the swipe gesture.

[0217] In step 1310, the page card offset B is recorded.

[0218] In step 1311, it is determined whether the absolute value of BA is greater than k.

[0219] Where k is the threshold value corresponding to the change in page card offset when the page card status changes. From the perspective of swipe gesture operation habits, the threshold value for the change when swiping the page card display area upward is generally smaller than the threshold value for the change when swiping downward.

[0220] If the absolute value of BA is greater than k, then proceed to step 1312; if the absolute value of BA is not greater than k, then proceed to step 1313.

[0221] In step 1312, the page card state is switched to expanded state, and the page card offset is adjusted to m.

[0222] In step 1313, the page card remains in a folded state, and the page card offset is adjusted to n.

[0223] In step 1314, the view sliding animation has stopped.

[0224] For example, when the view sliding animation has stopped, the terminal further adjusts the page offset to the correct position, that is, performs steps 1315 to 1317 as follows.

[0225] In step 1315, it is determined whether the page card is in an expanded state.

[0226] If the tab is in an expanded state, proceed to step 1316; if the tab is not in an expanded state, proceed to step 1317.

[0227] In step 1316, the page offset is adjusted to m.

[0228] In step 1317, the page offset is adjusted to n.

[0229] In step 1318, the process ends.

[0230] In summary, the method provided in this embodiment allows for a smooth and direct switch between the expanded and collapsed states of the tab display area when the content in the tab display area has been slid to the end. This eliminates the need for the user to manually switch to a dedicated tab state switching hotspot, thus better aligning with the natural flow of user interaction and improving the efficiency of human-computer interaction.

[0231] It should be noted that the order of the method steps provided in the embodiments of this application can be appropriately adjusted, and the steps can also be added or removed as appropriate. Any method variations that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the protection scope of this application, and therefore will not be elaborated further.

[0232] Figure 14This is a schematic diagram of the interface display device provided in an exemplary embodiment of this application. The device can be implemented as a terminal, or a part of a terminal. Figure 14 As shown, the device includes:

[0233] Display module 1402 is used to display a tab display area on a user interface. The tab display area is in an expanded state or a collapsed state, and the tab display area displays slidable display content.

[0234] The first receiving module 1404 is used to receive a first sliding operation triggered on the page display area;

[0235] The switching module 1406 is used to switch the page display area between the expanded state and the folded state according to the first sliding operation when the displayed content of the page display area has been slid to the end.

[0236] In an optional design, the switching module 1406 is used for:

[0237] When the topmost content is displayed in the tab display area in the unfolded state, and the sliding direction of the first sliding operation is from top to bottom, the tab display area is switched from the unfolded state to the folded state according to the first sliding operation.

[0238] or,

[0239] When the page display area in the folded state displays the bottommost content, and the sliding direction of the first sliding operation is from bottom to top, the page display area is switched from the folded state to the unfolded state according to the first sliding operation.

[0240] In an optional design, the tab display area corresponds to a tab offset, which is used to indicate the degree of expansion of the tab display area; the switching module 1406 is used for:

[0241] When the topmost content is displayed in the expanded state of the tab display area, and the sliding direction of the first sliding operation is from top to bottom, the tab offset is adjusted from the first tab offset to the second tab offset, and the tab display area in the folded state is displayed based on the second tab offset.

[0242] When the page display area in the folded state displays the bottommost content, and the sliding direction of the first sliding operation is from bottom to top, the page offset is adjusted from the second page offset to the first page offset, and the page display area in the unfolded state is displayed based on the first page offset.

[0243] In an optional design, the switching module 1406 is used for:

[0244] At the start and end times of the first sliding operation, the page offset corresponding to the page display area is recorded respectively.

[0245] In response to a change in the tab offset based on the first sliding operation exceeding a first change threshold, the tab offset is adjusted from the first tab offset to the second tab offset.

[0246] In an optional design, the switching module 1406 is used for:

[0247] At the start and end times of the first sliding operation, the page offset corresponding to the page display area is recorded respectively.

[0248] In response to a change in the tab offset based on the first sliding operation exceeding a second change threshold, the tab offset is adjusted from the second tab offset to the first tab offset.

[0249] In an optional design, the device further includes a sliding confirmation module, the sliding confirmation module being used for:

[0250] Obtain the content offset corresponding to the displayed content, and the content offset is used to identify the sliding of the displayed content in the page display area;

[0251] Based on the content offset, it is determined that the displayed content of the page display area has been slid to the end.

[0252] In an optional design, the device further includes: a second receiving module, the second receiving module being used for:

[0253] Receives a second sliding operation triggered on the page display area, the second sliding operation having the same sliding direction as the first sliding operation;

[0254] According to the second sliding operation, the slid-through content is displayed on the tab display area.

[0255] In an optional design, the display module 1402 is used for:

[0256] If the content displayed in the tab display area has not been slid to the end, the slid content is displayed on the tab display area according to the first sliding operation.

[0257] In an optional design, the user interface further includes an information display area located below the tab display area, and the display module 1402 is used for:

[0258] In response to the tab display area switching from the expanded state to the collapsed state, the information display area with the increased area is displayed on the user interface;

[0259] or,

[0260] In response to the page display area switching from the folded state to the unfolded state, the information display area with a reduced area is displayed on the user interface.

[0261] In an optional design, the display module 1402 is used for:

[0262] In response to the tab display area switching from the expanded state to the collapsed state, the increased area of ​​the information display area is determined; the information display area with updated content based on the increased area is displayed on the user interface;

[0263] In response to the tab display area switching from the folded state to the unfolded state, the reduced area of ​​the information display area is determined; the information display area with updated content based on the reduced area is displayed on the user interface.

[0264] In an optional design, the user interface further includes an information display area located below the tab display area. The information display area includes information identifiers, and the content displayed in the tab display area includes a list of content items corresponding to the information identifiers. The display module 1402 is used for:

[0265] Receive a first selection operation for the information identifier; update the display content of the page display area according to the first selection operation;

[0266] or,

[0267] Receive a second selection operation for the content list item; based on the second selection operation, highlight the information identifier corresponding to the content list item selected by the second selection operation in the information display area.

[0268] In an optional design, the display module 1402 is used for:

[0269] In the tab display area, the content list item corresponding to the information identifier selected by the first selection operation is highlighted;

[0270] or,

[0271] Scroll through the content displayed in the tab display area until the content displayed in the tab display area includes the content list item corresponding to the information identifier selected in the first selection operation, and highlight the content list item.

[0272] It should be noted that the interface display device provided in the above embodiments is only an example of the division of the above functional modules. 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. In addition, the interface display device and the interface display method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0273] The embodiments of this application also provide a computer device, which includes a processor and a memory. The memory stores at least one instruction, at least one program, code set, or instruction set. The at least one instruction, at least one program, code set, or instruction set is loaded and executed by the processor to implement the interface display method provided in the above-described method embodiments.

[0274] Optionally, the computer device is a terminal. For example, Figure 15 This is a schematic diagram of the structure of a terminal provided in an exemplary embodiment of this application.

[0275] Typically, terminal 1500 includes a processor 1501 and a memory 1502.

[0276] Processor 1501 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1501 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 1501 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1501 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 1501 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0277] The memory 1502 may include one or more computer-readable storage media, which may be non-transitory. The memory 1502 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1502 is used to store at least one instruction, which is executed by the processor 1501 to implement the interface display method provided in the method embodiments of this application.

[0278] In some embodiments, the terminal 1500 may also optionally include: a peripheral device interface 1503 and at least one peripheral device. The processor 1501, memory 1502, and peripheral device interface 1503 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 1503 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of: a radio frequency circuit 1504, a display screen 1505, a camera assembly 1506, an audio circuit 1507, and a power supply 1509.

[0279] Peripheral device interface 1503 can be used to connect at least one I / O (Input / Output) related peripheral device to processor 1501 and memory 1502. In some embodiments, processor 1501, memory 1502 and peripheral device interface 1503 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 1501, memory 1502 and peripheral device interface 1503 can be implemented on separate chips or circuit boards, and this application embodiment is not limited in this respect.

[0280] The radio frequency (RF) circuit 1504 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 1504 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 1504 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. Optionally, the RF circuit 1504 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, etc. The RF circuit 1504 can communicate with other terminals through at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and / or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 1504 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

[0281] Display screen 1505 is used to display a UI (User Interface, horizontal level interface). This UI may include graphics, text, icons, videos, and any combination thereof. When display screen 1505 is a touch display screen, it also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to processor 1501 for processing. In this case, display screen 1505 can also be used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one display screen 1505, which serves as the front panel of terminal 1500; in other embodiments, there may be at least two display screens 1505, respectively disposed on different surfaces of terminal 1500 or in a folded design; in still other embodiments, display screen 1505 may be a flexible display screen, disposed on a curved or folded surface of terminal 1500. Furthermore, display screen 1505 may also be configured as a non-rectangular, irregular shape, i.e., a non-rectangular screen. The display screen 1505 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0282] The camera assembly 1506 is used to acquire images or videos. Optionally, the camera assembly 1506 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is located on the front panel of the terminal 1500, and the rear-facing camera is located on the back of the terminal. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, a wide-angle camera, and a telephoto camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, panoramic shooting by fusion of the main camera and the wide-angle camera, VR (Virtual Reality) shooting, or other fusion shooting functions. In some embodiments, the camera assembly 1506 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm light flash and a cool light flash, which can be used for light compensation at different color temperatures.

[0283] The audio circuit 1507 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting the sound waves into electrical signals that are input to the processor 1501 for processing, or input to the radio frequency circuit 1504 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, each positioned at a different location on the terminal 1500. The microphone may also be an array microphone or an omnidirectional microphone. The speaker is used to convert electrical signals from the processor 1501 or the radio frequency circuit 1504 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, the audio circuit 1507 may also include a headphone jack.

[0284] Power supply 1509 is used to power the various components in terminal 1500. Power supply 1509 can be AC ​​power, DC power, a disposable battery, or a rechargeable battery. When power supply 1509 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, and a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0285] In some embodiments, the terminal 1500 further includes one or more sensors 1510. The one or more sensors 1510 include, but are not limited to: an acceleration sensor 1511, a gyroscope sensor 1512, a pressure sensor 1513, an optical sensor 1515, and a proximity sensor 1516.

[0286] Accelerometer 1511 can detect the magnitude of acceleration along the three axes of a coordinate system established by terminal 1500. For example, accelerometer 1511 can be used to detect the components of gravitational acceleration along the three axes. Processor 1501 can control touchscreen 1505 to display a landscape level interface in either a horizontal or vertical view based on the gravitational acceleration signal acquired by accelerometer 1511. Accelerometer 1511 can also be used for collecting game or user motion data.

[0287] The gyroscope sensor 1512 can detect the orientation and rotation angle of the terminal 1500. The gyroscope sensor 1512, in conjunction with the accelerometer sensor 1511, can collect 3D motion data from the user on the terminal 1500. Based on the data collected by the gyroscope sensor 1512, the processor 1501 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0288] The pressure sensor 1513 can be disposed on the side bezel of the terminal 1500 and / or on the lower layer of the touch display screen 1505. When the pressure sensor 1513 is disposed on the side bezel of the terminal 1500, it can detect the user's grip signal on the terminal 1500, and the processor 1501 can perform left / right hand recognition or quick operation based on the grip signal collected by the pressure sensor 1513. When the pressure sensor 1513 is disposed on the lower layer of the touch display screen 1505, the processor 1501 can control the operable controls on the UI interface based on the user's pressure operation on the touch display screen 1505. The operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

[0289] An optical sensor 1515 is used to collect ambient light intensity. In one embodiment, the processor 1501 can control the display brightness of the touch screen 1505 based on the ambient light intensity collected by the optical sensor 1515. Specifically, when the ambient light intensity is high, the display brightness of the touch screen 1505 is increased; when the ambient light intensity is low, the display brightness of the touch screen 1505 is decreased. In another embodiment, the processor 1501 can also dynamically adjust the shooting parameters of the camera assembly 1506 based on the ambient light intensity collected by the optical sensor 1515.

[0290] The proximity sensor 1516, also known as a distance sensor, is typically located on the front panel of the terminal 1500. The proximity sensor 1516 is used to detect the distance between the user and the front of the terminal 1500. In one embodiment, when the proximity sensor 1516 detects that the distance between the user and the front of the terminal 1500 is gradually decreasing, the processor 1501 controls the touchscreen display 1505 to switch from a screen-on state to a screen-off state; when the proximity sensor 1516 detects that the distance between the user and the front of the terminal 1500 is gradually increasing, the processor 1501 controls the touchscreen display 1505 to switch from a screen-off state to a screen-on state.

[0291] Those skilled in the art will understand that Figure 15 The structure shown does not constitute a limitation on terminal 1500 and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0292] This application also provides a computer-readable storage medium storing at least one piece of program code. When the program code is loaded and executed by the processor of a computer device, it implements the interface display method provided in the above-described method embodiments.

[0293] This application also provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the interface display methods provided in the above-described method embodiments.

[0294] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0295] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent switching, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A method for displaying an interface, characterized in that, The method includes: The user interface displays a collapsed tab display area with swiping content; the user interface also includes an information display area located below the tab display area. Receive a second sliding operation on the page display area in the folded state, wherein the sliding direction of the second sliding operation is from bottom to top; According to the second sliding operation, the displayed content is slid upward on the page display area which is in a folded state; Continue to receive the first sliding operation on the page display area, which is in a folded state; When the page display area is in a folded state and displays the bottommost content, and the sliding direction of the first sliding operation is from bottom to top, the page display area is switched from a folded state to an unfolded state according to the first sliding operation. In response to the page display area switching from a folded state to an unfolded state, the information display area with a reduced area is displayed on the user interface.

2. The method according to claim 1, characterized in that, The tab display area has a corresponding tab offset, which is used to indicate the degree of expansion of the tab display area; When the page display area in the folded state displays the bottommost content, and the sliding direction of the first sliding operation is from bottom to top, switching the page display area from the folded state to the unfolded state according to the first sliding operation includes: When the page display area is in a folded state and displays the bottommost content, and the sliding direction of the first sliding operation is from bottom to top, the page offset is adjusted from the second page offset to the first page offset, and the page display area in an unfolded state is displayed based on the first page offset.

3. The method according to claim 2, characterized in that, The step of adjusting the page card offset from the second page card offset to the first page card offset includes: At the start and end times of the first sliding operation, the page offset corresponding to the page display area is recorded respectively. In response to a change in the tab offset based on the first sliding operation exceeding a second change threshold, the tab offset is adjusted from the second tab offset to the first tab offset.

4. The method according to claim 1, characterized in that, The method further includes: Receive the first sliding operation on the expanded tab display area; When the topmost content is displayed in the expanded tab display area, and the sliding direction of the first sliding operation is from top to bottom, the tab display area is switched from the expanded state to the collapsed state according to the first sliding operation.

5. The method according to claim 4, characterized in that, When the topmost content is displayed in the unfolded tab display area, and the sliding direction of the first sliding operation is from top to bottom, switching the tab display area from the unfolded state to the folded state according to the first sliding operation includes: When the topmost content is displayed in the expanded tab display area, and the sliding direction of the first sliding operation is from top to bottom, the tab offset of the tab display area is adjusted from the first tab offset to the second tab offset, and the tab display area in the folded state is displayed based on the second tab offset.

6. The method according to claim 5, characterized in that, The step of adjusting the page card offset of the page card display area from the first page card offset to the second page card offset includes: At the start and end times of the first sliding operation, the page offset corresponding to the page display area is recorded respectively. In response to a change in the tab offset based on the first sliding operation exceeding a first change threshold, the tab offset is adjusted from the first tab offset to the second tab offset.

7. The method according to any one of claims 1 to 6, characterized in that, The method further includes: Obtain the content offset corresponding to the displayed content, and the content offset is used to identify the sliding of the displayed content in the page display area; Based on the content offset, it is determined that the displayed content of the tab display area has slid to the end. The display content of the tab display area has slid to the end, which includes: the displayed content sliding to the top of the tab display area; or, the displayed content sliding to the bottom of the tab display area.

8. The method according to any one of claims 1 to 6, characterized in that, The method further includes: If the content displayed in the tab display area has not been slid to the end, the slid content is displayed on the tab display area according to the first sliding operation.

9. The method according to any one of claims 1 to 6, characterized in that, The method further includes: In response to the tab display area switching from an expanded state to a collapsed state, the information display area on the user interface is increased in size.

10. The method according to claim 9, characterized in that, The information display area on the user interface, which is the increased area in response to the tab display area switching from an expanded state to a collapsed state, includes: In response to the page display area switching from an expanded state to a folded state, the area of ​​the increased information display area is determined; The information display area, whose content is updated based on the increased area, is displayed on the user interface. The information display area on the user interface, after its area has been reduced, in response to the page display area switching from a folded state to an unfolded state, includes: In response to the page display area switching from a folded state to an unfolded state, the area of ​​the reduced information display area is determined; The information display area on the user interface is updated with content based on the reduced area size.

11. The method according to any one of claims 1 to 6, characterized in that, The user interface also includes an information display area located below the tab display area. The information display area includes information identifiers, and the content displayed in the tab display area includes a list of content items corresponding to the information identifiers. The method further includes: Receive a first selection operation for the information identifier; update the display content of the page display area according to the first selection operation; or, Receive a second selection operation for the content list item; based on the second selection operation, highlight the information identifier corresponding to the content list item selected by the second selection operation in the information display area.

12. The method according to claim 11, characterized in that, The step of updating the display content of the tab display area according to the first selection operation includes: In the tab display area, the content list item corresponding to the information identifier selected by the first selection operation is highlighted; or, Scroll through the content displayed in the tab display area until the content displayed in the tab display area includes the content list item corresponding to the information identifier selected in the first selection operation, and highlight the content list item.

13. An interface display device, characterized in that, The device includes: The display module is used to display a folded tab display area on the user interface, the tab display area displaying slidable content; the user interface also includes an information display area located below the tab display area; A receiving module is configured to receive a second sliding operation on the page display area in a folded state, wherein the sliding direction of the second sliding operation is from bottom to top; The display module is configured to slide the displayed content upward on the page display area, which is in a folded state, according to the second sliding operation; The receiving module is used to continue receiving the first sliding operation on the page display area when it is in a folded state; The switching module is used to switch the page display area from the folded state to the unfolded state according to the first sliding operation when the bottom content is displayed in the page display area in the folded state and the sliding direction of the first sliding operation is from bottom to top. The display module is used to display the information display area on the user interface after the area has been reduced in response to the page display area switching from a folded state to an unfolded state.

14. A computer device, characterized in that, The computer device includes a processor and a memory, the memory storing at least one program, which is loaded and executed by the processor to implement the interface display method as described in any one of claims 1 to 12.

15. A computer-readable storage medium, characterized in that, The readable storage medium stores at least one program segment, which is loaded and executed by a processor to implement the interface display method as described in any one of claims 1 to 12.

Images