Navigation Patterns for iOS, Android and More

67,207
-1

Published on

Designing a mobile application? Look at these design patterns for primary and secondary navigation. All the images from the book are included plus dozens of new examples.

http://www.mobiledesignpatterngallery.com

2 Comments
179 Likes
Statistics
Notes
No Downloads
Views
Total Views
67,207
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
1,582
Comments
2
Likes
179
Embeds 0
No embeds

No notes for slide

Navigation Patterns for iOS, Android and More

  1. 1. By Theresa Neil O’Reilly Media, March 2012 Chapter 1: Navigation Patterns Take a look at the images from the book +70 new examples Get Startedwww.MobileDesignPatternGallery.com Follow me on Twitter @mobilepatterns
  2. 2. Primary Navigation PatternsSpringboard List Menu Tab Menu GalleryDashboard Metaphor Mega Menu
  3. 3. Navigation: Springboard from the bookFacebook Ovi Maps Norton Masters irregular layout
  4. 4. Navigation: Springboard from the bookTrulia LinkedIn NewsRoom Yahoo!Mobile w/ multiple pages
  5. 5. Navigation: Springboard from the book PayPal Gowalla Personalized Springboards
  6. 6. Navigation: Springboard updates & extrasEvernote Hello Flipboard Net-A-Porter WorldMate also uses a mega menu
  7. 7. Navigation: Springboard updates & extrasCraiglist Evernote Google Plus Pages circular with summary data with drill down
  8. 8. Navigation: Springboard updates & extrasSCVNGR mobli Google Docs rdio personalized
  9. 9. Navigation: Springboard updates & extras New York Times- The Scoop Outdoor Navigation MultiTexter circular
  10. 10. Navigation: List Menu from the bookValspar Paint Kayak BlackBoard Mobile Learn Zoho CRM enhanced list
  11. 11. Navigation: List Menu from the bookRadioTime Cozi Amazon MP3 Stratus
  12. 12. Navigation: List Menu updates & extras Facebook tap to reveal menu
  13. 13. Navigation: List Menu updates & extras Path pan to reveal menu
  14. 14. Navigation: List Menu updates & extras Shows Android Photo Editor Slacker Radio
  15. 15. Navigation: List Menu updates & extras Reeder Lapse It Any.DO
  16. 16. Navigation: Tab Menu from the bookJamie Oliver’s Recipe Library Molome Starbucks BlueMobile bottom tabs scrolling bottom tabs
  17. 17. Navigation: Tab Menu from the bookHarvest TimeTractor Fring foursquare HitPost scrolling top tabs top tabs
  18. 18. Navigation: Tab Menu updates & extrasPintrest Pose Instagram Zaarly tab menus with overloaded command buttons
  19. 19. Navigation: Tab Menu updates & extras Steam MagicHour Screencast Recorder top tabs
  20. 20. Navigation: Gallery from the book BBCNews pulse PictureIt
  21. 21. Navigation: Gallery from the book dwell flickr
  22. 22. Navigation: Gallery updates & extras Gowalla Evernote Meals LinkedIn also uses mega menu
  23. 23. Navigation: Gallery updates & extras Distill QuickPic itookapicture
  24. 24. Navigation: Dashboard from the bookMint ego Flex 4.5 Showcase
  25. 25. Navigation: Dashboard updates & extras Gaug.es baconreader PageOnce
  26. 26. Navigation: Dashboard updates & extras daily burn Windows Mobile FedEx
  27. 27. Navigation: Metaphor from the bookAwesome Note Aidiko Reader
  28. 28. Navigation: Metaphor from the book DoItTomorrow TripJournal Cellar
  29. 29. Navigation: Metaphor updates & extrasDJ iPhone Beats by Bjango
  30. 30. Navigation: Metaphor updates & extras Tap’n’Scratch Apple Cards
  31. 31. Navigation: Metaphor updates & extras Out of Milk iBook Square
  32. 32. Navigation: Mega Menu from the book Facebook Walmart
  33. 33. Navigation: Mega Menu updates & extras Flipboard drill down in the mega menu
  34. 34. Navigation: Mega Menu updates & extras Google Maps News360
  35. 35. Navigation: Mega Menu updates & extras LinkedIn
  36. 36. Secondary Navigation Patterns
  37. 37. Secondary Navigation from the book all of the primary patterns can be used in combination w/each other ANZ Jamie Oliver’s Recipes- Android tabs + springboard tabs + list
  38. 38. Secondary Navigation from the book all of the primary patterns can be used in combination w/each other Bills Jamie Oliver’s Recipes- iOS tabs + dashboard tabs + tabs
  39. 39. Secondary Navigation updates + extras all of the primary patterns can be used in combination w/each other runtastic BodyMedia scrolling top tabs + tabs + dashboard dashboard
  40. 40. Secondary Navigation updates + extras all of the primary patterns can be used in combination w/each other Etsy Liquor Cabinet streamzoo tabs + gallery tabs + metaphor custom tabs + personalized sprinboard
  41. 41. Navigation: Page Carousel from the book Nigella Zappos Yahoo finance using paging indicators (little dots)
  42. 42. Navigation: Page Carousel from the book iMobile Excellent Analytics too many pages
  43. 43. Navigation: Image Carousel from the book IMDb Flex 4.5 Showcase App flick to see more images/content
  44. 44. Navigation: Image Carousel from the book Photo Cookbook Scrap n’ Tap carousel style coverflow style
  45. 45. Navigation: Image Carousel from the book ANZ demos nice, but gets tedious
  46. 46. Navigation: Image Carousel extras Adobe Carousel Google Music same issues as ANZ- offer an alternate option for navigating content
  47. 47. Navigation: Inline Expand from the book Android Call Log
  48. 48. Navigation: Inline Expand from the book Gap Mobile Web Example
  49. 49. Navigation: Inline Expand updates & extras Android Downloads
  50. 50. Next Chapters Mobile Design Pattern Gallery UI Patterns for Mobile Apps 2 Forms 3 Tables 4 Search, Sort & Filter sample chapter on Smashing 5 Tools (coming soon) 6 Charts 7 Invitations sample chapter on UXBooth 8 Feedback & Affordance 0 9 Help The eBoo k is Only $1 THD with cou pon code AU 10 Anti-Patternswww.MobileDesignPatternGallery.com Follow me on Twitter @mobilepatterns Buy Now

×