http://msd2015.jylee6977.com/tc

KGIT 2015 SPRING CLASS @ JYLEE

Mobile Service Design

Mobile Service Design

http://msd2015.jylee6977.com/tc

App Design Process (after service strategy)

IDEA WIREFRAME DESIGNING

Information Architecture(IA) User Interface Design(UI) Graphic User Interface Design(GUI) Sourcing(XML)

Mobile Service Design

http://msd2015.jylee6977.com/tc

App Design Process (after service strategy)

Information Architecture(IA) User Interface Design(UI) Graphic User Interface Design(GUI) Sourcing(XML)

내용 정의누구에게. 어떤 방식으로.어떤 순으로

뼈대마네킹 설정.옷의 방식/형태 설정

스킨옷의 질감 및 패턴 선정옷의 다양한 요소 선정

적용적용된 옷을 토대로 공정

옷을 만드는 순서

Mobile Service Design

0. Systemizing Informations

Sitemap

http://msd2015.jylee6977.com/tc

Mobile Service Design

1. Converting Information to Screen

User Interface Basics

Mobile Service Design

http://msd2015.jylee6977.com/tc

Interface ?

Nature

CultureSociety

Human

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

Nature

Culture

Cyber

Society

Human

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

Cyber

Interface : Human과 Cyber환경의 만나는 계면(界面)

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

An interface is a point of interaction between two systems or work groups. In the manufacturing environment, the interaction and coordination between a number of work groups communicate plans and control production activity.

계면, 경계면, 접점, 공유[접촉] 영역, (이종간의) 대화, 연락, 의사 소통

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

User InterfaceOn Mobile

만드는 UI새로운 사용자 경험 창조사용자 경험을 통한 브랜드 가치 창출새로운. 흥미로운. 창의적인

지키는 UI기존의 모바일 경험을 토대로 직관적 경험 창조브랜드가 추구하는 전체 방향 유지직관적인. 사용편의적인. 쉬운

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

만드는 UI새로운 사용자 경험 창조사용자 경험을 통한 브랜드 가치 창출새로운. 흥미로운. 창의적인

지키는 UI기존의 모바일 경험을 토대로 직관적 경험 창조브랜드가 추구하는 전체 방향 유지직관적인. 사용편의적인. 쉬운

혁신적인 컨텐츠 전략(Information Architecture/sitemap)

인터랙션 설계(Scenario/paper prototype)

UI/GUI디자인(wireframe/resource design)

+

+

세 분야간 긴밀한 작업 필요

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

UI설계 3대 요소

① 사용자에게 혼란을 주지 않고 기능을 제공하는 UI

② 사용 편의성을 고려한 쉬운 구조를 갖춘 UI

③ 애플리케이션이 지닌 분위기나 세계관을 체험할 수 있는 표현의 UI

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

UI설계 3대 요소

① 사용자에게 혼란을 주지 않고 기능을 제공하는 UI

② 사용 편의성을 고려한 쉬운 구조를 갖춘 UI

③ 애플리케이션이 지닌 분위기나 세계관을 체험할 수 있는 표현의 UI

필수적인 요소를 제공하는 최소한의 레벨 : 유용성

논리적인 설계 : 사용성, 편의성

일관성, 흥미로운 설계 : 심미성

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

UI규칙의 양면성

단조로운 UI/습관화된 UI기능을 당연하게 여김.

사용성Usability

심미성Aesthetic

흥미로우나유용성 판단 어려운 UI

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

UI규칙의 양면성심미성흥미유발

사용성목적달성

유용성

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

Mobile UI설계 기본 구성

①기능배치

②화면구성

③상태전환

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

UI 기능 요소 및 배치

화면상의 UI요소(UI Component) 애플리케이션에 중요한 기능, 빈도가 높은 기능

대화상자(서브화면) : 액션 처리결과일정조건에서 선택, 입력 등의 조작이 필요한 기능

메뉴옵션 기능, 도움말이나 설정등의 항목

