Patent Description:
To reduce physical buttons without affecting operation convenience of a user, a suspend navigation button (briefly referred to as a suspend button) is set in many terminal devices. The user may operate a suspend button displayed on a touch display screen, to enable a terminal device to perform a specific function.

Currently, a suspend button in a terminal device is equivalent to an image. Therefore, when a user operates a suspend button on a touch display screen of a terminal device, there are usually only the following several interaction modes between the user and the suspend button.

It may be learned from the foregoing description that the suspend button in a conventional design has an undiversified interaction mode with the user, and has relatively poor display flexibility.

<CIT> describes a UI whereby an arrangement position is not fixed, arrangement in any screen image position is possible, and dynamic operation is possible using an entire screen image.

<CIT> describes icon resizing techniques which enable resizing of icons for a user interface to select between multiple available sizes may occur intuitively by using input or gestures applied to the icon to visually move the icon boundaries to a desired size.

<CIT> describes a method for adjusting icons on a desktop, wherein movable points of the icon are obtained and marked. <CIT> describes methods and devices that resize touch selection zones while selected on a touch sensitive display. <CIT> describes a computer device used for detecting touches on touch-sensitive display, and has a processor to detect touch and held at corresponding positions of the touch-sensitive display for a specific duration of time. <CIT> describes an operating input device in which input errors can be prevented. <CIT> describes a system for providing visual feedback using gestures, and which has a processor to change a position of a presented interactive object in response to a movement of a real-world object and to modify a presentation property of the presented interactive object. <CIT> describes a graphical object position exchanging method for a portable electronic device.

Embodiments not falling within the scope of the claims are exemplary only.

This application provides a suspend button display method and a terminal device, to improve display flexibility of a suspend button.

According to a first aspect, an embodiment of this application provides a suspend button display method including the following steps.

Displaying, by a terminal device, a suspend button in a default state on a touch display screen, wherein a first graphic is displayed in the suspend button; detecting, by the terminal device, a touch operation of a target object on the suspend button; and when the terminal device detects a sliding operation, controlling, by the terminal device in response to the detected sliding operation, the first graphic to present an effect of a dynamic change along with a sliding track of the sliding operation, wherein the dynamic change comprises a dynamic change generated when the first graphic is stretched in a direction opposite to a sliding direction;wherein before the terminal device detects the sliding operation, the method further comprises:detecting, by the terminal device, a first touch and hold operation, wherein the first touch and hold operation is an operation of the target object on the suspend button for a touch time exceeding first duration; and enabling, by the terminal device in response to the detected first touch and hold operation, a function of responding to the sliding operation; and further after detecting a tap operation or a second touch and hold operation, controlling by the terminal device, in response to the detected tap operation or second touch and hold operation, the suspend button to first present an effect that the first graphic is zoomed in or zoomed out by a specified proportion, and then displays the suspend button restored to the default state, where the second touch and hold operation is an operation of the target object on the suspend button for a touch time exceeding second duration.

In the solutions provided in said first embodiment and in further embodiments of this application, when the terminal device detects that the target object performs the sliding operation on the suspend button, the terminal device may control the suspend button to present the effect of the dynamic change. In this way, the suspend button may present a plurality of display forms. Therefore, according to the method, the display flexibility of the suspend button can be improved, so that the visual experience of the user is improved.

This application provides a suspend button display method and a terminal device, to improve display flexibility of a suspend button. The method and the terminal device are based on same inventive conception. A problem resolving principle of the method is similar to that of the terminal device. Therefore, implementation of the apparatus and implementation of the method may refer to each other. Repetitions are not described.

In solutions provided in embodiments of this application, when the terminal device detects that a target object performs a sliding operation on a suspend button, the terminal device may control the suspend button to present an effect of a dynamic change. In this way, the suspend button may present a plurality of display forms. Therefore, according to the method, the display flexibility of the suspend button can be improved, so that visual experience of a user is improved.

Some terms in this application are explained and described below, to facilitate understanding of a person skilled in the art.

In the embodiments of this application, the suspend button may present an effect of a dynamic change, and the dynamic change is usually based on a shape of the suspend button in a default state. Therefore, the graphic element in the suspend button in the default state is usually a regular graphic. The default state is a state formed when the suspend button is not operated by the user and does not present the effect of the dynamic change, namely, an initial state of the suspend button.

In the default state, the graphic element in the suspend button is also in a default state.

One graphic may be displayed in the suspend button. For example, in the default state, the graphic is a (right-angle or rounded-corner) square, a circle, a polygonal-star shape, or the like. For example, the suspend button is suspend buttons in a default state shown in figures a to d in <FIG>. Alternatively, a plurality of graphics may be displayed in the suspend button, where the plurality of graphics are graphics of a same type, and for example, the suspend button is suspend buttons in a default state shown in figures e and g in <FIG>; or the plurality of graphics include graphics of different types, and for example, the suspend button is suspend buttons in a default state shown in figures f and h in <FIG>.

It should be noted that the suspend buttons in <FIG> do not limit the shape of the suspend button. In addition, <FIG> shows only examples of a factor, namely, the shape, of the suspend button. Optionally, the graphic elements in the suspend button may be differentiated by using visual parameters such as color, transparency, brightness, and gradation. No further example is provided herein.

(<NUM>) A touch operation is implemented by the user by approaching or touching the touch display screen of the terminal device by using the target object. For example, when the user touches a location of the suspend button on the touch display screen by using the target object, the target object performs the touch operation on the suspend button. Therefore, it may be understood that the touch operation of the target object on the suspend button is not a direct operation of the target object on the suspend button, but is implemented by the target object by touching, through the touch display screen, an area of the location in which the suspend button is displayed.

