Interface display method and device, electronic equipment and computer program product

Abstract

The invention discloses an interface display method and device, electronic equipment and a computer program product, and relates to the technical field of interface design. The interface display method comprises the steps that after it is detected that a target interface rolls, the rolling height of the target interface is obtained; when the rolling height is larger than or equal to a preset height threshold value, a page top Header of the target interface is set to be in a hidden state, a tab Tabs of the target interface is set to be in a ceiling state, in the hidden state, the page top Header is hidden from a current display picture of the target interface, and in the ceiling state, the tab Tabs is fixedly displayed on the top of the current display picture. According to the method, the page head elements can be reasonably arranged, and a larger information display area is provided.

Description

Technical Field

[0001] The present application relates to the technical field of interface design, and in particular to an interface display method, device, electronic device and computer program product. Background Art

[0002] With the popularization of Internet technology and mobile devices, users are increasingly relying on various online platforms and services. In web design and mobile application development, the design of the user interface is crucial to providing a good user experience. In particular, when dealing with long pages with a lot of information, how to reasonably arrange the page header elements (header and tabs) to avoid the limited information display area in the user interface caused by the fixed top of the header and the ceiling of the tabs has become a problem that needs to be solved urgently. Summary of the invention

[0003] The main purpose of the present application is to provide an interface display method, device, electronic device and computer program product, aiming to solve the technical problem in the related technology that the arrangement of page header elements is unreasonable, resulting in limited information display area.

[0004] To achieve the above object, the present application provides an interface display method, the interface display method comprising:

[0005] After detecting that the target interface is scrolling, obtaining the scrolling height of the target interface;

[0006] When the scrolling height is greater than or equal to a preset height threshold, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state, wherein in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed on the top of the current display screen.

[0007] In one embodiment, after the step of obtaining the scroll height of the target interface, the method further includes:

[0008] When the scroll height is less than a preset height threshold, the top Header of the target interface is set to a display state, and the tabs of the target interface are set to a flow state, wherein in the display state, the top Header is fixedly displayed on the top of the current display screen of the target interface, and in the flow state, the tabs are displayed in a flow manner in the current display screen.

[0009] In one embodiment, when the scroll height is greater than or equal to a preset height threshold, the step of setting the page top Header of the target interface to a hidden state and setting the tabs of the target interface to a ceiling state includes:

[0010] When the scrolling height is greater than or equal to a preset height threshold and the target interface scrolls by a first scrolling method, the top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state, wherein the first scrolling method is to scroll by clicking on the tabs.

[0011] In one embodiment, when the scroll height is greater than or equal to a preset height threshold, the step of setting the page top Header of the target interface to a hidden state and setting the tabs of the target interface to a ceiling state includes:

[0012] When the scrolling height is greater than or equal to a preset height threshold, and the target interface scrolls in a second scrolling manner, obtaining a scrolling direction of the target interface, wherein the second scrolling manner is a scrolling manner other than the first scrolling manner;

[0013] When the scrolling direction is the first scrolling direction, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state.

[0014] In one embodiment, the second scrolling method is scrolling by sliding a mouse wheel, scrolling by dragging a scroll bar, or scrolling by clicking a scroll key on a keyboard.

[0015] In one embodiment, after the step of obtaining the scrolling direction of the target interface, the method further includes:

[0016] When the scrolling direction is a second scrolling direction, obtaining a scrolling speed of the target interface, wherein the second scrolling direction is opposite to the first scrolling direction;

[0017] When the scrolling speed is less than or equal to a preset speed threshold, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state.

[0018] In one embodiment, after the step of obtaining the scrolling speed of the target interface, the method further includes:

[0019] When the scrolling speed is greater than a preset speed threshold, the page top Header of the target interface is set to a display state, and the tabs of the target interface are set to a ceiling state.

[0020] In addition, to achieve the above-mentioned purpose, the present application also provides an interface display device, the interface display device comprising:

[0021] A data acquisition module, used to acquire the scrolling height of the target interface after detecting that the target interface has scrolled;

[0022] The display judgment module is used to set the page top Header of the target interface to a hidden state and the tabs of the target interface to a ceiling state when the scrolling height is greater than or equal to a preset height threshold, wherein in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed on the top of the current display screen.

[0023] In addition, to achieve the above-mentioned purpose, the present application also provides an electronic device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the computer program is executed by the processor, the steps of the interface display method as described above are implemented.

[0024] In addition, to achieve the above-mentioned purpose, the present application also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the steps of the interface display method as described above are implemented.

