diff options
Diffstat (limited to 'docs/html/training/design-navigation')
5 files changed, 110 insertions, 18 deletions
diff --git a/docs/html/training/design-navigation/ancestral-temporal.jd b/docs/html/training/design-navigation/ancestral-temporal.jd index 02e43e1..ab6a64d 100644 --- a/docs/html/training/design-navigation/ancestral-temporal.jd +++ b/docs/html/training/design-navigation/ancestral-temporal.jd @@ -21,6 +21,7 @@ next.link=wireframing.html <h2>You should also read</h2> <ul> + <li><a href="{@docRoot}design/patterns/navigation.html">Android Design: Navigation</a></li> <li><a href="{@docRoot}guide/topics/fundamentals/tasks-and-back-stack.html">Tasks and Back Stack</a></li> </ul> @@ -28,32 +29,65 @@ next.link=wireframing.html </div> -<p>Now that users can navigate <a href="descendant-lateral.html">deep into</a> the application's screen hierarchy, we need to provide a method for navigating up the hierarchy, to parent and ancestor screens. Additionally, we should ensure that temporal navigation via the BACK button is respected to respect Android conventions.</p> +<p>Now that users can navigate <a href="descendant-lateral.html">deep into</a> the application's +screen hierarchy, we need to provide a method for navigating up the hierarchy, to parent and +ancestor screens. Additionally, we should ensure that temporal navigation via the <em>Back</em> +button is respected to respect Android conventions.</p> +<div class="design-announce"> +<p><strong>Back/Up Navigation Design</strong></p> + <p>For design guidelines, read Android Design's <a + href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern guide.</p> +</div> <h2 id="temporal-navigation">Support Temporal Navigation: <em>Back</em></h2> -<p>Temporal navigation, or navigation between historical screens, is deeply rooted in the Android system. All Android users expect the BACK button to take them to the previous screen, regardless of other state. The set of historical screens is always rooted at the user's Launcher application (the phone's "home" screen). That is, pressing BACK enough times should land you back at the Launcher, after which the BACK button will do nothing.</p> +<p>Temporal navigation, or navigation between historical screens, is deeply rooted in the Android +system. All Android users expect the <em>Back</em> button to take them to the previous screen, +regardless of other state. The set of historical screens is always rooted at the user's Launcher +application (the phone's "home" screen). That is, pressing <em>Back</em> enough times should land +you back at the Launcher, after which the <em>Back</em> button will do nothing.</p> <img src="{@docRoot}images/training/app-navigation-ancestral-navigate-back.png" - alt="The BACK button behavior after entering the Email app from the People (or Contacts) app" id="figure-navigate-back"> + alt="The Back button behavior after entering the Email app from the People (or Contacts) app" +id="figure-navigate-back"> -<p class="img-caption"><strong>Figure 1.</strong> The BACK button behavior after entering the Email app from the People (or Contacts) app.</p> +<p class="img-caption"><strong>Figure 1.</strong> The <em>Back</em> button behavior after entering +the Email app from the People (or Contacts) app.</p> -<p>Applications generally don't have to worry about managing the BACK button themselves; the system handles <a href="{@docRoot}guide/topics/fundamentals/tasks-and-back-stack.html">tasks and the <em>back stack</em></a>, or the list of previous screens, automatically. The BACK button by default simply traverses this list of screens, removing the current screen from the list upon being pressed.</p> +<p>Applications generally don't have to worry about managing the <em>Back</em> button themselves; +the system handles <a href="{@docRoot}guide/topics/fundamentals/tasks-and-back-stack.html">tasks and +the <em>back stack</em></a>, or the list of previous screens, automatically. The <em>Back</em> +button by default simply traverses this list of screens, removing the current screen from the list +upon being pressed.</p> -<p>There are, however, cases where you may want to override the behavior for BACK. For example, if your screen contains an embedded web browser where users can interact with page elements to navigate between web pages, you may wish to trigger the embedded browser's default <em>back</em> behavior when users press the device's BACK button. Upon reaching the beginning of the browser's internal history, you should always defer to the system's default behavior for the BACK button.</p> +<p>There are, however, cases where you may want to override the behavior for <em>Back</em>. For +example, if your screen contains an embedded web browser where users can interact with page elements +to navigate between web pages, you may wish to trigger the embedded browser's default <em>back</em> +behavior when users press the device's <em>Back</em> button. Upon reaching the beginning of the +browser's internal history, you should always defer to the system's default behavior for the +<em>Back</em> button.</p> <h2 id="ancestral-navigation">Provide Ancestral Navigation: <em>Up</em> and <em>Home</em></h2> -<p>Before Android 3.0, the most common form of ancestral navigation was the <em>Home</em> metaphor. This was generally implemented as a <em>Home</em> item accessible via the device's MENU button, or a <em>Home</em> button at the top-left of the screen, usually as a component of the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>. Upon selecting <em>Home</em>, the user would be taken to the screen at the top of the screen hierarchy, generally known as the application's home screen.</p> +<p>Before Android 3.0, the most common form of ancestral navigation was the <em>Home</em> metaphor. +This was generally implemented as a <em>Home</em> item accessible via the device's <em>Menu</em> +button, or a <em>Home</em> button at the top-left of the screen, usually as a component of the +Action Bar (<a href="{@docRoot}design/patterns/actionbar.html">pattern docs</a> at Android Design). +Upon selecting <em>Home</em>, the user would be taken to the screen at the top of the screen +hierarchy, generally known as the application's home screen.</p> <p>Providing direct access to the application's home screen can give the user a sense of comfort and security. Regardless of where they are in the application, if they get lost in the app, they can select <em>Home</em> to arrive back at the familiar home screen.</p> -<p>Android 3.0 introduced the <em>Up</em> metaphor, which is presented in the Action Bar as a substitute for the <em>Home</em> button described above. Upon tapping <em>Up</em>, the user should be taken to the parent screen in the hierarchy. This navigation step is usually the previous screen (as described with the BACK button discussion above), but this is not universally the case. Thus, developers must ensure that <em>Up</em> for each screen navigates to a single, predetermined parent screen.</p> +<p>Android 3.0 introduced the <em>Up</em> metaphor, which is presented in the Action Bar as a +substitute for the <em>Home</em> button described above. Upon tapping <em>Up</em>, the user should +be taken to the parent screen in the hierarchy. This navigation step is usually the previous screen +(as described with the <em>Back</em> button discussion above), but this is not universally the case. +Thus, developers must ensure that <em>Up</em> for each screen navigates to a single, predetermined +parent screen.</p> <img src="{@docRoot}images/training/app-navigation-ancestral-navigate-up.png" @@ -64,6 +98,12 @@ next.link=wireframing.html <p>In some cases, it's appropriate for <em>Up</em> to perform an action rather than navigating to a parent screen. Take for example, the Gmail application for Android 3.0-based tablets. When viewing a mail conversation while holding the device in landscape, the conversation list, as well as the conversation details are presented side-by-side. This is a form of parent-child screen grouping, as discussed in a <a href="multiple-sizes.html">previous lesson</a>. However, when viewing a mail conversation in the portrait orientation, only the conversation details are shown. The <em>Up</em> button is used to temporarily show the parent pane, which slides in from the left of the screen. Pressing the <em>Up</em> button again while the left pane is visible exits the context of the individual conversation, up to a full-screen list of conversations.</p> -<p class="note"><strong>Implementation Note:</strong> As a best practice, when implementing either <em>Home</em> or <em>Up</em>, make sure to clear the back stack of any descendent screens. For <em>Home</em>, the only remaining screen on the back stack should be the home screen. For <em>Up</em> navigation, the current screen should be removed from the back stack, unless BACK navigates across screen hierarchies. You can use the {@link android.content.Intent#FLAG_ACTIVITY_CLEAR_TOP} and {@link android.content.Intent#FLAG_ACTIVITY_NEW_TASK} intent flags together to achieve this.</p> +<p class="note"><strong>Implementation Note:</strong> As a best practice, when implementing either +<em>Home</em> or <em>Up</em>, make sure to clear the back stack of any descendent screens. For +<em>Home</em>, the only remaining screen on the back stack should be the home screen. For +<em>Up</em> navigation, the current screen should be removed from the back stack, unless +<em>Back</em> navigates across screen hierarchies. You can use the {@link +android.content.Intent#FLAG_ACTIVITY_CLEAR_TOP} and {@link +android.content.Intent#FLAG_ACTIVITY_NEW_TASK} intent flags together to achieve this.</p> <p>In the last lesson, we apply the concepts discussed in all of the lessons so far to create interaction design wireframes for our example news application.</p> diff --git a/docs/html/training/design-navigation/descendant-lateral.jd b/docs/html/training/design-navigation/descendant-lateral.jd index ebfd913..2d97e40 100644 --- a/docs/html/training/design-navigation/descendant-lateral.jd +++ b/docs/html/training/design-navigation/descendant-lateral.jd @@ -18,9 +18,18 @@ next.link=ancestral-temporal.html <li><a href="#buttons">Buttons and Simple Targets</a></li> <li><a href="#lists">Lists, Grids, Carousels, and Stacks</a></li> <li><a href="#tabs">Tabs</a></li> - <li><a href="#paging">Horizontal Paging</a></li> + <li><a href="#paging">Horizontal Paging (Swipe Views)</a></li> </ol> +<h2>You should also read</h2> +<ul> + <li><a href="{@docRoot}design/building-blocks/buttons.html">Android Design: Buttons</a></li> + <li><a href="{@docRoot}design/building-blocks/lists.html">Android Design: Lists</a></li> + <li><a href="{@docRoot}design/building-blocks/grid-lists.html">Android Design: Grid Lists</a></li> + <li><a href="{@docRoot}design/building-blocks/tabs.html">Android Design: Tabs</a></li> + <li><a href="{@docRoot}design/patterns/swipe-views.html">Android Design: Swipe Views</a></li> +</ul> + </div> </div> @@ -48,6 +57,12 @@ next.link=ancestral-temporal.html <h2 id="buttons">Buttons and Simple Targets</h2> +<div class="design-announce"> +<p><strong>Button Design</strong></p> + <p>For design guidelines, read Android Design's <a + href="{@docRoot}design/building-blocks/buttons.html">Buttons</a> guide.</p> +</div> + <p>For section-related screens, offering touchable and keyboard-focusable targets in the parent is generally the most straightforward and familiar kind of touch-based navigation interface. Examples of such targets include buttons, fixed-size list views, or text links, although the latter is not an ideal UI (user interface) element for touch-based navigation. Upon selecting one of these targets, the child screen is opened, replacing the current context (screen) entirely. Buttons and other simple targets are rarely used for representing items in a collection.</p> @@ -64,6 +79,13 @@ next.link=ancestral-temporal.html <h2 id="lists">Lists, Grids, Carousels, and Stacks</h2> +<div class="design-announce"> +<p><strong>List and Grid List Design</strong></p> + <p>For design guidelines, read Android Design's <a + href="{@docRoot}design/building-blocks/lists.html">Lists</a> and <a + href="{@docRoot}design/building-blocks/grid-lists.html">Grid Lists</a> guides.</p> +</div> + <p>For collection-related screens, and especially for textual information, vertically scrolling lists are often the most straightforward and familiar kind of interface. For more visual or media-rich content items such as photos or videos, vertically scrolling grids of items, horizontally scrolling lists (sometimes referred to as <em>carousels</em>), or stacks (sometimes referred to as <em>cards</em>) can be used instead. These UI elements are generally best used for presenting item collections or large sets of child screens (for example, a list of stories or a list of 10 or more news topics), rather than a small set of unrelated, sibling child screens.</p> @@ -80,6 +102,12 @@ next.link=ancestral-temporal.html <h2 id="tabs">Tabs</h2> +<div class="design-announce"> +<p><strong>Tab Design</strong></p> + <p>For design guidelines, read Android Design's <a + href="{@docRoot}design/building-blocks/tabs.html">Tabs</a> guide.</p> +</div> + <p>Using tabs is a very popular solution for lateral navigation. This pattern allows grouping of sibling screens, in that the tab content container in the parent screen can embed child screens that otherwise would be entirely separate contexts. Tabs are most appropriate for small sets (4 or fewer) of section-related screens.</p> @@ -89,7 +117,16 @@ next.link=ancestral-temporal.html <p class="img-caption"><strong>Figure 5.</strong> Example phone and tablet tab-based navigation interfaces with relevant screen map excerpt.</p> -<p>Several best practices apply when using tabs. Tabs should be persistent across immediate related screens. Only the designated content region should change when selecting a tab, and tab indicators should remain available at all times. Additionally, tab switches should not be treated as history. For example, if a user switches from a tab <em>A</em> to another tab <em>B</em>, pressing the BACK button (more on that in the <a href="ancestral-temporal.html">next lesson</a>) should not re-select tab <em>A</em>. Tabs are usually laid out horizontally, although other presentations of tab navigation such as using a drop-down list in the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> are sometimes appropriate. Lastly, and most importantly, <em>tabs should always run along the top of the screen</em>, and should not be aligned to the bottom of the screen.</p> +<p>Several best practices apply when using tabs. Tabs should be persistent across immediate related +screens. Only the designated content region should change when selecting a tab, and tab indicators +should remain available at all times. Additionally, tab switches should not be treated as history. +For example, if a user switches from a tab <em>A</em> to another tab <em>B</em>, pressing the +<em>Back</em> button (more on that in the <a href="ancestral-temporal.html">next lesson</a>) should +not re-select tab <em>A</em>. Tabs are usually laid out horizontally, although other presentations +of tab navigation such as using a drop-down list in the Action Bar (<a +href="{@docRoot}design/patterns/actionbar.html">pattern docs</a> at Android Design) are sometimes +appropriate. Lastly, and most importantly, <em>tabs should always run along the top of the +screen</em>, and should not be aligned to the bottom of the screen.</p> <p>There are some obvious immediate benefits of tabs over simpler list- and button-based navigation:</p> @@ -101,9 +138,15 @@ next.link=ancestral-temporal.html <p>A common criticism is that space must be reserved for the tab indicators, detracting from the space available to tab contents. This consequence is usually acceptable, and the tradeoff commonly weighs in favor of using this pattern. You should also feel free to customize tab indicators, showing text and/or icons to make optimal use of vertical space. When adjusting indicator heights however, ensure that tab indicators are large enough for a human finger to touch without error.</p> -<h2 id="paging">Horizontal Paging</h2> +<h2 id="paging">Horizontal Paging (Swipe Views)</h2> + +<div class="design-announce"> +<p><strong>Swipe Views Design</strong></p> + <p>For design guidelines, read Android Design's <a + href="{@docRoot}design/patterns/swipe-views.html">Swipe Views</a> pattern guides.</p> +</div> -<p>Another popular lateral navigation pattern is horizontal paging. This pattern applies best to collection-related sibling screens, such as a list of categories (world, business, technology, and health stories). Like tabs, this pattern also allows grouping screens in that the parent presents the contents of child screens embedded within its own layout.</p> +<p>Another popular lateral navigation pattern is horizontal paging, also referred to as swipe views. This pattern applies best to collection-related sibling screens, such as a list of categories (world, business, technology, and health stories). Like tabs, this pattern also allows grouping screens in that the parent presents the contents of child screens embedded within its own layout.</p> <img src="{@docRoot}images/training/app-navigation-descendant-lateral-paging.png" diff --git a/docs/html/training/design-navigation/index.jd b/docs/html/training/design-navigation/index.jd index e02d52e..af60717 100644 --- a/docs/html/training/design-navigation/index.jd +++ b/docs/html/training/design-navigation/index.jd @@ -14,7 +14,7 @@ next.link=screen-planning.html <p>This class is not specific to any particular version of the Android platform. It is also primarily design-focused and does not require knowledge of the Android SDK. That said, you should have experience using an Android device for a better understanding of the context in which Android applications run.</p> -<p>You should also have basic familiarity with the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>, used across most applications in devices running Android 3.0 and later.</p> +<p>You should also have basic familiarity with the Action Bar (<a href="{@docRoot}design/patterns/actionbar.html">pattern docs</a> at Android Design), used across most applications in devices running Android 3.0 and later.</p> </div> @@ -41,7 +41,9 @@ Relationships</a></strong></dt> <dd>Learn about techniques for allowing users to navigate deep into, as well as across, your content hierarchy. Also learn about pros and cons of, and best practices for, specific navigational UI elements for various situations.</dd> <dt><strong><a href="ancestral-temporal.html">Providing Ancestral and Temporal Navigation</a></strong></dt> - <dd>Learn how to allow users to navigate upwards in the content hierarchy. Also learn about best practices for the BACK button and temporal navigation, or navigation to previous screens that may not be hierarchically related.</dd> + <dd>Learn how to allow users to navigate upwards in the content hierarchy. Also learn about best +practices for the <em>Back</em> button and temporal navigation, or navigation to previous screens +that may not be hierarchically related.</dd> <dt><strong><a href="wireframing.html">Putting it All Together: Wireframing the Example App</a></strong></dt> <dd>Learn how to create screen wireframes (low-fidelity graphic mockups) representing the screens in a news application based on the desired information model. These wireframes utilize navigational elements discussed in previous lessons to demonstrate intuitive and efficient navigation.</dd> diff --git a/docs/html/training/design-navigation/multiple-sizes.jd b/docs/html/training/design-navigation/multiple-sizes.jd index 7a8139f..ebaec0f 100644 --- a/docs/html/training/design-navigation/multiple-sizes.jd +++ b/docs/html/training/design-navigation/multiple-sizes.jd @@ -22,6 +22,7 @@ next.link=descendant-lateral.html <h2>You should also read</h2> <ul> + <li><a href="{@docRoot}design/patterns/multi-pane-layouts.html">Android Design: Multi-pane Layouts</a></li> <li><a href="{@docRoot}training/multiscreen/index.html">Designing for Multiple Screens</a></li> </ul> @@ -35,6 +36,12 @@ next.link=descendant-lateral.html <h2 id="multi-pane-layouts">Group Screens with Multi-pane Layouts</h2> +<div class="design-announce"> +<p><strong>Multi-pane Layout Design</strong></p> + <p>For design guidelines, read Android Design's <a + href="{@docRoot}design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a> pattern guide.</p> +</div> + <p>3 to 4-inch screens are generally only suitable for showing a single vertical pane of content at a time, be it a list of items, or detail information about an item, etc. Thus on such devices, screens generally map one-to-one with levels in the information hierarchy (<em>categories</em> → <em>object list</em> → <em>object detail</em>).</p> <p>Larger screens such as those found on tablets and TVs, on the other hand, generally have much more available screen space and are able to present multiple panes of content. In landscape, panes are usually ordered from left to right in increasing detail order. Users are especially accustomed to multiple panes on larger screens from years and years of desktop application and desktop web site use. Many desktop applications and websites offer a left-hand navigation pane or use a master/detail two-pane layout.</p> @@ -76,12 +83,12 @@ next.link=descendant-lateral.html <li><strong>Expand/collapse</strong> <img src="{@docRoot}images/training/app-navigation-multiple-sizes-strategy-collapse.png" alt="Expand/collapse strategy"> - <p>A variation on the stretch strategy is to collapse the contents of the left pane when in portrait. This works quite well with master/detail panes where the left (master) pane contains easily collapsible list items. An example would be for a realtime chat application. In landscape, the left list could contain chat contact photos, names, and online statuses. In portrait, horizontal space could be collapsed by hiding contact names and only showing photos and online status indicator icons.</p></li> + <p>A variation on the stretch strategy is to collapse the contents of the left pane when in portrait. This works quite well with master/detail panes where the left (master) pane contains easily collapsible list items. An example would be for a realtime chat application. In landscape, the left list could contain chat contact photos, names, and online statuses. In portrait, horizontal space could be collapsed by hiding contact names and only showing photos and online status indicator icons. Optionally also provide an expand control that allows the user to expand the left pane content to its larger width and vice versa.</p></li> <li><strong>Show/Hide</strong> <img src="{@docRoot}images/training/app-navigation-multiple-sizes-strategy-show-hide.png" alt="Show/Hide strategy"> - <p>In this scenario, the left pane is completely hidden in portrait mode. However, <em>to ensure the functional parity</em> of your screen in portrait and landscape, the left pane should be made available via an onscreen affordance (such as a button). It's usually appropriate to use the <em>Up</em> button in the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> to show the left pane, as is discussed in a <a href="ancestral-temporal.html">later lesson</a>.</p></li> + <p>In this scenario, the left pane is completely hidden in portrait mode. However, <em>to ensure the functional parity</em> of your screen in portrait and landscape, the left pane should be made available via an onscreen affordance (such as a button). It's usually appropriate to use the <em>Up</em> button in the Action Bar (<a href="{@docRoot}design/patterns/actionbar.html">pattern docs</a> at Android Design) to show the left pane, as is discussed in a <a href="ancestral-temporal.html">later lesson</a>.</p></li> <li><strong>Stack</strong> <img src="{@docRoot}images/training/app-navigation-multiple-sizes-strategy-stack.png" diff --git a/docs/html/training/design-navigation/wireframing.jd b/docs/html/training/design-navigation/wireframing.jd index c7687dd..6deceb1 100644 --- a/docs/html/training/design-navigation/wireframing.jd +++ b/docs/html/training/design-navigation/wireframing.jd @@ -121,5 +121,5 @@ previous.link=ancestral-temporal.html <li><a href="{@docRoot}guide/topics/ui/index.html">Developer's Guide: User Interface</a>: learn how to implement your user interface designs using the Android SDK.</li> <li><a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>: implement tabs, up navigation, on-screen actions, etc. <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a>: implement re-usable, multi-pane layouts - <li><a href="{@docRoot}sdk/compatibility-library.html">Support Library</a>: implement horizontal paging using <code>ViewPager</code></li> + <li><a href="{@docRoot}sdk/compatibility-library.html">Support Library</a>: implement horizontal paging (swipe views) using <code>ViewPager</code></li> </ul> |