Essentials of Tizen UX Design/Tizen UX

WHY?

Not recommended Recommended

Tizen UX Design Principles

Style Guidelines

Design patterns

Basic interactions for wearable

Basic interactions for mobile

Developer support

WHAT?

1

2

인상 깊을 만한 Quote 삽입 Vision

Introducing “AIR”

“AIR is a conceptual element that inspires

an open, flexible, and rich experience”

AIR // New design language

Ground Atmosphere Wind

Key concept // Tizen design language

“Glanceable”

“Fast and responsive”

“Personalized”

“ Rich style”

“Simple”

Iconography // Circular container

Iconography // Circular container

Iconography // Legibility & Color usage

Iconography // Consider your app icons

Not recommended Recommended

Iconography // When you consider design

TYPE A TYPE B CIRCLE

Typography // Introducing Breeze Sans

16

0. Basic Screen Layout Color // How color structure works

Dim

Background

image

Color // How color structure works

Design Patterns // Design your pages to be consistent

Design Patterns // Design to draw attention

Design Patterns // Design your interactions to be natural & responsive

Water intake

Button feedbacks

Design Patterns // Design stylish screens

Watch face

Themes

Not recommended

Manage spam address

Email settings

Add account

Recommended

Slim down features

Weather Hourly view

Simplify structure & layout

Emphasize the main

Think beyond the screen

Action Left Display Screen X2

Action Right Display Screen X2

Bottom Button Display Screen X3

Stopwatch

Apps Dialer

S-Health activity log

Honor the circle

Basic interactions // View layout types

Touch & Rotary Rotary only Rotate to Zoom

Touch to Pan

Vertical view Horizontal view Anchored view Freeform view

Navigate pages Zoom

Scroll page Change value

Item 1

Item 2

Item 3

Rotary use cases

Single line list Two lines list More option Volume control Pop up

Checkbox Radio button On/off toggle Time picker

UI Components

Basic interactions // Easy navigation between screens

Basic interactions // Primary action for user goal

Basic interactions // Useful notifications

Accessing notification panel Active notification Instant notification

UI Components

Header

Buttons

Loading

Slider Toggle, Check box, Radio buttons

Text input

Design guidelines // Developer friendly website

Design guidelines // Developer friendly website

Contact Info // Developer friendly website

Related sessions:

• Connecting with Tizen: An Overview & Roadmap

• Developing Apps on Tizen: UI/UX Strategies

• Application GUI Design- Notes From a Tizen tookit Developer

Contact Info:

Mobile: syun.yun@samsung.com

Wearable: change.kang@samsung.com