Interaction method and system for data screening interface

Abstract

The invention discloses an interaction method and system for a data screening interface, and is applied to the technical field of information. The method comprises the steps that in an initial state, content areas of all screening conditions are hidden, and the content areas comprise names and user settings of the corresponding screening conditions; in response to a first operation of a user on the screening icon, displaying a content area of each screening condition; and in response to a second operation of the user on the screened icon, restoring to the initial state. In this way, a user can conveniently check the data, and the page loading speed is increased.

Description

Technical Field

[0001] The present application relates to the field of information technology, and in particular to an interactive method and system for a data screening interface. Background Art

[0002] refer to Figure 1 The existing data filtering interface fixedly expands all filter conditions, taking up too much physical screen space and obscuring the main data area. This requires users to scroll frequently to view data in the main data area, such as filter results. This large amount of screen space occupied by filter conditions also affects page loading speed. Summary of the Invention

[0003] In order to facilitate users to view data and improve page loading speed, the present application provides an interactive method and system for a data screening interface.

[0004] In a first aspect, embodiments of the present application provide an interactive method for a data filtering interface. The method comprises: maintaining the display of a filtering icon; in an initial state, hiding the content area of each filtering condition, wherein the content area includes the name of the corresponding filtering condition and user settings; in response to a first user operation on the filtering icon, displaying the content area of each filtering condition; and in response to a second user operation on the filtering icon, restoring the initial state.

[0005] In some embodiments, displaying the content area of each filtering condition includes: displaying the content area of each filtering condition in a floating window.

[0006] In some embodiments, the floating window supports content scrolling.

[0007] In some embodiments, the method further includes: in response to the second operation, displaying a label bar for each target filtering condition, the label bar including the number and / or name of the corresponding filtering condition, the target filtering condition being a user-specified filtering condition for data query.

[0008] In some embodiments, the tab bar has a cancel button, and the method further includes: in response to a third operation of the user on the cancel button of the tab bar of any target filtering condition, canceling the designation of the target filtering condition and closing its tab bar.

[0009] In some embodiments, the method further includes: displaying a refresh button in response to the second operation; and reacquiring data filtering results based on current target filtering conditions and displaying new data filtering results in response to a fourth operation of the user on the refresh button.

[0010] In a second aspect, an embodiment of the present application provides an interactive system for a data filtering interface. The system includes a filtering icon display module, an initial state control module, and a user operation response module. The filtering icon display module is used to keep the filtering icon displayed. The initial state control module is used to: in the initial state, hide the content area of each filtering condition, and the content area includes the name and user settings of the corresponding filtering condition. The user operation response module is used to: display the content area of each filtering condition in response to the user's first operation on the filtering icon; and restore to the initial state in response to the user's second operation on the filtering icon.

[0011] In some embodiments, the user operation response module is also used to: in response to the second operation, display a label bar for each target filtering condition, the label bar including the number and / or name of the corresponding filtering condition, and the target filtering condition is a user-specified filtering condition for data query.

[0012] In some embodiments, the tab bar has a cancel button, and the user operation response module is further used to: in response to the user's third operation on the cancel button of the tab bar of any target filtering condition, cancel the designation of the target filtering condition and close its tab bar.

[0013] In some embodiments, the user operation response module is also used to: display a refresh button in response to the second operation; and re-acquire data filtering results based on the current target filtering conditions and display new data filtering results in response to the user's fourth operation on the refresh button.

[0014] In a third aspect, an embodiment of the present application provides an electronic device comprising a processor and a memory, wherein the memory stores program code, and when the program code is executed by the processor, the processor executes the interactive method for the data screening interface as described in the first aspect.

[0015] In a fourth aspect, the present application provides a computer-readable storage medium, which includes a program code. When the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute the interactive method for the data screening interface as described in the first aspect.

[0016] In a fifth aspect, an embodiment of the present application provides a computer program product, which includes computer instructions, and the computer instructions are stored in a computer-readable storage medium; when the processor of an electronic device obtains the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, so that the electronic device executes the interactive method for the data screening interface as described in the first aspect.

