WO2024001592A1 - 界面显示方法和装置 - Google Patents

界面显示方法和装置 Download PDF

Info

Publication number
WO2024001592A1
WO2024001592A1 PCT/CN2023/094895 CN2023094895W WO2024001592A1 WO 2024001592 A1 WO2024001592 A1 WO 2024001592A1 CN 2023094895 W CN2023094895 W CN 2023094895W WO 2024001592 A1 WO2024001592 A1 WO 2024001592A1
Authority
WO
WIPO (PCT)
Prior art keywords
terminal device
elements
target element
layer
display
Prior art date
Application number
PCT/CN2023/094895
Other languages
English (en)
French (fr)
Other versions
WO2024001592A9 (zh
Inventor
熊棉
尤永先
杨华
Original Assignee
荣耀终端有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 荣耀终端有限公司 filed Critical 荣耀终端有限公司
Priority to EP23829778.2A priority Critical patent/EP4394572A1/en
Publication of WO2024001592A1 publication Critical patent/WO2024001592A1/zh
Publication of WO2024001592A9 publication Critical patent/WO2024001592A9/zh

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486Drag-and-drop
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048Indexing scheme relating to G06F3/048
    • G06F2203/04806Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Definitions

  • the present application relates to the field of terminal technology, and in particular, to an interface display method and device.
  • the terminal device can quickly drag or move the element in response to the user's accidental touch operation, so that the user may not be able to detect in time the element that was moved by the accidental touch.
  • Embodiments of the present application provide an interface display method and device.
  • a terminal device detects that a target element is placed at a target location, it can generate a ripple effect around the target element, so that the user can promptly detect the target element that may move.
  • embodiments of the present application provide an interface display method.
  • the method includes: a terminal device displays a first interface; the first interface includes multiple elements; the terminal device receives a first operation for a target element among the multiple elements; and responds to In the first operation, the terminal device moves the target element from the first position to the second position; the terminal device performs reduced display and/or enlarged display of the first layer elements surrounding the second position among the plurality of elements.
  • the terminal device detects that the target element is placed at the target location, it can generate a ripple effect around the target element, so that the user can promptly detect the target element that may move.
  • the first position may be the starting position of the target element, and the second position may be the position where the target element generates ripples, or may be understood as the target position described in the embodiments of this application; the first position and the second position may be the same or Can be different.
  • the first operation may be the target operation described in the embodiment of this application.
  • the method further includes: the terminal device performs reduced display and/or enlarged display of second-layer elements surrounding the second position among the plurality of elements; wherein both the second-layer elements and the first-layer elements are It is an element centered on the second position, and the second-level elements are the elements outside the first-level elements.
  • the terminal device can form a ripple effect with two layers of ripples around the target element based on the fluctuation of the first layer element and the second layer element, so that the user can detect the target element that may move in time.
  • the first-level elements may be elements corresponding to the first scope described in the embodiments of this application, and the second-level elements may be elements corresponding to the second scope described in the embodiments of this application.
  • the terminal device performs reduced display and/or enlarged display of the second-layer elements surrounding the second position among the plurality of elements, including: performing reduced display and/or enlarged display of the first-layer elements on the terminal device. magnify After the first time threshold is displayed, the terminal device performs reduced display and/or enlarged display of the second layer elements. In this way, the terminal device can execute the fluctuation of the second layer element after a period of time threshold of the fluctuation of the first layer element. Through the time difference between the fluctuation of the two layer elements, an effect similar to water ripples is formed, making the ripple effect more vivid.
  • the value of the first time threshold may be 50 ms or other values.
  • the reduction ratio of the second layer elements when they are reduced and displayed is greater than the reduction ratio of the first layer elements when they are reduced and displayed, and the magnification ratio of the second layer elements when they are enlarged and displayed is smaller than the enlargement ratio of the first layer elements when they are enlarged and displayed. proportion.
  • the terminal device can display a dynamic effect of successive attenuation of the waveform by adjusting the scaling ratio of elements in different layers, making the ripple effect more vivid.
  • the method further includes: the terminal device performs reduced display and/or enlarged display of the Nth layer element surrounding the second position among the multiple elements; wherein the Nth layer element and the second layer element both is the element centered at the second position, the Nth level element is the element outside the second level element, and N is greater than 2.
  • the terminal device can form a ripple effect with N layers of ripples around the target element based on N layers of elements, so that the user can detect the target element that may move in time.
  • the method also includes: when the M-th layer element includes elements in the dock bar, the terminal device performs reduced display and/or enlarged display of the elements in the dock bar; M is less than or equal to N. In this way, when the Mth layer elements include elements in the dock bar, the terminal device can also realize zoom display of the elements in the dock bar, so that the elements in the dock bar can also show a ripple effect.
  • the reduction ratio of the Nth layer element when it is reduced and displayed is greater than the reduction ratio of the second layer element when it is reduced and displayed, and the Nth layer element's enlargement ratio when it is enlarged and displayed is smaller than the enlargement ratio of the second layer element when it is enlarged and displayed. proportion.
  • the terminal device can display a dynamic effect of successive attenuation of the waveform by adjusting the scaling ratio of elements in different layers, making the ripple effect more vivid.
  • the terminal device performs reduced display and/or enlarged display of the first-layer elements surrounding the second position among the multiple elements, including: the terminal device reduces the first-layer elements at the first moment, and display the reduced first-layer elements; the terminal device enlarges the reduced first-layer elements at the second moment, and displays the enlarged first-layer elements; the terminal device reduces the enlarged first-layer elements at the third moment, and display the first level elements.
  • the terminal device can scale the first-layer elements by first reducing and then enlarging the image, and then further reducing the image, so that the first-layer elements present a dynamic effect.
  • the size of the reduced first-layer element is smaller than the size of the first-layer element, and the size of the enlarged first-layer element is greater than the size of the first-layer element.
  • the terminal device performs reduced display and/or enlarged display of the first layer element surrounding the second position among the multiple elements, including: the terminal device displays the first layer element surrounding the second position among the multiple elements.
  • the terminal device in response to the first operation, moves the target element from the first position to the second position, including: in response to the first operation, the terminal device shrinks the target element and displays the reduced Target element; when the first operation continues to act on the target element, the terminal device enlarges the reduced target element and displays the enlarged target element; the terminal device moves the enlarged target element from the first position to the second position.
  • the terminal device can respond to the target element when receiving the first device that the user triggers on the target element. Zoom out and zoom in so that the user can detect the triggering target element.
  • the terminal device moves the amplified target element from the first position to the second position, including: in the process of the terminal device moving the amplified target element from the first position to the second position, determining When the first element exists at the second position, the terminal device moves the first element to the third position, and moves the enlarged target element from the first position to the second position. In this way, when the terminal device determines that an element exists at the second position, it can move the element to another position, and trigger the ripple effect when the target element moves to the second position.
  • the size of the target element is positively related to the number of layers surrounding the second position in the plurality of elements.
  • the terminal device can show more ripples when the size of the target element is larger, simulating that when objects of different sizes are thrown into the water, the larger the area and mass of the object, the larger the range of ripples formed and the greater the amplitude of the waveform. Great dynamic effects.
  • the size of the target element is positively related to the range covered by the first layer.
  • the terminal device can display larger ripples when the size of the target element is larger, simulating the effect that when objects of different sizes are thrown into the water, the larger the area and mass of the object, the larger the waveform range will be.
  • the target element is an element in the folder
  • the method also includes: the terminal device receives a second operation for the folder; the terminal device displays the first interface, including: in response to the second operation, the terminal device Display the first interface.
  • the terminal device can realize a ripple effect in the folder based on triggering the target element in the folder when there are multiple elements in the folder.
  • the target element includes: application icon, card, widget, folder, card set, image icon, or album icon.
  • inventions of the present application provide an interface display device.
  • the interface display device includes a processing unit and a display unit.
  • the display unit is used to display a first interface; the first interface includes multiple elements; and the processing unit is used to receive a a first operation on a target element among the plurality of elements; in response to the first operation, a processing unit for moving the target element from a first position to a second position; a display unit for moving the target element among the plurality of elements around the second position
  • First-level elements perform reduced display and/or enlarged display.
  • the display unit is also used to perform reduced display and/or enlarged display of second-layer elements surrounding the second position among the plurality of elements; wherein both the second-layer elements and the first-layer elements are It is an element centered on the second position, and the second-level elements are the elements outside the first-level elements.
  • the display unit is specifically configured to perform reduced display and/or enlarged display of the second layer elements after a first time threshold of performing reduced display and/or enlarged display of the first layer elements.
  • the reduction ratio of the second layer elements when they are reduced and displayed is greater than the reduction ratio of the first layer elements when they are reduced and displayed, and the magnification ratio of the second layer elements when they are enlarged and displayed is smaller than the enlargement ratio of the first layer elements when they are enlarged and displayed. proportion.
  • the display unit is also used to perform reduced display and/or enlarged display of the Nth layer element surrounding the second position among the multiple elements; wherein the Nth layer element and the second layer element are both is the element centered at the second position, the Nth level element is the element outside the second level element, and N is greater than 2.
  • the display unit when the Mth layer element includes elements in the dock bar, the display unit is also used to perform reduced display and/or enlarged display of the elements in the dock bar; M is less than or equal to N.
  • the reduction ratio when the Nth layer element is reduced and displayed, the reduction ratio is greater than that of the second layer element.
  • the reduction ratio when the Nth layer element is enlarged and displayed is smaller than the enlargement ratio of the second layer element when it is enlarged and displayed.
  • the processing unit is specifically used to reduce the first layer element at the first moment; the display unit is specifically used to display the reduced first layer element; the processing unit is specifically used to reduce the first layer element at the first moment; At the second moment, the reduced first-layer elements are enlarged, and the display unit is specifically used to display the enlarged first-layer elements; at the third moment, the enlarged first-layer elements are reduced and the first-layer elements are displayed.
  • the size of the reduced first-layer element is smaller than the size of the first-layer element, and the size of the enlarged first-layer element is greater than the size of the first-layer element.
  • the display unit is specifically configured to display the first-layer elements surrounding the second position among the plurality of elements inwardly with the second position as the center and/or with the second position as the center. Zoom outwards.
  • the processing unit in response to the first operation, is specifically used to reduce the target element, and the display unit is specifically used to display the reduced target element; when the first operation continues to act on the target element Below, the processing unit is specifically used to enlarge the reduced target element; the display unit is specifically used to display the enlarged target element; the processing unit is specifically used to move the enlarged target element from the first position to the second position.
  • the processing unit when the terminal device determines that the first element exists at the second position while the terminal device moves the enlarged 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 enlarged target element from the first position to the second position.
  • the size of the target element is positively related to the number of layers surrounding the second position in the plurality of elements.
  • the size of the target element is positively related to the range covered by the first layer.
  • the target element is an element in the folder
  • the processing unit is specifically configured to receive the second operation on the folder; in response to the second operation, the display unit is specifically configured to display the first interface.
  • the target element includes: application icon, card, widget, folder, card set, image icon, or album icon.
  • embodiments of the present application provide a terminal device, including a processor and a memory.
  • the memory is used to store code instructions; the processor is used to run the code instructions, so that the terminal device can execute the first aspect or any one of the first aspects. method described in Implementation Methods.
  • embodiments of the present application provide a computer-readable storage medium.
  • the computer-readable storage medium stores instructions. When the instructions are executed, the computer executes as in the first aspect or any implementation of the first aspect. described method.
  • a computer program product includes a computer program that, when executed, causes the computer to perform the method described in the first aspect or any implementation of the first aspect.
  • Figure 1 is a schematic diagram of the hardware structure of a terminal device provided by an embodiment of the present application.
  • Figure 2 is a schematic diagram of the software structure of a terminal device provided by an embodiment of the present application.
  • Figure 3 is a schematic diagram of an interface for triggering a ripple effect provided by an embodiment of the present application
  • Figure 4 is a schematic diagram of another interface for triggering a ripple effect provided by an embodiment of the present application.
  • Figure 5 is a schematic diagram of an interface for triggering a ripple effect in a folder provided by an embodiment of the present application
  • Figure 6 is a schematic interface diagram of a ripple effect provided by an embodiment of the present application.
  • Figure 7 is a schematic interface diagram of another ripple effect provided by an embodiment of the present application.
  • Figure 8 is a schematic diagram of another interface for triggering a ripple effect provided by an embodiment of the present application.
  • Figure 9 is a schematic diagram of an interface for triggering a ripple effect based on an album icon provided by an embodiment of the present application.
  • Figure 10 is a schematic diagram of another interface for triggering a ripple effect provided by an embodiment of the present application.
  • Figure 11 is a schematic diagram of another interface for triggering a ripple effect based on an album icon provided by an embodiment of the present application.
  • Figure 12 is a schematic structural diagram of an interface display device provided by an embodiment of the present application.
  • Figure 13 is a schematic diagram of the hardware structure of another terminal device provided by an embodiment of the present application.
  • words such as “first” and “second” are used to distinguish the same or similar items with basically the same functions and effects.
  • the first value and the second value are only used to distinguish different values, and their order is not limited.
  • words such as “first” and “second” do not limit the number and execution order, and words such as “first” and “second” do not limit the number and execution order.
  • At least one refers to one or more, and “plurality” refers to two or more.
  • “And/or” describes the association of associated objects, indicating that there can be three relationships, for example, A and/or B, which can mean: A exists alone, A and B exist simultaneously, and B exists alone, where A, B can be singular or plural.
  • the character “/” generally indicates that the related objects are in an “or” relationship.
  • “At least one of the following” or similar expressions thereof refers to any combination of these items, including any combination of a single item (items) or a plurality of items (items).
  • At least one of a, b, or c can represent: a, b, c, a and b, a and c, b and c, or a, b and c, where a, b, c can be single or multiple.
  • a terminal device displays a first interface; the first interface includes multiple elements; the terminal device receives a first operation for a target element among the multiple elements; in response to the first operation , the terminal device moves the target element from the first position to the second position; the terminal device performs reduced display and/or enlarged display of the first layer elements surrounding the second position among the multiple elements.
  • This allows the terminal device to scale the first-layer elements around the target element when receiving the first operation of an unintentional touch on the target element, thereby presenting a ripple effect, so that the user can promptly detect the unintentionally touched target element.
  • the target element may include: application icon, card, widget, folder, card set, image icon, or album icon, etc.; any one of the plurality of elements may also include: application icon, card, widget , folders, card sets, image icons, or album icons, etc., which are not limited in the embodiments of this application.
  • terminal equipment can also be called a terminal (terminal), user equipment (user equipment, UE), mobile station (mobile station, MS), mobile terminal (mobile terminal, MT), etc.
  • Terminal devices can be mobile phones with touch screens, smart TVs, wearable devices, tablets (Pads), computers with wireless transceiver functions, virtual reality (VR) terminal devices, augmented reality, AR) terminal equipment, wireless terminals in industrial control, wireless terminals in self-driving, wireless terminals in remote medical surgery, wireless terminals in smart grid Terminals, wireless terminals in transportation safety, wireless terminals in smart cities, wireless terminals in smart homes, etc.
  • the embodiments of this application do not limit the specific technology and specific equipment form used by the terminal equipment.
  • FIG. 1 is a schematic diagram of the hardware structure of a terminal device provided by an embodiment of the present application.
  • the terminal device may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, an antenna 1, an antenna 2, and a mobile communication module.
  • a processor 110 an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, an antenna 1, an antenna 2, and a mobile communication module.
  • Wireless communication module 160 audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone interface 170D, sensor module 180, button 190, indicator 192, camera 193, and display screen 194, etc.
  • the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the terminal device.
  • the terminal device may include more or less components than shown in the figures, or some components may be combined, or some components may be separated, or may be arranged differently.
  • the components illustrated may be implemented in hardware, software, or a combination of software and hardware.
  • Processor 110 may include one or more processing units. Among them, different processing units can be independent devices or integrated in one or more processors.
  • the processor 110 may also be provided with a memory for storing instructions and data.
  • the USB interface 130 is an interface that complies with the USB standard specification, and may be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc.
  • the USB interface 130 can be used to connect a charger to charge the terminal device, and can also be used to transmit data between the terminal device and peripheral devices. It can also be used to connect headphones to play audio through them. This interface can also be used to connect other terminal devices, such as AR devices.
  • the charging management module 140 is used to receive charging input from the charger.
  • the charger can be a wireless charger or a wired charger.
  • the power management module 141 is used to connect the charging management module 140 and the processor 110 .
  • the wireless communication function of the terminal device can be implemented through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.
  • Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Antennas in end devices can be used to cover single or multiple communication bands. Different antennas can also be reused to improve antenna utilization.
  • the mobile communication module 150 can provide wireless communication solutions including 2G/3G/4G/5G applied to terminal devices.
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.
  • LNA low noise amplifier
  • the mobile communication module 150 can receive electromagnetic waves through the antenna 1 and respond to the received electromagnetic waves. The wave is filtered, amplified, etc., and sent to the modem processor for demodulation.
  • the wireless communication module 160 can provide applications including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) network), Bluetooth (BT), and global navigation satellite systems (WLAN) applied to terminal devices.
  • WLAN wireless local area networks
  • BT Bluetooth
  • WLAN global navigation satellite systems
  • GNSS Global navigation satellite system
  • FM frequency modulation
  • the terminal device implements display functions through the GPU, the display screen 194, and the application processor.
  • the GPU is an image processing microprocessor and is connected to the display screen 194 and the application processor. GPUs are used to perform mathematical and geometric calculations for graphics rendering.
  • the display screen 194 is used to display images, videos, etc.
  • Display 194 includes a display panel.
  • the terminal device may include 1 or N display screens 194, where N is a positive integer greater than 1.
  • the display screen 194 and the touch screen can be combined together.
  • the user triggers the corresponding position of the display screen 194, it is equivalent to the user triggering the touch screen. Trigger at the corresponding position on the touch screen.
  • the trigger may include a click operation, a long press operation, etc.
  • the click operation may be an operation of pressing down on the corresponding position of the display screen 194 and lifting it within a preset time threshold;
  • the long press operation may be an operation of pressing down on the corresponding position of the display screen 194 and continuing to press for more than the preset time threshold. Lifting operation. It can be understood that the click operation and long press operation described in the embodiment of the present application can be applied to a terminal device in which the display screen 194 and the touch screen are combined, and will not be described again below.
  • the display screen 194 and the touch screen may not be combined together.
  • the click operation and the long press operation in the embodiment of the present application may be replaced by other operations. This is not the case in the embodiment of the present application. Make limitations.
  • the terminal device can realize the shooting function through the ISP, camera 193, video codec, GPU, display screen 194 and application processor.
  • Camera 193 is used to capture still images or video.
  • the terminal device may include 1 or N cameras 193, where N is a positive integer greater than 1.
  • the external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the terminal device.
  • the external memory card communicates with the processor 110 through the external memory interface 120 to implement the data storage function. Such as saving music, videos, etc. files in external memory card.
  • Internal memory 121 may be used 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 used to store the executable program code corresponding to the interface display method described in the embodiment of the present application, and then the processor 110 executes and calls the executable program code.
  • the terminal device can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone interface 170D, and the application processor. Such as music playback, recording, etc.
  • the audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals.
  • Speaker 170A also called “speaker”
  • Receiver 170B also called “earpiece”
  • the headphone interface 170D is used to connect wired headphones.
  • Microphone 170C also called “microphone” or “microphone” is used to convert sound signals into electrical signals.
  • the terminal device can receive a sound signal for waking up the terminal device based on the microphone 170C, and convert the sound signal into an electrical signal that can be subsequently processed.
  • the voiceprint data described in the embodiment of this application the terminal device can have at least One microphone 170C.
  • the sensor module 180 may include one or more of the following sensors, such as: pressure sensor, gyroscope sensor, air pressure sensor, magnetic sensor, acceleration sensor, distance sensor, proximity light sensor, fingerprint sensor, temperature sensor, touch sensor, ambient light Sensor, or bone conduction sensor, etc. (not shown in Figure 1).
  • sensors such as: pressure sensor, gyroscope sensor, air pressure sensor, magnetic sensor, acceleration sensor, distance sensor, proximity light sensor, fingerprint sensor, temperature sensor, touch sensor, ambient light Sensor, or bone conduction sensor, etc. (not shown in Figure 1).
  • the buttons 190 include a power button, a volume button, etc.
  • Key 190 may be a mechanical key. It can also be a touch button.
  • the terminal device can receive key input and generate key signal input related to user settings and function control of the terminal device.
  • the indicator 192 may be an indicator light, which may be used to indicate charging status, power changes, or may be used to indicate messages, missed calls, notifications, etc.
  • the software system of the terminal device can adopt a layered architecture, event-driven architecture, micro-kernel architecture, micro-service architecture, or cloud architecture, etc., which will not be described again here.
  • the embodiment of this application takes the Android system with a layered architecture as an example to illustrate the software structure of the terminal device.
  • FIG. 2 is a schematic diagram of the software structure of a terminal device provided by an embodiment of the present application.
  • the layered architecture divides the software into several layers, and each layer has clear roles and division of labor.
  • the layers communicate through software interfaces.
  • the Android system can be divided into four layers, from top to bottom: application layer, application framework layer, Android runtime (android runtime) and system libraries, and kernel layer.
  • the application layer can include a series of application packages. As shown in Figure 2, the application package can include camera, calendar, phone, map, phone, music, settings, mailbox, video, social and other applications.
  • the application framework layer provides an application programming interface (API) and programming framework for applications in the application layer.
  • API application programming interface
  • the application framework layer includes some predefined functions.
  • the application framework layer can include window managers, content providers, resource managers, view systems, notification managers, etc.
  • a window manager is used to manage window programs.
  • the window manager can obtain the display size, determine whether there is a status bar, lock the screen, touch the screen, drag the screen, capture the screen, etc.
  • the window manager is used to determine the display mode of the first element in the desktop according to the user's touch screen operation; for example, move the first element to the lower area of the screen or shrink the first element and move it to the screen the lower area.
  • Content providers are used to store and retrieve data and make this data accessible to applications.
  • Data can include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.
  • the view system includes visual controls, such as controls that display text, controls that display pictures, etc.
  • a view system can be used to build applications.
  • the display interface can be composed of one or more views.
  • a display interface including a text message notification icon may include a view for displaying text and a view for displaying pictures.
  • the resource manager provides various resources to applications, such as localized strings, icons, pictures, layout files, video files, etc.
  • the notification manager allows applications to display notification information in the status bar, which can be used to convey notification-type messages and can automatically disappear after a short stay without user interaction.
  • the notification manager is used to notify download completion, message reminders, etc.
  • the notification manager can also be a notification that appears in the status bar at the top of the system in the form of a chart or scroll bar text, for example Such as notifications from applications running in the background, or notifications that appear on the screen in the form of conversation windows. For example, text information is prompted in the status bar, a prompt sound is emitted, the terminal device vibrates, and the indicator light flashes, etc.
  • Android runtime includes core libraries and virtual machines.
  • the android runtime is responsible for the scheduling and management of the Android system.
  • the core library contains two parts: one is the functional functions that need to be called by the Java language, and the other is the core library of Android.
  • the application layer and application framework layer run in virtual machines.
  • the virtual machine executes the java files of the application layer and application framework layer into binary files.
  • the virtual machine is used to perform object life cycle management, stack management, thread management, security and exception management, and garbage collection and other functions.
  • System libraries can include multiple functional modules. For example: surface manager (surface manager), media libraries (Media Libraries), 3D graphics processing libraries (for example: OpenGL ES), 2D graphics engines (for example: SGL), etc.
  • the surface manager is used to manage the display subsystem and provides the fusion of 2D and 3D layers for multiple applications.
  • the media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc.
  • the media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.
  • the 3D graphics processing library is used to implement 3D graphics drawing, image rendering, composition, and layer processing.
  • 2D Graphics Engine is a drawing engine for 2D drawing.
  • the kernel layer is the layer between hardware and software.
  • the kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.
  • elements of different sizes will produce different ripple effects.
  • the terminal device can scale the elements around the target element when receiving the user's target operation, so that the elements around the target element can produce smaller Range ripple effect (such as generating 2 or 3 waveforms around the 1 ⁇ 1 element); or, scenario 2, when the size of the target element is 2 ⁇ 2, etc., the terminal device can receive the user’s target operation , scale the elements around the target element so that the elements around the target element produce a moderate ripple effect (such as generating 3 or 4 waveforms around the 2 ⁇ 2 element); or, scene three, when the target element When the size is 2 ⁇ 4, etc., the terminal device can scale the elements around the target element when receiving the user's target operation, so that the elements around the target element produce a larger-scale ripple effect (such as in the 2 ⁇ 4 produces 4 or 5 waves around the elements).
  • the target operation can be a long press operation and a drag operation on the target element, so that the target
  • the ripple effect can be understood as a water ripple-like effect produced around the thrown object when an object is thrown into the water. It is understandable that the terminal device can simulate the water ripple effect by scaling the elements around the target element. Effect.
  • the size of the target element is not limited to the above.
  • the size of the target element can also be a value such as 2 ⁇ 3, 1 ⁇ 2, 3 ⁇ 3, or 4 ⁇ 4. If appropriate, elements of different sizes can also be used. It brings different numbers of waveforms and scaling effects of different amplitudes, which are not limited in the embodiments of the present application.
  • the terminal device is a mobile phone as an example for illustration, and this example does not constitute a limitation to the embodiment of the present application.
  • the terminal device can scale the elements around the target element when receiving the user's target operation, so that the elements around the target element are generated.
  • a smaller ripple effect like 2 or 3 waves around the 1 ⁇ 1 element).
  • FIG. 3 is a schematic diagram of an interface for triggering a ripple effect provided by an embodiment of the present application.
  • the terminal device displays an interface as shown in a in Figure 3.
  • the interface can be the desktop of the terminal device. Multiple 1 ⁇ 1 elements can be displayed in the interface, such as the target element 301 and the dock bar at the bottom of the interface. element, and multiple elements displayed around the target element 301.
  • any element in the interface shown in a in Figure 3 can be an application icon, and/or a folder icon, etc.; the size of the target element 301 in the interface can be a default size, such as the proportion of the target element 301 Can be 100%.
  • the terminal device when the terminal device receives the user's pressing operation or other triggering operation on the target element 301, the terminal device can display the interface shown in b in Figure 3.
  • the terminal device in response to the user's pressing operation, can reduce the target element 301 to obtain the reduced target element 301, for example, reduce the target element 301 to a value such as 90%, instructing the user Select target element 301.
  • the terminal device The interface shown in c in Figure 3 can be displayed.
  • the terminal device in response to the user's continuous pressing operation or long pressing operation, the terminal device can enlarge the reduced target element 301 in the interface shown in b in Figure 3 to obtain the enlarged
  • the target element 301 that has been reduced must be enlarged to a value such as 110%.
  • the long press operation may include a press operation on the target element 301 and a long press operation when the press operation continues to act on the target element 301 .
  • the terminal device when the terminal device receives a long press operation for the target element 301 in the interface shown in a in Figure 3, the terminal device can highlight the target element 301 (such as enlarging the target element 301, as shown in Figure 3
  • the size of the target element 301 in the interface shown in c is 110% of the size of the target element 301 in the interface shown in a in Figure 3).
  • the terminal device when the pressing operation continues to be on the target element 301, when the terminal device receives the user's operation of dragging the target element 301, the terminal device can display as shown in Figure 3 The interface shown in d. As shown in d in Figure 3, the target element 301 in the interface can remain highlighted, and a dotted frame 302 is displayed at the starting position of the dragged target element 301. The dotted frame 302 is used to indicate The position where target element 301 returns when the user lets go.
  • the dotted box 302 can remain at d in Figure 3. at the position shown; or, when the user drags the target element 301 beyond a certain range centered on the target element 301, the dotted frame 302 can be displayed at other positions (see the corresponding embodiment in Figure 4).
  • the user drags the target element 301 beyond a certain range centered on the target element 301 it can be understood that the user may want to move the target element 301 to another location.
  • the terminal device will determine the position of the target element 301 in real time according to the position where the user drags the target element 301, for the position where the target element 301 can return when the user lets go (or it can be understood as the position of the dotted box corresponding to the target element 301).
  • the certain range may be the range of a circle with the target element 301 as the center and a radius R0, and the value of R0 may be less than a preset distance threshold.
  • the preset 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 (such as the element on the right side of the target element 301, etc.).
  • the terminal device when the terminal device receives the user's release operation, the terminal device can place the target element 301 at the location of the dotted box 302, And the interface shown in e in Figure 3 is displayed.
  • the target element 301 is de-highlighted and restored to the display state and size in the interface shown as a in Figure 3.
  • the terminal device can sequentially perform operations on the elements around the target element 301 in a direction from the inside to the outside (such as the direction of the arrow) with the target element 301 as the center. Display of ripple effect.
  • the terminal device may preferentially perform zoom processing on elements other than the target element 301 in the first range 303 of the target element 301 (and the first range 303 passing through) (for the specific scaling process, please refer to the corresponding embodiment of FIG. 6 ).
  • Elements in the first range 303 other than the target element 301 may include: Element 310, Element 311, Element 312, and Element 313.
  • the elements corresponding to the first range 303 may be the elements corresponding to when the distance between the center of any element around the target element 301 and the center of the target element 301 is less than the first distance threshold.
  • the elements corresponding to the first range 303 may also be elements other than the target element 301 that are within the range of the circle with the target element 301 as the center and the radius R1 (and the circle passes through).
  • the terminal device can zoom in on the second range 304 around the target element 301 (and through the second range 304) except for the first range 303.
  • the elements are scaled.
  • Elements in the second range 304 other than the first range 303 may include : Element 320, Element 321, Element 322, Element 323 and Element 324. Among them, the elements corresponding to each range are centered on the location of the target element.
  • the elements corresponding to the second range 304 may be when the distance between the center of any element around the target element 301 and the center of the target element 301 is greater than or equal to the first distance threshold and less than the second distance threshold. Elements. Alternatively, the elements corresponding to the second range 304 may also be elements other than the elements in the first range 303 that are within the range of the circle with the target element 301 as the center and the radius R2 (and the circle passes through), and R2 is greater than R1.
  • the elements in the first range 303 may include: elements corresponding to the first range 303 and the target element 301.
  • the terminal device can divide the second range 305 around the target element 301 (and the areas through which the third range 305 passes). Elements outside the range 304 and the first range 303 are scaled. Elements in the third range 305 other than the second range 304 and the first range 303 (or elements corresponding to the third range 305, as shown in e in Figure 3 to elements including slashes in the block diagram) may include : Element 330, Element 331, Element 332, Element 333, Element 334, Element 335, Element 336, and Element 337.
  • the element corresponding to the third range 305 (can be, when the distance between the center of any element around the target element 301 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 correspond elements, the difference between the third distance threshold and the second distance threshold, and the difference between the third distance threshold and the second distance threshold may be the same or different.
  • the elements corresponding to the third range 305 may also be elements other than the elements in the second range 304 that are within (or pass through) the circle with the target element 301 as the center and radius R3, and R3 is greater than R2.
  • the elements in the second range 304 may include: target elements, elements corresponding to the first range 303 , and elements corresponding to the second range 304 .
  • the value of the period of time threshold can be a value such as 50ms, 60ms or 80ms, which is not limited in the embodiment of the present application.
  • the terminal device can sequentially perform the first range 303, the second range 304, and the third range 305, corresponding to each range. Elements are scaled so that the scaling of elements in any range presents a waveform.
  • FIG. 4 is a schematic diagram of another interface for triggering a ripple effect provided by an embodiment of the present application.
  • the interface may include a target element 301 and an element 401.
  • the terminal device receives the user's pressing operation on the target element 301, the terminal device can press a in Figure 4
  • the target element 301 shown is reduced, and the interface shown in b in Figure 4 is displayed.
  • the terminal device can highlight the target element 301,
  • the interface shown in c in Figure 4 is displayed.
  • the terminal device can display d in Figure 4 interface shown.
  • the target element 301 in the interface can remain highlighted, the position of the target element 301 does not exceed a certain range centered on the target element 301, and the target element 301 drags A dotted frame is displayed at the starting position of the drag.
  • the terminal device when the terminal device receives that the user drags the target element 301 to a certain range centered on element 401 (range 400 shown as d in Figure 4) , the terminal device can first move the element 401, for example, move the element 401 to the right by the position of an icon, so that the position of the element 401 in the interface shown in d in Figure 4 can be reserved for the target element 301, such as the terminal device
  • the interface shown in e in Figure 4 is displayed. As shown in the interface shown in e in Figure 4, the dotted box can be displayed at the position where the element 401 was before moving.
  • the terminal device when the target element 301 is located at the location shown in e in Figure 4, when the terminal device receives the user's release operation, the terminal device can place the target element 301 at the location of the dotted box. , and the interface shown as f in Figure 4 is displayed. In the interface shown as f in Figure 4 , the target element 301 is de-highlighted and restored to the display state and size in the interface shown as a in Figure 4 .
  • the terminal device can first squeeze out the elements at the target position where the target element may be displayed when the user lets go, based on the position of the target element, and then When receiving the user's release, move the target element to the target position.
  • the terminal device after the terminal device displays the interface shown as f in Figure 4, the terminal device can follow the first range 303 and the second range 304 described in the interface shown as e in Figure 3. and the sequence of the third range 305 to sequentially perform scaling processing on the elements corresponding to each range centered on the location of the target element.
  • FIG. 5 is a schematic diagram of an interface for triggering a ripple effect in a folder provided by an embodiment of the present application.
  • the terminal device displays an interface as shown in a in Figure 5, which may include a folder 501.
  • the terminal device may display as shown in b in Figure 5 interface.
  • the interface may be an interface corresponding to the folder, and the interface may include multiple elements in the folder 501, such as the target element 502.
  • the triggering operation may be a click operation, a long press operation or a voice operation.
  • the terminal device can display the display as shown in c in Figure 5. displayed interface.
  • the target element 502 in the interface can remain highlighted, the position of the target element 502 does not exceed a certain range centered on the target element 502, and the target element 502 can be dragged A dotted frame is displayed at the starting position of the drag.
  • the terminal device when the target element 502 is located at the position in the interface shown as c in Figure 5, when the terminal device receives the user's release operation, the terminal device can place the target element 502 at the position of the dotted box. at , and the interface shown in d in Figure 5 is displayed. In the interface shown in d in FIG. 5 , the target element 502 is de-highlighted and restored to the display state and size in the interface shown in b in FIG. 5 .
  • the terminal device can follow the first range 303, the second range 304 and the second range described in the interface shown as e in Figure 3.
  • the sequence of the third range 305 is to sequentially perform scaling processing on the elements corresponding to each range centered on the location of the target element in the folder.
  • FIG. 6 is a schematic interface diagram of a ripple effect provided by an embodiment of the present application.
  • the terminal device displays an interface shown as a in Figure 6.
  • the interface shown as a in Figure 6 is similar to the interface shown as e in Figure 3 and the interface shown as f in Figure 4, and will not be described again here. ;
  • the element corresponding to the first range 303 in the interface shown in a in Figure 6 can be displayed as 100% size, and the element at 100% size can be understood as the first state of the element.
  • the terminal device can reduce the elements corresponding to the first range 303 .
  • the terminal device can gradually reduce the elements corresponding to the first range 303 in the first state.
  • the terminal device can reduce the elements corresponding to the first range 303 in the first state.
  • the elements corresponding to a range 303 are reduced to values such as 96%, and then the terminal device displays an interface as shown in b in Figure 6 .
  • the reduced elements at values such as 96% can be understood as the second state of the element.
  • each element corresponding to the first range 303 can be reduced in the direction of the target element 301 (or understood to be reduced inward with the target element 301 as the center). ), or any element among the elements corresponding to the first range 303 can also be reduced centered on itself.
  • the method of reduction is not specifically limited.
  • the terminal device can enlarge the elements corresponding to the reduced first range 303.
  • the terminal device can gradually enlarge the elements corresponding to the first range 303 in the second state,
  • the element corresponding to the first range 303 is enlarged to a value such as 103%, and then the terminal device displays as shown in c in Figure 6 Interface, the element that is enlarged by a value such as 103% can be understood as the third state of the element.
  • each element corresponding to the first range 303 can be magnified in a direction away from the target element 301 (or understood as outward with the target element 301 as the center). amplification), or any element among the elements corresponding to the first range 303 can also be amplified as the center.
  • the method of amplification is not specifically limited in the embodiment of the present application.
  • the terminal device can reduce the elements corresponding to the enlarged first range 303.
  • the terminal device can gradually reduce the elements corresponding to the first range 303 in the third state. Reduce, for example, the elements corresponding to the first range 303 to a value such as 100%, and then the terminal device displays an interface as shown in d in Figure 6 , so that the elements corresponding to the first range 303 return to the first state.
  • the terminal device can implement scaling of the elements corresponding to the first range 303 based on the embodiment corresponding to Figure 6, so that after the elements corresponding to the first range 303 present the first waveform, the first waveform is repeatedly displayed.
  • the waveform is generated, and when any user operation on the desktop is received, the display of the waveform is ended, and the interface shown in d in Figure 6 is displayed.
  • the terminal device can implement scaling of the elements corresponding to the first range 303 based on the embodiment corresponding to Figure 6, so that the elements corresponding to the first range 303 exhibit a ripple effect.
  • the ripple effect presented by the element corresponding to the first range 303 is only used as the ripple effect of the first waveform of the target element 301.
  • the terminal device can be a 1 ⁇ 1
  • the target element 301 is set with 2-3 waveforms, so that the dynamic effects between multiple waveforms can simulate the spread and transmission of water ripples when an object is thrown into the water.
  • the terminal device can present the ripple effect of the second waveform according to the scaling of the elements corresponding to the second range 304 in the interface shown as e in Figure 3, and according to the scaling of the elements corresponding to the third range 305 , showing the ripple effect of the third waveform.
  • the display duration of any waveform can be a value such as 150ms.
  • the terminal device can display the second waveform 50ms after displaying the first waveform; display the third waveform 50ms after displaying the second waveform.
  • Each waveform Displayed in sequence it can better reflect the dynamic ripple effect.
  • the terminal device in order to present a more vivid ripple effect, can set different display durations for each waveform, or set different values for the display time intervals between each waveform. In this embodiment of the present application, No restrictions.
  • the terminal device can set different scaling ratios for different waveforms.
  • Table 1 is a schematic table of the scaling ratio of the waveform when the target element is 1 ⁇ 1 provided by the embodiment of the present application.
  • the waveform is 3 as an example for illustration.
  • Table 1 The scaling ratio of the waveform when the target element is 1 ⁇ 1
  • the difference between the reduction and enlargement ratios of the waveform is larger, the scaling amplitude is larger, and the amplitude of the waveform is also larger.
  • the amplitude of the first waveform is greater than the amplitude of the second waveform, and the amplitude of the second waveform is greater than the amplitude of the third waveform, thus showing a dynamic effect of the waveforms decaying in sequence.
  • FIG. 7 is a schematic interface diagram of another ripple effect provided by an embodiment of the present application.
  • the terminal device After the terminal device triggers the terminal device to display the interface shown in a in Figure 7 based on the embodiment corresponding to Figure 3 or Figure 4, the terminal device can go to f in Figure 7 based on the interface shown in b in Figure 7
  • the interface shown displays a ripple effect including multiple waveforms around the target element 301.
  • the terminal device can reduce the elements corresponding to the first range 303 according to the 96% reduction ratio in Table 1, and present the first waveform, so that the terminal device displays as shown in Figure 7
  • the interface shown in b The interface shown in b.
  • the terminal device can display the first waveform 50ms after displaying the interface shown in b in Figure 7
  • the elements corresponding to the second range 304 in the interface are reduced.
  • the terminal device can reduce the elements corresponding to the second range 304 according to the 98% reduction ratio in Table 2 to present the second waveform, so that the terminal device displays the following The interface shown in c in Figure 7.
  • the terminal device can amplify the elements corresponding to the reduced first range 303 according to the amplification ratio of 103% in Table 1, and continue to present the first waveform, so that the terminal The device displays the interface shown in c in Figure 7.
  • the terminal device can display the second waveform 50ms after the interface shown in c in Figure 7
  • the elements corresponding to the third range 305 in the interface are reduced.
  • the terminal device can reduce the elements corresponding to the third range 305 according to the reduction ratio of 99.5% in Table 1 to present the third waveform, so that the terminal device displays the following The interface shown in d in Figure 7.
  • the terminal device can amplify the elements corresponding to the reduced second range 304 according to the 101% amplification ratio in Table 1, and continue to present the second waveform, so that the terminal The device displays the interface shown in d in Figure 7.
  • the terminal device can zoom out to 100% for the element corresponding to the first range 303 that has been enlarged to 103%, and continue to present the first waveform, so that the terminal device displays as shown in Figure 7 The interface shown in d.
  • the terminal device can enlarge the elements corresponding to the reduced third range 305 according to the 100.5% enlargement ratio in Table 1, so that the terminal device displays as shown in Figure 7
  • the interface shown in e continues to present the third waveform.
  • the terminal device can zoom out to 100% for the element corresponding to the second range 304 that has been enlarged to 101%, and continue to present the second waveform, so that the terminal device displays as shown in Figure 7
  • the terminal device can zoom out to 100% for the element corresponding to the third range 305 that has been enlarged to 100.5%, and continue to present the third waveform, so that the terminal device displays as shown in Figure 7
  • the terminal device can display the ripple effect of three waveforms corresponding to the 1 ⁇ 1 target element based on the embodiment corresponding to FIG. 7 .
  • the terminal device can also display three waveforms once, then continue to display the three waveforms repeatedly, showing the effect of multiple ripples, and end the three waveforms when receiving any operation from the user on the desktop.
  • the ripple effect corresponding to the waveform is displayed; alternatively, the terminal device can also end the display after displaying three waveforms at a time.
  • the terminal device can realize that when the target element is accidentally touched and dragged to other locations and returns to the target location, a ripple effect is generated around the target location, so that the user can detect the accidentally touched target element in time.
  • Scenario 2 When the target element is a 2 ⁇ 2 card or widget, the terminal device can scale the elements around the target element when receiving the user's target operation, so that the elements around the target element produce moderate ripples. Effect (such as producing 3 or 4 waves around the 2 ⁇ 2 element).
  • FIG. 8 is a schematic diagram of yet another interface for triggering a ripple effect provided by an embodiment of the present application.
  • the terminal device displays the interface shown in a in Figure 8 , which may include a card 801 (or called a target element 801).
  • the terminal device when the terminal device receives the user's long press operation on the target element 801, the terminal device can highlight the target element 801, and the press operation continues on the target element 801.
  • the terminal device may display an interface as shown in b in Figure 8 .
  • the target element 801 in the interface can remain highlighted, and a 2 ⁇ 2 dotted frame is displayed at the drag starting position of the target element 801 .
  • the terminal device When the target element 801 is located in the interface shown in b in Figure 8, when the terminal device receives the user's release operation, the terminal device can place the target element 801 at the location of the dotted box, and The interface shown in c in Figure 8 is displayed. In the interface shown as c in Figure 8 , the target element 801 is de-highlighted and restored to the display state and size in the interface shown as a in Figure 8 .
  • the terminal device can scale the elements around the target element 801 in sequence from the inside to the outside with the target element 801 as the center, thereby showing ripples. Effect.
  • the terminal device may preferentially scale elements corresponding to the first range 802.
  • the elements corresponding to the first range 802 may include: element 810, element 811, element 812, element 813, element 814, and element 815.
  • the terminal device may scale the elements corresponding to the second range 803.
  • the elements corresponding to the second range 803 may include: element 820, element 821, Element 822, Element 823, Element 824, Element 825, Element 826, and Element 827.
  • the terminal device may scale the elements corresponding to the third range 804.
  • the elements corresponding to the third range 804 may include: element 830, element 831, Element 832, Element 833, Element 834, and Element 835.
  • the terminal device may scale the elements corresponding to the fourth range 805.
  • the elements corresponding to the fourth range 805 may include: Element 840 and element 841 may be elements in the dock.
  • first range 802 in the embodiment corresponding to Figure 8 It may be greater than the first range 303 in the embodiment corresponding to Figure 3; the second range 803 in the embodiment corresponding to Figure 8 may be greater than the second range 304 in the embodiment corresponding to Figure 3;
  • the third range 804 may be larger than the third range 305 in the corresponding embodiment of FIG. 3 .
  • the terminal device sets different scaling ratios for different waveforms of the 2 ⁇ 2 target element.
  • Table 2 is a schematic table of the scaling ratio of the waveform when the target element is 2 ⁇ 2 provided by the embodiment of the present application.
  • the waveform is 4 for illustration.
  • the scaling difference of the first waveform of the 1 ⁇ 1 target element in Table 1 can be 7%, and the scaling of the first waveform of the 2 ⁇ 2 target element in Table 2 The difference can be 9%, so the larger the size of the target element, the greater the amplitude of the waveform, and the greater the number of waveforms.
  • the terminal device can achieve a ripple effect around the target position when the target element is accidentally touched, causing it to be dragged to another position and returned to the target position, so that the user can detect the accidentally touched target element in time; and , the larger the size of the target element, the more obvious the amplitude of the waveform in the ripple effect.
  • FIG. 9 is a schematic diagram of an interface for triggering a ripple effect based on an album icon according to an embodiment of the present application.
  • the terminal device may display an interface as shown in a in Figure 9.
  • the interface may include: a text box for searching for a photo album, a control for creating a photo album, a user interface for Controls for viewing other functions in the camera application, controls for viewing images, controls for viewing photo albums (the control for viewing photo albums is selected), controls for viewing images by time dimension, controls for viewing by Album category Controls for viewing images as well as multiple albums.
  • the album can include: a camera album containing 20 images, an all image album containing 110 images, a video album containing 12 videos, a screenshot album containing 22 images, and a My Collection containing 25 images.
  • Photo album 901 (or target element 901), a dog photo album containing 22 images, a mobile phone shared photo album containing 12 images, and a landscape photo album containing 22 images, etc.
  • the terminal device when the terminal device receives the user's long press operation on the target element 901, the terminal device can highlight the target element 901. When the press operation continues on the target element 901 Next, when the terminal device receives the user's operation of dragging the target element 901, the terminal device may display an interface as shown in b in Figure 9. As shown in b in Figure 9 , the target element 901 in the interface can remain highlighted, and a dotted frame is displayed at the drag starting position of the target element 901 .
  • the terminal device When the target element 901 is located in the interface shown in b in Figure 9, when the terminal device receives the user's release operation, the terminal device can place the target element 901 at the location of the dotted box, and The interface shown in c in Figure 9 is displayed. In the interface shown in c in Figure 9 , the target element 901 is de-highlighted and restored to the display state and size in the interface shown in a in Figure 9 .
  • the terminal device can implement scaling of elements corresponding to the first range 902 and elements corresponding to the second range 903 around the target element 901, respectively, so that the elements in Figure 9
  • the album icon in the interface shown in c can present a ripple effect around the target element 901.
  • the terminal device can reduce the elements corresponding to the first range 902, so that the terminal device displays the interface shown in d in Figure 9; and then in Figure 9
  • the terminal device can enlarge the element corresponding to the reduced first range 902, so that the terminal device displays the interface shown in e in Figure 9; and then in the interface shown in e in Figure 9 , the elements corresponding to the enlarged first range 902 are reduced, so that the terminal device displays the interface shown as f in Figure 9, and returns to the interface shown as a in Figure 9 for the elements corresponding to the first range 902. original size.
  • the terminal device may perform scaling processing on the elements corresponding to the second range 903 after 50 ms of scaling processing on the elements corresponding to the first range 902; and, the terminal device may perform scaling processing on the elements corresponding to the second range 903.
  • the method please refer to the description in the interface shown as c in Figure 9 - the interface shown as f in Figure 9, and will not be described again here.
  • each element corresponding to the first range 902 in the embodiment corresponding to Figure 9 is an element with a size of 2 ⁇ 2, the number of elements affected during the scaling process can be the same as c in Figure 8 The number of elements corresponding to the first range 802 in the interface shown is different. Moreover, the size of each element in the embodiment corresponding to Figure 9 is also such that only two waveforms can be formed around the target element with a size of 2 ⁇ 2 in the interface shown as c in Figure 9 .
  • the size of the first range 902 may be the same as the size of the first range 802
  • the size of the second range 903 may be the same as the size of the second range 803 .
  • the terminal device can also implement a ripple effect based on the image icon, and the ripple effect is the same as the ripples of the album icon in the embodiment corresponding to Figure 9 The effects are similar and will not be described again here.
  • Scenario 3 When the target element is a 2 ⁇ 4 card, card set, or widget, the terminal device can scale the elements around the target element when receiving the user's target operation, so that the elements around the target element are generated.
  • a larger ripple effect e.g. 4 or 5 waves around the 2 ⁇ 4 element).
  • FIG. 10 is a schematic diagram of another interface for triggering a ripple effect provided by an embodiment of the present application.
  • the terminal device displays the interface shown in a in Figure 10 , which may include a card 1001 (or target element 1001).
  • the terminal device when the terminal device receives the user's long press operation on the target element 1001, the terminal device can highlight the target element 1001, and the press operation continues on the target element 1001. In this case, when the terminal device receives the user's operation of dragging the target element 1001, the terminal device may display an interface as shown in b in Figure 10. As shown in b in Figure 10 , the target element 1001 in the interface can remain highlighted, and a 2 ⁇ 4 dotted frame is displayed at the starting position of dragging the target element 1001 .
  • the terminal device When the target element 1001 is located in the interface shown in b in Figure 10, when the terminal device receives the user's release operation, the terminal device can place the target element 1001 at the location of the dotted box, and The interface shown in c in Figure 10 is displayed. In the interface shown in c in Figure 10 , the target element 1001 is de-highlighted and restored to the display state and size in the interface shown in a in Figure 10 .
  • the terminal device can follow the target element 1001 From the inside to the outside of the center, the elements around the target element 1001 are scaled in sequence, thereby showing a ripple effect.
  • the terminal device may preferentially scale elements corresponding to the first range 1002.
  • the elements corresponding to the first range 1002 may include: element 1010, element 1011, element 1012, element 1013, element 1014, element 1015, element 1016, and Element 1017.
  • the terminal device may scale the elements corresponding to the second range 1003.
  • the elements corresponding to the second range 1003 may include: element 1020, element 1021, Element 1022, Element 1023, Element 1024, Element 1025, Element 1026, and Element 1027.
  • the terminal device may scale the elements corresponding to the third range 1004.
  • the elements corresponding to the third range 1004 may include: element 1030, element 1031, Element 1032, and element 1033; and, element 1030, element 1031, element 1032, and element 1033 can all be elements in the dock.
  • the first range 1002, the second range 1003 and the third range 1004 can form three waveforms; in a possible implementation, the terminal device can also set five waveforms for the 2 ⁇ 4 target element.
  • Table 3 is a schematic table of the scaling ratio of the waveform when the target element is 2 ⁇ 4 provided by the embodiment of the present application. The waveform is 5 for illustration.
  • the scaling difference of the first waveform of the 1 ⁇ 1 target element in Table 1 can be 7%, and the first waveform of the 2 ⁇ 2 target element in Table 2
  • the scaling difference of the waveform can be 9%.
  • the scaling difference of the first waveform of the 2 ⁇ 4 target element in Table 3 can be 12%. Therefore, the amplitude of the waveform is also larger for larger target elements.
  • the terminal device can achieve a ripple effect around the target position when the target element is accidentally touched, causing it to be dragged to another position and returned to the target position, so that the user can detect the accidentally touched target element in time; and , the larger the size of the target element, the more obvious the amplitude of the waveform in the ripple effect.
  • FIG. 11 is a schematic diagram of another interface for triggering a ripple effect based on an album icon provided by an embodiment of the present application.
  • the terminal device displays an interface as shown in a in Figure 11, which may be another display style of the photo album.
  • the interface can include a camera album containing 20 images (or called target element 1001), a mobile phone shared album containing 12 images, and a landscape album containing 22 images.
  • Other content displayed in the interface can be seen in Figure 9
  • the description of the interface shown in a will not be repeated here.
  • the size of the mobile phone's shared photo album and landscape photo album can be is 2 ⁇ 3.
  • the terminal device when the terminal device receives the user's long press operation on the target element 1101, the terminal device can highlight the target element 1101. When the press operation continues on the target element 1101 Next, when the terminal device receives the user's operation of dragging the target element 1101, the terminal device may display an interface as shown in b in Figure 11. As shown in b in Figure 11 , the target element 1101 in the interface can remain highlighted, and a dotted frame is displayed at the starting position of the target element 1101 .
  • the terminal device When the target element 1101 is located in the interface shown in b in Figure 11, when the terminal device receives the user's operation of letting go, the terminal device can place the target element 1101 at the position of the dotted box, and The interface shown in c in Figure 11 is displayed. In the interface shown in c in Figure 11 , the target element 1101 is de-highlighted and restored to the display state and size in the interface shown in a in Figure 11 .
  • the terminal device can realize scaling of the elements corresponding to the first range 1102 around the target element 1101, so that the album icon in the interface shown in c in Figure 11 can be A ripple effect appears around target element 1101.
  • the terminal device can reduce the elements corresponding to the first range 1102, so that the terminal device displays the interface shown in d in Figure 11; and then in d in Figure 11
  • the terminal device can enlarge the element corresponding to the reduced first range 1102, so that the terminal device displays the interface shown as e in Figure 11; furthermore, in the interface shown as e in Figure 11,
  • the terminal device can reduce the elements corresponding to the enlarged first range 1102, so that the terminal device displays an interface as shown in f in Figure 11 and returns to the original size of the elements corresponding to the first range 1102.
  • the elements corresponding to the first range 1102 may be: mobile phone shared photo albums and landscape photo albums.
  • each element corresponding to the first range 1102 in the embodiment corresponding to Figure 11 is an element with a size of 2 ⁇ 3, the number of elements affected during the scaling process can be the same as c in Figure 10
  • the number of elements corresponding to the first range 1002 in the interface shown is different, and the size of the first range 1102 and the size of the first range 1002 may be the same.
  • the interface display method provided by the embodiments of the present application can not only be applied to scenarios such as desktops, folders, and photo albums, but also can be applied to other scenarios including multiple elements. This is not the case in the embodiments of the present application. Make limitations.
  • Figure 12 is a schematic structural diagram of an interface display device provided by an embodiment of the present application.
  • the interface display device may be a terminal device in an embodiment of the present application, or may be a chip or chip system in the terminal device. .
  • the interface display device 1200 can be used in communication equipment, circuits, hardware components or chips.
  • the interface display device includes: a display unit 1201 and a processing unit 1202.
  • the display unit 1201 is used to support the display steps performed by the interface display device 1200;
  • the processing unit 1202 is used to support the information processing steps performed by the interface display device 1200.
  • the interface display device includes a processing unit 1202 and a display unit 1201.
  • the display unit 1201 is used to display a first interface; the first interface includes multiple elements; processing Unit 1202, configured to receive a first operation for a target element among the plurality of elements; in response to the first operation, the processing unit 1202, configured to move the target element from a first position to a second position; the display unit 1201, configured to move The first-level element surrounding the second position among multiple elements performs reduced display and/or enlarged display.
  • the display unit 1201 is also configured to perform reduced display and/or enlarged display of second-layer elements surrounding the second position among the plurality of elements; wherein the second-layer elements and the first-layer elements They are all elements centered on the second position, and the second-level elements are elements outside the first-level elements.
  • the display unit 1201 is specifically configured to perform reduced display and/or enlarged display of the second layer elements after a first time threshold of performing reduced display and/or enlarged display of the first layer elements.
  • the reduction ratio of the second layer elements when they are reduced and displayed is greater than the reduction ratio of the first layer elements when they are reduced and displayed, and the magnification ratio of the second layer elements when they are enlarged and displayed is smaller than the enlargement ratio of the first layer elements when they are enlarged and displayed. proportion.
  • the display unit 1201 is also configured to perform reduced display and/or enlarged display of the Nth layer element surrounding the second position among the multiple elements; wherein the Nth layer element and the second layer element They are all elements centered at the second position.
  • the Nth level elements are elements outside the second level elements, and N is greater than 2.
  • the display unit 1201 when the Mth layer elements include elements in the docking bar, the display unit 1201 is also used to perform reduced display and/or enlarged display of the elements in the docking bar; M is less than or equal to N .
  • the reduction ratio of the Nth layer element when it is reduced and displayed is greater than the reduction ratio of the second layer element when it is reduced and displayed, and the Nth layer element's enlargement ratio when it is enlarged and displayed is smaller than the enlargement ratio of the second layer element when it is enlarged and displayed. proportion.
  • the processing unit 1202 is specifically configured to reduce the first layer elements at the first moment, and the display unit 1201 is specifically configured to display the reduced first layer elements; the processing unit 1202 is specifically configured to use To enlarge the reduced first-layer elements at the second moment, the display unit 1201 is specifically used to display the enlarged first-layer elements; to reduce the enlarged first-layer elements at the third moment, and display the first-layer elements. .
  • the size of the reduced first-layer element is smaller than the size of the first-layer element, and the size of the enlarged first-layer element is greater than the size of the first-layer element.
  • the display unit 1201 is specifically configured to perform inward zoom-out display of the first-layer elements surrounding the second position among the plurality of elements with the second position as the center and/or with the second position as the center.
  • the center is shown magnified outwards.
  • the processing unit 1202 in response to the first operation, is specifically used to reduce the target element, and the display unit 1201 is specifically used to display the reduced target element; during the first operation, the target element continues to be acted on. In the case of Second position.
  • the processing unit 1202 when the terminal device moves the enlarged target element from the first position to the second position and determines that the first element exists at the second position, the processing unit 1202 is specifically configured to Move the first element to the third position and move the enlarged target element from the first position to the second position.
  • the size of the target element is positively related to the number of layers surrounding the second position in the plurality of elements.
  • the size of the target element is positively related to the range covered by the first layer.
  • the target element is an element in a folder
  • the processing unit 1202 is specifically configured to receive a second operation for the folder; in response to the second operation, the display unit 1201 is specifically configured to display the first interface.
  • the target element includes: application icon, card, widget, folder, card set, image icon, or album icon.
  • the interface display device 1200 may also include a communication unit 1203. Specifically, the communication unit is used to support the interface display device 1200 in performing the steps of sending data and receiving data.
  • the communication unit 1203 may be an input or output interface, a pin or a circuit, etc.
  • the interface display device may also include: a storage unit 1204.
  • the processing unit 1202 and the storage unit 1204 are connected through lines.
  • the storage unit 1204 may include one or more memories, which may be devices used to store programs or data in one or more devices or circuits.
  • the storage unit 1204 may exist independently and be connected to the processing unit 1202 of the interface display device through a communication line.
  • the storage unit 1204 may also be integrated with the processing unit 1202.
  • the storage unit 1204 may store computer execution instructions for the method in the terminal device, so that the processing unit 1202 executes the method in the above embodiment.
  • the storage unit 1204 may be a register, cache, RAM, etc., and the storage unit 1204 may be integrated with the processing unit 1202.
  • the storage unit 1204 may be a read-only memory (ROM) or other type of static storage device that can store static information and instructions, and the storage unit 1204 may be independent from the processing unit 1202.
  • Figure 13 is a schematic diagram of the hardware structure of another terminal device provided by an embodiment of the present application.
  • the terminal device includes a processor 1301, a communication line 1304 and at least one communication interface (exemplarily shown in Figure 13 as a communication interface).
  • Interface 1303 is taken as an example for explanation).
  • the processor 1301 can be a general central processing unit (CPU), a microprocessor, an application-specific integrated circuit (ASIC), or one or more processors used to control the execution of the program of the present application. integrated circuit.
  • CPU central processing unit
  • ASIC application-specific integrated circuit
  • Communication lines 1304 may include circuitry that communicates information between the components described above.
  • the communication interface 1303 uses any device such as a transceiver to communicate with other devices or communication networks, such as Ethernet, wireless local area networks (WLAN), etc.
  • a transceiver to communicate with other devices or communication networks, such as Ethernet, wireless local area networks (WLAN), etc.
  • WLAN wireless local area networks
  • the terminal device may also include a memory 1302.
  • Memory 1302 may be a read-only memory (ROM) or other type of static storage device that can store static information and instructions, a random access memory (random access memory (RAM)) or other type that can store information and instructions.
  • a dynamic storage device can also be an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disk storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital versatile discs, Blu-ray discs, etc.), disk storage media or other magnetic storage devices, or can be used to carry or store desired program code in the form of instructions or data structures and can be used by a computer Any other medium for access, but not limited to this.
  • the memory may exist independently and be connected to the processor through a communication line 1304. Memory can also be integrated with the processor.
  • the memory 1302 is used to store computer execution instructions for executing the solution of the present application, and is controlled by the processor 1301 for execution.
  • the processor 1301 is used to execute computer execution instructions stored in the memory 1302, thereby implementing the interface display method provided by the embodiment of the present application.
  • the computer execution instructions in the embodiments of the present application may also be called application codes, which are not specifically limited in the embodiments of the present application.
  • the processor 1301 may include one or more CPUs, for example, Figure 13 CPU0 and CPU1 in .
  • the terminal device may include multiple processors, such as processor 1301 and processor 1305 in Figure 13 .
  • processors may be a single-CPU processor or a multi-CPU processor.
  • a processor here may refer to one or more devices, circuits, and/or processing cores for processing data (eg, computer program instructions).
  • a computer program product includes one or more computer instructions. When computer program instructions are loaded and executed on a computer, processes or functions according to embodiments of the present application are generated in whole or in part.
  • the computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable device.
  • Computer instructions may be stored in or transmitted from one computer-readable storage medium to another computer-readable storage medium, e.g., computer instructions may be transmitted from a website, computer, server or data center via a wired link (e.g. Coaxial cable, optical fiber, digital subscriber line (DSL) or wireless (such as infrared, wireless, microwave, etc.) means to transmit to another website site, computer, server or data center.
  • a wired link e.g. Coaxial cable, optical fiber, digital subscriber line (DSL) or wireless (such as infrared, wireless, microwave, etc.
  • the computer-readable storage medium can be Any available media that a computer can store or is a data storage device such as a server, data center, or other integrated server that includes one or more available media.
  • available media may include magnetic media (eg, floppy disks, hard disks, or tapes), optical media (eg, Digital versatile disc (digital versatile disc, DVD)), or semiconductor media (for example, solid state disk (solid state disk, SSD)), etc.
  • Computer-readable media may include computer storage media and communication media and may include any medium that can transfer a computer program from one place to another.
  • the storage media can be any target media that can be accessed by the computer.
  • the computer-readable medium may include compact disc read-only memory (CD-ROM), RAM, ROM, EEPROM or other optical disk storage; the computer-readable medium may include a magnetic disk memory or other disk storage device.
  • any connection line is also properly termed a computer-readable medium.
  • coaxial cable, fiber optic cable, twisted pair, DSL or wireless technologies such as infrared, radio and microwave
  • coaxial cable, fiber optic cable, twisted pair, DSL or wireless technologies such as infrared, radio and microwave
  • Disk and optical disk include compact disc (CD), laser disc, optical disc, digital versatile disc (DVD), floppy disk, and Blu-ray disc, where disks typically reproduce data magnetically, while discs reproduce data optically using lasers. Reproduce data.

Landscapes

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

Abstract

本申请实施例提供一种界面显示方法和装置,涉及终端技术领域,方法包括:终端设备显示第一界面;第一界面包括多个元素;终端设备接收针对多个元素中目标元素的第一操作;响应于第一操作,终端设备将目标元素从第一位置移动到第二位置;终端设备将多个元素中围绕第二位置的第一层元素执行缩小显示和/或放大显示。这样,终端设备可以在检测到目标元素放置到目标位置时,在该目标元素的周围产生涟漪效果,使得用户可以及时察觉到可能移动的目标元素。

Description

界面显示方法和装置
本申请要求于2022年06月30日提交中国国家知识产权局、申请号为202210764666.9、申请名称为“界面显示方法和装置”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。
技术领域
本申请涉及终端技术领域,尤其涉及一种界面显示方法和装置。
背景技术
随着互联网的普及和发展,为满足不同用户对于终端设备的使用需求,终端设备的桌面中可以显示的元素越来越多。通常情况下,用户可以通过触发该桌面中的任一元素,拖拽该元素或者将该元素移动到桌面中的其他位置。
然而,当用户误触到该界面中的任一元素时,终端设备可以响应于用户误触的操作对元素快速进行拖拽或者移动,使得用户可能无法及时察觉到误触时移动的元素。
发明内容
本申请实施例提供一种界面显示方法和装置,终端设备可以在检测到目标元素放置到目标位置时,在该目标元素的周围产生涟漪效果,使得用户可以及时察觉到可能移动的目标元素。
第一方面,本申请实施例提供一种界面显示方法,方法包括:终端设备显示第一界面;第一界面包括多个元素;终端设备接收针对多个元素中目标元素的第一操作;响应于第一操作,终端设备将目标元素从第一位置移动到第二位置;终端设备将多个元素中围绕第二位置的第一层元素执行缩小显示和/或放大显示。这样,终端设备可以在检测到目标元素放置到目标位置时,在该目标元素的周围产生涟漪效果,使得用户可以及时察觉到可能移动的目标元素。
其中,第一位置可以为目标元素的起始位置,第二位置可以为目标元素产生涟漪的位置,或可以理解为本申请实施例中描述的目标位置;第一位置与第二位置可以相同也可以不同。第一操作可以为本申请实施例中描述的目标操作。
在一种可能的实现方式中,方法还包括:终端设备将多个元素中围绕第二位置的第二层元素执行缩小显示和/或放大显示;其中,第二层元素与第一层元素均为以第二位置为中心的元素,第二层元素为第一层元素外侧的元素。这样,终端设备可以基于第一层元素以及第二层元素的波动,在目标元素周围形成带有两层波纹的涟漪效果,使得用户可以及时察觉到可能移动的目标元素。
其中,第一层元素可以为本申请实施例中描述的第一范围对应的元素,第二层元素可以为本申请实施例中描述的第二范围对应的元素。
在一种可能的实现方式中,终端设备将多个元素中围绕第二位置的第二层元素执行缩小显示和/或放大显示,包括:在终端设备将第一层元素执行缩小显示和/或放大显 示的第一时间阈值后,终端设备将第二层元素执行缩小显示和/或放大显示。这样,终端设备可以在第一层元素波动的一段时间阈值后,执行第二层元素的波动,通过两层元素之间波动的时间差,形成类似水波纹的效果,使得涟漪效果更为生动。
其中,该第一时间阈值的取值可以为50ms或其他数值。
在一种可能的实现方式中,第二层元素缩小显示时缩小的比例大于第一层元素缩小显示时缩小的比例,第二层元素放大显示时放大的比例小于第一层元素放大显示时放大的比例。这样,使得终端设备可以通过对不同层元素的缩放比例的调节,呈现出波形依次衰减的动态效果,使得涟漪效果更为生动。
在一种可能的实现方式中,方法还包括:终端设备将多个元素中围绕第二位置的第N层元素执行缩小显示和/或放大显示;其中,第N层元素与第二层元素均为以第二位置为中心的元素,第N层元素为第二层元素外侧的元素,N大于2。这样,终端设备可以基于N层元素在目标元素周围形成带有N层波纹的涟漪效果,使得用户可以及时察觉到可能移动的目标元素。
在一种可能的实现方式中,方法还包括:在第M层元素中包括停靠栏中的元素时,终端设备将停靠栏中的元素执行缩小显示和/或放大显示;M小于或等于N。这样,在第M层元素中包括停靠栏中的元素时,终端设备也可以实现对于停靠栏中的元素的缩放显示,使得停靠栏中的元素也可以呈现出涟漪效果。
在一种可能的实现方式中,第N层元素缩小显示时缩小的比例大于第二层元素缩小显示时缩小的比例,第N层元素放大显示时放大的比例小于第二层元素放大显示时放大的比例。这样,使得终端设备可以通过对不同层元素的缩放比例的调节,呈现出波形依次衰减的动态效果,使得涟漪效果更为生动。
在一种可能的实现方式中,终端设备将多个元素中围绕第二位置的第一层元素执行缩小显示和/或放大显示,包括:终端设备在第一时刻对第一层元素进行缩小,并显示缩小的第一层元素;终端设备在第二时刻对缩小的第一层元素进行放大,并显示放大的第一层元素;终端设备在第三时刻对放大的第一层元素进行缩小,并显示第一层元素。这样,终端设备可以通过对图像先进行缩小再进行放大,进而进行缩小的方式,对第一层元素进行缩放,使得第一层元素呈现出动态的效果。
在一种可能的实现方式中,缩小的第一层元素的尺寸小于第一层元素的尺寸,放大的第一层元素的尺寸大于第一层元素的尺寸。
在一种可能的实现方式中,终端设备将多个元素中围绕第二位置的第一层元素执行缩小显示和/或放大显示,包括:终端设备将多个元素中围绕第二位置的第一层元素,以第二位置为中心执行向内缩小显示和/或以第二位置为中心向外放大显示。这样,使得第一层元素可以呈现出以第二位置处的目标元素为中心,由内而外向外波动的动态效果。
在一种可能的实现方式中,响应于第一操作,终端设备将目标元素从第一位置移动到第二位置,包括:响应于第一操作,终端设备对目标元素进行缩小,并显示缩小的目标元素;在第一操作持续作用于目标元素的情况下,终端设备对缩小的目标元素进行放大,并显示放大的目标元素;终端设备将放大的目标元素从第一位置移动到第二位置。这样,终端设备可以在接收到用户触发目标元素的第一设备时,对目标元素 进行缩小以及放大,使得用户可以察觉到触发的目标元素。
在一种可能的实现方式中,终端设备将放大的目标元素从第一位置移动到第二位置,包括:在终端设备将放大的目标元素从第一位置移动到第二位置的过程中,确定第二位置处存在第一元素的情况时,终端设备将第一元素移动至第三位置,并将放大的目标元素从第一位置移动到第二位置。这样,终端设备也可以在确定第二位置处存在元素时,将该元素移走至其他位置处,并在目标元素移动到该第二位置时触发涟漪效果。
在一种可能的实现方式中,目标元素的尺寸与多个元素中围绕第二位置的层数正相关。这样,终端设备可以在目标元素的尺寸越大时,呈现出更多的波纹,模拟出不同大小的物体掷入水中时,物体的面积以及质量越大形成的涟漪范围越大且波形的幅度越大的动态效果。
在一种可能的实现方式中,目标元素的尺寸与第一层覆盖的范围正相关。这样,终端设备可以在目标元素的尺寸越大时,呈现出更大的波纹,模拟出不同大小的物体掷入水中时,物体的面积以及质量越大形成的波形范围更大的效果。
在一种可能的实现方式中,目标元素为文件夹中的元素,方法还包括:终端设备接收针对文件夹的第二操作;终端设备显示第一界面,包括:响应于第二操作,终端设备显示第一界面。这样,终端设备可以实现在文件夹中存在多个元素时,基于对文件夹中的目标元素的触发,在文件夹中呈现出涟漪效果。
在一种可能的实现方式中,目标元素包括:应用图标、卡片、小组件、文件夹、卡片集、图像图标、或相册图标。
第二方面,本申请实施例提供一种界面显示装置,界面显示装置包括处理单元以及显示单元,显示单元,用于显示第一界面;第一界面包括多个元素;处理单元,用于接收针对多个元素中目标元素的第一操作;响应于第一操作,处理单元,用于将目标元素从第一位置移动到第二位置;显示单元,用于将多个元素中围绕第二位置的第一层元素执行缩小显示和/或放大显示。
在一种可能的实现方式中,显示单元,还用于将多个元素中围绕第二位置的第二层元素执行缩小显示和/或放大显示;其中,第二层元素与第一层元素均为以第二位置为中心的元素,第二层元素为第一层元素外侧的元素。
在一种可能的实现方式中,显示单元,具体用于将第一层元素执行缩小显示和/或放大显示的第一时间阈值后,将第二层元素执行缩小显示和/或放大显示。
在一种可能的实现方式中,第二层元素缩小显示时缩小的比例大于第一层元素缩小显示时缩小的比例,第二层元素放大显示时放大的比例小于第一层元素放大显示时放大的比例。
在一种可能的实现方式中,显示单元,还用于将多个元素中围绕第二位置的第N层元素执行缩小显示和/或放大显示;其中,第N层元素与第二层元素均为以第二位置为中心的元素,第N层元素为第二层元素外侧的元素,N大于2。
在一种可能的实现方式中,在第M层元素中包括停靠栏中的元素时,显示单元,还用于将停靠栏中的元素执行缩小显示和/或放大显示;M小于或等于N。
在一种可能的实现方式中,第N层元素缩小显示时缩小的比例大于第二层元素缩 小显示时缩小的比例,第N层元素放大显示时放大的比例小于第二层元素放大显示时放大的比例。
在一种可能的实现方式中,处理单元,具体用于在第一时刻对第一层元素进行缩小,显示单元,具体用于并显示缩小的第一层元素;处理单元,具体用于在第二时刻对缩小的第一层元素进行放大,显示单元,具体用于显示放大的第一层元素;在第三时刻对放大的第一层元素进行缩小,并显示第一层元素。
在一种可能的实现方式中,缩小的第一层元素的尺寸小于第一层元素的尺寸,放大的第一层元素的尺寸大于第一层元素的尺寸。
在一种可能的实现方式中,显示单元,具体用于将多个元素中围绕第二位置的第一层元素,以第二位置为中心执行向内缩小显示和/或以第二位置为中心向外放大显示。
在一种可能的实现方式中,响应于第一操作,处理单元,具体用于对目标元素进行缩小,显示单元,具体用于显示缩小的目标元素;在第一操作持续作用于目标元素的情况下,处理单元,具体用于对缩小的目标元素进行放大,显示单元,具体用于显示放大的目标元素;处理单元,具体用于将放大的目标元素从第一位置移动到第二位置。
在一种可能的实现方式中,在终端设备将放大的目标元素从第一位置移动到第二位置的过程中,确定第二位置处存在第一元素的情况时,处理单元,具体用于将第一元素移动至第三位置,并将放大的目标元素从第一位置移动到第二位置。
在一种可能的实现方式中,目标元素的尺寸与多个元素中围绕第二位置的层数正相关。
在一种可能的实现方式中,目标元素的尺寸与第一层覆盖的范围正相关。
在一种可能的实现方式中,目标元素为文件夹中的元素,处理单元,具体用于接收针对文件夹的第二操作;响应于第二操作,显示单元,具体用于显示第一界面。
在一种可能的实现方式中,目标元素包括:应用图标、卡片、小组件、文件夹、卡片集、图像图标、或相册图标。
第三方面,本申请实施例提供一种终端设备,包括处理器和存储器,存储器用于存储代码指令;处理器用于运行代码指令,使得终端设备以执行如第一方面或第一方面的任一种实现方式中描述的方法。
第四方面,本申请实施例提供一种计算机可读存储介质,计算机可读存储介质存储有指令,当指令被执行时,使得计算机执行如第一方面或第一方面的任一种实现方式中描述的方法。
第五方面,一种计算机程序产品,包括计算机程序,当计算机程序被运行时,使得计算机执行如第一方面或第一方面的任一种实现方式中描述的方法。
应当理解的是,本申请的第二方面至第五方面与本申请的第一方面的技术方案相对应,各方面及对应的可行实施方式所取得的有益效果相似,不再赘述。
附图说明
图1为本申请实施例提供的一种终端设备的硬件结构示意图;
图2为本申请实施例提供的一种终端设备的软件结构示意图;
图3为本申请实施例提供的一种触发涟漪效果的界面示意图;
图4为本申请实施例提供的另一种触发涟漪效果的界面示意图;
图5为本申请实施例提供的一种文件夹中触发涟漪效果的界面示意图;
图6为本申请实施例提供的一种涟漪效果的界面示意图;
图7为本申请实施例提供的另一种涟漪效果的界面示意图;
图8为本申请实施例提供的再一种触发涟漪效果的界面示意图;
图9为本申请实施例提供的一种基于相册图标触发涟漪效果的界面示意图;
图10为本申请实施例提供的又一种触发涟漪效果的界面示意图;
图11为本申请实施例提供的另一种基于相册图标触发涟漪效果的界面示意图;
图12为本申请实施例提供的一种界面显示装置的结构示意图;
图13为本申请实施例提供的另一种终端设备的硬件结构示意图。
具体实施方式
为了便于清楚描述本申请实施例的技术方案,在本申请的实施例中,采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分。例如,第一值和第二值仅仅是为了区分不同的值,并不对其先后顺序进行限定。本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定,并且“第一”、“第二”等字样也并不限定一定不同。
需要说明的是,本申请中,“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其他实施例或设计方案更优选或更具优势。确切而言,使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
本申请中,“至少一个”是指一个或者多个,“多个”是指两个或两个以上。“和/或”,描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B的情况,其中A,B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达,是指的这些项中的任意组合,包括单项(个)或复数项(个)的任意组合。例如,a,b,或c中的至少一项(个),可以表示:a,b,c,a和b,a和c,b和c,或a、b和c,其中a,b,c可以是单个,也可以是多个。
可以理解的是,当用户误触到该界面中的任一元素,用户的误触可能会使得桌面中的任一元素发生移动。此时,即使用户察觉到可能碰到终端设备并查看终端设备,但由于响应于用户误触操作时,终端设备对元素进行快速移动后显示处于静止状态的桌面,使得用户很难察觉到误触的元素。
有鉴于此,本申请实施例提供一种界面显示方法,终端设备显示第一界面;第一界面包括多个元素;终端设备接收针对多个元素中目标元素的第一操作;响应于第一操作,终端设备将目标元素从第一位置移动到第二位置;终端设备将多个元素中围绕第二位置的第一层元素执行缩小显示和/或放大显示。使得终端设备可以在接收到针对目标元素的误触的第一操作时,对目标元素周围的第一层元素进行缩放,进而呈现出涟漪效果,使得用户可以及时察觉到误触的目标元素。
其中,该目标元素可以包括:应用图标、卡片、小组件、文件夹、卡片集、图像图标、或相册图标等;该多个元素中的任一元素也可以包括:应用图标、卡片、小组件、文件夹、卡片集、图像图标、或相册图标等,本申请实施例中对此不做限定。
可以理解的是,上述终端设备也可以称为终端,(terminal)、用户设备(user equipment,UE)、移动台(mobile station,MS)、移动终端(mobile terminal,MT)等。终端设备可以为拥有触摸屏的手机(mobile phone)、智能电视、穿戴式设备、平板电脑(Pad)、带无线收发功能的电脑、虚拟现实(virtual reality,VR)终端设备、增强现实(augmented reality,AR)终端设备、工业控制(industrial control)中的无线终端、无人驾驶(self-driving)中的无线终端、远程手术(remote medical surgery)中的无线终端、智能电网(smart grid)中的无线终端、运输安全(transportation safety)中的无线终端、智慧城市(smart city)中的无线终端、智慧家庭(smart home)中的无线终端等等。本申请的实施例对终端设备所采用的具体技术和具体设备形态不做限定。
因此,为了能够更好地理解本申请实施例,下面对本申请实施例的终端设备的结构进行介绍。示例性的,图1为本申请实施例提供的一种终端设备的硬件结构示意图。
终端设备可以包括处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,充电管理模块140,电源管理模块141,天线1,天线2,移动通信模块150,无线通信模块160,音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,传感器模块180,按键190,指示器192,摄像头193,以及显示屏194等。
可以理解的是,本申请实施例示意的结构并不构成对终端设备的具体限定。在本申请另一些实施例中,终端设备可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。处理器110中还可以设置存储器,用于存储指令和数据。
USB接口130是符合USB标准规范的接口,具体可以是Mini USB接口,Micro USB接口,USB Type C接口等。USB接口130可以用于连接充电器为终端设备充电,也可以用于终端设备与***设备之间传输数据。也可以用于连接耳机,通过耳机播放音频。该接口还可以用于连接其他终端设备,例如AR设备等。
充电管理模块140用于从充电器接收充电输入。其中,充电器可以是无线充电器,也可以是有线充电器。电源管理模块141用于连接充电管理模块140与处理器110。
终端设备的无线通信功能可以通过天线1,天线2,移动通信模块150,无线通信模块160,调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。终端设备中的天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。
移动通信模块150可以提供应用在终端设备上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(low noise amplifier,LNA)等。移动通信模块150可以由天线1接收电磁波,并对接收的电磁 波进行滤波,放大等处理,传送至调制解调处理器进行解调。
无线通信模块160可以提供应用在终端设备上的包括无线局域网(wirelesslocal area networks,WLAN)(如无线保真(wireless fidelity,Wi-Fi)网络),蓝牙(bluetooth,BT),全球导航卫星***(global navigation satellite system,GNSS),调频(frequency modulation,FM)等无线通信的解决方案。
终端设备通过GPU,显示屏194,以及应用处理器等实现显示功能。GPU为图像处理的微处理器,连接显示屏194和应用处理器。GPU用于执行数学和几何计算,用于图形渲染。
显示屏194用于显示图像,视频等。显示屏194包括显示面板。在一些实施例中,终端设备可以包括1个或N个显示屏194,N为大于1的正整数。
可能的实现方式中,当该的终端设备为具有触控功能的设备时,显示屏194与触控屏可以结合在一起,当用户对显示屏194的相应位置处进行触发时,相当于用户对触控屏的相应位置处进行触发。
其中,该触发可以包括点击操作以及长按操作等。该点击操作可以为在显示屏194相应位置处按下并在预设时间阈值内抬起的操作;该长按操作可以为在显示屏194相应位置处按下并持续按压超过预设时间阈值后抬起的操作。可以理解的是,本申请实施例中描述的点击操作以及长按操作均可以应用于显示屏194与触控屏结合在一起的终端设备中,后文将不再赘述。
可能的实现方式中,显示屏194与触控屏也可以不结合在一起,此时本申请实施例中的点击操作以及长按操作均可以替换为其他操作等,本申请实施例中对此不做限定。
终端设备可以通过ISP,摄像头193,视频编解码器,GPU,显示屏194以及应用处理器等实现拍摄功能。
摄像头193用于捕获静态图像或视频。在一些实施例中,终端设备可以包括1个或N个摄像头193,N为大于1的正整数。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展终端设备的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码,可执行程序代码包括指令。内部存储器121可以包括存储程序区和存储数据区。其中,内部存储器121用于存储本申请实施例描述的界面显示方法对应的可执行程序代码,进而由处理器110执行调用该可执行程序代码。
终端设备可以通过音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出,也用于将模拟音频输入转换为数字音频信号。扬声器170A,也称“喇叭”,用于将音频电信号转换为声音信号。终端设备可以通过扬声器170A收听音乐,或收听免提通话。受话器170B,也称“听筒”,用于将音频电信号转换成声音信号。当终端设备接听电话或语音信息时,可以通过将受话器170B靠近人耳接听语音。耳机接口170D用于连接有线耳机。
麦克风170C,也称“话筒”,“传声器”,用于将声音信号转换为电信号。本申请实施例 中,终端设备可以基于麦克风170C接收用于唤醒终端设备的声音信号,并将声音信号转换为可以进行后续处理的电信号,如本申请实施例中描述的声纹数据,该终端设备可以拥有至少一个麦克风170C。
传感器模块180可以包括下述一种或多种传感器,例如:压力传感器,陀螺仪传感器,气压传感器,磁传感器,加速度传感器,距离传感器,接近光传感器,指纹传感器,温度传感器,触摸传感器,环境光传感器,或骨传导传感器等(图1中未示出)。
按键190包括开机键,音量键等。按键190可以是机械按键。也可以是触摸式按键。终端设备可以接收按键输入,产生与终端设备的用户设置以及功能控制有关的键信号输入。指示器192可以是指示灯,可以用于指示充电状态,电量变化,也可以用于指示消息,未接来电,通知等。
终端设备的软件***可以采用分层架构,事件驱动架构,微核架构,微服务架构,或云架构等,在此不再赘述。
本申请实施例以分层架构的安卓(android)***为例,示例性说明终端设备的软件结构。
示例性的,图2为本申请实施例提供的一种终端设备的软件结构示意图。如图2所示,分层架构将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,可以将Android***分为四层,从上至下分别为:应用程序层,应用程序框架层,安卓运行时(android runtime)和***库,以及内核层。
应用程序层可以包括一系列应用程序包。如图2所示,应用程序包可以包括相机,日历,电话,地图,电话,音乐,设置,邮箱,视频,社交等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface,API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图2所示,应用程序框架层可以包括窗口管理器,内容提供器,资源管理器,视图***,通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小,判断是否有状态栏,锁定屏幕,触摸屏幕,拖拽屏幕,截取屏幕等。
本申请实施例中,窗口管理器用于根据用户触摸屏幕的操作,确定桌面中的第一元素的显示方式;例如将第一元素移动至屏幕的下部区域或者对第一元素进行缩小并移动至屏幕的下部区域。
内容提供器用来存放和获取数据,并使这些数据可以被应用程序访问。数据可以包括视频,图像,音频,拨打和接听的电话,浏览历史和书签,电话簿等。
视图***包括可视控件,例如显示文字的控件,显示图片的控件等。视图***可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如,包括短信通知图标的显示界面,可以包括显示文字的视图以及显示图片的视图。
资源管理器为应用程序提供各种资源,比如本地化字符串,图标,图片,布局文件,视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息,可以用于传达告知类型的消息,可以短暂停留后自动消失,无需用户交互。比如通知管理器被用于告知下载完成,消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在***顶部状态栏的通知,例 如后台运行的应用程序的通知,还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息,发出提示音,终端设备振动,指示灯闪烁等。
android runtime包括核心库和虚拟机。android runtime负责安卓***的调度和管理。
核心库包含两部分:一部分是java语言需要调用的功能函数,另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理,堆栈管理,线程管理,安全和异常的管理,以及垃圾回收等功能。
***库可以包括多个功能模块。例如:表面管理器(surface manager),媒体库(Media Libraries),三维图形处理库(例如:OpenGL ES),2D图形引擎(例如:SGL)等。
表面管理器用于对显示子***进行管理,并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频,视频格式回放和录制,以及静态图像文件等。媒体库可以支持多种音视频编码格式,例如:MPEG4,H.264,MP3,AAC,AMR,JPG,PNG等。
三维图形处理库用于实现三维图形绘图,图像渲染,合成,和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动,摄像头驱动,音频驱动,传感器驱动。
下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以独立实现,也可以相互结合,对于相同或相似的概念或过程可能在某些实施例中不再赘述。
本申请实施例中,不同尺寸的元素将会产生不同的涟漪效果。具体的,场景一、当目标元素的尺寸为1×1等时,终端设备可以在接收到用户的目标操作时,对目标元素周围的元素进行缩放处理,使得目标元素周围的元素可以产生较小范围的涟漪效果(如在该1×1的元素周围产生2或3个波形);或者,场景二、当目标元素的尺寸为2×2等时,终端设备可以在接收到用户的目标操作时,对该目标元素周围的元素进行缩放处理,使得目标元素周围的元素产生适中的涟漪效果(如在该2×2的元素周围产生3或4个波形);或者,场景三、当目标元素的尺寸为2×4等时,终端设备可以在接收到用户的目标操作时,对目标元素周围的元素进行缩放处理,使得目标元素周围的元素产生较大范围的涟漪效果(如在该2×4的元素周围产生4或5个波形)。其中,目标操作可以为针对目标元素的长按操作以及拖拽操作,使得目标元素产生位置;或者该目标操作也可以为针对目标元素的长按操作,本申请实施例中对此不做限定。
其中,该涟漪效果可以理解为向水中掷入物体时,该掷入物体的周围产生的类似水波纹的效果,可以理解的是,终端设备可以通过对目标元素周围的元素的缩放模拟水波纹的效果。
可以理解的是,目标元素的尺寸不限于上述,如该目标元素的尺寸也可以为2×3、1×2、3×3、或4×4等数值,适应的,不同尺寸的元素也可以带来不同数量的波形以及不同幅度的缩放效果,本申请实施例中对此不做限定。
可以理解的是,本申请实施例中以终端设备为手机为例进行示例说明,该示例并不构成对本申请实施例的限定。
场景一、当目标元素为1×1的应用图标或文件夹图标等时,终端设备可以在接收到用户的目标操作时,对目标元素周围的元素进行缩放处理,使得该目标元素周围的元素产生较小范围的涟漪效果(如在该1×1的元素周围产生2或3个波形)。
可以理解的是,在介绍尺寸为1×1的目标元素对应的涟漪效果前,对触发涟漪效果的目标操作进行介绍。示例性的,图3为本申请实施例提供的一种触发涟漪效果的界面示意图。
终端设备显示如图3中的a所示的界面,该界面可以为终端设备的桌面,该界面中可以显示多个1×1的元素,如包括目标元素301、界面底部停靠(dock)栏中的元素、以及显示在目标元素301周围的多个元素。其中,图3中的a所示的界面中的任一元素可以为应用图标、和/或文件夹图标等;该界面中的目标元素301的尺寸可以为默认尺寸,例如该目标元素301的比例可以为100%。
在如图3中的a所示的界面中,当终端设备接收到用户针对该目标元素301的按压操作或其他触发操作时,终端设备可以显示如图3中的b所示的界面。在图3中的b所示的界面中,响应于用户的按压操作,终端设备可以对目标元素301进行缩小,得到缩小的目标元素301,例如将目标元素301缩小至90%等数值,指示用户选中目标元素301。
在如图3中的b所示的界面中,按压操作持续作用于目标元素301的时间超过一定阈值,或理解为在按压操作不松手的情况下接收针对目标元素301的长按操作,终端设备可以显示如图3中的c所示的界面。在图3中的c所示的界面中,响应于用户的持续按压操作或者长按操作,终端设备可以对图3中的b所示的界面中的缩小的目标元素301进行放大,得到放大的目标元素301,例如得将缩小的目标元素301进行放大至110%等数值。
可以理解的是,上述图3中的a-图3中的c所示的过程也可以统称为,终端设备在图3中的a所示的界面中接收针对目标元素301的长按操作,该长按操作可以包括针对目标元素301的按压操作、以及按压操作持续作用于该目标元素301时的长按操作。
例如,当终端设备在图3中的a所示的界面中接收针对目标元素301的长按操作时,终端设备可以对目标元素301进行突出显示(如对目标元素301进行放大显示,如图3中的c所示的界面中的目标元素301的尺寸为图3中的a所示的界面中的目标元素301的尺寸的110%)。
进一步的,如图3中的c所示的界面中,在按压操作持续位于该目标元素301的情况下,当终端设备接收到用户拖拽目标元素301的操作时,终端设备可以显示如图3中的d所示的界面。如图3中的d所示的界面,该界面中的目标元素301可以保持突出显示的状态,且该目标元素301拖拽的起始位置处显示有虚线框302,该虚线框302用于指示用户松手时目标元素301回归的位置。
可以理解的是,如图3中的d所示的界面,当用户拖拽目标元素301不超出以该目标元素301为中心的一定范围时,该虚线框302可以保持在图3中的d所示的位置处;或者,当用户拖拽该目标元素301超出以该目标元素301为中心的一定范围时,该虚线框302可以显示在其他位置(参见图4对应的实施例)。其中,当用户拖拽该目标元素301超出以该目标元素301为中心的一定范围时,可以理解为用户可能要将目标元素301移动至其他 位置上,因此终端设备将会根据用户拖拽目标元素301的位置实时确定,用于松手时目标元素301可以回归的位置(或理解为目标元素301对应的虚线框的位置)。
其中,该一定范围可以为以目标元素301为中心、半径为R0的圆所在的范围,该R0的取值可以小于预设的距离阈值。该预设的距离阈值可以为目标元素301的中心与距离目标元素301最近的元素(如目标元素301右侧的元素等)的中心之间的距离。
在目标元素301位于该图3中的d所示的界面中所在位置的情况下,当终端设备接收到用户松手的操作时,终端设备可以将该目标元素301放置在虚线框302所在位置处,并显示如图3中的e所示的界面。在该图3中的e所示的界面中,该目标元素301取消突出显示,并恢复至图3中的a所示的界面中的显示状态和尺寸。
可以理解的是,在图3中的e所示的界面中,终端设备则可以按照以目标元素301为中心从里向外的方向(如箭头的指向),对目标元素301周围的元素依次进行涟漪效果的显示。例如,终端设备可以优先对目标元素301的第一范围303中(以及第一范围303经过的)除目标元素301以外的元素进行缩放处理(具体缩放处理过程可以参见图6对应的实施例)。该第一范围303中除目标元素301以外的元素(或称为第一范围303对应的元素或第一层元素,如图3中的e所示的框图中包括波点的元素)可以包括:元素310、元素311元素312以及元素313。
其中,该第一范围303对应的元素可以为,目标元素301周围的任一元素的中心与该目标元素301的中心之间的距离小于第一距离阈值时对应的元素。或者,第一范围303对应的元素也可以为以目标元素301为圆心,半径为R1的圆所在范围内(以及圆经过)的除目标元素301以外的元素。
进一步的,在对第一范围303对应的元素进行缩放处理的一段时间阈值后,终端设备可以对目标元素301周围的第二范围304中(以及第二范围304经过的)除第一范围303以外的元素进行缩放处理。该第二范围304中除第一范围303以外的元素(或称为第二范围304对应的元素或第二层元素,如图3中的e所示的框图中包括网格的元素)可以包括:元素320、元素321、元素322、元素323以及元素324。其中,各范围对应的元素均以目标元素所在的位置为中心。
其中,该第二范围304对应的元素可以为,目标元素301周围的任一元素的中心与该目标元素301的中心之间的距离大于或等于第一距离阈值,且小于第二距离阈值时对应的元素。或者,第二范围304对应的元素也可以为以目标元素301为圆心,半径为R2的圆所在范围内(以及圆经过)的除第一范围303中的元素以外的元素,R2大于R1。该第一范围303中的元素可以包括:第一范围303对应的元素以及目标元素301。
可能的实现方式中,在对第二范围304对应的元素进行缩放处理的一段时间阈值后,终端设备可以对目标元素301周围的第三范围305中(以及第三范围305经过的)除第二范围304以及第一范围303以外的元素进行缩放处理。该第三范围305中除第二范围304以及第一范围303以外的元素(或称为第三范围305对应的元素,如图3中的e所示到框图中包括斜线的元素)可以包括:元素330、元素331、元素332、元素333、元素334、元素335、元素336、以及元素337。
其中,该第三范围305对应的元素(可以为,目标元素301周围的任一元素的中心与该目标元素301的中心之间的距离大于或等于第二距离阈值,且小于第三距离阈值时对应 的元素,该第三距离阈值和第二距离阈值之间的差值、以及、第三距离阈值与第二距离阈值之间的差值可以相同也可以不同。或者,第三范围305对应的元素,也可以为以目标元素301为圆心,半径为R3的圆所在范围内(或以及经过)的除第二范围304中的元素以外元素,R3大于R2。该第二范围304中的元素可以包括:目标元素、第一范围303对应的元素、以及第二范围304对应的元素。
参见图3中的e所示的界面中的描述,该一段时间阈值的取值可以为50ms、60ms或80ms等数值,本申请实施例中对此不做限定。
可以理解的是,在终端设备显示图3中的e所示的界面的基础上,终端设备可以按照第一范围303、第二范围304以及第三范围305的顺序,依次对各范围所对应的元素进行缩放处理使得任一范围的元素的缩放呈现出波形。
可能的实现方式中,图4为本申请实施例提供的另一种触发涟漪效果的界面示意图。
在如图4中的a所示的界面,该界面中可以包括目标元素301、以及元素401,当终端设备接收到用户针对该目标元素301的按压操作时,终端设备可以对图4中的a所示的目标元素301进行缩小,并显示如图4中的b所示的界面。
在如图4中的b所示的界面中,在按压操作持续作用于该缩小的目标元素301(或称针对目标元素301的长按操作)时,终端设备可以对目标元素301进行突出显示,如显示如图4中的c所示的界面。
在如图4中的c所示的界面中,按压操作持续位于该目标元素301的情况下,当终端设备接收到用户拖拽目标元素301的操作时,终端设备可以显示如图4中的d所示的界面。如图4中的d所示的界面,该界面中的目标元素301可以保持突出显示的状态,目标元素301所在的位置不超出以该目标元素301为中心的一定范围,且该目标元素301拖拽的起始位置处显示有虚线框。
在如图4中的d所示的界面中,当终端设备接收到用户将该目标元素301拖拽至以元素401为中心的一定范围(如图4中的d所示的范围400)内时,终端设备可以先移动该元素401,例如将元素401向右移动一个图标的位置,使得该元素401在图4中的d所示的界面中的位置可以预留给目标元素301,如终端设备显示如图4中的e所示的界面。如图4中的e所示的界面,虚线框可以显示在元素401移动前所在的位置处。
进一步的,在目标元素301位于该图4中的e所示的界面中所在位置的情况下,当终端设备接收到用户松手的操作时,终端设备可以将该目标元素301放置在虚线框所在位置处,并显示如图4中的f所示的界面。在该图4中的f所示的界面中,该目标元素301取消突出显示,并恢复至图4中的a所示的界面中的显示状态和尺寸。
可以理解的是,当用户移动目标元素导致桌面中的其他元素的位置发生变化时,终端设备可以根据目标元素的位置,先挤走目标元素可能在用户松手时显示的目标位置处的元素,进而在接收到用户松手时,将该目标元素移动到目标位置处。
可能的实现方式中,在终端设备显示如图4中的f所示的界面的基础上,终端设备可以按照如图3中的e所示的界面中描述的第一范围303、第二范围304以及第三范围305的顺序,依次对以目标元素所在位置为中心的各范围所对应的元素进行缩放处理。
可能的实现方式中,当目标元素为文件夹时,终端设备也可以基于该文件夹中的元素实现涟漪效果。示例性的,图5为本申请实施例提供的一种文件夹中触发涟漪效果的界面示意图。
终端设备显示如图5中的a所示的界面,该界面中可以包括文件夹501,当终端设备接收到用户针对文件夹501的触发操作时,终端设备可以显示如图5中的b所示的界面。如图5中的b所示的界面,该界面可以为文件夹对应的界面,该界面中可以包括文件夹501中的多个元素,如目标元素502。其中,该触发操作可以为点击操作、长按操作或语音操作等。
如图5中的b所示的界面中,按压操作持续位于该目标元素502的情况下,当终端设备接收到用户拖拽目标元素502的操作时,终端设备可以显示如图5中的c所示的界面。如图5中的c所示的界面,该界面中的目标元素502可以保持突出显示的状态,目标元素502所在的位置不超出以该目标元素502为中心的一定范围,且该目标元素502拖拽的起始位置处显示有虚线框。
进一步的,在目标元素502位于该图5中的c所示的界面中所在位置的情况下,当终端设备接收到用户松手的操作时,终端设备可以将该目标元素502放置在虚线框所在位置处,并显示如图5中的d所示的界面。在该图5中的d所示的界面中,该目标元素502取消突出显示,并恢复至图5中的b所示的界面中的显示状态和尺寸。
可以理解的是,在终端设备显示如图5中的d所示的界面的基础上,终端设备可以按照如图3中的e所示的界面中描述的第一范围303、第二范围304以及第三范围305的顺序,依次对文件夹中以目标元素所在位置为中心的各范围所对应的元素进行缩放处理。
在图3(或图4或图5)对应的实施例的基础上,以目标元素周围的第一范围对应的元素(或理解为第一个波形)的运动为例进行示例说明。示例性的,图6为本申请实施例提供的一种涟漪效果的界面示意图。
终端设备显示图6中的a所示的界面,该图6中的a所示的界面与图3中的e所示的界面以及图4中的f所示的界面类似,在此不再赘述;该图6中的a所示的界面中的第一范围303对应的元素可以显示为100%的尺寸,该处于100%尺寸的元素可以理解为元素的第一状态。
在图6中的a所示的界面中,终端设备可以对第一范围303对应的元素进行缩小,例如终端设备可以逐步对处于第一状态的第一范围303对应的元素进行缩小,如将第一范围303对应的元素缩小至96%等数值,进而终端设备显示如图6中的b所示的界面,该处于96%等数值的缩小的元素可以理解为元素的第二状态。
可以理解的是,在对第一范围303对应的元素进行缩小的过程中,第一范围303对应的各元素均可以朝向目标元素301方向进行缩小(或理解为以目标元素301为中心向内缩小),或者第一范围303对应的元素中的任一元素也可以自己为中心进行缩小,本申请实施例中对该缩小的方式不做具体限定。
在如图6中的b所示的界面中,终端设备可以对缩小的第一范围303对应的元素进行放大,例如终端设备可以逐步对处于第二状态的第一范围303对应的元素进行放大,如将第一范围303对应的元素的放大至103%等数值,进而终端设备显示如图6中的c所示的 界面,该处于103%等数值的放大的元素可以理解为元素的第三状态。
可以理解的是,在对第一范围303对应的元素进行放大的过程中,第一范围303对应的各元素均可以朝向远离目标元素301方向进行放大(或理解为以目标元素301为中心向外放大),或者第一范围303对应的元素中的任一元素也可以自己为中心进行放大,本申请实施例中对该放大的方式不做具体限定。
进一步的,在如图6中的c所示的界面中,终端设备可以对放大的第一范围303对应的元素进行缩小,例如终端设备可以逐步对处于第三状态的第一范围303对应的元素进行缩小,例如将第一范围303对应的元素的缩小至100%等数值,进而终端设备显示如图6中的d所示的界面,使得第一范围303对应的元素回归至第一状态。
可以理解的是,在对第一范围303对应的元素进行缩放的过程中,第一范围303对应的各元素缩放效果一致。
可能的实现方式中,终端设备可以基于图6对应的实施例实现对第一范围303对应的元素的缩放,使得第一范围303对应的元素呈现出第一个波形后,重复显示该第一个波形,并在接收到用户针对桌面的任一操作时,结束该波形的显示,并显示如图6中的d所示的界面。
可能的实现方式中,终端设备可以基于图6对应的实施例实现对第一范围303对应的元素的缩放,使得第一范围303对应的元素呈现出涟漪的效果。该第一范围303对应的元素呈现的涟漪效果,仅作为目标元素301的第一个波形的涟漪效果,通常情况下为了呈现出更为生动的涟漪效果,终端设备可以为尺寸为1×1的目标元素301设置2-3个波形,使得多个波形之间的动效,可以模拟出向水中掷入物体时水面波纹的扩散与传递。
示例性的,终端设备可以按照图3中的e所示的界面中的第二范围304对应的元素的缩放,呈现出第二个波形的涟漪效果,并且按照第三范围305对应的元素的缩放,呈现出第三个波形的涟漪效果。其中,任一个波形的显示时长可以为150ms等数值,终端设备可以在显示第一个波形的50ms后,显示第二个波形;在显示第二个波形的50ms后显示第三个波形,各个波形依次显示,更能够体现出动态的涟漪效果。
可以理解的是,终端设备对第二个波形以及第三个波形进行缩放的过程可以参见图6对应的实施例中的描述,在此不再赘述。
可能的实现方式中,为了呈现出更为生动的涟漪效果,终端设备可以为各波形设置不同的显示时长,或者为各波形之间的显示时间间隔设置不同的数值,本申请实施例中对此不做限定。
为了模拟出向水中掷入物体时水面波纹依次衰减的情况,终端设备可以对不同的波形设置不同的缩放比例。示例性的,表1为本申请实施例提供的一种目标元素为1×1时波形的缩放比例示意表,以波形为3为例进行示例说明。
表1目标元素为1×1时波形的缩放比例示意表
可以理解的是,当波形缩小和放大的比例差值(或称为缩放差值)越大时,缩放的幅度越大,波形的幅度也就越大。如图1所示,第一个波形的幅度大于第二个波形的幅度,第二个波形的幅度大于第三个波形的幅度,由此呈现出波形依次衰减的动态效果。
可能的实现方式中,以表1中描述的波形的缩放数值为例,对1×1的目标元素放置在目标位置时产生的涟漪效果进行示例说明,该示例并不构成对本申请实施例的限定。示例性的,图7为本申请实施例提供的另一种涟漪效果的界面示意图。
在图7对应的实施例中,以波形之间的时间间隔为50ms,且任一波形的显示时长为150ms为例,对1×1的目标元素产生涟漪的效果进行示例说明。
在终端设备基于图3或图4对应的实施例,触发终端设备显示图7中的a所示的界面的基础上,终端设备可以基于图7中的b所示的界面至图7中的f所示的界面,在目标元素301的周围显示包含多个波形的涟漪效果。
在图7中的a所示的界面,终端设备可以对第一范围303对应的元素按照表1中的96%的缩小比例进行缩小,呈现出第一个波形,使得终端设备显示如图7中的b所示的界面。
当由图7中的a所示的界面到图7中的b所示的界面的时长为50ms时,则终端设备可以在显示第一个波形的50ms后,对图7中的b所示的界面中的第二范围304对应的元素进行缩小,例如终端设备可以对第二范围304对应的元素按照表2中的98%的缩小比例进行缩小,呈现出第二个波形,使得终端设备显示如图7中的c所示的界面。同步的,在图7中的b所示的界面中,终端设备可以对缩小的第一范围303对应的元素按照表1中的103%的放大比例进行放大,继续呈现第一个波形,使得终端设备显示如图7中的c所示的界面。
当由图7中的b所示的界面到图7中的c所示的界面的时长为50ms时,则终端设备可以在显示第二个波形的50ms后,对图7中的c所示的界面中的第三范围305对应的元素进行缩小,例如终端设备可以对第三范围305对应的元素按照表1中的99.5%的缩小比例进行缩小,呈现出第三个波形,使得终端设备显示如图7中的d所示的界面。同步的,在图7中的c所示的界面中,终端设备可以对缩小的第二范围304对应的元素按照表1中的101%的放大比例进行放大,继续呈现第二个波形,使得终端设备显示如图7中的d所示的界面。同步的,在图7中的c所示的界面中,终端设备可以对放大至103%的第一范围303对应的元素缩小至100%,继续呈现第一个波形,使得终端设备显示如图7中的d所示的界面。
进一步的,在图7中的d所示的界面中,终端设备可以对缩小的第三范围305对应的元素按照表1中的100.5%的放大比例进行放大,使得终端设备显示如图7中的e所示的界面,继续呈现第三个波形。同步的,在图7中的d所示的界面中,终端设备可以对放大至101%的第二范围304对应的元素缩小至100%,继续呈现第二个波形,使得终端设备显示如图7中的e所示的界面。
进一步的,在图7中的e所示的界面中,终端设备可以对放大至100.5%的第三范围305对应的元素缩小至100%,继续呈现第三个波形,使得终端设备显示如图7中的f所示的界面。
可以理解的是,终端设备可以基于图7对应的实施例,显示对1×1目标元素对应的三个波形的涟漪效果。
可能的实现方式中,终端设备也可以在显示一次三个波形后,继续重复显示该三个波形,呈现出多次涟漪的效果,并在接收到用户针对桌面的任一操作时,结束三个波形对应的涟漪效果的显示;或者,终端设备也可以在显示一次三个波形后结束显示。
基于此,终端设备可以实现在误触到目标元素导致其拖拽到其他位置,并回归到目标位置时,在该目标位置周围产生涟漪效果,使得用户可以及时察觉到误触的目标元素。
场景二、当目标元素为2×2的卡片或小组件等时,终端设备可以在接收到用户的目标操作时,对目标元素周围的元素进行缩放处理,使得目标元素周围的元素产生适中的涟漪效果(如在该2×2的元素周围产生3或4个波形)。
示例性的,图8为本申请实施例提供的再一种触发涟漪效果的界面示意图。
终端设备显示图8中的a所示的界面,该界面中可以包括卡片801(或称为目标元素801)。
在如图8中的a所示的界面中,当终端设备接收到用户针对该目标元素801的长按操作时,终端设备可以对目标元素801进行突出显示,在按压操作持续位于该目标元素801的情况下,当终端设备接收到用户拖拽目标元素801的操作时,终端设备可以显示如图8中的b所示的界面。如图8中的b所示的界面,该界面中的目标元素801可以保持突出显示的状态,且该目标元素801拖拽的起始位置处显示有2×2的虚线框。
在目标元素801位于该图8中的b所示的界面中所在位置的情况下,当终端设备接收到用户松手的操作时,终端设备可以将该目标元素801放置在虚线框所在位置处,并显示如图8中的c所示的界面。在该图8中的c所示的界面中,该目标元素801取消突出显示,并恢复至图8中的a所示的界面中的显示状态和尺寸。
可以理解的是,在图8中的c所示的界面中,终端设备则可以按照以目标元素801为中心从里向外的方向,对目标元素801周围的元素依次进行缩放,进而呈现出涟漪效果。例如,终端设备可以优先对第一范围802对应的元素进行缩放,该第一范围802对应的元素可以包括:元素810、元素811元素812、元素813、元素814、以及元素815。
在对第一范围802对应的元素进行缩放处理的一段时间阈值后,终端设备可以对第二范围803对应的元素进行缩放处理,该第二范围803对应的元素可以包括:元素820、元素821、元素822、元素823、元素824、元素825、元素826、以及元素827。
在对第二范围803对应的元素进行缩放处理的一段时间阈值后,终端设备可以对第三范围804对应的元素进行缩放处理,该第三范围804对应的元素可以包括:元素830、元素831、元素832、元素833、元素834、以及元素835。
可能的实现方式中,在对第三范围804对应的元素进行缩放处理的一段时间阈值后,终端设备可以对第四范围805对应的元素进行缩放处理,该第四范围805对应的元素可以包括:元素840以及元素841,该元素840以及元素841可以为dock栏中的元素。
可以理解的是,图8对应的实施例中的第一范围、第二范围以及第三范围的定义可以参见图3对应的实施例中的描述;图8对应的实施例中的第一范围802可以大于图3对应的实施例中的第一范围303;图8对应的实施例中的第二范围803可以大于图3对应的实施例中的第二范围304;图8对应的实施例中的第三范围804可以大于图3对应的实施例中的第三范围305。
可以理解的是,终端设备对2×2的目标元素周围的任一范围(或理解为任一波形)进行缩放的过程可以参见图6对应的实施例中的描述,在此不再赘述。
可以理解的是,由于目标元素801的尺寸较大,因此为了模拟出不同大小的物体掷入水中时,物体的面积以及质量越大形成的涟漪范围越大且波形的幅度越大的动态效果,终端设备为2×2的目标元素的不同波形设置不同的缩放比例。示例性的,表2为本申请实施例提供的一种目标元素为2×2时波形的缩放比例示意表,以波形为4进行示例说明。
表2目标元素为2×2时波形的缩放比例示意表
参见表1以及表2中的任一个波形,如表1中1×1目标元素的第一个波形的缩放差值可以为7%,表2中2×2目标元素的第一个波形的缩放差值可以为9%,因此尺寸较大的目标元素,波形的幅度也越大,波形的数量也可以越多。
基于此,终端设备可以实现在误触到目标元素导致其拖拽到其他位置,并回归到目标位置时,在该目标位置周围产生涟漪效果,使得用户可以及时察觉到误触的目标元素;并且,目标元素的尺寸越大,涟漪效果中波形的幅度越明显。
可能的实现方式中,当该2×2的目标元素为图库应用中的相册图标时,终端设备也可以基于相册图标实现涟漪效果。示例性的,图9为本申请实施例提供的一种基于相册图标触发涟漪效果的界面示意图。
当终端设备接收到用户打开图库应用的操作时,终端设备可以显示如图9中的a所示的界面,该界面中可以包括:用于查找相册的文本框、用于创建相册的控件、用于查看相机应用中的其他功能的控件、用于查看图像的控件、用于查看相册的控件(该用于查看相册的控件为选中状态)、用于按照时间维度查看图像的控件、用于按照相册类别查看图像的控件以及多个相册。其中,该相册可以包括:包含20张图像的相机相册、包含110张图像的所有图像相册、包含12个视频的视频相册、包含22张图像的截屏录屏相册、包含25张图像的我的收藏相册901(或称为目标元素901)、包含22张图像的狗狗相册、包含12张图像的手机分享相册、以及包含22张图像的风景相册等。
在如图9中的a所示的界面中,当终端设备接收用户针对目标元素901的长按操作时,终端设备可以对目标元素901进行突出显示,在按压操作持续位于该目标元素901的情况下,当终端设备接收到用户拖拽目标元素901的操作时,终端设备可以显示如图9中的b所示的界面。如图9中的b所示的界面,该界面中的目标元素901可以保持突出显示的状态,且该目标元素901拖拽的起始位置处显示有虚线框。
在目标元素901位于该图9中的b所示的界面中所在位置的情况下,当终端设备接收到用户松手的操作时,终端设备可以将该目标元素901放置在虚线框所在位置处,并显示如图9中的c所示的界面。在该图9中的c所示的界面中,该目标元素901取消突出显示,并恢复至图9中的a所示的界面中的显示状态和尺寸。
在图9中的c所示的界面的基础上,终端设备可以实现对目标元素901周围的第一范围902对应的元素、以及第二范围903对应的元素等分别进行缩放,使得图9中的c所示的界面中的相册图标可以在目标元素901的周围呈现出涟漪效果。
示例性的,在图9中的c所示的界面中,终端设备可以对第一范围902对应的元素进行缩小,使得终端设备显示如图9中的d所示的界面;进而在图9中的所示的d界面中,终端设备可以对缩小的第一范围902对应的元素进行放大,使得终端设备显示如图9中的e所示的界面;进而在图9中的e所示的界面中,对放大的第一范围902对应的元素进行缩小,使得终端设备显示如图9中的f所示的界面,回归到第一范围902对应的元素在图9中的a所示的界面中的原始大小。
进一步的,终端设备可以在对第一范围902对应的元素进行缩放处理的50ms后,对第二范围903对应的元素进行缩放处理;并且,终端设备对第二范围903对应的元素进行缩放处理的方法可以参见图9中的c所示的界面-图9中的f所示的界面中的描述,在此不再赘述。
可以理解的是,由于图9对应的实施例中的第一范围902对应的各元素均为尺寸为2×2的元素,因此缩放处理过程中影响的元素的数量可以与图8中的c所示的界面中的第一范围802对应的元素的数量不同。并且,图9对应的实施例中的各元素的尺寸也使得图9中的c所示的界面中的尺寸为2×2的目标元素的周围仅可以形成两个波形。
可以理解的是,第一范围902的尺寸与第一范围802的尺寸可以相同,第二范围903的尺寸与第二范围803的尺寸可以相同。
可能的实现方式中,当该2×2的目标元素为图库应用中的图像图标时,终端设备也可以基于图像图标实现涟漪效果,且涟漪效果与图9对应的实施例中的相册图标的涟漪效果类似,在此不再赘述。
场景三、当目标元素为2×4的卡片、卡片集或者小组件等时,终端设备可以在接收到用户的目标操作时,对目标元素周围的元素进行缩放处理,使得目标元素周围的元素产生较大范围的涟漪效果(如在该2×4的元素周围产生4或5个波形)。
示例性的,图10为本申请实施例提供的又一种触发涟漪效果的界面示意图。
终端设备显示图10中的a所示的界面,该界面中可以包括卡片1001(或称为目标元素1001)。
在如图10中的a所示的界面中,当终端设备接收到用户针对该目标元素1001的长按操作时,终端设备可以对目标元素1001进行突出显示,在按压操作持续位于该目标元素1001的情况下,当终端设备接收到用户拖拽目标元素1001的操作时,终端设备可以显示如图10中的b所示的界面。如图10中的b所示的界面,该界面中的目标元素1001可以保持突出显示的状态,且该目标元素1001拖拽的起始位置处显示有2×4的虚线框。
在目标元素1001位于该图10中的b所示的界面中所在位置的情况下,当终端设备接收到用户松手的操作时,终端设备可以将该目标元素1001放置在虚线框所在位置处,并显示如图10中的c所示的界面。在该图10中的c所示的界面中,该目标元素1001取消突出显示,并恢复至图10中的a所示的界面中的显示状态和尺寸。
可以理解的是,在图10中的c所示的界面中,终端设备则可以按照以目标元素1001 为中心从里向外的方向,对目标元素1001周围的元素依次进行缩放,进而呈现出涟漪效果。例如,终端设备可以优先对第一范围1002对应的元素进行缩放,该第一范围1002对应的元素可以包括:元素1010、元素1011、元素1012、元素1013、元素1014、元素1015、元素1016、以及元素1017。
在对第一范围1002对应的元素进行缩放处理的一段时间阈值后,终端设备可以对第二范围1003对应的元素进行缩放处理,该第二范围1003对应的元素可以包括:元素1020、元素1021、元素1022、元素1023、元素1024、元素1025、元素1026、以及元素1027。
在对第二范围1003对应的元素进行缩放处理的一段时间阈值后,终端设备可以对第三范围1004对应的元素进行缩放处理,该第三范围1004对应的元素可以包括:元素1030、元素1031、元素1032、以及元素1033;并且,该元素1030、元素1031、元素1032、以及元素1033均可以为dock栏中的元素。
可以理解的是,该第一范围1002、第二范围1003以及第三范围1004可以形成三个波形;可能的实现方式中,终端设备也可以为2×4的目标元素设置5个波形。示例性的,表3为本申请实施例提供的一种目标元素为2×4时波形的缩放比例示意表,以波形为5进行示例说明。
表3目标元素为2×4时波形的缩放比例示意表
参见表1、表2以及表3中的任一个波形,如表1中1×1目标元素的第一个波形的缩放差值可以为7%,表2中2×2目标元素的第一个波形的缩放差值可以为9%,表3中2×4目标元素的第一个波形的缩放差值可以为12%,因此尺寸较大的目标元素时,波形的幅度也越大。
可以理解的是,表1、表2以及表3中各波形缩放的取值仅作为一种示例,并不能构成对本申请实施例的限定。
基于此,终端设备可以实现在误触到目标元素导致其拖拽到其他位置,并回归到目标位置时,在该目标位置周围产生涟漪效果,使得用户可以及时察觉到误触的目标元素;并且,目标元素的尺寸越大,涟漪效果中波形的幅度越明显。
可能的实现方式中,当该2×4的目标元素为图库应用中的相册图标时,终端设备也可以基于相册图标实现涟漪效果。示例性的,图11为本申请实施例提供的另一种基于相册图标触发涟漪效果的界面示意图。
终端设备显示如图11中的a所示的界面,该界面可以为相册的另一种显示风格。该界面中可以包括包含20张图像的相机相册(或称为目标元素1001)、包含12张图像的手机分享相册、以及包含22张图像的风景相册,该界面中显示的其他内容可以参见图9中的a所示的界面中的描述,在此不再赘述。其中,该手机分享相册以及风景相册的尺寸均可以 为2×3。
在如图11中的a所示的界面中,当终端设备接收用户针对目标元素1101的长按操作时,终端设备可以对目标元素1101进行突出显示,在按压操作持续位于该目标元素1101的情况下,当终端设备接收到用户拖拽目标元素1101的操作时,终端设备可以显示如图11中的b所示的界面。如图11中的b所示的界面,该界面中的目标元素1101可以保持突出显示的状态,且该目标元素1101的起始位置处显示有虚线框。
在目标元素1101位于该图11中的b所示的界面中所在位置的情况下,当终端设备接收到用户松手的操作时,终端设备可以将该目标元素1101放置在虚线框所在位置处,并显示如图11中的c所示的界面。在该图11中的c所示的界面中,该目标元素1101取消突出显示,并恢复至图11中的a所示的界面中的显示状态和尺寸。
在图11中的c所示的界面的基础上,终端设备可以实现对目标元素1101周围的第一范围1102对应的元素进行缩放,使得图11中的c所示的界面中的相册图标可以在目标元素1101的周围呈现出涟漪效果。例如,在图11中的c所示的界面中,终端设备可以对第一范围1102对应的元素进行缩小,使得终端设备显示如图11中的d所示的界面;进而在图11中的d所示的界面中,终端设备可以对缩小的第一范围1102对应的元素进行放大,使得终端设备显示如图11中的e所示的界面;进而在图11中的e所示的界面中,终端设备可以对放大的第一范围1102对应的元素进行缩小,使得终端设备显示如图11中的f所示的界面,回归到第一范围1102对应的元素的原始大小。其中,该第一范围1102对应的元素可以为:手机分享相册以及风景相册。
可以理解的是,由于图11对应的实施例中的第一范围1102对应的各元素均为尺寸为2×3的元素,因此缩放处理过程中影响的元素的数量可以与图10中的c所示的界面中的第一范围1002对应的元素的数量不同,该第一范围1102的尺寸与第一范围1002的尺寸可以相同。并且,图11对应的实施例中的目标元素1101周围的其他尺寸为2×3的元素,使得图11中的c所示的界面中的尺寸为2×4的元素可以形成1个波形。
可以理解的是,本申请实施例提供的界面显示方法不仅可以应用于桌面、文件夹、以及相册等场景中,还可以应用于包括多个元素的其他场景中,本申请实施例中对此不做限定。
可以理解的是,本申请实施例中描述的界面仅作为一种示例,并不能构成对本申请实施例的限定。
上面结合图3-图11,对本申请实施例提供的方法进行了说明,下面对本申请实施例提供的执行上述方法的装置进行描述。如图12所示,图12为本申请实施例提供的一种界面显示装置的结构示意图,该界面显示装置可以是本申请实施例中的终端设备,也可以是终端设备内的芯片或芯片***。
如图12所示,界面显示装置1200可以用于通信设备、电路、硬件组件或者芯片中,该界面显示装置包括:显示单元1201、以及处理单元1202。其中,显示单元1201用于支持界面显示装置1200执行的显示的步骤;处理单元1202用于支持界面显示装置1200执行信息处理的步骤。
具体的,本申请实施例提供一种界面显示装置1200,界面显示装置包括处理单元1202以及显示单元1201,显示单元1201,用于显示第一界面;第一界面包括多个元素;处理 单元1202,用于接收针对多个元素中目标元素的第一操作;响应于第一操作,处理单元1202,用于将目标元素从第一位置移动到第二位置;显示单元1201,用于将多个元素中围绕第二位置的第一层元素执行缩小显示和/或放大显示。
在一种可能的实现方式中,显示单元1201,还用于将多个元素中围绕第二位置的第二层元素执行缩小显示和/或放大显示;其中,第二层元素与第一层元素均为以第二位置为中心的元素,第二层元素为第一层元素外侧的元素。
在一种可能的实现方式中,显示单元1201,具体用于将第一层元素执行缩小显示和/或放大显示的第一时间阈值后,将第二层元素执行缩小显示和/或放大显示。
在一种可能的实现方式中,第二层元素缩小显示时缩小的比例大于第一层元素缩小显示时缩小的比例,第二层元素放大显示时放大的比例小于第一层元素放大显示时放大的比例。
在一种可能的实现方式中,显示单元1201,还用于将多个元素中围绕第二位置的第N层元素执行缩小显示和/或放大显示;其中,第N层元素与第二层元素均为以第二位置为中心的元素,第N层元素为第二层元素外侧的元素,N大于2。
在一种可能的实现方式中,在第M层元素中包括停靠栏中的元素时,显示单元1201,还用于将停靠栏中的元素执行缩小显示和/或放大显示;M小于或等于N。
在一种可能的实现方式中,第N层元素缩小显示时缩小的比例大于第二层元素缩小显示时缩小的比例,第N层元素放大显示时放大的比例小于第二层元素放大显示时放大的比例。
在一种可能的实现方式中,处理单元1202,具体用于在第一时刻对第一层元素进行缩小,显示单元1201,具体用于并显示缩小的第一层元素;处理单元1202,具体用于在第二时刻对缩小的第一层元素进行放大,显示单元1201,具体用于显示放大的第一层元素;在第三时刻对放大的第一层元素进行缩小,并显示第一层元素。
在一种可能的实现方式中,缩小的第一层元素的尺寸小于第一层元素的尺寸,放大的第一层元素的尺寸大于第一层元素的尺寸。
在一种可能的实现方式中,显示单元1201,具体用于将多个元素中围绕第二位置的第一层元素,以第二位置为中心执行向内缩小显示和/或以第二位置为中心向外放大显示。
在一种可能的实现方式中,响应于第一操作,处理单元1202,具体用于对目标元素进行缩小,显示单元1201,具体用于显示缩小的目标元素;在第一操作持续作用于目标元素的情况下,处理单元1202,具体用于对缩小的目标元素进行放大,显示单元1201,具体用于显示放大的目标元素;处理单元1202,具体用于将放大的目标元素从第一位置移动到第二位置。
在一种可能的实现方式中,在终端设备将放大的目标元素从第一位置移动到第二位置的过程中,确定第二位置处存在第一元素的情况时,处理单元1202,具体用于将第一元素移动至第三位置,并将放大的目标元素从第一位置移动到第二位置。
在一种可能的实现方式中,目标元素的尺寸与多个元素中围绕第二位置的层数正相关。
在一种可能的实现方式中,目标元素的尺寸与第一层覆盖的范围正相关。
在一种可能的实现方式中,目标元素为文件夹中的元素,处理单元1202,具体用于接收针对文件夹的第二操作;响应于第二操作,显示单元1201,具体用于显示第一界面。
在一种可能的实现方式中,目标元素包括:应用图标、卡片、小组件、文件夹、卡片集、图像图标、或相册图标。可能的实现方式中,该界面显示装置1200中也可以包括通信单元1203。具体的,通信单元用于支持界面显示装置1200执行数据的发送以及数据的接收的步骤。其中,该通信单元1203可以是输入或者输出接口、管脚或者电路等。
可能的实施例中,界面显示装置还可以包括:存储单元1204。处理单元1202、存储单元1204通过线路相连。存储单元1204可以包括一个或者多个存储器,存储器可以是一个或者多个设备、电路中用于存储程序或者数据的器件。存储单元1204可以独立存在,通过通信线路与界面显示装置具有的处理单元1202相连。存储单元1204也可以和处理单元1202集成在一起。
存储单元1204可以存储终端设备中的方法的计算机执行指令,以使处理单元1202执行上述实施例中的方法。存储单元1204可以是寄存器、缓存或者RAM等,存储单元1204可以和处理单元1202集成在一起。存储单元1204可以是只读存储器(read-only memory,ROM)或者可存储静态信息和指令的其他类型的静态存储设备,存储单元1204可以与处理单元1202相独立。
图13为本申请实施例提供的另一种终端设备的硬件结构示意图,如图13所示,该终端设备包括处理器1301,通信线路1304以及至少一个通信接口(图13中示例性的以通信接口1303为例进行说明)。
处理器1301可以是一个通用中央处理器(central processing unit,CPU),微处理器,特定应用集成电路(application-specific integrated circuit,ASIC),或一个或多个用于控制本申请方案程序执行的集成电路。
通信线路1304可包括在上述组件之间传送信息的电路。
通信接口1303,使用任何收发器一类的装置,用于与其他设备或通信网络通信,如以太网,无线局域网(wireless local area networks,WLAN)等。
可能的,该终端设备还可以包括存储器1302。
存储器1302可以是只读存储器(read-only memory,ROM)或可存储静态信息和指令的其他类型的静态存储设备,随机存取存储器(random access memory,RAM)或者可存储信息和指令的其他类型的动态存储设备,也可以是电可擦可编程只读存储器(electrically erasable programmable read-only memory,EEPROM)、只读光盘(compact disc read-only memory,CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。存储器可以是独立存在,通过通信线路1304与处理器相连接。存储器也可以和处理器集成在一起。
其中,存储器1302用于存储执行本申请方案的计算机执行指令,并由处理器1301来控制执行。处理器1301用于执行存储器1302中存储的计算机执行指令,从而实现本申请实施例所提供的界面显示方法。
可能的,本申请实施例中的计算机执行指令也可以称之为应用程序代码,本申请实施例对此不作具体限定。
在具体实现中,作为一种实施例,处理器1301可以包括一个或多个CPU,例如图13 中的CPU0和CPU1。
在具体实现中,作为一种实施例,终端设备可以包括多个处理器,例如图13中的处理器1301和处理器1305。这些处理器中的每一个可以是一个单核(single-CPU)处理器,也可以是一个多核(multi-CPU)处理器。这里的处理器可以指一个或多个设备、电路、和/或用于处理数据(例如计算机程序指令)的处理核。
计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时,全部或部分地产生按照本申请实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一计算机可读存储介质传输,例如,计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(digital subscriber line,DSL)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包括一个或多个可用介质集成的服务器、数据中心等数据存储设备。例如,可用介质可以包括磁性介质(例如,软盘、硬盘或磁带)、光介质(例如,数字通用光盘(digital versatile disc,DVD))、或者半导体介质(例如,固态硬盘(solid state disk,SSD))等。
本申请实施例还提供了一种计算机可读存储介质。上述实施例中描述的方法可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。计算机可读介质可以包括计算机存储介质和通信介质,还可以包括任何可以将计算机程序从一个地方传送到另一个地方的介质。存储介质可以是可由计算机访问的任何目标介质。
作为一种可能的设计,计算机可读介质可以包括紧凑型光盘只读储存器(compact disc read-only memory,CD-ROM)、RAM、ROM、EEPROM或其它光盘存储器;计算机可读介质可以包括磁盘存储器或其它磁盘存储设备。而且,任何连接线也可以被适当地称为计算机可读介质。例如,如果使用同轴电缆,光纤电缆,双绞线,DSL或无线技术(如红外,无线电和微波)从网站,服务器或其它远程源传输软件,则同轴电缆,光纤电缆,双绞线,DSL或诸如红外,无线电和微波之类的无线技术包括在介质的定义中。如本文所使用的磁盘和光盘包括光盘(CD),激光盘,光盘,数字通用光盘(digital versatile disc,DVD),软盘和蓝光盘,其中磁盘通常以磁性方式再现数据,而光盘利用激光光学地再现数据。
上述的组合也应包括在计算机可读介质的范围内。以上,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以权利要求的保护范围为准。

Claims (18)

  1. 一种界面显示方法,其特征在于,所述方法包括:
    终端设备显示第一界面;所述第一界面包括多个元素;
    所述终端设备接收针对所述多个元素中目标元素的第一操作;
    响应于所述第一操作,所述终端设备将所述目标元素从第一位置移动到第二位置;
    所述终端设备将所述多个元素中围绕所述第二位置的第一层元素执行缩小显示和/或放大显示。
  2. 根据权利要求1所述的方法,其特征在于,所述方法还包括:
    所述终端设备将所述多个元素中围绕所述第二位置的第二层元素执行缩小显示和/或放大显示;其中,所述第二层元素与所述第一层元素均为以所述第二位置为中心的元素,所述第二层元素为所述第一层元素外侧的元素。
  3. 根据权利要求2所述的方法,其特征在于,所述终端设备将所述多个元素中围绕所述第二位置的第二层元素执行缩小显示和/或放大显示,包括:
    在所述终端设备将所述第一层元素执行缩小显示和/或放大显示的第一时间阈值后,所述终端设备将所述第二层元素执行缩小显示和/或放大显示。
  4. 根据权利要求2或3所述的方法,其特征在于,所述第二层元素缩小显示时缩小的比例大于所述第一层元素缩小显示时缩小的比例,所述第二层元素放大显示时放大的比例小于所述第一层元素放大显示时放大的比例。
  5. 根据权利要求2-4任一项所述的方法,其特征在于,所述方法还包括:
    所述终端设备将所述多个元素中围绕所述第二位置的第N层元素执行缩小显示和/或放大显示;其中,所述第N层元素与所述第二层元素均为以所述第二位置为中心的元素,所述第N层元素为所述第二层元素外侧的元素,所述N大于2。
  6. 根据权利要求5所述的方法,其特征在于,所述方法还包括:
    在第M层元素中包括停靠栏中的元素时,所述终端设备将所述停靠栏中的元素执行缩小显示和/或放大显示;所述M小于或等于所述N。
  7. 根据权利要求5或6所述的方法,其特征在于,所述第N层元素缩小显示时缩小的比例大于所述第二层元素缩小显示时缩小的比例,所述第N层元素放大显示时放大的比例小于所述第二层元素放大显示时放大的比例。
  8. 根据权利要求1-7任一项所述的方法,其特征在于,所述终端设备将所述多个元素中围绕所述第二位置的第一层元素执行缩小显示和/或放大显示,包括:
    所述终端设备在第一时刻对所述第一层元素进行缩小,并显示缩小的第一层元素;
    所述终端设备在第二时刻对所述缩小的第一层元素进行放大,并显示放大的第一层元素;
    所述终端设备在第三时刻对所述放大的第一层元素进行缩小,并显示所述第一层元素。
  9. 根据权利要求8所述的方法,其特征在于,所述缩小的第一层元素的尺寸小于所述第一层元素的尺寸,所述放大的第一层元素的尺寸大于所述第一层元素的尺寸。
  10. 根据权利要求8或9所述的方法,其特征在于,所述终端设备将所述多个元素中围绕所述第二位置的第一层元素执行缩小显示和/或放大显示,包括:
    所述终端设备将所述多个元素中围绕所述第二位置的第一层元素,以所述第二位置为中心执行向内缩小显示和/或以所述第二位置为中心向外放大显示。
  11. 根据权利要求1-10任一项所述的方法,其特征在于,响应于所述第一操作,所述终端设备将所述目标元素从第一位置移动到第二位置,包括:
    响应于所述第一操作,所述终端设备对所述目标元素进行缩小,并显示缩小的目标元素;
    在所述第一操作持续作用于所述目标元素的情况下,所述终端设备对所述缩小的目标元素进行放大,并显示放大的目标元素;
    所述终端设备将所述放大的目标元素从所述第一位置移动到所述第二位置。
  12. 根据权利要求11所述的方法,其特征在于,所述终端设备将所述放大的目标元素从所述第一位置移动到所述第二位置,包括:
    在所述终端设备将所述放大的目标元素从所述第一位置移动到所述第二位置的过程中,确定所述第二位置处存在第一元素的情况时,所述终端设备将所述第一元素移动至第三位置,并将所述放大的目标元素从所述第一位置移动到所述第二位置。
  13. 根据权利要求1-12任一项所述的方法,其特征在于,所述目标元素的尺寸与所述多个元素中围绕所述第二位置的层数正相关。
  14. 根据权利要求1-13任一项所述的方法,其特征在于,所述目标元素的尺寸与第一层覆盖的范围正相关。
  15. 根据权利要求1-14任一项所述的方法,其特征在于,所述目标元素为文件夹中的元素,所述方法还包括:
    所述终端设备接收针对所述文件夹的第二操作;
    所述终端设备显示第一界面,包括:响应于所述第二操作,所述终端设备显示所述第一界面。
  16. 根据权利要求1-15任一项所述的方法,其特征在于,所述目标元素包括:应用图标、卡片、小组件、文件夹、卡片集、图像图标、或相册图标。
  17. 一种终端设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时,使得所述终端设备执行如权利要求1-16任一项所述的方法。
  18. 一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时,使得计算机执行如权利要求1-16任一项所述的方法。
PCT/CN2023/094895 2022-06-30 2023-05-17 界面显示方法和装置 WO2024001592A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
EP23829778.2A EP4394572A1 (en) 2022-06-30 2023-05-17 Interface display method and apparatus

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210764666.9A CN117369695A (zh) 2022-06-30 2022-06-30 界面显示方法和装置
CN202210764666.9 2022-06-30

Publications (2)

Publication Number Publication Date
WO2024001592A1 true WO2024001592A1 (zh) 2024-01-04
WO2024001592A9 WO2024001592A9 (zh) 2024-05-16

Family

ID=89383178

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/094895 WO2024001592A1 (zh) 2022-06-30 2023-05-17 界面显示方法和装置

Country Status (3)

Country Link
EP (1) EP4394572A1 (zh)
CN (1) CN117369695A (zh)
WO (1) WO2024001592A1 (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2011018356A (ja) * 2010-09-01 2011-01-27 Sharp Corp 携帯型電話機、情報処理プログラム、および情報処理プログラムを記録した記録媒体
JP2016057747A (ja) * 2014-09-08 2016-04-21 株式会社河合楽器製作所 アイコン表示装置及びアイコン表示プログラム
CN106802751A (zh) * 2016-11-30 2017-06-06 努比亚技术有限公司 一种终端和屏幕显示方法
WO2021183690A1 (en) * 2020-03-10 2021-09-16 Apple Inc. Devices, methods, and graphical user interfaces for interacting with user interface objects corresponding to applications
CN115904160A (zh) * 2021-09-30 2023-04-04 华为技术有限公司 一种图标移动方法、相关图形界面及电子设备
CN116048361A (zh) * 2022-06-24 2023-05-02 荣耀终端有限公司 交互方法、可读存储介质和电子设备

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2011018356A (ja) * 2010-09-01 2011-01-27 Sharp Corp 携帯型電話機、情報処理プログラム、および情報処理プログラムを記録した記録媒体
JP2016057747A (ja) * 2014-09-08 2016-04-21 株式会社河合楽器製作所 アイコン表示装置及びアイコン表示プログラム
CN106802751A (zh) * 2016-11-30 2017-06-06 努比亚技术有限公司 一种终端和屏幕显示方法
WO2021183690A1 (en) * 2020-03-10 2021-09-16 Apple Inc. Devices, methods, and graphical user interfaces for interacting with user interface objects corresponding to applications
CN115904160A (zh) * 2021-09-30 2023-04-04 华为技术有限公司 一种图标移动方法、相关图形界面及电子设备
CN116048361A (zh) * 2022-06-24 2023-05-02 荣耀终端有限公司 交互方法、可读存储介质和电子设备

Also Published As

Publication number Publication date
WO2024001592A9 (zh) 2024-05-16
EP4394572A1 (en) 2024-07-03
CN117369695A (zh) 2024-01-09

Similar Documents

Publication Publication Date Title
US20220342850A1 (en) Data transmission method and related device
WO2021139768A1 (zh) 跨设备任务处理的交互方法、电子设备及存储介质
US11687235B2 (en) Split-screen method and electronic device
JP7337954B2 (ja) 親ページと子ページとの間を切り替えるための方法及び関連する機器
WO2021115194A1 (zh) 一种应用图标的显示方法及电子设备
WO2023010940A1 (zh) 分屏显示方法和装置
US11914850B2 (en) User profile picture generation method and electronic device
WO2021110133A1 (zh) 一种控件的操作方法及电子设备
WO2022033342A1 (zh) 数据传输方法和设备
WO2022161119A1 (zh) 一种显示方法及电子设备
CN116095413B (zh) 视频处理方法及电子设备
EP4206864A1 (en) Process scheduling method and terminal device
WO2023051511A1 (zh) 一种图标移动方法、相关图形界面及电子设备
CN114721761B (zh) 一种终端设备、应用图标管理方法和存储介质
WO2023246386A1 (zh) 界面显示方法和装置
CN113709026A (zh) 即时通信消息的处理方法、设备、存储介质和程序产品
WO2024001592A1 (zh) 界面显示方法和装置
WO2023005751A1 (zh) 渲染方法及电子设备
EP4404038A1 (en) Interface display method and apparatus
WO2023202171A1 (zh) 隐藏照片的方法和装置
CN116088740B (zh) 界面处理方法和装置
WO2024008017A1 (zh) 内容分享方法、图形界面及相关装置
WO2022068628A1 (zh) 一种界面的分布式显示方法、电子设备及通信***
WO2023217142A1 (zh) 窗口尺寸调整方法、相关装置及通信***
US20240086035A1 (en) Display Method and Electronic Device

Legal Events

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

Ref document number: 23829778

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 2023829778

Country of ref document: EP

ENP Entry into the national phase

Ref document number: 2023829778

Country of ref document: EP

Effective date: 20240326