Mobile UI Design Patterns

1,743 views
1,370 views

Published on

Mobile UI Design Patterns and a bit about Xamarin UI and Xamarin.Forms

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,743
On SlideShare
0
From Embeds
0
Number of Embeds
231
Actions
Shares
0
Downloads
15
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Mobile UI Design Patterns

  1. 1. Mobile Design PatternsMobile Design Patterns By Dan Hermes dan@lexiconsystemsinc.com www.lexiconsystemsinc.com Boston Code Camp 21
  2. 2. Design PatternsDesign Patterns Gang Of Four MVC MVVM Adaptable, reusable code structures
  3. 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. 4. Visual Design PatternsVisual Design Patterns Data Presentation Navigation Search/Sort Dialog Data Editing
  5. 5. Data Presentation Patterns List Layout Grid Subview Master/Detail Gallery
  6. 6. Android List DemoAndroid List Demo Array Adapter Bind to a Model
  7. 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. 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. 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. 10. Navigation Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  11. 11. More Navigation Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  12. 12. Forms Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  13. 13. Style and DesignStyle and Design Why Does It Matter?
  14. 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. 15. Style and DesignStyle and Design Direct Manipulation Feedback Personal Service Encouragement
  16. 16. MobilismsMobilisms Standard icons Standard screen layouts Standard multi-screen flows Use labels sparingly Standard multi-screen approaches
  17. 17. Avoid PCisms Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  18. 18. Idiot Box
  19. 19. Oceans of Buttons
  20. 20. Anti-Pattern Advice: AVOID CREATIVITY until you know mobile UI standards
  21. 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. 22. ViewsViews Xamarin.Forms Android Views iOS UIKit
  23. 23. Xamarin.Forms List DemoXamarin.Forms List Demo
  24. 24. Android: ActivitiesAndroid: Activities An Activity is like a… Code-Behind
  25. 25. iOS: ViewControllersiOS: ViewControllers A ViewController is like a… Code-Behind
  26. 26. UI - iOSUI - iOS ViewController Xcode or Xamarin iOS Designer You need a Mac ◦ Mac Mini ◦ macincloud.com
  27. 27. Xamarin iOS DesignerXamarin iOS Designer
  28. 28. MVCMVC iOS ViewControllers  Android Activities Are they MVC?
  29. 29. Some CodeSome Code
  30. 30. MVCMVC Model ◦ Can use them Views ◦ Must use them Controllers ◦ Android Activities ◦ iOS ViewControllers
  31. 31. I WANT MY MVC!!!I WANT MY MVC!!!
  32. 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. 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

×