[0017] The technical solution provided in the embodiments of the present application has the following advantages:

[0018] (1) Through the interaction of the filter icon, the content area of the filter conditions is displayed only when the user needs to set the filter conditions. The content area of the filter conditions is hidden in the initial state, which reduces the interface occupancy, keeps the interface neat, avoids information overload, and affects data viewing.

[0019] (2) The layout of the data filtering interface has been optimized to reduce visual interference and improve information density.

[0020] (3) It reduces the number of rendered elements in the initial state of the page, improves the loading performance of the page, and helps to speed up the loading speed of the page. Especially for a large number of filtering conditions, it can significantly improve the loading performance of the page and improve the user experience.

[0021] (4) Compatible with multiple scenario requirements. Since the filtering conditions are in the form of a floating window that supports content scrolling and has a large internal space, theoretically no matter how complex the filtering conditions are, they can be designed in the floating window.

[0022] Other features and advantages of the present application will be described in the following description, and in part will become apparent from the description, or will be understood by practicing the present application. The purposes and other advantages of the present application can be realized and obtained by the structures particularly pointed out in the written description, claims, and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] In order to more clearly illustrate the technical solutions in the embodiments of the present application or related technologies, the following briefly introduces the drawings required for use in the embodiments or related technical descriptions. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0024] Figure 1 Shows the existing data filtering interface.

[0025] Figure 2 An exemplary flowchart of an interactive method for a data screening interface provided in an embodiment of the present application.

[0026] Figure 3 The data screening interface in the initial state provided by the embodiment of the present application is shown.

[0027] Figure 4 The data filtering interface provided by an embodiment of the present application is shown when displaying the content area of each filtering condition.

[0028] Figure 5 A schematic diagram of newly added steps of an interactive method for a data screening interface provided in another embodiment of the present application.

[0029] Figure 6 The data filtering interface provided by the embodiment of the present application is shown when the label bar of each target filtering condition is displayed.

[0030] Figure 7 A schematic diagram of newly added steps of an interactive method for a data screening interface provided in yet another embodiment of the present application.

[0031] Figure 8 An exemplary module diagram of an interactive system for a data screening interface provided in an embodiment of the present application.

[0032] Figure 9 An exemplary block diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0033] In order to make the purpose, technical solutions and advantages of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application. In the absence of conflict, the embodiments in the present application and the features in the embodiments can be combined with each other in any way. In addition, although a logical order is shown in the flow chart, in some cases, the steps shown or described can be performed in an order different from that here.

[0034] The terms "first," "second," and the like in the specification and claims of this application and in the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a particular order or sequential sequence. It should be understood that the terms used in this manner are interchangeable where appropriate, such that the embodiments of the invention described herein can be practiced in sequences other than those illustrated or described herein.

[0035] Figure 2 This is an exemplary flow chart of an interactive method for a data screening interface provided in an embodiment of the present application. The method is executed by at least one processor. Figure 2 As shown, the process 100 includes the following steps.

[0036] Step 110: Keep displaying the filter icon.

[0037] The filter icon can be designed in any suitable shape, for example, Figure 3 and Figure 4 The funnel-shaped icon in the upper left corner of the center interface is the filter icon. "Stay displayed" means that the display of specific content is independent of whether it is in the initial state and is not triggered by a specific user action (such as the first action). The filter icon remains displayed so that the system can respond to user actions.

[0038] Step 120: In the initial state, the content area of each filtering condition is hidden.

[0039] The content area includes the name of the corresponding filter condition and user settings. User settings include user-entered values or user-selected items, which are used to generate a filter condition instance. For example, for the filter condition "age," the user can enter an integer value or select a target age group from multiple age groups.

[0040] Step 130 : In response to the user's first operation on the filter icon, display the content area of each filter condition.

[0041] For ease of understanding, this article uses the commonly used click operation as an example for explanation. It should be understood that the operations mentioned herein (first operation, second operation, etc.) can also be replaced with other operations, such as a mouse hover operation (hovering the mouse over an interactive element for more than a preset time).

