Interface display method and apparatus

Abstract

The embodiments of the present application provide an interface display method and apparatus, which are related to the field of terminal technology. The method includes: a terminal device displays a first interface including a plurality of elements; the terminal device receives a first operation on a target element among the plurality of elements; the terminal device moves the target element from a first position to a second position in response to the first operation; and the terminal device scales down and / or scales up a first layer of elements around the second position among the plurality of elements for display. In this way, when detecting that the target element is placed at the target position, the terminal device generates a ripple effect around the target element, so that a user can timely notice the target element that may be moved.

Description

Technical Field

[0001] This application relates to the field of terminal technology, particularly to an interface display method and apparatus.

Background Art

[0002] With the popularization and development of the Internet, in order to meet the different user requirements for the use of terminal devices, more and more elements may be displayed on the home screen of terminal devices. Generally, a user can drag or move an arbitrary element on the home screen to another position on the home screen by triggering the element.

[0003] However, when a user accidentally touches any element within the interface, the terminal device may immediately drag or move the element in response to the user's accidental touch operation. As a result, the user may not be able to timely notice the element that has been moved during the accidental touch.

Summary of the Invention

[0004] Embodiments of this application provide an interface display method and apparatus. When detecting that a target element is placed at a target position, the terminal device can cause a ripple effect around the target element, enabling the user to timely notice the target element that may be moved.

[0005] According to a first aspect, embodiments of the present application provide an interface display method, the method comprising a terminal device displaying a first interface, the first interface comprising a plurality of elements, the terminal device receiving a first operation on a target element among the plurality of elements, the terminal device moving the target element from a first position to a second position in response to the first operation, and the terminal device scaling down and / or scaling up a first layer of elements around the second position among the plurality of elements for display. In this way, upon detecting that the target element is in the target position, the terminal device may generate a ripple effect around the target element so that the user can be timely aware of the target element that may be moved.

[0006] The first position may be the starting position of the target element, and the second position may be the position where a ripple is generated relative to the target element, or may be understood as the target position as described in this embodiment of the present application. The first position may be the same as or different from the second position. The first operation may be the target operation as described in the embodiment of the present application.

[0007] In a possible implementation, the method further includes the terminal device scaling down and / or scaling up for display of a second layer of elements around a second position among multiple elements, wherein the second layer and the first layer of elements are all elements centered on the second position, and the second layer of elements are elements outside the first layer of elements. In this way, the terminal device can form a ripple effect with two ripple layers around a target element based on the oscillation of the first and second layers of elements, so that the user can become aware of the target element that may be moved in a timely manner.

[0008] The first layer of the element may be an element corresponding to the first scope described in the embodiments of the present application, and the second layer of the element may be an element corresponding to the second scope described in the embodiments of the present application.

[0009] In a possible implementation, the scaling down and / or scaling up of a second layer of an element around a second position among multiple elements for display by the terminal device includes the scaling down and / or scaling up of the second layer of the element for display after a first time threshold following the scaling down and / or scaling up of the first layer of the element for display. In this way, the terminal device may oscillate the second layer of the element after a time threshold following the oscillation of the first layer of the element, and by using the time difference in the oscillations of the two element layers, a water ripple-like effect may be formed, making the ripple effect more pronounced.

[0010] The value of the first time threshold may be 50 ms or another value.

[0011] In possible implementations, the scaling ratio at which the second layer of an element is scaled down for display is greater than the scaling ratio at which the first layer of the element is scaled down for display, and the scaling ratio at which the second layer of the element is scaled up for display is smaller than the scaling ratio at which the first layer of the element is scaled up for display. In this way, the terminal device can adjust the scaling ratios of the different element layers to make the ripple effect more pronounced, so as to present a dynamic effect in which the waveform is successively attenuated.

[0012] In a possible implementation, the method further includes the terminal device scaling down and / or scaling up for display the Nth layer of elements around a second position among multiple elements, where the Nth layer and the second layer of elements are all elements centered around the second position, and the Nth layer of elements is an element outside the second layer of elements, where N is greater than 2. In this way, the terminal device can form a ripple effect with N ripple layers around a target element based on N element layers, so that the user can become aware of the target element that may be moved in a timely manner.

[0013] In a possible implementation, the method further includes the terminal device scaling down and / or scaling up elements in a dock bar for display purposes when the Mth layer of elements includes elements in a dock bar, where M is less than or equal to N. In this way, when the Mth layer of elements includes elements in a dock bar, the terminal device can also scale the elements in the dock bar for display purposes, thereby allowing the ripple effect to be presented to the elements in the dock bar as well.

[0014] In a possible implementation, the scaling ratio at which the Nth layer of an element is scaled down for display is greater than the scaling ratio at which the Second layer of the element is scaled down for display, and the scaling ratio at which the Nth layer of an element is scaled up for display is smaller than the scaling ratio at which the Second layer of the element is scaled up for display. In this way, the terminal device can adjust the scaling ratios of different element layers to make the ripple effect more pronounced, so as to present a dynamic effect in which the waveform is successively attenuated.

[0015] In a possible implementation, the scaling down and / or scaling up of a first layer of an element around a second position among multiple elements by a terminal device for display includes: the terminal device scaling down the first layer of the element at a first time point and displaying the scaled-down first layer of the element; the terminal device scaling up the scaled-down first layer of the element at a second time point and displaying the scaled-up first layer of the element; and the terminal device scaling down the scaled-up first layer of the element at a third time point and displaying the first layer of the element. In this way, the terminal device can scale the first layer of the element by first zooming out the image, then zooming in the image, and then zooming out the image, so that a dynamic effect is presented to the first layer of the element.

[0016] In a possible implementation, the size of the first layer of a scaled-down element is smaller than the size of the first layer of the original element, and the size of the first layer of a scaled-up element is larger than the size of the first layer of the original element.

[0017] In possible implementations, scaling down and / or scaling up for display of a first layer of an element around a second position among multiple elements by a terminal device includes scaling down inward and / or scaling up outward for display of the first layer of an element around a second position among multiple elements by using the second position as the center. In this way, the first layer of the element may present a dynamic effect of swinging outward by using the target element at the second position as the center.

[0018] In a possible implementation, a terminal device moving a target element from a first position to a second position in response to a first operation includes, in response to the first operation, the terminal device scaling down the target element and displaying the scaled-down target element, and, if the first operation acts sequentially on the target element, the terminal device scaling up the scaled-down target element and displaying the scaled-up target element, and the terminal device moving the scaled-up target element from the first position to the second position. Thus, a first operation used by the user to trigger the target element is operation Upon receiving this, the terminal device may scale down and up the target element so that the user can notice the triggered target element.

[0019] In a possible implementation, the terminal device moving a scaled-up target element from a first position to a second position includes, if, during the process of the terminal device moving the scaled-up target element from the first position to the second position, it is determined that the first element is present at the second position, the terminal device then moves the first element to a third position and moves the scaled-up target element from the first position to the second position. In this way, if it is determined that an element is present at the second position, the terminal device may move that element to another position, and a ripple effect may be triggered when the target element is moved to the second position.

[0020] In possible implementations, the size of the target element is positively correlated with the number of layers around the second position among multiple elements. In this way, the larger the size of the target element, the more ripple is presented by the terminal device, thus mimicking the dynamic effect when objects of different sizes are thrown into water, where the larger the surface area and mass of the object, the wider the range of the ripples formed and the larger the amplitude of the waveform.

[0021] In possible implementations, the size of the target element is positively correlated with the area covered by the first layer. In this way, the larger the size of the target element, the more ripples are presented by the terminal device, thus mimicking the effect that occurs when objects of different sizes are thrown into water, where the area and mass of the object increase, the wider the range of ripples formed.

[0022] In possible implementations, the target element is an element within a folder, and the method further includes a terminal device receiving a second operation on the folder. The terminal device displaying the first interface includes the terminal device displaying the first interface in response to the second operation. In this way, when there are multiple elements within a folder, the terminal device may present a ripple effect within the folder based on triggers from the target element within the folder.

[0023] In a possible implementation, the target element includes an application icon, a card, a widget, a folder, a card set, an image icon, or an album icon.

[0024] According to a second aspect, an embodiment of the present application provides an interface display device, which includes a processing unit and a display unit. The display unit is configured to display a first interface, and the first interface includes a plurality of elements. The processing unit is configured to receive a first operation on a target element among the plurality of elements. In response to the first operation, the processing unit is configured to move the target element from a first position to a second position. The display unit is configured to scale down and / or scale up a first layer of elements around the second position among the plurality of elements for display.

[0025] In a possible implementation, the display unit is further configured to scale down and / or scale up a second layer of elements around the second position among the plurality of elements for display, and both the second layer of elements and the first layer of elements are elements centered on the second position, and the second layer of elements is an element outside the first layer of elements.

[0026] In a possible implementation, the display unit is particularly configured to scale down and / or scale up the second layer of elements for display after a first time threshold after the first layer of elements has been scaled down and / or scaled up for display.

[0027] In a possible implementation, the scaling-down ratio at which the second layer of elements is scaled down for display is greater than the scaling-down ratio at which the first layer of elements is scaled down for display, and the scaling-up ratio at which the second layer of elements is scaled up for display is smaller than the scaling-up ratio at which the first layer of elements is scaled up for display.

[0028] In a possible implementation, the display unit is further configured to scale down and / or scale up the Nth layer of the elements around the second position among the plurality of elements for display, and all of the Nth layer of the elements and the second layer of the elements are elements centered on the second position, and the Nth layer of the elements is an element outside the second layer of the elements, and N is greater than 2.

[0029] In a possible implementation, when the Mth layer of the elements includes elements in the dock bar, the display unit is further configured to scale down and / or scale up the elements in the dock bar for display, and M is less than or equal to N.

[0030] In a possible implementation, the scaling-down ratio at which the Nth layer of the elements is scaled down for display is greater than the scaling-down ratio at which the second layer of the elements is scaled down for display, and the scaling-up ratio at which the Nth layer of the elements is scaled up for display is less than the scaling-up ratio at which the second layer of the elements is scaled up for display.

[0031] In a possible implementation, the processing unit is specifically configured to scale down the first layer of the elements at a first time point, and the display unit is specifically configured to display the scaled-down first layer of the elements. The processing unit is specifically configured to scale up the scaled-down first layer of the elements at a second time point, and the display unit is configured to display the scaled-up first layer of the elements. At a third time point, the processing unit is configured to scale down the scaled-up first layer of the elements and is specifically configured to display the first layer of the elements.

