TECHNICAL FIELD

This application relates to the user interaction field, and in particular, to a method for displaying a graphical user interface based on a gesture and an electronic device.

BACKGROUND

Currently, a screen of an electronic device (for example, a mobile phone or a tablet computer) is becoming larger, more content such as a news list, a contact list, an image, and a song list is displayed on the screen, and many entries are displayed. If a user wants to find content of interest, it is quite inconvenient to flick through the list up and down, and the user needs to perform flicking a plurality of times with hand on a screen to find the content of interest. For example, if the content that is of interest to the user is on a 75thline, and the screen of the electronic device displays seven lines each time, the user can view the content only after flicking through the list 11 times. Operation steps performed in the electronic device in this process are quite cumbersome, thereby greatly reducing a capability of intelligent interaction between the electronic device and the user and causing low efficiency of the electronic device.

SUMMARY

To resolve the foregoing technical problem, embodiments of this application provide a method for displaying a graphical user interface based on a gesture and an electronic device, so that the electronic device can automatically display a related entry based on a gesture of a user, thereby greatly improving a capability of intelligent interaction between the electronic device and the user.

According to a first aspect, an embodiment of this application provides a method for displaying a graphical user interface (GUI) based on a gesture, and the method may be implemented in an electronic device including a touchscreen. The method may include the following steps:

displaying a first GUI of an application (App) on the touchscreen, where K1entries are displayed in the first GUI, M1interface elements are displayed in each entry, K1is a natural number and K1≥2, and M1is a natural number and M1≥2;

receiving, by the electronic device, a first gesture of a user on the touchscreen; and

displaying a second GUI of the application on the touchscreen in response to the first gesture, where K2entries are displayed in the second GUI, M2interface elements are displayed in each entry, K2is a natural number and K2≥2, and M2is a natural number and M2≥1; where K2>K1and M2≤M1, to be specific, a quantity of entries displayed in the second GUI is greater than a quantity of entries displayed in the first GUI, and a quantity of interface elements displayed in each entry in the second GUI is less than or equal to a quantity of interface elements displayed in each entry in the first GUI.

In the foregoing technical solution, the electronic device may increase a quantity of entries displayed on the touchscreen when receiving the first gesture (for example, a quick slide gesture) of the user, so that the user of the electronic device can quickly locate related content (for example, an entry) in a process of quickly searching for content, and can perform a subsequent touch operation on an entry (and an interface element of the entry) displayed in the second GUI. Therefore, the foregoing embodiment describes a quite flexible method for displaying a graphical user interface, and a capability of intelligent interaction between the electronic device and the user is greatly improved.

In a possible implementation, the method may further include: receiving, by the electronic device, a second gesture of the user on the touchscreen; and displaying a third GUI of the application on the touchscreen in response to the second gesture, where K3entries are displayed in the third GUI, interface elements are displayed in each entry, K3is a natural number and K3≥2, and M3is a natural number and M3≥2; where

a. K3<K2and M3≥M2, or K3<K1and M3≥M1, to be specific, the quantity K3of entries displayed in the third GUI may be less than the quantity K2of entries displayed in the second GUI, and the quantity M3of interface elements displayed in the third GUI may be greater than or equal to the quantity M2of interface elements displayed in the second GUI; or the quantity K3of entries displayed in the third GUI may be less than the quantity K1of entries displayed in the first GUI, and the quantity M3of interface elements displayed in the third GUI may be greater than or equal to the quantity M1of interface elements displayed in the first GUI.

In the foregoing technical solution, the electronic device may reduce a quantity of entries displayed on the touchscreen when receiving the second gesture (for example, a slow slide gesture) of the user, so that the user of the electronic device can carefully search for content (for example, an entry). Therefore, compared with the first GUI and the second GUI, in the third GUI, fewer entries are displayed on the touchscreen based on the second gesture, but more interface elements are displayed in each entry. Such a graphical user interface helps the user slowly and carefully search for a related entry, so that the user can carefully search for a required entry by using more interface elements. In this way, a capability of intelligent interaction between the electronic device and the user is further improved.

In a possible implementation, all the entries in the first GUI have a same display size S1, and S1>0. The first GUI may be an initial home page of the application, for example, an initial home page of a Contacts App or an initial home page of an Email App. Because all the entries have a same display size, the entries displayed in the first GUI can be identified uniformly, so that the user can perform a quick search.

In a possible implementation, all the entries in the second GUI have a same display size S2, S2>0, and S2<S1. To be specific, the size of the entry displayed in the second GUI is less than the size of the entry displayed in the first GUI. In other words, based on the first gesture, more entries are displayed in the second GUI, and the size of each entry is smaller, so that the electronic device can display more entries and therefore the user can perform a quick search.

