SlideShare uma empresa Scribd logo
1 de 46
Baixar para ler offline
http://msd2013.jylee6977.com/tc
KGIT 2013 SPRING CLASS @ JYLEE
Mobile
Service
Design
Mobile
Service
Design
http://msd2013.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://msd2013.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://msd2013.jylee6977.com/tc
Mobile
Service
Design
1. Converting Information to Screen
User Interface Basics
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Nature
CultureSociety
Human
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Nature
Culture
Cyber
Society
Human
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Cyber
Interface : Human Cyber ( )
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
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://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
+
+
세 분야간 긴밀한 작업 필요
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
필수적인 요소를 제공하는 최소한의 레벨 : 유용성
논리적인 설계 : 사용성, 편의성
일관성, 흥미로운 설계 : 심미성
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
–
Navigation bar Action bar
Multi-pane layouts Selection
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Touch
Press, Lift
Long Press
Press, Wait, Lift
Swipe
Press, Move, Lift
Drag
Long press, Move,
Lift
Double Touch Pinch Open
/Close
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Top Level View
Category View
Detail/Edit View
Top Level View
Category View
Detail/Edit View
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Put content forward
Set up action bars for
navigation and actions
Create an identity for your app
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Use tabs to combine category selection and data display
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Allow cutting through
hierarchies
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Layout : View + Action Lights-out mode
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Make navigation between detail views efficient
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
UP
back
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
App Icon View Control Action Button Action Overflow
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Main Action Bar
Top Bar
Bottom Bar
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Main Action Bar
Top Bar
Bottom Bar
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Tab
Spinners
Drawers
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
F — Frequent
Will 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 — Important
Do 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 — Typical
Is 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://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
2. Schematic Your User Interfaces
Wireframe
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
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://msd2013.jylee6977.com/tc
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://msd2013.jylee6977.com/tc
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 PATTERN
3. PAPER PROTOTYPE
4. SITEMAP (LIST OF FUNCTIONS&SPECS)
5. UI WIREFRAME

Mais conteúdo relacionado

Semelhante a [Msd10]mobile design02

Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
affilinet
 
Mobilising Digital Melbourne 21/03/2014
Mobilising Digital Melbourne 21/03/2014Mobilising Digital Melbourne 21/03/2014
Mobilising Digital Melbourne 21/03/2014
Precedent
 

Semelhante a [Msd10]mobile design02 (20)

Mobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile marketMobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile market
 
IT trends – 2013 & beyond
IT trends – 2013 & beyondIT trends – 2013 & beyond
IT trends – 2013 & beyond
 
Enterprise mobile applications
Enterprise mobile applicationsEnterprise mobile applications
Enterprise mobile applications
 
MeasureWorks - Multichannel 2013 - Why your users quit your online (mobile) s...
MeasureWorks - Multichannel 2013 - Why your users quit your online (mobile) s...MeasureWorks - Multichannel 2013 - Why your users quit your online (mobile) s...
MeasureWorks - Multichannel 2013 - Why your users quit your online (mobile) s...
 
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
 
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile FirstBP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
BP110: The Mobile Distruption - Why XPages Development is targeting Mobile First
 
Dynamic Big Data Processing for Smart Cities
Dynamic Big Data Processing for Smart CitiesDynamic Big Data Processing for Smart Cities
Dynamic Big Data Processing for Smart Cities
 
How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile  How App Usability, Functionality, and Analysis are Changing with Mobile
How App Usability, Functionality, and Analysis are Changing with Mobile
 
Ben Gracewood Mobility: The changing face of business
Ben Gracewood Mobility: The changing face of businessBen Gracewood Mobility: The changing face of business
Ben Gracewood Mobility: The changing face of business
 
UX Design in 2030 | CLEVER°FRANKE
UX Design in 2030 | CLEVER°FRANKEUX Design in 2030 | CLEVER°FRANKE
UX Design in 2030 | CLEVER°FRANKE
 
Simon Saneback ITEM 2018
Simon Saneback ITEM 2018Simon Saneback ITEM 2018
Simon Saneback ITEM 2018
 
Ds latino alejandrov4
Ds latino alejandrov4Ds latino alejandrov4
Ds latino alejandrov4
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Towards A 4D Digital Smart City
Towards A 4D Digital Smart CityTowards A 4D Digital Smart City
Towards A 4D Digital Smart City
 
The 4D Digital Smart City Presentation
The 4D Digital Smart City PresentationThe 4D Digital Smart City Presentation
The 4D Digital Smart City Presentation
 
Mobile Trends 2012
Mobile Trends 2012Mobile Trends 2012
Mobile Trends 2012
 