[0032] In a possible implementation, the size of the scaled-down first layer of the elements is smaller than the size of the first layer of the elements, and the size of the scaled-up first layer of the elements is larger than the size of the first layer of the elements.

[0033] In a possible implementation, the display unit is specifically configured to scale down inward and / or scale up outward by using the second position as the center for displaying the first layer of elements around the second position among a plurality of elements.

[0034] In possible implementations, in response to a first operation, the processing unit is configured to scale down the target element, and the display unit is configured to display the scaled-down target element. If the first operation acts sequentially on the target element, the processing unit is configured to scale up the scaled-down target element, and the display unit is configured to display the scaled-up target element. The processing unit is configured to move the scaled-up target element from a first position to a second position.

[0035] In a possible implementation, if the terminal device determines that the first element is located at the second position during the process of moving the scaled-up target element from the first position to the second position, the processing unit is specifically configured to move the first element to the third position and move the scaled-up target element from the first position to the second position.

[0036] In possible implementations, the size of the target element is positively correlated with the number of layers surrounding the second position among multiple elements.

[0037] In possible implementations, the size of the target element is positively correlated with the extent covered by the first layer.

[0038] In a possible implementation, the target element is an element within a folder, the processing unit is specifically configured to receive a second operation on the folder, and in response to the second operation, the display unit is specifically configured to display a first interface.

[0039] In possible implementations, the elements covered include application icons, cards, widgets, folders, card sets, image icons, or album icons.

[0040] In accordance with the third aspect, embodiments of the present application provide a terminal device including a processor and memory. The memory is configured to store code instructions, and the processor is configured to execute code instructions so that the terminal device can perform a method according to the first aspect or an implementation of either the first aspect.

[0041] In accordance with the fourth aspect, embodiments of the present application provide a computer-readable storage medium. The computer-readable storage medium stores instructions, and when an instruction is executed, a computer can perform a method according to the first aspect or an implementation of either the first aspect.

[0042] In accordance with the fifth aspect, a computer program product includes a computer program, and when the computer program is executed, the computer may perform a method that conforms to the first aspect or to the implementation of either the first aspect.

[0043] It should be understood that the technical solutions of the second through fifth aspects of this application correspond to the technical solutions of the first aspect of this application, and that the advantageous effects achieved by these aspects and the corresponding feasible implementations are similar. Further details are not provided here again. [Brief explanation of the drawing]

[0044] [Figure 1] This is a schematic diagram of the hardware structure of a terminal device according to an embodiment of the present invention. [Figure 2] This is a schematic diagram of the software structure of a terminal device according to an embodiment of the present invention. [Figure 3A] This is a schematic diagram of an interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 3B]This is a schematic diagram of an interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 3C] This is a schematic diagram of an interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 3D] This is a schematic diagram of an interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 3E] This is a schematic diagram of an interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 4A] This is a schematic diagram of another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 4B] This is a schematic diagram of another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 4C] This is a schematic diagram of another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 4D] This is a schematic diagram of another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 4E] This is a schematic diagram of another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 4F] This is a schematic diagram of another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 5A] This is a schematic diagram of an interface in which a ripple effect is triggered within a folder, according to an embodiment of the present invention. [Figure 5B] This is a schematic diagram of an interface in which a ripple effect is triggered within a folder, according to an embodiment of the present invention. [Figure 5C] This is a schematic diagram of an interface in which a ripple effect is triggered within a folder, according to an embodiment of the present invention. [Figure 5D] This is a schematic diagram of an interface in which a ripple effect is triggered within a folder, according to an embodiment of the present invention. [Figure 6A] This is a schematic diagram of the ripple effect interface according to an embodiment of the present invention. [Figure 6B] This is a schematic diagram of the ripple effect interface according to an embodiment of the present invention. [Figure 6C] This is a schematic diagram of the ripple effect interface according to an embodiment of the present invention. [Figure 6D] This is a schematic diagram of the ripple effect interface according to an embodiment of the present invention. [Figure 7A] This is a schematic diagram of another interface for the ripple effect according to an embodiment of the present invention. [Figure 7B] This is a schematic diagram of another interface for the ripple effect according to an embodiment of the present invention. [Figure 7C] This is a schematic diagram of another interface for the ripple effect according to an embodiment of the present invention. [Figure 7D] This is a schematic diagram of another interface for the ripple effect according to an embodiment of the present invention. [Figure 7E] This is a schematic diagram of another interface for the ripple effect according to an embodiment of the present invention. [Figure 7F] This is a schematic diagram of another interface for the ripple effect according to an embodiment of the present invention. [Figure 8A] This is a schematic diagram of yet another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 8B] This is a schematic diagram of yet another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 8C] This is a schematic diagram of yet another interface in which a ripple effect is triggered, according to an embodiment of the present invention. [Figure 9A] This is a schematic diagram of an interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 9B] This is a schematic diagram of an interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 9C] This is a schematic diagram of an interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 9D] This is a schematic diagram of an interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 9E] This is a schematic diagram of an interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 9F] This is a schematic diagram of an interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 10A] This is a schematic diagram of another interface, according to an embodiment of the present invention, in which a ripple effect is triggered. [Figure 10B] This is a schematic diagram of another interface, according to an embodiment of the present invention, in which a ripple effect is triggered. [Figure 10C] This is a schematic diagram of another interface, according to an embodiment of the present invention, in which a ripple effect is triggered. [Figure 11A] This is a schematic diagram of another interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 11B] This is a schematic diagram of another interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 11C] This is a schematic diagram of another interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 11D] This is a schematic diagram of another interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 11E] This is a schematic diagram of another interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 11F] This is a schematic diagram of another interface according to an embodiment of the present invention, in which a ripple effect is triggered based on an album icon. [Figure 12] This is a schematic diagram of the structure of an interface display device according to an embodiment of the present invention. [Figure 13]This is a schematic diagram of another hardware structure of a terminal device according to an embodiment of the present invention. [Modes for carrying out the invention]

[0045] In order to clearly describe the technical solutions in the embodiments of this application, the terms "first," "second," etc., are used in these embodiments to distinguish between the same or similar items that have essentially the same function and effect. For example, the first value and the second value are merely intended to distinguish between different values ​​and not to limit their sequential order. Those skilled in the art will understand that the terms "first," "second," etc., do not limit quantities or execution order, and that the terms "first," "second," etc., do not indicate clear differences.

[0046] It should be noted that in this application, words such as “example” and “for example” are used to indicate an example, illustration, or description. No embodiment or design solution described in this application as “example” or “for example” should be construed as being preferable or advantageous to any other embodiment or design solution. Specifically, words such as “example” and “for example” are used to specifically present the relevant concepts.

[0047] In this application, “at least one” means one or more, and “multiple” means two or more. “And / or” indicates an association between related objects, indicating that three relationships may exist. For example, “A and / or B” can mean: A only exists, both A and B exist, and B only exists, where A and B may be singular or plural. The letter “ / ” usually indicates an “OR” relationship between related objects. “At least one of the following items” or a similar expression means any combination of these items, including any single item or any combination of multiple items. For example, at least one of a, b, or c can mean a, b, c, a and b, a and c, b and c, or a and b and c, where a, b, and c may be singular or plural.

[0048] It can be understood that if a user accidentally touches any element within the interface, any element on the home screen may be moved as a result of the user's accidental touch. In this case, even if the user notices that they may have touched the device and checks the device, the device will immediately move the element in response to the user's accidental touch and then display the home screen in a static state, making it difficult for the user to notice the element that was accidentally touched.

[0049] In view of this, embodiments of the present invention provide an interface display method. A terminal device displays a first interface which includes a plurality of elements, the terminal device receives a first operation on a target element among the plurality of elements, the terminal device moves the target element from a first position to a second position in response to the first operation, and the terminal device scales down and / or up a first layer of elements around the second position among the plurality of elements for display. If a first operation of accidental touch on the target element is received, the terminal device can scale the first layer of elements around the target element to present a ripple effect, thereby allowing the user to become aware of the accidentally touched target element in a timely manner.

[0050] The target elements may include application icons, cards, widgets, folders, card sets, image icons, album icons, etc. Any element among multiple elements may include application icons, cards, widgets, folders, card sets, image icons, album icons, etc. This is not limited to this embodiment of the present application.

[0051] Terminal devices are sometimes also called terminals, user equipment (UE), mobile stations (MS), mobile terminals (MT), etc. Terminal devices may include mobile phones with touchscreens, smart TVs, wearable devices, tablet computers (Pads), computers with wireless transmission and reception capabilities, virtual reality (VR) terminal devices, augmented reality (AR) terminal devices, wireless terminals in industrial control, wireless terminals in self-driving, wireless terminals in remote medical surgery, wireless terminals in smart grids, wireless terminals in transportation safety, wireless terminals in smart cities, wireless terminals in smart homes, etc. The specific technologies and specific device forms used by terminal devices are not limited in the embodiments of this application.

[0052] Therefore, for a better understanding of the embodiments of this application, the structure of the terminal device in the embodiments of this application is described below. For example, Figure 1 is a schematic diagram of another hardware structure of a terminal device according to the embodiments of this application.

[0053] The terminal device may include a processor 110, an external memory interface 120, internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, antenna 1, antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset jack 170D, a sensor module 180, a key 190, an indicator 192, a camera 193, a display 194, and the like.

[0054] It should be understood that the structures represented in this embodiment of the present application do not constitute a specific limitation on terminal devices. In some other embodiments of the present application, terminal devices may include fewer or more components than those shown, or may be a combination of some components, or a division of some components, or may have a different component arrangement. The illustrated components may be implemented using hardware, software, or a combination of hardware and software.

[0055] The processor 110 may include one or more processing units. Different processing units may be independent components or may be integrated into one or more processors. Memory may also be located in the processor 110 and configured to store instructions and data.

[0056] The USB interface 130 is an interface that conforms to the USB standard specification, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. The USB interface 130 may be configured to connect to a charger to charge a terminal device, or to transmit data between a terminal device and a peripheral device, or to connect to a headset to play audio using a headset. Alternatively, the interface may be configured to connect to other terminal devices such as AR devices.

[0057] The charging management module 140 is configured to receive a charging input from the charger. The charger may be a wireless charger or a wired charger. The power management module 141 is configured to connect to the charging management module 140 and the processor 110.