[0042] refer to Figure 3 In the initial state, the system hides the content area of each filter condition. Figure 4 ,After the user clicks the filter icon in the upper left corner of the interface, the system displays the content area of each filter condition.

[0043] Step 140 : In response to the user's second operation on the filter icon, restore to the initial state.

[0044] After the user clicks the filter icon again, the system returns to its initial state, that is, hiding the content area of each filter condition.

[0045] It should be understood that step 130 and step 140 can be performed repeatedly.

[0046] In some embodiments, the system displays the content area of each filter condition in a floating window (or pop-up window). In some embodiments, the floating window supports content scrolling. Users can scroll the floating window content through predetermined operations such as sliding the mouse wheel or dragging the side slider, so that they can view more filter conditions. The floating window supports dynamic expansion and a large number of filter items. When adding new filter conditions, you only need to append the filter box or scroll to load, without adjusting the overall structure. Multiple layers of conditions can be nested in the pop-up window, such as date + time range. Multi-layer conditions involve multiple (two or more) conditions connected by a specific logical relationship (such as and, or, not) to form a compound condition.

[0047] In some embodiments, as Figure 5 As shown, the process 100 further includes step 150 .

[0048] Step 150: In response to the second operation, display a label bar for each target filtering condition.

[0049] The label bar includes the number and / or name of the corresponding filter condition. The target filter condition is the filter condition specified by the user for data query. The label bar does not contain the detailed content of the target filter condition (especially user settings). It is only used to indicate the summary information of the target filter condition, such as the number and name. Without taking up too much page space, it clearly displays the user's current target filter condition, such as which target filter conditions the user has specified and the number of target filter conditions, so that the user can intuitively understand the data filtering range.

[0050] In some embodiments, the tab bar has a cancel button, based on which the process 100 further includes: Figure 5 Step 160 is shown.

[0051] Step 160 : In response to the user's third operation on the cancel button in the tab bar of any target filtering condition, cancel the target filtering condition and close its tab bar.

[0052] Unspecifying a target filter condition means that the condition is not used during data query.

[0053] For reference only, Figure 6 The label bar for each target filter condition (Condition 1, Condition 2, and Condition 3) is displayed to the right of the filter icon. Each target filter condition's label bar has a cancel button ("ⅹ"). The cancel function allows users to remove unnecessary target filter conditions at any time. For example, if a condition is specified incorrectly or filtering based on that condition is no longer necessary, it can be canceled with one click. Accordingly, data filtering results can be updated in real time.

[0054] In some embodiments, the system may provide a refresh function. Specifically, Figure 7 As shown, the process 100 further includes step 170 and step 180 .

[0055] Step 170: Display a refresh button in response to the second operation.

[0056] Step 180 : In response to the user's fourth operation on the refresh button, reacquire the data filtering results based on the current target filtering conditions and display the new data filtering results.

[0057] Just as an example, continue to refer to Figure 6 The filter icon, tab bar, and refresh button are in the same row, with the refresh button on the far right. The refresh function is useful when you doubt the accuracy of the filter results or when the data may have been updated. Clicking the refresh button regenerates the filter results based on the latest data and the current filter criteria.

[0058] In some embodiments, in response to the first operation, in addition to displaying the content area of each filter condition, the system may also display a query button and a refresh button in the floating window. In response to the user's fifth operation on the query button, the system performs a data query based on the current target filter conditions to obtain the data filter results. For example only, refer again to Figure 4 , the query button (left) and refresh button (right) are located in the lower right corner of the floating window.

[0059] Figure 8 This is an exemplary module diagram of an interactive system for a data screening interface provided in an embodiment of the present application. Figure 8 As shown, the system 200 includes a module 210 for displaying filtering icons, an initial state control module 220 and a user operation response module 230 .

[0060] The filter icon display module 210 keeps displaying the filter icons.

[0061] The initial state control module 220 is used to: in the initial state, hide the content area of each filtering condition, the content area including the name of the corresponding filtering condition and user settings;

