Mobile UI Design Patterns
description
Transcript of Mobile UI Design Patterns
![Page 2: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/2.jpg)
Design PatternsDesign PatternsGang Of FourMVCMVVM
Adaptable, reusable code structures
![Page 3: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/3.jpg)
Mobile Concepts and Mobile Concepts and PatternsPatternsUI
◦Visual Design PatternsData Access
◦ Local◦ Web Services◦ Data Binding◦ Data Synchronization
State ManagementThreadingMVC vs. MVVM
![Page 4: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/4.jpg)
Visual Design PatternsVisual Design PatternsData PresentationNavigationSearch/SortDialogData Editing
![Page 5: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/5.jpg)
Data Presentation Patterns
ListLayoutGridSubviewMaster/DetailGallery
![Page 6: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/6.jpg)
Android List DemoAndroid List DemoArray AdapterBind to a Model
![Page 7: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/7.jpg)
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);
}
![Page 8: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/8.jpg)
iOS List Example – iOS List Example – Subclass Subclass UITableViewSourceUITableViewSourcepublic 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;
}
}
![Page 9: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/9.jpg)
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);
}
![Page 10: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/10.jpg)
Navigation
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
![Page 11: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/11.jpg)
More Navigation
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
![Page 12: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/12.jpg)
Forms
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
![Page 13: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/13.jpg)
Style and DesignStyle and DesignWhy Does It Matter?
![Page 14: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/14.jpg)
Style and DesignStyle and DesignForm follows function
◦What is your apps message?To the PointConsistency
" If it looks the same, it should act the same." - Android Style Guide
![Page 15: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/15.jpg)
Style and DesignStyle and DesignDirect ManipulationFeedback Personal ServiceEncouragement
![Page 16: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/16.jpg)
MobilismsMobilismsStandard icons Standard screen layoutsStandard multi-screen flowsUse labels sparinglyStandard multi-screen
approaches
![Page 17: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/17.jpg)
Avoid PCisms
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
![Page 18: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/18.jpg)
Idiot Box
![Page 19: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/19.jpg)
Oceans of Buttons
![Page 20: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/20.jpg)
Anti-Pattern Advice:
AVOID CREATIVITY
until you know mobile UI standards
![Page 21: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/21.jpg)
Mobile Interaction ChartMobile Interaction ChartMobile 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/
![Page 22: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/22.jpg)
ViewsViewsXamarin.FormsAndroid ViewsiOS UIKit
![Page 23: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/23.jpg)
Xamarin.Forms List DemoXamarin.Forms List Demo
![Page 24: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/24.jpg)
Android: ActivitiesAndroid: Activities
An Activity is like a…
Code-Behind
![Page 25: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/25.jpg)
iOS: ViewControllersiOS: ViewControllers
A ViewController is like a…
Code-Behind
![Page 26: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/26.jpg)
UI - iOSUI - iOSViewControllerXcode or Xamarin iOS DesignerYou need a Mac
◦Mac Mini◦macincloud.com
![Page 27: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/27.jpg)
Xamarin iOS DesignerXamarin iOS Designer
![Page 28: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/28.jpg)
MVCMVCiOS ViewControllers Android ActivitiesAre they MVC?
![Page 29: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/29.jpg)
Some CodeSome Code
![Page 30: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/30.jpg)
MVCMVCModel
◦Can use themViews
◦Must use themControllers
◦Android Activities◦iOS ViewControllers
![Page 31: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/31.jpg)
I WANT MY MVC!!!I WANT MY MVC!!!
![Page 32: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/32.jpg)
The OptionsThe OptionsMVVM
◦MVVMcross◦MVVM Lite◦ReactiveUI
Roll Your Own MVC◦ Separate out your controller logic from
your Activities, ViewControllers, and Pages
![Page 33: Mobile UI Design Patterns](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c7ed2c4a795921328b4618/html5/thumbnails/33.jpg)
Mobile Design Mobile Design PatternsPatternsDan HermesMobile Consultant
Lexicon Systems
Website: www.lexiconsystemsinc.comEmail: [email protected]: 781-526-0738Twitter: @lexiconsystemsBlog: www.itshopkeeping.com