CN115639937A

CN115639937A - Interface display method and device, computer equipment and storage medium

Info

Publication number: CN115639937A
Application number: CN202110814931.5A
Authority: CN
Inventors: 李向前; 杜宜彤; 龙东恒
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2021-07-19
Filing date: 2021-07-19
Publication date: 2023-01-24

Abstract

The application discloses an interface display method, an interface display 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, wherein the page card display area is in an unfolding state or a folding state, and slidable display content is displayed on the page card display area; receiving a first sliding operation triggered on the page card display area; switching the page display area between the expanded state and the folded state according to the first sliding operation in a case where the display content of the page display area has slid to an end. The interface display method provided by the embodiment of the application is more suitable for the natural flow of user sliding interaction, and the efficiency of man-machine interaction is improved. The interface display method provided by the embodiment of the application can be applied to the interface display process of the map application program.

Description

Interface display method and device, computer equipment and storage medium

Technical Field

The present application relates to the field of software technologies, and in particular, to an interface display method and apparatus, a computer device, and a storage medium.

Background

With the development of internet technology, a terminal supports installation of a map application to meet the requirement of a user on navigation.

The map interface comprises a split page card state switching hot area and a page card display area. The user triggers in the page card state switching hot area, so as to switch the page card state corresponding to the page card display area, such as: and switching the page card display area from a folded state to an unfolded state, or switching the page card display area from the unfolded state to the folded state.

The page card state switching hot area generally occupies a small area on the map interface, and based on the page card state switching mode provided by the technical scheme, a user needs to accurately move the gesture to the page card state switching hot area for triggering, so that the human-computer interaction efficiency is low.

Disclosure of Invention

The application provides an interface display method, an interface display device, computer equipment and a storage medium, which are more suitable for the natural flow of user sliding interaction and improve the efficiency of man-machine interaction. The technical scheme is as follows:

according to an aspect of the present application, there is provided an interface display method, the method including:

displaying a page card display area on a user interface, wherein the page card display area is in an unfolding state or a folding state, and slidable display content is displayed on the page card display area;

receiving a first sliding operation triggered on the page card display area;

switching the page card display area between the expanded state and the folded state according to the first sliding operation when the display content of the page card display area has slid to the end.

According to another aspect of the present application, there is provided an interface display apparatus, the apparatus including:

the display module is used for displaying a page card display area on a user interface, the page card display area is in an expanded state or a folded state, and slidable display content is displayed on the page card display area;

the receiving module is used for receiving a first sliding operation triggered on the page card display area;

and the switching module is used for switching the page card display area between the unfolding state and the folding state according to the first sliding operation under the condition that the display content of the page card display area slides to the tail end.

According to another aspect of the present application, there is provided a computer device comprising a processor and a memory, the memory having stored therein at least one instruction, at least one program, set of codes, or set of instructions, which is loaded and executed by the processor to implement the interface display method as described above.

According to another aspect of the present application, there is provided a computer readable storage medium having stored therein at least one instruction, at least one program, set of codes, or set of instructions that is loaded and executed by a processor to implement the interface display method as described above.

According to another aspect of the application, a computer program product or computer program is provided, comprising computer instructions stored in a computer readable storage medium. The computer instructions are read by a processor of the computer device from a computer-readable storage medium, and the computer instructions are executed by the processor to cause the computer device to perform the interface display method provided in the various alternative implementations of the above aspects.

The beneficial effect that technical scheme that this application provided brought includes at least:

when the display content in the page card display area slides to the tail end, if the user continues to slide in the page card display area, the unfolding state or the folding state of the page card display area can be switched directly and smoothly, the user does not need to switch the gesture to a special page card state switching hot area for triggering, so that the natural flow of user sliding interaction is more fitted, and the human-computer interaction efficiency is improved.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.

FIG. 1 is a block diagram of an implementation environment provided by an exemplary embodiment of the present application;

FIG. 2 is a schematic flow chart diagram of an interface display method provided in an exemplary embodiment of the present application;

FIG. 3 is a schematic diagram of display content sliding within a page card display area as provided by an exemplary embodiment of the present application;

FIG. 4 is a schematic illustration of display content sliding within a page card display area as provided by an exemplary embodiment of the present application;

FIG. 5 is a schematic diagram of a page card display area being switched from an unfolded state to a folded state as provided by an exemplary embodiment of the present application;

FIG. 6 is a schematic view of a page card display area being switched from a collapsed state to an expanded state as provided by an exemplary embodiment of the present application;

FIG. 7 is a flowchart illustrating an interface display method provided by an exemplary embodiment of the present application;

FIG. 8 is a flowchart illustrating an interface display method provided by an exemplary embodiment of the present application;

FIG. 9 is a flowchart illustrating an interface display method provided in an exemplary embodiment of the present application;

FIG. 10 is a schematic illustration of an information display area displayed in conjunction with display content on a page card display area as provided by an exemplary embodiment of the present application;

FIG. 11 is a schematic diagram of an information display area displayed in conjunction with display content on a page card display area provided by an exemplary embodiment of the present application;

FIG. 12 is a flowchart illustrating an interface display method provided by an exemplary embodiment of the present application;

FIG. 13 is a flowchart illustrating an interface display method provided by an exemplary embodiment of the present application;

FIG. 14 is a schematic structural diagram of an interface display apparatus provided in an exemplary embodiment of the present application;

fig. 15 is a schematic structural diagram of a terminal according to an exemplary embodiment of the present application.

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and together with the description, serve to explain the principles of the application.

Detailed Description

To make the objects, technical solutions and advantages of the present application more clear, the following detailed description of the embodiments of the present application will be made with reference to the accompanying drawings.

First, terms referred to in the embodiments of the present application will be described:

page card display area: is a display area on the user interface that is displayed based on the page card slide view.

In the embodiment of the present application, the page card display area includes: a folded state and an unfolded state. The area of the page card display area in the folded state is larger than that of the page card display area in the unfolded state. It is understood that, in the embodiments of the present application, only two page card states, that is, the page card display region includes the folded state and the unfolded state, may also include 3 or more page card states, and the area of the page card display region in different page card states is different.

In the embodiment of the application, slidable display content is displayed on the page card display area. Illustratively, displaying the content includes: one or more content list items, each content list item including a set of associated display content information. For example, when a user performs a sliding operation on the page card display area, the sliding operation may trigger the display content to slide in the page card display area, so that different portions of the display content are displayed in the page card display area.

Page card offset: the page card display area expansion degree is the offset corresponding to the page card display area, and the page card offset is used for identifying the expansion degree of the page card display area.

Illustratively, the terminal determines the page card offset corresponding to the page card display area based on the position of the top of the page card display area in the longitudinal axis direction. Illustratively, the position of the bottom of the page card display area in the longitudinal axis direction is fixed, and the position is a, and if the position of the top of the page card display area in the longitudinal axis direction is b, the page card offset is b-a; and if the position of the top of the page card display area in the longitudinal axis direction is c, the page card offset is c-a, and a, b and c are positive numbers.

Content offset amount: the offset corresponding to the display content on the page card display area is used for identifying the sliding condition of the display content in the page card display area.

Illustratively, the terminal determines the current content offset based on the display content displayed at the bottom of the page card display area. Illustratively, the display content is 10 content list items, and if the display content displayed at the bottom of the page card display area is the 10 th content list item, the content offset is 0; if the display content displayed at the bottom of the page card display area is the 5 th content list item, the content offset is a value determined based on the distance between the 5 th content list item and the 10 th content list item.

Optimal view of the map: refers to the most comfortable viewing angle that the user corresponds to when viewing the relevant elements on the map during use of the map. Optimal view of a map involves adjusting a center point of the map and a visible range of map elements.

