View
7
Download
0
Category
Preview:
Citation preview
Tizen Mobile UX
Introduction
UX R&D Team, Samsung Electronics
Wonkyu Park
Demo Video
2
Table of Content
02 Our Principles Primary user goals / At a glance / Individual needs
01 UI Overview Lock / Home / Recent / Application / Notification
04 Style Icons / Colors / Typography
03 Design Pattern App structure / Actions
3
UI Overview
Core UI Components
• Lock Screen
• Home Screen
• Application
• Recent panel
• Notification panel Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
5
Lock screen
• Simple and sophisticated look
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
6
Home screen
• Structured and understandable
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
7
Recent Applications
• Easy to jump between running apps or close the app
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
8
Notification Panel
• Showing overview and quick setting
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
9
Application
• New but familiar design based on principles
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
10
Our Principles
Design principles
12
• Focus on the primary user goals
• Ensure understanding at a glance
• Support curiosity & individual needs
Focus on the primary user goals
• Put focus on the primary goal
13
Focus on the primary user goals
• The first screen should satisfy 80% of user needs
14
Focus on the primary user goals
• Provide the most important as defaults
15
Ensure understanding at a glance
• Create clear distinctions
16
Ensure understanding at a glance
• Display essential information first
17
Ensure understanding at a glance
• Show what is possible with consistent visual language
18
Support curiosity & individual needs
• Let users express their own style
19
Support curiosity & individual needs
• Put the emphasis on fun
20
Support curiosity & individual needs
• Learn the users preferences and adapt
21
Design Pattern
App structure
• Item navigation
23
App structure
• Tabs
24
App structure
• Drawer
25
App structure
• Single view
26
Actions
• Menu button
27
Actions
• In-line actions
28
STYLE
Icon
• Round shape
30
Colors
• The point color is blue
31
Typography
32
Summary
"• '
, • •
• (, . . ...
. I • I • I ' . - . . ., ... ,.
• • ' "• '
• ' . •
T IZ E DEVELOPER SUMMIT
2 0 14
TM
- . .-
,I ' - . \ . . . .. , . ..... . • I e ' •
.'
. .... ,
. SH A N G HA I fil!:mlmiil.9fil!:mlmiil.9fil!:ml TIZENTF:At l l $ (..t fi)
• ' "
• • •
• I •
• , \
4 • •
' . •
• • ' •"
Recommended