In a possible implementation, all the entries in the third GUI have a same display size S3, S3>0, and S3>S1or S3>S2. To be specific, the size of the entry displayed in the third GUI is greater than the size of the entry in the first GUI, or the size of the entry displayed in the third GUI is greater than the size of the entry displayed in the first GUI. In other words, the size of the entry in the third GUI is larger, so that the user can carefully search a plurality of entries.

In a possible implementation, the entry may be one of the following entries: a Contacts entry, an Email entry, an Instant Message entry, a Recent Calls entry, a Folder entry, a Settings entry, and an App Store entry. In addition, the entry in the first GUI, the entry in the second GUI, and the entry in the third GUI may be entries of a same type.

In a possible implementation, the interface element may be at least one of the following elements: a control, a link, an icon, a button, a text box, and a menu. It may be understood that various forms of interface elements may be displayed in the entry, so that the user can perform a specific operation on the entry, for example, make a call, or write an email.

In a possible implementation, a velocity of the first gesture may be greater than a velocity of the second gesture. This indicates that the user quickly searches for content in the case of the first gesture, and the user slowly and carefully searches for content in the case of the second gesture.

In a possible implementation, a velocity of the first gesture may be greater than a predetermined threshold, and a velocity of the second gesture may be less than the predetermined threshold.

In a possible implementation, the first gesture and the second gesture may be gestures of different types. For example, the first gesture may be a flick gesture, to be specific, a finger of the user taps a touch-sensitive surface of the touchscreen, quickly slides, and then quickly leaves the touch-sensitive surface, for example, the finger scrolls the touchscreen up and down. The second gesture may be a drag gesture, to be specific, the finger of the user taps the touch-sensitive surface, and moves slowly without leaving the touch-sensitive surface. In this implementation, the graphical user interfaces of the application may be displayed based on gestures of different types instead of velocities of the gestures. For example, the second GUI is displayed on the touchscreen in response to the first gesture (for example, a flick gesture), and the third GUI is displayed on the touchscreen in response to the second gesture (for example, a drag gesture). In this implementation, the electronic device may display different graphical user interfaces on the touchscreen based on gestures of different types, so that the user can flexibly search for related content. In a possible implementation, the application may be one of the following applications: Contacts, Gallery, Calendar, Messages, File Manager, Email, App Store, and the like.

In some other embodiments of this application, a virtual button for scrolling entries may be displayed on the touchscreen of the electronic device. In this case, the first gesture, the second gesture, and a third gesture may be gestures of touching the virtual button by the finger of the user in different touch times. For example, if a touch time is long, it indicates that the user wants to quickly scroll entries, and the electronic device displays entries on the touchscreen through quick scrolling. In the case of quick scrolling, more entries are displayed on the touchscreen, and a display size of each entry becomes smaller. For another example, if a time of touching the virtual button is short, it indicates that the user wants to slowly scroll entries, and the electronic device displays entries on the touchscreen through slow scrolling. In the case of slow scrolling, fewer entries are displayed on the touchscreen, and a display size of each entry becomes larger. In some other embodiments of this application, the electronic device may display different graphical user interfaces on the touchscreen based on a time of touching the virtual button by the finger of the user. For example, if the time of touching the virtual button by the finger of the user is longer, it indicates that the user wants to quickly scroll (or flick through) entries, so that more entries are displayed on the touchscreen, a display size of each entry is smaller, and fewer interface elements are displayed in each entry. For another example, if the time of touching the virtual button by the finger of the user is shorter, it indicates that the user wants to slowly scroll (or flick through) entries, so that fewer entries are displayed on the touchscreen, a display size of each entry is larger, and more interface elements are displayed in each entry.

According to a second aspect, an embodiment of this application provides an electronic device, including: a touchscreen including a touch-sensitive surface and a display; one or more processors; a memory; a plurality of applications; and one or more programs. The one or more programs are stored in the memory and are configured to be executed by the one or more processors, the one or more programs include an instruction, and the instruction may be used to perform various implementations in the first aspect.

It should be understood that a description of a technical feature, a technical solution, a beneficial effect, or similar language in this application does not imply that all features and advantages can be implemented in any single embodiment. On the contrary, it may be understood that a description of a feature or a beneficial effect means that at least one embodiment includes a specific technical feature, technical solution, or beneficial effect. Therefore, in this specification, a description of a technical feature, a technical solution, or a beneficial effect may not be specific to one embodiment. Further, technical features, technical solutions, or beneficial effects described in the embodiments may be combined in any proper manner. A person skilled in the art may understand that a specific embodiment may be implemented without using one or more specific technical features, technical solutions, or beneficial effects of the embodiment. In other embodiments, additional technical features and beneficial effects may also be identified in a specific embodiment that does not reflect all the embodiments.