[0025] The embodiments of the present application provide an interface display method, device, electronic device and computer program product. The technical solution of the embodiments of the present application is to obtain the scrolling height of the target interface after detecting that the target interface has scrolled; when the scrolling height is greater than or equal to a preset height threshold, the page top Header of the target interface is set to a hidden state, and the tabs Tabs of the target interface are set to a ceiling state, wherein, in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs Tabs are fixedly displayed on the top of the current display screen, so that the present application can reasonably arrange the Header and Tabs in the page header elements according to the scrolling height, provide users with a larger information display area, avoid excessive screen crowding, and thus solve the technical problem of unreasonable arrangement of page header elements in the related technology, resulting in limited information display area. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] 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 present application.

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

[0028] Figure 1 A flowchart of the first embodiment of the interface display method of the present application is provided;

[0029] Figure 2 A flowchart of the second embodiment of the interface display method of the present application is provided;

[0030] Figure 3 A flowchart of the third embodiment of the interface display method of the present application is provided;

[0031] Figure 4 This is a schematic diagram of the module structure of the interface display device according to an embodiment of the present application;

[0032] Figure 5 This is a schematic diagram of the device structure of the hardware operating environment involved in the interface display method in the embodiment of the present application.

[0033] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0034] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0035] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0036] Currently, most web pages and mobile applications generally use the following two strategies in interface design to handle Headers and Tabs in page header elements:

[0037] Header fixed top: This strategy means that no matter how the user scrolls the page, the Header will remain at the top of the screen. The advantage of this strategy is that the navigation, logo and other brand elements are always visible, which is convenient for users to visit other pages at any time and improves brand recognition. The disadvantage is that it takes up screen space, compresses part of the page content area, and makes the screen look a little crowded.

[0038] Tabs stick to the top: This strategy means that when the user scrolls down the page more than a certain distance, the tabs will be "stick to the top", that is, fixed to the top of the screen. The advantage of this strategy is that it can keep the content organization structure clear, and it is convenient for users to quickly switch tabs when browsing long lists or multiple parts of content. The disadvantage is that it will further occupy screen space, compress more page content area, and make the screen too crowded.

[0039] The main solution of the embodiment of the present application is: after detecting that the target interface has scrolled, obtaining the scrolling height of the target interface; when the scrolling height is greater than or equal to a preset height threshold, setting the top Header of the target interface to a hidden state, and setting the tabs of the target interface to a ceiling state, wherein in the hidden state, the top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed on the top of the current display screen.

[0040] The embodiment of the present application can reasonably arrange the Header and Tabs in the page header elements through the scroll height, provide users with a larger information display area, avoid overcrowding of the screen, and thus solve the technical problem in the related technology that the page header elements are unreasonablely arranged, resulting in limited information display area.

[0041] It should be noted that the execution subject of the embodiments of the present application is an electronic device, which may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs (Televisions), desktop computers, etc., or any electronic device that can achieve the above functions, and the embodiments of the present application do not specifically limit this. The following embodiments of the present application are described by taking the electronic device as the execution subject as an example.

[0042] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0043] This application proposes a first embodiment of the interface display method, please refer to Figure 1 , Figure 1 A flowchart diagram of the first embodiment of the interface display method of the present application.

[0044] In this embodiment, the method includes steps S100 to S200:

[0045] Step S100, after detecting that the target interface is scrolled, obtaining the scrolling height of the target interface;

[0046] Step S200, when the scrolling height is greater than or equal to a preset height threshold, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state, wherein in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed at the top of the current display screen.

[0047] It should be noted that, in this embodiment, the target interface refers to the specific web page or mobile application interface currently being viewed and interacted with on the screen. The target interface is a long page, and the user needs to scroll the target interface in the visible window of the screen to view the complete content of the target interface. The current display screen of the target interface is the screen displayed by the target interface in the visible window.

[0048] Those skilled in the art will know that in computer graphics and user interface design, the coordinate system of an interface or window is usually in pixels, with the upper left corner vertex as the origin (0,0), the right as the positive direction of the horizontal axis, and the bottom as the positive direction of the vertical axis. In this embodiment, the target interface is a long page, and its pixel height (that is, the number of pixels in the vertical direction) is greater than the window height of the visible window (that is, the number of pixels that can be displayed by the visible window in the vertical direction). In the initial state, the top of the target interface overlaps with the top of the visible window of the target interface on the screen, that is, the upper left corner vertex of the visible window has a vertical coordinate of 0 in the coordinate system of the target interface (hereinafter referred to as the interface coordinate system). When the target interface scrolls, the vertical coordinate of the upper left corner vertex of the visible window in the interface coordinate system is increased by 1 for every pixel scrolled downward (that is, in the positive direction of the vertical axis of the interface coordinate system).

