SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
Mobile Design PatternsMobile Design Patterns
By Dan Hermes
dan@lexiconsystemsinc.com
www.lexiconsystemsinc.com
Boston Code Camp 21
Design PatternsDesign Patterns
Gang Of Four
MVC
MVVM
Adaptable, reusable code structures
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
Visual Design PatternsVisual Design Patterns
Data Presentation
Navigation
Search/Sort
Dialog
Data Editing
Data Presentation Patterns
List
Layout
Grid
Subview
Master/Detail
Gallery
Android List DemoAndroid List Demo
Array Adapter
Bind to a Model
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);
}
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;
}
}
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);
}
Navigation
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
More Navigation
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
Forms
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
Style and DesignStyle and Design
Why Does It Matter?
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
Style and DesignStyle and Design
Direct Manipulation
Feedback
Personal Service
Encouragement
MobilismsMobilisms
Standard icons
Standard screen layouts
Standard multi-screen flows
Use labels sparingly
Standard multi-screen approaches
Avoid PCisms
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
Idiot Box
Oceans of Buttons
Anti-Pattern Advice:
AVOID CREATIVITY
until you know mobile UI standards
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/
ViewsViews
Xamarin.Forms
Android Views
iOS UIKit
Xamarin.Forms List DemoXamarin.Forms List Demo
Android: ActivitiesAndroid: Activities
An Activity is like a…
Code-Behind
iOS: ViewControllersiOS: ViewControllers
A ViewController is like a…
Code-Behind
UI - iOSUI - iOS
ViewController
Xcode or Xamarin iOS Designer
You need a Mac
◦ Mac Mini
◦ macincloud.com
Xamarin iOS DesignerXamarin iOS Designer
MVCMVC
iOS ViewControllers
 Android Activities
Are they MVC?
Some CodeSome Code
MVCMVC
Model
◦ Can use them
Views
◦ Must use them
Controllers
◦ Android Activities
◦ iOS ViewControllers
I WANT MY MVC!!!I WANT MY MVC!!!
The OptionsThe Options
MVVM
◦ MVVMcross
◦ MVVM Lite
◦ ReactiveUI
Roll Your Own MVC
◦ Separate out your controller logic from your
Activities, ViewControllers, and Pages
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

Contenu connexe

Tendances

Uxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingUxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingLewis Lin 🦊
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft StoryNikita Lukianets
 
UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesSamuel Chow
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
UX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudUX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudPhilipp Engel
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyJoan Lumanauw
 
3 common ux mistakes killing good design
3 common ux mistakes killing good design3 common ux mistakes killing good design
3 common ux mistakes killing good designHalil Eren Çelik
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface DesignKANKIPATI KISHORE
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015Harsh Wardhan Dave
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1Lewis Lin 🦊
 
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesLaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesIgor Vivchar
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsAshiq Uz Zoha
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesAvijit Chinara
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesThink 360 Studio
 
Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Binary Studio
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsJayan Narayanan
 

Tendances (18)

Uxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingUxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothing
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
 
UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best Practices
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
UX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudUX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience Cloud
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual Hierarchy
 
3 common ux mistakes killing good design
3 common ux mistakes killing good design3 common ux mistakes killing good design
3 common ux mistakes killing good design
 
UX Trends 2016
UX Trends 2016UX Trends 2016
UX Trends 2016
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesLaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile Applications
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best Practices
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny Quotes
 
Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital Interactions
 

Similaire à Mobile UI Design Patterns

MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )Ahmed Emad
 
MVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,MobileMVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,Mobilenaral
 
OpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, MadridOpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, MadridDierk König
 
Building web applications using kendo ui and the mvvm pattern
Building web applications using kendo ui and the mvvm patternBuilding web applications using kendo ui and the mvvm pattern
Building web applications using kendo ui and the mvvm patternAspenware
 
MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009Jonas Follesø
 
Building xamarin.forms apps with prism and mvvm
Building xamarin.forms apps with prism and mvvmBuilding xamarin.forms apps with prism and mvvm
Building xamarin.forms apps with prism and mvvmMike Melusky
 
MVP Mix 2015 Leveraging MVVM on all Platforms
MVP Mix 2015  Leveraging MVVM on all PlatformsMVP Mix 2015  Leveraging MVVM on all Platforms
MVP Mix 2015 Leveraging MVVM on all PlatformsJames Montemagno
 
SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013NCCOMMS
 
"Universal programming recipes", Kateryna Trofimenko
"Universal programming recipes", Kateryna Trofimenko"Universal programming recipes", Kateryna Trofimenko
"Universal programming recipes", Kateryna TrofimenkoBadoo Development
 
Universal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Universal programming recipes​ - Ekaterina Trofimenko - Women In TechnologyUniversal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Universal programming recipes​ - Ekaterina Trofimenko - Women In TechnologyBadoo
 
Tips & tricks for sharing C# code on iOS, Android and Windows Phone by Jaime ...
Tips & tricks for sharing C# code on iOS, Android and Windows Phone by Jaime ...Tips & tricks for sharing C# code on iOS, Android and Windows Phone by Jaime ...
Tips & tricks for sharing C# code on iOS, Android and Windows Phone by Jaime ....NET Conf UY
 
