# US 2024/0201839 A1 · Graphical interface display method, electronic device, medium, and program product

> Agents: this data is available as JSON from the patentgrep API and MCP server — see https://patentgrep.com/llms.txt

- Number: US 2024/0201839 A1
- Document ID: US20240201839A1
- Status: Published application
- Kind: A1
- Application number: 18/287,371
- Filed: 2022-04-01
- Published: 2024-06-20
- Earliest claimed: 2021-04-20
- Assignees: Huawei Technologies Co., Ltd.
- Applicants: Huawei Technologies Co., Ltd.
- Inventors: Chao Bian
- Web page: https://patentgrep.com/patent/US20240201839A1

## CPC

- G06F 3/0486: Drag-and-drop
- G06F 3/0481: 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
- G06F 3/04817: using icons (graphical or visual programming using iconic symbols G06F8/34)
- G06F 3/0482: Interaction with lists of selectable items, e.g. menus
- G06F 3/0484: 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
- G06F 3/04842: Selection of displayed objects or displayed text elements (G06F3/0482 takes precedence)
- G06F 3/04845: for image manipulation, e.g. dragging, rotation, expansion or change of colour
- G06F 3/04883: for inputting data by handwriting, e.g. gesture or text
- G06T 13/00: Animation
- G06T 2200/24: involving graphical user interfaces [GUIs]
- G06F: ELECTRIC DIGITAL DATA PROCESSING (computer systems based on specific computational models G06N)
- G06T: IMAGE DATA PROCESSING OR GENERATION, IN GENERAL

## Abstract

M user interface UI elements are displayed on a screen of the electronic device, where M is a positive integer greater than 1. Dragging performed on a first UI element in the M UI elements is detected. In response to the dragging, each of N UI elements on the screen is enabled to move with a corresponding animation effect, where N is a positive integer ranging from 1 to M−1. The enabling the N UI elements to move with corresponding animation effects includes: determining a distance between the first UI element and a second UI element on the UI; determining an animation effect of movement of the second UI element based on the distance; and enabling the second UI element to move with the animation effect, to visually indicate that the second UI element moves with the first UI element.

## Claims

### Claim at position 1

1-15. (canceled)

### Claim 16

A method, comprising:
displaying M user interface (UI) elements on a screen of an electronic device, wherein M is a positive integer greater than 1;
detecting dragging performed on a first UI element in the M UI elements; and
in response to the dragging, enabling each of N UI elements on the screen to move with corresponding animation effects, wherein:
N is a positive integer ranging from 1 to M−1, and
enabling the N UI elements to move with the corresponding animation effects comprises:
determining a distance between the first UI element and a second UI element of the N UI elements;
determining an animation effect of movement of the second UI element based on the distance; and
enabling the second UI element to move with the animation effect, to visually indicate that the second UI element moves with the first UI element.

### Claim 17 (depends on 16)

The method according to claim 16, wherein determining the distance comprises:
determining a first reference point of the first UI element and a second reference point of the second UI element; and
determining the distance between the first reference point and the second reference point.

### Claim 18 (depends on 16)

The method according to claim 16, wherein determining the distance comprises:
determining a first reference point of the first UI element;
determining, from a plurality of circles that each use the first reference point as a center and that have respective radii, a target circle that intersects with the second UI element and has a smallest radius; and
determining the smallest radius of the target circle as the distance.

### Claim 19 (depends on 16)

The method according to claim 16, wherein determining the distance comprises:
determining a horizontal spacing between the first UI element and the second UI element;
determining a vertical spacing between the first UI element and the second UI element; and
determining the distance based on any one of the following:
at least one of the horizontal spacing and the vertical spacing; or
a direction from a second reference point of the second UI element to a first reference point of the first UI element and at least one of the horizontal spacing and the vertical spacing.

### Claim 20 (depends on 16)

The method according to claim 16, further comprising:
determining an impact area of the first UI element based on a size of the first UI element; and
determining UI elements that are in the M UI elements and that are in the impact area as the N UI elements.

### Claim 21 (depends on 16)

The method according to claim 16, further comprising:
determining M−1 UI elements in the M UI elements other than the first UI element as the N UI elements.

### Claim 22 (depends on 16)

The method according to claim 16, wherein determining the animation effect of the movement comprises:
determining a first animation effect with which the first UI element moves in response to the dragging; and
determining, based on any one of the following, the animation effect with which the second UI element moves in response to the dragging:
the first animation effect and the distance; or
the first animation effect, the distance, and at least one of a size of the second UI element and a size of the first UI element.

