Device, Method, and Graphical User Interface for Resizing User Interface Content

• US 20110185317A1
• Filed: 01/26/2010
• Published: 07/28/2011
• Est. Priority Date: 01/26/2010
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Thimbleby, Will John, Weeldreyer, Christopher Douglas, Capela, Jay Christopher
• Granted Patent: US 8,209,630 B2
• Time in Patent Office: Days
• US Class Current: 715/863
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text

Abstract

Aspect ratio locking alignment guides for gestures are disclosed. In one embodiment, a gesture is detected to resize a user interface element, and in response, a first alignment guide is visibly displayed, wherein the first alignment guide includes positions representing different sizes the user interface element can be resized to while maintaining the initial aspect ratio of the user interface element. While the user interface element is resized in accordance with the user gesture, and while the first alignment guide is visibly displayed: when the user gesture is substantially aligned with the first alignment guide, visible display of the first alignment guide is maintained; and when the user gesture substantially deviates from the first alignment guide, visible display of the first alignment guide is terminated.

Claims

1. A method, comprising:

at a computing device with a display and one or more user input devices adapted to detect user gestures;

displaying on the display a user interface including at least one user interface element, wherein;

the user interface element has an initial aspect ratio, and

the user interface element is configured to be resized within the user interface in response to user gestures detected with the one or more user input devices;

detecting a user gesture, the user gesture corresponding to a gesture to resize the user interface element within the user interface, wherein the user gesture includes one or more directional movements within the user interface;

in response to detecting the user gesture;

visibly displaying in conjunction with the user interface element at least a first resize handle;

visibly displaying a first alignment guide that bisects the user interface element and the first resize handle, wherein the first alignment guide includes positions representing different sizes the user interface element can be resized to while maintaining the initial aspect ratio of the user interface element;

resizing the user interface element within the user interface in accordance with the user gesture;

while resizing the user interface element within the user interface;

while the first alignment guide is visibly displayed;

 

when the user gesture is substantially aligned with the first alignment guide, maintaining visible display of the first alignment guide; and

 

when the user gesture substantially deviates from the first alignment guide, terminating visible display of the first alignment guide.

2. The method of claim 1, further comprising:

while resizing the user interface element within the user interface, and after the visible display of the first alignment guide is terminated;

when the user gesture intersects the first alignment guide, visibly redisplaying the first alignment guide in conjunction with the user interface element.

3. The method of claim 1, further comprising:

while resizing the user interface element within the user interface, and after the visible display of the first alignment guide is terminated;

when the user gesture intersects an axis corresponding to a 1;

1 aspect ratio for the user interface element, visibly displaying a 1;

1 aspect ratio alignment guide in conjunction with the user interface element, wherein the 1;

1 aspect ratio alignment guide includes positions representing different sizes the user interface element can be resized to while maintaining the user interface element in a 1;

1 aspect ratio;

while the 1;

1 aspect ratio alignment guide is visibly displayed;

when the user gesture is substantially aligned with the 1;

1 aspect ratio alignment guide, maintaining visible display of the 1;

1 aspect ratio alignment guide; and

when the user gesture substantially deviates from the 1;

1 aspect ratio alignment guide, terminating visible display of the 1;

1 aspect ratio alignment guide.

4. The method of claim 3, further comprising:

while resizing the user interface element within the user interface, and after the visible display of the 1;

1 aspect ratio alignment guide is terminated;

when the user gesture intersects the first alignment guide, visibly redisplaying the first alignment guide in conjunction with the user interface element; and

when the user gesture intersects the 1;

1 aspect ratio alignment guide, visibly redisplaying the 1;

1 aspect ratio alignment guide in conjunction with the user interface element.

5. The method of claim 4, further comprising:

while the user interface element is less than a predefined size, and the user gesture is substantially aligned with the first alignment guide;

confining the resizing of the user interface element to locations on the first alignment guide unless the user gesture deviates more than a predefined distance threshold away from the first alignment guide.

6. The method of claim 4, further comprising:

while the user interface element is less than a predefined size, and the user gesture is substantially aligned with the 1;

1 aspect ratio alignment guide;

confining the resizing of the user interface element to locations on the 1;

1 aspect ratio alignment guide unless the user gesture deviates more than a predefined distance threshold away from the 1;

1 aspect ratio alignment guide.

7. The method of claim 1, further comprising:

while detecting the user gesture;

detecting a second user gesture;

displaying a center resize affordance;

resizing the user interface element within the user interface in accordance with the user gesture, wherein the resizing is performed with respect to a center of the user interface element.

8. The method of claim 1, further comprising while detecting the user gesture, displaying an affordance in conjunction with the user interface element being resized, wherein the affordance is configured to display at least a current size of the user interface element.

9. The method of claim 1, further comprising while detecting the user gesture, displaying an affordance in conjunction with the user interface element being resized, wherein the affordance is configured to display a description of the user interface element when the user interface element is resized to a set of predefined proportions.

10. The method of claim 1, further comprising while detecting the user gesture, displaying an affordance in conjunction with the user interface element being resized, wherein the affordance is configured to display a graphic depiction of a specific form of the user interface element when the user interface element is resized to a set of predefined proportions.

11. The method of claim 1, wherein the user interface element is displayed on an electronic canvas.

12. The method of claim 1, wherein the display and at least one of the one or more user input devices comprise a touch-screen display.

13. A computing device, comprising:

a display;

one or more user input devices adapted to detect user gestures;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for;

displaying on the display a user interface including at least one user interface element, wherein;