Terminal sub-point recommendation page: the page is used for recommending the terminal sub-points for the terminal points of a plurality of terminal sub-points (such as parking lots, eastern doors and western doors) in parks, airports and the like.

Illustratively, the end point sub-point recommendation page includes end point recommendation bubbles corresponding to each end point sub-point; and after clicking the terminal point recommending bubble, the user enters a terminal point sub-point recommending function.

Mark point (Marker): in a map-like application, a marker point may refer to a specific location point in a map area set by an application service provider or a user.

For example, the mark point may be a position point recommended by a map application service provider for the user, such as: and at least one access corresponding to the terminal point inquired by the user. Alternatively, the mark point may be a position point marked on the map by the current user.

In the embodiment of the application, when the display content in the page card display area slides to the tail end, if the user continues to slide in the page card display area, the expansion state or the folding state of the page card display area can be directly and smoothly switched, and the user does not need to transfer the gesture to a special page card state switching hot area for triggering, so that the natural flow of user sliding interaction is more fitted, and the efficiency of man-machine interaction is improved.

The technical solutions provided in the embodiments of the present application are exemplarily described below based on the following embodiments.

Referring to fig. 1, a schematic diagram of an implementation environment provided by an exemplary embodiment of the present application is shown. The implementation environment may be implemented as a system architecture for a map-like application. The implementation environment may include a terminal 102 and a server 104.

The number of the terminals 102 is usually multiple, and the terminals 102 may be electronic devices such as a mobile phone, a desktop computer, a tablet computer, a game console, an electronic book reader, a multimedia playing device, a wearable device MP3 player (Moving Picture Experts Group Audio Layer III, motion Picture Experts compression standard Audio Layer 3), an MP4 player (Moving Picture Experts Group Audio Layer IV, motion Picture Experts compression standard Audio Layer 4), and a laptop computer. A client running a map-like application may be installed in the terminal 102. Map-like applications typically provide users with services for map browsing, location queries, route navigation, and the like. The "map application" referred to in the present application refers to an application including a map function, and includes, for example: the application program provides services of map browsing, place inquiry, route navigation, position positioning and the like. In addition, the form of the application program is not limited in the present application, for example, the application program may be a dedicated map-like application program, and may also be other types of application programs having the above functions, such as an instant messaging application program, a social contact application program, and the like, and the form of the application program includes, but is not limited to, an app (application), an applet, and the like installed in a terminal (such as a handheld terminal, a vehicle-mounted terminal, a portable computer, and the like).

In addition, the terminal 102 is equipped with a display screen (also referred to as a screen) through which a user interface is displayed. Optionally, the display screen is a touch display screen and can respond to a touch operation of a user.

The server 104 may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server providing a cloud computing service. The server 104 may be a background server of the map application program, and is configured to provide a background service for a client of the map application program.

The terminal 102 and the server 104 may communicate with each other via a network, such as a wireless network.

Fig. 2 is a flowchart illustrating an interface display method provided in an exemplary embodiment of the present application, which may be applied to the terminal shown in fig. 1, and which may include (step 202 to step 206):

step 202: and displaying a page card display area on the user interface, wherein the page card display area is in an unfolding state or a folding state, and slidable display content is displayed on the page card display area.

The user interface is an interface corresponding to the application program, and the user interface can be a home page of the application program, or other pages to which the home page jumps after the user performs a trigger operation in the application program.

The page card display area is a display area on the user interface. Illustratively, the page card display area is displayed based on a page card sliding view, and the page card sliding view is mainly used for realizing the function of sliding the display content. Illustratively, the page card display area occupies part or all of the user interface.

In the embodiment of the present application, the page card display area includes two page states: the page card display device comprises an unfolding state and a folding state, wherein the area of a page card display area in the folding state is larger than that of the page card display area in the unfolding state. Illustratively, the length of the longitudinal axis of the page card display area in the unfolded state is greater than the length of the longitudinal axis of the page card display area in the folded state.

The display content is displayed in the page card display area, and the display content is slidable in the page card display area. Illustratively, the display content is displayed based on a content display view, which is primarily used for information presentation. Illustratively, the content display view is a sub-view of the page slide view, and the display of the display content is adjusted based on switching between the expanded state and the collapsed state of the page display area.

Illustratively, the display content may slide to the top-most portion within the page card display area with no more display content above the top-most portion, or the display content may slide to the bottom-most portion within the page card display area with no more display content below the bottom-most portion.

With reference to fig. 3 in combination, the page display area 301 is in an expanded state, and the display content is slidable in the page display area 301, as shown in (a) in fig. 3, the user may slide from bottom to top, that is, the sliding direction is from bottom to top, so as to slide the display content to the bottommost portion in the page display area 301, where the bottommost display content is a content list item 302 related to north two doors; as shown in fig. 3 (b), the user may slide from top to bottom, i.e., the sliding direction is from top to bottom, thereby sliding the display content to the topmost portion within the page card display area 301, which is the north gate related content list item 303.

With reference to fig. 4, the page display area 401 is in a folded state, and the display content is slidable in the page display area 401, as shown in (a) in fig. 4, the page display area 401 displays the display content that has slid to the topmost part, and the topmost display content is a content list item 402 related to north gate; as shown in fig. 4 (b), the user may slide from bottom to top, i.e., the sliding direction is from bottom to top, thereby pulling up the display content in the page card display area 401; as shown in fig. 4 (c), the display content that has slid to the bottommost portion is displayed in the page card display area 401, and the bottommost portion is a content list item 403 related to north two doors.

Illustratively, the user interface is a map interface corresponding to a map application program, and the display content on the page card display area is related information of each place.

Step 204: a first sliding operation triggered on a page card display area is received.

The first slide operation is a slide operation applied by the user on the page card display area. Illustratively, the first sliding operation is a sliding operation in a longitudinal axis direction, such as: a sliding operation from top to bottom, or a sliding operation from bottom to top.

Step 206: in a case where the display contents of the page card display area have slid to the end, the page card display area is switched between the expanded state and the folded state according to a first sliding operation.

That is, at the time point when the first sliding operation is received, if the display content of the page card display area has slid to the end, the terminal switches the page card display area from the expanded state to the folded state or switches the page card display area from the folded state to the expanded state based on the first sliding operation.

Wherein the end refers to the topmost or bottommost portion of the content of the display content itself. The display content of the page card display area having slid to the end includes: the display content slides to the top in the page card display area; alternatively, the display content slides to the bottommost portion within the page card display area.

In summary, according to the method provided in this embodiment, when the display content in the page card display area has slid to the end, if the user continues to slide in the page card display area, the expansion state or the folding state of the page card display area is directly and smoothly switched, and the user does not need to turn the gesture to a special page card state switching hot area for triggering, so that the natural flow of user sliding interaction is better fitted, and the efficiency of human-computer interaction is improved.

In an exemplary embodiment, switching the page card display area between the unfolded state and the folded state includes two possible implementations:

the implementation method is as follows:

and under the condition that the page card display area in the unfolding state displays the topmost display content and the sliding direction of the first sliding operation is from the top to the bottom, the terminal switches the page card display area from the unfolding state to the folding state according to the first sliding operation.

That is, since the sliding direction of the first sliding operation is directed from the top to the bottom, corresponding to the display content being pulled down continuously, at the time point when the first sliding operation is received, if the display content of the page card display area in the expanded state has slid to the topmost portion, the display content cannot be pulled down continuously based on the first sliding operation, so that the purpose of the first sliding operation applied by the user is to switch the page card state of the page card display area, and the terminal switches the page card display area from the expanded state to the folded state based on the first sliding operation.

