Mobile UI Design Patterns

Download Mobile UI Design Patterns

Post on 28-Jan-2015

111 views

Category:

Mobile

6 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

<ul><li> 1. Mobile Design PatternsMobile Design Patterns By Dan Hermes dan@lexiconsystemsinc.com www.lexiconsystemsinc.com Boston Code Camp 21 </li></ul> <p> 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 </p>