[0058] The wireless communication function of the terminal device may be implemented by using antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, baseband processor, etc.

[0059] Antenna 1 and Antenna 2 are configured to transmit and receive electromagnetic wave signals. The antennas within the terminal device may be configured to cover one or more communication bands. Different antennas may be further multiplexed to improve antenna utilization.

[0060] The mobile communication module 150 may provide wireless communication solutions applicable to terminal devices, including 2G / 3G / 4G / 5G, etc. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 may receive electromagnetic waves via antenna 1, perform processing such as filtering or amplification on the received electromagnetic waves, and send the processed electromagnetic waves to a modem processor for demodulation.

[0061] The wireless communication module 160 can be applied to terminal devices and may provide solutions including wireless communication such as wireless local area network (WLAN) (e.g., wireless fidelity (Wi-Fi) network), Bluetooth (BT), global navigation satellite system (GNSS), or frequency modulation (FM).

[0062] The terminal device implements display functionality by using a GPU, display 194, application processor, etc. The GPU is a microprocessor for image processing and is connected to the display 194 and application processor. The GPU is configured to perform mathematical and geometric calculations for graphics rendering.

[0063] The display 194 is configured to display images, videos, etc. The display 194 includes a display panel. In some embodiments, the terminal device may include one or N displays 194, where N is a positive integer greater than 1.

[0064] In possible implementations, if the terminal device is a device with touch control capabilities, the display 194 and the touchscreen may be combined. When a user triggers a corresponding position on the display 194, it is equivalent to the user triggering a corresponding position on the touchscreen.

[0065] Triggers may include tap operations, touch-and-hold operations, and the like. A tap operation may involve pressing a corresponding location on the display 194 and releasing the finger within a predetermined time threshold, while a touch-and-hold operation may involve pressing a corresponding location on the display 194 and releasing the finger after holding that location for longer than a predetermined time. It should be understood that both the tap operation and the touch-and-hold operation described in this embodiment of the present application are applicable to terminal devices in which the display 194 is combined with a touchscreen. Further details are not described below.

[0066] In possible embodiments, the display 194 may not be combined with a touchscreen. In this case, both the tap operation and the touch-and-hold operation in this embodiment of the present application may be replaced by other operations. This is not limited to this embodiment of the present application.

[0067] The terminal device may implement the shooting function by using an ISP, camera 193, video codec, GPU, display 194, application processor, etc.

[0068] Camera 193 is configured to capture still images or videos. In some embodiments, the terminal device may include one or N cameras 193, where N is a positive integer greater than 1.

[0069] The external memory interface 120 may be configured to connect to an external memory card, such as a Micro SD card, in order to expand the storage capacity of the terminal device. The external memory card implements data storage functionality and communicates with the processor 110 by using the external memory interface 120 to store files such as music and videos on the external memory card.

[0070] The internal memory 121 may be configured to store computer executable program code, which includes instructions. The internal memory 121 may include a program storage area and a data storage area. The internal memory 121 is configured to store executable program code corresponding to the interface display method described in the embodiments of this application, and furthermore, the processor 110 executes and calls the executable program code.

[0071] The terminal device can implement audio functions, such as music playback and recording, by using an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset jack 170D, an application processor, and the like.

[0072] The audio module 170 is configured to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. Speaker 170A, also called the "loudspeaker," is configured to convert audio electrical signals into acoustic signals. By using speaker 170A, terminal devices can listen to music or answer calls in hands-free mode. Receiver 170B, also called the "earpiece," is configured to convert audio electrical signals into acoustic signals. When a terminal device receives a call or voice message, receiver 170B may be placed near the ear to receive the sound. The headset jack 170D is configured to connect to a wired headset.

[0073] The microphone 170C, also called a "microphone," is configured to convert an acoustic signal into an electrical signal. In this embodiment of the present application, a terminal device may, based on the microphone 170C, receive an acoustic signal to activate the terminal device and convert the acoustic signal into an electrical signal, such as voiceprint data as described in the embodiment of the present application, for subsequent processing. The terminal device may have at least one microphone 170C.

[0074] The sensor module 180 may include one or more of the following sensors, for example, a pressure sensor, a gyroscope sensor, a barometric pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, an optical proximity sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an ambient light sensor, or a bone conduction sensor (not shown in Figure 1).

[0075] Key 190 includes a power-on key, volume keys, etc. Key 190 may be a mechanical key or a touch key. The terminal device may receive key input and generate key signal inputs related to user settings and function control of the terminal device. Indicator 192 may be an indicator light and may be configured to show the charging status or power changes, and may also be configured to show messages, missed call history, notifications, etc.

[0076] The software system of a terminal device may use a multi-layer architecture, event-driven architecture, microkernel architecture, microservices architecture, cloud architecture, etc. Further details are not provided here.

[0077] In this embodiment of the present application, an Android system with a multi-layer architecture is used as an example to describe the software structure of a terminal device.

[0078] For example, Figure 2 is a schematic diagram of the software architecture of a terminal device according to an embodiment of the present invention. As shown in Figure 2, a multilayer architecture divides the software into several layers, each with a clear role and task. The layers communicate with each other by using software interfaces. In some embodiments, the Android system is divided into four layers, which, from top to bottom, are the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer, respectively.

[0079] The application layer may include a series of application packages. As shown in Figure 2, application packages may include applications such as camera, calendar, phone, maps, music, settings, mailbox, video, and social.

[0080] The application framework layer provides the application programming interface (API) and the programming framework for the application in the application layer. The application framework layer includes several predefined functions.

[0081] As shown in Figure 2, the application framework layer may include a window manager, content provider, resource manager, view system, notification manager, and so on.

[0082] A window manager is configured to manage windowed programs. A window manager can do things like get the display size, determine if a status bar exists, lock the screen, touch the screen, drag the screen, take screenshots, and more.

[0083] In this embodiment of the present application, the window manager is configured to determine the display format of the first element on the home screen based on the user's screen touch operation, for example, moving the first element to the lower area of ​​the screen, or scaling down the first element to move the first element to the lower area of ​​the screen.

[0084] Content providers are configured to store and retrieve data, and to allow applications to access that data. This data may include video, images, audio, incoming and outgoing calls, search history and bookmarks, phone book entries, and more.

[0085] A view system includes visual controls such as text display controls and picture display controls. A view system can be configured to constitute an application. A display interface may include one or more views. For example, a display interface including an SMS notification icon may include a view for text display and a view for picture display.

[0086] The resource manager provides various resources for the application, such as localized text, icons, pictures, layout files, and video files.

[0087] A notification manager can enable applications to display notification information in the status bar and can be configured to deliver notification messages that disappear automatically after a short period of time without requiring user interaction. For example, a notification manager can be configured to provide notifications such as download completion and message reminders. The notification manager may also provide notifications that appear in the upper status bar of the system in the form of graphs or scrollbar text, such as notifications from applications running in the background, or notifications that appear on the screen in the form of dialog windows. For example, text information may be prompted in the status bar, a prompt tone may be generated, the terminal device may vibrate, or an indicator light may blink.

[0088] The Android runtime includes kernel libraries and a virtual machine. The Android runtime is involved in scheduling and managing the Android system.

[0089] The kernel library consists of two parts: one part is the functional functions that need to be called by the Java language, and the other part is the Android kernel library.

[0090] The application layer and application framework layer run on a virtual machine. The virtual machine executes Java files as binary files in the application layer and application framework layer. The virtual machine is configured to perform functions such as object lifetime management, stack management, thread management, security and exception management, and garbage collection.

[0091] The system library may include multiple functional modules, such as a surface manager, a media library, a 3D graphics processing library (e.g., OpenGL ES), and a 2D graphics engine (e.g., SGL).

[0092] The surface manager is configured to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications.

[0093] The media library supports playback and recording in multiple common audio and video formats, still image files, etc. The media library may support multiple audio and video coding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0094] The 3D graphics processing library is configured to implement 3D graphics drawing, image rendering and compositing, layer processing, and other related functions.

[0095] A 2D graphics engine is a rendering engine for 2D drawing.

[0096] The kernel layer is the layer between hardware and software. The kernel layer includes at least a display driver, camera driver, audio driver, and sensor driver.

[0097] The following describes in detail, using specific embodiments, the technical solution of this application and how the above-mentioned technical problems are resolved by using the technical solution of this application. Some of the following specific embodiments may be implemented independently or in combination with one another. Details of the same or similar concepts or processes may not be described again in some embodiments.

[0098] In the embodiments of this invention, elements of different sizes produce different ripple effects. Specifically, in Scenario 1, when the size of the target element is 1x1, the terminal device, upon receiving a user's target operation, can perform a scaling operation on the elements around the target element so that a relatively small range of ripple effects (e.g., two or three waveforms are generated around the 1x1 element) can occur for the elements around the target element. In Scenario 2, when the size of the target element is 2x2, the terminal device, upon receiving a user's target operation, can perform a scaling operation on the elements around the target element so that a moderate ripple effect (e.g., three or four waveforms are generated around the 2x2 element) can be generated for the elements around the target element. Or, in Scenario 3, when the size of the target element is 2x4, the terminal device, upon receiving a user's target operation, can perform a scaling operation on the elements around the target element so that a relatively large range of ripple effects (e.g., four or five waveforms are generated around the 2x4 element) can be generated for the elements around the target element. The target operation may be a touch-and-hold operation or a drag operation on the target element, thereby causing the target element to generate movement, or the target operation may be a touch-and-hold operation on the target element. This is not limited to this embodiment of the present application.

[0099] The ripple effect can be understood as an effect similar to the water ripple that occurs around an object when it is thrown into water. It can be understood that terminal devices can mimic the water ripple effect by scaling elements around the target element.

[0100] It can be understood that the size of the target element is not limited to the sizes described above. For example, the size of the target element may alternatively be values ​​such as 2×3, 1×2, 3×3, or 4×4. Adaptively, elements of different sizes may result in scaling effects of different waveform numbers and different amplitudes. This is not limited to this embodiment of the present application.

[0101] It should be understood that the embodiments of the present application are described using a mobile phone as an example of a terminal device, and this example does not constitute a limitation to the embodiments of the present application.

