Device, method, and graphical user interface for adjusting the appearance of a control

• US 9,355,472 B2
• Filed: 02/18/2014
• Issued: 05/31/2016
• Est. Priority Date: 03/15/2013
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Kocienda, Kenneth L., Jon, Tiffany S., Karunamuni, Chanaka G.
• Primary Examiner(s): Sajous, Wesner
• Application Number:
  US14/183,369
• Publication Number:
  US 20140267362A1
• Time in Patent Office: 833 Days
• US Class Current: 1/1
• CPC Class Codes: G06F 2203/04804 Transparency, e.g. transparent or translucent windows
• CPC Class Codes: 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
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 3/04886 by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
• CPC Class Codes: G06T 11/001 Texturing; Colouring; Generation of texture or colour inpainting G06T5/77
• CPC Class Codes: G06T 11/60 Editing figures and text; Combining figures or text

Abstract

An electronic device with a display displays a user interface on the display. The device determines a first set of content-display values for one or more content-display properties of first content that corresponds to a respective region of the display. The device determines a first set of control-appearance values for one or more control-appearance parameters based on the first set of content-display values. The device displays a control in the respective region of the display, wherein an appearance of the control is determined based on the first content and the first set of control-appearance values.

Claims

1. An electronic device, comprising:

a display;

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 a user interface on the display;

determining a first set of content-display values for one or more content-display properties of first content that corresponds to a respective region of the display;

determining a first set of control-appearance values for one or more control-appearance parameters based on the first set of content-display values; and

displaying a control in the respective region of the display, wherein an appearance of the control is determined based on;

the first content; and

the first set of control-appearance values;

wherein;

the control includes a translucent portion; and

displaying the control includes displaying, in the translucent portion of the control a representation of a portion of the first content that corresponds to the translucent portion of the control, wherein the representation of the first content is transformed in accordance with the first set of control-appearance values.

2. The device of claim 1, wherein a respective content-display value for content in the respective region corresponds to a statistical measurement of a respective visual property for the respective region.

3. The device of claim 1, wherein the content-display properties include one or more of:

color, hue, saturation, brightness, and contrast.

4. The device of claim 1, wherein a change in a respective control-appearance value corresponds to a change in a magnitude of a respective transformation that is applied to content underneath the control to generate an appearance of the control.

5. The device of claim 1, wherein the control-appearance parameters include one or more of:

blur radius, saturation adjustment, opacity of a white overlay, opacity of a black overlay, opacity of one or more selectable portions of the control, and color of text in the control.

6. The device of claim 1, wherein determining the first set of control-appearance values includes:

storing a plurality of respective predefined sets of content-display values that correspond to respective predefined sets of control-appearance values;

identifying one or more predefined sets of content-display values that are close to the first set of content-display values as proximate sets of content-display values; and

determining the first set of control-appearance values based on one or more predefined sets of control-appearance values corresponding to the one or more proximate sets of content-display values.

7. The device of claim 1, wherein determining the first set of content-display values includes using the first set of content-display values as inputs for an algorithm that generates control-appearance values as output.

8. The device of claim 1, including instructions for, while displaying the control in the respective region of the display:

detecting a change in content that corresponds to the respective region of the display from the first content to second content, different from the first content;

determining a second set of content-display values, different from the first set of content-display values, for the one or more content-display properties of the second content;

determining a second set of control-appearance values for one or more control-appearance parameters based on the second set of content-display values, wherein the second set of control-appearance values is different from the first set of control-appearance values; and

in response to detecting the change in content, changing the appearance of the control in accordance with;

the second content; and

the second set of control-appearance values.

9. An electronic device, comprising:

a display;

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 a user interface on the display;

determining a first set of content-display values for one or more content-display properties of first content that corresponds to a respective region of the display;

determining a first set of control-appearance values for one or more control-appearance parameters based on the first set of content-display values;

displaying a control in the respective region of the display, wherein an appearance of the control is determined based on;

the first content; and