Currently, commonly used types of the touch operation include a tap (including single-tap, double-tap, and three-tap) operation, a touch and hold operation, a sliding operation, and the like.

A display area is also referred to as a view. A same display interface includes at least one layer of display area. Different display areas may display different user interfaces. The suspend button needs to suspend on the home screen or the uppermost layer of the program interface that is currently running. Therefore, when a suspend button is displayed on a display interface, the display interface includes a plurality of layers of display areas. A bottom-layer display area is used to display the home screen or the program interface, and at least one other display area is used to display the suspend button.

"A plurality of" refers to two or more.

"And/or" describes an association relationship for describing associated objects and represents that three relationships may exist. The character "/" usually indicates an "or" relationship between the associated objects.

In addition, it needs to be understood that, in description of this application, terms such as "first" and "second" are used only for the purpose of differentiated description, and cannot be understood as indicating or implying relative importance or a sequence.

The following specifically describes the embodiments of this application with reference to the accompanying drawings.

<FIG> is a diagram of a possible structure a terminal device to which a suspend button display method is applicable according to an embodiment of this application. As shown in <FIG>, the terminal device <NUM> includes a radio frequency (radio frequency, RF) circuit <NUM>, a power supply <NUM>, a processor <NUM>, a memory <NUM>, an input unit <NUM>, a display unit <NUM>, a wireless fidelity (Wireless Fidelity, Wi-Fi) module <NUM>, and other components. A person skilled in the art may understand that the structure of the terminal device shown in <FIG> does not constitute a limitation to the terminal device, and the terminal device provided in this embodiment of this application may include more components or fewer components than those shown in the figure, or combine some components, or arrange different components.

Each component part of the terminal device <NUM> is described below in detail with reference to <FIG>.

The RF circuit <NUM> may be applied to sending and receiving of data in a communication or call process. Particularly, the RF circuit <NUM> receives downlink data from a base station, and then sends the downlink data to the processor <NUM> for processing. In addition, the RF circuit <NUM> sends to-be-sent uplink data to the base station. Usually, the RF circuit <NUM> includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (Low Noise Amplifier, LNA), a duplexer, and the like.

In addition, the RF circuit <NUM> may further communicate with a network and another device through wireless communication. The wireless communication may use any communication standard or protocol, which includes, but is not limited to, global system for mobile communications (global system of mobile communication, GSM), general packet radio service (general packet radio service, GPRS), code division multiple access (code division multiple access, CDMA), wideband code division multiple access (wideband code division multiple access, WCDMA), long term evolution (long term evolution, LTE), email, short message service (short messaging service, SMS), and the like.

A Wi-Fi technology belongs to a short distance wireless transmission technology. The terminal device <NUM> may be connected to an access point (Access Point, AP) by using the Wi-Fi module <NUM>, to access a data network. The Wi-Fi circuit <NUM> may be applied to sending and receiving of data in a communication process.

Optionally, the terminal device <NUM> may further include a communications interface, configured to implement a physical connection to another device. Optionally, the communications interface is connected to a communications interface of the another device by using a cable, to implement data transmission between the terminal device <NUM> and the another device.

In this embodiment of this application, a data transmission function is required for implementing the terminal device <NUM>. Therefore, a communications module needs to be included inside the terminal device <NUM>. <FIG> shows the communications modules such as the RF circuit <NUM> and the Wi-Fi module <NUM>, and the communications interface. However, it may be understood that the terminal device <NUM> includes at least one of the foregoing components or another communications module (for example, a Bluetooth module) configured to implement communication, for data transmission.

For example, when the terminal device <NUM> is a mobile phone or a wearable device, the terminal device <NUM> may include the RF circuit <NUM>, and may further include the Wi-Fi module <NUM>; when the terminal device <NUM> is a computer, the terminal device <NUM> may include the communications interface, and may further include the Wi-Fi module <NUM>; when the terminal device <NUM> is a tablet computer, the intelligent terminal device <NUM> may include the Wi-Fi module <NUM>.

The memory <NUM> may be configured to store a software program and a module. The processor <NUM> runs the software program and the module that are stored in the memory <NUM>, to execute various functional applications and data processing of the terminal <NUM>.

Optionally, the memory <NUM> may mainly include a program storage area and a data storage area. The program storage area may store an operating system, various application programs, and the like. The data storage area may store data created based on use of the intelligent terminal device.

In addition, the memory <NUM> may include a high speed random access memory, and may further include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory, or another volatile solid-state storage device.

The input unit <NUM> may be configured to receive digit or character information entered by a user, and generate a key input signal related to a user setting and function control of the terminal device <NUM>.

Optionally, the input unit <NUM> may include a touch panel <NUM> and another input device <NUM>.

The touch panel <NUM>, which is also referred to as a touchscreen, may collect a touch operation (for example, an operation of the user on or near the touch panel <NUM> by using any suitable object or accessory such as a finger or a stylus) of the user on or near the touch panel, and drive a corresponding connection apparatus based on a preset program. Optionally, the touch panel <NUM> may include two parts: a touch detection apparatus and a touch controller. The touch detection apparatus detects a touch direction of the user, detects a signal generated from the touch operation, and transfers the signal to the touch controller. The touch controller receives touch information from the touch detection apparatus, converts the touch information into touch point coordinates, and then sends the touch point coordinates to the processor <NUM>. Moreover, the touch controller can receive and execute a command sent from the processor <NUM>. In addition, the touch panel <NUM> may be implemented in a plurality of types such as resistive, capacitive, infrared, surface sound wave types.