[0102] Scenario 1: When the target element is a 1x1 application icon, folder icon, etc., the terminal device, upon receiving a target operation from the user, can perform a scaling operation on the elements around the target element so that a relatively small range of ripple effect (e.g., two or three waveforms are generated around the 1x1 element) may occur on the elements around the target element.

[0103] Before describing the ripple effect corresponding to a target element of size 1x1, it may be understood that the target operation that triggers the ripple effect should be described. For example, Figures 3A to 3E are schematic diagrams of interfaces that trigger the ripple effect according to embodiments of the present invention.

[0104] The terminal device displays the interface shown in Figure 3A. The interface may be the home screen of the terminal device. For example, multiple 1x1 elements may be displayed within the interface, including the target element 301, elements in the dock at the bottom of the interface, and multiple elements displayed around the target element 301. Any element within the interface shown in Figure 3A may be an application icon, a folder icon, and / or similar. The size of the target element 301 within the interface may be the default size, for example, the aspect ratio of the target element 301 may be 100%.

[0105] In the interface shown in Figure 3A, when the terminal device receives a press operation or other trigger operation performed by the user on the target element 301, the terminal device may display the interface shown in Figure 3B. In the interface shown in Figure 3B, in response to a press operation performed by the user, the terminal device may scale down the target element 301 to obtain a scaled-down target element 301, for example, by scaling down the target element 301 to a value such as 90%, to indicate that the user has selected the target element 301.

[0106] In the interface shown in Figure 3B, if the time during which a press operation continues to act on the target element 301 exceeds a certain threshold, or if this is understood to be a case where a touch-and-hold operation is received on the target element 301 while the finger performing the press operation is not lifted, the terminal device may display the interface shown in Figure 3C. In the interface shown in Figure 3C, in response to a continuous press or touch-and-hold operation by the user, the terminal device may scale up the target element 301 that was scaled down in the interface shown in Figure 3B to obtain the scaled-up target element 301, and may scale up the scaled-down target element 301 to a value such as 110%.

[0107] The processes shown in Figures 3A to 3C may be collectively referred to as the terminal device receiving a touch-and-hold operation on the target element 301 through the interface shown in Figure 3A, in which case the touch-and-hold operation may include a press operation on the target element 301 and a touch-and-hold operation performed when the press operation acts on the target element 301 subsequently.

[0108] For example, when a terminal device receives a touch-and-hold operation on the target element 301 in the interface shown in Figure 3A, the terminal device may highlight the target element 301 (for example, by scaling up the target element 301 for display, so that the size of the target element 301 in the interface shown in Figure 3C is 110% of the size of the target element 301 in the interface shown in Figure 3A).

[0109] Furthermore, in the interface shown in Figure 3C, if a press operation is performed while the target element 301 is still located, the terminal device may display the interface shown in Figure 3D when it receives an operation for the user to drag the target element 301. As shown within the interface in Figure 3D, the target element 301 in the interface may remain highlighted, and a dashed box 302 is displayed at the starting position where the target element 301 began to be dragged. The dashed box 302 is used to indicate the position where the target element 301 will return when the user releases their finger.

[0110] In the interface shown in Figure 3D, when a user drags the target element 301 within a specific range centered on the target element 301, the dashed box 302 remains in the position shown in Figure 3D. Alternatively, when a user drags the target element 301 beyond a specific range centered on the target element 301, the dashed box 302 may appear in a different position (see embodiments corresponding to Figures 4A to 4F). When a user drags the target element 301 beyond a specific range centered on the target element 301, this can be understood as the user potentially needing to move the target element 301 to a different position. Therefore, the terminal device determines, in real time, based on the position where the user dragged the target element 301, the position to which the target element 301 can be returned when the user releases their finger (alternatively understood as the position of the dashed box corresponding to the target element 301).

[0111] The specific range may be the range in which a circle with its center at the target element 301 and radius R0 is located, where the value of R0 is shorter than a pre-set distance threshold. The pre-set distance threshold may be the distance between the center of the target element 301 and the center of the element closest to the target element 301 (for example, the element to the right of the target element 301).

[0112] When the target element 301 is in the position shown in Figure 3D, and the user releases their finger, the terminal device may place the target element 301 in the position of the dashed box 302 and display the interface shown in Figure 3E. In the interface shown in Figure 3E, the highlighting of the target element 301 is canceled, and the target element 301 returns to its display state and size as in the interface shown in Figure 3A.

[0113] In the interface shown in Figure 3E, the terminal device can sequentially display a ripple effect on elements around the target element 301 in an inside-out direction (e.g., the direction indicated by the arrow) by using the target element 301 as the center. For example, the terminal device may preferentially perform scaling on elements other than the target element 301 within (and through which the first range 303 passes) of the target element 301 (for specific scaling processes, see embodiments corresponding to Figures 6A to 6D). Elements other than the target element 301 within the first range 303 (or elements corresponding to the first range 303, or referred to as the first layer of elements, for example, elements containing the polka dot pattern in the block diagram shown in Figure 3E) may include elements 310, 311, 312, and 313.

[0114] The element corresponding to the first range 303 is the center of that element and the center of the target element 301. distance between This can be any element around the target element 301 whose distance is less than the first distance threshold. Alternatively, the element corresponding to the first range 303 may be any element other than the target element 301 within the range in which a circle centered on the target element 301 and having radius R1 is located (and through which the circle passes).

[0115] Furthermore, after a period threshold during which scaling is performed on the elements corresponding to the first range 303, the terminal device may perform scaling on the elements within the second range 304 (and through which the second range 304 passes) surrounding the target elements 301 other than the first range 303. The elements within the second range 304 other than the first range 303 (or elements corresponding to the second range 304, or referred to as the second layer of elements, which are, for example, elements containing a grid in the block diagram shown in Figure 3E) may include elements 320, 321, 322, 323, and 324. The elements corresponding to each range are centered on the location of the target element.

[0116] The element corresponding to the second range 304 may be any element around the target element 301 whose distance from its center to the center of the target element 301 is greater than or equal to the first distance threshold and less than the second distance threshold. Alternatively, the element corresponding to the second range 304 may be any element other than those in the first range 303, within the range where a circle with its center on the target element 301 and radius R2 is located, in which case R2 is greater than R1. The elements in the first range 303 may include the elements corresponding to the first range 303 and the target element 301.

[0117] In possible implementations, after a time threshold in which scaling is performed on elements corresponding to the second range 304, the terminal device may perform scaling on elements in the third range 305 (and through which the third range 305 passes) around target elements 301 other than the second range 304 and the first range 303. Elements in the third range 305 other than the second range 304 and the first range 303 (or referred to as elements corresponding to the third range 305, which are, for example, elements containing diagonals in the block diagram shown in Figure 3E) may include elements 330, 331, 332, 333, 334, 335, 336, and 337.

[0118] The element corresponding to the third range 305 may be any element around the target element 301 whose distance between its center and the center of the target element 301 is greater than or equal to the second distance threshold, and less than the third distance threshold. The difference between the third distance threshold and the second distance threshold, and 1 The difference between the distance threshold and the second distance threshold may be the same or different. Alternatively, the element corresponding to the third range 305 may be an element other than the element in the second range 304, within the range where a circle with its center on the target element 301 and radius R3 is located, in which case R3 is greater than R2. The element in the second range 304 may include the target element, the element corresponding to the first range 303, and the element corresponding to the second range 304.

[0119] As indicated in the description within the interface shown in Figure 3E, the time threshold value may be a value such as 50 ms, 60 ms, or 80 ms. This is not limited to this embodiment of the present application.

[0120] Based on the terminal device displaying the interface shown in Figure 3E, the terminal device can sequentially perform scaling on the elements corresponding to the first range 303, the second range 304, and the third range 305 in that order, so that the scaling of any element within any range presents a waveform.

[0121] In possible embodiments, Figures 4A to 4F are schematic diagrams of alternative interfaces in which a ripple effect is triggered, according to embodiments of the present invention.

[0122] The interface shown in Figure 4A may include target element 301 and element 401. When the terminal device receives a press operation performed by the user on target element 301, the terminal device may scale down target element 301 shown in Figure 4A to display the interface shown in Figure 4B.

[0123] In the interface shown in Figure 4B, if a press operation is subsequently performed on the scaled-down target element 301 (or the operation is called a touch-and-hold operation on the target element 301), the terminal device may highlight the target element 301 and display, for example, the interface shown in Figure 4C.

[0124] Furthermore, in the interface shown in Figure 4C, if the press operation is located immediately after the target element 301, the terminal device may display the interface shown in Figure 4D when it receives an operation from the user to drag the target element 301. In the interface shown in Figure 4D, the target element 301 within the interface may remain highlighted, the position of the target element 301 does not extend beyond a specific range centered on the target element 301, and a dashed box is displayed at the starting position where the target element 301 began to be dragged.

[0125] In the interface shown in Figure 4D, when the terminal device receives an operation from the user to drag target element 301 to a specific range (range 400 shown in Figure 4D) centered on element 401, the terminal device first moves element 401, for example, by moving element 401 one icon to the right so that the position of element 401 shown in Figure 4D is reserved for target element 301, and the terminal device displays the interface shown in Figure 4E. In the interface shown in Figure 4E, a dashed box may be displayed at the position where element 401 was located before it was moved.

[0126] Furthermore, if the target element 301 is located in the interface shown in Figure 4E, when the user releases their finger, the terminal device may place the target element 301 in the position of the dashed box and display the interface shown in Figure 4F. In the interface shown in Figure 4F, the highlighting of the target element 301 is canceled, and the target element 301 returns to its display state and size in the interface shown in Figure 4A.

[0127] It can be understood that when a user moves a target element, which changes the position of another element on the home screen, the device may first push aside the element in the target position where the target element might be visible when the user lifts their finger, based on the position of the target element, and then move the target element to the target position when the user lifts their finger.

[0128] In a possible implementation, based on the terminal device displaying the interface shown in Figure 4F, the terminal device may sequentially perform scaling on elements corresponding to ranges centered at the location of the target element, in the order of the first range 303, second range 304, and third range 305 shown in the interface shown in Figure 3E.

[0129] In possible implementations, if the target element is a folder, the terminal device may implement a ripple effect based on the elements within the folder. For example, Figures 5A to 5D are schematic diagrams of interfaces in which a ripple effect is triggered by a folder, according to embodiments of the present invention.

