Page display method and device

Abstract

The embodiment of the invention discloses a page display method and device. The main technical scheme is applied to a user side. The main technical scheme comprises the following steps: displaying a first page in a target area of a screen; in response to an event of triggering to open a floating window function, if the first page does not have a previous-level page, creating a floating window on a screen, displaying target contents included in the first page in the floating window, and switching the floating window from a display state to a hidden state; in response to a page switching event, switching the target area to display a second page, and switching the floating window from a hidden state to a display state; wherein the size of the floating window is smaller than the page size of the first page or the second page, and the display layer of the floating window is higher than the page layer of the first page or the second page. The method and the device can improve the content obtaining efficiency and the user experience of the user.

Description

Technical Field

[0001] This application relates to the field of Internet application technologies, and particularly to a page display method and apparatus. Background Art

[0002] With the rapid development of Internet and mobile communication technologies, page services provided by mobile terminals such as mobile phones and tablet computers have been widely used.

[0003] However, with the continuous popularization of page services and the continuous improvement of user requirements, the method of obtaining more content by switching pages can no longer meet the needs of users. Therefore, how to improve the efficiency of obtaining content and the user experience has become an urgent problem to be solved. Summary of the Invention

[0004] In view of this, this application provides a page display method and apparatus to improve the efficiency of obtaining content and the user experience.

[0005] This application provides the following solutions:

[0006] In a first aspect, a page display method is provided, which is applied to a user terminal. The method includes: displaying a first page in a target area of the screen; in response to an event that triggers the suspension window function, if there is no upper-level page for the first page, creating a suspension window on the screen, displaying the target content included in the first page in the suspension window, and switching the suspension window from the display state to the hidden state; in response to an event of page switching, switching the target area to display a second page, and switching the suspension window from the hidden state to the display state; wherein, the size of the suspension window is smaller than the page size of the first page or the second page, and the display layer of the suspension window is higher than the page layer of the first page or the second page.

[0007] Optionally, the method further includes:

[0008] When displaying the first page, in response to a change in the target content included in the first page, the target content included in the first page displayed in the suspension window also changes accordingly.

[0009] Optionally, the method further includes: in response to an event of switching the target area back from the second page to the first page, switching the suspension window from the display state to the hidden state.

[0010] Optionally, if there is no upper-level page for the first page, the event that triggers the suspension window function includes an event that a first component is triggered, the first component is displayed on the first page, or the first component is displayed on a first panel, and the first panel is generated in response to a first operation gesture on the first page.

[0011] The method further includes:

[0012] If the first page is the message page of the client and there is a previous page for the first page, switch the target area to display the previous page, and create a floating window on the screen. The floating window is in a display state and is identified by an icon associated with the floating window; or,

[0013] In response to the client receiving a new message, create a floating window on the screen. The floating window is in a display state and is identified by an icon associated with the floating window.

[0014] Optionally, the method further includes:

[0015] In response to an event that triggers the activation of the floating window function, if there is a previous page for the first page, switch the target area to display the previous page, and create a floating window on the screen. The floating window is in a display state and displays the target content included in the first page;

[0016] Among them, the event that triggers the activation of the floating window function includes: the picture of the first page moves on the screen due to a slide in a preset direction on the first page, and the picture of the first page is continuously dragged to a preset area of the screen.

[0017] Optionally, the method further includes:

[0018] If the first page is video content, in response to an event that triggers the display of the second panel, display the second panel, and the second panel partially covers the first page;

[0019] In response to an event that triggers the full-screen display of the second panel, expand the display area of the second panel to completely cover the first page, and create a floating window on the screen. The floating window is in a display state and displays the target content included in the first page.

[0020] Optionally, in response to an event that returns the target area from the second panel to display the first page, delete the created floating window.

[0021] Optionally, when the floating window is in a display state, in response to an operation event for adjusting the floating window, display the floating window at the adjusted target position, and update the recorded target position;

[0022] In response to an event that the floating window switches from a hidden state to a display state, display the floating window at the currently recorded target position.

[0023] Optionally, the method further includes:

[0024] When the floating window is in a display state, in response to an event that triggers the floating window, switch the target area to display the content included in the floating window, and delete the floating window.

[0025] Second aspect, a page display device is provided, which is applied to a user terminal. The device includes: a page display unit configured to display a first page in a target area of a screen; a page monitoring unit configured to perform event monitoring; the page display unit is further configured to, in response to an event that is also configured to be monitored by the page monitoring unit and triggers the floating window function to be enabled, if there is no upper-level page for the first page, create a floating window on the screen, display target content included in the first page in the floating window, and switch the floating window from a display state to a hidden state; in response to an event that is also configured to be monitored by the page monitoring unit and indicates a page switch, switch the target area to display a second page, and switch the floating window from the hidden state to the display state; wherein, the size of the floating window is smaller than the page size of the first page or the second page, and the display layer of the floating window is higher than the page layer of the first page or the second page.

[0026] Third aspect, a computer-readable storage medium is provided, on which a computer program is stored. When the program is executed by a processor, the steps of the method described in any one of the above first aspects are implemented.

[0027] Fourth aspect, an electronic device is provided, including:

[0028] one or more processors; and

[0029] a memory associated with the one or more processors, the memory is used to store program instructions, and when the program instructions are read and executed by the one or more processors, the steps of the method described in any one of the above first aspects are executed.

[0030] Fifth aspect, a computer program product is provided, including a computer program. When the computer program is executed by a processor, the steps of the method described in any one of the above first aspects are implemented.

[0031] According to the specific embodiments provided in the present application, the following technical effects are disclosed in the present application:

