tizen mobile ux introduction 2014-12-03آ  mobile ux introduction ux r&d team, samsung electronics...

Download Tizen Mobile UX Introduction 2014-12-03آ  Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu

Post on 10-Jun-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 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 • •

    ' . •

    • • ' • "