Optionally, the another input device <NUM> may include, but is not limited to, one or more of a physical keyboard, a functional key (for example, a volume control key and a switch key), a track ball, a mouse, and a joystick.

The display unit <NUM> may be configured to display information entered by the user or information provided for the user, various menus of the terminal device <NUM>, and other content. The display unit <NUM> is a display system of the terminal device <NUM>, and is configured to present a user interface and implement human-device interaction.

The display unit <NUM> may include a display panel <NUM>. Optionally, the display panel <NUM> may be configured in a form of a liquid crystal display (liquid crystal display, LCD), an organic light-emitting diode (organic light-emitting diode, OLED), or the like.

Further, the touch panel <NUM> may cover the display panel <NUM>. After detecting the touch operation on or near the touch panel <NUM>, the touch panel <NUM> transfers the touch operation to the processor <NUM>, to determine a type of a touch event. Then, the processor <NUM> provides a corresponding visual output on the display panel <NUM> based on the type of the touch event.

In <FIG>, the touch panel <NUM> and the display panel <NUM> are used as two independent components to implement input and output functions of the terminal device <NUM>. However, in this embodiment of this application, the touch panel <NUM> and the display panel <NUM> may be integrated (namely, into the touch display screen in the embodiments of this application) to implement the input and output functions of the terminal device <NUM>.

The processor <NUM> is a control center of the terminal device <NUM>, and connects various components by using various interfaces and lines. By running or executing the software program and/or module stored in the memory <NUM>, and invoking the data stored in the memory <NUM>, the processor <NUM> performs the various functions and the data processing of the terminal device <NUM>, thereby implementing various services that are based on the terminal device <NUM>.

Optionally, the processor <NUM> may include one or more processing units. Optionally, the processor <NUM> may integrate an application processor and a modem processor. The application processor mainly processes an operating system, a user interface, an application program, and the like. The modem processor mainly processes wireless communication. It may be understood that the foregoing modem processor may either not be integrated into the processor <NUM>.

The terminal device <NUM> further includes the power supply <NUM> (for example, a battery) for supplying power to the components. Optionally, the power supply <NUM> may be logically connected to the processor <NUM> by using a power management system, thereby implementing functions such as charging, discharging and power consumption management by using the power management system.

Although not shown, various components such as a sensor, an audio frequency circuit, and a camera may be further included in the terminal device <NUM>.

An embodiment of this application provides a suspend button display method. The method is applicable to the terminal device shown in <FIG>. The terminal device includes a touch display screen. As shown in <FIG>, the method includes the following procedures.

S301: The terminal device displays a suspend button in a default state on the touch display screen, where a first graphic is displayed in the suspend button.

The suspend button suspends on a home screen of the terminal device or an uppermost layer of a program interface that is currently running, to form a current user interface.

Optionally, when the suspend button includes a plurality of graphic elements, a second graphic is further displayed in the suspend button. In this embodiment of this application, shapes of the first graphic and the second graphic are not limited.

S302: The terminal device detects a touch operation of a target object on the suspend button.

Optionally, the terminal device may collect, by using the touch display screen having an input function, the touch operation of a user on or near the touch display screen by using the target object.

S303: When the terminal device detects a sliding operation, the terminal device controls, in response to the detected sliding operation, the first graphic to present an effect of a dynamic change along with a sliding track of the sliding operation, where the dynamic change includes a dynamic change generated when the first graphic is stretched in a direction opposite to a sliding direction.

According to the foregoing steps, for the suspend button, an effect of a dynamic change that is generated when an object having mass, elasticity, and toughness is dragged in a physical world may be simulated, so that the user explicitly senses that the touch operation acts on the suspend button. Therefore, according to the method, display flexibility of the suspend button can be improved, so that visual experience of the user is improved.

In an actual physical world, dragging an elastic object having mass usually changes a shape of the object. For example, an inertia lag phenomenon occurs on the object in a direction opposite to a dragging direction, and the phenomenon causes protrusion deformation of the object in the direction opposite to the dragging direction. Therefore, optionally, the dynamic change generated when the first graphic is stretched in the direction opposite to the sliding direction includes protrusion deformation occurring on the first graphic in the direction opposite to the sliding direction.

According to the method, when the user performs the sliding operation on the suspend button, the suspend button may present an inertia lag phenomenon that is also presented when an elastic object is dragged, so that user experience is closer to that in the physical world.

Optionally, in a dynamic change process, a protrusion deformation degree of the first graphic may be related to a parameter such as a sliding track distance of the sliding operation, a touch force of the target object, or a sliding speed of the target object. For example, a larger sliding track distance of the sliding operation, a larger touch force of the target object, or a higher sliding speed of the target object indicates a higher protrusion deformation degree of the first graphic.

Optionally, the dynamic change further includes displacement of the first graphic that is generated along with the sliding track.

A displacement direction of the first graphic is the sliding direction.

When a force for dragging an actual object is sufficiently large, the object may be displaced. Therefore, according to the method, when the user performs the sliding operation on the suspend button, the protrusion deformation occurs on the first graphic, and further, the first graphic is displaced, so that an effect achieved when the actual object is dragged in the physical world can be further simulated. In addition, when the user performs the sliding operation on the suspend button to drag the suspend button on the touch display screen, the first graphic also needs to be displaced.