[0032] 1) When this application displays the first page in the target area of the screen, if an event triggering the opening of the floating window function is detected, and if there is no previous page for the first page, a floating window with a size smaller than the first page and a display layer higher than the first page can be created without exiting the first page, and the target content included in the first page is displayed in the floating window. In this way, when the user browses the first page, the floating window is the same as the target content included in the first page, and the floating window is automatically hidden (i.e., switched from the display state to the hidden state), which can eliminate the occlusion of the floating window on the first page; if an event of page switching that switches the target area to display the second page is detected, a floating window with a size smaller than the page size of the second page and a display layer higher than the second page is automatically displayed on the second page (i.e., switched from the hidden state to the display state), which can meet the user's need to obtain different content on the second page and the floating window simultaneously, improving the user's efficiency of obtaining content and user experience.

[0033] 2) When this application displays the first page in the target area of the screen, if the target content included in the first page changes, the target content included in the first page displayed in the floating window also changes accordingly, which can ensure the consistency between the content displayed in the floating window and the content included in the first page, and ensure that the user can also obtain the latest content included in the first page when using the floating window.

[0034] 3) When this application detects an event that switches the target area back from the second page to the first page, the floating window is hidden, so that the first page can continue to be displayed in the target area. The floating window is the same as the target content included in the first page, thus eliminating the occlusion of the floating window on the first page and improving the user experience.

[0035] 4) This application creates a floating window through an event triggered by a first component on the first page or the first panel. The first panel is generated based on a first operation gesture applied to the first page, which can provide multiple operation methods for creating a floating window, meet the usage habits of different users for creating a floating window, increase the interest of interaction, and improve the user experience.

[0036] 5) When there is a previous page for the first page, this application provides a brand-new way to trigger the opening of the floating window function, that is, sliding the first page in a preset direction causes the screen of the first page to move, and continue to drag the screen of the first page to a preset area of the screen. This way of dragging the screen of the first page to the preset area is more coherent, vivid and interesting. On the one hand, it shortens the operation path, and on the other hand, it also improves the user experience.

[0037] 6) This application provides special processing methods for the message scenario respectively, enabling users to quickly reach the message page through the floating window, shortening the operation path, and improving the user efficiency and user experience.

[0038] 7) When the first page of this application is video content, it provides another brand-new way to trigger the floating window function, that is, when the event of triggering the display of the second panel is monitored, a part of the second panel covering the first page is displayed. When the event of triggering the full-screen display of the second panel is monitored, the second panel is expanded to completely cover the first page, and a floating window is created on the screen. This way of pulling the semi-screen panel up to full screen and shrinking the first page into a floating window makes the operation more coherent, and users can obtain different content in the second panel and the floating window at the same time, meeting the user's need to obtain different content in the second panel and the floating window at the same time, and improving the efficiency of users to obtain content and the user experience.

[0039] 8) If this application monitors the event of returning the target area from the second panel to display the first page, the floating window is deleted, so that the first content can continue to be displayed in the target area. The floating window and the target content included in the first page are the same, so the occlusion of the floating window is eliminated, and the user experience is improved.

[0040] 9) When the user adjusts the floating window in the display state in this application, the position of the floating window after adjustment is recorded, and when it is monitored that the floating window is switched from the hidden state to the display state, the floating window is automatically displayed at the recorded position, without the user having to manually adjust the position of the floating window again, making the operation more convenient and improving the user experience.

[0041] 10) In this application, the user can quickly switch the target area to the content protected by the floating window by triggering the floating window in the display state, making the operation more convenient and improving the user efficiency and the user experience.

[0042] Of course, it is not necessary for any product implementing this application to achieve all the above advantages at the same time. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required in the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0044] Figure 1 It is the system architecture diagram applicable to the embodiments of the present application;

[0045] Figure 2 It is the flowchart of the page display method provided by the embodiments of the present application;

[0046] Figure 3 It is the schematic diagram of the target content switching on the first page provided by the embodiments of the present application;

[0047] Figure 4 Schematic diagrams of the floating window provided by the embodiments of the present application in the display state and the hidden state;

[0048] Figure 5 Schematic diagram of a trigger for enabling the floating window function provided by the embodiments of the present application;

[0049] Figure 6 Another schematic diagram of a trigger for enabling the floating window function provided by the embodiments of the present application;

[0050] Figure 7 Schematic diagram of a trigger for enabling the floating window function on the message page provided by the embodiments of the present application;

[0051] Figure 8 A schematic diagram of a trigger for enabling the floating window function on the video page provided by the embodiments of the present application;

[0052] Figure 9 Another schematic diagram of a trigger for enabling the floating window function on the video page provided by the embodiments of the present application;

[0053] Figure 10 Schematic block diagram of the page display device provided by the embodiments of the present application;

[0054] Figure 11 Schematic block diagram of the electronic device provided by the embodiments of the present application. Detailed implementation manners

[0055] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art belong to the scope of protection of the present application.

[0056] The terms used in the embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to limit the present application. The singular forms of "a", "the" and "said" used in the embodiments of the present application and the appended claims are also intended to include the plural forms, unless the context clearly indicates otherwise.

[0057] It should be understood that the term " / and" used herein is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone. In addition, the character " / " herein generally represents an "or" relationship between the associated objects before and after.

[0058] Depending on the context, as used herein, the word "if" can be interpreted as "when" or "while" or "in response to determining" or "in response to detecting". Similarly, depending on the context, the phrase "if determined" or "if detected (stated condition or event)" can be interpreted as "when determined" or "in response to determining" or "when detected (stated condition or event)" or "in response to detecting (stated condition or event)".

[0059] In the related art, to exit the current page to a specified page and only create a floating window on the specified page cannot meet the user's need to switch and browse between the current page and any page, resulting in a poor user experience.