User Experience: Why and How
User Experience: Why and HowUser Experience: Why and How
User Experience: Why and How
 
Mobilising Digital Melbourne 21/03/2014
Mobilising Digital Melbourne 21/03/2014Mobilising Digital Melbourne 21/03/2014
Mobilising Digital Melbourne 21/03/2014
 
Become a mobile developer from scratch
Become a mobile developer from scratchBecome a mobile developer from scratch
Become a mobile developer from scratch
 

Mais de jylee_kgit

[Msd12]interface design123
[Msd12]interface design123[Msd12]interface design123
[Msd12]interface design123
jylee_kgit
 
[MSD07]PERSONA & MIDTERM
[MSD07]PERSONA & MIDTERM[MSD07]PERSONA & MIDTERM
[MSD07]PERSONA & MIDTERM
jylee_kgit
 
[Msd05]user observation
[Msd05]user observation[Msd05]user observation
[Msd05]user observation
jylee_kgit
 
[Msd04]user observation
[Msd04]user observation[Msd04]user observation
[Msd04]user observation
jylee_kgit
 
[Msd03]mobile context
[Msd03]mobile context[Msd03]mobile context
[Msd03]mobile context
jylee_kgit
 
[Info01]introduction
[Info01]introduction[Info01]introduction
[Info01]introduction
jylee_kgit
 
[Msd02]mobile servicedesign
[Msd02]mobile servicedesign[Msd02]mobile servicedesign
[Msd02]mobile servicedesign
jylee_kgit
 
[MSD01]Introduction
[MSD01]Introduction[MSD01]Introduction
[MSD01]Introduction
jylee_kgit
 
[I3 d]11 designui(2)
[I3 d]11 designui(2)[I3 d]11 designui(2)
[I3 d]11 designui(2)
jylee_kgit
 
[I3 d]09 designui
[I3 d]09 designui[I3 d]09 designui
[I3 d]09 designui
jylee_kgit
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
jylee_kgit
 
[I3 d]interactive 3d flash
[I3 d]interactive 3d flash[I3 d]interactive 3d flash
[I3 d]interactive 3d flash
jylee_kgit
 
[Nux]07 design
[Nux]07 design[Nux]07 design
[Nux]07 design
jylee_kgit
 

Mais de jylee_kgit (20)

[Msd12]interface design123
[Msd12]interface design123[Msd12]interface design123
[Msd12]interface design123
 
[MSD07]PERSONA & MIDTERM
[MSD07]PERSONA & MIDTERM[MSD07]PERSONA & MIDTERM
[MSD07]PERSONA & MIDTERM
 
[Msd05]user observation
[Msd05]user observation[Msd05]user observation
[Msd05]user observation
 
[Msd04]user observation
[Msd04]user observation[Msd04]user observation
[Msd04]user observation
 
[Msd03]mobile context
[Msd03]mobile context[Msd03]mobile context
[Msd03]mobile context
 
[Info01]introduction
[Info01]introduction[Info01]introduction
[Info01]introduction
 
[Msd02]mobile servicedesign
[Msd02]mobile servicedesign[Msd02]mobile servicedesign
[Msd02]mobile servicedesign
 
[MSD01]Introduction
[MSD01]Introduction[MSD01]Introduction
[MSD01]Introduction
 
[Nux]12 nux
[Nux]12 nux[Nux]12 nux
[Nux]12 nux
 
[Nux]13 nux
[Nux]13 nux[Nux]13 nux
[Nux]13 nux
 
[Nux]12 nux
[Nux]12 nux[Nux]12 nux
[Nux]12 nux
 
[I3 d]11 designui(2)
[I3 d]11 designui(2)[I3 d]11 designui(2)
[I3 d]11 designui(2)
 
[Nux]09 nux
[Nux]09 nux[Nux]09 nux
[Nux]09 nux
 
[I3 d]09 designui
[I3 d]09 designui[I3 d]09 designui
[I3 d]09 designui
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
 
[I3 d]interactive 3d flash
[I3 d]interactive 3d flash[I3 d]interactive 3d flash
[I3 d]interactive 3d flash
 
[Nux]08 paper
[Nux]08 paper[Nux]08 paper
[Nux]08 paper
 
[Nux]07 design
[Nux]07 design[Nux]07 design
[Nux]07 design
 
[Nux]06 ux
[Nux]06 ux[Nux]06 ux
[Nux]06 ux
 
[Nux]05 ux
[Nux]05 ux[Nux]05 ux
[Nux]05 ux
 

[Msd10]mobile design02