40

Essentials of Tizen UX Design/Tizen UX

Embed Size (px)

Citation preview

Page 1: Essentials of Tizen UX Design/Tizen UX
Page 2: Essentials of Tizen UX Design/Tizen UX

WHY?

Not recommended Recommended

Page 3: Essentials of Tizen UX Design/Tizen UX

Tizen UX Design Principles

Style Guidelines

Design patterns

Basic interactions for wearable

Basic interactions for mobile

Developer support

WHAT?

1

2

Page 4: Essentials of Tizen UX Design/Tizen UX
Page 5: Essentials of Tizen UX Design/Tizen UX

인상 깊을 만한 Quote 삽입 Vision

Page 6: Essentials of Tizen UX Design/Tizen UX

Introducing “AIR”

“AIR is a conceptual element that inspires

an open, flexible, and rich experience”

Page 7: Essentials of Tizen UX Design/Tizen UX

AIR // New design language

Ground Atmosphere Wind

Page 8: Essentials of Tizen UX Design/Tizen UX

Key concept // Tizen design language

“Glanceable”

“Fast and responsive”

“Personalized”

“ Rich style”

“Simple”

Page 9: Essentials of Tizen UX Design/Tizen UX
Page 10: Essentials of Tizen UX Design/Tizen UX

Iconography // Circular container

Page 11: Essentials of Tizen UX Design/Tizen UX

Iconography // Circular container

Page 12: Essentials of Tizen UX Design/Tizen UX

Iconography // Legibility & Color usage

Page 13: Essentials of Tizen UX Design/Tizen UX

Iconography // Consider your app icons

Not recommended Recommended

Page 14: Essentials of Tizen UX Design/Tizen UX

Iconography // When you consider design

TYPE A TYPE B CIRCLE

Page 15: Essentials of Tizen UX Design/Tizen UX

Typography // Introducing Breeze Sans

Page 16: Essentials of Tizen UX Design/Tizen UX

16

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

Dim

Background

image

Page 17: Essentials of Tizen UX Design/Tizen UX

Color // How color structure works

Page 18: Essentials of Tizen UX Design/Tizen UX
Page 19: Essentials of Tizen UX Design/Tizen UX

Design Patterns // Design your pages to be consistent

Page 20: Essentials of Tizen UX Design/Tizen UX

Design Patterns // Design to draw attention

Page 21: Essentials of Tizen UX Design/Tizen UX

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

Water intake

Button feedbacks

Page 22: Essentials of Tizen UX Design/Tizen UX

Design Patterns // Design stylish screens

Watch face

Themes

Page 23: Essentials of Tizen UX Design/Tizen UX
Page 24: Essentials of Tizen UX Design/Tizen UX

Not recommended

Manage spam address

Email settings

Add account

Recommended

Slim down features

Page 25: Essentials of Tizen UX Design/Tizen UX

Weather Hourly view

Simplify structure & layout

Page 26: Essentials of Tizen UX Design/Tizen UX

Emphasize the main

Page 27: Essentials of Tizen UX Design/Tizen UX

Think beyond the screen

Action Left Display Screen X2

Action Right Display Screen X2

Bottom Button Display Screen X3

Page 28: Essentials of Tizen UX Design/Tizen UX

Stopwatch

Apps Dialer

S-Health activity log

Honor the circle

Page 29: Essentials of Tizen UX Design/Tizen UX

Basic interactions // View layout types

Touch & Rotary Rotary only Rotate to Zoom

Touch to Pan

Vertical view Horizontal view Anchored view Freeform view

Page 30: Essentials of Tizen UX Design/Tizen UX

Navigate pages Zoom

Scroll page Change value

Item 1

Item 2

Item 3

Rotary use cases

Page 31: Essentials of Tizen UX Design/Tizen UX

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

Checkbox Radio button On/off toggle Time picker

UI Components

Page 32: Essentials of Tizen UX Design/Tizen UX
Page 33: Essentials of Tizen UX Design/Tizen UX

Basic interactions // Easy navigation between screens

Page 34: Essentials of Tizen UX Design/Tizen UX

Basic interactions // Primary action for user goal

Page 35: Essentials of Tizen UX Design/Tizen UX

Basic interactions // Useful notifications

Accessing notification panel Active notification Instant notification

Page 36: Essentials of Tizen UX Design/Tizen UX

UI Components

Header

Buttons

Loading

Slider Toggle, Check box, Radio buttons

Text input

Page 37: Essentials of Tizen UX Design/Tizen UX
Page 38: Essentials of Tizen UX Design/Tizen UX

Design guidelines // Developer friendly website

Page 39: Essentials of Tizen UX Design/Tizen UX

Design guidelines // Developer friendly website

Page 40: Essentials of Tizen UX Design/Tizen UX

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: [email protected]

Wearable: [email protected]