[0060] In view of this, the present application provides a new idea. To facilitate the understanding of the present application, first, the system architecture on which the present application is based will be described. Figure 1 An exemplary system architecture to which embodiments of the present application can be applied is shown, as Figure 1 shown in, the system architecture may include: a user side, a terminal device, and a server side.

[0061] Among them, the user side is set on the terminal device. The user side involved in the embodiments of the present application may be a user side running on the terminal device, a small program, or a Web application running through a browser, etc.

[0062] The terminal device may include, but is not limited to, a smart mobile terminal, a wearable device, a PC (Personal Computer), a smart home device, etc. Among them, the smart mobile device may include, such as, a mobile phone, a tablet computer, a laptop computer, a PDA (Personal Digital Assistant), an Internet car terminal, etc. The wearable device may include, such as, a smart watch, smart glasses, a smart bracelet, a VR (Virtual Reality) device, an AR (Augmented Reality) device, a mixed reality device (i.e., a device that can support virtual reality and augmented reality), and so on. The smart home device may include, such as, a smart TV, a smart refrigerator with a display screen, etc.

[0063] The user side can interact with the server side through a network, request and obtain the content included in each page from the server side, and display it in the target area.

[0064] The server side can be a platform that provides video playback services, which can be a single server, a server group composed of multiple servers, or a cloud server. A cloud server, also known as a cloud computing server or a cloud host, is a host product in the cloud computing service system, which is used to solve the defects of difficult management and weak service scalability existing in traditional physical hosts and virtual private servers (VPS, Virtual Private Server) services.

[0065] It should be understood that Figure 1 the numbers of the user side, the terminal device and the server side in

[0066] Figure 2 is a flowchart of the page display method provided by the embodiments of the present application. This method can be executed by Figure 1 the user side in the system shown in Figure 2 As shown in

[0067] Step 201: Display a first page in a target area of the screen.

[0068] Step 203: In response to an event that triggers the suspension window function, if there is no upper-level page for the first page, create a suspension window on the screen, display the target content included in the first page in the suspension window, and switch the suspension window from the display state to the hidden state.

[0069] Step 205: In response to an event of page switching, switch the target area to display a second page, and switch the suspension window from the hidden state to the display state.

[0070] Among them, the size of the suspension window is smaller than the page size of the first page or the second page, and the display layer of the suspension window is higher than the page layer of the first page or the second page.

[0071] It can be seen that when the present application displays the first page in the target area of the screen, if an event triggering the opening of the floating window function is monitored, when there is no upper-level page for the first page, a floating window with a size smaller than the first page and a display layer higher than the first page can be created without exiting the first page, and the target content included in the first page is displayed in the floating window. In this way, when the user browses the first page, the floating window is the same as the target content included in the first page, and the floating window is automatically hidden (that is, switched from the display state to the hidden state), which can eliminate the occlusion of the floating window on the first page; if an event of page switching that switches the target area to display the second page is monitored, a floating window with a size smaller than the page size of the second page and a display layer higher than the second page is automatically displayed on the second page (that is, switched from the hidden state to the display state). In this way, the user's need to obtain different contents on the second page and the floating window at the same time can be satisfied, improving the efficiency of the user to obtain content and the user experience.

[0072] The following describes in detail each step in the above process and the effects that can be further generated in combination with embodiments. It should be noted that the "first", "second", etc. limitations involved in the present application do not have limitations in terms of size, order, quantity, etc., and are only used to distinguish by name. For example, "the first page" and "the second page" are used to distinguish two types of pages by name.

[0073] First, the above step 201, that is, "display the first page in the target area of the screen", is described in detail in combination with embodiments.

[0074] The above screen can be the screen of the terminal device where the user terminal is located. The screen can include a target area (such as the target area in Figure 3 ), and can also include other areas. The target area involved in the embodiments of the present application can be the entire area of the screen or a partial area of the screen. The partial area refers to the main area of the screen, which usually occupies most of the screen area for page display. In the video playback application scenario, when the user terminal displays the first page, it can be as shown in Figure 3 , and the video playback page is displayed through the target area to play the video, and other contents such as a bottom navigation component (such as a navigation component including columns such as "Home", "Featured", "Messages", "Me", etc.) are displayed in other areas.

[0075] Here, the first page can be a service page provided for the user side. The first page can include content presenting various service scenarios to the user, such as video content corresponding to the video scenario, live broadcast content corresponding to the live broadcast scenario, message content corresponding to the message scenario, shopping content corresponding to the shopping scenario, etc. Optionally, the content of various services can include at least one of various service pictures (including video pictures or images, etc.), texts, and components. For example, the video content includes a video picture, and can also include texts, interactive components, etc. displayed above the layer where the video picture is located; the live broadcast content includes the picture of the live broadcast, and can also include texts, interactive components, etc. displayed above the layer where the live broadcast picture is located; the message content includes the interface and interactive components of message interaction; the shopping content includes the interface and interactive components providing shopping services. Optionally, the above-mentioned pictures and interfaces can be static or dynamic, that is, the content changes over time.

[0076] The following describes in detail the above step 203, that is, "in response to an event triggering the opening of the floating window function, if there is no upper-level page for the first page, a floating window is created on the screen, the target content included in the first page is displayed in the floating window, and the floating window is switched from the display state to the hidden state".

[0077] When the first page is displayed in the target area of the screen, if an event triggering the opening of the floating window function is monitored, it is divided into two scenarios: the first page has an upper-level page, and the first page has no upper-level page.

[0078] Optionally, the first page and the upper-level page are different pages provided by the application service for the user side; if the first page has an upper-level page, the level of the upper-level page is higher than that of the first page, and the upper-level page is the page to which the first page can return; if the first page has no upper-level page, the first page has no page to return to, and this first page is the highest-level page.