[0062] The user operation response module 230 is configured to: display the content area of each filtering condition in response to a first operation of the user on the filtering icon; and restore the content area to the initial state in response to a second operation of the user on the filtering icon.

[0063] In some embodiments, the user operation response module 230 is also used to: in response to the second operation, display a label bar for each target filtering condition, the label bar including the number and / or name of the corresponding filtering condition, and the target filtering condition is the filtering condition specified by the user for data query.

[0064] In some embodiments, the tab bar has a cancel button, and the user operation response module 230 is further configured to: in response to a third operation of the user on the cancel button of the tab bar of any target filtering condition, cancel the specified target filtering condition and close its tab bar.

[0065] In some embodiments, the user operation response module 230 is also used to: display a refresh button in response to the second operation; and re-acquire data filtering results based on the current target filtering conditions and display new data filtering results in response to the user's fourth operation on the refresh button.

[0066] More details about system 200 and its modules can be found elsewhere in this document and will not be repeated here.

[0067] refer to Figure 9The embodiment of the present application further provides an electronic device 300. The electronic device 300 includes a processor 310 and a memory 320. The memory stores program code. When the program code is executed by the processor 310, the processor 310 executes the interactive method for the data screening interface provided in the embodiment of the present application.

[0068] An embodiment of the present application also provides a computer-readable storage medium, which includes program code. When the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute the interactive method for the data screening interface provided by the embodiment of the present application.

[0069] An embodiment of the present application also provides a computer program product, which includes computer instructions, and the computer instructions are stored in a computer-readable storage medium; when the processor of the electronic device obtains the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, so that the electronic device executes the interactive method for the data screening interface provided by the embodiment of the present application.

[0070] Obviously, those skilled in the art may make various changes and modifications to this application without departing from the spirit and scope of this application. Thus, if these modifications and variations of this application fall within the scope of the claims of this application and their equivalents, this application is intended to include these modifications and variations.

Claims

1. An interactive method for a data screening interface, characterized in that: include: Keep showing the filter icon; In the initial state, the content area of each filter condition is hidden, and the content area includes the name of the corresponding filter condition and user settings; In response to a first operation of the user on the filtering icon, displaying a content area of each filtering condition; In response to a second operation of the user on the filter icon, the filter is restored to the initial state.

2. The method according to claim 1, wherein The content area that displays each filter condition includes: The content area of each filter condition is displayed in the floating window.

3. The method according to claim 2, wherein The floating window supports content scrolling.

4. The method according to claim 1, wherein Also includes: In response to the second operation, a label bar of each target filtering condition is displayed, the label bar including the number and / or name of the corresponding filtering condition, and the target filtering condition is a filtering condition specified by the user for data query.

5. The method according to claim 4, wherein The tab bar has a cancel button, and the method further includes: In response to a third operation of the user on a cancel button of a tab bar of any target filtering condition, the target filtering condition is canceled and its tab bar is closed.

6. The method according to claim 5, wherein Also includes: In response to the second operation, displaying a refresh button; In response to a fourth operation of the user on the refresh button, data filtering results are reacquired based on the current target filtering conditions and new data filtering results are displayed.

7. An interactive system for a data screening interface, characterized in that: include: A filter icon display module, used to keep displaying the filter icon; An initial state control module is used to: in an initial state, hide the content area of each filtering condition, wherein the content area includes the name of the corresponding filtering condition and user settings; The user operation response module is configured to: display the content area of each filtering condition in response to a first operation of the user on the filtering icon; and restore the content area to the initial state in response to a second operation of the user on the filtering icon.

8. An electronic device, characterized in that: The system comprises a processor and a memory, wherein the memory stores program codes, and when the program codes are executed by the processor, the processor executes the interactive method for a data screening interface according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that The storage medium comprises a program code, and when the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute the interactive method for a data screening interface according to any one of claims 1 to 6.

10. A computer program product, characterized in that The method comprises computer instructions, which are stored in a computer-readable storage medium; when a processor of an electronic device reads the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, so that the electronic device executes the interactive method for a data screening interface according to any one of claims 1 to 6.

Images