the first set of control-appearance values;

while displaying the control in the respective region of the display;

detecting a change in content that corresponds to the respective region of the display from the first content to second content, different from the first content;

determining a second set of content-display values, different from the first set of content-display values, for the one or more content-display properties of the second content;

determining a second set of control-appearance values for one or more control-appearance parameters based on the second set of content-display values, wherein the second set of control-appearance values is different from the first set of control-appearance values; and

in response to detecting the change in content, changing the appearance of the control in accordance with;

the second content; and

the second set of control-appearance values.

10. The device of claim 9, wherein changing the appearance of the control includes changing a color of text in the control.

11. The device of claim 9, wherein:

the control includes a translucent portion; and

changing the appearance of the control in accordance with the second set of control-appearance values includes displaying, in the translucent portion of the control, a representation of a portion of the second content that corresponds to the translucent portion of the control, wherein the representation of the second content is transformed in accordance with the second set of control-appearance values.

12. The device of claim 9, wherein:

the first set of control-appearance values are values for a first set of control-appearance parameters; and

the second set of control-appearance values are values for the first set of control-appearance parameters.

13. The device of claim 9, wherein:

the first set of control-appearance values are values for a first set of control-appearance parameters; and

the second set of control-appearance values are values for a second set of control-appearance parameters different from the first set of control-appearance parameters.

14. The device of claim 13, including instructions for, after detecting the change in content that corresponds to the respective region of the display from the first content to the second content and prior to changing the appearance of the control in accordance with the second set of control display values:

determining a respective set of control-appearance values, different from the first set of control-appearance values, for the first set of control-appearance parameters based on the second set of content-display values, wherein the respective set of control appearance values is different from the first set of control-appearance values and the second set of control-appearance values; and

changing the appearance of the control in accordance with;

the second content; and

the respective set of control-appearance values.

15. The device of claim 9, including instructions for, after detecting the change in content from the first content to the second content and before changing the appearance of the control in accordance with the second set of control-appearance values, changing the appearance of the control in accordance with:

the second content; and

the first set of control-appearance values.

16. A method comprising:

at a device with a display;

displaying a user interface on the display;

determining a first set of content-display values for one or more content-display properties of first content that corresponds to a respective region of the display;

determining a first set of control-appearance values for one or more control-appearance parameters based on the first set of content-display values; and

displaying a control in the respective region of the display, wherein an appearance of the control is determined based on;

the first content; and

the first set of control-appearance values;

wherein;

the control includes a translucent portion; and

displaying the control includes displaying, in the translucent portion of the control, a representation of a portion of the first content that corresponds to the translucent portion of the control, wherein the representation of the first content is transformed in accordance with the first set of control-appearance values.

17. The method of claim 16, wherein a respective content-display value for content in the respective region corresponds to a statistical measurement of a respective visual property for the respective region.

18. The method of claim 16, wherein the content-display properties include one or more of:

color, hue, saturation, brightness, and contrast.

19. The method of claim 16, wherein a change in a respective control-appearance value corresponds to a change in a magnitude of a respective transformation that is applied to content underneath the control to generate an appearance of the control.

20. The method of claim 16, wherein the control-appearance parameters include one or more of:

blur radius, saturation adjustment, opacity of a white overlay, opacity of a black overlay, opacity of one or more selectable portions of the control, and color of text in the control.

21. The method of claim 16, wherein determining the first set of control-appearance values includes:

storing a plurality of respective predefined sets of content-display values that correspond to respective predefined sets of control-appearance values;

identifying one or more predefined sets of content-display values that are close to the first set of content-display values as proximate sets of content-display values; and

determining the first set of control-appearance values based on one or more predefined sets of control-appearance values corresponding to the one or more proximate sets of content-display values.

22. The method of claim 16, wherein determining the first set of content-display values includes using the first set of content-display values as inputs for an algorithm that generates control-appearance values as output.

23. The method of claim 16, further comprising:

while displaying the control in the respective region of the display;

