WO2019076238A1 - 一种悬浮按钮显示方法及终端设备 - Google Patents

一种悬浮按钮显示方法及终端设备 Download PDF

Info

Publication number
WO2019076238A1
WO2019076238A1 PCT/CN2018/109896 CN2018109896W WO2019076238A1 WO 2019076238 A1 WO2019076238 A1 WO 2019076238A1 CN 2018109896 W CN2018109896 W CN 2018109896W WO 2019076238 A1 WO2019076238 A1 WO 2019076238A1
Authority
WO
WIPO (PCT)
Prior art keywords
graphic
terminal device
sliding
floating button
default state
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2018/109896
Other languages
English (en)
French (fr)
Inventor
梁俊
杨雪
李康
陶丽娜
卢海根
高广凤
宋昱
黄雪妍
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to EP18867729.8A priority Critical patent/EP3683666B1/en
Publication of WO2019076238A1 publication Critical patent/WO2019076238A1/zh
Priority to US16/847,119 priority patent/US11016644B2/en
Anticipated expiration legal-status Critical
Priority to US17/308,687 priority patent/US11507261B2/en
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials

Definitions

  • the present application relates to the field of terminal devices, and in particular, to a floating button display method and a terminal device.
  • a floating navigation button referred to as a floating button
  • the user can perform specific functions by operating the floating button displayed on the touch display.
  • the floating button in the terminal device is equivalent to one picture. Therefore, when the user operates the floating button in the touch display screen of the terminal device, the interaction mode between the user and the floating button is generally only the following:
  • the set function icon When the user presses or clicks the floating button, the set function icon will be displayed around the floating button; or, the floating button disappears, and the touch screen displays a separate function area, wherein the function area includes the set function. icon.
  • the floating button of the conventional design has a problem that the interaction mode with the user is single and the display flexibility is poor.
  • the application provides a floating button display method and a terminal device for improving display flexibility of a floating button.
  • an embodiment of the present application provides a floating button display method, which may include the following steps:
  • the terminal device displays a floating button of a default state on the touch display screen, wherein the first graphic is displayed in the floating button; then, the terminal device detects a touch operation of the floating button by the target object; When the terminal device detects the sliding operation, the terminal device controls the sliding operation of the first graphic following the sliding operation to display a dynamic change effect in the touch display screen in response to the detected sliding operation;
  • the dynamic change comprises: a dynamic change of the first graphic when being stretched in a direction opposite to the sliding direction.
  • the terminal device may control the floating button to exhibit a dynamic change effect.
  • the first graphic in the floating button can simulate a dynamic change effect when dragging an object having mass, elasticity and toughness in the physical world, so that the user clearly feels that the touch operation acts on the floating On the button, therefore, the method can improve the display flexibility of the floating button, thereby improving the user's visual experience.
  • the dynamic change of the first pattern when stretched in a direction opposite to the sliding direction comprises: the first pattern undergoing protrusion deformation in a direction opposite to the sliding direction.
  • the user can make the floating button exhibit the inertia hysteresis phenomenon when the elastic object is dragged when the floating button is swiped, so that the user feels the experience closer to the physical world.
  • the degree of protrusion deformation of the first figure may be related to a sliding track distance of the sliding operation, a touch force of the target object, a sliding speed of the target object, and the like. For example, the farther the sliding track distance of the sliding operation is, or the greater the touch force of the target object, or the higher the sliding speed of the target object, the higher the degree of protrusion deformation of the first figure. In this way, the user can change the protrusion deformation of the first figure by adjusting the target object.
  • the default state of the first graphic is a circle, and correspondingly, the first graphic that changes dynamically is a drop-shaped or elliptical-like shape.
  • the first graphic in order to present the effect of the dynamic change of the first graphic, the first graphic may be dynamically changed to present the dynamics before the sliding operation ends or the upper limit of the deformation of the first graphic is not reached. Change effect.
  • the first graphic changed each time is generated by the terminal device by performing a melting algorithm on the reference graphic and the auxiliary circle.
  • the size of the reference graphic is the same as the size of the first graphic in the default state, and the first center distance is smaller than the second center distance, and the first center distance is the number of the Nth change.
  • a distance between a center of the reference pattern and a center of the auxiliary circle, wherein the second center distance is a center of the reference pattern when the first pattern of the (N+1)th change is generated The distance between the centers of the auxiliary circles, N is an integer greater than or equal to 1.
  • the user can make the floating button appear a teardrop shape or an ellipse shape when the user slides the floating button, so that the user feels the experience closer to the physical world.
  • the terminal device splits the first graphic of the default state into two parts according to a dividing line perpendicular to the sliding direction before the first graphic performs the protrusion deformation, and determines the relative to a part of the dividing line in a direction opposite to the sliding direction is a first portion, and then, when determining the first pattern that is changed for the first time, performing stretching processing on the first portion to obtain the first pattern that is changed for the first time,
  • the first pattern of the Mth change is determined, the first portion of the M-1th change is subjected to a stretching process, and M is an integer greater than 2.
  • the user can make the floating button appear a teardrop shape or an ellipse shape when the user slides the floating button, so that the user feels the experience closer to the physical world.
  • the first graphic that is changed for the first time is that the terminal device performs compression processing on the second part of the first graphic in a default state.
  • the first graphic of the Mth change is generated by the terminal device compressing the second portion of the first graphic of the M-1 change; wherein the first state is the first state.
  • the second portion of a graphic is split into two portions of the first graphic in the default state, except for the first portion.
  • a second graphic is also displayed in the floating button, and in the default state, the first graphic is completely covered on the second graphic.
  • the first graphic is wholly or partially overlaid on the second graphic during a process in which the first graphic follows a sliding trajectory of the sliding operation to exhibit a dynamic change.
  • the second graphic occurs in a dynamic change when stretched in a direction opposite to the sliding direction.
  • the second pattern may also be subjected to protrusion deformation in a direction opposite to the sliding direction, wherein the method of generating the second pattern for each change may refer to the first step of generating a change.
  • the method of graphics is not repeated here.
  • the second graphic does not shift with the sliding trajectory. Since the second graphic is in a fixed position, the effect of the first image relative to the second graphic motion may be presented when the first graphic changes dynamically.
  • the degree of protrusion deformation of the second pattern is smaller than the degree of protrusion deformation of the first pattern.
  • the first graphic is displayed on a first display layer
  • the second graphic is displayed in a second display layer
  • the first display layer is located on the second display layer
  • the floating button is in a default state, the first display layer is entirely covered on the second display layer; in the process that the first graphic follows the sliding track of the sliding operation to exhibit a dynamic change effect, the first a display layer is wholly or partially covered on the second display layer, so that the first graphic is covered in whole or in part during the process in which the first graphic follows the sliding track of the sliding operation to exhibit a dynamic change effect.
  • the second graphic On the second graphic.
  • the terminal device acquires a process of displaying a dynamic change of the sliding trajectory of the first graphic following the sliding operation, the first graphic covering all or part of the second graphic a plurality of image frames of the dynamic change effect, sequentially displaying the plurality of image frames, thereby implementing the first graphic in a process in which the sliding motion of the first graphic following the sliding operation exhibits a dynamic change effect A dynamic change effect that covers all or part of the second graphic.
  • the plurality of image frames are derived based on a set of image frame changes.
  • the terminal device before the terminal device detects the sliding operation, the terminal device detects a first long press operation, and the first long press operation touches the floating button for the target object The operation of the time exceeding the first duration; the terminal device is responsive to the detected first long press operation to initiate a function responsive to the sliding operation.
  • the user can enable the terminal device to activate the function of responding to the sliding operation by using the first long-press operation, thereby avoiding waste of power consumption and waste of resources caused by the terminal device being turned on for a long time.
  • the terminal device when the terminal device detects the end of the sliding operation, the terminal device displays the hover button that restores the default state.
  • the terminal device may restore the floating button of the last change to the default state by using a transition animation, so that the change of the floating button may have a transition process to avoid abruptly Direct replacement causes problems that the user's visual effect is poor.
  • the terminal device when the terminal device detects that the sliding operation ends, the terminal device executes an instruction corresponding to the sliding operation.
  • the dynamic change further includes: the first graphic is displaced along with the sliding track, in which case the first graphic follows a sliding track of the sliding operation.
  • the terminal device executes an instruction corresponding to the sliding operation.
  • the terminal device may also display the hover button to restore the default state.
  • the terminal device when the terminal device detects a click operation or a second long press operation, the terminal device controls the floating button in response to the detected click operation or the second long press operation. Firstly, the effect of the first graphic to enlarge or reduce the set ratio is displayed, and then the floating button of the default state is displayed; wherein the second long press operation is that the target object touches the floating button more than the first time Two hours of operation.
  • the floating button can notify the user that the floating button has been clicked or long pressed by the effect of zooming, so the method can also improve the display flexibility of the floating button and the visual experience of the user.
  • the visual parameter of the first graphic changes, wherein the visual parameter is at least one of the following: transparency, color, Brightness and grayscale.
  • the terminal device performs an instruction corresponding to the click operation or the second long press operation.
  • the floating button includes a first display area and a second display area, wherein the first display area is used to display the floating button, and the second display area is set to be transparent (ie No content is displayed), the area of the first display is larger than the area of the second display area;
  • the terminal device detects a touch operation of the target object on the floating button by the following steps:
  • the terminal device detects a touch operation of the target object on the floating button by detecting a touch operation of the target object at a position of the second display area in the touch display screen.
  • the hover button is displayed at the top of the main interface of the terminal device or the currently running program interface, and has a virtual button that triggers the command function.
  • the embodiment of the present application further provides a terminal device, including a unit or a module for performing each step of the foregoing first aspect.
  • the present application provides a terminal device including at least one processing element for storing a program and data, and at least one storage element for performing the first application of the present application The method provided in the aspect.
  • the embodiment of the present application further provides a computer storage medium, where the software program stores a software program, and the software program can implement the first aspect or any one of them when being read and executed by one or more processors.
  • the method provided by the design is not limited to:
  • an embodiment of the present application further provides a computer program product comprising instructions, which when executed on a computer, cause the computer to perform the method described in the above aspects.
  • the embodiment of the present application provides a chip system, where the chip system includes a processor, and is configured to support the terminal device to implement the functions involved in the foregoing first aspect.
  • the chip system further comprises a memory for storing necessary program instructions and data of the terminal device.
  • the chip system can be composed of chips, and can also include chips and other discrete devices.
  • the terminal device when the terminal device detects that the target object slides the floating button, the terminal device may control the floating button to exhibit a dynamic change effect.
  • the floating button can present a variety of display modes, and therefore, the method can improve the display flexibility of the floating button, thereby improving the user's visual experience.
  • FIG. 1 is a schematic diagram of a floating button provided by an embodiment of the present application.
  • FIG. 2 is a structural diagram of a terminal device according to an embodiment of the present application.
  • FIG. 3 is a schematic diagram of a floating button display method according to an embodiment of the present application.
  • FIG. 4 is a diagram showing an example of a first floating button display according to an embodiment of the present application.
  • FIG. 5 is a schematic diagram showing a second display of a floating button according to an embodiment of the present application.
  • FIG. 6 is a schematic diagram showing a third floating button display according to an embodiment of the present application.
  • FIG. 7 is a diagram showing an example of displaying a fourth floating button according to an embodiment of the present application.
  • FIG. 8 is a schematic diagram of relationship between a floating button and a display area according to an embodiment of the present application.
  • FIG. 9 is a schematic diagram of a positional relationship of a display area according to an embodiment of the present application.
  • FIG. 10 is a schematic structural diagram of a terminal device according to an embodiment of the present disclosure.
  • FIG. 11 is a schematic structural diagram of another terminal device according to an embodiment of the present disclosure.
  • the application provides a floating button display method and a terminal device for improving display flexibility of a floating button.
  • the method and the terminal device are based on the same inventive concept. Since the method and the terminal device solve the problem are similar, the implementation of the device and the method can be referred to each other, and the repeated description is not repeated.
  • the terminal device when the terminal device detects that the target object slides the floating button, the terminal device may control the floating button to exhibit a dynamic change effect.
  • the floating button can present a variety of display modes, and therefore, the method can improve the display flexibility of the floating button, thereby improving the user's visual experience.
  • the terminal device is a device capable of human-computer interaction by touching the display screen.
  • the user can operate the touch display screen through the target object to cause the terminal device to perform a specific function, and the terminal device can also display the user interface through the touch display screen.
  • home smart terminals including: air conditioners, refrigerators, rice cookers, water heaters, etc.
  • business intelligence terminals including: video phones, conference desktop smart terminals, etc.
  • wearable devices including smart watches, smart glasses, etc.
  • financial intelligence Terminals as well as smart phones, tablets, personal digital assistants (PDAs), in-vehicle devices, computers, and the like.
  • PDAs personal digital assistants
  • the target object is an object that can be detected and positioned by the touch display screen when approaching or contacting the touch display screen of the terminal device, such as a manual input tool commonly used by users such as a human body and a stylus.
  • the floating button is displayed on the main interface of the terminal device or the top layer of the currently running program interface, and has a virtual button for triggering the command function.
  • the general hover button is designed to be specific in shape for user identification, so the hover button consists of at least one graphical element. It should be noted that the embodiment of the present application does not limit the type of the graphic element displayed by the floating button.
  • the floating button can exhibit a dynamic change effect, and the dynamic change is generally based on the shape of a floating button in a default state. Therefore, the graphic elements in the default state of the floating button are generally regular graphics.
  • the default state is a state when the floating button is not operated by the user and does not exhibit a dynamic change effect, that is, an initial state of the floating button.
  • the graphic elements in the hover are also in the default state.
  • the floating button can display a graphic, for example, in the default state, the graphic is (right angle or rounded) square, round or polygonal star, etc., for example, the default state of the floating button shown in Figure 1 ad in Figure 1.
  • the hover button may also display a plurality of graphics, wherein the plurality of graphics are the same type of graphics, such as a floating button in a default state as shown in FIG. 1 and FIG. Different types of graphics, such as the floating button of the default state shown in Figures 1 and 15 of Figure 1.
  • each of the floating buttons in FIG. 1 does not constitute a limitation on the shape of the floating button.
  • FIG. 1 is only an example of the element of the shape of the floating button.
  • each graphic element in the floating button may be distinguished by visual parameters such as color, transparency, brightness, and gray scale. For example.
  • Touch operation is implemented for the user to touch or touch the touch screen of the terminal device through the target object.
  • the touch operation of the target object on the floating button is not the direct operation of the target object on the floating button, but the area of the target object touched by the touch display screen to the position displayed by the floating button.
  • the display area also known as view.
  • the display interface In the same display interface, at least one layer of display area is included. Different display areas can display different user interfaces. Since the hover button needs to be hovering on the main interface or the uppermost layer of the running program interface, when the hover button is displayed in the display interface, the display interface includes a multi-layer display area, wherein the bottom display area is used to display the main interface. Or the program interface, the other at least one display area is used to display the floating button.
  • multiple means two or more.
  • FIG. 2 is a structural diagram of a possible terminal device to which the floating button display method provided by the embodiment of the present application is applicable.
  • the terminal device 200 includes: a radio frequency (RF) circuit 210, a power source 220, a processor 230, a memory 240, an input unit 250, a display unit 260, and a wireless fidelity (WiFi). Module 270, and the like.
  • RF radio frequency
  • the terminal device provided by the embodiment of the present application may include more or less components than the illustrated ones, or a combination of some Some parts, or different parts are arranged.
  • the components of the terminal device 200 are specifically described below with reference to FIG. 2:
  • the RF circuit 210 can be used for receiving and transmitting data during communication or during a call. Specifically, after receiving the downlink data of the base station, the RF circuit 210 sends the data to the processor 230 for processing; in addition, the uplink data to be sent is sent to the base station.
  • the RF circuit 210 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a Low Noise Amplifier (LNA), a duplexer, and the like.
  • LNA Low Noise Amplifier
  • RF circuitry 210 can also communicate with the network and other devices via wireless communication.
  • the wireless communication may use any communication standard or protocol, including but not limited to global system of mobile communication (GSM), general packet radio service (GPRS), code division multiple access (code) Division multiple access (CDMA), wideband code division multiple access (WCDMA), long term evolution (LTE), e-mail, short messaging service (SMS), and the like.
  • GSM global system of mobile communication
  • GPRS general packet radio service
  • code division multiple access code division multiple access
  • CDMA code division multiple access
  • WCDMA wideband code division multiple access
  • LTE long term evolution
  • e-mail e-mail
  • SMS short messaging service
  • the WiFi technology belongs to the short-range wireless transmission technology, and the terminal device 200 can connect to an access point (AP) through the WiFi module 270, thereby implementing access to the data network.
  • the WiFi module 270 can be used for receiving and transmitting data during communication.
  • the terminal device 200 may further include a communication interface for implementing physical connection with other devices.
  • the communication interface of the communication interface with the other device is connected by a cable, and data transmission between the terminal device 200 and other devices is implemented.
  • the terminal device 100 in order to implement the terminal device 200, it is required to have a data transmission function. Therefore, the terminal device 100 needs to include a communication module internally.
  • FIG. 1 shows the communication module of the RF circuit 210, the WiFi module 270, and the like, and the communication interface, it can be understood that at least one of the above components or the other is present in the terminal device 200 for A communication module (such as a Bluetooth module) that implements communication for data transmission.
  • a communication module such as a Bluetooth module
  • the terminal device 200 when the terminal device 200 is a mobile phone or a wearable device, the terminal device 200 may include the RF circuit 210, and may further include the WiFi module 270; when the terminal device 200 is a computer, the The terminal device 200 may include the communication interface, and may further include the WiFi module 270. When the terminal device 200 is a tablet computer, the smart terminal device 200 may include the WiFi module 270.
  • the memory 240 can be used to store software programs as well as modules.
  • the processor 230 executes various functional applications and data processing of the terminal device 200 by running software programs and modules stored in the memory 240.
  • the memory 240 may mainly include a storage program area and a storage data area.
  • the storage program area can store an operating system, various application programs, and the like;
  • the storage data area can store data and the like created according to the use of the smart terminal device.
  • the memory 240 can include high speed random access memory, and can also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid state storage device.
  • the input unit 250 can be configured to receive numeric or character information input by a user, and an input signal that generates a key related to user settings and function control of the terminal device 200.
  • the input unit 250 may include a touch panel 251 and other input devices 252.
  • the touch panel 251 also referred to as a touch screen, can collect touch operations on or near the user (such as a user using a finger, a stylus, or the like on the touch panel 251 or The operation in the vicinity of the touch panel 251) drives the corresponding connection device according to a preset program.
  • the touch panel 251 can include two parts: a touch detection device and a touch controller. Wherein, the touch detection device detects the touch orientation of the user, and detects a signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts the touch information into contact coordinates, and sends the touch information.
  • the processor 230 is provided and can receive commands from the processor 230 and execute them.
  • the touch panel 251 can be implemented in various types such as resistive, capacitive, infrared, and surface acoustic waves.
  • the other input device 252 may include, but is not limited to, one or more of a physical keyboard, function keys (such as a volume control button, a switch button, etc.), a trackball, a mouse, a joystick, and the like.
  • function keys such as a volume control button, a switch button, etc.
  • a trackball such as a mouse, a joystick, and the like.
  • the display unit 260 can be used to display information input by a user, or information provided to the user, and various menus and the like of the terminal device 100.
  • the display unit 260 is a display system of the terminal device 200 for presenting a user interface and implementing human-computer interaction.
  • the display unit 260 can include a display panel 261.
  • the display panel 261 can be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like.
  • the touch panel 251 can cover the display panel 261, and when the touch panel 251 detects a touch operation on or near it, the touch panel 251 transmits to the processor 230 to determine the type of the touch event. The processor 230 then provides a corresponding visual output on the display panel 261 based on the type of touch event.
  • touch panel 251 and the display panel 261 are used as two independent components to implement the input and input functions of the terminal device 200, in the embodiment of the present application, the The touch panel 251 is integrated with the display panel 261 (ie, the touch display screen according to the embodiment of the present application) to implement the input and output functions of the terminal device 100.
  • the processor 230 is a control center of the terminal device 200, and connects various components by using various interfaces and lines, by running or executing software programs and/or modules stored in the memory 240, and calling the storage in the
  • the data in the memory 240 performs various functions and processing data of the terminal device 200, thereby implementing various services based on the terminal device 200.
  • the processor 230 can include one or more processing units.
  • the processor 230 can integrate an application processor and a modem processor, wherein the application processor mainly processes an operating system, a user interface, an application, and the like, and the modem processor mainly processes wireless communications. It can be understood that the above modem processor may not be integrated into the processor 230.
  • the terminal device 200 also includes a power source 220 (such as a battery) for powering various components.
  • a power source 220 (such as a battery) for powering various components.
  • the power source 220 can be logically connected to the processor 230 through a power management system, thereby implementing functions such as managing charging, discharging, and power consumption through the power management system.
  • the terminal device 200 may further include various sensors, audio circuits, cameras, and the like, and details are not described herein.
  • the embodiment of the present application provides a floating button display method, which is applicable to the terminal device shown in FIG. 2 .
  • the terminal device has a touch display screen.
  • the process of the method includes:
  • the terminal device displays a floating button of a default state on the touch display screen, and the first graphic is displayed in the floating button.
  • the hovering button is hovered on the main interface of the terminal device or the uppermost layer of the currently running program interface to form a current user interface.
  • a second graphic is further displayed in the floating button.
  • the shapes of the first graphic and the second graphic are not limited.
  • the terminal device detects a touch operation of the target object on the floating button.
  • the terminal device may collect, by the touch display screen having an input function, a touch operation by the user through the target object on or near the touch display screen.
  • the terminal device When the terminal device detects the sliding operation, the terminal device displays a dynamic change effect in response to the detected sliding operation to control the sliding trajectory of the first graphic to follow the sliding operation;
  • the dynamic change includes a dynamic change of the first pattern when stretched in a direction opposite to the sliding direction.
  • the floating button can simulate a dynamic change effect when dragging an object with mass, elasticity and toughness in the physical world, so that the user can clearly feel that the touch operation acts on the floating button. Therefore, the method can improve the display flexibility of the floating button, thereby improving the visual experience of the user.
  • the dynamic change of the first graphic when being stretched in a direction opposite to the sliding direction comprises: the first graphic is deformed by protrusion in a direction opposite to the sliding direction.
  • the floating button when the user performs a sliding operation on the floating button, the floating button can be presented with an inertia hysteresis phenomenon when the elastic object is dragged, so that the user feels the experience closer to the physical world.
  • the degree of protrusion deformation of the first graphic may be related to a sliding track distance of the sliding operation, a touch force of the target object, a sliding speed of the target object, and the like. For example, the farther the sliding track distance of the sliding operation is, or the greater the touch force of the target object, or the higher the sliding speed of the target object, the higher the degree of protrusion deformation of the first figure.
  • the dynamic change further includes: the first graphic is displaced along the sliding track.
  • the first pattern displacement direction is the sliding direction.
  • the first graphic when the user performs a sliding operation on the floating button, the first graphic not only has protrusion deformation, but also Displacement occurs, which can further simulate the effect of the physical world on the actual object dragging.
  • the first graphic when the user performs a sliding operation on the floating button to perform dragging on the floating button in the touch display screen, the first graphic is also required to be displaced.
  • the default state of the first graphic is a circle; then, correspondingly, dynamically changing in the floating button that exhibits a dynamically changing effect
  • the first pattern is a drop shape or an elliptical shape. For example, as shown in FIG. 4, when the target object slides down the floating button, the first graphic will assume the shape of the right side.
  • the first graphic may be changed by a plurality of times to present a dynamic change effect before the sliding operation ends or the upper limit of deformation of the first graphic is not reached.
  • the change of the first graphic may be implemented by using the following methods:
  • the first graphic changed each time is generated by the terminal device by performing a melting algorithm (ie, a metaball algorithm) on the reference graphic and the auxiliary circle;
  • a melting algorithm ie, a metaball algorithm
  • the size of the reference graphic is the same as the size of the first graphic in the default state, and the first center distance is smaller than the second center distance, and the first center distance is the number of the Nth change.
  • a distance between a center of the reference pattern and a center of the auxiliary circle, wherein the second center distance is a center of the reference pattern when the first pattern of the (N+1)th change is generated The distance between the centers of the auxiliary circles, N is an integer greater than or equal to 1.
  • the size of the auxiliary circle may be specifically set according to factors such as an actual scene, a degree of deformation of the first pattern protrusion, and the like.
  • the degree of protrusion deformation of the first pattern has an influence, and therefore, the center distance of the two is smaller than the next deformation each time the deformation occurs.
  • the distance between the centers of the two may be such that the degree of protrusion of the first pattern generated by the next deformation is greater than the degree of protrusion of the first pattern generated by the current deformation, so that the first pattern follows the When the sliding trajectory of the sliding operation exhibits a dynamic change, the larger the sliding trajectory, the greater the degree of protrusion of the first graphic.
  • the position of the reference image is also changed every time the first graphic of the change is not displaced. No change occurs; in the case where the first pattern of each change is displaced, the position of the reference image also changes.
  • the position of the reference pattern is the same as the position of the first figure when the first pattern that is changed for the first time is generated every time the first pattern of the change is displaced.
  • the first figure is generated by the first method described above by way of example with reference to the accompanying drawings, as shown in FIG.
  • the hover button is composed of two graphical elements.
  • the hover button in the default state is shown in Figure (1), and the inner circle in Figure (1) is the first graph. Where B is the center of the first figure and A is the initial position of the target object (finger).
  • the terminal device generates and displays the dynamically changed first graphic in response to the sliding operation.
  • the terminal device When the terminal device generates the first graphic that changes for the first time, referring to FIG. (3), determining a position of a center of the reference graphic (the size is the same as the size of the first graphic in the default state) is B, and The position C of the center of the auxiliary circle required for this change is determined, wherein the direction of B to C is the sliding direction of the finger.
  • the terminal device performs a first round change of the first graphic by performing a fusion ball algorithm on the reference pattern determined by the current change and the auxiliary circle, as shown in FIG. 4 .
  • the terminal device When the finger continues to slide, the finger slides from the A' position to A".
  • the terminal device When the terminal device generates the first pattern of the second change, as shown in FIG. (5), the position of the center of the reference pattern is determined as B. ', and determine the position C' of the center of the auxiliary circle required for this change, that is, the position of the center of the reference image moves b with respect to the last change, and the position of the center of the auxiliary circle moves to c.
  • the terminal device pairs this time
  • the change-determined reference pattern and the auxiliary circle perform a fusion sphere algorithm to generate the first pattern of the second variation, as shown in (6).
  • the terminal device may continue to determine the position of the reference pattern and the auxiliary circle according to the above method, thereby determining the first pattern of each change until the finger no longer slides, the sliding operation ends, or the For the specific upper limit of the deformation of the first figure, the specific steps can be referred to the above steps, and details are not described herein again.
  • the distance from B' to C' is greater than the distance from B to C.
  • the distance between the center of the reference pattern determined by each change and the center of the auxiliary circle is smaller than the first threshold, and relative to the last time, the reference image
  • the center of the moving distance e.g., b
  • the center of the auxiliary circle is moved (e.g., c) less than the third threshold.
  • the first graphic that is changed for the first time is generated by the terminal device performing a stretching process on the first part of the first graphic in a default state, the Mth change
  • the first graphic is generated by the terminal device performing a stretching process on the first part of the first pattern of M-1 changes;
  • the first part of the first figure in the default state is: after splitting the first figure of the default state into two parts according to a dividing line perpendicular to the sliding direction,
  • the dividing line is a part of the opposite direction of the sliding direction, and M is an integer greater than 2.
  • the first graphic that is changed for the first time is generated by the terminal device compressing a second part of the first graphic in a default state, where The first pattern of M times change is generated by the terminal device performing compression processing on the second part of the first pattern of M-1 changes;
  • the second part of the first figure in the default state is split into two parts of the first picture in the default state, and the other part except the first part.
  • the terminal device determines a dividing line of the first graphic, the dividing line Vertically perpendicular to the sliding direction, the first pattern of the default state is split into two parts according to the dividing line, as shown in the figure, wherein the opposite direction of the sliding direction with respect to the dividing line is The first portion is the second portion in the sliding direction with respect to the dividing line.
  • the terminal device stretches the first ratio to the first portion and compresses the second portion to a second ratio (the first ratio and the second ratio may be the same or different, as shown in FIG. In the illustrated example, the first ratio and the second ratio are both 10%), and the first pattern of the first change is generated, as shown in (3).
  • the first ratio and the second ratio may be set to a comparative value. Correct
  • the terminal device When the finger continues to slide, the terminal device stretches a third ratio to the first pattern that was changed last time, and compresses the second pattern of the last change to a fourth ratio to generate the second variation.
  • a graphic is shown in Figure (4).
  • the third ratio may be the same as or different from the first ratio
  • the fourth ratio may be the same as or different from the second ratio, which is not limited in the present application.
  • the terminal device may continue to stretch the first portion and compress the second portion according to the above method, thereby determining the first pattern changed every time until the finger no longer slides, and the sliding operation ends. Or, the upper limit of the deformation of the first graphic is reached.
  • the specific steps refer to the above steps, and details are not described herein again.
  • the user can make the floating button appear a teardrop shape or an ellipse shape when the user performs a sliding operation on the floating button, so that the user feels the experience closer to the physical world.
  • the floating button is in a default state, and the first graphic is all over the second graphic.
  • the area of the outer contour of the second graphic is larger than the area of the outer contour of the first graphic.
  • the first graphic follows the sliding track of the sliding operation to exhibit a dynamically changing effect
  • the first graphic is wholly or partially covered on the second graphic, that is, the changed A graphic cannot exceed the outer contour of the second graphic.
  • the embodiment of the present application provides two implementation manners:
  • the first graphic and the second graphic of the floating button are respectively displayed on different display layers (similar to a layer), that is, the first graphic is displayed on the first display layer, and the second graphic is displayed on In the second display layer, the first display layer is located above the second display layer; wherein, the contour of the first display layer is the same as the outer contour of the first graphic, and the second display layer The contour is the same as the outer contour of the second graphic,
  • the floating button is in a default state, and the first display layer is completely covered on the second display layer;
  • the first display layer is wholly or partially covered on the second display layer, thereby implementing the first graphic
  • the first graphic is wholly or partially covered on the second graphic.
  • the multiple graphics frames are obtained based on a group of graphics frame changes.
  • the plurality of image frames are obtained based on a set of image frame changes, that is, a set of image frames are generated in advance, and the set of image frames includes respective image frames corresponding to the effect of the first graphic moving in the first direction (ie, the image frame) Visually, there are both the first image and the second image), and then when other directions need to be displayed (because the touch track can be in any direction), the image to be displayed in the next frame is determined according to the touch data.
  • the angle is then adjusted to a certain angle of the image frame in the first direction to obtain an image frame to be displayed and displayed.
  • the occupied memory is relatively small.
  • the second graphic occurs in a dynamic change when stretched in a direction opposite to the sliding direction.
  • the second pattern may also be deformed by protrusions in a direction opposite to the sliding direction.
  • the second pattern that changes dynamically may also be a drop shape or an ellipse.
  • the method for generating the second graphic changed each time refer to the method for generating the changed first graphic, which is not described herein again.
  • the degree of protrusion deformation of the second graphic is smaller than the degree of deformation of the protrusion of the first graphic.
  • the second graphic may not be displaced along with the sliding track, but may be fixed at one position.
  • an effect of moving the first graphic eg, a small circle
  • the second graphic eg, a large circle
  • the dynamic change of the first graphic further includes: the first graphic is displaced along the sliding track.
  • the terminal device may trigger an instruction corresponding to the sliding operation according to the displacement distance of the first image and the position of the first graphic after the displacement. That is, when the displacement of the first graphic following the sliding trajectory of the sliding operation exceeds the set distance or the first graphic moves to the set position, the terminal device executes an instruction corresponding to the sliding operation.
  • the terminal device may further display a restored default state. The floating button.
  • the second graphic when the user performs a sliding operation on the floating button to perform dragging on the floating button in the touch display screen, the second graphic needs to be displaced.
  • the first graphic when the second graphic is displaced, the first graphic is also displaced correspondingly, and the distance and direction of the displacement of the first graphic and the second graphic are substantially the same. In this way, the user can be made to observe that the first graphic and the second graphic in the floating button are simultaneously displaced.
  • the terminal device further needs to detect whether a position after the displacement of the first graphic and/or the second graphic is There are factors such as a keyboard, a navigation bar, a screen edge, etc. that cannot display the floating button normally. If present, the terminal device restores the position of the first graphic and/or the second graphic to before the current displacement or touch Prior to operation, there is no location for the above factors.
  • the method before the terminal device detects the sliding operation, the method further includes:
  • the terminal device detects a first long press operation, where the first long press operation is an operation in which the target object touches the floating button for more than a first duration;
  • the terminal device is responsive to the detected first long press operation to initiate a function responsive to the sliding operation.
  • the user can enable the terminal device to start the function of responding to the sliding operation by using the first long-press operation, thereby avoiding waste of power consumption and waste of resources caused by the terminal device being turned on for a long time.
  • the terminal device when the terminal device detects the end of the sliding operation, the terminal device displays the hover button that restores the default state.
  • the floating button may be restored to the default state of the hovering button by the last change of the hovering button, so that the hovering may be performed.
  • the change of the button has a transition process to avoid abruptly replacing the problem that causes the user's visual effect to be poor.
  • the terminal device when the terminal device detects that the sliding operation ends, the terminal device executes an instruction corresponding to the sliding operation.
  • the user can set an instruction corresponding to the sliding operation.
  • the sliding operation corresponds to an instruction to return to the main interface.
  • the terminal device further needs to determine the sliding direction of the sliding operation, and determine an instruction corresponding to the sliding direction, wherein the instruction corresponding to the sliding direction may be: sliding to the left Return to the instruction of the main interface, slide up to the instruction to perform the return operation, and so on.
  • the terminal device when the terminal device detects a click operation or a second long press operation, the terminal device controls the floating button in response to the detected click operation or the second long press operation. Firstly, the effect of enlarging or reducing the set ratio of the first graphic is presented, and then the floating button of the default state is restored;
  • the second long press operation is an operation in which the target object touches the floating button for more than a second duration.
  • the terminal device when the terminal device detects a click operation, the terminal device may display the first graphic gradually enlarged to a set ratio, and then gradually return to the first state of the default state. Graphics.
  • the terminal device may also display zooming in or out before the terminal device displays the floating button that restores the default state. Set the scale of the second graphic.
  • the first graphic enlargement or reduction ratio is different, and/or the second graphic enlargement or reduction ratio is different.
  • the floating button can notify the user that the floating button has been clicked or long pressed by the effect of zooming, so the method can also improve the display flexibility of the floating button and the visual experience of the user.
  • the visual parameter of the first graphic changes, wherein the visual parameter is at least one of the following: transparency, color, Brightness and grayscale.
  • the visual parameters of the second graphic may also be changed, and the comparison in the present application is not limited.
  • the terminal device after the terminal device detects the click operation or the second long press operation, the terminal device performs an instruction corresponding to the click operation or the second long press operation.
  • the terminal device displays the interface in the touch display screen, which is realized by the display area view.
  • the terminal device can add a view to the touch display screen through a window manager according to an interface that needs to be displayed. Since the floating button needs to be suspended in the main interface of the terminal device or the uppermost layer of the program interface, the view where the floating button is located is different from the view where the main interface or the program interface is located.
  • the floating button may exhibit dynamic changes that are stretched in any direction.
  • the area of the view where the floating button is located needs to be compared to the default state.
  • the area of the floating button is large. However, if the area of the view where the floating button is located is too large, the user cannot see the content of the main interface or the program interface covered by the view, and the content cannot be continued, which results in a decrease in the user experience.
  • the floating button occupies two layers of views, that is, the floating button includes the first a display area for displaying the hovering button, the second display area being set to be transparent (ie, not displaying any content), the area of the first display being greater than An area of the second display area, the second display area is configured to enable the terminal device to determine an operation position of the hovering button, that is, the terminal device detects whether the target object touches the second display area At the location, detecting whether the target object touches the floating button.
  • the terminal device when the terminal device performs S302, it includes:
  • the terminal device detects a touch operation of the target object on the floating button by detecting a touch operation of the target object at a position of the second display area in the touch display screen.
  • the area of the second display area is substantially the same as the area of the outer contour of the floating button of the default state.
  • the second display area and the first display area are both square, the side length of the second display area is the same as the diameter a of the outer contour of the floating button, and the side length of the first display area is larger than The side length of the second display area is described.
  • the first display area is located above the second display area.
  • the positional relationship of the first display area, the second display area, and other display areas where the main interface or the program interface is located is as shown in FIG. 9.
  • the floating button when the floating button is moved (when the floating button includes the second graphic, the case where the first graphic is not displaced), the first display area and the The second display area also synchronously shifts accordingly.
  • the second display area does not display any content, so setting the second display area has less impact on power consumption and performance of the terminal device.
  • the terminal device when the terminal device detects that the target object slides the floating button, the terminal device may control the floating button to exhibit a dynamic change effect.
  • the floating button can present a variety of display modes, and therefore, the method can improve the display flexibility of the floating button, thereby improving the user's visual experience.
  • the present application further provides a terminal device, which is used to implement a floating button display method as shown in FIG.
  • the terminal device 1000 includes: a display unit 1001, a detecting unit 1002, a processing unit 1003, and a touch display screen 1004, wherein
  • a display unit 1001 configured to display a floating button of a default state on the touch display screen 1004, where the first graphic is displayed in the floating button;
  • the detecting unit 1002 is configured to detect a touch operation of the floating button by the target object
  • the processing unit 1003 is configured to, when the detecting unit 1002 detects the sliding operation, control the sliding track of the first graphic to follow the sliding operation by the display unit 1001 in response to the detected sliding operation
  • the effect of the dynamic change comprises: a dynamic change of the first graphic when stretched in a direction opposite to the sliding direction.
  • the dynamic change of the first graphic when being stretched in a direction opposite to the sliding direction comprises: the first graphic is deformed by protrusion in a direction opposite to the sliding direction.
  • the default state of the first graphic is a circle
  • the first pattern that changes dynamically is a drop-shaped or elliptical-like shape.
  • the first graphic changed each time is generated by the processing unit by performing a fusion ball algorithm on the reference graphic and the auxiliary circle;
  • the size of the reference graphic is the same as the size of the first graphic in the default state, and the first center distance is smaller than the second center distance, and the first center distance is the number of the Nth change.
  • a distance between a center of the reference pattern and a center of the auxiliary circle, wherein the second center distance is a center of the reference pattern when the first pattern of the (N+1)th change is generated The distance between the centers of the auxiliary circles, N is an integer greater than or equal to 1.
  • the first graphic that is changed for the first time is generated by the processing unit performing a stretching process on the first part of the first graphic in a default state, where
  • the first pattern of the M-th change is generated by the processing unit performing a stretching process on the first portion of the first pattern of M-1 changes;
  • the first part of the first figure in the default state is: after splitting the first figure of the default state into two parts according to a dividing line perpendicular to the sliding direction,
  • the dividing line is a part of the opposite direction of the sliding direction, and M is an integer greater than 2.
  • the first graphic that is changed for the first time is generated by the processing unit compressing a second part of the first graphic in a default state, where The first pattern of M times change is generated by the processing unit compressing the second part of the first pattern of M-1 changes;
  • the second part of the first figure in the default state is split into two parts of the first picture in the default state, and the other part except the first part.
  • a second graphic is further displayed in the floating button; the floating button is in a default state, and the first graphic is all over the second graphic.
  • the first graphic is wholly or partially covered on the second graphic.
  • the second graphic occurs in a dynamic change when stretched in a direction opposite to the sliding direction.
  • the second graphic does not shift along with the sliding track.
  • the first graphic is displayed on the first display layer
  • the second graphic is displayed in the second display layer
  • the first display layer is located on the second display layer
  • the floating button is in a default state, and the first display layer is completely covered on the second display layer;
  • the first display layer is wholly or partially covered on the second display layer, thereby implementing the first graphic
  • the first graphic is wholly or partially covered on the second graphic.
  • processing unit 1003 is specifically configured to:
  • the plurality of image frames are obtained based on a set of image frame changes.
  • the detecting unit 1002 is further configured to detect a first long press operation before detecting the sliding operation, where the first long press operation is that the target object touches the floating button for more than a long operation;
  • the processing unit 1003 is further configured to initiate a function responsive to the sliding operation in response to the detected first long press operation.
  • processing unit 1003 is further configured to:
  • the floating button that restores the default state is displayed by the display unit 1001.
  • processing unit 1003 is further configured to:
  • the detecting unit 1002 detects that the sliding operation ends, the instruction corresponding to the sliding operation is executed.
  • the processing unit 1003 is further configured to: when the displacement of the first graphic following the sliding trajectory of the sliding operation exceeds a set distance or the first graphic moves to a set position, The instruction corresponding to the sliding operation.
  • the processing unit 1003 is further configured to: when the detecting unit 1002 detects the click operation or the second long press operation, in response to the detected click operation or the second long press operation, to control the floating button first Presenting the effect that the first graphic enlarges or reduces the set ratio, and then displays the floating button that restores the default state;
  • the second long press operation is an operation in which the target object touches the floating button for more than a second duration.
  • the visual parameter of the first graphic changes, wherein the visual parameter is at least one of the following: transparency, color, brightness, and gray degree.
  • the processing unit 1003 is further configured to execute an instruction corresponding to the click operation or the second long press operation.
  • the floating button includes a first display area and a second display area, wherein the first display area is used to display the floating button, and the first displayed area is larger than the second display area Area
  • the detecting unit 1002 When detecting the touch operation of the target object on the floating button, the detecting unit 1002 is specifically configured to:
  • a touch operation of the target object on the floating button is detected by detecting a touch operation of the target object at a position of the second display area in the touch display screen.
  • the hovering button is displayed at a top level of a main interface of the terminal device or a currently running program interface, and has a virtual button that triggers an instruction function.
  • the embodiment of the present application provides a terminal device, and when the terminal device detects that the target object slides the floating button, the terminal device may control the floating button to exhibit a dynamic change effect.
  • the floating button can present a variety of display modes, and therefore, the method can improve the display flexibility of the floating button, thereby improving the user's visual experience.
  • each functional unit in each embodiment of the present application may be used. It can be integrated in one processing unit, or it can exist physically alone, or two or more units can be integrated in one unit. The above integrated unit can be implemented in the form of hardware or in the form of a software functional unit.
  • the integrated unit if implemented in the form of a software functional unit and sold or used as a standalone product, may be stored in a computer readable storage medium.
  • a computer readable storage medium A number of instructions are included to cause a computer device (which may be a personal computer, server, or network device, etc.) or a processor to perform all or part of the steps of the methods described in various embodiments of the present application.
  • the foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and the like, which can store program code. .
  • the embodiment of the present application further provides a terminal device, which is used to implement a floating button display method as shown in FIG. 3, and has the function of the terminal device 1000 as shown in FIG.
  • the terminal device 1100 includes a touch display 1101, a processor 1102, and a memory 1103.
  • the touch display screen 1101, the processor 1102, and the memory 1103 are connected to each other.
  • the touch display screen 1101, the processor 1102, and the memory 1103 may be connected to each other through a bus 1104; the bus 1104 may be a peripheral component interconnect (PCI) bus or an extension.
  • PCI peripheral component interconnect
  • EISA Industrial standard architecture
  • the bus can be divided into an address bus, a data bus, a control bus, and the like. For ease of representation, only one thick line is shown in Figure 11, but it does not mean that there is only one bus or one type of bus.
  • the terminal device 1000 further includes a transceiver 1105 for performing communication interaction with other devices.
  • the processor 1102 is configured to implement a floating button display method as shown in FIG. 3 .
  • the processor 1102 is configured to implement a floating button display method as shown in FIG. 3 .
  • the memory 1103 is configured to store program instructions and the like.
  • program instructions may include program code, the program code including computer-operated instructions.
  • the memory 1103 may include a random access memory (RAM), and may also include a non-volatile memory such as at least one disk storage.
  • the processor 1102 executes a program stored in the memory 1103 to implement the above functions, thereby implementing a floating button display method as shown in FIG.
  • the embodiment of the present application provides a floating button display method and a terminal device.
  • the terminal device when the terminal device detects that the target object slides on the floating button, the terminal device can control the floating device.
  • the button shows a dynamic change.
  • the floating button can present a variety of display modes, and therefore, the method can improve the display flexibility of the floating button, thereby improving the user's visual experience.
  • embodiments of the present application can be provided as a method, system, or computer program product.
  • the present application can take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment in combination of software and hardware.
  • the application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.
  • the computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing device to operate in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture comprising the instruction device.
  • the apparatus implements the functions specified in one or more blocks of a flow or a flow and/or block diagram of the flowchart.
  • These computer program instructions can also be loaded onto a computer or other programmable data processing device such that a series of operational steps are performed on a computer or other programmable device to produce computer-implemented processing for execution on a computer or other programmable device.
  • the instructions provide steps for implementing the functions specified in one or more of the flow or in a block or blocks of a flow diagram.

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种悬浮按钮显示方法及终端设备，用以提高悬浮按钮的显示灵活性。在该方案中，当终端设备检测到目标物体对悬浮按钮进行滑动操作时，所述终端设备可以控制所述悬浮按钮呈现出动态变化的效果。这样所述悬浮按钮可以呈现多种显示形态，因此，该方法可以提高悬浮按钮的显示灵活性，从而提高用户的视觉体验。

