UX GuideSubscribe to RSS - UX Guide

 

Text Field

You can allow users to enter text in an application using a text field. Tapping the text field activates the keypad and reveals a cursor.

You can use the following types of text fields:

Button

Button is an UI element that provides the user a simple way to trigger an event.

A button can have image or text on it, or it can have label under the image. A button can be in one of multiple states, such as normal (activated), dimmed (deactivated), or pressed (selected).

Buttons can contain text, image, or both. The button appearance should clearly communicate the action it is related to.

Buttons can have a shape around them. You can present a button as only text without a shape but make sure that the action is clearly communicated with the right wording.

Scroll

The body area supports the following types of scrolling and functionality:

Scroll Bar

Scrolling body content up and down displays the basic scroll bar, which offers visual information, such as the total length and location of a list.

However, the basic scroll bar disappears after a certain amount of time, and the users cannot adjust it by touch.

 

Body

The body is the screen area visible under the header. The application body can contain the following content types, such as lists or menus.

List

A list is normally used to display several content items. It is the most basic type of body content. You can use lists to display either single-line or multi-line items in an orderly manner. Each list item can have various elements, such as text, an icon, a thumbnail image, or a button.

You can use the following list types:

Header

The header, which appears at the top of the application screen, is a word or phrase describing the screen content or purpose.

Depending on their format and function, headers fall one of the following categories:

Colors

The color theme for Tizen 2.3 is light. The point color is blue, and alpha values are used for components, such as icon or scroll. You can adjust saturation and brightness values for components, such as a button.

Several vivid colors can be used for specific functions, such as green for the Start function, and red for Delete functions.

 

Figure: Color theme

Design Principles

In this section, we introduce the key design principles that have shaped Tizen and helped in setting it apart from other mobile operating platforms. These principles ensure every application people use to customize their phones is content-driven, focused, and tailored to user needs.

Familiarize yourself with the Tizen design principles so that you can put them to best use when developing your application.

Display

Screen resolutions vary from device to device. When designing layouts for your applications, make sure you consider the range of possible resolutions, as well as both landscape and portrait screen orientations.