detecting a change in content that corresponds to the respective region of the display from the first content to second content, different from the first content;

determining a second set of content-display values, different from the first set of content-display values, for the one or more content-display properties of the second content;

determining a second set of control-appearance values for one or more control-appearance parameters based on the second set of content-display values, wherein the second set of control-appearance values is different from the first set of control-appearance values; and

in response to detecting the change in content, changing the appearance of the control in accordance with;

the second content; and

the second set of control-appearance values.

24. A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by an electronic device with a display, cause the device to:

display a user interface on the display;

determine a first set of content-display values for one or more content-display properties of first content that corresponds to a respective region of the display;

determine a first set of control-appearance values for one or more control-appearance parameters based on the first set of content-display values; and

display a control in the respective region of the display, wherein an appearance of the control is determined based on;

the first content; and

the first set of control-appearance values;

wherein;

the control includes a translucent portion; and

displaying the control includes displaying, in the translucent portion of the control, a representation of a portion of the first content that corresponds to the translucent portion of the control, wherein the representation of the first content is transformed in accordance with the first set of control-appearance values.

25. The computer readable storage medium of claim 24, wherein a respective content-display value for content in the respective region corresponds to a statistical measurement of a respective visual property for the respective region.

26. The computer readable storage medium of claim 24, wherein the content-display properties include one or more of:

color, hue, saturation, brightness, and contrast.

27. The computer readable storage medium of claim 24, wherein a change in a respective control-appearance value corresponds to a change in a magnitude of a respective transformation that is applied to content underneath the control to generate an appearance of the control.

28. The computer readable storage medium of claim 24, wherein the control-appearance parameters include one or more of:

blur radius, saturation adjustment, opacity of a white overlay, opacity of a black overlay, opacity of one or more selectable portions of the control, and color of text in the control.

29. The computer readable storage medium of claim 24, wherein determining the first set of control-appearance values includes:

storing a plurality of respective predefined sets of content-display values that correspond to respective predefined sets of control-appearance values;

identifying one or more predefined sets of content-display values that are close to the first set of content-display values as proximate sets of content-display values; and

determining the first set of control-appearance values based on one or more predefined sets of control-appearance values corresponding to the one or more proximate sets of content-display values.

30. The computer readable storage medium of claim 24, wherein determining the first set of content-display values includes using the first set of content-display values as inputs for an algorithm that generates control-appearance values as output.

31. The computer readable storage medium of claim 24, including instructions which, when executed, cause the device to:

while displaying the control in the respective region of the display;

detect a change in content that corresponds to the respective region of the display from the first content to second content, different from the first content;

determine a second set of content-display values, different from the first set of content-display values, for the one or more content-display properties of the second content;

determine a second set of control-appearance values for one or more control-appearance parameters based on the second set of content-display values, wherein the second set of control-appearance values is different from the first set of control-appearance values; and

in response to detecting the change in content, change the appearance of the control in accordance with;

the second content; and

the second set of control-appearance values.

32. A method comprising:

at a device with a display;

displaying a user interface on the display;

determining a first set of content-display values for one or more content-display properties of first content that corresponds to a respective region of the display;

determining a first set of control-appearance values for one or more control-appearance parameters based on the first set of content-display values;

displaying a control in the respective region of the display, wherein an appearance of the control is determined based on;

the first content; and

the first set of control-appearance values;

while displaying the control in the respective region of the display;

detecting a change in content that corresponds to the respective region of the display from the first content to second content, different from the first content;

determining a second set of content-display values, different from the first set of content-display values, for the one or more content-display properties of the second content;

determining a second set of control-appearance values for one or more control-appearance parameters based on the second set of content-display values, wherein the second set of control-appearance values is different from the first set of control-appearance values; and

in response to detecting the change in content, changing the appearance of the control in accordance with;

the second content; and

the second set of control-appearance values.

33. The method of claim 32, wherein changing the appearance of the control includes changing a color of text in the control.

34. The method of claim 32, wherein:

