System and method for streamlining user interface development

Abstract

A computer network implemented system is provided that provides a development platform for streamlining the creation of graphical user interface having natural user interface (NUI) attributes (the “platform”). The platform is based on a novel and innovative development framework and workflow that enables the creation of executable GUI elements. A display utility provides a series of screens that provide access to functions that capture a designer's user interface design intent. A user interface is provided that allows a designer to capture the various elements and information indicative of their intent relative to the UI design, to enable creation of a series of UI assets that are encoded with sufficient information to enable their rendering with significantly reduced development effort than in prior art solutions. In one aspect, the assets referred to herein incorporate coding elements corresponding to relevant effects such as position, animation, and “look”. The elements together represent the design intent that is important to convey the important elements for accurately rendering a NUI. More specifically, the platform is designed to encode the assets with state to state transitions such that the assets themselves can be manipulated (to change order and make modifications for example), and yet these assets are also executable.

1 . A computer-implemented method comprising:
 obtaining a media file, the media file including data defining user interface (UI) elements;   extracting, from the media file, one or more UI layout files and associated animations, the associated animations defining animation attributes for the UI elements in a state associated with a layout defined by the one or more UI layout files;   generating, by a processor, a series of executable UI assets encoded with state-to state transitions to enable modification of the executable series of UI assets, the encoding performed based on the obtained UI elements, the UI layout files and the associated animations.   
     
     
         2 . The computer-implemented method of  claim 1  wherein the media file is obtained from a visual graphics platform and one or more of the UI elements comprise UI controls, the method further comprising:
 categorizing the UI controls into presentation-related UI controls and behavior-related UI controls. 
 
     
     
         3 . The computer-implemented method of  claim 1  wherein the media file is selected from the group consisting of: a graphics file; a scene tree; and an animation file. 
     
     
         4 . The computer-implemented method of  claim 1  wherein the media file includes data defining the UI elements organized in an animated workflow and illustrating interaction with the UI elements. 
     
     
         5 . The computer-implemented method of  claim 1  wherein the state-to-state transitions comprise position data or animation data. 
     
     
         6 . The computer-implemented method of  claim 1  wherein the associated animation is provided in time-based animation files or frame-based animation files. 
     
     
         7 . The computer-implemented method of  claim 1  wherein the series of executable UI assets are manipulable in connection with a user interface design workflow while being executable by a rendering utility. 
     
     
         8 . The computer-implemented method of  claim 1  further comprising:
 generating timeline information based on the obtained UI elements. 
 
     
     
         9 . The computer implemented method of  claim 8  wherein generating timeline information is further based on the one or more UI layout files and associated animations. 
     
     
         10 . The computer-implemented method of  claim 1  wherein the media file comprises marker information, and wherein the method further comprises:
 automatically binding a behavior state to the animation based on the marker information. 
 
     
     
         11 . The computer-implemented method of  claim 1  further comprising:
 analyzing the media file and identifying components that constitute UI controls; and 
 separating presentation data for the UI controls from behavior data for the UI controls, the presentation data and the behavior data being obtained from the one or more UI layout files. 
 
     
     
         12 . The computer-implemented method of  claim 11  further comprising, for a behavior-related UI control among the UI controls:
 adding a behavior class name to the behavior-related UI control to bind the presentation to the behavior. 
 
     
     
         13 . The computer-implemented method of  claim 11  wherein the series of executable UI assets comprises executable code separating the presentation data from the behavior data such that the behavior of the UI control is unaffected by modification of the presentation data for the UI control. 
     
     
         14 . The computer-implemented method of  claim 1  wherein the UI elements in the obtained media file comprise non-interactive UI elements. 
     
     
         15 . The computer-implemented method of  claim 1  wherein the UI elements defined by the obtained media file have visual interactive features devoid of associated functionality. 
     
     
         16 . The computer-implemented method of  claim 1  wherein generating the series of executable UI assets comprises generating executable code. 
     
     
         17 . The computer-implemented method of  claim 1  wherein the series of executable UI assets comprises executable code that reflects the data defining the UI elements. 
     
     
         18 . The computer-implemented method of  claim 1  wherein executable code associated with the series of executable UI assets is unaffected by modification of the series of executable UI assets. 
     
     
         19 . A computer-implemented method comprising:
 obtaining a media file, the media file including data defining user interface (UI) elements;   extracting, from the media file, one or more UI layout files and associated animations, the associated animations defining animation attributes for the UI elements in a state associated with a layout defined by the one or more UI layout files;   generating, by a processor, a series of executable UI assets encoded with behavior attributes and/or presentation attributes to enable modification of the executable series of UI assets, the encoding performed based on the obtained UI elements, the UI layout files and the associated animations.   
     
     
         20 . The computer-implemented method of  claim 19  wherein generating comprises generating the series of executable UI assets encoded with both behavior attributes and presentation attributes. 
     
     
         21 . A non-transitory machine-readable medium storing statements and instructions for execution by a processor to perform the computer-implemented method of  claim 20 . 
     
     
         22 . A computer system for streamlined user interface (UI) development, the system comprising:
 one or more processors, executing one or more computer programs, configured to:   obtain a media file, the media file including data defining user interface (UI) elements;   extract, from the media file, one or more UI layout files and associated animations, the associated animations defining animation attributes for the UI elements in a state associated with a layout defined by the one or more UI layout files; and   generate, by a processor, a series of executable UI assets encoded with state-to-state transitions to enable modification of the executable series of UI assets, the encoding performed based on the obtained UI elements, the UI layout files and the associated animations.