In a possible implementation, in the suspend button in the default state, a default state of the first graphic is circular. Then, correspondingly, in the suspend button presenting the effect of the dynamic change, the first graphic during the dynamic change is water droplet-shaped or quasi-elliptical. For example, as shown in <FIG>, when the target object slides the suspend button downward, the first graphic presents a shape on the right side.

Optionally, to present the effect of the dynamic change of the first graphic, before the sliding operation ends or a deformation upper limit of the first graphic is not reached, the first graphic may present the effect of the dynamic change through a plurality of times of changes.

Optionally, in this embodiment of this application, the change of the first graphic may be, but is not limited to being, implemented by using the following several methods.

In the dynamic change process of the first graphic, the first graphic changing each time is generated by the terminal device by performing a metaball algorithm (namely, a metaball algorithm) on a reference graphic and an auxiliary circle.

A size of the reference graphic is the same as that of the first graphic in the default state, and a first circle center distance is less than a second circle center distance, where the first circle center distance is a distance between a circle center of the reference graphic and a circle center of the auxiliary circle when the first graphic changing for the Nth time is generated, and the second circle center distance is a distance between the circle center of the reference graphic and the circle center of the auxiliary circle when the first graphic changing for an (N+<NUM>)th time is generated, where N is an integer greater than or equal to <NUM>.

A size of the auxiliary circle may be specifically set based on a factor such as an actual scenario or the protrusion deformation degree of the first graphic.

In the metaball algorithm, a distance between the circle center of the reference graphic and the circle center of the auxiliary circle each time the first graphic changes influences the protrusion deformation degree of the first graphic. Therefore, when a circle center distance between the reference graphic and the auxiliary circle each time the first graphic deforms is less than a circle center distance between the reference graphic and the auxiliary circle next time the first graphic deforms, a protrusion degree of the first graphic that is generated due to deformation next time may be higher than a protrusion degree of the first graphic that is generated due to deformation this time, so that when the first graphic presents the dynamic change along with the sliding track of the sliding operation, a longer sliding track indicates a higher protrusion degree of the first graphic.

In addition, a location of the first graphic that is generated through the metaball algorithm is related to a location of the reference graphic. Therefore, when the first graphic changing each time is not displaced, the location of the reference graphic also does not change; and when the first graphic changing each time is displaced, the location of the reference graphic also changes. However, it should be noted that when the first graphic changing each time is displaced, and when the first graphic changing for a first time is generated, the location of the reference graphic is the same as that of the first graphic.

An example is used, by using the accompanying drawings, for describing generation of the first graphic by using the first method, as shown in <FIG>.

In this example, the suspend button includes two graphic elements. The suspend button in the default state is shown in <FIG>). An inner ring in <FIG>) is the first graphic. B is a circle center of the first graphic, and A is an initial location of the target object (a finger).

When the finger performs the sliding operation (where the sliding direction is downward) on the suspend button, the finger moves from the location A to a location A', and a sliding distance of the finger is a, as shown in <FIG>).

The terminal device generates and displays the first graphic during the dynamic change in response to the sliding operation.

When the terminal device generates the first graphic changing for the first time, as shown in <FIG>), a location of the circle center of the reference graphic (whose size is the same as the size of the first graphic in the default state) is determined as B, and a location of the circle center of the auxiliary circle required for the change this time is determined as C, where a direction from B to C is the sliding direction of the finger. The terminal device performs the metaball algorithm on the reference graphic and the auxiliary circle that are determined during the change this time, to generate the first graphic changing for the first time, as shown in <FIG>).

When the finger continues to slide, to be specific, the finger slides from the location A' to a location A", and when the terminal device generates the first graphic changing for a second time, as shown in <FIG>), a location of the circle center of the reference graphic is determined as B', and a location of the circle center of the auxiliary circle required for the change this time is determined as C'. To be specific, compared with the change last time, the location of the circle center of the reference graphic travels b, and the location of the circle center of the auxiliary circle travels c. The terminal device performs the metaball algorithm on the reference graphic and the auxiliary circle that are determined during the change this time, to generate the first graphic changing for the second time, as shown in <FIG>).

Subsequently, the finger continues to slide. The terminal device may determine locations of the reference graphic and the auxiliary circle still based on the foregoing method, to determine the first graphic changing each time, until the finger no longer slides and the sliding operation ends, or until the deformation upper limit of the first graphic is reached. For specific steps, refer to the foregoing steps.

It should be noted that because in the first method, the first circle center distance is less than the second circle center distance, a distance from B' to C' is greater than a distance from B to C. In addition, to ensure that the generated first graphic is water droplet-shaped, the distance between the circle center of the reference graphic and the circle center of the auxiliary circle that is determined each time the first graphic changes is less than a first threshold; and compared with a change last time, a circle center moving distance (for example, b) of the reference graphic is less than a second threshold, and a circle center moving distance (for example, c) of the auxiliary circle is less than a third threshold.

In the dynamic change process of the first graphic, the first graphic changing for the first time is generated by the terminal device by performing stretching processing on a first part of the first graphic in the default state, and the first graphic changing for an Mth time is generated by the terminal device by performing stretching processing on the first part of the first graphic changing for an (M-<NUM>)th time.

The first part of the first graphic in the default state is one part that is in two parts into which the first graphic in the default state is divided based on a division line perpendicular to the sliding direction and that is located in the direction opposite to the sliding direction relative to the division line, where M is an integer greater than <NUM>.

Optionally, in the dynamic change process of the first graphic, the first graphic changing for the first time is generated by the terminal device by performing compression processing on a second part of the first graphic in the default state, and the first graphic changing for the Mth time is generated by the terminal device by performing compression processing on the second part of the first graphic changing for the (M-<NUM>)th time.