Exemplarily, referring to fig. 5 in combination, as shown in (a) of fig. 5, the page card display area 501 is in an expanded state, display content that has slid to the topmost portion is displayed in the page card display area 501, and the topmost display content is a content list item 502 related to north gate; as shown in fig. 5 (b), the user may slide from top to bottom, that is, the sliding direction is from top to bottom, and since the display content that has slid to the top is displayed in the page card display area 501, the page card display area 501 is driven to slide downward based on the sliding operation; as shown in fig. 5 (c), the user releases the gesture, and the page card display area 501 is switched from the expanded state to the collapsed state.

The implementation mode two is as follows:

and under the condition that the page card display area in the folded state displays the bottommost display content and the sliding direction of the first sliding operation is from the bottom to the top, the terminal switches the page card display area from the folded state to the unfolded state according to the first sliding operation.

That is, since the sliding direction of the first sliding operation is directed from the bottom to the top, corresponding to the display content being continuously pulled up, at the time point when the first sliding operation is received, if the display content of the page card display area in the folded state has slid to the bottommost portion, the display content cannot be continuously pulled up based on the first sliding operation, so that the purpose of the user applying the first sliding operation is to switch the page card state of the page card display area, and the terminal correspondingly switches the page card display area from the folded state to the unfolded state based on the first sliding operation.

Exemplarily, referring to fig. 6 in combination, as shown in (a) of fig. 6, the page card display area 601 is in a folded state, display contents that have slid to the bottommost portion are displayed in the page card display area 601, and the bottommost portion is a content list item 602 related to north two doors; as shown in fig. 6 (b), the user may slide from bottom to top, that is, the sliding direction is from bottom to top, and since the display content that has slid to the bottommost portion is displayed in the page card display area 601, the page card display area 601 is driven to slide upwards based on the sliding operation; as shown in fig. 6 (c), the user releases the gesture, and the page card display area 601 is switched from the folded state to the unfolded state.

In an exemplary embodiment, the adjustment of the page card status of the page card display area is implemented based on the page card offset.

Fig. 7 is a flowchart illustrating an interface display method provided in an exemplary embodiment of the present application, which may be applied to the terminal shown in fig. 1, and which may include (steps 702 to 708):

step 702: and displaying a page card display area on the user interface, wherein the page card display area is in an unfolding state or a folding state, and slidable display content is displayed on the page card display area.

Step 704: a first sliding operation triggered on a page card display area is received.

In a possible implementation manner, before step 704, the terminal receives a second sliding operation triggered on the page card display area, where the second sliding operation has the same sliding direction as the first sliding operation; and the terminal displays the sliding display content on the page card display area according to the second sliding operation.

The second slide operation is a slide operation applied by the user on the page card display area before the first slide operation is applied. Illustratively, the second sliding operation is a sliding operation in a longitudinal axis direction, such as: a sliding operation from top to bottom, or a sliding operation from bottom to top.

Illustratively, the sliding direction of the second sliding operation is from top to bottom, corresponding to the display content being further pulled down, at the time point when the second sliding operation is received, if the display content of the page card display area has not been slid to the topmost part, so the user applies the second sliding operation for the purpose of sliding the display content on the page card display area, the terminal correspondingly continues to pull down the display content based on the second sliding operation until the display content is slid to the topmost part based on the second sliding operation. After that, if the sliding direction of the received first sliding operation is also from top to bottom, the terminal correspondingly switches the page card display area from the unfolded state to the folded state based on the first sliding operation.

Illustratively, the sliding direction of the second sliding operation is from bottom to top, corresponding to the display content being continuously pulled up, at the time point when the second sliding operation is received, if the display content of the page card display area has not been slid to the bottommost part, so the user applies the second sliding operation for the purpose of sliding the display content on the page card display area, the terminal correspondingly continues to pull up the display content based on the second sliding operation until the display content is slid to the bottommost part based on the second sliding operation. After that, if the sliding direction of the received first sliding operation is also from the bottom to the top, the terminal correspondingly switches the page card display area from the folded state to the unfolded state based on the first sliding operation.

In another possible implementation manner, before step 706 or step 708, in a case where the display content of the page card display area is not slid to the end, the terminal displays the slid display content on the page card display area according to the first sliding operation.

In one example, the terminal receives a first sliding operation triggered on a page card display area based on a touch event. Each touch event includes a type of touch event and coordinates of the touch event. The types of touch events include: touch down, touch move, touch up. An exemplary "first sliding operation" corresponds to: one touch down event, multiple touch move events, one touch off event. The coordinates in each touch event are connected in sequence to form a sliding track of the first sliding operation. The terminal slides the display content on the page card display area until the display content slides to the tail end based on the partial touch movement event with the front time domain position in the first sliding operation, and then switches the page card display area between the unfolding state and the folding state based on the partial touch movement event with the rear time domain position in the first sliding operation.

Generally, in the process of browsing information in the page card display area, the user slides and browses the display content in the page card display area through the up-and-down sliding of the gesture. The method specifically comprises the following steps:

1. when the display content reaches the top (i.e. no more information can be displayed by sliding down), the user continues to pull down by the sliding operation, and the page card display area is changed from the unfolded state to the folded state.

2. When the display content reaches the bottommost part (namely, the user cannot display more information by sliding upwards), the user continues to pull up through the sliding operation, the page card display area is changed from the folded state to the unfolded state, the user is clearly informed that the data is completely loaded, and more display content is shown for the user.

Step 706: and under the condition that the page card display area in the unfolded state displays the topmost display content and the sliding direction of the first sliding operation is from the top to the bottom, adjusting the page card offset from the first page card offset to a second page card offset, and displaying the page card display area in the folded state based on the second page card offset.

The page card display area corresponds to a page card offset, and the page card offset is used for identifying the expansion degree of the page card display area. Illustratively, the terminal determines the page card offset corresponding to the page card display area based on the position of the top of the page card display area in the longitudinal axis direction.

The first page card offset corresponds to an unfolded state, and the second page card offset corresponds to a folded state.

Optionally, adjusting the page offset from the first page offset to the second page offset includes:

recording page card offset corresponding to a page card display area at the starting time point and the ending time point of the first sliding operation respectively; in response to the change value of the page card offset amount, which is changed based on the first sliding operation, being greater than the first change threshold value, the page card offset amount is adjusted from the first page card offset amount to the second page card offset amount.

Illustratively, at the starting time point of the first sliding operation, the page card offset corresponding to the page card display arease:Sub>A is ase:Sub>A, at the ending time point of the first sliding operation, the page card offset corresponding to the page card display arease:Sub>A is B based on the driving of the first sliding operation, if the absolute value of B-ase:Sub>A is greater than ase:Sub>A first change threshold, the terminal adjusts the page card offset from the first page card offset to ase:Sub>A second page card offset, where ase:Sub>A and B are both positive numbers.

Step 708: and under the condition that the page card display area in the folded state displays the bottommost display content and the sliding direction of the first sliding operation points from the bottom to the top, adjusting the page card offset from the second page card offset to the first page card offset, and displaying the page card display area in the unfolded state based on the first page card offset.

Optionally, adjusting the page card offset from the second page card offset to the first page card offset includes:

recording page card offset corresponding to a page card display area at the starting time point and the ending time point of the first sliding operation respectively; in response to the change value of the page card offset amount, which is changed based on the first sliding operation, being greater than the second change threshold value, the page card offset amount is adjusted from the second page card offset amount to the first page card offset amount.

Illustratively, at the starting time point of the first sliding operation, the page card offset corresponding to the page card display area is C, based on the driving of the first sliding operation, at the ending time point of the first sliding operation, the page card offset corresponding to the page card display area is D, if the value of D-C is greater than the second change threshold, the terminal adjusts the page card offset from the second page card offset to the first page card offset, where C and D are both positive numbers.

