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

• US 9,305,374 B2
• Filed: 02/18/2014
• Issued: 04/05/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,383
• Publication Number:
  US 20140267363A1
• Time in Patent Office: 777 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, where an appearance of the control is determined based on the first content and the first set of control-appearance values, and displaying the control includes applying a blur operation to the first content to generate first blurred content and overlaying a translucent colored layer over the first blurred content.

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, wherein the first set of content-display values include a content color value for the first content that corresponds to the 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, wherein the first set of control-appearance values include a control color value that is selected based on the content color value for the first content; 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, and displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent colored layer over the first blurred content, wherein;

the translucent colored layer has a color specified by the control color value;

the first blurred content is visible through the translucent colored layer; and

an appearance of the first blurred content through the translucent colored layer is dependent upon the color of the translucent colored layer.

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, 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.

9. 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.

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 1, wherein:

the control includes a translucent portion;

a respective portion of content corresponds to a location of the translucent portion of the control; and

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

16. 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.

17. The device of claim 1, wherein:

the first set of content-display values include a content saturation value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control saturation value that is selected based on the content saturation value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent colored layer over the first blurred content, wherein;

the translucent colored layer has a saturation specified by the control saturation value;

the first blurred content is visible through the translucent colored layer; and

an appearance of the first blurred content through the translucent colored layer is dependent upon the saturation of the translucent colored layer.

18. The device of claim 1, wherein:

the first set of content-display values include a content brightness value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control opacity value that is selected based on the content brightness value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent layer over the first blurred content, wherein;

the translucent layer has an opacity specified by the control opacity value;

the first blurred content is visible through the translucent layer; and

an appearance of the first blurred content through the translucent layer is dependent upon the opacity of the translucent layer.

19. The device of claim 1, wherein:

the first set of content-display values include a content saturation value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control opacity value that is selected based on the content saturation value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent layer over the first blurred content, wherein;

the translucent layer has an opacity specified by the control color value;

the first blurred content is visible through the translucent layer; and

an appearance of the first blurred content through the translucent layer is dependent upon the opacity of the translucent layer.

20. 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, wherein the first set of content-display values include a content color value for the first content that corresponds to the 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, wherein the first set of control-appearance values include a control color value that is selected based on the content color value for the first content; 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, and displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent colored layer over the first blurred content, wherein;

the translucent colored layer has a color specified by the control color value;

the first blurred content is visible through the translucent colored layer; and

an appearance of the first blurred content through the translucent colored layer is dependent upon the color of the translucent colored layer.

22. The method of claim 20, 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.

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

color, hue, saturation, brightness, and contrast.

24. The method of claim 20, 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.

25. The method of claim 20, 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.

26. The method of claim 20, 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.

27. The method of claim 20, 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.

28. The method of claim 20, 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.

29. The method of claim 20, including, 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.

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

31. The method of claim 29, 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.

32. The method of claim 29, 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.

33. The method of claim 29, 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.

34. The method of claim 33, 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.

35. The method of claim 20, wherein:

the control includes a translucent portion;

a respective portion of content corresponds to a location of the translucent portion of the control; and

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

36. The method of claim 29, 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.

37. The method of claim 20, wherein:

the first set of content-display values include a content saturation value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control saturation value that is selected based on the content saturation value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent colored layer over the first blurred content, wherein;

the translucent colored layer has a saturation specified by the control saturation value;

the first blurred content is visible through the translucent colored layer; and

an appearance of the first blurred content through the translucent colored layer is dependent upon the saturation of the translucent colored layer.

38. The method of claim 20, wherein:

the first set of content-display values include a content brightness value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control opacity value that is selected based on the content brightness value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent layer over the first blurred content, wherein;

the translucent layer has an opacity specified by the control opacity value;

the first blurred content is visible through the translucent layer; and

an appearance of the first blurred content through the translucent layer is dependent upon the opacity of the translucent layer.

39. The method of claim 20, wherein:

the first set of content-display values include a content saturation value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control opacity value that is selected based on the content saturation value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent layer over the first blurred content, wherein;

the translucent layer has an opacity specified by the control color value;

the first blurred content is visible through the translucent layer; and

an appearance of the first blurred content through the translucent layer is dependent upon the opacity of the translucent layer.

21. 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, wherein the first set of content-display values include a content color value for the first content that corresponds to the 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, wherein the first set of control-appearance values include a control color value that is selected based on the content color value for the first content; 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, and displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent colored layer over the first blurred content, wherein;

the translucent colored layer has a color specified by the control color value;

the first blurred content is visible through the translucent colored layer; and

an appearance of the first blurred content through the translucent colored layer is dependent upon the color of the translucent colored layer.

40. The computer readable storage medium of claim 21, 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.

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

color, hue, saturation, brightness, and contrast.

42. The computer readable storage medium of claim 21, 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.

43. The computer readable storage medium of claim 21, 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.

44. The computer readable storage medium of claim 21, 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.

45. The computer readable storage medium of claim 21, 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.

46. The computer readable storage medium of claim 21, 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.

47. The computer readable storage medium of claim 21, including instructions, which when executed by the electronic device with the display, 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.

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

49. The computer readable storage medium of claim 47, 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.

50. The computer readable storage medium of claim 47, 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.

51. The computer readable storage medium of claim 47, 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.

52. The computer readable storage medium of claim 51, including instructions, which when executed by the electronic device with the display, 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.

53. The computer readable storage medium of claim 21, wherein:

the control includes a translucent portion;

a respective portion of content corresponds to a location of the translucent portion of the control; and

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

54. The computer readable storage medium of claim 47, including instructions, which when executed by the electronic device with the display, 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.

55. The computer readable storage medium of claim 21, wherein:

the first set of content-display values include a content saturation value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control saturation value that is selected based on the content saturation value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent colored layer over the first blurred content, wherein;

the translucent colored layer has a saturation specified by the control saturation value;

the first blurred content is visible through the translucent colored layer; and

an appearance of the first blurred content through the translucent colored layer is dependent upon the saturation of the translucent colored layer.

56. The computer readable storage medium of claim 21, wherein:

the first set of content-display values include a content brightness value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control opacity value that is selected based on the content brightness value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent layer over the first blurred content, wherein;

the translucent layer has an opacity specified by the control opacity value;

the first blurred content is visible through the translucent layer; and

an appearance of the first blurred content through the translucent layer is dependent upon the opacity of the translucent layer.

57. The computer readable storage medium of claim 21, wherein:

the first set of content-display values include a content saturation value for the first content that corresponds to the respective region of the display;

the first set of control-appearance values include a control opacity value that is selected based on the content saturation value for the first content; and

displaying the control includes;

applying a blur operation to the first content to generate first blurred content; and

overlaying a translucent layer over the first blurred content, wherein;

the translucent layer has an opacity specified by the control color value;

the first blurred content is visible through the translucent layer; and

an appearance of the first blurred content through the translucent layer is dependent upon the opacity of the translucent layer.