The second part of the first graphic in the default state is a part other than the first part in the two parts into which the first graphic in the default state is divided.

An example is used, by using the accompanying drawings, for describing generation of the first graphic by using the second method. An example in which the suspend button is shown in <FIG>) in <FIG> is still used, as shown in <FIG>.

When a finger performs the sliding operation (where the sliding direction is downward) on the suspend button, and when the finger moves, as shown in <FIG>), the terminal device determines the division line of the first graphic, where the division line is perpendicular to the sliding direction. The first graphic in the default state is divided into two parts based on the division line. As shown in the figure, one part in the direction opposite to the sliding direction relative to the division line is the first part, and the other part in the sliding direction relative to the division line is the second part.

The terminal device stretches the first part by a first proportion, and compresses the second part by a second proportion (where the first proportion and the second proportion may be the same or different, and in the example shown in <FIG>), the first proportion and the second proportion are both <NUM>%), to generate the first graphic changing for the first time, as shown in <FIG>). In actual applications, to enable the first graphic to present a gradient effect, the first proportion and the second proportion may be set to a value pair for comparison.

When the finger continues to slide, the terminal device stretches the first graphic changing last time by a third proportion, and compresses the second graphic changing last time by a fourth proportion, to generate the first graphic changing for a second time, as shown in <FIG>). The third proportion and the first proportion may be the same or different, and the fourth proportion and the second proportion may be the same or different. This is not limited in this application.

Subsequently, the finger continues to slide. The terminal device may stretch the first part and compress the second part still based on the foregoing method, to determine the first graphic changing each time, until the finger no longer slides and the sliding operation ends, or until the deformation upper limit of the first graphic is reached. For specific steps, refer to the foregoing steps.

According to the foregoing method, when the user performs the sliding operation on the suspend button, the suspend button may present a water droplet shape or a quasi-ellipse, so that user experience is closer to that in the physical world.

Optionally, when the second graphic is further displayed in the suspend button, and when the suspend button is in the default state, a whole of the first graphic covers the second graphic. An area surrounded by an outer outline of the second graphic is greater than an area surrounded by an outer outline of the first graphic.

Optionally, in a process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, the whole or a part of the first graphic covers the second graphic. To be specific, the changing first graphic cannot go beyond the outer outline of the second graphic.

When the first graphic and the second graphic are displayed in the suspend button, to ensure that in the suspend button presenting the effect of the dynamic change, the whole or the part of the first graphic covers the second graphic, this embodiment of this application provides two implementations.

The first graphic and the second graphic of the suspend button are respectively displayed at different display layers (similar to image layers). To be specific, the first graphic is displayed at a first display layer, the second graphic is displayed at a second display layer, and the first display layer is located above the second display layer. An outline of the first display layer is the same as the outer outline of the first graphic, and an outline of the second display layer is the same as the outer outline of the second graphic.

When the suspend button is in the default state, a whole of the first display layer covers the second display layer.

In the process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, the whole or a part of the first display layer covers the second display layer, so that in the process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, the whole or the part of the first graphic covers the second graphic.

The terminal device obtains a plurality of to-be-displayed image frames corresponding to an effect of a dynamic change that the whole or the part of the first graphic covers the second graphic in the process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, and sequentially displays the plurality of image frames, so that in the process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, the effect of the dynamic change that the whole or the part of the first graphic covers the second graphic is achieved.

Optionally, in this implementation, the plurality of image frames are obtained through changing based on a group of image frames. A plurality of image frames are obtained through changing based on a group of image frames. To be specific, a group of image frames are pre-generated. The group of image frames include image frames corresponding to an effect achieved when the first graphic moves in a first direction (to be specific, the image frames visually include a first image and a second image); then, angles of to-be-displayed images in a next frame are determined based on touch data when another direction needs to be displayed (because a touch track may be in any direction); and then, angle adjustment is performed on the image frames corresponding to the first direction, so that a current to-be-displayed image frame is obtained and displayed.

In this implementation, only image frames corresponding to moving in one direction are pre-stored, and image frames at any angle do not need to be stored. Therefore, relatively small memory is occupied.

In a possible design, in the process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, a dynamic change generated when the second graphic is stretched in the direction opposite to the sliding direction occurs on the second graphic. Optionally, protrusion deformation may also occur on the second graphic in the direction opposite to the sliding direction.

Similar to the change of the first graphic, when the second graphic is also circular, the second graphic during a dynamic change may also be water droplet-shaped or quasi-elliptical. For a method for generating the second graphic changing each time, refer to the method for generating the changing first graphic.

In addition, optionally, when a dynamic change generated due to stretching occurs on each of the first graphic and the second graphic, a protrusion deformation degree of the second graphic is less than the protrusion deformation degree of the first graphic.

Optionally, the second graphic may not be displaced along with the sliding track, but fixed at a location. In this way, during the dynamic change of the first graphic, an effect that the first graphic (for example, a small circle) moves relative to the second graphic (for example, a large circle) may be presented.

Optionally, the dynamic change of the first graphic further includes the displacement of the first graphic that is generated along with the sliding track.

When the first graphic is displaced, the terminal device may trigger, based on a displacement distance of the first graphic and a location of the displaced first graphic, an instruction corresponding to performing of the sliding operation. To be specific, when the displacement of the first graphic that is generated along with the sliding track of the sliding operation exceeds a specified distance or the first graphic moves to a specified location, the terminal device executes the instruction corresponding to the sliding operation. Optionally, when the displacement of the first graphic that is generated along with the sliding track of the sliding operation exceeds the specified distance or the first graphic moves to the specified location, the terminal device may further display the suspend button restored to the default state.