[0049] Those skilled in the art also know that the header is a bar area located at the top of the target interface, which usually includes navigation links, logos, search boxes and other elements, and is usually designed to be fixedly displayed at the top of the visible window, that is, fixedly displayed at the top of the current display screen. Tabs are UI (UserInterface) elements used to organize and classify content in the target interface. Users can jump or scroll to different positions of the target interface by clicking on different tabs, thereby switching the content displayed in the visible window, and tabs are usually designed to be displayed on the top, that is, when the target interface is scrolled down (that is, scrolled in the positive direction of the vertical axis of the interface coordinate system) to the top of the visible window where the tabs are close to the top of the visible window, they are automatically adsorbed to the top of the visible window and fixedly displayed, and do not change with the scrolling of the target interface, until the target interface is scrolled up (that is, scrolled in the negative direction of the vertical axis of the interface coordinate system) to the tabs and their original position in the target interface, the tabs automatically detach from the top of the visible window and change with the scrolling of the target interface.

[0050] In this embodiment, the scroll height is used to quantify the degree of change of the target interface relative to its initial position, which can be expressed by the scroll distance or the scroll percentage. Among them, the scroll distance refers to how many pixels the target interface has scrolled down relative to its initial position, and the scroll percentage refers to the number of pixels that the target interface has scrolled down relative to its initial position, accounting for the total number of pixels that the target interface can scroll down relative to its initial position. It should be noted that the total number of pixels that the target interface can scroll down relative to its initial position can be calculated by subtracting the window height of the visible window from the pixel height of the target interface.

[0051] Those skilled in the art will know that in interface design, special parameters are usually set to record the scrolling distance and scrolling percentage. Therefore, this embodiment can directly call the parameters specifically used to record the scrolling distance or scrolling percentage to obtain the scrolling height of the target interface. Correspondingly, the scrolling distance or scrolling percentage can also be calculated by obtaining relevant parameters through the definition of the scrolling distance or scrolling percentage. Among them, the scrolling distance can also be obtained through the vertical coordinates of the pixel points located at the top layer of the visual window, such as the upper left corner vertex and the upper right corner vertex of the visual window, in the interface coordinate system.

[0052] It is not difficult to understand that in addition to the scroll distance and the scroll percentage, the scroll height can also be represented by other parameters, such as the scroll bar position of the target interface.

[0053] In this embodiment, the preset height threshold is a pre-designed standard for determining whether the scroll height of the target interface reaches a level that requires changing the status of the page top Header and the tabs in the visible window.

[0054] In this embodiment, the page header is located at the top of the target interface, and the tabs are located below the page header in the target interface. Page elements such as banners can be inserted between the page header and the tabs, or the two can be directly connected. The preset height threshold in this embodiment can be determined based on the element height of the page header (that is, the pixel height of the page element, the number of pixels of the page element in the vertical direction), the minimum value of the vertical coordinate of the tabs in the interface coordinate system, the pixel height of the target interface, and the window height of the visible window.

[0055] Exemplarily, when the window height of the visible window is 100, the pixel height of the target interface is 200, the pixel width (i.e., the number of pixels in the horizontal direction) is 100, the coordinates of the top Header in the target interface in the interface coordinate system are the upper left vertex coordinate (0,0), the upper right vertex coordinate (100,0), the lower left vertex coordinate (0,10), and the lower right vertex coordinate (100,10), and the coordinates of the tabs in the interface coordinate system are the upper left vertex coordinate (0,20), the upper right vertex coordinate (100,20), the lower left vertex coordinate (0,30), and the lower right vertex coordinate (100,40), the element height of the top Header is 10, and the minimum value of the vertical coordinate of the tabs in the interface coordinate system is 20. At this time, if the scroll height is represented by the scroll distance, the preset height threshold can be the difference of 10 between the minimum value of the vertical coordinate of the tabs in the interface coordinate system, 20, and the element height of the top Header, 10. If the scroll height is expressed by scroll percentage, the preset height threshold can also be the difference between the minimum vertical coordinate of the tabs in the interface coordinate system 20 and the element height of the top Header 10, which is 10%, divided by the difference between the pixel height of the target interface 200 and the window height 100, which is 10%.

[0056] In this embodiment, after detecting that the target interface has scrolled, the scroll height of the target interface is first obtained, and then it is determined whether the scroll height is greater than or equal to a preset height threshold, and whether it is necessary to set the page Header to a hidden state and set the tabs to a ceiling state. Then, when the scroll height is greater than or equal to the preset height threshold, the page top Header is set to a hidden state to hide it from the visible window (that is, in the hidden state, the page top Header is hidden from the current display screen of the target interface), and the tabs are set to a ceiling state to adsorb it to the top of the visible window and display it fixedly (that is, in the ceiling state, the tabs are fixedly displayed on the top of the current display screen).