Description

一种悬浮按钮显示方法及终端设备
本申请要求于2017年10月16日提交中国专利局、申请号为201710960495.6、发明名称为“一种悬浮按钮显示方法及终端设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及终端设备技术领域，尤其涉及一种悬浮按钮显示方法及终端设备。
背景技术
为了减少物理按键的同时不影响用户操作便利性，很多终端设备均设置了悬浮式导航按钮(简称悬浮按钮)。用户可以通过操作触摸显示屏中显示的悬浮按钮，使终端设备执行特定功能。
目前，终端设备中的悬浮按钮相当于一张图片，因此，当用户操作终端设备的触摸显示屏中的悬浮按钮时，用户和该悬浮按钮之间的互动模式一般只有以下几种：
1、用户拖动悬浮按钮时，悬浮按钮在所述触摸显示屏的位置随着用户手指在触摸显示屏的移动而改变；
2、用户长按或点击悬浮按钮时，悬浮按钮周围就会显示设定的功能图标；或者，悬浮按钮消失，触摸显示屏中显示单独的功能区，其中，该功能区中包含设定的功能图标。
通过以上描述可知，传统设计的悬浮按钮存在与用户的互动模式单一、显示灵活性较差的问题。
发明内容
本申请提供一种悬浮按钮显示方法及终端设备，用于提高悬浮按钮的显示灵活性。
第一方面，本申请实施例提供了一种悬浮按钮显示方法，该方法可以包括以下步骤：
首先，终端设备在触摸显示屏上显示默认状态的悬浮按钮，其中，所述悬浮按钮中显示有第一图形；然后，所述终端设备检测目标物体对所述悬浮按钮的触摸操作；当所述终端设备检测到滑动操作时，所述终端设备响应于检测到的所述滑动操作，以控制所述第一图形跟随所述滑动操作的滑动轨迹在所述触摸显示屏中呈现动态变化的效果；其中，所述动态变化包括：所述第一图形在与滑动方向相反方向上被拉伸时的动态变化。
当所述终端设备检测到目标物体对悬浮按钮进行滑动操作时，所述终端设备可以控制所述悬浮按钮呈现出动态变化的效果。所述悬浮按钮中的所述第一图形可以模拟物理世界中，拖拽一个具有质量、弹性和韧性的物体时产生动态变化效果，从而使用户明确的感受到所述触摸操作作用在所述悬浮按钮上，因此，该方法可以提高了所述悬浮按钮的显示灵活性，从而提高了用户的视觉体验。
在一个可能的设计中，所述第一图形在与滑动方向相反方向上被拉伸时的动态变化，包括：所述第一图形在与所述滑动方向相反方向上发生突起变形。
通过该设计，可以使用户在对所述悬浮按钮进行滑动操作时，使所述悬浮按钮呈现出拖拽弹性物体时呈现的惯性滞后现象，使用户感受到更接近物理世界的体验。
在一个可能的设计中，所述第一图形的突起变形程度可以与所述滑动操作的滑动轨迹距离、所述目标物体的触摸力度，所述目标物体的滑动速度等参数相关。例如，当所述滑动操作的滑动轨迹距离越远，或所述目标物体的触摸力度越大，或所述目标物体的滑动速度越高时，所述第一图形的突起变形程度越高。这样，用户可以通过调整所述目标物体，改变所述第一图形的突起变形。
在一个可能的设计中，在默认状态的所述悬浮按钮中，所述第一图形的默认状态为圆形，相应的，动态变化的所述第一图形为水滴形或类椭圆形。这些图形能够使效果更滑润，增强用户体现。
在一个可能的设计中，为了呈现所述第一图形的动态变化的效果，在滑动操作结束或未达到所述第一图形的变形上限之前，所述第一图形可以通过多次变化以呈现动态变化效果。
在一个可能的设计中，在所述第一图形的动态变化过程中，每次变化的所述第一图形为所述终端设备对参考图形与辅助圆进行融球算法生成的。其中，所述参考图形的大小与默认状态的所述第一图形的大小相同，且第一圆心距离小于第二圆心距离，所述第一圆心距离为生成所述第N次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，所述第二圆心距离为生成第N+1次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，N为大于或等于1的整数。
通过该设计，可以使用户在对所述悬浮按钮进行滑动操作时，使所述悬浮按钮呈现出水滴形或类椭圆形，使用户感受到更接近物理世界的体验。
在一个可能的设计中，所述终端设备在所述第一图形进行突起变形之前，将默认状态的所述第一图形按照与滑动方向相垂直的分割线，拆分为两部分，确定相对于所述分割线处于所述滑动方向相反方向的一部分为第一部分，然后在确定首次变化的所述第一图形时，对所述第一部分进行拉伸处理，得到首次变化的所述第一图形，在确定第M次变化的所述第一图形时，对第M-1次变化的所述第一部分进行拉伸处理，M为大于2的整数。
通过该设计，可以使用户在对所述悬浮按钮进行滑动操作时，使所述悬浮按钮呈现出水滴形或类椭圆形，使用户感受到更接近物理世界的体验。
在一个可能的设计中，在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述终端设备对默认状态的所述第一图形中的第二部分进行压缩处理生成的，第M次变化的所述第一图形为所述终端设备对M-1次变化的所述第一图形中的所述第二部分进行压缩处理生成的；其中，默认状态的所述第一图形中的所述第二部分为所述默认状态的所述第一图形拆分为两部分中，除所述第一部分以外的另一部分。
在一个可能的设计中，所述悬浮按钮中还显示有第二图形，所述悬浮按钮在默认状态下，所述第一图形全部覆盖在所述第二图形上。
在一个可能的设计中，在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
在一个可能的设计中，在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第二图形发生在与滑动方向相反方向上被拉伸时的动态变化。
在一个可能的设计中，所述第二图形也可以在与所述滑动方向相反方向上发生突起变形，其中，生成每次变化的所述第二图形的方法可以参见生成变化的所述第一图形的方法，此处不再赘述。
在一个可能的设计中，所述第二图形不随着所述滑动轨迹发生位移。由于所述第二图形处于一个固定的位置，在所述第一图形动态变化时，可以呈现出所述第一图像相对于所述第二图形运动的效果。
在一个可能的设计中，当所述第一图形和所述第二图形均出现被拉伸的动态变化时，所述第二图形的突起变形程度小于所述第一图形的突起变形程度。
在一个可能的设计中，所述第一图形显示在第一显示层，所述第二图形显示在第二显示层中，所述第一显示层位于所述第二显示层之上；所述悬浮按钮在默认状态下，所述第一显示层全部覆盖在所述第二显示层上；在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一显示层全部或部分覆盖在所述第二显示层上，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
通过该设计，可以保证在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
在一个可能的设计中，所述终端设备获取要显示所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果的多个图像帧，依次显示所述多个图像帧，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果。
通过该设计，可以保证在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
在一个可能的设计中，所述多个图像帧基于一组图像帧变化得到。
在一个可能的设计中，在所述终端设备检测到所述滑动操作之前，所述终端设备检测到第一长按操作，所述第一长按操作为所述目标物体对所述悬浮按钮触摸时间超过第一时长的操作；所述终端设备响应于检测到的所述第一长按操作，以启动响应所述滑动操作的功能。
通过该设计，用户可以通过所述第一长按操作使终端设备启动响应所述滑动操作的功能，避免所述终端设备长时间开启该功能导致的功耗浪费以及资源浪费。
在一个可能的设计中，在所述终端设备检测到所述滑动操作结束时，所述终端设备显示恢复默认状态的所述悬浮按钮。可选的，所述终端设备可以通过转场动画，由最后一次变化的所述悬浮按钮恢复为默认状态的所述悬浮按钮，这样可以使所述悬浮按钮的变化有一个过渡过程，避免突兀地直接替换导致用户的视觉效果较差的问题。
在一个可能的设计中，在所述终端设备检测到所述滑动操作结束时，所述终端设备执行所述滑动操作对应的指令。
在一个可能的设计中，所述动态变化还包括：所述第一图形随着所述滑动轨迹发生位移，在该情况下，在所述第一图形跟随所述滑动操作的滑动轨迹所产生的位移超过设定距离或所述第一图形移动到设定位置时，所述终端设备执行所述滑动操作对应的指令。
在一个可能的设计中，基于上述设计，所述终端设备还可以显示恢复默认状态的所述悬浮按钮。
在一个可能的设计中，当所述终端设备检测到点击操作或第二长按操作时，所述终端设备响应于检测到的所述点击操作或第二长按操作，以控制所述悬浮按钮先呈现所述第一 图形放大或缩小设定比例的效果，再显示恢复默认状态的所述悬浮按钮；其中，所述第二长按操作为所述目标物体对所述悬浮按钮触摸时间超过第二时长的操作。
通过该设计，所述悬浮按钮可以通过缩放的效果，通知用户所述悬浮按钮已经被点击或长按，因此该方法也可以提高悬浮按钮的显示灵活性，和用户的视觉体验。
在一个可能的设计中，在所述第一图形放大或缩小所述设定比例时，所述第一图形的视觉参数发生变化，其中，所述视觉参数为以下至少一项：透明度、颜色、亮度和灰度。
在一个可能的设计中，所述终端设备执行所述点击操作或第二长按操作对应的指令。
在一个可能的设计中，所述悬浮按钮中包括第一显示区域和第二显示区域，其中，所述第一显示区域用于显示所述悬浮按钮，所述第二显示区域设置为透明(即不显示任何内容)，所述第一显示的面积大于所述第二显示区域的面积；
在该情况下，所述终端设备通过以下步骤检测所述目标物体对所述悬浮按钮的触摸操作：
所述终端设备通过检测所述目标物体在所述触摸显示屏中所述第二显示区域的所在位置处的触摸操作，检测所述目标物体对所述悬浮按钮的触摸操作。
通过该设计，不仅可以实现在终端设备的触摸显示屏中显示呈现动态效果的所述悬浮按钮，还可以保证用户可以对呈现动态效果的所述悬浮按钮覆盖的主界面或呈现界面进行操作。
在一个可能的设计中，所述悬浮按钮为悬浮在所述终端设备的主界面或当前正在运行的程序界面的最上层显示，具有触发指令功能的虚拟按钮。
第二方面，本申请实施例还提供了一种终端设备，包括用于执行上述第一方面各个步骤的单元或模块。
第三方面，本申请提供一种终端设备，包括至少一个处理元件和至少一个存储元件，其中所述至少一个存储元件用于存储程序和数据，所述至少一个处理元件用于执行本申请第一方面中提供的方法。
第四方面，本申请实施例中还提供一种计算机存储介质，该存储介质中存储软件程序，该软件程序在被一个或多个处理器读取并执行时可实现第一方面或其中任意一种设计提供的方法。
第五方面，本申请实施例还提供一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述各方面所述的方法。
第六方面，本申请实施例提供了一种芯片系统，该芯片系统包括处理器，用于支持终端设备实现上述第一方面中所涉及的功能。在一种可能的设计中，所述芯片系统还包括存储器，所述存储器，用于保存终端设备必要的程序指令和数据。该芯片系统，可以由芯片构成，也可以包含芯片和其他分立器件。
在本申请实施例提供的方案中，当终端设备检测到目标物体对悬浮按钮进行滑动操作时，所述终端设备可以控制所述悬浮按钮呈现出动态变化的效果。这样所述悬浮按钮可以呈现多种显示形态，因此，该方法可以提高悬浮按钮的显示灵活性，从而提高用户的视觉体验。
附图说明
图1为本申请实施例提供的一种悬浮按钮示例图；
图2为本申请实施例提供的一种终端设备的结构图；
图3为本申请实施例提供的一种悬浮按钮显示方法；
图4为本申请实施例提供的第一种悬浮按钮显示示例图；
图5为本申请实施例提供的第二种悬浮按钮显示示例图；
图6为本申请实施例提供的第三种悬浮按钮显示示例图；
图7为本申请实施例提供的第四种悬浮按钮显示示例图；
图8为本申请实施例提供的悬浮按钮与显示区域的大小关系示意图；
图9为本申请实施例提供的显示区域的位置关系示意图；
图10为本申请实施例提供的一种终端设备的结构示意图；
图11为本申请实施例提供的另一种终端设备的结构示意图。
具体实施方式
本申请提供一种悬浮按钮显示方法及终端设备，用以提高悬浮按钮的显示灵活性。其中，方法和终端设备是基于同一发明构思的，由于方法及终端设备解决问题的原理相似，因此装置与方法的实施可以相互参见，重复之处不再赘述。
本申请实施例提供的方案中，当终端设备检测到目标物体对悬浮按钮进行滑动操作时，所述终端设备可以控制所述悬浮按钮呈现出动态变化的效果。这样所述悬浮按钮可以呈现多种显示形态，因此，该方法可以提高悬浮按钮的显示灵活性，从而提高用户的视觉体验。
以下，对本申请中的部分用语进行解释说明，以便于本领域技术人员理解。
1)、终端设备，为能够通过触摸显示屏进行人机交互的设备。用户可以通过目标物体对所述触摸显示屏进行操作，使所述终端设备执行特定的功能，所述终端设备也可以通过所述触摸显示屏显示用户界面。例如，家居智能终端(包括：空调、冰箱、电饭煲、热水器等)，商务智能终端(包括：可视电话、会议桌面智能终端等)，可穿戴设备(包括智能手表、智能眼镜等)，金融智能终端机，以及智能手机、平板电脑、个人数字助理(personal digital assistant，PDA)、车载设备、计算机等。
2)、目标物体，为接近或接触到终端设备的触摸显示屏时，能够被所述触摸显示屏检测和定位的物体，例如人体、触控笔等用户常用的手动输入工具。
3)、悬浮按钮，为悬浮在终端设备的主界面或当前正在运行的程序界面的最上层显示，具有触发指令功能的虚拟按钮。一般悬浮按钮设计为特定形状，便于用户识别，因此，该悬浮按钮由至少一个图形元素组成。需要说明的是，本申请实施例不限定所述悬浮按钮显示的图形元素的类型。
由于在本申请实施例中，所述悬浮按钮可以呈现动态变化的效果，且该动态变化一般是以默认状态的悬浮按钮的形状为基础的。因此，默认状态的悬浮按钮的中的图形元素一般为规则的图形。其中默认状态为所述悬浮按钮未被用户操作、不呈现动态变化效果时的状态，即所述悬浮按钮的初始状态。
在默认状态下，悬浮中的图形元素也为默认状态。
其中，悬浮按钮中可以显示有一个图形，例如，在默认状态下该图形为(直角或圆角)正方形、圆形或多角星形等，例如图1中图a-d所示的默认状态的悬浮按钮；悬浮按钮还可以显示有多个图形，其中，所述多个图形为相同类型的图形，例如图1中图e和图g所示的默认状态的悬浮按钮，或者所述多个图形中包含不同类型的图形，例如图1中图f和 h所示的默认状态的悬浮按钮。
需要说明的是，图1中的各悬浮按钮并不构成对悬浮按钮的形状的限定。另外，图1仅为对悬浮按钮的形状这一要素的举例，可选的，所述悬浮按钮中各图形元素可以为通过颜色、透明度、亮度、灰度等视觉参数进行区分，此处不再举例。
4)、触摸操作，为用户通过目标物体接近或接触终端设备的触摸显示屏实现。例如，当用户通过所述目标物体接触到触摸显示屏中悬浮按钮所在的位置处时，即所述目标物体对所述悬浮按钮进行触摸操作。因此，可以理解的是，目标物体对悬浮按钮的触摸操作并非是所述目标物体对所述悬浮按钮直接操作，而是所述目标物体通过触摸显示屏触摸到悬浮按钮所显示的位置的区域实现。
目前，常用的触摸操作的类型包括：点击(包括单击、双击、三连击)操作、长按操作和滑动操作等。
5)、显示区域，又称为view。在同一显示界面中，包括至少一层显示区域。不同显示区域可以显示不同的用户界面。由于悬浮按钮需要悬浮在主界面或正在运行的程序界面的最上层，因此，显示界面中显示有悬浮按钮时，该显示界面中包括多层显示区域，其中底层显示区域用于显示所述主界面或所述程序界面，其他至少一个显示区域用于显示所述悬浮按钮。
6)、多个，是指两个或两个以上。
7)、“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
另外，需要理解的是，在本申请的描述中，“第一”、“第二”等词汇，仅用于区分描述的目的，而不能理解为指示或暗示相对重要性，也不能理解为指示或暗示顺序。
下面结合附图对本申请实施例做进行具体说明。
图2示出了本申请实施例提供的悬浮按钮显示方法适用的一种可能的终端设备的结构图。参阅图2所示，所述终端设备200包括：射频(radio frequency，RF)电路210、电源220、处理器230、存储器240、输入单元250、显示单元260、无线保真(Wireless Fidelity，WiFi)模块270，以及等部件。本领域技术人员可以理解，图2中示出的终端设备的结构并不构成对终端设备的限定，本申请实施例提供的终端设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
下面结合图2对所述终端设备200的各个构成部件进行具体的介绍：
所述RF电路210可用于通信或通话过程中，数据的接收和发送。特别地，所述RF电路210在接收到基站的下行数据后，发送给所述处理器230处理；另外，将待发送的上行数据发送给基站。通常，所述RF电路210包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(Low Noise Amplifier，LNA)、双工器等。
此外，RF电路210还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(global system of mobile communication，GSM)、通用分组无线服务(general packet radio service，GPRS)、码分多址(code division multiple access，CDMA)、宽带码分多址(wideband code division multiple access，WCDMA)、长期演进(long term evolution，LTE)、电子邮件、短消息服务(short  messaging service，SMS)等。
WiFi技术属于短距离无线传输技术，所述终端设备200通过WiFi模块270可以连接接入点(Access Point，AP)，从而实现数据网络的访问。所述WiFi模块270可用于通信过程中数据的接收和发送。
可选的，所述终端设备200还可以包括通信接口，用于与其他设备实现物理连接。可选的，所述通信接口与所述其他设备的通信接口通过电缆连接，实现所述终端设备200和其他设备之间的数据传输。
在本申请实施例中，为了实现所述终端设备200需要具有数据传输功能，因此，所述终端设备100内部需要包含通信模块。虽然图1示出了所述RF电路210、所述WiFi模块270等通信模块，以及所述通信接口，但是可以理解的是，所述终端设备200中存在上述部件中的至少一个或者其他用于实现通信的通信模块(如蓝牙模块)，以进行数据传输。
例如，当所述终端设备200为手机、可穿戴设备时，所述终端设备200可以包含所述RF电路210，还可以包含所述WiFi模块270；当所述终端设备200为计算机时，所述终端设备200可以包含所述通信接口，还可以包含所述WiFi模块270；当所述终端设备200为平板电脑时，所述智能终端设备200可以包含所述WiFi模块270。
所述存储器240可用于存储软件程序以及模块。所述处理器230通过运行存储在所述存储器240的软件程序以及模块，从而执行所述终端设备200的各种功能应用以及数据处理。
可选的，所述存储器240可以主要包括存储程序区和存储数据区。其中，存储程序区可存储操作系统、各种应用程序等；存储数据区可存储根据所述智能终端设备的使用所创建的数据等。
此外，所述存储器240可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
所述输入单元250可用于接收用户输入的数字或字符信息，以及产生与所述终端设备200的用户设置以及功能控制有关的键的输入信号。
可选的，输入单元250可包括触控面板251以及其他输入设备252。
其中，所述触控面板251，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触控笔等任何适合的物体或附件在所述触控面板251上或在所述触控面板251附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，所述触控面板251可以包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给所述处理器230，并能接收所述处理器230发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现所述触控面板251。
可选的，所述其他输入设备252可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
所述显示单元260可用于显示由用户输入的信息，或提供给用户的信息，以及所述终端设备100的各种菜单等内容。所述显示单元260即为所述终端设备200的显示系统，用于呈现用户界面，实现人机交互。
所述显示单元260可以包括显示面板261。可选的，所述显示面板261可以采用液晶 显示屏(liquid crystal display，LCD)、有机发光二极管(organic light-emitting diode，OLED)等形式来配置。
进一步的，所述触控面板251可覆盖所述显示面板261，当所述触控面板251检测到在其上或附近的触摸操作后，传送给所述处理器230以确定触摸事件的类型，随后所述处理器230根据触摸事件的类型在所述显示面板261上提供相应的视觉输出。
虽然在图2中，所述触控面板251与所述显示面板261是作为两个独立的部件来实现所述终端设备200的输入和输入功能，但是在本申请实施例中，可以将所述触控面板251与所述显示面板261集成(即本申请实施例涉及的触摸显示屏)而实现所述终端设备100的输入和输出功能。
所述处理器230是所述终端设备200的控制中心，利用各种接口和线路连接各个部件，通过运行或执行存储在所述存储器240内的软件程序和/或模块，以及调用存储在所述存储器240内的数据，执行所述终端设备200的各种功能和处理数据，从而实现基于所述终端设备200的多种业务。
可选的，所述处理器230可包括一个或多个处理单元。可选的，所述处理器230可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到所述处理器230中。
所述终端设备200还包括用于给各个部件供电的电源220(比如电池)。可选的，所述电源220可以通过电源管理系统与所述处理器230逻辑相连，从而通过电源管理系统实现管理充电、放电，以及功耗等功能。
尽管未示出，所述终端设备200还可以包括各种传感器、音频电路、摄像头等部件，在此不再赘述。
本申请实施例提供了一种悬浮按钮显示方法，该方法适用于如图2所示的终端设备中。其中，所述终端设备具有触摸显示屏。参阅图3所示，该方法的流程包括：
S301：终端设备在触摸显示屏上显示默认状态的悬浮按钮，所述悬浮按钮中显示有第一图形。
所述悬浮按钮悬浮在所述终端设备的主界面或当前正在运行的程序界面的最上层，形成当前的用户界面。
可选的，当所述悬浮按钮包括多个图形元素组成时，所述悬浮按钮中还显示有第二图形。在本申请实施例中，并不限定所述第一图形、所述第二图形的形状。
S302：所述终端设备检测目标物体对所述悬浮按钮的触摸操作。
可选的，所述终端设备可以通过具有输入功能的所述触摸显示屏，收集用户通过所述目标物体，在所述触摸显示屏上或附近的触摸操作。
S303：当所述终端设备检测到滑动操作时，所述终端设备响应于检测到的所述滑动操作，以控制所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果；其中，所述动态变化包括：所述第一图形在与滑动方向相反方向上被拉伸时的动态变化。
通过上述步骤，所述悬浮按钮可以模拟物理世界中，拖拽一个具有质量、弹性和韧性的物体时产生动态变化效果，从而使用户明确的感受到所述触摸操作作用在所述悬浮按钮上，因此，该方法可以提高了所述悬浮按钮的显示灵活性，从而提高了用户的视觉体验。
由于在现实物理世界中，拖拽一个有质量的弹性物体时，一般会改变所述物体的形状，例如，所述物体的在与拖拽方向相反方向上会有惯性滞后的现象，该现象导致所述物体在与拖拽方向相反方向上发生突起变形。因此，可选的，所述第一图形在与滑动方向相反方向上被拉伸时的动态变化，包括：所述第一图形在于所述滑动方向相反方向上发生突起变形。
通过该方法，可以使用户在对所述悬浮按钮进行滑动操作时，使所述悬浮按钮呈现出拖拽弹性物体时呈现的惯性滞后现象，使用户感受到更接近物理世界的体验。
可选的，在动态变化过程中，所述第一图形的突起变形程度可以与所述滑动操作的滑动轨迹距离、所述目标物体的触摸力度，所述目标物体的滑动速度等参数相关。例如，当所述滑动操作的滑动轨迹距离越远，或所述目标物体的触摸力度越大，或所述目标物体的滑动速度越高时，所述第一图形的突起变形程度越高。
可选的，所述动态变化还包括：所述第一图形随着所述滑动轨迹发生位移。
其中，所述第一图形位移方向为所述滑动方向。
由于对实际物体进行拖拽的力足够大时，所述物体可以发生位移，因此，通过该方法，用户在对所述悬浮按钮进行滑动操作时，所述第一图形不仅会发生突起变形，还会发生位移，可以进一步模拟物理世界对实际物体进行拖拽时产生的效果。另外，当用户通过对所述悬浮按钮进行滑动操作，实现对触摸显示屏中所述悬浮按钮进行拖动时，也需要所述第一图形发生位移。
在一个可能的实现方式中，在默认状态的所述悬浮按钮中，所述第一图形的默认状态为圆形；那么，相应的，在呈现动态变化的效果的所述悬浮按钮中，动态变化的所述第一图形为水滴形或类椭圆形。例如图4所示，当目标物体向下滑动所述悬浮按钮时，所述第一图形会呈现右边的形状。
可选的，为了呈现所述第一图形的动态变化的效果，在滑动操作结束或未达到所述第一图形的变形上限之前，所述第一图形可以通过多次变化以呈现动态变化效果。
可选的，在本申请实施例，可以但不限于通过以下几种方法，实现所述第一图形的变化：
第一种方法：
在所述第一图形的动态变化过程中，每次变化的所述第一图形为所述终端设备对参考图形与辅助圆进行融球算法(即metaball算法)生成的；
其中，所述参考图形的大小与默认状态的所述第一图形的大小相同，且第一圆心距离小于第二圆心距离，所述第一圆心距离为生成所述第N次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，所述第二圆心距离为生成第N+1次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，N为大于或等于1的整数。
其中，所述辅助圆的大小可以根据实际场景、所述第一图形突起变形的程度等因素具体设定。
由于在融球算法中，每次变化时参考图形的圆心与辅助圆的圆心之间的距离，第一图形的突起变形程度有影响，因此，每次变形时二者的圆心距离小于下一次变形时二者的圆心距离，可以使下一次变形产生的所述第一图形的突起程度比本次变形产生的所述第一图形的突起程度更大，从而使所述第一图形在跟随所述滑动操作的滑动轨迹呈现动态变化时， 滑动轨迹越大，所述第一图形的突起程度也越大。
另外，由于融球算法生成的所述第一图形的位置与所述参考图形的位置相关，因此，在每次变化的所述第一图形不发生位移的情况下，所述参考图像的位置也不发生变化；在每次变化的所述第一图形发生位移的情况下，所述参考图像的位置也发生变化。但是，需要说明的时，在每次变化的所述第一图形发生位移的情况下，生成首次变化的所述第一图形时，所述参考图形的位置与所述第一图形的位置相同。
下面通过附图对通过上述第一种方法生成第一图形进行举例说明，参阅图5所示。
在本例中，所述悬浮按钮由两个图形元素组成，在默认状态的悬浮按钮如图(1)所示，图(1)中的内圈为第一图形。其中，B为所述第一图形的圆心，A为目标物体(手指)的初始位置。
当手指对所述悬浮按钮进行滑动操作(滑动方向为向下)时，手指从A位置移动到A′位置，手指的滑动距离为a，参阅图(2)所示。
所述终端设备响应所述滑动操作，生成并显示动态变化的所述第一图形。
所述终端设备在生成首次变化的所述第一图形时，参阅图(3)所示，确定参考图形(大小与默认状态的所述第一图形的大小相同)的圆心的位置为B，以及确定本次变化需要的辅助圆的圆心的位置C，其中，B到C的方向为手指的滑动方向。所述终端设备对本次变化确定的参考图形与辅助圆进行融球算法生成首次变化的所述第一图形，如图(4)所示。
当手指继续滑动，手指从A′位置滑动到A″，所述终端设备在生成第二次变化的所述第一图形时，参阅图(5)所示，确定参考图形的圆心的位置为B′，以及确定本次变化需要的辅助圆的圆心的位置C′，即相对于上次变化时，参考图像的圆心位置移动b，辅助圆的圆心位置移动为c。所述终端设备对本次变化确定的参考图形与辅助圆进行融球算法生成第二次变化的所述第一图形，如图(6)所示。
后续手指继续滑动，所述终端设备可以继续按照上述方法，确定参考图形和辅助圆的位置，从而确定每次变化的所述第一图形，直至手指不再滑动，滑动操作结束，或达到所述第一图形的变形上限，具体步骤可以参见上述步骤，此处不再赘述。
需要说明的是，由于在第一种方法中第一圆心距离小于第二圆心距离，因此，B′到C′的距离大于B到C的距离。另外，由于需要保证生成的所述第一图形为水滴形，因此，每次变化确定的参考图形的圆心与辅助圆的圆心之间的距离小于第一阈值，且相对于上次，参考图像的圆心移动距离(例如b)小于第二阈值，辅助圆的圆心移动距离(例如c)小于第三阈值。
第二种方法：
在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述终端设备对默认状态的所述第一图形中的第一部分进行拉伸处理生成的，第M次变化的所述第一图形为所述终端设备对M-1次变化的所述第一图形中的所述第一部分进行拉伸处理生成的；
其中，默认状态的所述第一图形中的所述第一部分为：按照与所述滑动方向相垂直的分割线将所述默认状态的所述第一图形拆分为两部分后，相对于所述分割线处于所述滑动方向相反方向的一部分，M为大于2的整数。
可选的，在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述终端设备对默认状态的所述第一图形中的第二部分进行压缩处理生成的，第M次变化的所述第一 图形为所述终端设备对M-1次变化的所述第一图形中的所述第二部分进行压缩处理生成的；
其中，默认状态的所述第一图形中的所述第二部分为所述默认状态的所述第一图形拆分为两部分中，除所述第一部分以外的另一部分。
下面通过附图对通过上述第二种方法生成第一图形进行举例说明，继续以所述悬浮按钮为图5中的图(1)为例，参阅图6所示。
当手指对所述悬浮按钮进行滑动操作(滑动方向为向下)时，手指发生移动时，参阅图(1)所示，所述终端设备确定所述第一图形的分割线，所述分割线与所述滑动方向相垂直，按照所述分割线将默认状态的所述第一图形拆分为两部分，如图所示，其中，相对于所述分割线处于所述滑动方向相反方向的为第一部分，相对于所述分割线处于所述滑动方向的为第二部分。
所述终端设备对所述第一部分拉伸第一比例，并将所述第二部分压缩第二比例，(所述第一比例与所述第二比例可以相同或不同，在图(2)所示的示例中，所述第一比例和所述第二比例均为10％)，生成首次变化的所述第一图形，如图(3)所示。在实际应用中，为了使所述第一图形产生渐变的效果，所述第一比例和所述第二比例可以设置为比较的数值。对
当手指继续滑动，所述终端设备对上次变化的所述第一图形拉伸第三比例，并将上次变化的所述第二图形压缩第四比例，生成第二次变化的所述第一图形，如图(4)所示。所述第三比例可以与所述第一比例相同或不同，所述第四比例可以与所述第二比例相同或不同，本申请对此不作限定。
后续手指继续滑动，所述终端设备可以继续按照上述方法，拉伸所述第一部分和压缩所述第二部分，从而确定每次变化的所述第一图形，直至手指不再滑动，滑动操作结束，或达到所述第一图形的变形上限，具体步骤可以参见上述步骤，此处不再赘述。
通过以上方法，可以使用户在对所述悬浮按钮进行滑动操作时，使所述悬浮按钮呈现出水滴形或类椭圆形，使用户感受到更接近物理世界的体验。
可选的，当所述悬浮按钮中还显示有第二图形的情况下，所述悬浮按钮在默认状态下，所述第一图形全部覆盖在所述第二图形上。其中，所述第二图形的外部轮廓的面积大于所述第一图形的外部轮廓的面积。
可选的，在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上，即变化的所述第一图形均不能超过所述第二图形的外部轮廓。
当所述悬浮按钮中显示所述第一图形和所述第二图形的情况下，为了保证在呈现动态变化的效果的所述悬浮按钮中，所述第一图形全部或部分覆盖在所述第二图形上，本申请实施例提供了两种实现方式：
第一种实现方式：
所述悬浮按钮的所述第一图形和所述第二图形分别显示在不同的显示层(与图层类似)，即所述第一图形显示在第一显示层，所述第二图形显示在第二显示层中，所述第一显示层位于所述第二显示层之上；其中，所述第一显示层的轮廓与所述第一图形的外部轮廓相同，所述第二显示层的轮廓与所述第二图形的外部轮廓相同，
所述悬浮按钮在默认状态下，所述第一显示层全部覆盖在所述第二显示层上；
在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第 一显示层全部或部分覆盖在所述第二显示层上，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
第二种实现方式：
所述终端设备获取要显示所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果的多个图像帧，依次显示所述多个图像帧，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果。
可选的，在本实现方式中，所述多个图形帧是基于一组图形帧变化得到的。多个图像帧基于一组图像帧变化得到，即事先生成一组图像帧，这组图像帧包括第一图形在第一方向移动时的效果所对应的各个图像帧(即这个图像帧从视觉上看，既有第一图像，又有第二图像)，然后在需要显示其他方向时(因为用于触摸轨迹可以是任意方向的)，根据触摸数据确定下一帧要显示的图像的角度，然后对第一方向的图像帧进行一定的角度调整，从而得到当前要显示的图像帧并进行显示。
在该实现方式中，由于预先只保存一个方向移动时的各个图像帧，而不需要保存任意角度的图像帧，因此，占用的内存比较少。
在一个可能的设计中，在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第二图形发生在与滑动方向相反方向上被拉伸时的动态变化。可选的，所述第二图形也可以在与所述滑动方向相反方向上发生突起变形。
与所述第一图形的变化类似，在所述第二图形也为圆形时，动态变化的所述第二图形也可以为水滴形或类椭圆形。其中，生成每次变化的所述第二图形的方法可以参见生成变化的所述第一图形的方法，此处不再赘述。
另外，可选的，当所述第一图形和所述第二图形均出现被拉伸的动态变化时，所述第二图形的突起变形程度小于所述第一图形的突起变形程度。
可选的，所述第二图形可以不随着所述滑动轨迹发生位移，而是固定在一个位置。这样在所述第一图形动态变化时，可以呈现出所述第一图形(例如小圆)相对于所述第二图形(例如大圆)移动的效果。
可选的，所述第一图形的动态变化还包括：所述第一图形随着所述滑动轨迹发生位移。
当所述第一图形发生位移的情况下，所述终端设备可以根据所述第一图像的位移距离、以及位移后所述第一图形的位置，触发执行所述滑动操作对应的指令。即在所述第一图形跟随所述滑动操作的滑动轨迹所产生的位移超过设定距离或所述第一图形移动到设定位置时，所述终端设备执行所述滑动操作对应的指令。可选的，在所述第一图形跟随所述滑动操作的滑动轨迹所产生的位移超过设定距离或所述第一图形移动到设定位置时，所述终端设备还可以显示恢复默认状态的所述悬浮按钮。
可选的，当用户通过对所述悬浮按钮进行滑动操作，实现对触摸显示屏中所述悬浮按钮进行拖动时，需要所述第二图形发生位移。其中，所述第二图形发生位移时，所述第一图形也相应发生位移，且所述第一图形和所述第二图形的位移的距离和方向基本相同。这样，可以使用户观察到所述悬浮按钮中的所述第一图形和所述第二图形同时发生位移。
可选的，在所述第一图形和/或所述第二图形发生位移的情况下，所述终端设备还需要 检测在所述第一图形和/或所述第二图形位移后的位置是否存在有键盘、导航栏、屏幕边缘等无法正常显示悬浮按钮的因素，若存在，则所述终端设备将所述第一图形和/或所述第二图形的位置恢复到本次位移前或触摸操作前，不存在上述因素的位置。
在一个可能的设计中，在所述终端设备检测到所述滑动操作之前，所述方法还包括：
所述终端设备检测到第一长按操作，所述第一长按操作为所述目标物体对所述悬浮按钮触摸时间超过第一时长的操作；
所述终端设备响应于检测到的所述第一长按操作，以启动响应所述滑动操作的功能。
通过上述方法，用户可以通过所述第一长按操作使终端设备启动响应所述滑动操作的功能，避免所述终端设备长时间开启该功能导致的功耗浪费以及资源浪费。
在一个可能的设计中，在所述终端设备检测到所述滑动操作结束时，所述终端设备显示恢复默认状态的所述悬浮按钮。
可选的，所述终端设备在显示恢复状态的所述悬浮按钮时，可以通过转场动画，由最后一次变化的所述悬浮按钮恢复为默认状态的所述悬浮按钮，这样可以使所述悬浮按钮的变化有一个过渡过程，避免突兀地直接替换导致用户的视觉效果较差的问题。
在一个可能的设计中，在所述终端设备检测到所述滑动操作结束时，所述终端设备执行所述滑动操作对应的指令。
可选的，用户可以设定滑动操作对应的指令。例如，滑动操作(不限滑动方向、滑动距离、滑动轨迹、滑动力度或速度)的情况下，所述滑动操作对应返回主界面的指令。又例如，当滑动操作区分滑动方向时，所述终端设备还需要判断所述滑动操作的滑动方向，并确定所述滑动方向对应的指令，其中，滑动方向对应的指令可以为：向左滑对应返回主界面的指令，向上滑为执行返回操作的指令等。
在一个可能的设计中，当所述终端设备检测到点击操作或第二长按操作时，所述终端设备响应于检测到的所述点击操作或第二长按操作，以控制所述悬浮按钮先呈现所述第一图形放大或缩小设定比例的效果，再显示恢复默认状态的所述悬浮按钮；
其中，所述第二长按操作为所述目标物体对所述悬浮按钮触摸时间超过第二时长的操作。
例如图7所示，在所述终端设备检测到点击操作时，所述终端设备可以显示逐渐放大到设定比例的所述第一图形，然后在逐渐恢复到所述默认状态的所述第一图形。
另外，还需要说明的时，当所述悬浮按钮还显示有所述第二图形时，在所述终端设备显示恢复默认状态的所述悬浮按钮之前，所述终端设备也可以显示先放大或缩小设定比例所述第二图形。
可选的，为了区别响应点击操作和所述第二长按操作，所述第一图形放大或缩小的比例不同，和/或，所述第二图形放大或缩小的比例不同。
通过上述方法，所述悬浮按钮可以通过缩放的效果，通知用户所述悬浮按钮已经被点击或长按，因此该方法也可以提高悬浮按钮的显示灵活性，和用户的视觉体验。
在一个可能的设计中，在所述第一图形放大或缩小所述设定比例时，所述第一图形的视觉参数发生变化，其中，所述视觉参数为以下至少一项：透明度、颜色、亮度和灰度。
同样的，在所述第二图形放大或缩小时，所述第二图形的视觉参数也可以发生变化，本申请对比不作限定。
在一个可能的设计中，在所述终端设备检测到所述点击操作或第二长按操作后，所述 终端设备执行所述点击操作或第二长按操作对应的指令。
目前，终端设备在触摸显示屏中显示界面，是通过显示区域view实现。所述终端设备可以根据需要显示的界面，通过窗口管理器(WindowManager)添加view到触摸显示屏。由于悬浮按钮需要悬浮在所述终端设备的主界面或程序界面的最上层，因此，所述悬浮按钮的所在的view与所述主界面或程序界面所在的view不同。
另外，由于本申请实施例中，所述悬浮按钮可能会呈现在任意方向上被拉伸的动态变化，为了保证所述悬浮按钮的显示效果，所述悬浮按钮所在的view的面积需要比默认状态的所述悬浮按钮的面积要大。然而，所述悬浮按钮所在的view的面积过大，用户就无法看到该view下覆盖的主界面或程序界面的内容，也不能对该内容继续操作，这就导致用户的体验降低。
为了实现在终端设备的触摸显示屏中显示呈现动态效果的所述悬浮按钮，并且保证用户的体验，在本申请实施例中，所述悬浮按钮占用两层view，即所述悬浮按钮中包括第一显示区域和第二显示区域，其中，所述第一显示区域用于显示所述悬浮按钮，所述第二显示区域设置为透明(即不显示任何内容)，所述第一显示的面积大于所述第二显示区域的面积，所述第二显示区域用于使所述终端设备确定所述悬浮按钮的操作位置，即所述终端设备通过检测所述目标物体是否触摸所述第二显示区域所在的位置处，检测所述目标物体是否对所述悬浮按钮进行触摸操作。
即所述终端设备在执行S302时，包括：
所述终端设备通过检测所述目标物体在所述触摸显示屏中所述第二显示区域的所在位置处的触摸操作，检测所述目标物体对所述悬浮按钮的触摸操作。
可选的，所述第二显示区域的面积与默认状态的悬浮按钮的外部轮廓的面积大小基本一致。例如图8所示，第二显示区域和第一显示区域均为正方形，所述第二显示区域的边长与悬浮按钮的外部轮廓的直径a相同，所述第一显示区域的边长大于所述第二显示区域的边长。
可选的，在所述触摸显示上，所述第一显示区域位于所述第二显示区域之上。所述第一显示区域、所述第二显示区域，以及所述主界面或程序界面所在的其他显示区域的位置关系如图9所示。
还需要说明的是，在所述悬浮按钮发生移动时(当所述悬浮按钮包括第二图形的情况下，不包括所述第一图形发生位移的情况)，所述第一显示区域和所述第二显示区域也同步发生相应的位移。
在本申请实施例中，所述第二显示区域不显示任何内容，因此设置所述第二显示区域对所述终端设备的功耗和性能影响较小。
采用本申请实施例提供的方法，当终端设备检测到目标物体对悬浮按钮进行滑动操作时，所述终端设备可以控制所述悬浮按钮呈现出动态变化的效果。这样所述悬浮按钮可以呈现多种显示形态，因此，该方法可以提高悬浮按钮的显示灵活性，从而提高用户的视觉体验。
基于以上实施例，本申请还提供了一种终端设备，所述终端设备用于实现如图3所示的悬浮按钮显示方法。参阅图10所示，所述终端设备1000包括：显示单元1001、检测单元1002，处理单元1003，以及触摸显示屏1004，其中
显示单元1001，用于在触摸显示屏1004上显示默认状态的悬浮按钮，所述悬浮按钮中显示有第一图形；
检测单元1002，用于检测目标物体对所述悬浮按钮的触摸操作；
处理单元1003，用于当所述检测单元1002检测到滑动操作时，响应于检测到的所述滑动操作，以通过所述显示单元1001控制所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果；其中，所述动态变化包括：所述第一图形在与滑动方向相反方向上被拉伸时的动态变化。
可选的，所述第一图形在与滑动方向相反方向上被拉伸时的动态变化，包括：所述第一图形在与所述滑动方向相反方向上发生突起变形。
可选的，在默认状态的所述悬浮按钮中，所述第一图形的默认状态为圆形；
在呈现动态变化的效果的所述悬浮按钮中，动态变化的所述第一图形为水滴形或类椭圆形。
可选的，在所述第一图形的动态变化过程中，每次变化的所述第一图形为所述处理单元对参考图形与辅助圆进行融球算法生成的；
其中，所述参考图形的大小与默认状态的所述第一图形的大小相同，且第一圆心距离小于第二圆心距离，所述第一圆心距离为生成所述第N次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，所述第二圆心距离为生成第N+1次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，N为大于或等于1的整数。
可选的，在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述处理单元对默认状态的所述第一图形中的第一部分进行拉伸处理生成的，第M次变化的所述第一图形为所述处理单元对M-1次变化的所述第一图形中的所述第一部分进行拉伸处理生成的；
其中，默认状态的所述第一图形中的所述第一部分为：按照与所述滑动方向相垂直的分割线将所述默认状态的所述第一图形拆分为两部分后，相对于所述分割线处于所述滑动方向相反方向的一部分，M为大于2的整数。
可选的，在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述处理单元对默认状态的所述第一图形中的第二部分进行压缩处理生成的，第M次变化的所述第一图形为所述处理单元对M-1次变化的所述第一图形中的所述第二部分进行压缩处理生成的；
其中，默认状态的所述第一图形中的所述第二部分为所述默认状态的所述第一图形拆分为两部分中，除所述第一部分以外的另一部分。
可选的，所述悬浮按钮中还显示有第二图形；所述悬浮按钮在默认状态的下，所述第一图形全部覆盖在所述第二图形上。
可选的，在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
可选的，在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第二图形发生在与滑动方向相反方向上被拉伸时的动态变化。
可选的，所述第二图形不随着所述滑动轨迹发生位移。
可选的，所述第一图形显示在第一显示层，所述第二图形显示在第二显示层中，所述第一显示层位于所述第二显示层之上；
所述悬浮按钮在默认状态下，所述第一显示层全部覆盖在所述第二显示层上；
在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一显示层全部或部分覆盖在所述第二显示层上，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
可选的，所述处理单元1003，具体用于：
获取要显示所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果的多个图像帧，依次显示所述多个图像帧，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果。
可选的，所述多个图像帧基于一组图像帧变化得到。
可选的，所述检测单元1002还用于在检测到所述滑动操作之前，检测到第一长按操作，所述第一长按操作为所述目标物体对所述悬浮按钮触摸时间超过第一时长的操作；
所述处理单元1003还用于响应于检测到的所述第一长按操作，以启动响应所述滑动操作的功能。
可选的，所述处理单元1003还用于：
在所述检测单元1002检测到所述滑动操作结束时，通过所述显示单元1001显示恢复默认状态的所述悬浮按钮。
可选的，所述处理单元1003还用于：
在所述检测单元1002检测到所述滑动操作结束时，执行所述滑动操作对应的指令。
可选的，所述处理单元1003还用于在所述第一图形跟随所述滑动操作的滑动轨迹所产生的位移超过设定距离或所述第一图形移动到设定位置时，执行所述滑动操作对应的指令。
所述处理单元1003还用于：当所述检测单元1002检测到点击操作或第二长按操作时，响应于检测到的所述点击操作或第二长按操作，以控制所述悬浮按钮先呈现所述第一图形放大或缩小设定比例的效果，再显示恢复默认状态的所述悬浮按钮；
其中，所述第二长按操作为所述目标物体对所述悬浮按钮触摸时间超过第二时长的操作。
可选的，在所述第一图形放大或缩小所述设定比例时，所述第一图形的视觉参数发生变化，其中，所述视觉参数为以下至少一项：透明度、颜色、亮度和灰度。
可选的，所述处理单元1003还用于执行所述点击操作或第二长按操作对应的指令。
可选的，所述悬浮按钮中包括第一显示区域和第二显示区域，其中，所述第一显示区域用于显示所述悬浮按钮，所述第一显示的面积大于所述第二显示区域的面积；
所述检测单元1002在检测所述目标物体对所述悬浮按钮的触摸操作时，具体用于：
通过检测所述目标物体在所述触摸显示屏中所述第二显示区域的所在位置处的触摸操作，检测所述目标物体对所述悬浮按钮的触摸操作。
可选的，所述悬浮按钮为悬浮在所述终端设备的主界面或当前正在运行的程序界面的最上层显示，具有触发指令功能的虚拟按钮。
本申请实施例提供了一种终端设备，当所述终端设备检测到目标物体对悬浮按钮进行滑动操作时，所述终端设备可以控制所述悬浮按钮呈现出动态变化的效果。这样所述悬浮按钮可以呈现多种显示形态，因此，该方法可以提高悬浮按钮的显示灵活性，从而提高用 户的视觉体验。
需要说明的是，本申请实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
基于以上实施例，本申请实施例还提供了一种终端设备，所述终端设备用于实现如图3所示的悬浮按钮显示方法，具有如图10所示的终端设备1000的功能。参阅图11所示，所述终端设备1100中包括：触摸显示屏1101、处理器1102以及存储器1103。
所述触摸显示屏1101、所述处理器1102和所述存储器1103相互连接。可选的，所述触摸显示屏1101、所述处理器1102和所述存储器1103可以通过总线1104相互连接；所述总线1104可以是外设部件互连标准(peripheral component interconnect，PCI)总线或扩展工业标准结构(extended industry standard architecture，EISA)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图11中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
可选的，所述终端设备1000还包括收发器1105，用于与其他设备进行通信交互。
所述处理器1102，用于实现如图3所示的悬浮按钮显示方法，具体可以参见上述实施例中的描述，此处不再赘述。
所述存储器1103，用于存放程序指令等。具体地，程序指令可以包括程序代码，该程序代码包括计算机操作的指令。存储器1103可能包含随机存取存储器(random access memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。所述处理器1102执行所述存储器1103所存放的程序，实现上述功能，从而实现如图3所示的悬浮按钮显示方法。
综上所述，本申请实施例提供了一种悬浮按钮显示方法及终端设备，在该方案中，当终端设备检测到目标物体对悬浮按钮进行滑动操作时，所述终端设备可以控制所述悬浮按钮呈现出动态变化的效果。这样所述悬浮按钮可以呈现多种显示形态，因此，该方法可以提高悬浮按钮的显示灵活性，从而提高用户的视觉体验。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (30)

  1. 一种悬浮按钮显示方法，其特征在于，包括：
    终端设备在触摸显示屏上显示默认状态的悬浮按钮，所述悬浮按钮中显示有第一图形；
    所述终端设备检测目标物体对所述悬浮按钮的触摸操作；
    当所述终端设备检测到滑动操作时，所述终端设备响应于检测到的所述滑动操作，以控制所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果；其中，所述动态变化包括：所述第一图形在与滑动方向相反方向上被拉伸时的动态变化。
  2. 如权利要求1所述的方法，其特征在于，所述第一图形在与滑动方向相反方向上被拉伸时的动态变化，包括：所述第一图形在与所述滑动方向相反方向上发生突起变形。
  3. 如权利要求1或2所述的方法，其特征在于，
    在默认状态的所述悬浮按钮中，所述第一图形的默认状态为圆形；
    动态变化的所述第一图形为水滴形或类椭圆形。
  4. 如权利要求3所述的方法，其特征在于，
    在所述第一图形的动态变化过程中，每次变化的所述第一图形为所述终端设备对参考图形与辅助圆进行融球算法生成的；
    其中，所述参考图形的大小与默认状态的所述第一图形的大小相同，且第一圆心距离小于第二圆心距离，所述第一圆心距离为生成所述第N次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，所述第二圆心距离为生成第N+1次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，N为大于或等于1的整数。
  5. 如权利要求3所述的方法，其特征在于，
    在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述终端设备对默认状态的所述第一图形中的第一部分进行拉伸处理生成的，第M次变化的所述第一图形为所述终端设备对M-1次变化的所述第一图形中的所述第一部分进行拉伸处理生成的；
    其中，默认状态的所述第一图形中的所述第一部分为：按照与所述滑动方向相垂直的分割线将所述默认状态的所述第一图形拆分为两部分后，相对于所述分割线处于所述滑动方向相反方向的一部分，M为大于2的整数。
  6. 如权利要求5所述的方法，其特征在于，在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述终端设备对默认状态的所述第一图形中的第二部分进行压缩处理生成的，第M次变化的所述第一图形为所述终端设备对M-1次变化的所述第一图形中的所述第二部分进行压缩处理生成的；
    其中，默认状态的所述第一图形中的所述第二部分为所述默认状态的所述第一图形拆分为两部分中，除所述第一部分以外的另一部分。
  7. 如权利要求1-6任一项所述的方法，其特征在于，所述悬浮按钮中还显示有第二图形；
    所述悬浮按钮在默认状态下，所述第一图形全部覆盖在所述第二图形上；
    在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
  8. 如权利要求7所述的方法，其特征在于，在所述第一图形跟随所述滑动操作的滑 动轨迹呈现动态变化的效果的过程中，所述第二图形发生在与滑动方向相反方向上被拉伸时的动态变化。
  9. 如权利要求7或8所述的方法，其特征在于，
    所述第二图形不随着所述滑动轨迹发生位移。
  10. 如权利要求7-9任一项所述的方法，其特征在于，所述第一图形显示在第一显示层，所述第二图形显示在第二显示层中，所述第一显示层位于所述第二显示层之上；
    所述悬浮按钮在默认状态下，所述第一显示层全部覆盖在所述第二显示层上；
    在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一显示层全部或部分覆盖在所述第二显示层上，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
  11. 如权利要求7-9任一项所述的方法，其特征在于，所述终端设备获取要显示所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果的多个图像帧，依次显示所述多个图像帧，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果。
  12. 如权利要求11所述的方法，其特征在于：
    所述多个图像帧基于一组图像帧变化得到。
  13. 如权利要求1-12任一项所述的方法，其特征在于，在所述终端设备检测到所述滑动操作之前，所述方法还包括：
    所述终端设备检测到第一长按操作，所述第一长按操作为所述目标物体对所述悬浮按钮触摸时间超过第一时长的操作；
    所述终端设备响应于检测到的所述第一长按操作，以启动响应所述滑动操作的功能。
  14. 如权利要求1-13任一项所述的方法，其特征在于，所述方法还包括：
    在所述终端设备检测到所述滑动操作结束时，所述终端设备显示恢复默认状态的所述悬浮按钮；
    所述终端设备执行所述滑动操作对应的指令。
  15. 如权利要求1-13任一项所述的方法，其特征在于，
    在所述第一图形跟随所述滑动操作的滑动轨迹所产生的位移超过设定距离或所述第一图形移动到设定位置时，所述终端设备执行所述滑动操作对应的指令。
  16. 如权利要求1所述的方法，其特征在于，所述方法还包括：
    当所述终端设备检测到点击操作或第二长按操作时，所述终端设备响应于检测到的所述点击操作或第二长按操作，以控制所述悬浮按钮先呈现所述第一图形放大或缩小设定比例的效果，再显示恢复默认状态的所述悬浮按钮；
    其中，所述第二长按操作为所述目标物体对所述悬浮按钮触摸时间超过第二时长的操作。
  17. 如权利要求16所述的方法，其特征在于，在所述第一图形放大或缩小所述设定比例时，所述第一图形的视觉参数发生变化，其中，所述视觉参数为以下至少一项：透明度、颜色、亮度和灰度。
  18. 如权利要求16或17所述的方法，其特征在于，所述方法还包括：
    所述终端设备执行所述点击操作或第二长按操作对应的指令。
  19. 如权利要求1-18任一项所述的方法，其特征在于，所述悬浮按钮中包括第一显示区域和第二显示区域，其中，所述第一显示区域用于显示所述悬浮按钮，所述第一显示的面积大于所述第二显示区域的面积；
    所述终端设备检测所述目标物体对所述悬浮按钮的触摸操作，包括：
    所述终端设备通过检测所述目标物体在所述触摸显示屏中所述第二显示区域的所在位置处的触摸操作，检测所述目标物体对所述悬浮按钮的触摸操作。
  20. 如权利要求1-19任一项所述的方法，其特征在于，所述悬浮按钮为悬浮在所述终端设备的主界面或当前正在运行的程序界面的最上层显示，具有触发指令功能的虚拟按钮。
  21. 一种终端设备，其特征在于，包括：
    显示单元，用于在触摸显示屏上显示默认状态的悬浮按钮，所述悬浮按钮中显示有第一图形；
    检测单元，用于检测目标物体对所述悬浮按钮的触摸操作；
    处理单元，用于当所述检测单元检测到滑动操作时，响应于检测到的所述滑动操作，以通过所述显示单元控制所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果；其中，所述动态变化包括：所述第一图形在与滑动方向相反方向上被拉伸时的动态变化。
  22. 如权利要求21所述的终端设备，其特征在于，所述第一图形在与滑动方向相反方向上被拉伸时的动态变化，包括：所述第一图形在与所述滑动方向相反方向上发生突起变形。
  23. 如权利要求21或22所述的终端设备，其特征在于，
    在默认状态的所述悬浮按钮中，所述第一图形的默认状态为圆形；
    动态变化的所述第一图形为水滴形或类椭圆形。
  24. 如权利要求23所述的终端设备，其特征在于，
    在所述第一图形的动态变化过程中，每次变化的所述第一图形为所述处理单元对参考图形与辅助圆进行融球算法生成的；
    其中，所述参考图形的大小与默认状态的所述第一图形的大小相同，且第一圆心距离小于第二圆心距离，所述第一圆心距离为生成所述第N次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，所述第二圆心距离为生成第N+1次变化的所述第一图形时所述参考图形的圆心与所述辅助圆的圆心之间的距离，N为大于或等于1的整数。
  25. 如权利要求23所述的终端设备，其特征在于，
    在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述处理单元对默认状态的所述第一图形中的第一部分进行拉伸处理生成的，第M次变化的所述第一图形为所述处理单元对M-1次变化的所述第一图形中的所述第一部分进行拉伸处理生成的；
    其中，默认状态的所述第一图形中的所述第一部分为：按照与所述滑动方向相垂直的分割线将所述默认状态的所述第一图形拆分为两部分后，相对于所述分割线处于所述滑动方向相反方向的一部分，M为大于2的整数。
  26. 如权利要求25所述的终端设备，其特征在于，在所述第一图形的动态变化过程中，首次变化的所述第一图形为所述处理单元对默认状态的所述第一图形中的第二部分进 行压缩处理生成的，第M次变化的所述第一图形为所述处理单元对M-1次变化的所述第一图形中的所述第二部分进行压缩处理生成的；
    其中，默认状态的所述第一图形中的所述第二部分为所述默认状态的所述第一图形拆分为两部分中，除所述第一部分以外的另一部分。
  27. 如权利要求21-26任一项所述的终端设备，其特征在于，所述悬浮按钮中还显示有第二图形；
    所述悬浮按钮在默认状态下，所述第一图形全部覆盖在所述第二图形上；
    在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
  28. 如权利要求27所述的终端设备，其特征在于，在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第二图形发生在与滑动方向相反方向上被拉伸时的动态变化。
  29. 如权利要求27或28所述的终端设备，其特征在于，所述第一图形显示在第一显示层，所述第二图形显示在第二显示层中，所述第一显示层位于所述第二显示层之上；
    所述悬浮按钮在默认状态下，所述第一显示层全部覆盖在所述第二显示层上；
    在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一显示层全部或部分覆盖在所述第二显示层上，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上。
  30. 如权利要求27或28所述的终端设备，其特征在于，
    所述处理单元具体用于：获取要显示所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果的多个图像帧，依次通过所述显示单元显示所述多个图像帧，从而实现在所述第一图形跟随所述滑动操作的滑动轨迹呈现动态变化的效果的过程中，所述第一图形全部或部分覆盖在所述第二图形上的动态变化效果。
PCT/CN2018/109896 2017-10-16 2018-10-11 一种悬浮按钮显示方法及终端设备 Ceased WO2019076238A1 (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
EP18867729.8A EP3683666B1 (en) 2017-10-16 2018-10-11 Floating action button display method and terminal device
US16/847,119 US11016644B2 (en) 2017-10-16 2020-04-13 Suspend button display method and terminal device
US17/308,687 US11507261B2 (en) 2017-10-16 2021-05-05 Suspend button display method and terminal device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710960495.6 2017-10-16
CN201710960495.6A CN107870723B (zh) 2017-10-16 2017-10-16 一种悬浮按钮显示方法及终端设备

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US16/847,119 Continuation US11016644B2 (en) 2017-10-16 2020-04-13 Suspend button display method and terminal device

Publications (1)

Publication Number Publication Date
WO2019076238A1 true WO2019076238A1 (zh) 2019-04-25

Family

ID=61753129

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/109896 Ceased WO2019076238A1 (zh) 2017-10-16 2018-10-11 一种悬浮按钮显示方法及终端设备

Country Status (4)

Country Link
US (2) US11016644B2 (zh)
EP (1) EP3683666B1 (zh)
CN (2) CN112286434B (zh)
WO (1) WO2019076238A1 (zh)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112286434B (zh) 2017-10-16 2021-12-10 华为技术有限公司 一种悬浮按钮显示方法及终端设备
CN108733288B (zh) * 2018-05-21 2021-01-26 网易（杭州）网络有限公司 信息处理方法、装置、电子设备及存储介质
CN109407934A (zh) * 2018-09-03 2019-03-01 卓望数码技术（深圳）有限公司 一种功能按钮切换控制方法、装置及设备
CN109587544A (zh) * 2018-09-27 2019-04-05 杭州家娱互动网络科技有限公司 一种图标渲染方法、装置及电子设备
CN113835793B (zh) * 2020-06-22 2023-09-01 深圳市万普拉斯科技有限公司 设置界面中开关显示方法、装置、电子设备及存储介质
CN114356196B (zh) * 2020-09-30 2022-12-20 荣耀终端有限公司 一种显示方法及电子设备
CN112269615B (zh) * 2020-11-02 2024-05-14 深圳市大成天下信息技术有限公司 一种界面交互方法、装置和移动终端
CN112288756B (zh) * 2020-12-28 2021-04-30 湖南新云网科技有限公司 一种图形分割方法、装置、电子设备及可读存储介质
CN115480662A (zh) * 2021-05-28 2022-12-16 华为技术有限公司 悬浮操控时的感应区域分离方法、装置、悬浮操控遥控器
CN113407270A (zh) * 2021-06-02 2021-09-17 Oppo广东移动通信有限公司 电子设备的显示方法、装置及存储介质
CN114415928A (zh) * 2022-01-17 2022-04-29 北京字跳网络技术有限公司 一种页面控制方法、装置、设备以及存储介质
CN116225293B (zh) * 2023-03-22 2023-09-19 广州文石信息科技有限公司 用于墨水屏的滚动显示方法、装置、设备以及介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102375683A (zh) * 2010-08-20 2012-03-14 索尼公司 信息处理设备、计算机程序产品以及显示控制方法
CN102696004A (zh) * 2010-01-06 2012-09-26 三星电子株式会社 用于操作在透明显示面板上显示的内容的移动设备及方法
CN103635873A (zh) * 2012-09-17 2014-03-12 华为终端有限公司 触摸操作处理方法及终端设备
WO2014069917A1 (en) * 2012-10-31 2014-05-08 Samsung Electronics Co., Ltd. Display apparatus and method thereof
CN104932809A (zh) * 2014-03-19 2015-09-23 索尼公司 用于控制显示面板的装置和方法
CN107870723A (zh) * 2017-10-16 2018-04-03 华为技术有限公司 一种悬浮按钮显示方法及终端设备

Family Cites Families (36)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8479122B2 (en) * 2004-07-30 2013-07-02 Apple Inc. Gestures for touch sensitive input devices
US6211856B1 (en) * 1998-04-17 2001-04-03 Sung M. Choi Graphical user interface touch screen with an auto zoom feature
US6084598A (en) * 1998-04-23 2000-07-04 Chekerylla; James Apparatus for modifying graphic images
US7271815B2 (en) * 2004-10-21 2007-09-18 International Business Machines Corporation System, method and program to generate a blinking image
US7657849B2 (en) * 2005-12-23 2010-02-02 Apple Inc. Unlocking a device by performing gestures on an unlock image
US7945503B2 (en) * 2007-02-22 2011-05-17 The Jellyvision Lab, Inc. On-line auction interface
JP4605170B2 (ja) * 2007-03-23 2011-01-05 株式会社デンソー 操作入力装置
US8619038B2 (en) * 2007-09-04 2013-12-31 Apple Inc. Editing interface
SG153670A1 (en) * 2007-12-11 2009-07-29 Creative Tech Ltd A dynamic digitized visual icon and methods for generating the aforementioned
US20100031202A1 (en) * 2008-08-04 2010-02-04 Microsoft Corporation User-defined gesture set for surface computing
CN101739191A (zh) * 2008-11-06 2010-06-16 阿尔派株式会社 显示装置
US8381118B2 (en) * 2009-10-05 2013-02-19 Sony Ericsson Mobile Communications Ab Methods and devices that resize touch selection zones while selected on a touch sensitive display
KR101319264B1 (ko) * 2010-01-22 2013-10-18 전자부품연구원 멀티 터치 압력에 기반한 ｕｉ 제공방법 및 이를 적용한 전자기기
US8589815B2 (en) * 2010-03-10 2013-11-19 Microsoft Corporation Control of timing for animations in dynamic icons
JP2012033058A (ja) * 2010-07-30 2012-02-16 Sony Corp 情報処理装置、情報処理方法及び情報処理プログラム
US20120066640A1 (en) * 2010-09-13 2012-03-15 Ati Technologies Ulc Apparatus for providing multi-mode warping of graphical user interface objects
JP5649169B2 (ja) * 2010-11-22 2015-01-07 インターナショナル・ビジネス・マシーンズ・コーポレーションＩｎｔｅｒｎａｔｉｏｎａｌ Ｂｕｓｉｎｅｓｓ Ｍａｃｈｉｎｅｓ Ｃｏｒｐｏｒａｔｉｏｎ タッチパネルにおけるドラッグ操作でオブジェクトを移動させる方法、装置及びコンピュータプログラム
US20120233545A1 (en) * 2011-03-11 2012-09-13 Akihiko Ikeda Detection of a held touch on a touch-sensitive display
US20120290977A1 (en) * 2011-05-12 2012-11-15 John Devecka System and method for an interactive mobile-optimized icon-based profile display and associated social network functionality
US20150178972A1 (en) * 2011-06-14 2015-06-25 Google Inc. Animated Visualization of GPS Data in a GIS System
US9367233B2 (en) * 2011-10-31 2016-06-14 Samsung Electronics Co., Ltd. Display apparatus and method thereof
US20130117698A1 (en) * 2011-10-31 2013-05-09 Samsung Electronics Co., Ltd. Display apparatus and method thereof
CN102722334B (zh) * 2012-06-06 2016-02-24 中兴通讯股份有限公司 触摸屏幕的控制方法及装置
US20140108982A1 (en) * 2012-10-11 2014-04-17 Microsoft Corporation Object placement within interface
US9671926B2 (en) * 2013-02-22 2017-06-06 Xiaomi Inc. Method and terminal device for displaying dynamic icon
KR102090964B1 (ko) * 2013-02-22 2020-03-19 삼성전자주식회사 터치 스크린에 디스플레이되는 아이콘을 제어하는 휴대 단말 및 방법
US10620775B2 (en) * 2013-05-17 2020-04-14 Ultrahaptics IP Two Limited Dynamic interactive objects
WO2015022498A1 (en) * 2013-08-15 2015-02-19 Elliptic Laboratories As Touchless user interfaces
JP6392881B2 (ja) * 2014-02-04 2018-09-19 タクチュアル ラブズ シーオー． 応用素子の代替的グラフィック表示の事前の生成による入力に対する低レイテンシの視覚的応答およびグラフィック処理ユニットの入力処理
US20160034153A1 (en) * 2014-07-31 2016-02-04 Microsoft Corporation Icon Resizing
US10142075B2 (en) * 2014-11-03 2018-11-27 Lg Electronics Inc. Method and apparatus for transmitting reference signal in wireless communication system based on multiple antennas
JP5865535B1 (ja) * 2015-04-16 2016-02-17 株式会社コロプラ ユーザ・インタフェース・プログラム
CN106293412A (zh) * 2015-05-19 2017-01-04 富泰华工业（深圳）有限公司 图标调整方法、图标调整系统与电子装置
WO2017100761A1 (en) * 2015-12-10 2017-06-15 Appelago Inc. Floating animated push interfaces for interactive dynamic push notifications and other content
CN105930147B (zh) * 2016-04-13 2020-09-08 北京小米移动软件有限公司 应用功能的启动方法及装置
CN106843631B (zh) * 2016-11-15 2020-06-05 北京安云世纪科技有限公司 一种处理应用图标的方法和装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102696004A (zh) * 2010-01-06 2012-09-26 三星电子株式会社 用于操作在透明显示面板上显示的内容的移动设备及方法
CN102375683A (zh) * 2010-08-20 2012-03-14 索尼公司 信息处理设备、计算机程序产品以及显示控制方法
CN103635873A (zh) * 2012-09-17 2014-03-12 华为终端有限公司 触摸操作处理方法及终端设备
WO2014069917A1 (en) * 2012-10-31 2014-05-08 Samsung Electronics Co., Ltd. Display apparatus and method thereof
CN104932809A (zh) * 2014-03-19 2015-09-23 索尼公司 用于控制显示面板的装置和方法
CN107870723A (zh) * 2017-10-16 2018-04-03 华为技术有限公司 一种悬浮按钮显示方法及终端设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
See also references of EP3683666A4

Also Published As

Publication number Publication date
CN112286434A (zh) 2021-01-29
US20210255761A1 (en) 2021-08-19
US20200241735A1 (en) 2020-07-30
US11016644B2 (en) 2021-05-25
US11507261B2 (en) 2022-11-22
CN112286434B (zh) 2021-12-10
CN107870723A (zh) 2018-04-03
EP3683666A1 (en) 2020-07-22
CN107870723B (zh) 2020-09-04
EP3683666A4 (en) 2020-11-11
EP3683666B1 (en) 2025-06-25

Similar Documents

Publication Publication Date Title
CN107870723B (zh) 一种悬浮按钮显示方法及终端设备
US12045440B2 (en) Method, device, and graphical user interface for tabbed and private browsing
US10908789B2 (en) Application switching method and apparatus and graphical user interface
US20210311598A1 (en) Device, Method, and Graphical User Interface for Transitioning from Low Power Mode
US11709588B2 (en) Method and apparatus for providing a notification mechanism
EP2972732B1 (en) Device, method, and graphical user interface for adjusting the appearance of a control
EP2812796B1 (en) Apparatus and method for providing for remote user interaction
US10222974B2 (en) Method and apparatus for providing quick access to device functionality
WO2012164170A1 (en) Method and apparatus for spatially indicating notifications
CN108920069B (zh) 一种触控操作方法、装置、移动终端和存储介质
CN106909289A (zh) 一种应用控件的操作方法及移动终端
CN107678667B (zh) 一种虚拟键盘显示方法及移动终端
US20170068374A1 (en) Changing an interaction layer on a graphical user interface

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 18867729

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

ENP Entry into the national phase

Ref document number: 2018867729

Country of ref document: EP

Effective date: 20200416

WWG Wipo information: grant in national office

Ref document number: 2018867729

Country of ref document: EP