the user interface element has an initial aspect ratio, and

the user interface element is configured to be resized within the user interface in response to user gestures detected with the one or more user input devices;

detecting a user gesture, the user gesture corresponding to a gesture to resize the user interface element within the user interface, wherein the user gesture includes one or more directional movements within the user interface;

in response to detecting the user gesture;

visibly displaying in conjunction with the user interface element at least a first resize handle;

visibly displaying a first alignment guide that bisects the user interface element and the first resize handle, wherein the first alignment guide includes positions representing different sizes the user interface element can be resized to while maintaining the initial aspect ratio of the user interface element;

resizing the user interface element within the user interface in accordance with the user gesture;

while resizing the user interface element within the user interface;

while the first alignment guide is visibly displayed;

 

when the user gesture is substantially aligned with the first alignment guide, maintaining visible display of the first alignment guide; and

 

when the user gesture substantially deviates from the first alignment guide, terminating visible display of the first alignment guide.

14. The computing device of claim 13, further comprising the one or more programs including instructions for:

while resizing the user interface element within the user interface, and after the visible display of the first alignment guide is terminated;

when the user gesture intersects the first alignment guide, visibly redisplaying the first alignment guide in conjunction with the user interface element.

15. The computing device of claim 13, further comprising the one or more programs including instructions for:

while resizing the user interface element within the user interface, and after the visible display of the first alignment guide is terminated;

when the user gesture intersects an axis corresponding to a 1;

1 aspect ratio for the user interface element, visibly displaying a 1;

1 aspect ratio alignment guide in conjunction with the user interface element, wherein the 1;

1 aspect ratio alignment guide includes positions representing different sizes the user interface element can be resized to while maintaining the user interface element in a 1;

1 aspect ratio;

while the 1;

1 aspect ratio alignment guide is visibly displayed;

when the user gesture is substantially aligned with the 1;

1 aspect ratio alignment guide, maintaining visible display of the 1;

1 aspect ratio alignment guide; and

when the user gesture substantially deviates from the 1;

1 aspect ratio alignment guide, terminating visible display of the 1;

1 aspect ratio alignment guide.

16. The computing device of claim 15, further comprising the one or more programs including instructions for:

while resizing the user interface element within the user interface, and after the visible display of the 1;

1 aspect ratio alignment guide is terminated;

when the user gesture intersects the first alignment guide, visibly redisplaying the first alignment guide in conjunction with the user interface element; and

when the user gesture intersects the 1;

1 aspect ratio alignment guide, visibly redisplaying the 1;

1 aspect ratio alignment guide in conjunction with the user interface element.

17. The computing device of claim 16, further comprising the one or more programs including instructions for:

while the user interface element is less than a predefined size, and the user gesture is substantially aligned with the first alignment guide;

confining the resizing of the user interface element to locations on the first alignment guide unless the user gesture deviates more than a predefined distance threshold away from the first alignment guide.

18. The computing device of claim 16, further comprising the one or more programs including instructions for:

while the user interface element is less than a predefined size, and the user gesture is substantially aligned with the 1;

1 aspect ratio alignment guide;

confining the resizing of the user interface element to locations on the 1;

1 aspect ratio alignment guide unless the user gesture deviates more than a predefined distance threshold away from the 1;

1 aspect ratio alignment guide.

19. A graphical user interface on a computing device with a display and one or more user input devices adapted to detect user gestures, the graphical user interface comprising:

a user interface including at least one user interface element, wherein;

the user interface element has an initial aspect ratio, and

the user interface element is configured to be resized within the user interface in response to user gestures detected with the one or more user input devices;

wherein;

a user gesture is detected, the user gesture corresponding to a gesture to resize the user interface element within the user interface, wherein the user gesture includes one or more directional movements within the user interface;

in response to detecting the user gesture;

at least a first resize handle is visibly displayed in conjunction with the user interface element;

a first alignment guide is visibly displayed, wherein the first alignment guide bisects the user interface element and the first resize handle, and the first alignment guide includes positions representing different sizes the user interface element can be resized to while maintaining the initial aspect ratio of the user interface element;

the user interface element is resized within the user interface in accordance with the user gesture;

while resizing the user interface element within the user interface;

while the first alignment guide is visibly displayed;

when the user gesture is substantially aligned with the first alignment guide, visible display of the first alignment guide is maintained; and

 

when the user gesture substantially deviates from the first alignment guide, visible display of the first alignment guide is terminated.

20. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a computing device with a display and one or more user input devices adapted to detect user gestures, cause the device to:

display on the display a user interface including at least one user interface element, wherein;

the user interface element has an initial aspect ratio, and

the user interface element is configured to be resized within the user interface in response to user gestures detected with the one or more user input devices;

detect a user gesture, the user gesture corresponding to a gesture to resize the user interface element within the user interface, wherein the user gesture includes one or more directional movements within the user interface;

in response to detecting the user gesture;

visibly display in conjunction with the user interface element at least a first resize handle;

visibly display a first alignment guide that bisects the user interface element and the first resize handle, wherein the first alignment guide includes positions representing different sizes the user interface element can be resized to while maintaining the initial aspect ratio of the user interface element;

resize the user interface element within the user interface in accordance with the user gesture;

while resizing the user interface element within the user interface;

while the first alignment guide is visibly displayed;

when the user gesture is substantially aligned with the first alignment guide, maintain visible display of the first alignment guide; and

when the user gesture substantially deviates from the first alignment guide, terminate visible display of the first alignment guide.