UX Guide
Text Field
PUBLISHED
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:
- Read more about Text Field
Button
PUBLISHED
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
PUBLISHED
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
PUBLISHED
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
PUBLISHED
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:
Design Library
PUBLISHED
The following UI components are the basic screen elements of your application:
Asset Library
PUBLISHED
Fonts
Tizen 2.3 uses the TizenSans family fonts. The TizenSans family consists of regular and medium weight fonts. You can download useful fonts from here and use them in your applications.
Figure: TizenSans fonts
Colors
PUBLISHED
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
PUBLISHED
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
PUBLISHED
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.