설정애플리케이션의 설정을 한 화면에 처리

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

주요 Android UI Pattern** Android Mobile UI Guideline

New in Android

Gestures

App Structures

Navigation

Action Bar

Multi-pane Layouts

Swipe Views

Selection

Confirming & Ack.

Notification

Widget

Settings

Help

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

1. New in Android

“ Ice Crean Sandwich – Android 4.0”

Navigation bar Action bar

Multi-pane layouts Selection

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

2. Gestures

TouchPress, Lift

Long PressPress, Wait, Lift

SwipePress, Move, Lift

DragLong press, Move,

Lift

Double Touch Pinch Open/Close

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

3. App Structure

Top Level View

Category View

Detail/Edit View

Top Level ViewCategory ViewDetail/Edit View

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

>>Top Level

Put content forward

Set up action bars for navigation and actions

Create an identity for your app

3. App Structure

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

Use tabs to combine category selection and data display>>Categories3. App Structure

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

Allow cutting through hierarchies

>>Category3. App Structure

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

Layout : View + Action Lights-out mode>>Detail3. App Structure

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

Make navigation between detail views efficient>>Detail3. App Structure

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

4. Mobile NavigationUP

back

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Action Bar

App Icon View Control Action Button Action Overflow

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Action BarMain Action Bar

Top Bar

Bottom Bar

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Action BarMain Action Bar

Top Bar

Bottom Bar

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Action Bar

View Controls

Tab

Spinners

Drawers

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Action Bar

Action Button

F — FrequentWill people use this action at least 7 out of 10 times they visit the screen?Will they typically use it several times in a row?Would taking an extra step every time truly be burdensome?I — ImportantDo you want everyone to discover this action because it's especially cool or a selling point?Is it something that needs to be effortless in the rare cases it's needed?T — TypicalIs it typically presented as a first-class action in similar apps?Given the context, would people be surprised if it were buried in the action overflow?

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Action Bar

Action Overflow

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Action Bar

Sharing Data

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Confirming & Acknowledging

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

5. Confirming & Acknowledging

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

UI 사용편의성 TIPS

상태를 파악하기 힘든 상황에서는 현재의 상태를 알린다사용자의 데이터 삭제와 같은 위험도가 높은 조작실수를 막는다

DialogToastNotification

Mobile Service Design

http://msd2015.jylee6977.com/tc

User Interface

6. Notification

Mobile Service Design

2. Schematic Your User Interfaces

Wireframe

Mobile Service Design

http://msd2015.jylee6977.com/tc

Wireframe

컨텐츠의 질서와 규칙을 잡는 단계

Mobile Service Design

http://msd2015.jylee6977.com/tc

Wireframe

중점사항

화면 레이아웃 결정 : 전체 Balance

화면 구성요소(텍스트, 이미지, 그래픽) 결정 : 통일성, 사용성

해당 요소/컨텐츠의 구체화

Mobile Service Design

http://msd2015.jylee6977.com/tc

Wireframe

Proto : only 5 proto free | Interactive Moqups : Iphone (Non- Interactive) UXPin : 30days Free | Interactive

Balsamiq : Download App Justinmind : Download App | Interactive Fluid : Interactive Free

Mobile Service Design

http://msd2015.jylee6977.com/tc

Wireframe

Axure : Download App | Interactive High Mockflow : 5pages free | Interactive Protoshare : Fee Included

Wireframe : So simple Wireframe Sketcher : Download Pidoco : Fast and Interactive

Mobile Service Design

http://msd2015.jylee6977.com/tc

Wireframe

Invision : Share Your Prototype Mock.me (simplest to check) iPLOTZ : Share your project

Pencils : Download GUI

Mobile Service Design

FOR NEXT WEEK

1. SCENARIO 2. SELECT KEY IDEA & IA PATTERN3. PAPER PROTOTYPE4. SITEMAP (LIST OF FUNCTIONS&SPECS)

5. UI WIREFRAME