That is, the change value of the page card offset amount is determined based on two time points, the start time point and the end time point of the first sliding operation by the user, thereby processing some judgment logic related to switching of the page card display area between the expanded state and the collapsed state. Illustratively, the decision logic comprises: the method comprises the steps of processing gesture conflicts of page card display area switching and display content sliding, judging whether page card states are switched or not, and limiting page card offset when the page card display area is in a folded state and an unfolded state.

Compared with the traditional technical implementation scheme, the judgment logic is processed every time the offset of the page card display area or the display content is changed, and the trigger frequency of the change of the offset is very high, so the frequency of the judgment logic processing is high. Based on the technical scheme provided by the application, the logics are not processed when the page card offset is changed, but are dispersed into two occasions of triggering and completely finishing the sliding gesture of the user. Therefore, the frequency of judging logic processing is greatly reduced, and the logic execution efficiency of page card state switching is improved.

Optionally, the first change threshold is greater than the second change threshold, the first change threshold is a change threshold corresponding to a case where the first page offset is switched and adjusted to the second page offset, and the second change threshold is a change threshold corresponding to a case where the second page offset is switched and adjusted to the first page offset.

In terms of the sliding gesture operation habit, the range of the upward sliding of the user is generally smaller than the range of the downward sliding, and since the upward sliding corresponds to switching the page display area from the folded state to the unfolded state (i.e. the second page offset is switched and adjusted to the first page offset), and the downward sliding corresponds to switching the page display area from the unfolded state to the folded state (i.e. the first page offset is switched and adjusted to the second page offset), the first change threshold is larger than the second change threshold in order to meet the sliding gesture operation habit.

Optionally, before step 706 or step 708 as above, whether the display content of the page card display area has slid to the end is determined based on:

the terminal acquires a content offset corresponding to the display content, wherein the content offset is used for identifying the sliding condition of the display content in a page card display area; the terminal determines that the display content of the page card display area has slid to the end based on the content offset.

Optionally, in a case that the content offset is a preset value, the terminal determines that the display content of the page card display area has slid to the end. Illustratively, the terminal determines a current content offset based on the display content displayed at the bottom of the page card display area. Illustratively, the value range of the content offset is [0, X ], X is a positive number, and if the content offset is 0, it indicates that the display content of the page card display area has slid to the bottommost part; if the content offset is X, the display content of the page card display area is indicated to slide to the top.

Optionally, in the process of adjusting the page offset based on the first sliding operation, a view sliding animation is displayed on the user interface. And recording the corresponding page card offset when the view sliding animation is finished as a page card target offset.

Illustratively, the offset of the page card target is limited to ensure that when the height of the page card display area operated by a user gesture exceeds the maximum or minimum value, the falling-back effect of the view sliding animation spring type can be realized. Illustratively, the page card target offset is limited to max (min (page card target offset, m), n). Wherein m is the page card offset of the page card display area in the unfolded state, and n is the page card offset of the page card display area in the folded state.

Compared with the traditional technical implementation scheme, when the height of the page card display area operated by the user gesture exceeds the maximum or minimum value, the height of the page card display area can only be fixed to be the maximum or minimum value, the falling effect that part of the view sliding animation rebounds to the standard position of the page card is forbidden, and the user experience is damaged. Based on the technical scheme provided by the application, the offset of the page card target is limited to ensure that when the height of the user gesture operation page card display area exceeds the maximum value or the minimum value, the falling-back effect of the view sliding animation spring type can be realized, the smooth animation display effect can be more fitted with the user gesture, the gesture feedback effect is enhanced, and the user experience is improved.

Meanwhile, before receiving a first sliding operation for switching the page card state, the method provided by the embodiment receives a second sliding operation with the sliding direction being the same as that of the first sliding operation, so as to slide the display content on the page card display area to the tail end, and thus, through continuous gesture recognition, the effect of smoothly folding or unfolding the page card display area can be realized, so that the switching of the page card state is quickly completed, unnecessary operations of a user are reduced, and the convenience of switching the page card state is improved.

Meanwhile, according to the method provided by the embodiment, the display content on the page card display area is slid to the tail end based on the first sliding operation, and then the page card display area is switched between the unfolding state and the folding state, so that the effect of smoothly folding or unfolding the page card display area can be realized through continuous gesture recognition, the switching of the page card state is quickly completed, unnecessary operations of a user are reduced, and the convenience of switching the page card state is improved.

Meanwhile, according to the method provided by the embodiment, the adjustment of the page card state of the page card display area is realized based on the page card offset, so that the terminal can accurately adjust the page card state.

Meanwhile, the method provided by the embodiment disperses the processing of the judgment logic corresponding to the page card state adjustment to two occasions of triggering and completely finishing the sliding gesture of the user, and compared with the technical scheme of processing the judgment logic when the page card offset changes, the method reduces the frequency of judging the logic processing and improves the logic execution efficiency of switching the page card state.

Meanwhile, the method provided by this embodiment determines whether the display content slides to the bottom or the top by acquiring the content offset corresponding to the display content, and helps the terminal determine whether the page card state of the page card display area should be adjusted based on the first touch operation, thereby avoiding a false adjustment of the page card state.

In an exemplary embodiment, the user interface further includes an information display area located below the page card display area, and the information display area adjusts display based on a change in a page card status of the page card display area.

Fig. 8 is a flowchart illustrating an interface display method provided in an exemplary embodiment of the present application, where the method may be applied to a terminal as shown in fig. 1, and the method may include (steps 802 to 810):

step 802: and displaying a page card display area on the user interface, wherein the page card display area is in an unfolding state or a folding state, and slidable display content is displayed on the page card display area.

Step 804: a first sliding operation triggered on a page card display area is received.

Step 806: in a case where the display contents of the page display area have slid to the end, the page display area is switched between the expanded state and the folded state according to a first sliding operation.

Step 808: and in response to the page card display area being switched from the unfolded state to the folded state, displaying the information display area with the area increased on the user interface.

Optionally, in response to the page card display area being switched from the unfolded state to the folded state, the terminal determines an increased area of the information display area; the terminal displays an information display region on the user interface that updates the display content based on the increased region area.

Illustratively, the information display area is a map area, and when the page card display area is switched from the unfolded state to the folded state, the area of the map area is correspondingly increased, and the display content of the map area is adjusted in time, so that the display content of the map area conforms to the optimal view field of the map corresponding to the increased area of the map. Referring to fig. 5 in combination, in the case where the page card display area 501 is switched from the expanded state to the folded state, the area of the map area 503 becomes large, and the display contents of the map area 503 correspond to the optimal view field of the map both before and after the switching.

Step 810: and in response to the page card display area being switched from the folded state to the unfolded state, displaying the information display area with the area reduced on the user interface.

Optionally, in response to the page card display area being switched from the folded state to the unfolded state, the terminal determines a reduced area of the information display area; the terminal displays an information display region on the user interface that updates the display content based on the reduced region area.

Illustratively, the information display area is a map area, and when the page card display area is switched from the folded state to the unfolded state, the area of the map area is correspondingly reduced, and the display content of the map area is adjusted in time, so that the display content of the map area conforms to the optimal view of the map corresponding to the reduced area. Referring to fig. 6 in combination, in the case where the page card display area 601 is switched from the folded state to the unfolded state, the area of the map area 603 is reduced, and the display content of the map area 603 corresponds to the optimal view of the map both before and after the switching.

Illustratively, in the embodiment of the present application, the user interface of the map application installed on the terminal includes the following 3 parts: a map area, a page card display area, and display contents on the page card display area. Next, these 3 parts are explained.