Optionally, when the user performs the sliding operation on the suspend button to drag the suspend button on the touch display screen, the second graphic needs to be displaced. When the second graphic is displaced, the first graphic is correspondingly displaced, and a distance and a direction of the displacement of the first graphic are basically the same as those of the displacement of the second graphic. In this way, the user can observe that the first graphic and the second graphic in the suspend button are simultaneously displaced.

Optionally, when the first graphic and/or the second graphic is displaced, the terminal device further needs to detect whether a factor, for example, a keyboard, a navigation bar, or a screen edge, that cannot normally display the suspend button exists at a location of the displaced first graphic and/or second graphic. If the factor exists, the terminal device restores the location of the first graphic and/or the second graphic to a location before displacement or a touch operation this time, to be specific, a location at which no foregoing factor exists.

In a possible design, before the terminal device detects the sliding operation, the method further includes:.

According to the foregoing method, the user may enable, through the first touch and hold operation, the terminal device to enable the function of responding to the sliding operation, to avoid a power consumption waste and a resource waste that result from enabling of the function by the terminal device for a long time.

In a possible design, when the terminal device detects that the sliding operation ends, the terminal device displays the suspend button restored to the default state.

Optionally, when the terminal device displays the suspend button whose state is to be restored, the suspend button changing last time may be restored to the suspend button in the default state through a transition animation, so that a change of the suspend button may have a transition process, and a problem of relatively poor visual effect of the user due to abrupt and direct replacement is avoided.

In a possible design, when the terminal device detects that the sliding operation ends, the terminal device executes an instruction corresponding to the sliding operation.

Optionally, the user may set the instruction corresponding to the sliding operation. For example, in a case of the sliding operation (the sliding direction, a sliding distance, the sliding track, or a sliding force or speed is not limited), the sliding operation corresponds to an instruction of returning to the home screen. For another example, when the sliding operation is differentiated based on the sliding direction, the terminal device further need to determine the sliding direction of the sliding operation, and determine an instruction corresponding to the sliding direction. The instruction corresponding to the sliding direction may be, for example, an instruction of returning to the home screen that corresponds to sliding leftward or an instruction of performing a return operation that corresponds to sliding upward.

In a possible design, when the terminal device detects a tap operation or a second touch and hold operation, the terminal device controls, in response to the detected tap operation or second touch and hold operation, the suspend button to first present an effect that the first graphic is zoomed in or zoomed out by a specified proportion, and then displays the suspend button restored to the default state, where
the second touch and hold operation is an operation of the target object on the suspend button for a touch time exceeding second duration.

For example, as shown in <FIG>, when the terminal device detects the tap operation, the terminal device may display the first graphic that is gradually zoomed in by the specified proportion and then gradually restored to the default state.

In addition, it should be further noted that when the second graphic is further displayed in the suspend button, before the terminal device displays the suspend button restored to the default state, the terminal device may also first display the second graphic zoomed in or zoomed out by the specified proportion.

Optionally, to differentially respond to the tap operation and the second touch and hold operation, the first graphic is zoomed in or zoomed out by different proportions, and/or the second graphic is zoomed in or zoomed out by different proportions.

According to the foregoing method, the suspend button may notify, through a zoom effect, the user that the suspend button has been tapped or touched and held. Therefore, according to the method, the display flexibility of the suspend button and the visual experience of the user can also be improved.

In a possible design, when the first graphic is zoomed in or zoomed out by the specified proportion, a visual parameter of the first graphic changes, where the visual parameter is at least one of the following: transparency, color, brightness, and gradation.

Similarly, when the second graphic is zoomed in or zoomed out, a visual parameter of the second graphic may also change. This is not limited in this application.

In a possible design, after the terminal device detects the tap operation or the second touch and hold operation, the terminal device executes an instruction corresponding to the tap operation or the second touch and hold operation.

Currently, the terminal device displays an interface on the touch display screen by using a display area view. The terminal device may add the view to the touch display screen by using a window manager (Window Manager) based on an interface that needs to be displayed. The suspend button needs to suspend on the home screen of the terminal device or the uppermost layer of the program interface. Therefore, a view in which the suspend button is located is different from a view in which the home screen or the program interface is located.

In addition, because in this embodiment of this application, the suspend button may present a dynamic change due to stretching in any direction, to ensure a display effect of the suspend button, an area of the view in which the suspend button is located needs to be greater than an area of the suspend button in the default state. However, an excessively large area of the view in which the suspend button causes a problem that the user cannot see content on a home screen or a program interface that is covered by the view, and cannot continue to operate the content. This causes lower user experience.

To display the suspend button presenting the dynamic effect on the touch display screen of the terminal device, and ensure user experience, in this embodiment of this application, the suspend button occupies two layers of views. To be specific, the suspend button includes a first display area and a second display area, where the first display area is used to display the suspend button, the second display area is set to be transparent (to be specific, no content is displayed in the second display area), and an area of the first display is greater than an area of the second display area. The second display area is used by the terminal device to determine an operation location of the suspend button. To be specific, the terminal device detects, by detecting whether the target object touches a location of the second display area, whether the target object performs a touch operation on the suspend button.

To be specific, when the terminal device performs S302, the following is included:
detecting, by the terminal device, a touch operation of the target object at a location of the second display area on the touch display screen, to detect the touch operation of the target object on the suspend button.