[0057] Those skilled in the art will appreciate that the scroll detection in the related art is very sensitive, can easily distinguish different scroll events, and has a very fast response speed.

[0058] Based on this, after detecting that the target interface is scrolling, this embodiment can continuously and in real time obtain parameters such as the scroll height of the target interface (such as the scroll direction and scroll speed described below) in this scrolling event, and make relevant judgments. Once the judgment result indicates that the state of the page header element in the visible window needs to be modified (for example, the page header is originally in a display state, and the judgment result indicates that it needs to be set to a hidden state; for example, the tabs are originally in a flowing state, and the judgment result indicates that it needs to be set to a ceiling state), this embodiment will immediately modify the state of the page header element in the visible window according to the judgment result. When modifying the state of the page header element in the visible window, in order to make the changes of the page header elements in the current display window more smooth and natural, when the top Header of the page changes from the display state to the hidden state, the top Header of the page can be made transparent at a certain speed until it is completely transparent, or the top Header of the page can be made flat at a certain speed until it is compressed into a line that coincides with the top boundary line of the visible window, or the top Header of the page can be made flat at a certain speed until it is fixed and hidden above the top boundary line of the visible window by moving it up and hiding it. When the top Header of the page changes from the hidden state to the display state, it can also be gradually displayed at the top of the visible window in the opposite way.

[0059] Furthermore, after step S100, this embodiment further includes step S300:

[0060] Step S300, when the scrolling height is less than a preset height threshold, the page top Header of the target interface is set to a display state, and the tabs of the target interface are set to a flow state, wherein in the display state, the page top Header is fixedly displayed on the top of the current display screen of the target interface, and in the flow state, the tabs are displayed in a flow manner in the current display screen.

[0061] In this embodiment, after detecting that the target interface is scrolling, the scroll height of the target interface is first obtained, and then it is determined whether the scroll height is less than a preset height threshold, and whether it is necessary to set the page Header to a display state and set the tabs to a flowing state. Then, when the scroll height is less than the preset height threshold, the page Header is set to a display state so that it is fixedly displayed at the top of the visible window (that is, in the display state, the page top Header is fixedly displayed at the top of the current display screen of the target interface), and the tabs are set to a flowing state so that they are separated from the top of the visible window and change with the scrolling of the target page (that is, in the flowing state, the tabs are displayed in a flowing manner in the current display screen).

[0062] This embodiment detects the scrolling height of the target interface and adjusts the status of the page top Header and the tabs according to whether it reaches the preset height threshold, so that when the user scrolls the target interface of a long page, the changes of the interface elements (that is, the page top Header and the tabs in the page header element) are more reasonable. When the user scrolls the target interface but does not reach a certain scrolling height, the page top Header is fixedly displayed at the top of the visible window, and the target interface is displayed normally. When the user scrolls the target interface beyond a certain scrolling height, in order to avoid the screen being too crowded, the page top Header will be automatically hidden to reduce the obstruction of the content. At the same time, the tabs will become the ceiling state, automatically adsorbed to the top of the visible window, and kept within the user's visible range, so that the user can quickly switch content.

[0063] This embodiment allows the interface elements to dynamically adjust their display status according to the user's scrolling behavior, thereby improving the space utilization of the screen, so that the user can obtain a good browsing experience even when the screen size is limited.

[0064] This embodiment is based on common interface design elements such as Header and Tabs, and uses existing parameters such as scroll distance or scroll percentage as a basis for determination. It is easy to implement within the existing technical framework without the need for complex additional calculations or designs.

[0065] This embodiment detects that the target interface has scrolled and obtains the scroll height of the target interface; when the scroll height is greater than or equal to a preset height threshold, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state, wherein, in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed on the top of the current display screen, so that this embodiment can reasonably arrange the Header and Tabs in the page header elements according to the scroll height, provide users with a larger information display area, avoid overcrowding of the screen, and thereby solve the technical problem of unreasonable arrangement of page header elements in related technologies, resulting in limited information display area.

[0066] Furthermore, in a feasible implementation manner, step S200 may further include step S210:

[0067] Step S210, when the scrolling height is greater than or equal to a preset height threshold and the target interface scrolls by a first scrolling method, the top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state, wherein the first scrolling method is to scroll by clicking on the tabs.

[0068] It should be noted that, in this embodiment, clicking on the tabs can scroll to different positions of the target interface, and the position scrolled to by clicking on the tabs must be below the tabs, that is, the scrolling height of the target interface must be greater than or equal to the preset height threshold.

