Mobile Design Patterns - Navigation

Based on Theresa Neil's book, Ken Yarmosh's blog and so on.

Transcript

1. Knowledge sharing by Linkou on Aug 6, 2013 Mobile Design Pattern Navigation 1 Monday, August 5, 13
2. Classical Navigation VC 2 Monday, August 5, 13
3. Classical Tab bar VC 3 Monday, August 5, 13
4. Customized Tab bar VC 4 Monday, August 5, 13
5. List Menus 5 Monday, August 5, 13
6. Gallery 6 Monday, August 5, 13
7. Metaphor 7 Monday, August 5, 13
8. Springboard (deprecated) 8 Monday, August 5, 13
9. Slide-out (popular) 9 Monday, August 5, 13
10. Slide-out (NG) 10 Monday, August 5, 13
11. Slide-out Definition Consists of a panel that “slides out” from underneath the left or the right of the main content area, revealing a vertically independent scroll view that serves as the primary navigation for the application. by Ken Yarmosh 11 Monday, August 5, 13
12. Slide-out Best Practices Best served in content-related apps, especially when many views that can grow dynamically Use a list or item button to trigger the panel or popover When expanded state, min width of main content area at least a 44 pixel wide (suggest 60) Keep the opening and closing gestures 12 Monday, August 5, 13
13. Slide-out (Container VC) RootViewController ChildViewController RootView SubView Window 13 Monday, August 5, 13
14. Slide-out (Container VC) addChildViewController: removeFromParentViewController transitionFromViewController:toViewController: duration:options:animations:completion: willMoveToParentViewController: didMoveToParentViewController: 14 Monday, August 5, 13
15. Slide-out References Raywenderlich.com (Implement from scratch) AppCoda.com (SWRevealViewController based) CocoaNetics.com (Container VC Sample) GeekLu.com (Container VC guideline) 15 Monday, August 5, 13
16. Discussion What other interesting patterns for navigation did you see? What’s the implementation solution for each pattern? Every team member should be expert in at least one new pattern! 16 Monday, August 5, 13