Optionally, the area of the second display area is basically consistent with an area surrounded by an outer outline of the suspend button in the default state. For example, as shown in <FIG>, the second display area and the first display area are both square, a length of a side of the second display area is the same as a diameter a of the outer outline of the suspend button, and a length of a side of the first display area is greater than the length of the side of the second display area.

Optionally, on the touch display screen, the first display area is located above the second display area. <FIG> shows a location relationship between the first display area, the second display area, and another display area in which the home screen or the program interface is located.

It should be further noted that when the suspend button moves (when the suspend button including the second graphic but not including the first graphic is displaced), the first display area and the second display area are also correspondingly displaced synchronously.

In this embodiment of this application, the second display area displays no content. Therefore, setting the second display area has relatively small impact on power consumption and performance of the terminal device.

By using the method provided in this embodiment of this application, when the terminal device detects that the target object performs the sliding operation on the suspend button, the terminal device may control the suspend button to present the effect of the dynamic change. In this way, the suspend button may present a plurality of display forms. Therefore, according to the method, the display flexibility of the suspend button can be improved, so that the visual experience of the user is improved.

Based on the foregoing embodiment, this application further provides a terminal device. The terminal device is configured to implement the suspend button display method shown in <FIG>. As shown in <FIG>, the terminal device <NUM> includes a display unit <NUM>, a detection unit <NUM>, a processing unit <NUM>, and a touch display screen <NUM>.

The display unit <NUM> is configured to display a suspend button in a default state on the touch display screen <NUM>, where a first graphic is displayed in the suspend button.

The detection unit <NUM> is configured to detect a touch operation of a target object on the suspend button.

The processing unit <NUM> is configured to: when the detection unit <NUM> detects a sliding operation, control, by using the display unit <NUM> in response to the detected sliding operation, the first graphic to present an effect of a dynamic change along with a sliding track of the sliding operation, where the dynamic change includes a dynamic change generated when the first graphic is stretched in a direction opposite to a sliding direction.

Optionally, the dynamic change generated when the first graphic is stretched in the direction opposite to the sliding direction includes protrusion deformation occurring on the first graphic in the direction opposite to the sliding direction.

Optionally, in the suspend button in the default state, a default state of the first graphic is circular; and
in the suspend button presenting the effect of the dynamic change, the first graphic during the dynamic change is water droplet-shaped or quasi-elliptical.

Optionally, in a dynamic change process of the first graphic, the first graphic changing each time is generated by the processing unit by performing a metaball algorithm on a reference graphic and an auxiliary circle.

Optionally, in a dynamic change process of the first graphic, the first graphic changing for a first time is generated by the processing unit by performing stretching processing on a first part of the first graphic in the default state, and the first graphic changing for an Mth time is generated by the processing unit by performing stretching processing on the first part of the first graphic changing for an (M-<NUM>)th time.

Optionally, in the dynamic change process of the first graphic, the first graphic changing for the first time is generated by the processing unit by performing compression processing on a second part of the first graphic in the default state, and the first graphic changing for the Mth time is generated by the processing unit by performing compression processing on the second part of the first graphic changing for the (M-<NUM>)th time.

Optionally, a second graphic is further displayed in the suspend button; and when the suspend button is in the default state, a whole of the first graphic covers the second graphic.

Optionally, in a process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, the whole or a part of the first graphic covers the second graphic.

Optionally, in the process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, a dynamic change generated when the second graphic is stretched in the direction opposite to the sliding direction occurs on the second graphic.

Optionally, the second graphic is not displaced along with the sliding track.

Optionally, the first graphic is displayed at a first display layer, the second graphic is displayed at a second display layer, and the first display layer is located above the second display layer;.

Optionally, the processing unit <NUM> is specifically configured to:
obtain a plurality of to-be-displayed image frames corresponding to an effect of a dynamic change that the whole or the part of the first graphic covers the second graphic in the process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, and sequentially display the plurality of image frames, so that in the process in which the first graphic presents the effect of the dynamic change along with the sliding track of the sliding operation, the effect of the dynamic change that the whole or the part of the first graphic covers the second graphic is achieved.

Optionally, the plurality of image frames are obtained through changing based on a group of image frames.

Optionally, the detection unit <NUM> is further configured to detect a first touch and hold operation before detecting the sliding operation, where the first touch and hold operation is an operation of the target object on the suspend button for a touch time exceeding first duration; and
the processing unit <NUM> is further configured to enable, in response to the detected first touch and hold operation, a function of responding to the sliding operation.

Optionally, the processing unit <NUM> is further configured to:
display, by using the display unit <NUM> when the detection unit <NUM> detects that the sliding operation ends, the suspend button restored to the default state.

Optionally, the processing unit <NUM> is further configured to:
execute, when the detection unit <NUM> detects that the sliding operation ends, an instruction corresponding to the sliding operation.

Optionally, the processing unit <NUM> is further configured to execute, when displacement of the first graphic that is generated along with the sliding track of the sliding operation exceeds a specified distance or the first graphic moves to a specified location, the instruction corresponding to the sliding operation.

The processing unit <NUM> is further configured to: when the detection unit <NUM> detects a tap operation or a second touch and hold operation, control, in response to the detected tap operation or second touch and hold operation, the suspend button to first present an effect that the first graphic is zoomed in or zoomed out by a specified proportion, and then display the suspend button restored to the default state, where
the second touch and hold operation is an operation of the target object on the suspend button for a touch time exceeding second duration.