[0079] In an example of the present application, when it is determined that there is no upper-level page for the first page, a floating window is created on the screen. The floating window is in the display state, the size of the floating window is smaller than the page size of the first page, and the display layer of the floating window is higher than the page layer of the first page; in this way, the floating window with a size smaller than the first page can reduce the occlusion of the target area of the screen by the floating window, improving the user experience.

[0080] In the embodiment of the present application, the floating window has at least two states, namely the display state and the hidden state. The so-called display state means that the floating window is displayed on the screen and the user can see the floating window on the screen. The so-called hidden state means that the floating window is hidden or located in an area outside the screen, and the user cannot see the floating window on the screen.

[0081] Optionally, when the floating window is in the display state, the floating window can be displayed in the edge area of the screen, such as Figure 3 As shown in the figure, the floating window is minimized from blocking the target area. In addition, the display position of the floating window should avoid conflicts with other components as much as possible, such as avoiding Figure 3 The interactive component area shown in (for example, the area where components such as avatars, favorites, comments, likes, and reposts are located).

[0082] In an embodiment of the present application, the created floating window displays the target content included in the first page. The target content can be determined according to the type of the first page. For example, if the first page is playing a video, the target content can be the video content being played; for another example, if the first page is live broadcasting, the target content can be the live broadcast screen; for another example, if the first page is displaying an album, the target content can be the picture being displayed on the first page; for another example, if the first page is displaying text, the target content can be the text being displayed on the first page.

[0083] If the target content included in the first page is media content such as videos and pictures, a corresponding player can be created in the floating window, so that the target content of the above media type can be played in the floating window. If the target content included in the first page is other content such as text and web page elements, a view can be created in the floating window, so that the target content such as text and web page elements can be reproduced in the view.

[0084] In the embodiment of the present application, the content on the first page may change over time, for example, the played video content changes, the live broadcast content changes, the played pictures change, the displayed messages change, etc. In response to the change of the target content included in the first page, the target content included in the first page displayed in the floating window also changes accordingly.

[0085] exist Figure 3 The video content 1 is played on the first page shown in (a). At this time, the video content 1 is played in the floating window on the first page; swipe up on the video content 1 to enter Figure 3 The video content 2 is played on the first page shown in (b), and the video content 2 is played in the floating window.

[0086] The content switching event adopted above may be an event triggered by, for example, an up and down sliding gesture or a voice command (such as a "watch the next video or live broadcast" command).

[0087] When the target content included in the first page is displayed in the floating window, the floating window and the target area of the screen both display the target content of the first page, and the contents of the two are basically the same. At this time, hiding the floating window (i.e., switching the floating window from a displayed state to a hidden state) can eliminate the obstruction of the target area of the screen by the floating window, thereby improving the user experience.

[0088] After the floating window is switched from the displayed state to the hidden state, as one possible implementation, a second component can be displayed to replace the floating window. The size of the second component is smaller than that of the floating window, which can further reduce the occlusion of the target area of the screen by the floating window and improve the user experience. On the one hand, the second component can be used to identify the hidden floating window, and on the other hand, it can also be used to trigger the floating window to switch back from the hidden state to the displayed state.

[0089] As shown in Figure 4 (a), the floating window is in the displayed state. When the floating window is switched to the hidden state, as shown in Figure 4 (b), only the second component is displayed at the edge of the screen. If the user clicks on the second component, the floating window can be switched back to the displayed state as shown in Figure 4 (a).

[0090] In this embodiment, since both the first page and the floating window display the target content, after the floating window is created, it can be automatically switched from the displayed state to the hidden state. For example, after creating the floating window on the screen, immediately switch the floating window from the displayed state to the hidden state and display the second component corresponding to the floating window; or, after the display time of the floating window in the displayed state reaches the preset duration, if no event of operating the floating window is received at the user end, the floating window is hidden and the second component corresponding to the floating window is displayed. For example, when the floating window is in the displayed state and no user operation is detected for 2 seconds, the floating window will be switched from the displayed state to the hidden state and the second component will be displayed.

[0091] In this step, the event that triggers the opening of the floating window function can be the event that the first component is triggered, or other events, such as detecting a voice command (such as the command "display the first page in a small window").

[0092] As one possible implementation, the first component can be displayed on the first page. For example, a "open small window" component is displayed on the first page. After the user clicks on this component, a floating window is created on the screen, and the target content included in the first page is displayed in the floating window and the floating window is switched from the displayed state to the hidden state.

[0093] As another possible implementation, the first component can be displayed on the first panel, which is generated in response to a first operation gesture on the first page. For example, applying a long - press gesture on the first page as shown in Figure 5 (a) will enter Figure 5 (b); the first panel is displayed on the first page as shown in Figure 5 (b), the first component is displayed on the first panel. Clicking on the first component will enter Figure 5 (c); inFigure 5 Create a floating window on the first page shown in (c), display the target content included in the first page in the floating window, and switch the floating window from the display state to the hidden state.

[0094] The following describes in detail step 205 above, that is, "in response to the event of page switching, switch the target area to display the second page, and switch the floating window from the hidden state to the display state", in combination with embodiments.