[0069] It is not difficult to understand that when the target interface scrolls using the first scrolling method, the content that the user is concerned about is obviously the content corresponding to the tabs. At this time, the user's demand is a larger content display area so that the user can have a better browsing experience. At the same time, the user may also click on the wrong tabs and need to click on the tabs again to scroll to other positions of the target interface to switch the content displayed in the visible window, or hope to continue browsing the content corresponding to other tabs after browsing the content corresponding to the current tab, that is, there is a need to click on the tabs.

[0070] Based on this, when this embodiment detects that the target interface is scrolling via the first scrolling method, the top header of the target interface is set to a hidden state, so that it is hidden from the visible window, thereby reducing obstruction of the content, providing users with a larger information display area, avoiding excessive screen crowding, and improving the browsing experience. The tabs of the target interface are set to a ceiling state, so that they are adsorbed to the top of the visible window and displayed fixedly. They do not change with the scrolling of the target interface and remain within the user's visible range, making it convenient for users to quickly switch content.

[0071] It can be understood that there are various scrolling methods for the target interface. In addition to the first scrolling method, you can also scroll by sliding the mouse wheel, scroll by dragging the scroll bar, scroll by clicking the keyboard scroll key, scroll by sliding the screen, etc. In this embodiment, a parameter can be set specifically for monitoring click events for the tabs Tabs. The value of this parameter can be 0 by default. When a click event for the tabs Tabs is monitored, the value of this parameter can be modified to 1 and restored to 0 after the scrolling is completed. Therefore, by detecting whether the value of this parameter is 1, it is determined whether the scrolling method of the target interface is the first scrolling method, that is, whether the target interface is scrolled by the first scrolling method.

[0072] Based on the above embodiments, the interface display method of the second embodiment of the present application is proposed, please refer to Figure 2 , Figure 2 A flowchart diagram of the second embodiment of the interface display method of the present application.

[0073] In this embodiment, the same or similar contents as those in the above embodiments can be referred to the above introduction and will not be described in detail later.

[0074] In this embodiment, step S200 may further include steps S220 to S230:

[0075] Step S220, when the scrolling height is greater than or equal to a preset height threshold, and the target interface scrolls in a second scrolling manner, obtaining a scrolling direction of the target interface, wherein the second scrolling manner is a scrolling manner other than the first scrolling manner;

[0076] Step S230, when the scrolling direction is the first scrolling direction, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state.

[0077] It should be noted that, in this embodiment, the second scrolling mode is a scrolling mode other than the first scrolling mode, such as scrolling by sliding a mouse wheel, scrolling by dragging a scroll bar, scrolling by clicking a keyboard scroll key, scrolling by sliding the screen, etc.

[0078] Exemplarily, in a feasible implementation manner, the second scrolling mode is scrolling by sliding a mouse wheel, scrolling by dragging a scroll bar, or scrolling by clicking a scroll key on a keyboard.

[0079] In this embodiment, similar to the method for determining whether the scrolling mode of the target interface is the first scrolling mode in the first embodiment, a special parameter can be set for each scrolling mode for monitoring, so as to determine the scrolling mode of the target interface and determine whether it is the second scrolling mode according to the value of the parameter corresponding to each scrolling mode. Alternatively, a special parameter can be set only for the first scrolling mode for monitoring, so as to determine whether the scrolling mode of the target interface is the first scrolling mode according to the value of the parameter corresponding to the first scrolling mode, and when it is not the first scrolling mode, it is the second scrolling mode.

[0080] It should be noted that the first scrolling direction in this embodiment refers to the positive direction of the longitudinal axis of the interface coordinate system.

[0081] In this embodiment, when the target interface scrolls using the second scrolling method, the scrolling height of the target interface is not necessarily greater than or equal to the preset height threshold. Therefore, after detecting that the target interface is scrolling, this embodiment can first obtain the scrolling height of the target interface, and after determining that the scrolling height is greater than or equal to the preset height threshold, obtain the scrolling method of the target interface to determine whether the target interface scrolls using the second scrolling method, so that when the scrolling height is greater than or equal to the preset height threshold and the target interface scrolls using the second scrolling method, the scrolling direction of the target interface is obtained to further determine how to set the state of the page header element in the visible window, and determine whether it is necessary to execute the steps of setting the page top Header of the target interface to a hidden state and setting the tabs of the target interface to a ceiling state.