android layouts
android layoutsandroid layouts
android layoutsDeepa Rani
 
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...Jean Vanderdonckt
 
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...RapidValue
 
Build a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBuild a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBrendan Sera-Shriar
 
Responsive ui
Responsive uiResponsive ui
Responsive uiRan Wahle
 

Similaire à Mobile UI Design Patterns (20)

MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )
 
Ux Example
Ux ExampleUx Example
Ux Example
 
MVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,MobileMVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,Mobile
 
OpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, MadridOpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, Madrid
 
Building web applications using kendo ui and the mvvm pattern
Building web applications using kendo ui and the mvvm patternBuilding web applications using kendo ui and the mvvm pattern
Building web applications using kendo ui and the mvvm pattern
 
MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009
 
Building xamarin.forms apps with prism and mvvm
Building xamarin.forms apps with prism and mvvmBuilding xamarin.forms apps with prism and mvvm
Building xamarin.forms apps with prism and mvvm
 
MVP Mix 2015 Leveraging MVVM on all Platforms
MVP Mix 2015  Leveraging MVVM on all PlatformsMVP Mix 2015  Leveraging MVVM on all Platforms
MVP Mix 2015 Leveraging MVVM on all Platforms
 
SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013
 
"Universal programming recipes", Kateryna Trofimenko
"Universal programming recipes", Kateryna Trofimenko"Universal programming recipes", Kateryna Trofimenko
"Universal programming recipes", Kateryna Trofimenko
 
Universal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Universal programming recipes​ - Ekaterina Trofimenko - Women In TechnologyUniversal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Universal programming recipes​ - Ekaterina Trofimenko - Women In Technology
 
Tips & tricks for sharing C# code on iOS, Android and Windows Phone by Jaime ...
Tips & tricks for sharing C# code on iOS, Android and Windows Phone by Jaime ...Tips & tricks for sharing C# code on iOS, Android and Windows Phone by Jaime ...
Tips & tricks for sharing C# code on iOS, Android and Windows Phone by Jaime ...
 
Android MVVM
Android MVVMAndroid MVVM
Android MVVM
 
android layouts
android layoutsandroid layouts
android layouts
 
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, a...
 
Swift
SwiftSwift
Swift
 
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
 
DotVVM Fundamentals
DotVVM FundamentalsDotVVM Fundamentals
DotVVM Fundamentals
 
Build a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBuild a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation Framework
 
Responsive ui
Responsive uiResponsive ui
Responsive ui
 

Plus de danhermes

Azure Mobile Apps with Xamarin
Azure Mobile Apps with XamarinAzure Mobile Apps with Xamarin
Azure Mobile Apps with Xamarindanhermes
 
Developing Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with XamarinDeveloping Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with Xamarindanhermes
 
Xamarin Navigation Patterns
Xamarin Navigation PatternsXamarin Navigation Patterns
Xamarin Navigation Patternsdanhermes
 
Xamarin Navigation Patterns
Xamarin Navigation PatternsXamarin Navigation Patterns
Xamarin Navigation Patternsdanhermes
 
Building Mobile Apps for Business
Building Mobile Apps for BusinessBuilding Mobile Apps for Business
Building Mobile Apps for Businessdanhermes
 
How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile  How App Usability, Functionality, and Analysis are Changing with Mobile
How App Usability, Functionality, and Analysis are Changing with Mobiledanhermes
 
Cross platform mobile development in c#
Cross platform mobile development in c#Cross platform mobile development in c#
Cross platform mobile development in c#danhermes
 
What can mobile do for me
What can mobile do for meWhat can mobile do for me
What can mobile do for medanhermes
 
Agile Development in .NET
Agile Development in .NETAgile Development in .NET
Agile Development in .NETdanhermes
 
Mastering human communication patterns
Mastering human communication patternsMastering human communication patterns
Mastering human communication patternsdanhermes
 

Plus de danhermes (10)

Azure Mobile Apps with Xamarin
Azure Mobile Apps with XamarinAzure Mobile Apps with Xamarin
Azure Mobile Apps with Xamarin
 
Developing Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with XamarinDeveloping Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with Xamarin
 
Xamarin Navigation Patterns
Xamarin Navigation PatternsXamarin Navigation Patterns
Xamarin Navigation Patterns
 
Xamarin Navigation Patterns
Xamarin Navigation PatternsXamarin Navigation Patterns
Xamarin Navigation Patterns
 
Building Mobile Apps for Business
Building Mobile Apps for BusinessBuilding Mobile Apps for Business
Building Mobile Apps for Business
 
How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile  How App Usability, Functionality, and Analysis are Changing with Mobile
How App Usability, Functionality, and Analysis are Changing with Mobile
 
Cross platform mobile development in c#
Cross platform mobile development in c#Cross platform mobile development in c#
Cross platform mobile development in c#
 
What can mobile do for me
What can mobile do for meWhat can mobile do for me
What can mobile do for me
 
Agile Development in .NET
Agile Development in .NETAgile Development in .NET
Agile Development in .NET
 
Mastering human communication patterns
Mastering human communication patternsMastering human communication patterns
Mastering human communication patterns
 

Mobile UI Design Patterns