Lines Matching full:navigation
2 parent.title=Designing Effective Navigation
6 previous.title=Providing Ancestral and Temporal Navigation
25 <p>Now that we have a solid understanding of navigation patterns and screen grouping techniques, it's time to apply them to our screens. Let's take another look at our exhaustive screen map for the example news application from the <a href="screen-planning.html">first lesson</a>, below.</p>
28 <img src="{@docRoot}images/training/app-navigation-screen-planning-exhaustive-map.png"
34 <p>Our next step is to choose and apply navigation patterns discussed in the previous lessons to this screen map, maximizing navigation speed and minimizing the number of touches to access data, while keeping the interface intuitive and consistent with Android best practices. We also need to make different choices for our different target device form factors. For simplicity, let's focus on tablets and handsets.</p>
41 <p>Finally, let's look at how we present news stories. The first option to simplify navigation across different story categories is to use horizontal paging, with a set of labels above the horizontal swiping surface, indicating the currently visible and adjacently accessible categories. On tablets in the landscape orientation, we can go a step further and present the horizontally-pageable <em>Story List</em> screen as a left pane, and the <em>Story View</em> screen as the primary content pane on the right.</p>
43 <p>Below are diagrams representing the new screen maps for handsets and tablets after applying these navigation patterns.</p>
46 <img src="{@docRoot}images/training/app-navigation-wireframing-map-example-phone.png"
52 <img src="{@docRoot}images/training/app-navigation-wireframing-map-example-tablet.png"
61 <img src="{@docRoot}images/training/app-navigation-wireframing-map-example-tablet-alt.png"
71 <p>The easiest and fastest way to get started is to sketch out your screens by hand using paper and pencils. Once you begin sketching, you may uncover practicality issues in your original screen map or decisions on which patterns to use. In some cases, patterns may apply well to a given design problem in theory, but in practice they may break down and cause visual clutter or interactional issues (for example, if there are two rows of tabs on the screen). If that happens, explore other navigation patterns, or variations on chosen patterns, to arrive at a more optimal set of sketches.</p>
89 <a href="{@docRoot}images/training/app-navigation-wireframing-wires-phone.png">
90 <img src="{@docRoot}images/training/app-navigation-wireframing-wires-phone.png"
100 <a href="{@docRoot}images/training/app-navigation-wireframing-wires-tablet.png">
101 <img src="{@docRoot}images/training/app-navigation-wireframing-wires-tablet.png"
116 <p>Now that you've designed effective and intuitive intra-app navigation for your application, you can begin to spend time refining the user interface for each individual screen. For example, you can choose to use richer widgets in place of simple text labels, images, and buttons when displaying interactive content. You can also begin defining the visual styling of your application, incorporating elements from your brand's visual language in the process.</p>
122 <li><a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>: implement tabs, up navigation, on-screen actions, etc.