[0095] Since there is no upper-level page for the first page, a floating window is created on the first page. The target content included in the first page is displayed in the floating window and the floating window is switched from the display state to the hidden state. At this time, if an event of page switching is monitored, the target area is switched from the first page to display the second page. The first page and the second page can respectively provide different types of content to the user. For example, the first page is video content and the second page is live content; for example, the first page is message content and the second page is video content; for example, the first page is shopping content and the second page is video content. The first page and the second page can also be under different columns and provide content to the user in different forms. Since the target content in the first page is displayed in the floating window, which is different from the second page displayed in the target area at this time, the floating window is switched from the hidden state to the display state. For example, the first page is the page corresponding to the "Featured" column shown in (a) below, and short videos are played in a single-column form on this page. If the user clicks on other columns, for example, clicks on the "Home" column, then it is switched to the second page, and the second page displays video covers in a double-column form. However, the short video played on the first page is still displayed in the floating window, and the floating window is switched from the hidden state to the display state. The user can watch the short video played on the first page through the floating window while viewing the second page. Figure 3 The page corresponding to the "Featured" column shown in (a) below, and short videos are played in a single-column form on this page. If the user clicks on other columns, for example, clicks on the "Home" column, then it is switched to the second page, and the second page displays video covers in a double-column form. However, the short video played on the first page is still displayed in the floating window, and the floating window is switched from the hidden state to the display state. The user can watch the short video played on the first page through the floating window while viewing the second page.

[0096] Among them, the event that triggers page switching can include triggering a corresponding component, using a specific gesture or a voice command (such as the command "switch to the second page").

[0097] Furthermore, if while the second page is being displayed, the user is interested in the target content of the first page in the floating window, the user can quickly return to the first page by triggering the floating window, that is, in response to the event of triggering the floating window, the client switches the target area to display the content included in the floating window and deletes the floating window.

[0098] Among them, the event that triggers the floating window can be an event triggered by, for example, clicking on the floating window, a gesture such as pinching the floating window to zoom in, etc.

[0099] Furthermore, if the user triggers the switch from the second page back to the first page in other ways, correspondingly, the client monitors the event of switching the target area from the second page to the display of the first page. At this time, since the target content of the first page is also displayed in the floating window and the two are the same, the floating window is switched from the display state to the hidden state.

[0100] In the above embodiment, there is no upper-level page for the first page. If there is an upper-level page for the first page, in response to the event of triggering the floating window function, the target area can be switched to display the upper-level page, and a floating window is created on the screen. The floating window is in the display state and displays the target content included in the first page. For this case, the embodiments of the present application provide a new operation gesture to trigger the floating window function. That is, the event of triggering the floating window function may include: the screen of the first page moves on the screen due to a slide in a preset direction on the first page, and the screen of the first page is continuously dragged to a preset area of the screen. Among them, the preset area of the screen may refer to the lower left corner area, the upper right corner area, the right side area, etc. of the screen. The preset area of the screen can be a fixed area or can be flexibly set according to the user's usage preferences.

[0101] For example, on the first page shown in Figure 6 (a), applying a gesture of sliding towards the lower right corner will produce a visual effect of the screen of the first page moving, as shown in Figure 6 (b). The finger continues to drag the screen of the first page to drag the first page to the lower right corner area of the screen. A prompt message can be displayed in the lower right corner area, such as "mini window" or the icon of the floating window, etc., to prompt the user about the function of this area. After the gesture ends, it enters Figure 6 (c), that is, the upper-level page is displayed in the target area, and a floating window is created on the screen. The target content included in the first page is displayed in the floating window.

[0102] Among them, when starting to drag the screen of the first page (that is, when the hand just touches the target area), a prompt message can be displayed on the preset area to prompt the user to drag the screen of the first page to the preset area; or, a prompt message can also be displayed on the preset area when the duration of continuously dragging the screen of the first page meets the preset duration. The preset duration can filter out the situation of misoperation.

[0103] It can be seen that this new gesture is more coherent, vivid and interesting. On the one hand, it shortens the operation path, and on the other hand, it also improves the user experience. Of course, in addition to this gesture, other ways can also be used to trigger the floating window function, such as long-pressing the first page and triggering the first component on the displayed first panel to trigger the floating window, or clicking on the component used to return to the upper-level page on the first page, and so on.

[0104] Furthermore, while the upper-level page is being displayed, if the user is interested in the target content of the first page in the floating window, the user can quickly return to the first page by triggering the floating window. That is, in response to the event of triggering the floating window, the client will switch the target area to display the content included in the floating window and delete the floating window.

[0105] Among them, the event of triggering the floating window can be an event triggered by gestures such as clicking on the floating window or zooming in on the floating window with two fingers.

[0106] The above-mentioned new gesture (that is, when swiping along a preset direction on the first page, the screen of the first page moves on the screen, and continue to drag the screen of the first page to the preset area of the screen) can be applied to any scenario (including videos, live broadcasts, messages, shopping pages, etc.) and has universality. For example, if the first page is a live broadcast room, perform the above operation gesture to return to the upper-level page of the live broadcast room. While the upper-level page is being displayed, the live broadcast content of the live broadcast room is continuously displayed through the floating window; if the user wants to return to the live broadcast room, clicking on the floating window can quickly display the screen of the live broadcast room in the target area and delete the floating window.

[0107] In the embodiment of the present application, for the special scenario of messages, a new implementation method is also provided. As one of the implementable ways, display the first page in the target area of the screen. In response to the event of triggering the floating window function, if the first page is the message page of the client and there is an upper-level page for the first page, then switch the target area to display the upper-level page and create a floating window on the screen. The floating window is in a display state and is identified by the icon associated with the floating window.

[0108] In this scenario, the above-mentioned new gesture involved in the above embodiment can also be used to trigger the floating window function, that is, when swiping along a preset direction on the first page, the screen of the first page moves on the screen, and continue to drag the screen of the first page to the preset area of the screen.

