Prev | Next |
User Interface Diagrams
User experience and user interface design have traditionally been modeled in a variety of tools that are separate from other disciplines, leading to a disconnect between these models and the other analysis and technology models.
Enterprise Architect allows you to model a wide range of user interfaces and platforms, including client software, web sites and pages, and mobile devices such as phones and tablets. It uses compelling representations of the physical devices and the platforms to make these models appealing and useful for walks-through with users. The elements in these models can also be traced to other elements in the repository, including design principles, requirements, use cases and user stories, stakeholders' concerns, information models, architecture and design models. StateMachine diagrams can also be created to represent the important states of the user interface, and these can be traced to testing models.
The User Interface diagram is an extended diagram type that provides a set of wire framing Toolbox pages with a rich palette of user interface elements for Android and Apple devices, as well as for web pages and dialogs. There is also a facility for modeling Win32® user interfaces, with Toolbox pages containing a wide range of controls such as Check Boxes, Spin Controls, Tree Controls and many more.
Example Diagram
Example User Interface Diagram
User Interface Diagram Element Toolbox Icons
Icon |
Description |
See also |
---|---|---|
Packages are used to organize your project contents, but when added onto a diagram they can be used to depict the structure and relationships of your model. |
Package | |
A Screen element is used to prototype a User Interface screen flow. |
Screen | |
A UI Control element represents a user interface control element (such as an edit box). |
UI Control Elements | |
An Object is a particular instance of a Class at run time. |
Object |
User Interface Diagram Connector Toolbox Icons
Icon |
Description |
See also |
---|---|---|
An Association implies that two model elements have a relationship, usually implemented as an instance variable in one or both Classes. |
Association | |
An Aggregation connector is a type of association that shows that an element contains or is composed of other elements. |
Aggregation | |
A Generalization is used to indicate inheritance. |
Generalization | |
A Realizes connector represents that the source object implements or Realizes its destination object. |
Realization |
Notes
- Using stereotyped Classes, you can model the design of a web page user interface
- The Enterprise Architect Professional, Corporate, unified and Ultimate editions also include the MDG Win32 UI Technology, with which you can design user interface components that render more precisely as Win32 ® User Interface elements