1) Map area

The map area is located at the bottom for the user interface for detailed explanation of the display contents on the page card display area in the form of an image.

Illustratively, the map area includes various types of map information and Marker points (Marker).

2) Page card display area

The display hierarchy of the page card display area is positioned above the map area, the page card display area supports sliding based on sliding operation, so that the page card state of the page card display area is changed, and the page card state comprises: a folded state and an unfolded state.

3) Displaying content

And displaying the display content in the page card display area. The page card sliding view corresponding to the page card display area exists as a root view of the content display view corresponding to the display content.

The display content supports presentation of an unlimited number of content listings, and the content listings support click interactions. Illustratively, a content list item in the display content is used for showing relevant information of a mark point in a map area.

In the embodiment of the application, an association relationship exists among the map area, the page card display area and the display content on the page card display area. The change of the page card state corresponding to the page card display area influences the display of the map area and the display content on the user interface.

Illustratively, the user interface is an end point sub-point recommendation page, which is a page for recommending end point sub-points for an end point where a plurality of end point sub-points (such as a parking lot, an east door and a west door) exist in a park, an airport and the like; the map area comprises terminal recommended bubbles corresponding to each terminal sub-point; the display content comprises content list items corresponding to each terminal sub-point, and the content list items comprise: the name of the terminal sub-point, whether the terminal sub-point has a corresponding parking lot, the access mode supported by the terminal sub-point, the proportion of the terminal sub-point selected by the user among all the terminal sub-points of the terminal, the current distance of the terminal sub-point, and the like.

The page card state of the page card display area influences the number of displayed content list items in the display content and influences the display area of the map area. Such as: when the page card display area is folded, the display area of the map area is increased, and the content list items are reduced; otherwise, when the page card display area is expanded, the display area of the map area is reduced, and the exposure of the content list item is increased. The map area is displayed in a repeated map surface mode, the displayed content is displayed in a repeated text information mode, and two page card states of the page card display area respectively meet users with different use requirements.

In summary, according to the method provided in this embodiment, when the display content in the page display area has slid to the end, if the user continues to slide in the page display area, the expansion state or the folding state of the page display area is directly and smoothly switched, and the user does not need to turn the gesture to a special page state switching hot area for triggering, so that the method better fits the natural flow of user sliding interaction, and improves the efficiency of human-computer interaction.

Meanwhile, in the method provided by this embodiment, the user interface further includes an information display area located on a lower layer of the page card display area, and the information display area adjusts display based on a change in a page card state of the page card display area.

Meanwhile, in the method provided by the embodiment, when the area of the information display area is adjusted based on the page card state of the page card display area, the display content of the information display area is adaptively updated based on the adjusted area of the information display area, so that the influence on the display of the display content in the information display area due to the adjustment of the page card state is avoided.

In an exemplary embodiment, the user interface further includes an information display area located at a lower layer of the page card display area, and the information display area and the display content on the page card display area support linkage display.

Fig. 12 is a flowchart illustrating an interface display method provided in an exemplary embodiment of the present application, which may be applied to the terminal shown in fig. 1, and which may include (step 902 or step 904):

step 902: receiving a first selection operation aiming at the information identification; and updating the display content of the page card display area according to the first selection operation.

The information display area comprises an information identifier. Illustratively, the information identifier is an identifier provided by an application service provider in the information area and related to pictures or texts in the information area.

And the display content of the page card display area comprises a content list item corresponding to the information identifier. Illustratively, each content list item includes a set of display content information associated with an information identifier.

Illustratively, the information display area is a map area, the information identifier is a mark point in the map area, the display content of the page card display area includes a content list item corresponding to the mark point, and the content list item is used for displaying related information of the mark point. For example, the user can realize finer viewing of the position of the place by moving and zooming the map area, thereby helping the user to select the information identification based on the viewing result.

Illustratively, the information identifier corresponds to an interaction entry, and in a case of receiving a trigger operation on the interaction entry, the terminal determines to receive a first selection operation for the information identifier.

In a possible implementation manner, in the page card display area, a content list item corresponding to the information identifier selected by the first selection operation is highlighted.

Illustratively, the information display area is a map area, the information identifier is a mark point in the map area, and the display content of the page card display area includes a content list item corresponding to the mark point. As shown in fig. 10 (a), when a user clicks a clickable point (south gate) in the map area, the icon 1001 of the clickable point on the map area is changed into a conspicuous selected state, and at the same time, the page card display area synchronously updates the state of the displayed content, cancels the previously clicked content list item, re-selects the content list item 1002 related to south gate corresponding to the icon 1001, and highlights the content list item 1002.

In a possible implementation manner, the display content in the page card display area is scrolled until the display content in the page card display area includes a content list item corresponding to the information identifier selected by the first selection operation, and the content list item is highlighted.

Illustratively, the information display area is a map area, the information identifier is a mark point in the map area, and the display content of the page card display area includes a content list item corresponding to the mark point. As shown in fig. 10 (b), the icon 1001 on the original map area is in a selected state, when the user clicks a clickable point (north gate) in the map area, the icon 1003 of the clickable point on the map area is changed into a conspicuous selected state, the icon 1001 corresponding to the south gate is changed into an unselected state, and since the content list item corresponding to the icon 1003 is not currently within the visible range of the page card display area, the display content in the page card display area is scrolled, so that the content list item 1004 corresponding to the icon 1003 and related to the north gate appears within the visible range of the page card display area.

Step 904: receiving a second selection operation for the content list item; and according to the second selection operation, highlighting the information identification corresponding to the content list item selected by the second selection operation in the information display area.

The information display area comprises an information identifier, and the display content of the page card display area comprises a content list item corresponding to the information identifier.

Illustratively, the information display area is a map area, the information identifier is a mark point in the map area, the display content of the page card display area includes a content list item corresponding to the mark point, and the content list item is used for displaying relevant information of the mark point.

Illustratively, the content list item corresponds to an interaction entry, and the terminal determines to receive a second selection operation for the content list item when receiving a trigger operation for the interaction entry.

Illustratively, the information display area is a map area, the information identifier is a mark point in the map area, and the display content of the page card display area includes a content list item corresponding to the mark point. As shown in fig. 11, when the user clicks on the content list item 101 related to the south gate in the page card display area, the icon 1102 of the place on the map area becomes a conspicuous selected state.

It is understood that the

above steps

902 or 904 can be performed with the page card display area in the unfolded state or the folded state.

In summary, according to the method provided by this embodiment, the user interface further includes an information display area located on the lower layer of the page display area, and the display content on the information display area and the page display area supports linkage display, so that the information is displayed more comprehensively and more finely on the user interface, the user is helped to acquire the information more efficiently, and the experience effect of the user is improved.

Meanwhile, in the method provided by this embodiment, when the user selects the information identifier in the information display area, and thus the terminal adjusts the display content on the page card display area based on the selection of the user, since the display content includes a plurality of content list items, the display content on the page card display area is scrolled under the condition that the content list item corresponding to the information identifier selected by the user is not currently displayed in the page card display area until the content list item is included in the page card display area, thereby helping the user to more efficiently obtain the related information of the information identifier.

Based on the scheme described in the above embodiment, fig. 12 shows a method flowchart of an interface display method.

The terminal corresponding to this embodiment mainly includes the following service modules: the device comprises a map view module, a gesture management module, a page card sliding view module and a content display view module.

In the following, the functions of the service modules in the terminal are exemplarily described.

The map view module is mainly responsible for displaying map areas.

The gesture management module is mainly responsible for receiving and transmitting gesture operations of a user, such as: and (4) sliding operation.

The page card sliding view module is mainly responsible for switching the page card states corresponding to the page card display area.

