• Like
[Msd10]mobile design02
Upcoming SlideShare
Loading in...5
×

[Msd10]mobile design02

  • 257 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
257
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. http://msd2013.jylee6977.com/tcKGIT 2013 SPRING CLASS @ JYLEEMobileServiceDesign
  • 2. MobileServiceDesignhttp://msd2013.jylee6977.com/tcApp Design Process(after service strategy)IDEA WIREFRAME DESIGNINGInformation Architecture(IA)  User Interface Design(UI)  Graphic User Interface Design(GUI)  Sourcing(XML)
  • 3. MobileServiceDesignhttp://msd2013.jylee6977.com/tcApp Design Process(after service strategy)Information Architecture(IA)  User Interface Design(UI)  Graphic User Interface Design(GUI)  Sourcing(XML)
  • 4. MobileServiceDesign0. Systemizing InformationsSitemap
  • 5. http://msd2013.jylee6977.com/tc
  • 6. MobileServiceDesign1. Converting Information to ScreenUser Interface Basics
  • 7. MobileServiceDesignhttp://msd2013.jylee6977.com/tcNatureCultureSocietyHuman
  • 8. MobileServiceDesignhttp://msd2013.jylee6977.com/tcNatureCultureCyberSocietyHuman
  • 9. MobileServiceDesignhttp://msd2013.jylee6977.com/tcCyberInterface : Human Cyber ( )
  • 10. MobileServiceDesignhttp://msd2013.jylee6977.com/tcAn interface is a point of interactionbetween two systems or work groups. Inthe manufacturing environment, theinteraction and coordination between anumber of work groups communicateplans and control production activity.
  • 11. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 12. MobileServiceDesignhttp://msd2013.jylee6977.com/tc++세 분야간 긴밀한 작업 필요
  • 13. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 14. MobileServiceDesignhttp://msd2013.jylee6977.com/tc필수적인 요소를 제공하는 최소한의 레벨 : 유용성논리적인 설계 : 사용성, 편의성일관성, 흥미로운 설계 : 심미성
  • 15. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 16. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 17. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 18. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 19. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 20. MobileServiceDesignhttp://msd2013.jylee6977.com/tc–Navigation bar Action barMulti-pane layouts Selection
  • 21. MobileServiceDesignhttp://msd2013.jylee6977.com/tcTouchPress, LiftLong PressPress, Wait, LiftSwipePress, Move, LiftDragLong press, Move,LiftDouble Touch Pinch Open/Close
  • 22. MobileServiceDesignhttp://msd2013.jylee6977.com/tcTop Level ViewCategory ViewDetail/Edit ViewTop Level ViewCategory ViewDetail/Edit View
  • 23. MobileServiceDesignhttp://msd2013.jylee6977.com/tcPut content forwardSet up action bars fornavigation and actionsCreate an identity for your app
  • 24. MobileServiceDesignhttp://msd2013.jylee6977.com/tcUse tabs to combine category selection and data display
  • 25. MobileServiceDesignhttp://msd2013.jylee6977.com/tcAllow cutting throughhierarchies
  • 26. MobileServiceDesignhttp://msd2013.jylee6977.com/tcLayout : View + Action Lights-out mode
  • 27. MobileServiceDesignhttp://msd2013.jylee6977.com/tcMake navigation between detail views efficient
  • 28. MobileServiceDesignhttp://msd2013.jylee6977.com/tcUPback
  • 29. MobileServiceDesignhttp://msd2013.jylee6977.com/tcApp Icon View Control Action Button Action Overflow
  • 30. MobileServiceDesignhttp://msd2013.jylee6977.com/tcMain Action BarTop BarBottom Bar
  • 31. MobileServiceDesignhttp://msd2013.jylee6977.com/tcMain Action BarTop BarBottom Bar
  • 32. MobileServiceDesignhttp://msd2013.jylee6977.com/tcTabSpinnersDrawers
  • 33. MobileServiceDesignhttp://msd2013.jylee6977.com/tcF — 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 its especially cool or a sellingpoint?Is it something that needs to be effortless in the rare cases its 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?
  • 34. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 35. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 36. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 37. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 38. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 39. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 40. MobileServiceDesign2. Schematic Your User InterfacesWireframe
  • 41. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 42. MobileServiceDesignhttp://msd2013.jylee6977.com/tc
  • 43. MobileServiceDesignhttp://msd2013.jylee6977.com/tcProto : only 5 proto free | Interactive Moqups : Iphone (Non- Interactive) UXPin : 30days Free | InteractiveBalsamiq : Download App Justinmind : Download App | Interactive Fluid : Interactive Free
  • 44. MobileServiceDesignhttp://msd2013.jylee6977.com/tcAxure : Download App | Interactive High Mockflow : 5pages free | Interactive Protoshare : Fee IncludedWireframe : So simple Wireframe Sketcher : Download Pidoco : Fast and Interactive
  • 45. MobileServiceDesignhttp://msd2013.jylee6977.com/tcInvision : Share Your Prototype Mock.me (simplest to check) iPLOTZ : Share your projectPencils : Download GUI
  • 46. MobileServiceDesignFOR NEXT WEEK1. SCENARIO2. SELECT KEY IDEA & IA PATTERN3. PAPER PROTOTYPE4. SITEMAP (LIST OF FUNCTIONS&SPECS)5. UI WIREFRAME