essentials of tizen ux design/tizen ux
TRANSCRIPT
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: [email protected]
Wearable: [email protected]