[0109] Since the first page is a message page, different from other types of pages such as videos and live broadcasts, the message page usually does not need to be constantly monitored, but the user needs to be able to quickly enter the message page when there is a new message. Therefore, in this embodiment, after the target area is switched from the message page to the upper-level page, the floating window created on the screen is in a display state, but the floating window is identified by the icon associated with the floating window, that is, it is abbreviated as an icon. This icon can identify the message page, and when the user sees this icon, they know that the floating window is the entrance to the message page.

[0110] Furthermore, when the client receives a new message, the receipt of the new message can be reflected on the message icon through a specific mark or number, etc.

[0111] Figure 7 The first page shown in (a) is a message page, which is a chat page between a user and another user. When the user makes a swiping gesture to the right, a visual effect of the screen of the first page moving will be produced. Continuing to drag the screen of the first page (i.e., the message page) to drag the first page to the right area of the screen, as Figure 7 shown in (b) below, prompt information such as "mini window" or an icon of a floating window can be displayed in this lower right corner area to prompt the user about the function of this area. Stopping dragging the first page (i.e., releasing the hand) can enter Figure 7 (c) below; in Figure 7 the target area shown in (c) above, the previous-level page (assumed to be the message list page) is displayed, a floating window is created on the screen, and the floating window is in a displayed state but is shrunk to a message icon.

[0112] The page displayed in the target area can continue to switch, for example, switch to the video playback page shown in Figure 7 (d) below. If a new message is received, then as Figure 7 shown in (d) below, a red dot is used to mark the received new message on the floating window. The user can directly enter the Figure 7 message page shown in (a) above by clicking on the floating window. Correspondingly, in response to the floating window being clicked, the message page corresponding to the received new message can be displayed in the target area, and at the same time, the floating window is deleted.

[0113] In addition to the above implementation methods, a floating window can also be created after a new message is received. That is, as another implementable method, in response to the user terminal receiving a new message, a floating window is created on the screen, and the floating window is in a displayed state and is identified by an icon associated with the floating window.

[0114] As Figure 8 shown in (a) below, the first page displayed in the target area of the screen is the video playback page. If the user terminal receives a new message, then as Figure 8 shown in (b) below, a floating window is created on the screen, the floating window is in a displayed state but is shrunk to a message icon, and a red dot is used to mark the received new message on the floating window. The user can directly enter the message page by clicking on the floating window. Correspondingly, in response to the floating window being clicked, the message page corresponding to the received new message can be displayed in the target area (the message page can cover the video playback page or jump from the video playback page to the message page), and at the same time, the floating window is deleted.

[0115] In the embodiments of the present application, for special scenarios such as video playback or live streaming, another new implementation method is provided. That is, if the first page includes video content or live streaming content, and an event for triggering the display of the second panel is monitored, the second panel is displayed on the first page. The second panel partially covers the first page, and the screen of the video content or live streaming content is reduced. In response to the event for triggering the full-screen display of the second panel, the display area of the second panel is expanded to completely cover the first page, and a floating window is created on the screen. The floating window is in a display state and displays the target content included in the first page. Among them, the second panel can be a panel displayed by triggering a specific component on the first page, such as a panel for comments corresponding to a comment component, or a panel for shopping corresponding to a shopping cart component.

[0116] For example Figure 9 Video content 1 is played on the first page shown in (a). Click the "comment component", then as shown in Figure 9 (b), the second panel is displayed on the first page. The second panel partially covers the first page. When clicking the "magnify component" on the second panel or pulling up the second panel, the second panel is expanded to completely cover the first page, and a floating window is created. The floating window is in a display state and displays the video content 1 played on the first page, as shown in Figure 9 (c).

[0117] Furthermore, if the user triggers to return from the second panel to the first page, such as clicking the return key, clicking the "close" component on the second panel, etc. Then, in response to the event for returning the target area from the second panel to display the first page, the user terminal displays the first page in the target area and deletes the created floating window at the same time.

[0118] Or, if the user triggers the floating window when the second panel is displayed, in response to the event for triggering the floating window, the target area of the screen is switched to display the content included in the floating window, and the floating window is deleted. For example, if the user clicks the floating window shown in Figure 9 (c), then the interface shown in Figure 9 (a) is displayed.

[0119] In the above embodiments, the user can manually trigger to switch the floating window from the display state to the hidden state. For example, as shown in Figure 4 (a), click the fourth component on the floating window (which can be an icon ">" indicating to hide the floating window), then the floating window is switched to the hidden state and the second component corresponding to the floating window is displayed, as shown in Figure 4 (b). The second component can be used to identify the hidden floating window on the one hand, and can also be used to trigger the floating window to switch back from the hidden state to the display state on the other hand. As shown in Figure 4 (b), the second component is only displayed at the edge of the screen. If the user clicks the second component, the floating window can be switched back to, as shown inFigure 4 The display state shown in (a) in

[0120] Furthermore, in each of the above embodiments, when the floating window is in the display state, the client can record the position of the floating window on the screen, and when an operation event for adjusting the floating window is monitored, display the floating window at the adjusted target position and update the recorded target position. In response to the event that the floating window switches from the hidden state to the display state, display the floating window at the currently recorded target position. For example, the user can drag the floating window to other positions on the screen, and the adjusted position is recorded as the target position. In this way, when the user triggers the display of the floating window next time, it is directly displayed at the adjusted position.

[0121] The specific embodiments of this specification are described above. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve the desired results. Additionally, the processes depicted in the drawings do not necessarily require the specific order or sequential order shown to achieve the desired results. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0122] According to an embodiment of another aspect, a page display device is provided. Figure 10 A schematic block diagram showing the page display device, the device is provided in Figure 1 the client in the architecture shown. As Figure 10 shown, the device 1000 includes: a page display unit 1001 and a page monitoring unit 1002. The main functions of each component unit are as follows:

[0123] The page display unit 1001 is configured to display a first page in a target area of the screen;