[0130] The terminal device displays the interface shown in Figure 5A. The interface may include a folder 501. When the terminal device receives a trigger operation performed by the user on folder 501, the terminal device may display the interface shown in Figure 5B. The interface shown in Figure 5B may be an interface corresponding to a folder, and the interface may include multiple elements within folder 501, for example, a target element 502. The trigger operation may be a tap operation, a touch-and-hold operation, a voice operation, etc.

[0131] In the interface shown in Figure 5B, if a press operation is performed while the target element 502 is located, the terminal device may display the interface shown in Figure 5C when it receives an operation from the user to drag the target element 502. In the interface shown in Figure 5C, the target element 502 may remain highlighted, and the position of the target element 502 does not exceed a specific range centered on the target element 502, and a dashed box is displayed at the starting position where the target element 502 began to be dragged.

[0132] Furthermore, if the target element 502 is located in the interface shown in Figure 5C, when the user releases their finger, the terminal device may place the target element 501 in the position of the dashed box and display the interface shown in Figure 5D. In the interface shown in Figure 5D, the highlighting of the target element 502 is canceled, and the target element 502 returns to its display state and size in the interface shown in Figure 5B.

[0133] Based on the terminal device displaying the interface shown in Figure 5D, it can be understood that, in the order of the first range 303, second range 304, and third range 305 shown in the interface shown in Figure 3E, the terminal device may sequentially perform scaling on elements in folders corresponding to ranges centered at the location of the target element.

[0134] Based on embodiments corresponding to Figures 3A to 3E (or Figures 4A to 4F or Figures 5A to 5D), the movement of an element corresponding to a first range around the target element (which can alternatively be understood as a first waveform) is used as an example for illustrative purposes. For example, Figures 6A to 6D are schematic diagrams of the interface of a ripple effect according to embodiments of the present application.

[0135] The terminal device displays the interface shown in Figure 6A. The interface shown in Figure 6A is similar to the interfaces shown in Figure 3E and Figure 4F, and further details are not described here. The elements corresponding to the first range 303 in the interface shown in Figure 6A can be displayed at 100% size, and the 100% size elements can be understood as the first state of the elements.

[0136] In the interface shown in Figure 6A, the terminal device can scale down elements corresponding to the first range 303. For example, the terminal device may gradually scale down elements that correspond to the first range 303 and are in the first state, for example, to a value such as 96%, thereby displaying the interface shown in Figure 6B. Elements scaled down to a value such as 96% can be understood as the second state of the element.

[0137] In the process of scaling down the elements corresponding to the first range 303, all elements corresponding to the first range 303 may be scaled down toward the target element 301 (or alternatively, may be understood as being scaled down inward by using the target element 301 as the center), or any one of the elements corresponding to the first range 303 may be scaled down by using that element as the center. The method of scaling down is not particularly limited in this embodiment of the present application.

[0138] In the interface shown in Figure 6B, the terminal device can scale up elements that have been scaled down to correspond to the first range 303. For example, the terminal device may gradually scale up elements that correspond to the first range 303 and are in the second state, for example, to a value such as 103%, thereby displaying the interface shown in Figure 6C. Elements that have been scaled up to a value such as 103% can be understood as the third state of the element.

[0139] In the process of scaling up the elements corresponding to the first range 303, all elements corresponding to the first range 303 may be scaled up in a direction away from the target element 301 (or alternatively, this can be understood as scaling up outward by using the target element 301 as the center), or any one of the elements corresponding to the first range 303 may be scaled up by using that element as the center. The method of scaling up is not particularly limited in this embodiment of the present application.

[0140] Furthermore, in the interface shown in Figure 6C, the terminal device can scale down the scaled-up element corresponding to the first range 303. For example, the terminal device may gradually scale down the element corresponding to the first range 303 and in the third state, for example, to a value such as 100%, thereby causing the terminal device to display the interface shown in Figure 6D, and the element corresponding to the first range 303 to return to the first state.

[0141] Assuming that the elements corresponding to the first range 303 are scaled, it can be understood that the scaling effect of the elements corresponding to the first range 303 is consistent.

[0142] In possible implementations, the terminal device can implement scaling for the element corresponding to the first range 303 based on embodiments corresponding to Figures 6A to 6D, so that after the element corresponding to the first range 303 presents the first waveform, the first waveform is repeatedly displayed, and when some operation by the user on the home screen is received, the display of the waveform ends and the interface shown in Figure 6D is displayed.

[0143] In possible implementations, the terminal device can implement scaling for the element corresponding to the first range 303 based on embodiments corresponding to Figures 6A to 6D, thereby causing the element corresponding to the first range 303 to exhibit a ripple effect. The ripple effect exhibited by the element corresponding to the first range 303 is used only as the ripple effect of the first waveform of the target element 301. Generally, to exhibit a more pronounced ripple effect, the terminal device can set two to three waveforms for the target element 301, which is 1x1 in size, thereby allowing the dynamic effect of multiple waveforms to mimic the diffusion and propagation of ripples on the water surface caused when an object is thrown into water.

[0144] For example, the terminal device may present the ripple effect of a second waveform based on the scaling of the elements corresponding to the second range 304 in the interface shown in Figure 3E, and the ripple effect of a third waveform based on the scaling of the elements corresponding to the third range 305. The display period for any waveform may be a value such as 150 ms. The terminal device may display the second waveform after the first waveform has been displayed for 50 ms, and display the third waveform after the second waveform has been displayed for 50 ms. The waveforms are displayed sequentially so that the dynamic ripple effect can be better presented.

[0145] For details on how the terminal device scales the second and third waveforms, please refer to the description of the embodiments corresponding to Figures 6A to 6D. Further details are not provided here.

[0146] In possible embodiments, to present a clearer ripple effect, the terminal device may set different display periods for the waveforms or set different values ​​for the display time intervals between waveforms. This is not limited to this embodiment of the present application.

[0147] To mimic the phenomenon where ripples on the water's surface gradually diminish when an object is thrown into water, the terminal device may set different scaling ratios for different waveforms. For example, Table 1 is a schematic table of waveform scaling ratios when the target element is 1×1, according to embodiments of the present application. Three waveforms are used as illustrative examples. [Table 1]

[0148] The larger the difference between the waveform scaling down ratio and scaling up ratio (alternatively called the scaling difference), the larger the scaling amplitude and the larger the waveform amplitude. table As shown in 1, the amplitude of the first waveform is larger than the amplitude of the second waveform, and the amplitude of the second waveform is larger than the amplitude of the third waveform, so a dynamic effect is presented in which the waveforms gradually decrease in size.

[0149] In possible embodiments, the waveform scaling values ​​shown in Table 1 are used as an example to illustrate the ripple effect that occurs when a 1x1 target element is placed in the target position. This example does not constitute a limitation of this embodiment of the present application. For example, Figures 7A–7F are schematic diagrams of another interface of the ripple effect according to an embodiment of the present application.

[0150] In embodiments corresponding to Figures 7A to 7F, an example in which the time interval between waveforms is 50 ms and the display period of any waveform is 150 ms is used to illustrate the ripple effect generated for a 1x1 target element.

[0151] Based on the trigger by the terminal device to display the interface shown in Figure 7A, according to embodiments corresponding to Figures 3A to 3E or Figures 4A to 4F, the terminal device may display a ripple effect including multiple waveforms around the target element 301, according to the interfaces shown in Figures 7B to 7F.

[0152] In the interface shown in Figure 7A, the terminal device can scale down the elements corresponding to the first range 303 based on a scaling down ratio of 96% in Table 1, and present the first waveform, thereby allowing the terminal device to display the interface shown in Figure 7B.

[0153] If the time between the interface shown in Figure 7A and the interface shown in Figure 7B is 50 ms, the terminal device may scale down the elements corresponding to the second range 304 in the interface shown in Figure 7B 50 ms after the first waveform is displayed. For example, the terminal device may scale down the elements corresponding to the second range 304 in the table. 1 Based on a scaling down ratio of 98%, the second waveform can be displayed, thereby allowing the terminal device to display the interface shown in Figure 7C. Synchronously, with the interface shown in Figure 7B, the terminal device scales up the scaled-down element corresponding to the first range 303 based on a scaling up ratio of 103% in Table 1, and presents the first waveform, thereby allowing the terminal device to display the interface shown in Figure 7C.

[0154] If the time interval from the interface shown in Figure 7B to the interface shown in Figure 7C is 50 ms, the terminal device may scale down the element corresponding to the third range 305 in the interface shown in Figure 7C 50 ms after the second waveform is displayed. For example, the terminal device may scale down the element corresponding to the third range 305 based on a scaling down ratio of 99.5% in Table 1 and present the third waveform, thereby displaying the interface shown in Figure 7D. Synchronously, in the interface shown in Figure 7C, the terminal device may scale up the scaled-down element corresponding to the second range 304 based on a scaling up ratio of 101% in Table 1 and continue to present the second waveform, thereby displaying the interface shown in Figure 7D. Synchronously, in the interface shown in Figure 7D, the terminal device may scale down the element corresponding to the first range 303, which is scaled up to 103%, to 100%, and continue to present the first waveform, thereby displaying the interface shown in Figure 7D.

[0155] Furthermore, in the interface shown in Figure 7D, the terminal device can scale up the scaled-down element corresponding to the third range 305 based on the scaling-up ratio of 100.5% in Table 1, thereby displaying the interface shown in Figure 7E and continuing to present the third waveform. Synchronously, in the interface shown in Figure 7D, the terminal device can scale down the element corresponding to the second range 304, which is scaled up to 101%, to 100%, and continue to present the second waveform, thereby displaying the interface shown in Figure 7E.

[0156] Furthermore, with the interface shown in Figure 7E, the terminal device can scale down elements corresponding to the third range 305, which are scaled up to 100.5%, to 100%, and continue to present the third waveform, thereby displaying the interface shown in Figure 7F.

[0157] It can be understood that the terminal device, based on embodiments corresponding to Figures 7A to 7F, can display the ripple effect of three waveforms corresponding to a 1x1 target element.

[0158] In a possible implementation, after displaying the three waveforms once, the terminal device may, alternatively, continue to display the three waveforms repeatedly to present the effect of multiple ripples, and then terminate the display of the ripple effect corresponding to the three waveforms upon receiving some action from the user on the home screen, or the terminal device may terminate the display after displaying the three waveforms once.

[0159] Based on this, if a terminal device accidentally touches a target element, it may drag the element to another location. If the target element is returned to its target position, the terminal device generates a ripple effect around the target position so that the user can be notified in a timely manner of the accidentally touched target element.

