01. Structure

One UI Design Guidelines defines matters relating to One UI’s distinctive usability and user experience. Design principles have been applied to One UI to help users control their devices more intuitively and concentrate on the important content more easily. For the structure, hierarchy and interaction of the main screens and components comply with the Android design principles.

Structure of Android screens and main components

1Lock screen

2Application screen

3Home screen

4Notification

5App bar

6Dialog

Divide the screen into the Viewing area and Interaction area

One UI has been designed to help the user easily control the on-screen components on their handheld device.
Based on the height that a person’s finger can most easily reach on the screen, the area above this point is defined as the Viewing area, and the area below it is defined as the Interaction area.

1[Viewing area]
Place content that doesn’t require any user interactions, such as a title.

2[Interaction area]
Place frequently used components, such as function buttons and navigation button (e,g., tabs), and arrange dialogs that require user actions at the bottom of the screen.

Emphasize content using focus blocks

One UI supports a card-type mkdown-docs called a ‘focus block’ which is used to draw the user’s eyes to the content that needs to be emphasized on the screen.
A focus block’s big rounded corners can capture the user’s attention visually with its shape. You can make your content stand out even more by creating a high contrast between the focus block’s background color and blank space behind them.
You can include different content types, such as text, images, or videos, in focus blocks. You can place a single content item or a combination of content items in a single focus block. Focus blocks can be applied to the Android components that have content in them, such as cards, lists including images and texts.