[0082] In addition, after detecting that the target interface is scrolling, the scrolling mode of the target interface can be obtained first, and when it is determined that the scrolling mode of the target interface is the first scrolling mode, it is directly determined that the scrolling height of the target interface is greater than or equal to the preset height threshold, and the steps of setting the page header of the target interface to a hidden state and setting the tabs of the target interface to a ceiling state are executed, thereby reducing one judgment, extracting and completing the state setting of the page header element in the visible window, making the current display screen change more quickly and the overall response speed faster. Accordingly, when it is determined that the scrolling mode of the target interface is the second scrolling mode, it is necessary to obtain the scrolling height of the target interface in order to accurately determine whether it is greater than or equal to the preset height threshold, so that when the scrolling height is greater than or equal to the preset height threshold and the target interface scrolls through the second scrolling mode, the scrolling direction of the target interface is obtained to further determine how to set the state of the page header element in the visible window, and determine whether it is necessary to execute the steps of setting the page header of the target interface to a hidden state and setting the tabs of the target interface to a ceiling state.

[0083] It is worth mentioning that after detecting that the target interface has scrolled, it is also possible to obtain the parameters of the status settings of all relevant page header elements in the visible window (such as scroll height, scroll mode, scroll direction, and scroll speed in the third embodiment described below, etc.) at one time, and then make judgments layer by layer or complete all judgments at one time to determine and complete the status settings of the page header elements in the visible window.

[0084] It is not difficult to understand that when the scrolling height of the target interface is greater than or equal to the preset height threshold and the scrolling direction is the first scrolling direction, the content that the user is concerned about is obviously the tabs, the content corresponding to the tabs, or the content below. At this time, the user's demand is a larger content display area so that the user can get a better browsing experience. At the same time, the user also has the need to click on the tabs.

[0085] Based on this, when this embodiment detects that the scrolling height of the target interface is greater than or equal to the preset height threshold and the scrolling direction is the first scrolling direction, the top header of the target interface is set to a hidden state, so that it is hidden from the visible window, reducing obstruction of the content, providing users with a larger information display area, avoiding excessive screen crowding, and improving the browsing experience. The tabs of the target interface are set to a ceiling state, so that they are adsorbed to the top of the visible window and displayed fixedly. They do not change with the scrolling of the target interface and remain within the user's visible range, making it convenient for users to quickly switch content.

[0086] Based on the above embodiments, the interface display method of the third embodiment of the present application is proposed, please refer to Figure 3 , Figure 3A flowchart diagram of the third embodiment of the interface display method of the present application.

[0087] In this embodiment, the same or similar contents as those in the above embodiments can be referred to the above introduction and will not be described in detail later.

[0088] In this embodiment, after step S230, steps S240 to S250 may also be included:

[0089] Step S240, when the scrolling direction is a second scrolling direction, obtaining a scrolling speed of the target interface, wherein the second scrolling direction is opposite to the first scrolling direction;

[0090] Step S250, when the scrolling speed is less than or equal to a preset speed threshold, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state.

[0091] It should be noted that, in this embodiment, the second scrolling mode is opposite to the first scrolling direction, which is the negative direction of the longitudinal axis of the interface coordinate system. The scrolling speed refers to the speed of scrolling in a certain scrolling direction, which can be measured in pixels per second.

[0092] It is not difficult to understand that when the scrolling direction of the target interface is the second scrolling direction, the content that the user is concerned about is obviously the content above the current display screen, including the page top Header, and also includes the corresponding content of the tabs located above the current display screen. In order to further determine the content that the user is actually concerned about, this embodiment introduces the scrolling speed, and through the speed of the scrolling, it is determined whether the user wants to return to the top of the target interface and use the various functional services provided by the page top Header, or wants to browse the corresponding content of the tabs located above the current display screen.

[0093] In this embodiment, the preset speed threshold is a pre-designed standard used to determine whether the scrolling speed of the target interface in the second scrolling direction reaches a level that requires changing the state of the page top Header and the tabs in the visible window, that is, to determine whether the user wants to return to the top of the target interface to use the various functional services provided by the page top Header, or wants to browse the corresponding content of the tabs located above the current display screen. The preset speed threshold is an empirical value obtained through multiple experimental estimates, and can also be set by the user according to personal habits and preferences.

[0094] In this embodiment, when the scrolling speed is less than the preset speed threshold, it is deemed that the user wishes to browse the content corresponding to the tabs located above the currently displayed screen. Therefore, this embodiment sets the top Header of the target interface to a hidden state to hide it from the visible window, reduce obstruction of the content, provide users with a larger information display area, avoid excessive screen crowding, and improve browsing experience. The tabs of the target interface are set to a ceiling state to adsorb them to the top of the visible window for fixed display, and do not change with the scrolling of the target interface. They remain within the user's visible range, making it convenient for users to quickly switch content.

[0095] After step S240, step S260 may also be included:

[0096] Step S260: When the scrolling speed is greater than a preset speed threshold, the top Header of the target interface is set to a display state.