The content display view module is mainly responsible for displaying display content on the page card display area.

Next, an exemplary method for switching the page card display area from the folded state to the unfolded state corresponding to the terminal having this configuration will be described. As shown in fig. 12, the method may include the steps of:

in step 1201, the user slides the page card display area to a folded state.

In step 1202, the gesture management module receives a sliding operation of a user sliding the display content from bottom to top.

In step 1203, the gesture management module determines whether the touch event can continue to be passed to the page card sliding view module.

In step 1204, in a case where the display content does not slide to the bottom, linkage between the page card slide view module and the content display view module is not allowed.

In step 1205, the content display view module slides the display content to the bottom based on the indication of the gesture management module.

In step 1206, the gesture management module continues to receive a sliding operation of the user sliding the display content from bottom to top.

In step 1207, the gesture management module determines whether the touch event can continue to be passed to the page card sliding view module.

In step 1208, in the event that the display content has slid to the bottom, linkage between the page slide view module and the content display view module is allowed.

For example, in the above steps 1203 and 1204 (or steps 1207 and 1208), whether the display content slides to the bottom is determined by acquiring the content offset corresponding to the content display view.

Illustratively, the page card display area is in a collapsed state, and when the display content has slid to the bottom, the user's swipe gesture may continue to be passed through to the page card swipe view module, ready for the logic determination to switch the page card state in steps 1209-1220.

In step 1209, the user is about to begin a swipe gesture.

Illustratively, at a point in time when the user is about to initiate a swipe gesture, the page card swipe view module records the current page card offset.

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

In step 1211, the page card sliding view module limits the page card target offset.

During operation of a swipe gesture by the user, the page card swipe view module displays a view swipe animation.

And the page card target offset is the corresponding page card offset when the view sliding animation is finished. And limiting the offset of the page card target to ensure that when the height of the page card display area operated by the user gesture exceeds the maximum or minimum value, the spring type falling-back effect of the sliding view animation can be realized.

It is understood that step 1210 and step 1211 may be omitted from being performed in order to save processing overhead of the terminal.

In step 1212, the user has stopped the swipe gesture.

Illustratively, at a point in time when the user has stopped the swipe gesture, the page card swipe view module records the current page card offset.

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

In step 1214, the page slide view module notifies the content display view module of the page status change.

In step 1215, the content display view module changes the layout of the display content.

In step 1216, the page slide view module notifies the map view module of the page card status change.

In step 1217, the map view module changes the map best view.

Illustratively, in steps 1214 to 1217, the map view module and the content display view module are notified of the page card status change, so that the map view module and the content display view module adjust the corresponding interface display in time.

In step 1218, the page slide view module displays a stopped view slide animation.

In step 1219, the page slide view module dynamically adjusts the page offset.

In step 1220, the page slide view module notifies the content display view module that the page display area stops scrolling.

That is, the page slide view module notifies the content display view module that the page display area has completed switching from the collapsed state to the expanded state.

Based on the scheme described in the above embodiment, fig. 13 shows a method flowchart of an interface display method. The method corresponds to switching the page card display area from the folded state to the unfolded state, and may include the steps of:

in step 1301, start.

In step 1302, the page card display area is slid to a collapsed state.

In step 1303, the user slides the display content from bottom to top.

In step 1304, it is determined whether the display content has slid to the bottom.

If the display content has slid to the bottom, go to step 1305; if the display content does not slide to the bottom, then the process jumps to step 1318.

In step 1305, the user is about to begin a swipe gesture.

In step 1306, page card offset A is recorded.

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

In step 1308, the page card target offset is restricted to max (min (page card target offset, m), n).

The page card display area is provided with a page card offset, wherein m is the page card offset of the page card display area in an unfolded state, and n is the page card offset of the page card display area in a folded state.

In step 1309, the user has stopped the swipe gesture.

In step 1310, page card offset B is recorded.

In step 1311, it is determined whether the absolute value of B-A is greater than k.

And k is a change threshold corresponding to the page card offset when the page card state changes. From the perspective of the sliding gesture operation habit, the change threshold when the page card display area slides upwards is generally smaller than the change threshold when the page card display area slides downwards.

If the absolute value of B-A is greater than k, go to step 1312; if the absolute value of B-A is not greater than k, then proceed to step 1313.

In step 1312, the page card status is switched to the expanded status, and the offset of the page card is adjusted to m.

In step 1313, the page card status is maintained in the folded state, and the offset of the page card is adjusted to n.

In step 1314, the view-sliding animation has stopped.

Illustratively, in the case that the view sliding animation has stopped, the terminal further adjusts the page card offset back, that is, performs the following steps 1315 to 1317.

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

If the page card status is the expanded status, go to step 1316; if the page card status is not the expanded status, the process goes to step 1317.

In step 1316, the page card offset is adjusted to m.

In step 1317, adjust page card offset to n.

In step 1318, this is ended.

It should be noted that, the order of the steps of the method provided in the embodiments of the present application may be appropriately adjusted, and the steps may also be increased or decreased according to the circumstances.

Fig. 14 is a schematic structural diagram of an interface display device according to an exemplary embodiment of the present application. The apparatus may be implemented as, or as part of, a terminal. As shown in fig. 14, the apparatus includes:

a display module 1402, configured to display a page card display area on a user interface, where the page card display area is in an expanded state or a folded state, and slidable display content is displayed on the page card display area;

a first receiving module 1404, configured to receive a first sliding operation triggered on the page card display area;

a switching module 1406, configured to switch the page card display area between the expanded state and the collapsed state according to the first sliding operation when the display content of the page card display area has slid to an end.

In an alternative design, the switching module 1406 is configured to:

when the page card display area in the unfolded state displays the topmost display content and the sliding direction of the first sliding operation is from top to bottom, switching the page card display area from the unfolded state to the folded state according to the first sliding operation;

or the like, or a combination thereof,

being in the fold condition the page card display area shows has the display content of bottommost, just under the condition that the slip direction of first slide operation is by bottom directive top, according to first slide operation will the page card display area by fold condition switches to the expansion state.

In an optional design, the page card display area corresponds to a page card offset, and the page card offset is used for identifying the expansion degree of the page card display area; the switching module 1406 is configured to:

when the page card display area in the unfolded state displays topmost display content and the sliding direction of the first sliding operation is from top to bottom, adjusting the page card offset from a first page card offset to a second page card offset, and displaying the page card display area in the folded state based on the second page card offset;

being in fold condition page card display area shows has the display content of bottommost, just under the condition of the directional top in bottom of the slip direction of first slip operation, will page card offset by second page card offset adjustment does first page card offset, based on first page card offset shows to be in expand the state page card display area.

In an alternative design, the switching module 1406 is configured to:

recording page card offset corresponding to the page card display area at the starting time point and the ending time point of the first sliding operation respectively;

in response to a change value of the page card offset amount that changes based on the first sliding operation being greater than a first change threshold, adjusting the page card offset amount from the first page card offset amount to the second page card offset amount.

In an alternative design, the switching module 1406 is configured to:

in response to a change value of the page card offset amount that changes based on the first sliding operation being greater than a second change threshold, adjusting the page card offset amount from the second page card offset amount to the first page card offset amount.

In an alternative design, the apparatus further comprises: a slip confirmation module to:

acquiring a content offset corresponding to the display content, wherein the content offset is used for identifying the sliding condition of the display content in the page card display area;

determining that the display content of the page card display area has slid to the end based on the content offset.

In an alternative design, the apparatus further includes: a second receiving module, configured to:

receiving a second sliding operation triggered on the page card display area, wherein the second sliding operation has the same sliding direction as the first sliding operation;