Optionally, when the first graphic is zoomed in or zoomed out by the specified proportion, a visual parameter of the first graphic changes, where the visual parameter is at least one of the following: transparency, color, brightness, and gradation.

Optionally, the processing unit <NUM> is further configured to execute an instruction corresponding to the tap operation or the second touch and hold operation.

Optionally, the suspend button includes a first display area and a second display area, where the first display area is used to display the suspend button, and an area of the first display is greater than an area of the second display area; and
when detecting the touch operation of the target object on the suspend button, the detection unit <NUM> is specifically configured to:
detect a touch operation of the target object at a location of the second display area on the touch display screen, to detect the touch operation of the target object on the suspend button.

Optionally, the suspend button is a virtual button that has an instruction trigger function and that suspends on a home screen of the terminal device or an uppermost layer of a program interface that is currently running.

An embodiment of this application provides a terminal device. When the terminal device detects that a target object performs a sliding operation on a suspend button, the terminal device may control the suspend button to present an effect of a dynamic change. In this way, the suspend button may present a plurality of display forms. Therefore, according to the method, display flexibility of the suspend button can be improved, so that visual experience of a user is improved.

It should be noted that module division in the embodiments of this application is an example and is merely logical function division, and there may be other division manners during actual implementation.

When the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, the integrated unit may be stored in a computer-readable storage medium. Based on such an understanding, the technical solutions of this application essentially, or the part contributing to the prior art, or all or some of the technical solutions may be implemented in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for instructing a computer device (which may be a personal computer, a server, a network device, or the like) or a processor (processor) to perform all or some of the steps of the methods described in the embodiments of this application. The foregoing storage medium includes: any medium that can store program code, such as a USB flash drive, a removable hard disk, a read-only memory (read-only memory, ROM), a random access memory (random access memory, RAM), a magnetic disk, or a compact disc.

Based on the foregoing embodiment, an embodiment of this application further provides a terminal device. The terminal device is configured to implement the suspend button display method shown in <FIG>, and has functions of the terminal device <NUM> shown in <FIG>. As shown in <FIG>, the terminal device <NUM> includes a touch display screen <NUM>, a processor <NUM>, and a memory <NUM>.

The touch display screen <NUM>, the processor <NUM>, and the memory <NUM> are connected to each other. Optionally, the touch display screen <NUM>, the processor <NUM>, and the memory <NUM> may be connected to each other by using a bus <NUM>. The bus <NUM> may be a peripheral component interconnect (peripheral component interconnect, PCI) bus, an extended industry standard architecture (extended industry standard architecture, EISA) bus, or the like. The bus may be classified into an address bus, a data bus, a control bus, and the like. For ease of representation, only one thick line is used to represent the bus in <FIG>, but this does not indicate that there is only one bus or only one type of bus.

Optionally, the terminal device <NUM> further includes a transceiver <NUM>, configured to communicate and interact with another device.

The processor <NUM> is configured to implement the suspend button display method shown in <FIG>. For details, refer to the description in the foregoing embodiment.

The memory <NUM> is configured to store a program instruction and the like. Specifically, the program instruction may include program code, and the program code includes a computer operation instruction. The memory <NUM> may include a random access memory (random access memory, RAM), or may include a non-volatile memory (non-volatile memory), for example, at least one magnetic disk memory. The processor <NUM> executes a program stored in the memory <NUM>, to implement the foregoing functions, thereby implementing the suspend button display method shown in <FIG>.

In conclusion, the embodiments of this application provide a suspend button display method and a terminal device. In the solutions, when a terminal device detects that a target object performs a sliding operation on a suspend button, the terminal device may control the suspend button to present an effect of a dynamic change. In this way, the suspend button may present a plurality of display forms. Therefore, according to the method, display flexibility of the suspend button can be improved, so that visual experience of a user is improved.

This application is described with reference to the flowcharts and/or block diagrams of the method, the device (system), and the computer program product according to this application. It should be understood that computer program instructions may be used to implement each process and/or each block in the flowcharts and/or the block diagrams and a combination of a process and/or a block in the flowcharts and/or the block diagrams. These computer program instructions may be provided for a general-purpose computer, a special-purpose computer, an embedded processor, or a processor of any other programmable data processing device to generate a machine, so that the instructions executed by a computer or a processor of any other programmable data processing device generate an apparatus for implementing a specific function in one or more processes in the flowcharts and/or in one or more blocks in the block diagrams.

Claim 1:
A suspend button display method, comprising:
displaying (S302), by a terminal device, a suspend button in a default state on a touch display screen, wherein a first graphic is displayed in the suspend button;
detecting, by the terminal device, a touch operation of a target object on the suspend button; and
when the terminal device detects a sliding operation, controlling (S303), by the terminal device in response to the detected sliding operation, the first graphic to present an effect of a dynamic change along with a sliding track of the sliding operation, wherein the dynamic change comprises a dynamic change generated when the first graphic is stretched in a direction opposite to a sliding direction;
wherein before the terminal device detects the sliding operation, the method further comprises:
detecting, by the terminal device, a first touch and hold operation, wherein the first touch and hold operation is an operation of the target object on the suspend button for a touch time exceeding first duration; and
enabling, by the terminal device in response to the detected first touch and hold operation, a function of responding to the sliding operation; and further
after detecting a second touch and hold operation, controlling by the terminal device, in response to the detected second touch and hold operation, the suspend button to first present an effect that the first graphic is zoomed in or zoomed out by a specified proportion, and then displays the suspend button restored to the default state, where the second touch and hold operation is an operation of the target object on the suspend button for a touch time exceeding second duration.