[0097] In this embodiment, when the scrolling speed is greater than or equal to the preset speed threshold, it is regarded that the user wishes to return to the top of the target interface and use the various functional services provided by the top header. Therefore, this embodiment sets the top header to the display state so that it is fixedly displayed at the top of the visible window, that is, fixedly displayed at the top of the currently displayed screen, so that the user can use the various functional services provided by the top header.

[0098] It should be noted that, in this embodiment, the display level (i.e., layer) of the top header is higher than that of the tabs. That is, when the top header and the tabs are both displayed and overlap with each other, the top header is displayed on the upper layer of the tabs, which will cover the part of the tabs that overlaps with the top header, ensuring that the top header can be displayed completely.

[0099] It is worth mentioning that when the element height of the top Header is smaller than the element height of the tabs, this embodiment will set the tabs to a flowing state when the top Header of the target interface is set to a display state, canceling its top-mounted state, or set the tabs to a hidden state to make them invisible in the visible window, so as to avoid the overlapping display of the top Header and the tabs, which will bring a bad browsing experience to the user.

[0100] In addition, please refer to Figure 4 , Figure 4 This is a schematic diagram of the module structure of the interface display device according to an embodiment of the present application.

[0101] The embodiment of the present application further provides an interface display device, the interface display device comprising:

[0102] The data acquisition module 10 is used to acquire the scrolling height of the target interface after detecting that the target interface has scrolled;

[0103] The display judgment module 20 is used to set the page top Header of the target interface to a hidden state and the tabs of the target interface to a ceiling state when the scrolling height is greater than or equal to a preset height threshold, wherein in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed on the top of the current display screen.

[0104] In one embodiment, the display determination module 20 is further configured to:

[0105] When the scroll height is less than a preset height threshold, the top Header of the target interface is set to a display state, and the tabs of the target interface are set to a flow state, wherein in the display state, the top Header is fixedly displayed on the top of the current display screen of the target interface, and in the flow state, the tabs are displayed in a flow manner in the current display screen.

[0106] In one embodiment, the display determination module 20 is further configured to:

[0107] When the scrolling height is greater than or equal to a preset height threshold and the target interface scrolls by a first scrolling method, the top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state, wherein the first scrolling method is to scroll by clicking on the tabs.

[0108] In one embodiment, the display determination module 20 is further configured to:

[0109] When the scrolling height is greater than or equal to a preset height threshold, and the target interface scrolls in a second scrolling manner, obtaining a scrolling direction of the target interface, wherein the second scrolling manner is a scrolling manner other than the first scrolling manner;

[0110] When the scrolling direction is the first scrolling direction, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state.

[0111] In one embodiment, the second scrolling method is scrolling by sliding a mouse wheel, scrolling by dragging a scroll bar, or scrolling by clicking a scroll key on a keyboard.

[0112] In one embodiment, the display determination module 20 is further configured to:

[0113] When the scrolling direction is a second scrolling direction, obtaining a scrolling speed of the target interface, wherein the second scrolling direction is opposite to the first scrolling direction;

[0114] When the scrolling speed is less than or equal to a preset speed threshold, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state.

[0115] In one embodiment, the display determination module 20 is further configured to:

[0116] When the scrolling speed is greater than a preset speed threshold, the page top Header of the target interface is set to a display state.

[0117] The interface display device provided in the embodiment of the present application adopts the interface display method in the above embodiment, which can solve the technical problem of unreasonable arrangement of page header elements in the related art, resulting in limited information display area. Compared with the prior art, the beneficial effects of the interface display device provided in the embodiment of the present application are the same as the beneficial effects of the interface display method provided in the above embodiment, and other technical features in the interface display device are the same as the features disclosed in the above embodiment method, which will not be repeated here.

[0118] In addition, please refer to Figure 5 , Figure 5 This is a schematic diagram of the device structure of the hardware operating environment involved in the interface display method in the embodiment of the present application.

[0119] The present application also provides an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the steps of the interface display method in the above-mentioned embodiment.

[0120] Reference below Figure 5 , which shows a schematic diagram of the structure of an electronic device suitable for implementing the embodiments of the present application. The electronic devices in the embodiments of the present application may include, but are not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs (Televisions), desktop computers, etc., or any electronic device capable of implementing the above functions. Figure 5The electronic device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0121] like Figure 5 As shown, the electronic device may include a processing device 1001 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the electronic device are also stored. The processing device 1001, ROM1002, and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the electronic device to communicate with other devices wirelessly or by wire to exchange data. Although the figure shows an electronic device with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or have alternatively.

[0122] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0123] The electronic device provided by the present application adopts the interface display method in the above embodiment, which can solve the technical problem of unreasonable arrangement of page header elements in the related art, resulting in limited information display area. Compared with the prior art, the beneficial effects of the electronic device provided by the present application are the same as the beneficial effects of the interface display method provided by the above embodiment, and other technical features in the electronic device are the same as the features disclosed by the interface display method in the above embodiment, which will not be repeated here.