and displaying the sliding display content on the page card display area according to the second sliding operation.

In an alternative design, the display module 1402 is configured to:

and under the condition that the display content of the page card display area is not slid to the tail end, displaying the slid display content on the page card display area according to the first sliding operation.

In an optional design, the user interface further includes an information display area located below the page card display area, and the display module 1402 is configured to:

in response to the page card display area being switched from the unfolded state to the folded state, displaying the information display area with the area increased on the user interface;

or the like, or, alternatively,

and in response to the page card display area being switched from the folded state to the unfolded state, displaying the information display area with the area reduced on the user interface.

In an alternative design, the display module 1402 is configured to:

determining an increased area of the information display area in response to the page card display area being switched from the expanded state to the collapsed state; displaying the information display region on the user interface that updates display content based on the increased region area;

in response to the page card display region being switched from the collapsed state to the expanded state, determining a reduced region area of the information display region; displaying the information display region on the user interface that updates display content based on the reduced region area.

In an optional design, the user interface further includes an information display area located on a lower layer of the page card display area, the information display area includes an information identifier, a display content of the page card display area includes a content list item corresponding to the information identifier, and the display module 1402 is configured to:

receiving a first selection operation aiming at the information identification; updating the display content of the page card display area according to the first selection operation;

or the like, or, alternatively,

receiving a second selection operation for the content list item; and according to the second selection operation, highlighting the information identification corresponding to the content list item selected by the second selection operation in the information display area.

In an alternative design, the display module 1402 is configured to:

highlighting a content list item corresponding to the information identifier selected by the first selection operation in the page card display area;

or the like, or a combination thereof,

and scrolling the display content in the page card display area until the display content in the page card display area comprises a content list item corresponding to the information identifier selected by the first selection operation, and highlighting the content list item.

It should be noted that: the interface display device provided in the above embodiment is only illustrated by dividing the functional modules, and in practical applications, the functions may be distributed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules, so as to complete all or part of the functions described above. In addition, the interface display device and the interface display method provided by the above embodiments belong to the same concept, and specific implementation processes thereof are detailed in the method embodiments and are not described herein again.

Embodiments of the present application further provide a computer device, including: the interface display system comprises a processor and a memory, wherein at least one instruction, at least one program, a code set or an instruction set is stored in the memory, and the at least one instruction, the at least one program, the code set or the instruction set is loaded by the processor and executed to realize the interface display method provided by the method embodiments.

Optionally, the computer device is a terminal. Fig. 15 is a schematic structural diagram of a terminal according to an exemplary embodiment of the present application.

In general, terminal 1500 includes: a processor 1501 and a memory 1502.

Processor 1501 may include one or more processing cores, such as a 4-core processor, an 8-core processor, or the like. The processor 1501 may be implemented in at least one hardware form of a DSP (Digital Signal Processing), an FPGA (Field-Programmable Gate Array), and a PLA (Programmable Logic Array). Processor 1501 may also include a main processor and a coprocessor, where the main processor is a processor used to process data in a wake state, and is also called a Central Processing Unit (CPU); a coprocessor is a low power processor for processing data in a standby state. In some embodiments, the processor 1501 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content required to be displayed on the display screen. In some embodiments, processor 1501 may also include an AI (Artificial Intelligence) processor for processing computational operations related to machine learning.

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, as well as non-volatile memory, such as one or more magnetic disk storage devices, flash memory storage devices. In some embodiments, a non-transitory computer readable storage medium in memory 1502 is used to store at least one instruction for execution by processor 1501 to implement the interface display method provided by method embodiments herein.

In some embodiments, the terminal 1500 may further include: a peripheral device interface 1503 and at least one peripheral device. The processor 1501, memory 1502, and peripheral interface 1503 may be connected by buses or signal lines. Various peripheral devices may be connected to peripheral interface 1503 via buses, signal lines, or circuit boards. Specifically, the peripheral device includes: at least one of a radio frequency circuit 1504, a display 1505, a camera assembly 1506, audio circuitry 1507, a positioning assembly 1508, and a power supply 1509.

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

The Radio Frequency circuit 1504 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The radio frequency circuitry 1504 communicates with communication networks and other communication devices via electromagnetic signals. The radio frequency circuit 1504 converts an electrical signal into an electromagnetic signal to transmit, or converts a received electromagnetic signal into an electrical signal. Optionally, the radio frequency 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 subscriber identity module card, and so forth. The radio frequency circuit 1504 can communicate with other terminals via at least one wireless communication protocol. The wireless communication protocols include, but are 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 radio frequency circuit 1504 may also include NFC (Near Field Communication) related circuits, which are not limited in this application.

The display screen 1505 is used to display a UI (User Interface). The UI may include graphics, text, icons, video, and any combination thereof. When the display screen 1505 is a touch display screen, the display screen 1505 also has the ability to capture touch signals on or over the surface of the display screen 1505. The touch signal may be input to the processor 1501 as a control signal for processing. At this point, the display 1505 may also be used to provide virtual buttons and/or a virtual keyboard, also referred to as soft buttons and/or a soft keyboard. In some embodiments, display 1505 may be one, providing the front panel of terminal 1500; in other embodiments, display 1505 may be at least two, each disposed on a different surface of terminal 1500 or in a folded design; in still other embodiments, display 1505 may be a flexible display disposed on a curved surface or a folded surface of terminal 1500. Even more, the display 1505 may be configured in a non-rectangular irregular pattern, i.e., a shaped screen. The Display 1505 can be made of LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode), and other materials.

The camera assembly 1506 is used to capture images or video. Optionally, the camera assembly 1506 includes a front camera and a rear camera. Typically, the front camera is disposed on the front panel of the terminal 1500 and the rear camera is disposed on the back of the terminal. In some embodiments, the number of the rear cameras is at least two, and each rear camera is any one of a main camera, a depth-of-field camera, a wide-angle camera and a telephoto camera, so that the main camera and the depth-of-field camera are fused to realize a background blurring function, and the main camera and the wide-angle camera are fused to realize panoramic shooting and VR (Virtual Reality) shooting functions or other fusion shooting functions. In some embodiments, camera assembly 1506 may also include a flash. The flash lamp can be a monochrome temperature flash lamp or a bicolor temperature flash lamp. The double-color-temperature flash lamp is a combination of a warm-light flash lamp and a cold-light flash lamp, and can be used for light compensation at different color temperatures.

The audio circuitry 1507 may include a microphone and speaker. The microphone is used for collecting sound waves of a user and the environment, converting the sound waves into electric signals, and inputting the electric signals to the processor 1501 for processing or inputting the electric signals to the radio-frequency circuit 1504 to achieve voice communication. For stereo capture or noise reduction purposes, multiple microphones may be provided, each at a different location of the terminal 1500. The microphone may also be an array microphone or an omni-directional pick-up microphone. The speaker is used to convert electrical signals from the processor 1501 or the radio frequency circuit 1504 into sound waves. The loudspeaker can be a traditional film loudspeaker or a piezoelectric ceramic loudspeaker. When the speaker is a piezoelectric ceramic speaker, the speaker can be used for purposes such as converting an electric signal into a sound wave audible to a human being, or converting an electric signal into a sound wave inaudible to a human being to measure a distance. In some embodiments, the audio circuitry 1507 may also include a headphone jack.

The positioning component 1508 is used for locating the current geographic position of the terminal 1500 for navigation or LBS (Location Based Service). The Positioning component 1508 may be a Positioning component based on the united states GPS (Global Positioning System), the chinese beidou System, or the russian galileo System.