[0160] Scenario 2: When the target element is a 2x2 card, widget, etc., the terminal device may, upon receiving a user's target operation, perform a scaling operation on the elements around the target element so that a moderate ripple effect (e.g., three or four waveforms are generated around the 2x2 element) is generated on the elements around the target element.

[0161] For example, Figures 8A to 8C are schematic diagrams of yet another interface in which a ripple effect is triggered, according to an embodiment of the present invention.

[0162] The terminal device displays the interface shown in Figure 8A, which may include a card 801 (alternatively referred to as the target element 801).

[0163] In the interface shown in Figure 8A, when the terminal device receives a touch-and-hold operation performed by the user on the target element 801, the terminal device can highlight the target element 801. If a press operation is subsequently performed on the target element 801, the terminal device can display the interface shown in Figure 8B when the terminal device receives a drag operation from the user on the target element 801. In the interface shown in Figure 8B, the target element 801 within the interface may remain highlighted, and a 2x2 dashed box is displayed at the starting position where the target element 801 began to be dragged.

[0164] If the target element 801 is located in the interface shown in Figure 8B, when the terminal device receives a user release operation, the terminal device may place the target element 801 at the dashed box position and display the interface shown in Figure 8C. In the interface shown in Figure 8C, the highlighting of the target element 801 is canceled, and the target element 801 returns to its display state and size as in the interface shown in Figure 8A.

[0165] In the interface shown in Figure 8C, it can be understood that the terminal device may exhibit a ripple effect by sequentially scaling the elements around the target element 801 in an inward-outward direction, using the target element 801 as the center. For example, the terminal device may preferentially scale the elements corresponding to the first range 802, which may include elements 810, 811, 812, 813, 814, and 815.

[0166] After a period of time has elapsed since the scaling process was performed on the elements corresponding to the first range 802, the terminal device may perform the scaling process on the elements corresponding to the second range 803, which may include elements 820, 821, 822, 823, 824, 825, 826, and 827.

[0167] After a period of time has elapsed since the scaling process was performed on the elements corresponding to the second range 803, the terminal device may perform the scaling process on the elements corresponding to the third range 804, which may include elements 830, 831, 832, 833, 834, and 835.

[0168] In a possible implementation, after a time threshold following the scaling process on elements corresponding to the third range 804, the terminal device may perform the scaling process on elements corresponding to the fourth range 805, which may include elements 840 and 841. Elements 840 and 841 may be elements within a dock bar.

[0169] For definitions of the first, second, and third ranges in the embodiments corresponding to Figures 8A to 8C, it should be understood that one should refer to the description of the embodiments corresponding to Figures 3A to 3E. The first range 802 in the embodiments corresponding to Figures 8A to 8C may be broader than the first range 303 in the embodiments corresponding to Figures 3A to 3E. The second range 803 in the embodiments corresponding to Figures 8A to 8C may be broader than the second range 304 in the embodiments corresponding to Figures 3A to 3E. The third range 804 in the embodiments corresponding to Figures 8A to 8C may be broader than the third range 305 in the embodiments corresponding to Figures 3A to 3E.

[0170] For the process by which the terminal device scales any element around a 2x2 target element, it should be understood that one should refer to the description of the embodiments corresponding to Figures 6A to 6D. Further details are not provided here.

[0171] Because the size of the target element 801 is relatively large, the terminal device sets different scaling ratios for different waveforms of the 2x2 target element to mimic the dynamic effect that occurs when objects of different sizes are thrown into water, where the larger the surface area and mass of the object, the wider the range of ripples formed and the larger the amplitude of the waveform. For example, Table 2 is a schematic table of waveform scaling ratios when the target element is 2x2 according to an embodiment of the present invention. Four waveforms are used as illustrative examples. [Table 2]

[0172] For both the waveforms in Table 1 and Table 2, the scaling difference of the first waveform for the 1x1 target element in Table 1 may be 7%, and the scaling difference of the first waveform for the 2x2 target element in Table 2 may be 9%. Therefore, the larger the size of the target element, the larger the amplitude of the waveform and the greater the number of waveforms.

[0173] Based on this, the terminal device may accidentally drag the target element to another location when it is accidentally touched. If the target element is returned to its target position, the terminal device generates a ripple effect around the target position so that the user can be notified in a timely manner of the accidentally touched target element. Furthermore, the larger the size of the target element, the more pronounced the amplitude of the waveform in the ripple effect becomes.

[0174] In possible implementations, if the 2x2 target elements are album icons for a gallery application, the terminal device may implement a ripple effect based on the album icons. For example, Figures 9A to 9F are schematic diagrams of interfaces in which a ripple effect is triggered based on album icons, according to embodiments of the present invention.

[0175] When a terminal device receives an operation from a user to open the gallery application, the terminal device may display the interface shown in Figure 9A. The interface may include a text box used to search for albums, a control used to create albums, a control used to view other functions within the camera application, a control used to view photos, a control used to view albums (when the control used to view albums is selected), a control used to view photos based on a time dimension, a control used to view photos based on an album category, and multiple albums. Albums may include a camera album with 20 images, an all-photos album with 110 images, a video album with 12 videos, a screenshot album with 22 images, a favorites album 901 (alternatively called subject element 901) with 25 images, a dog album with 22 images, a mobile-to-mobile-share album with 12 images, and a landscape album with 22 images.

[0176] In the interface shown in Figure 9A, when the terminal device receives a touch-and-hold operation performed by the user on the target element 901, the terminal device may highlight the target element 901. If a press operation is followed by a drag operation on the target element 901, the terminal device may display the interface shown in Figure 9B. In the interface shown in Figure 9B, the target element 901 within the interface may remain highlighted, and a dashed box is displayed at the starting position where the target element 901 began to be dragged.

[0177] If the target element 901 is located in the interface shown in Figure 9B, when the terminal device receives a user release operation, the terminal device may place the target element 901 at the dashed box position and display the interface shown in Figure 9C. In the interface shown in Figure 9C, the highlighting of the target element 901 is canceled, and the target element 901 returns to its display state and size as in the interface shown in Figure 9A.

[0178] Based on the interface shown in Figure 9C, the terminal device can separately scale elements corresponding to the first range 902, elements corresponding to the second range 903, etc., around the target element 901, so that the album icons in the interface shown in Figure 9C may exhibit a ripple effect around the target element 901.

[0179] For example, in the interface shown in Figure 9C, the terminal device can scale down the element corresponding to the first range 902, thereby displaying the interface shown in Figure 9D. Furthermore, in the interface shown in Figure 9D, the terminal device can scale up the scaled-down element corresponding to the first range 902, thereby displaying the interface shown in Figure 9E. Furthermore, in the interface shown in Figure 9E, the scaled-up element corresponding to the first range 902 is scaled down, thereby displaying the interface shown in Figure 9F, and the element is returned to its original size as the element corresponding to the first range 902 in the interface shown in Figure 9A.

[0180] Furthermore, 50 ms after scaling has been performed on the elements corresponding to the first range 902, the terminal device may perform scaling on the elements corresponding to the second range 903. For further details on the method used by the terminal device to perform scaling on the elements corresponding to the second range 903, please refer to the descriptions of the interfaces shown in Figures 9C through 9F. Further details are not provided here.

[0181] It can be understood that each element corresponding to the first range 902 in the embodiments corresponding to Figures 9A to 9F is an element with a size of 2 × 2. Therefore, the number of elements affected in the scaling process may differ from the number of elements corresponding to the first range 802 in the interface shown in Figure 8C. Furthermore, depending on the size of each element in the embodiments corresponding to Figures 9A to 9F, it is also possible to form only two waveforms around the target element with a size of 2 × 2 in the interface shown in Figure 9C.

[0182] It can be understood that the size of the first range 902 may be the same as the size of the first range 802, and the size of the second range 903 may be the same as the size of the second range 803.

[0183] In possible implementations, if the 2x2 target elements are photo icons in a gallery application, the terminal device may implement a ripple effect based on the photo icons, the ripple effect being similar to the ripple effect of album icons in embodiments corresponding to Figures 9A to 9F, details of which are not described again here.

[0184] Scenario 3: When the size of the target element is a 2x4 card, card set, widget, etc., the terminal device may, upon receiving a target operation from the user, perform a scaling operation on the elements around the target element so that a relatively large range of ripple effects (e.g., four or five waveforms are generated around the 2x4 element) are generated on the elements around the target element.

[0185] For example, Figures 10A to 10C are schematic diagrams of yet another interface in which a ripple effect is triggered, according to an embodiment of the present invention.

[0186] The terminal device displays the interface shown in Figure 10A, which may include a card 1001 (alternatively referred to as the target element 1001).

[0187] In the interface shown in Figure 10A, when the terminal device receives a touch-and-hold operation performed by the user on the target element 1001, the terminal device may highlight the target element 1001. If a press operation is subsequently performed on the target element 1001, when the terminal device receives a drag operation from the user on the target element 1001, the terminal device may display the interface shown in Figure 10B. In the interface shown in Figure 10B, the target element 1001 within the interface may remain highlighted, and a 2x4 dashed box is displayed at the starting position where the target element 1001 began to be dragged.

[0188] If the target element 1001 is located in the interface shown in Figure 10B, when the terminal device receives a user release operation, the terminal device may place the target element 1001 at the dashed box position and display the interface shown in Figure 10C. In the interface shown in Figure 10C, the highlighting of the target element 1001 is canceled, and the target element 1001 returns to its display state and size as in the interface shown in Figure 10A.

[0189] In the interface shown in Figure 10C, the terminal device can exhibit a ripple effect by sequentially scaling elements around the target element 1001 in an inward-outward direction, using the target element 1001 as the center. For example, the terminal device may preferentially scale elements corresponding to a first range 1002, which may include elements 1010, 1011, 1012, 1013, 1014, 1015, 1016, and 1017.

[0190] After a certain period of time has elapsed since the scaling process was performed on the elements corresponding to the first range 1002, the terminal device may perform the scaling process on the elements corresponding to the second range 1003, which may include elements 1020, 1021, 1022, 1023, 1024, 1025, 1026, and 1027.

[0191] After a certain period has elapsed since the scaling process was performed on the elements corresponding to the second range 1003, the terminal device may perform the scaling process on the elements corresponding to the third range 1004, which may include elements 1030, 1031, 1032, and 1033. Elements 1030, 1031, 1032, and 1033 may all be elements within the dock bar.

