User Interface Editor

• US 20130339907A1
• Filed: 06/07/2012
• Published: 12/19/2013
• Est. Priority Date: 02/01/2012
• Status: Active Grant

• Current Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Original Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Inventors: Matas, Michael, Tsinteris, Kimon, Sarner, Austin, Melcher, Charles
• Granted Patent: US 9,239,662 B2
• Time in Patent Office: Days
• US Class Current: 715/853
• CPC Class Codes: G06F 2203/04808 Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen
• CPC Class Codes: G06F 3/017 Gesture based interaction, e.g. based on a set of recognized hand gestures interaction based on gestures traced on a digitiser G06F3/04883
• 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/04815 Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: 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
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 40/137 Hierarchical processing, e.g. outlines
• CPC Class Codes: G06F 8/34 Graphical or visual programming
• CPC Class Codes: G06T 11/60 Editing figures and text; Combining figures or text
• CPC Class Codes: G06T 15/60 Shadow generation
• CPC Class Codes: H04L 67/06 specially adapted for file transfer, e.g. file transfer protocol [FTP]
• CPC Class Codes: H04L 67/52 specially adapted for the location of the user terminal

Abstract

In one embodiment, a method performed by one or more computing devices including defining a hierarchical structure for a user interface (UI) that includes defining one or more layers of the hierarchical structure, adding one or more objects at each layer, and specifying one or more relationships among particular objects. The method further including associating metadata with each object at each layer, the metadata describing how the corresponding object is presented in the user interface.

Claims

1. A method, performed by one or more computing devices, comprising:

defining a hierarchical structure for a user interface (UI), comprising;

defining one or more layers of the hierarchical structure;

adding one or more objects at each layer; and

specifying one or more relationships among particular objects;

associating metadata with each object at each layer, the metadata describing how the corresponding object is presented in the user interface.

2. The method of claim 1, further comprising:

selecting a layout for a first object;

arranging one or more second objects according to the selected layout, the second objects being children of the first object in the hierarchical structure; and

adjusting a visual appearance of each of at least one of the second objects.

3. The method of claim 2, wherein adjusting the visual appearance of a second object comprises

automatically adjusting size, position, alignment zoom, field of view, or coloration of the second object based on visual characteristics of the first and second objects.

4. The method of claim 1, further comprising:

selecting one or more layout suitable for one or more types of devices, respectively, for a first object; and

for each selected layout,

arranging one or more second objects according to the selected layout, the second objects being children of the first object in the hierarchical structure; and

adjusting a visual appearance of each of at least one of the second objects based on the type of device corresponding to the selected layout.

5. The method of claim 1, wherein the layout in the user interface is predefined or defined by a UI designer.

6. The method of claim 1, wherein the one or more objects comprise one or more of text block, image, video, audio, feed, executable, website, web page, digital book, photo album, post, or message.

7. The method of claim 1, further comprising:

generating one or more versions of the user interface for presentation one or more types of devices, respectively, based on the metadata associated with each object at each layer of the hierarchical structure; and

presenting the one or more versions of the user interface to a UI designer for previewing.

8. The method of claim 1, further comprising

sending the user interface to a device for presentation to a user, the user interface being presented according to the hierarchical structure.

9. A system comprising:

a memory comprising instructions executable by one or more processors; and

the one or more processors coupled to the memory and operable to execute the instructions, the one or more processors being operable when executing the instructions to;

define a hierarchical structure for a user interface (UI), comprising;

defining one or more layers of the hierarchical structure;

adding one or more objects at each layer; and

specifying one or more relationships among particular objects;

associate metadata with each object at each layer, the metadata describing how the corresponding object is presented in the user interface.

10. The system of claim 9, the one or more processors further operable to:

select a layout for a first object;

arrange one or more second objects according to the selected layout, the second objects being children of the first object in the hierarchical structure; and

adjust a visual appearance of each of at least one of the second objects.

11. The system of claim 10, wherein adjust the visual appearance of a second object comprises

automatically adjust size, position, alignment zoom, field of view, or coloration of the second object based on visual characteristics of the first and second objects.

12. The system of claim 9, the one or more processors further operable to:

select one or more layout suitable for one or more types of devices, respectively, for a first object; and

for each selected layout,

arrange one or more second objects according to the selected layout, the second objects being children of the first object in the hierarchical structure; and

adjust a visual appearance of each of at least one of the second objects based on the type of device corresponding to the selected layout.

13. The system of claim 9, wherein the layout in the user interface is predefined or defined by a UI designer.

14. The system of claim 9, wherein the one or more objects comprise one or more of text block, image, video, audio, feed, executable, website, web page, digital book, photo album, post, or message.

15. The system of claim 9, the one or more processors further operable to:

generate one or more versions of the user interface for presentation one or more types of devices, respectively, based on the metadata associated with each object at each layer of the hierarchical structure; and

present the one or more versions of the user interface to a UI designer for previewing.

16. The system of claim 9, the one or more processors further operable to:

send the user interface to a device for presentation to a user, the user interface being presented according to the hierarchical structure.

17. One or more computer-readable non-transitory storage media embodying logic that is operable when executed to:

define a hierarchical structure for a user interface (UI), comprising;

defining one or more layers of the hierarchical structure;

adding one or more objects at each layer; and

specifying one or more relationships among particular objects;

associate metadata with each object at each layer, the metadata describing how the corresponding object is presented in the user interface.

18. The media of claim 17, further operable to:

select a layout for a first object;

arrange one or more second objects according to the selected layout, the second objects being children of the first object in the hierarchical structure; and

adjust a visual appearance of each of at least one of the second objects.

19. The media of claim 18, wherein adjust the visual appearance of a second object comprises

automatically adjust size, position, alignment zoom, field of view, or coloration of the second object based on visual characteristics of the first and second objects.

20. The media of claim 17, further operable to:

select one or more layout suitable for one or more types of devices, respectively, for a first object; and

for each selected layout,

arrange one or more second objects according to the selected layout, the second objects being children of the first object in the hierarchical structure; and

adjust a visual appearance of each of at least one of the second objects based on the type of device corresponding to the selected layout.