the control includes a translucent portion; and

changing the appearance of the control in accordance with the second set of control-appearance values includes displaying, in the translucent portion of the control, a representation of a portion of the second content that corresponds to the translucent portion of the control, wherein the representation of the second content is transformed in accordance with the second set of control-appearance values.

35. The method of claim 32, wherein:

the first set of control-appearance values are values for a first set of control-appearance parameters; and

the second set of control-appearance values are values for the first set of control-appearance parameters.

36. The method of claim 32, wherein:

the first set of control-appearance values are values for a first set of control-appearance parameters; and

the second set of control-appearance values are values for a second set of control-appearance parameters different from the first set of control-appearance parameters.

37. The method of claim 32, including:

after detecting the change in content that corresponds to the respective region of the display from the first content to the second content and prior to changing the appearance of the control in accordance with the second set of control display values;

determining a respective set of control-appearance values, different from the first set of control-appearance values, for the first set of control-appearance parameters based on the second set of content-display values, wherein the respective set of control appearance values is different from the first set of control-appearance values and the second set of control-appearance values; and

changing the appearance of the control in accordance with;

the second content; and

the respective set of control-appearance values.

38. The method of claim 32, including:

after detecting the change in content from the first content to the second content and before changing the appearance of the control in accordance with the second set of control-appearance values, changing the appearance of the control in accordance with;

the second content; and

the first set of control-appearance values.

39. A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by an electronic device with a display, cause the device to:

display a user interface on the display;

determine a first set of content-display values for one or more content-display properties of first content that corresponds to a respective region of the display;

determine a first set of control-appearance values for one or more control-appearance parameters based on the first set of content-display values;

display a control in the respective region of the display, wherein an appearance of the control is determined based on;

the first content; and

the first set of control-appearance values;

while displaying the control in the respective region of the display;

detect a change in content that corresponds to the respective region of the display from the first content to second content, different from the first content;

determine a second set of content-display values, different from the first set of content-display values, for the one or more content-display properties of the second content;

determine a second set of control-appearance values for one or more control-appearance parameters based on the second set of content-display values, wherein the second set of control-appearance values is different from the first set of control-appearance values; and

in response to detecting the change in content, change the appearance of the control in accordance with;

the second content; and

the second set of control-appearance values.

40. The computer readable storage medium of claim 39, wherein changing the appearance of the control includes changing a color of text in the control.

41. The computer readable storage medium of claim 39, wherein:

the control includes a translucent portion; and

changing the appearance of the control in accordance with the second set of control-appearance values includes displaying, in the translucent portion of the control, a representation of a portion of the second content that corresponds to the translucent portion of the control, wherein the representation of the second content is transformed in accordance with the second set of control-appearance values.

42. The computer readable storage medium of claim 39, wherein:

the first set of control-appearance values are values for a first set of control-appearance parameters; and

the second set of control-appearance values are values for the first set of control-appearance parameters.

43. The computer readable storage medium of claim 39, wherein:

the first set of control-appearance values are values for a first set of control-appearance parameters; and

the second set of control-appearance values are values for a second set of control-appearance parameters different from the first set of control-appearance parameters.

44. The computer readable storage medium of claim 39, including instructions which, when executed, cause the device to:

after detecting the change in content that corresponds to the respective region of the display from the first content to the second content and prior to changing the appearance of the control in accordance with the second set of control display values;

determine a respective set of control-appearance values, different from the first set of control-appearance values, for the first set of control-appearance parameters based on the second set of content-display values, wherein the respective set of control appearance values is different from the first set of control-appearance values and the second set of control-appearance values; and

change the appearance of the control in accordance with;

the second content; and

the respective set of control-appearance values.

45. The computer readable storage medium of claim 39, including instructions which, when executed, cause the device to:

after detecting the change in content from the first content to the second content and before changing the appearance of the control in accordance with the second set of control-appearance values, change the appearance of the control in accordance with;

the second content; and

the first set of control-appearance values.