[0192] It can be understood that the first range 1002, the second range 1003, and the third range 1004 may form three waveforms. In possible embodiments, the terminal device may alternatively set five waveforms for a 2x4 element of interest. For example, Table 3 is a schematic table of waveform scaling ratios when the element of interest is 2x4 according to embodiments of the present application. Five waveforms are used as illustrative examples. [Table 3]

[0193] For all the waveforms in Tables 1, 2, and 3, the scaling difference of the first waveform for a 1x1 target element in Table 1 may be 7%, the scaling difference of the first waveform for a 2x2 target element in Table 2 may be 9%, and the scaling difference of the first waveform for a 2x4 target element in Table 3 may be 12%. Therefore, the larger the size of the target element, the larger the amplitude of the waveform.

[0194] It should be understood that the waveform scaling values ​​in Tables 1, 2, and 3 are merely examples and do not constitute a limitation to this embodiment of the present application.

[0195] Based on this, the terminal device may accidentally drag the target element to another location when it is accidentally touched. If the target element is returned to its target position, the terminal device generates a ripple effect around the target position so that the user can be notified in a timely manner of the accidentally touched target element. Furthermore, the larger the size of the target element, the more pronounced the amplitude of the waveform in the ripple effect becomes.

[0196] In possible implementations, if the 2x4 target elements are album icons in a gallery application, the terminal device may implement a ripple effect based on the album icons. For example, Figures 11A to 11F are schematic diagrams of interfaces in which a ripple effect is triggered based on album icons, according to embodiments of the present invention.

[0197] The terminal device displays the interface shown in Figure 11A, and the interface may be a different display style for the album. The interface displays a camera album containing 20 photos (alternatively, the target element). 1101 This may include a mobile phone-to-mobile sharing album containing 12 images and a landscape album containing 22 images. For other content displayed on the interface, please refer to the interface description shown in Figure 9A. Further details are not provided here. The size of both the mobile phone-to-mobile sharing album and the landscape album may be 2x3.

[0198] In the interface shown in Figure 11A, when the terminal device receives a touch-and-hold operation performed by the user on the target element 1101, the terminal device may highlight the target element 1101. If a press operation is followed by a drag operation on the target element 1101, the terminal device may display the interface shown in Figure 11B. In the interface shown in Figure 11B, the target element 1101 within the interface may remain highlighted, and a dashed box is displayed at the starting position of the target element 1101.

[0199] If the target element 1101 is located in the interface shown in Figure 11B, when the terminal device receives a user release operation, the terminal device may place the target element 1101 at the dashed box position and display the interface shown in Figure 11C. In the interface shown in Figure 11C, the highlighting of the target element 1101 is canceled, and the target element 1101 returns to its display state and size as in the interface shown in Figure 11A.

[0200] Based on the interface shown in Figure 11C, the terminal device can scale the elements corresponding to the first range 1102 around the target element 1101, so that the album icons in the interface shown in Figure 11C may exhibit a ripple effect around the target element 1101. For example, in the interface shown in Figure 11C, the terminal device can scale down the elements corresponding to the first range 1102, thereby displaying the interface shown in Figure 11D. Furthermore, in the interface shown in Figure 11D, the terminal device can scale up the scaled-down elements corresponding to the first range 1102, thereby displaying the interface shown in Figure 11E. Furthermore, in the interface shown in Figure 11E, the terminal device can scale down the scaled-up elements corresponding to the first range 1102, thereby displaying the interface shown in Figure 11F, where the elements are returned to their original size relative to the elements corresponding to the first range 1102. The elements corresponding to the first range 1102 may be mobile phone-to-mobile sharing albums and landscape albums.

[0201] It can be understood that each element corresponding to the first range 1102 in the embodiments corresponding to Figures 11A to 11F is an element with a size of 2 × 3. Therefore, the number of elements affected in the scaling process may differ from the number of elements corresponding to the first range 1002 in the interface shown in Figure 10C, and the size of the first range 1102 may be the same as the size of the first range 1002. Furthermore, another element with a size of 2 × 3 surrounding the target element 1101 in the embodiments corresponding to Figures 11A to 11F allows an element with a size of 2 × 4 in the interface shown in Figure 11C to form a single waveform.

[0202] It can be understood that the interface display method provided in the embodiments of the present application may be applied not only to scenarios such as a home screen, folder, or album, but also to other scenarios involving multiple elements. This is not limited to the embodiments of the present application.

[0203] It should be understood that the interfaces described in the embodiments of this application are merely examples and do not constitute limitations on the embodiments of this application.

[0204] The method provided in the embodiments of the present application has been described above with reference to Figures 3A to 3E to 11A to 11F. Apparatus for carrying out the method in the embodiments of the present application is described below. Figure 12 is a schematic diagram of the structure of an interface display device according to the embodiments of the present application. The interface display device may be a terminal device in the embodiments of the present application, or a chip or chip system within a terminal device.

[0205] As shown in Figure 12, the interface display device 1200 may be applied to a communication device, circuit, hardware component, or chip, and the interface display device includes a display unit 1201 and a processing unit 1202. The display unit 1201 is configured to support display steps performed by the interface display device 1200. The processing unit 1202 is configured to assist the interface display device 1200 in performing information processing steps.

[0206] Specifically, embodiments of the present invention provide an interface display device 1200. The interface display device includes a processing unit 1202 and a display unit 1201. The display unit 1201 is configured to display a first interface, the first interface comprising a plurality of elements. The processing unit 1202 is configured to receive a first operation on a target element among the plurality of elements. In response to the first operation, the processing unit 1202 is configured to move the target element from a first position to a second position. The display unit 1201 is configured to scale down and / or scale up a first layer of elements around the second position among the plurality of elements for display.

[0207] In a possible implementation, the display unit 1201 is further configured to scale down and / or scale up for display of a second layer of elements around a second position among a group of elements. The second layer and the first layer of elements are all elements centered around the second position, and the second layer of elements are elements outside the first layer of elements.

[0208] In a possible implementation, the display unit 1201 is specifically configured to scale down and / or scale up a second layer of an element for display after a first time threshold has elapsed since the first layer of the element was scaled down and / or scaled up for display.

[0209] In a possible implementation, the scaling ratio at which the second layer of an element is scaled down for display is greater than the scaling ratio at which the first layer of the element is scaled down for display, and the scaling ratio at which the second layer of the element is scaled up for display is less than the scaling ratio at which the first layer of the element is scaled up for display.

[0210] In a possible implementation, the display unit 1201 is further configured to scale down and / or scale up for display the Nth layer of elements around a second position among a plurality of elements, where the Nth layer and the second layer of elements are all elements centered on the second position, and the Nth layer of elements is an element outside the second layer of elements, where N is greater than 2.

[0211] In a possible implementation, if the Mth layer of elements contains elements within a dock bar, the display unit is further configured to scale down and / or scale up the elements within the dock bar for display, where M is less than or equal to N.

[0212] In a possible implementation, the scaling ratio at which the Nth layer of an element is scaled down for display is greater than the scaling ratio at which the second layer of the element is scaled down for display, and the scaling ratio at which the Nth layer of an element is scaled up for display is less than the scaling ratio at which the second layer of the element is scaled up for display.

[0213] In a possible implementation, the processing unit 1202 is specifically configured to scale down the first layer of an element at a first time point, and the display unit 1201 is specifically configured to display the scaled-down first layer of the element. At a second time point, the processing unit 1202 is specifically configured to scale up the scaled-down first layer of the element, and the display unit 1201 displays the scaled-up first layer of the element. At a third time point, the scaled-up first layer of the element is specifically configured to scale down and display the first layer of the element.

[0214] In a possible implementation, the size of the first layer of a scaled-down element is smaller than the size of the first layer of the original element, and the size of the first layer of a scaled-up element is larger than the size of the first layer of the original element.

[0215] In a possible implementation, the display unit 1201 is specifically configured to scale down inward and / or scale up outward by using the second position as the center for displaying the first layer of elements around the second position among a plurality of elements.

[0216] In possible implementations, in response to a first operation, the processing unit 1202 is specifically configured to scale down the target element, and the display unit 1201 is specifically configured to display the scaled-down target element. If the first operation acts sequentially on the target element, the processing unit 1202 is specifically configured to scale up the scaled-down target element, and the display unit 1201 is specifically configured to display the scaled-up target element. The processing unit 1202 is specifically configured to move the scaled-up target element from a first position to a second position.

[0217] In a possible implementation, if the terminal device determines that the first element is located at the second position during the process of moving the scaled-up target element from the first position to the second position, the processing unit 1202 is specifically configured to move the first element to the third position and move the scaled-up target element from the first position to the second position.

[0218] In possible implementations, the size of the target element is positively correlated with the number of layers surrounding the second position among multiple elements.

[0219] In possible implementations, the size of the target element is positively correlated with the extent covered by the first layer.

[0220] In a possible implementation, the target element is an element within a folder, the processing unit 1202 is specifically configured to receive a second operation on the folder, and in response to the second operation, the display unit 1201 is specifically configured to display a first interface.

[0221] In possible implementations, the elements include application icons, cards, widgets, folders, card sets, image icons, or album icons. In possible implementations, the interface display device 1200 may also include a communication unit 1203. Specifically, the communication unit is configured to assist the interface display device 1200 in performing data transmission and data reception steps. For example, the communication unit 1203 may be an input or output interface, pins, circuitry, etc.

[0222] In possible implementations, the interface display device may further include a storage unit 1204. The processing unit 1202 and the storage unit 1204 are connected to each other by the use of lines. The storage unit 1204 may include one or more memories, which may be one or more components located in a device or circuit and configured to store programs or data. The storage unit 1204 may exist independently and be connected to the processing unit 1202 of the interface display device by the use of communication lines. Alternatively, the storage unit 1204 may be incorporated into the processing unit 1202.

[0223] The storage unit 1204 can store computer-executable instructions for a method in a terminal device, thereby allowing the processing unit 1202 to execute the method of the above embodiment. The storage unit 1204 may be a register, cache, RAM, etc., and may be incorporated into the processing unit 1202. The storage unit 1204 may be a read-only memory (ROM) or other type of static storage device capable of storing static information and instructions. The storage unit 1204 may be independent of the processing unit 1202.