[0124] The page monitoring unit 1002 is configured to perform event monitoring;

[0125] The page display unit 1001 is further configured to, in response to an event that triggers the opening of the floating window function, if there is no upper-level page for the first page, create a floating window on the screen, display the target content included in the first page in the floating window, and switch the floating window from the display state to the hidden state; in response to an event of page switching, switch the target area to display a second page, and switch the floating window from the hidden state to the display state; wherein, the size of the floating window is smaller than the page size, and the display layer of the floating window is higher than the page layer, and the page includes the first page and the second page.

[0126] Further, when the first page is displayed on the page display unit 1001, in response to the page monitoring unit 1002 monitoring that the target content included in the first page has changed, the target content included in the first page displayed in the floating window also changes accordingly.

[0127] Further, the page display unit 1001 is further configured to: in response to the page monitoring unit 1002 monitoring an event of switching the target area back to the first page from the second page, switch the floating window from the display state to the hidden state.

[0128] As one possible implementation, if there is no upper-level page for the first page, the event that triggers the floating window function includes the event that the first component is triggered. The first component is displayed on the first page or on the first panel, and the first panel is generated in response to the first operation gesture on the first page.

[0129] As another possible implementation, the page display unit 1001 is further configured to: in response to the page monitoring unit 1002 monitoring an event that triggers the floating window function, if there is an upper-level page for the first page, switch the target area to display the upper-level page, and create a floating window on the screen. The floating window is in the display state and displays the target content included in the first page;

[0130] Among them, the event that triggers the floating window function includes: the screen of the first page moves on the screen due to sliding in a preset direction on the first page, and the screen of the first page is continuously dragged to a preset area of the screen.

[0131] As yet another possible implementation, the page display unit 1001 is further configured to: if the first page is the message page of the user terminal and there is an upper-level page for the first page, switch the target area to display the upper-level page, and create a floating window on the screen. The floating window is in the display state and is identified by an icon associated with the floating window; or,

[0132] In response to the user terminal receiving a new message, create a floating window on the screen. The floating window is in the display state and is identified by an icon associated with the floating window.

[0133] As yet another possible implementation, the page display unit 1001 is further configured to: if the first page is video content, in response to the page monitoring unit 1002 monitoring an event that triggers the display of the second panel, display the second panel, and the second panel partially covers the first page; in response to the page monitoring unit 1002 monitoring an event that triggers the full-screen display of the second panel, expand the display area of the second panel to completely cover the first page, and create a floating window on the screen. The floating window is in the display state and displays the target content included in the first page.

[0134] Further, the page display unit 1001 is further configured to: in response to the page monitoring unit 1002 monitoring an event that the target area returns from the second panel to display the first page, delete the created floating window.

[0135] Further, the page display unit 1001 is further configured to: in response to the page monitoring unit 1002 monitoring that the floating window switches from the display state to the hidden state, display a second component corresponding to the floating window, where the size of the second component is smaller than the size of the floating window, and the second component is used to switch the floating window to the display state after being triggered.

[0136] As one possible implementation, the page display unit 1001 is further configured to: when the floating window is in the display state, in response to the page monitoring unit 1002 monitoring an operation event for adjusting the floating window, display the floating window at the adjusted target position, and update the recorded target position; in response to the page monitoring unit 1002 monitoring an event that the floating window switches from the hidden state to the display state, display the floating window at the currently recorded target position.

[0137] As one possible implementation, the page display unit 1001 is further configured to: when the floating window is in the display state, in response to the page monitoring unit 1002 monitoring an event for triggering the floating window, switch the target area to display the content included in the floating window, and delete the floating window.

[0138] Each embodiment in this specification is described in a progressive manner. For the same or similar parts among the embodiments, reference can be made to each other. Each embodiment focuses on the differences from other embodiments. In particular, for the system or device embodiments, since they are basically similar to the method embodiments, the description is relatively simple. For the relevant parts, reference can be made to the partial description of the method embodiments. The system and device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. A person of ordinary skill in the art can understand and implement it without creative work.

[0139] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0140] In addition, an embodiment of the present application further provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the steps of any one of the methods in the aforementioned method embodiments are implemented.

[0141] And an electronic device, comprising:

[0142] one or more processors; and

[0143] A memory associated with the one or more processors, the memory being used to store program instructions, wherein the program instructions, when read and executed by the one or more processors, execute the steps of the method described in any one of the aforementioned method embodiments.

[0144] The present application also provides a computer program product, including a computer program, which implements the steps of any one of the methods in the aforementioned method embodiments when executed by a processor.

[0145] in, Figure 11 The architecture of the electronic device is shown as an example, which may include a processor 1110, a video display adapter 1111, a disk drive 1112, an input / output interface 1113, a network interface 1114, and a memory 1120. The processor 1110, the video display adapter 1111, the disk drive 1112, the input / output interface 1113, the network interface 1114, and the memory 1120 may be communicatively connected via a communication bus 1130.

[0146] Among them, the processor 1110 can be implemented by a general-purpose CPU, a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, etc., to execute relevant programs to implement the technical solutions provided in this application.

[0147] The memory 1120 may be implemented in the form of a ROM (Read Only Memory), a RAM (Random Access Memory), a static storage device, a dynamic storage device, etc. The memory 1120 may store an operating system 1121 for controlling the operation of the electronic device 1100, and a Basic Input / Output System (BIOS) 1122 for controlling the low-level operations of the electronic device 1100. Additionally, a web browser 1123, a data storage management system 1124, a page display device 1000, etc. may also be stored. The above-mentioned page display device 1000 may be an application program that specifically implements the operations of the foregoing steps in the embodiments of the present application. In summary, when implementing the technical solution provided by the present application through software or firmware, the relevant program codes are stored in the memory 1120 and are called and executed by the processor 1110.