[0124] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0125] In addition, the present application also provides a computer storage medium, which has computer-readable program instructions (ie, computer program) stored thereon, and the computer-readable program instructions are used to implement the steps of the interface display method in the above embodiment when executed.

[0126] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.

[0127] The computer-readable storage medium may be included in the electronic device, or may exist independently without being installed in the electronic device.

[0128] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by an electronic device, the electronic device: after detecting that the target interface is scrolled, obtains the scrolling height of the target interface; when the scrolling height is greater than or equal to a preset height threshold, sets the page top Header of the target interface to a hidden state, and sets the tabs of the target interface to a ceiling state, wherein in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed on the top of the current display screen.

[0129] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0130] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0131] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0132] The computer-readable storage medium provided by the present application stores computer-readable program instructions (i.e., computer programs) for executing the steps of the interface display method in the above-mentioned embodiment, which can solve the technical problem of unreasonable arrangement of page header elements in the related art, resulting in limited information display area. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided by the present application are the same as the beneficial effects of the interface display method provided by the above-mentioned embodiment, and will not be elaborated here.

[0133] In addition, an embodiment of the present application also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the steps of the interface display method in the above embodiment are implemented.

[0134] The computer program product provided by this application can solve the technical problem in the related art that the page header elements are not arranged reasonably, resulting in a limited information display area. Compared with the prior art, the beneficial effects of the computer program product provided by the embodiment of this application are the same as the beneficial effects of the interface display method provided by the above embodiment, and will not be repeated here.

[0135] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.

Claims

1. An interface display method, characterized in that: The interface display method comprises: After detecting that the target interface is scrolling, obtaining the scrolling height of the target interface; When the scrolling height is greater than or equal to a preset height threshold, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state, wherein in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed on the top of the current display screen.

2. The interface display method according to claim 1, characterized in that: After the step of obtaining the scroll height of the target interface, the method further includes: When the scroll height is less than a preset height threshold, the top Header of the target interface is set to a display state, and the tabs of the target interface are set to a flow state, wherein in the display state, the top Header is fixedly displayed on the top of the current display screen of the target interface, and in the flow state, the tabs are displayed in a flow manner in the current display screen.

3. The interface display method according to claim 1, characterized in that: The step of setting the page top Header of the target interface to a hidden state and setting the tabs of the target interface to a ceiling state when the scroll height is greater than or equal to a preset height threshold comprises: When the scrolling height is greater than or equal to a preset height threshold and the target interface scrolls by a first scrolling method, the top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state, wherein the first scrolling method is to scroll by clicking on the tabs.

4. The interface display method according to claim 3, characterized in that: The step of setting the page top Header of the target interface to a hidden state and setting the tabs of the target interface to a ceiling state when the scroll height is greater than or equal to a preset height threshold comprises: When the scrolling height is greater than or equal to a preset height threshold, and the target interface scrolls in a second scrolling manner, obtaining a scrolling direction of the target interface, wherein the second scrolling manner is a scrolling manner other than the first scrolling manner; When the scrolling direction is the first scrolling direction, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state.

5. The interface display method according to claim 4, characterized in that: The second scrolling method is to scroll by sliding a mouse wheel, drag a scroll bar, or click a keyboard scroll key.

6. The interface display method according to claim 4, characterized in that: After the step of obtaining the scrolling direction of the target interface, the method further includes: When the scrolling direction is a second scrolling direction, obtaining a scrolling speed of the target interface, wherein the second scrolling direction is opposite to the first scrolling direction; When the scrolling speed is less than or equal to a preset speed threshold, the page top Header of the target interface is set to a hidden state, and the tabs of the target interface are set to a ceiling state.

7. The interface display method according to claim 6, characterized in that: After the step of obtaining the scrolling speed of the target interface, the method further includes: When the scrolling speed is greater than a preset speed threshold, the page top Header of the target interface is set to a display state.

8. An interface display device, characterized in that: The interface display device comprises: A data acquisition module, used to acquire the scrolling height of the target interface after detecting that the target interface has scrolled; The display judgment module is used to set the page top Header of the target interface to a hidden state and the tabs of the target interface to a ceiling state when the scrolling height is greater than or equal to a preset height threshold, wherein in the hidden state, the page top Header is hidden from the current display screen of the target interface, and in the ceiling state, the tabs are fixedly displayed on the top of the current display screen.

9. An electronic device, characterized in that: The electronic device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the steps of the interface display method according to any one of claims 1 to 7.

10. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the steps of the interface display method according to any one of claims 1 to 7 are implemented.

Images