### Claim 23 (depends on 22)

The method according to claim 22, wherein the first animation effect of the movement of the first UI element is determined based on a predefined curve in which a displacement changes over time.

### Claim 24 (depends on 23)

The method according to claim 23, wherein the predefined curve is a Bessel curve or an elastic force curve.

### Claim 25 (depends on 16)

The method according to claim 16, wherein enabling the second UI element to move with the animation effect comprises:
determining a direction of the dragging; and
enabling the second UI element to move, in association with the direction, with the animation effect.

### Claim 26 (depends on 16)

The method according to claim 16, wherein enabling the second UI element to move with the animation effect comprises:
determining a delay time based on the distance; and
in response to the dragging, enabling the second UI element to move with the animation effect after the delay time.

### Claim 27

An electronic device, comprising:
one or more processors; and
a memory coupled to the processor and storing instructions which, when executed by the one or more processors, cause the electronic device to perform operations of:
displaying M user interface (UI) elements on a screen of an electronic device, wherein M is a positive integer greater than 1;
detecting dragging performed on a first UI element in the M UI elements; and
in response to the dragging, enabling each of N UI elements on the screen to move with corresponding animation effects, wherein:
N is a positive integer ranging from 1 to M−1, and
enabling the N UI elements to move with the corresponding animation effects comprises:
determining a distance between the first UI element and a second UI element of the N UI elements;
determining an animation effect of movement of the second UI element based on the distance; and
enabling the second UI element to move with the animation effect, to visually indicate that the second UI element moves with the first UI element.

### Claim 28 (depends on 27)

The electronic device according to claim 27, wherein determining the distance comprises:
determining a first reference point of the first UI element and a second reference point of the second UI element; and
determining the distance between the first reference point and the second reference point.

### Claim 29 (depends on 27)

The electronic device according to claim 27, wherein determining the distance comprises:
determining a first reference point of the first UI element;
determining, from a plurality of circles that each use the first reference point as a center and that have respective radii, a target circle that intersects with the second UI element and has a smallest radius; and
determining the smallest radius of the target circle as the distance.

### Claim 30 (depends on 27)

The electronic device according to claim 27, wherein determining the distance comprises:
determining a horizontal spacing between the first UI element and the second UI element;
determining a vertical spacing between the first UI element and the second UI element; and
determining the distance based on any one of the following:
at least one of the horizontal spacing and the vertical spacing; or
a direction from a second reference point of the second UI element to a first reference point of the first UI element and at least one of the horizontal spacing and the vertical spacing.

### Claim 31 (depends on 27)

The electronic device according to claim 27, the operations further comprising:
determining an impact area of the first UI element based on a size of the first UI element; and
determining UI elements that are in the M UI elements and that are in the impact area as the N UI elements.

### Claim 32

A non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores instructions which, when executed by an electronic device, cause the electronic device to perform operations of:
displaying M user interface (UI) elements on a screen of an electronic device, wherein M is a positive integer greater than 1;
detecting dragging performed on a first UI element in the M UI elements; and
in response to the dragging, enabling each of N UI elements on the screen to move with corresponding animation effects, wherein:
N is a positive integer ranging from 1 to M−1, and
enabling the N UI elements to move with corresponding animation effects comprises:
determining a distance between the first UI element and a second UI element of the N UI elements;
determining an animation effect of movement of the second UI element based on the distance; and
enabling the second UI element to move with the animation effect, to visually indicate that the second UI element moves with the first UI element.

### Claim 33 (depends on 32)

The non-transitory computer-readable storage medium according to claim 32, wherein determining the distance comprises:
determining a first reference point of the first UI element and a second reference point of the second UI element; and
determining the distance between the first reference point and the second reference point.

### Claim 34 (depends on 32)

The non-transitory computer-readable storage medium according to claim 32, wherein determining the distance comprises:
determining a first reference point of the first UI element;
determining, from a plurality of circles that each use the first reference point as a center and that have respective radii, a target circle that intersects with the second UI element and has a smallest radius; and
determining the smallest radius of the target circle as the distance.

### Claim 35 (depends on 32)

The non-transitory computer-readable storage medium according to claim 32, wherein determining the distance comprises:
determining a horizontal spacing between the first UI element and the second UI element;
determining a vertical spacing between the first UI element and the second UI element; and
determining the distance based on any one of the following:
at least one of the horizontal spacing and the vertical spacing; or
a direction from a second reference point of the second UI element to a first reference point of the first UI element and at least one of the horizontal spacing and the vertical spacing.