[0148] The input / output interface 1113 is used to connect to an input / output module to achieve information input and output. The input / output module may be configured as a component in the device (not shown in the figure) or may be externally connected to the device to provide corresponding functions. Among them, the input devices may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output devices may include a display, a speaker, a vibrator, an indicator light, etc.

[0149] The network interface 1114 is used to connect to a communication module (not shown in the figure) to achieve communication interaction between this device and other devices. Among them, the communication module may achieve communication through a wired method (such as USB, network cable, etc.) or may achieve communication through a wireless method (such as a mobile network, WIFI, Bluetooth, etc.).

[0150] The bus 1130 includes a path for transmitting information between various components of the device (such as the processor 1110, the video display adapter 1111, the disk drive 1112, the input / output interface 1113, the network interface 1114, and the memory 1120).

[0151] It should be noted that although the above device only shows the processor 1110, the video display adapter 1111, the disk drive 1112, the input / output interface 1113, the network interface 1114, the memory 1120, the bus 1130, etc., in the specific implementation process, the device may also include other components necessary for normal operation. In addition, those skilled in the art can understand that the above device may also only include the components necessary for implementing the solution of the present application and does not necessarily include all the components shown in the figure.

[0152] From the description of the above embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of this application, in essence or the part that contributes to the prior art, can be embodied in the form of a computer program product, which can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., including several instructions for causing a computer device (which can be a personal computer, server, or network device, etc.) to execute the methods described in various embodiments or some parts of the embodiments of this application.

[0153] The above provides a detailed introduction to the technical solution provided by this application. Specific examples are used in this article to elaborate on the principle and implementation manner of this application. The description of the above embodiments is only used to help understand the method and its core idea of this application; at the same time, for those of ordinary skill in the art, according to the idea of this application, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation to this application.

Claims

1. A page display method, applied to a user terminal, characterized in that, The method includes: Display a first page in a target area of the screen; In response to an event of triggering the floating window function, if there is no upper-level page for the first page, create a floating window on the screen, display the target content included in the first page in the floating window, and switch the floating window from the display state to the hidden state; In response to an event of page switching, switch the target area to display a second page, and switch the floating window from the hidden state to the display state; Wherein, the size of the floating window is smaller than the page size, and the display layer of the floating window is higher than the page layer, and the page includes the first page and the second page.

2. The method according to claim 1, wherein The method further includes: When displaying the first page, in response to a change in the target content included in the first page, the target content included in the first page displayed in the floating window also changes accordingly.

3. The method according to claim 1, characterized in that The method further includes: In response to an event of switching the target area back from the second page to the first page, switch the floating window from the display state to the hidden state.

4. The method according to claim 1, wherein If there is no upper-level page for the first page, the event of triggering the floating window function includes an event of a first component being triggered, the first component is displayed on the first page, or the first component is displayed on a first panel, and the first panel is generated in response to a first operation gesture on the first page.

5. The method according to claim 1, characterized in that, The method further includes: In response to an event of triggering the floating window function, if there is an upper-level page for the first page, switch the target area to display the upper-level page, and create a floating window on the screen, the floating window is in the display state and displays the target content included in the first page; Wherein, the event of triggering the floating window function includes: the screen image of the first page moves on the screen due to a slide along a preset direction on the first page, and continue to drag the screen image of the first page to a preset area of the screen.

6. The method according to claim 1, wherein The method further includes: If the first page is the message page of the user terminal and there is an upper-level page for the first page, switch the target area to display the upper-level page, and create a floating window on the screen, the floating window is in the display state and is identified by an icon associated with the floating window; or, In response to the user terminal receiving a new message, create a floating window on the screen, the floating window is in the display state and is identified by an icon associated with the floating window.

7. The method according to claim 1, characterized in that, The method further includes: If the first page is video content or live broadcast content, in response to an event of triggering the display of a second panel, display the second panel, the second panel partially covers the first page, and shrink the screen image of the video content or live broadcast content; In response to an event of triggering the full-screen display of the second panel, expand the display area of the second panel to completely cover the first page, and create a floating window on the screen, the floating window is in the display state and displays the target content included in the first page.

8. The method according to claim 7, characterized in that In response to an event of switching the target area back from the second panel to display the first page, delete the created floating window.

9. The method according to any one of claims 1 to 8, characterized in that, When the floating window is in the display state, in response to an operation event for adjusting the floating window, display the floating window at the adjusted target position and update the recorded target position; In response to the event that the floating window switches from the hidden state to the display state, display the floating window at the currently recorded target position.

10. The method according to any one of claims 1 to 8, characterized in that, The method further includes: When the floating window is in the display state, in response to an event for triggering the floating window, switch the target area to display the content included in the floating window and delete the floating window.

11. A page display device, applied to a user terminal, characterized in that, The device includes: A page display unit configured to display a first page in a target area of the screen; A page monitoring unit configured to perform event monitoring; The page display unit is further configured to, in response to an event for triggering the floating window function, if there is no upper-level page for the first page, create a floating window on the screen, display the target content included in the first page in the floating window, and switch the floating window from the display state to the hidden state; In response to an event of page switching, switch the target area to display a second page and switch the floating window from the hidden state to the display state; Wherein, the size of the floating window is smaller than the page size, and the display layer of the floating window is higher than the page layer, and the page includes the first page and the second page.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 10.

13. An electronic device, characterized in that, Including: One or more processors; And A memory associated with the one or more processors, the memory being used to store program instructions, and when the program instructions are read and executed by the one or more processors, the steps of the method according to any one of claims 1 to 10 are executed.

14. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 10.

Images