User Interface Editor

• US 20160092096A1
• Filed: 12/07/2015
• Published: 03/31/2016
• 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 10,613,733 B2
• Time in Patent Office: Days
• US Class Current: 1/1
• 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) via a UI editor, comprising;

receiving a first user input from a first user to define one or more layers of the hierarchical structure;

adding one or more UI components at each layer; and

specifying one or more relationships among particular UI components; and

associating metadata with each UI component at each layer, the metadata comprising display information describing how the corresponding UI component is presented in the UI based on defining one or more display states for each UI component at each layer,

wherein at least one of UI components is associated with a single display state and at least one of the UI components is associated with a plurality of display states, and

wherein the at least one UI component associated with a plurality of display states comprises at least a first display state associated with the display of the UI component when the UI component is not user-interactable, and a second display state associated with the display of the UI component when the UI component is user-interactable, the second display state being different from the first display state.

2. The method of claim 1, wherein when a first UI component associated with a plurality of display states is selected via the UI editor by the user, the UI editor automatically edits the first UI component on a first layer of the hierarchical structure such that an upper border or lower border of the first UI component extends beyond a second UI component associated with a second layer of the hierarchical structure underneath the first layer.

3. The method of claim 1, wherein one or more multi-state UI components are predefined or defined by the UI editor to be associated with a pre-defined plurality of display states.

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

5. The method of claim 1, wherein the one or more UI components further comprise one or more media objects.

6. The method of claim 1,

wherein the first display state is associated with a static media object, and

wherein the second display state is associated with a user-interactable media object.

7. The method of claim 1, further comprising, for the at least one UI component associated with the plurality of display states, defining, via a UI designer, one or more user controls for accessing each of the plurality of display states.

8. The method of claim 7, further comprising:

selecting, via the UI designer, the one or more user controls for accessing each of the plurality of display states based on at least one attribute of the UI component.

9. The method of claim 1, wherein at least one UI component is associated with a third display state that is user-accessible only when a user interacts with the UI component using a pre-defined user interaction.

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

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

receiving a first user input from a first user to define one or more layers of the hierarchical structure;

adding one or more UI components at each layer; and

specifying one or more relationships among particular UI components; and

associate metadata with each UI component at each layer, the metadata comprising display information describing how the corresponding UI component is presented in the UI based on defining one or more display states for each UI component at each layer,

wherein at least one of UI components is associated with a single display state and at least one of the UI components is associated with a plurality of display states, and

wherein the at least one UI component associated with a plurality of display states comprises at least a first display state associated with the display of the UI component when the UI component is not user-interactable, and a second display state associated with the display of the UI component when the UI component is user-interactable, the second display state being different from the first display state.

11. The media of claim 10, wherein when a first UI component associated with a plurality of display states is selected via the UI editor by the user, the UI editor automatically edits the first UI component on a first layer of the hierarchical structure such that an upper border or lower border of the first UI component extends beyond a second UI component associated with a second layer of the hierarchical structure underneath the first layer.

12. The media of claim 10, wherein one or more multi-state UI components are predefined or defined by the UI editor to be associated with a pre-defined plurality of display states.

13. The media of claim 10, wherein the one or more UI components further comprise one or more of a text block, image, video, audio, feed, executable, website, web page, digital book, photo album, post, or message.

14. The media of claim 10, wherein the one or more UI components further comprise one or more media objects.

15. The media of claim 10, wherein

wherein the first display state is associated with a static media object, and

wherein the second display state is associated with a user-interactable media object.

16. The media of claim 10, the media embodying software that is further operable when executed to, for the at least one UI component associated with the plurality of display states, define, via a UI designer, one or more user controls for accessing each of the plurality of display states.

17. The media of claim 16, the media embodying software that is further operable when executed to select, via the UI designer, the one or more user controls for accessing each of the plurality of display states based on at least one attribute of the UI component.

18. The media of claim 10, wherein at least one UI component is associated with a third display state that is user-accessible only when a user interacts with the UI component using a pre-defined user interaction.

19. A system comprising:

one or more processors; and

a memory coupled to the processors comprising instructions executable by the processors, the processors operable when executing the instructions to;

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

receiving a first user input from a first user to define one or more layers of the hierarchical structure;

adding one or more UI components at each layer; and

specifying one or more relationships among particular UI components; and

associate metadata with each UI component at each layer, the metadata comprising display information describing how the corresponding UI component is presented in the UI based on defining one or more display states for each UI component at each layer,

wherein at least one of UI components is associated with a single display state and at least one of the UI components is associated with a plurality of display states, and

wherein the at least one UI component associated with a plurality of display states comprises at least a first display state associated with the display of the UI component when the UI component is not user-interactable, and a second display state associated with the display of the UI component when the UI component is user-interactable, the second display state being different from the first display state.