Power supply 1509 is used to power the various components in terminal 1500. The power supply 1509 may be alternating current, direct current, disposable or rechargeable. When the power supply 1509 includes a rechargeable battery, the rechargeable battery may be a wired rechargeable battery or a wireless rechargeable battery. The wired rechargeable battery is a battery charged through a wired line, and the wireless rechargeable battery is a battery charged through a wireless coil. The rechargeable battery can also be used to support fast charge technology.

In some embodiments, the terminal 1500 also includes one or more sensors 1510. The one or more sensors 1510 include, but are not limited to: acceleration sensor 1511, gyro sensor 1512, pressure sensor 1513, fingerprint sensor 1514, optical sensor 1515, and proximity sensor 1516.

The acceleration sensor 1511 can detect the magnitude of acceleration on three coordinate axes of the coordinate system established with the terminal 1500. For example, the acceleration sensor 1511 may be used to detect components of the gravitational acceleration in three coordinate axes. The processor 1501 may control the touch screen 1505 to display the horizontal barrier interface in the horizontal view or the vertical view according to the gravitational acceleration signal collected by the acceleration sensor 1511. The acceleration sensor 1511 may also be used for acquisition of motion data of a game or a user.

The gyroscope sensor 1512 can detect the body direction and the rotation angle of the terminal 1500, and the gyroscope sensor 1512 and the acceleration sensor 1511 cooperate to collect the 3D motion of the user on the terminal 1500. The processor 1501, based on the data collected by the gyroscope sensor 1512, may implement the following functions: motion sensing (such as changing the UI according to a user's tilting operation), image stabilization at the time of photographing, game control, and inertial navigation.

Pressure sensor 1513 may be disposed on a side bezel of terminal 1500 and/or underneath touch display 1505. When the pressure sensor 1513 is disposed on the side frame of the terminal 1500, the holding signal of the user to the terminal 1500 may be detected, and the processor 1501 performs left-right hand recognition or shortcut operation according to the holding signal collected by the pressure sensor 1513. When the pressure sensor 1513 is disposed at the lower layer of the touch display 1505, the processor 1501 controls the operability control on the UI interface according to the pressure operation of the user on the touch display 1505. The operability control comprises at least one of a button control, a scroll bar control, an icon control and a menu control.

The fingerprint sensor 1514 is configured to collect a fingerprint of the user, and the processor 1501 identifies the user based on the fingerprint collected by the fingerprint sensor 1514, or the fingerprint sensor 1514 identifies the user based on the collected fingerprint. Upon identifying the user as a trusted identity, processor 1501 authorizes the user to perform relevant sensitive operations including unlocking the screen, viewing encrypted information, downloading software, paying, and changing settings, etc. The fingerprint sensor 1514 may be provided on the front, back or side of the terminal 1500. When a physical key or vendor Logo is provided on the terminal 1500, the fingerprint sensor 1514 may be integrated with the physical key or vendor Logo.

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

A proximity sensor 1516, also known as a distance sensor, is typically disposed on the front panel of the terminal 1500. The proximity sensor 1516 is used to collect a distance between the user and the front surface of the terminal 1500. In one embodiment, when the proximity sensor 1516 detects that the distance between the user and the front surface of the terminal 1500 gradually decreases, the processor 1501 controls the touch display 1505 to switch from the bright screen state to the dark screen state; when the proximity sensor 1516 detects that the distance between the user and the front surface of the terminal 1500 gradually becomes larger, the processor 1501 controls the touch display 1505 to switch from the breath screen state to the bright screen state.

Those skilled in the art will appreciate that the configuration shown in fig. 15 is not limiting of terminal 1500 and may include more or fewer components than shown, or some components may be combined, or a different arrangement of components may be used.

The embodiment of the present application further provides a computer-readable storage medium, where at least one program code is stored, and when the program code is loaded and executed by a processor of a computer device, the interface display method provided by the foregoing method embodiments is implemented.

The present application also provides a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the interface display method provided by the method embodiments.

It will be understood by those skilled in the art that all or part of the steps of the above embodiments may be implemented by hardware, or may be implemented by hardware related to instructions of a program, and the program may be stored in a computer readable storage medium, where the above readable storage medium may be a read-only memory, a magnetic or optical disk, and the like.

The above description is intended only to serve as an alternative embodiment and should not be construed as limiting the present application, and any modifications, equivalent switches, improvements and the like made within the spirit and the principle of the present application should be included in the scope of the present application.

Claims

1. An interface display method, the method comprising:

receiving a first sliding operation triggered on the page card display area;

switching the page display area between the expanded state and the folded state according to the first sliding operation in a case where the display content of the page display area has slid to an end.

2. The method according to claim 1, wherein the switching the page card display area between the expanded state and the collapsed state according to the first sliding operation in a case where the display content of the page card display area has slid to an end comprises:

or the like, or a combination thereof,

the page card display area in the folded state displays the display content at the bottommost part, and under the condition that the sliding direction of the first sliding operation is from the bottom to the top, the page card display area is switched to the unfolded state according to the first sliding operation.

3. The method according to claim 2, wherein the page card display area corresponds to a page card offset, and the page card offset is used for identifying the expansion degree of the page card display area;

the switching the page card display area from the expanded state to the folded state according to the first sliding operation when the page card display area in the expanded state displays the topmost display content and the sliding direction of the first sliding operation is from the top to the bottom includes:

the page card display area in the folded state is displayed with the display content at the bottommost part, and under the condition that the sliding direction of the first sliding operation is from the bottom to the top, the page card display area is switched from the folded state to the unfolded state according to the first sliding operation, the method includes:

4. The method of claim 3, wherein adjusting the page card offset from a first page card offset to a second page card offset comprises:

respectively recording page card offset corresponding to the page card display area at the starting time point and the ending time point of the first sliding operation;

5. The method of claim 3, wherein the adjusting the page card offset from the second page card offset to the first page card offset comprises:

6. The method of any of claims 1 to 5, further comprising:

7. The method of any of claims 1 to 5, further comprising:

8. The method of any of claims 1 to 5, further comprising:

9. The method according to any one of claims 1 to 5, further comprising an information display area underlying the page card display area on the user interface, the method further comprising:

in response to the page card display area being switched from the expanded state to the collapsed state, displaying the information display area with the area increased on the user interface;

or the like, or, alternatively,

10. The method of claim 9, wherein the displaying the information display area on the user interface with an increased area in response to the page card display area being switched from the expanded state to the collapsed state comprises:

in response to the page card display region being switched from the expanded state to the collapsed state, determining an increased region area of the information display region;

displaying the information display region on the user interface that updates display content based on the increased region area;

the responding to the page card display area being switched from the folded state to the unfolded state, the information display area with reduced area is displayed on the user interface, and the method comprises the following steps:

in response to the page card display region being switched from the collapsed state to the expanded state, determining a reduced region area of the information display region;

displaying the information display region on the user interface that updates display content based on the reduced region area.

11. The method according to any one of claims 1 to 5, wherein the user interface further includes an information display area located at a lower layer of the page card display area, the information display area includes an information identifier, and the display content of the page card display area includes a content list item corresponding to the information identifier, the method further including:

or the like, or, alternatively,

12. The method according to claim 11, wherein the updating the display content of the page card display area according to the first selection operation comprises:

or the like, or, alternatively,

13. An interface display apparatus, the apparatus comprising:

14. A computer device comprising a processor and a memory, the memory having stored therein at least one instruction, at least one program, a set of codes, or a set of instructions, the at least one instruction, the at least one program, the set of codes, or the set of instructions being loaded and executed by the processor to implement the interface display method according to any one of claims 1 to 12.

15. A computer-readable storage medium having stored therein at least one instruction, at least one program, a set of codes, or a set of instructions, which is loaded and executed by a processor to implement the interface display method according to any one of claims 1 to 12.