Navigation Patterns for iOS, Android and More
187 likes43,498 views
The document presents a comprehensive overview of various navigation patterns for mobile design, illustrating primary and secondary navigation methods through examples from popular applications. It features different styles such as springboard lists, tab menus, mega menus, and image carousels, along with updates and extras for each pattern. The chapter emphasizes the importance of combining these patterns to enhance user experience in mobile applications.
Navigation Patterns for iOS, Android and More
- 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 Started www.MobileDesignPatternGallery.com Follow me on Twitter @mobilepatterns
- 2. Primary Navigation Patterns Springboard List Menu Tab Menu Gallery Dashboard Metaphor Mega Menu
- 3. Navigation: Springboard from the book Facebook Ovi Maps Norton Masters irregular layout
- 4. Navigation: Springboard from the book Trulia LinkedIn NewsRoom Yahoo!Mobile w/ multiple pages
- 5. Navigation: Springboard from the book PayPal Gowalla Personalized Springboards
- 6. Navigation: Springboard updates & extras Evernote Hello Flipboard Net-A-Porter WorldMate also uses a mega menu
- 7. Navigation: Springboard updates & extras Craiglist Evernote Google Plus Pages circular with summary data with drill down
- 8. Navigation: Springboard updates & extras SCVNGR mobli Google Docs rdio personalized
- 9. Navigation: Springboard updates & extras New York Times- The Scoop Outdoor Navigation MultiTexter circular
- 10. Navigation: List Menu from the book Valspar Paint Kayak BlackBoard Mobile Learn Zoho CRM enhanced list
- 11. Navigation: List Menu from the book RadioTime Cozi Amazon MP3 Stratus
- 12. Navigation: List Menu updates & extras Facebook tap to reveal menu
- 13. Navigation: List Menu updates & extras Path pan to reveal menu
- 14. Navigation: List Menu updates & extras Shows Android Photo Editor Slacker Radio
- 15. Navigation: List Menu updates & extras Reeder Lapse It Any.DO
- 16. Navigation: Tab Menu from the book Jamie Oliver’s Recipe Library Molome Starbucks BlueMobile bottom tabs scrolling bottom tabs
- 17. Navigation: Tab Menu from the book Harvest TimeTractor Fring foursquare HitPost scrolling top tabs top tabs
- 18. Navigation: Tab Menu updates & extras Pintrest Pose Instagram Zaarly tab menus with overloaded command buttons
- 19. Navigation: Tab Menu updates & extras Steam MagicHour Screencast Recorder top tabs
- 20. Navigation: Gallery from the book BBCNews pulse PictureIt
- 21. Navigation: Gallery from the book dwell flickr
- 22. Navigation: Gallery updates & extras Gowalla Evernote Meals LinkedIn also uses mega menu
- 23. Navigation: Gallery updates & extras Distill QuickPic itookapicture
- 24. Navigation: Dashboard from the book Mint ego Flex 4.5 Showcase
- 25. Navigation: Dashboard updates & extras Gaug.es baconreader PageOnce
- 26. Navigation: Dashboard updates & extras daily burn Windows Mobile FedEx
- 27. Navigation: Metaphor from the book Awesome Note Aidiko Reader
- 28. Navigation: Metaphor from the book DoItTomorrow TripJournal Cellar
- 29. Navigation: Metaphor updates & extras DJ iPhone Beats by Bjango
- 30. Navigation: Metaphor updates & extras Tap’n’Scratch Apple Cards
- 31. Navigation: Metaphor updates & extras Out of Milk iBook Square
- 32. Navigation: Mega Menu from the book Facebook Walmart
- 33. Navigation: Mega Menu updates & extras Flipboard drill down in the mega menu
- 34. Navigation: Mega Menu updates & extras Google Maps News360
- 35. Navigation: Mega Menu updates & extras LinkedIn
- 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. 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. 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. 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. Navigation: Page Carousel from the book Nigella Zappos Yahoo finance using paging indicators (little dots)
- 42. Navigation: Page Carousel from the book iMobile Excellent Analytics too many pages
- 43. Navigation: Image Carousel from the book IMDb Flex 4.5 Showcase App flick to see more images/content
- 44. Navigation: Image Carousel from the book Photo Cookbook Scrap n’ Tap carousel style coverflow style
- 45. Navigation: Image Carousel from the book ANZ demos nice, but gets tedious
- 46. Navigation: Image Carousel extras Adobe Carousel Google Music same issues as ANZ- offer an alternate option for navigating content
- 47. Navigation: Inline Expand from the book Android Call Log
- 48. Navigation: Inline Expand from the book Gap Mobile Web Example
- 49. Navigation: Inline Expand updates & extras Android Downloads
- 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-Patterns www.MobileDesignPatternGallery.com Follow me on Twitter @mobilepatterns Buy Now