The layout and app structure is the foundation for designing applications in MindSphere.
A layout consists of several regions which in combination form several layout patterns for different scenarios.
The following layout patterns are recommended and described in this document:
General app layout
A layout consists of combinations of the following elements:
- Global region: The global region is reserved for the MindSphere OS Bar (only).
- Local region: The local region is reserved for the app bar and used as the first level navigation within an application.
- Leading region: The leading region is mainly used for the content navigation and selection.
- Main region: The main region contains the main content of the application.
- Context region: The context region is used for additional information and components.
- App header: The app header can be used to display hierarchy in form of a breadcrumb, display information that has to be visible at all times and contains the region toggle buttons.
- Item region: The item region is only visible when an item is selected. Information regarding the selected item is displayed to the user.
The global and the main region are required in all parts of an application. All other regions are optional and depend on context and pattern.
The overview-detail pattern is used when you want to initially display a set of domain objects with moderate amount of details for each object. Users can interact with the object to navigate or reveal more details in the item region to the right side. The objects in the main region can be arranged in any of the following ways: cards, list, tables, etc.
The list-detail pattern is used when you want to initially display a big set of domain objects without additional information in the first step. Selecting an item in the item region then reveals all information of this item in the main region, thereby making this pattern ideal for navigation between objects. This pattern is recommended for navigating through hierarchical structures of domain objects. The objects in the leading region need to be arranged in form of a list-navigation.
Desktop and tablet (landscape) screens
Mobile and tablet (portrait) screens
Mobile size and tablet portrait size
To use the limited screen area of a mobile device, there are two options for the sidebars - overlay the main content or push the main content. The smaller the device, the more the overlay mode is used.