[0224] Figure 13 is a schematic diagram of the hardware structure of another terminal device according to an embodiment of the present invention. As shown in Figure 13, the terminal device includes a processor 1301, a communication line 1304, and at least one communication interface (communication interface 1303 is used as an example for illustrative purposes in Figure 13).

[0225] The processor 1301 may be a general-purpose central processing interface (CPU), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits that control program execution in the solution of the present invention.

[0226] The communication line 1304 may include a circuit for transmitting information between the above components.

[0227] The communication interface 1303 communicates with other devices or communication networks such as Ethernet or a wireless local area network (WLAN) using any device such as a transceiver.

[0228] Depending on the circumstances, the terminal device may also include memory 1302.

[0229] Memory 1302 may be, but is not limited to, read-only memory (ROM) or other types of static storage devices capable of storing static information and instructions, random access memory (RAM) or other types of dynamic storage devices capable of storing information and instructions, electrically erasable programmable read-only memory (EEPROM), compact disc read-only memory (CD-ROM) or other optical disc memory, compact disc memory (compact disc, laser disc, optical disc, digital versatile disc, Blu-ray disc, etc.), magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to transport or store desired program code in the form of instructions or data structures and that can be accessed by a computer. Memory may be independent or connected to the processor using communication line 1304. Alternatively, memory may be integrated into the processor.

[0230] Memory 1302 is configured to store computer-executable instructions for performing the solution of the present invention, and the processor 1301 controls the execution. The processor 1301 is configured to execute the computer-executable instructions stored in memory 1302 to implement the interface display method provided in the embodiments of the present invention.

[0231] In some cases, the computer executable instructions of this embodiment of the present application may also be called application program code. This is not particularly limited in the embodiments of the present application.

[0232] In a specific implementation, the processor 1301 may include one or more CPUs, such as CPU0 and CPU1 in Figure 13.

[0233] In a specific implementation, the terminal device may include multiple processors, such as processors 1301 and 1305 in Figure 13. Each of these processors may be a single-core (single-CPU) processor or a multi-core (multi-CPU) processor. A processor here may be one or more devices, circuits, and / or processing cores configured to process data (e.g., computer program instructions).

[0234] A computer program product includes one or more computer instructions. When a computer program instruction is loaded and executed on a computer, all or part of a procedure or function according to embodiments of the present application is generated. The computer may be a general-purpose computer, a dedicated computer, a computer network, or other programmable device. Computer instructions may be stored on a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center by wired means (e.g., coaxial cable, optical fiber, or digital subscriber line (DSL)) or wireless means (e.g., infrared, radio waves, or microwaves). The computer-readable storage medium may be any available medium accessible to a computer, or a data storage device such as a server or data center incorporating one or more available media. For example, available media may include magnetic media (e.g., floppy disks, hard disks, or magnetic tapes), optical media (e.g., digital versatile discs (DVDs)), semiconductor media (e.g., solid state disks (SSDs)), and so on.

[0235] Embodiments of the present invention further provide a computer-readable storage medium. The methods described in the above embodiments may be fully or partially implemented using software, hardware, firmware, or any combination thereof. The computer-readable medium may include computer storage media and communication media, and may further include any medium that enables a computer to be transmitted from one place to another. The storage medium may be any target medium that a computer can access.

[0236] In possible designs, computer-readable media may include compact disc read-only memory (CD-ROM), RAM, ROM, EEPROM, or other optical disc memory, or computer-readable media may include magnetic disk memory or other magnetic disk storage devices. Furthermore, any connection line may appropriately be referred to as computer-readable media. For example, when software is transmitted from a website, server, or other remote source using coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technology (e.g., infrared, radio waves, and microwaves), coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technology such as infrared, radio waves, and microwaves are included in the definition of media. As used herein, magnetic disks and optical disks include compact discs (CDs), laserdiscs, optical discs, digital versatile discs (DVDs), floppy disks, and Blu-ray discs. Magnetic disks typically reproduce data magnetically, while optical disks reproduce data optically using lasers.

[0237] The above combinations should also be included within the scope of computer-readable media. The above description is merely a specific implementation of the present invention. However, the scope of protection of the present invention is not limited thereto. Any modification or substitution that a person skilled in the art can easily conceive within the scope of the art disclosed in the present invention should fall within the scope of protection of the present invention. Accordingly, the scope of protection of the present invention should be subject to the scope of protection of the claims.

[0238] This application claims priority to Chinese Patent Application No. 202210764666.9, filed with the China National Intellectual Property Administration on June 30, 2022, with the title of the invention "INTERFACE DISPLAY METHOD AND APPARATUS," and the full text of this Chinese Patent Application is incorporated herein by reference.

Claims

1. An interface display method, The terminal device displays a first interface, and the first interface has multiple elements. The terminal device receives a first operation on the target element among the plurality of elements, The terminal device moves the target element from the first position to the second position in response to the first operation. The terminal device scales down and / or up the first layer of the elements around the second position among the plurality of elements. After a first time threshold following the terminal device scaling down and / or scaling up the first layer of the element for display, the terminal device scales down and / or scales up the second layer of the element around the second position among the plurality of elements for display. It has, The second layer and the first layer of the element are all elements centered on the second position, and the second layer of the element is an element located outside the first layer of the element. The aforementioned terminal device can scale down and / or up the first layer of the elements around the second position among the plurality of elements, The terminal device scales down the first layer of the element at a first time point and displays the first layer of the scaled-down element. The terminal device scales up the first layer of the scaled-down element at a second time point and displays the first layer of the scaled-up element. The terminal device scales down the first layer of the scaled-up element at the third time point and displays the first layer of the element. A method having

2. The scaling ratio at which the second layer of the element is scaled down for display is greater than the scaling ratio at which the first layer of the element is scaled down for display. The scaling ratio at which the second layer of the element is scaled up for display is smaller than the scaling ratio at which the first layer of the element is scaled up for display. The method according to claim 1.

3. The aforementioned method, The terminal device further comprises scaling down and / or scaling up the Nth layer of elements around the second position among the plurality of elements for display. The Nth layer and the second layer of the element are all elements centered on the second position, the Nth layer of the element is an element outside the second layer of the element, and N is greater than 2. The method according to claim 1.

4. The aforementioned method, If the Mth layer of an element includes an element in a dock bar, the terminal device further scales down and / or up the element in the dock bar for display. M is less than or equal to N. The method according to claim 3.

5. The scaling ratio at which the Nth layer of the element is scaled down for display is greater than the scaling ratio at which the second layer of the element is scaled down for display. The scaling ratio at which the Nth layer of the element is scaled up for display is smaller than the scaling ratio at which the second layer of the element is scaled up for display. The method according to claim 3.

6. The size of the first layer of the scaled-down element is smaller than the size of the first layer of the element. The size of the first layer of the scaled-up element is larger than the size of the first layer of the element. The method according to claim 1.

7. The aforementioned terminal device can scale down and / or up the first layer of the elements around the second position among the plurality of elements, The terminal device has the ability to scale down inward and / or scale up outward by using the second position as the center for displaying the first layer of the elements around the second position among the plurality of elements. The method according to claim 1.

8. As described above, the terminal device moves the target element from the first position to the second position in response to the first operation. In response to the first operation, the terminal device scales down the target element and displays the scaled-down target element. If the first operation is performed continuously on the target element, the terminal device shall scale up the scaled-down target element and display the scaled-up target element. The terminal device moves the scaled-up target element from the first position to the second position. Having, The method according to any one of claims 1 to 5.

9. As described above, moving the scaled-up target element from the first position to the second position using the terminal device is: If, during the process of the terminal device moving the scaled-up target element from the first position to the second position, it is determined that the first element is present at the second position, the terminal device moves the first element to the third position and moves the scaled-up target element from the first position to the second position. The method according to claim 8.

10. The size of the target element is positively correlated with the number of layers around the second position among the multiple elements, and the size of the target element is positively correlated with the range covered by the first layer. The method according to any one of claims 1 to 5.

11. The aforementioned target element is an element within a folder, and the method is, The terminal device further includes receiving a second operation on the folder, The display of the first interface by the terminal device as described above includes the display of the first interface by the terminal device in response to the second operation. The method according to any one of claims 1 to 5.

12. The aforementioned target element includes an application icon, card, widget, folder, card set, image icon, or album icon. The method according to any one of claims 1 to 5.

13. A terminal device having one or more processors, one or more memory modules, and a module on which multiple applications are installed, The memory stores one or more programs, and when the one or more programs are executed by the processor, the terminal device A step of displaying a first interface, wherein the first interface has multiple elements, The steps include receiving a first operation on the target element among the aforementioned plurality of elements, In response to the first operation, the step of moving the target element from a first position to a second position, The steps include scaling down and / or scaling up the first layer of the elements around the second position among the plurality of elements, The steps include: a first time threshold after the terminal device has scaled down and / or up the first layer of the element for display, the second layer of the element around the second position among the plurality of elements for display; It is possible to do this, The second layer and the first layer of the element are all elements centered on the second position, and the second layer of the element is an element located outside the first layer of the element. When scaling down and / or scaling up the first layer of the element around the second position among the plurality of elements, the terminal device The first step is to scale down the first layer of the element at the first point in time and display the first layer of the scaled-down element, The second step is to scale up the first layer of the scaled-down element at a second point in time and display the first layer of the scaled-up element, The third step is to scale down the first layer of the scaled-up element and display the first layer of the element. A terminal device capable of performing the following actions.

14. When executed by a processor, the processor: The first interface is to be displayed, and the first interface has multiple elements. Receiving a first operation on the target element among the aforementioned multiple elements, In response to the first operation, the target element is moved from the first position to the second position, The first layer of the elements surrounding the second position among the plurality of elements is scaled down and / or scaled up. After a first time threshold has evolved, the second layer of the elements around the second position among the plurality of elements is scaled down and / or scaled up for display. Having a computer program that causes an action to be performed, The second layer and the first layer of the element are all elements centered on the second position, and the second layer of the element is an element located outside the first layer of the element. When scaling down and / or scaling up the first layer of the elements around the second position among the plurality of elements, the processor: At the first point in time, the first layer of the element is scaled down, and the first layer of the scaled-down element is displayed. At the second point in time, the first layer of the scaled-down element is scaled up, and the first layer of the scaled-up element is displayed. At the third point in time, the first layer of the scaled-up element is scaled down, and the first layer of the element is displayed. A computer-readable storage medium that can perform operations including [specific actions].

Images