Mobile UI Design Patterns
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
481
On Slideshare
424
From Embeds
57
Number of Embeds
2

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 57

http://www.slideee.com 38
http://itshopkeeping.lexiconsystemsinc.com 19

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. Mobile Design PatternsMobile Design Patterns By Dan Hermes dan@lexiconsystemsinc.com www.lexiconsystemsinc.com Boston Code Camp 21
  • 2. Design PatternsDesign Patterns Gang Of Four MVC MVVM Adaptable, reusable code structures
  • 3. Mobile Concepts and PatternsMobile Concepts and Patterns UI ◦ Visual Design Patterns Data Access ◦ Local ◦ Web Services ◦ Data Binding ◦ Data Synchronization State Management Threading MVC vs. MVVM
  • 4. Visual Design PatternsVisual Design Patterns Data Presentation Navigation Search/Sort Dialog Data Editing
  • 5. Data Presentation Patterns List Layout Grid Subview Master/Detail Gallery
  • 6. Android List DemoAndroid List Demo Array Adapter Bind to a Model
  • 7. iOS List ExampleiOS List Example Instantiate UITableView and add it to a view in the ViewDidLoad() method of the ViewController. public override void ViewDidLoad() { base.ViewDidLoad(); UITableView table = new UITableView(View.Bounds); Add (table); }
  • 8. iOS List Example –iOS List Example – SubclassSubclass UITableViewSourceUITableViewSource public class ListSource : UITableViewSource {   protected string[] listItems; protected string CellId= "TableCell";   public ListSource (string[] items) { listItems = items; }   public override int RowsInSection (UITableView tableview, int section) { return listItems.Length; } public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath) { UITableViewCell cell = tableView.DequeueReusableCell (CellId); if (cell == null) cell = new UITableViewCell (UITableViewCellStyle.Default, CellId); cell.TextLabel.Text = listItems[indexPath.Row]; return cell; } }
  • 9. iOS List ExampleiOS List Example public override void ViewDidLoad() { base.ViewDidLoad(); UITableView table = new UITableView(View.Bounds); var tableItems = new string[] {"First","Second","Third","Fourth","Fifth"}; table.Source = new ListSource(tableItems); Add (table); }
  • 10. Navigation Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  • 11. More Navigation Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  • 12. Forms Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  • 13. Style and DesignStyle and Design Why Does It Matter?
  • 14. Style and DesignStyle and Design Form follows function ◦ What is your apps message? To the Point Consistency " If it looks the same, it should act the same." - Android Style Guide
  • 15. Style and DesignStyle and Design Direct Manipulation Feedback Personal Service Encouragement
  • 16. MobilismsMobilisms Standard icons Standard screen layouts Standard multi-screen flows Use labels sparingly Standard multi-screen approaches
  • 17. Avoid PCisms Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  • 18. Idiot Box
  • 19. Oceans of Buttons
  • 20. Anti-Pattern Advice: AVOID CREATIVITY until you know mobile UI standards
  • 21. Mobile Interaction ChartMobile Interaction Chart Mobile Action PC Tap I want this click Submit Do it submit Swipe Next! Move, or Delete next Press Do Something Double-click Pinch Zoom out Roller/slider Spread Zoom in Roller/slider Rotate um, Rotate. Roller/slider http://www.lexiconsystemsinc.com/
  • 22. ViewsViews Xamarin.Forms Android Views iOS UIKit
  • 23. Xamarin.Forms List DemoXamarin.Forms List Demo
  • 24. Android: ActivitiesAndroid: Activities An Activity is like a… Code-Behind
  • 25. iOS: ViewControllersiOS: ViewControllers A ViewController is like a… Code-Behind
  • 26. UI - iOSUI - iOS ViewController Xcode or Xamarin iOS Designer You need a Mac ◦ Mac Mini ◦ macincloud.com
  • 27. Xamarin iOS DesignerXamarin iOS Designer
  • 28. MVCMVC iOS ViewControllers  Android Activities Are they MVC?
  • 29. Some CodeSome Code
  • 30. MVCMVC Model ◦ Can use them Views ◦ Must use them Controllers ◦ Android Activities ◦ iOS ViewControllers
  • 31. I WANT MY MVC!!!I WANT MY MVC!!!
  • 32. The OptionsThe Options MVVM ◦ MVVMcross ◦ MVVM Lite ◦ ReactiveUI Roll Your Own MVC ◦ Separate out your controller logic from your Activities, ViewControllers, and Pages
  • 33. Mobile Design PatternsMobile Design Patterns Dan Hermes Mobile Consultant Lexicon Systems Website: www.lexiconsystemsinc.com Email: dan@lexiconsystemsinc.com Phone: 781-526-0738 Twitter: @lexiconsystems Blog: www.itshopkeeping.com