diff options
Diffstat (limited to 'docs/html/design/patterns/app-structure.jd')
| -rw-r--r-- | docs/html/design/patterns/app-structure.jd | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd new file mode 100644 index 0000000..e2398ed --- /dev/null +++ b/docs/html/design/patterns/app-structure.jd @@ -0,0 +1,254 @@ +page.title=Application Structure +@jd:body + +<p>Apps come in many varieties that address very different needs. For example:</p> +<ul> +<li>Apps such as Calculator or Camera that are built around a single focused activity handled from a + single screen</li> +<li>Apps such as Phone whose main purpose is to switch between different activities without deeper + navigation</li> +<li>Apps such as Gmail or the Play Store that combine a broad set of data views with deep navigation</li> +</ul> +<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p> +<h2 id="general-structure">General Structure</h2> + +<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is +deep and complex, category views connect top level and detail views.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-9"> + + <img src="{@docRoot}design/media/app_structure_overview.png"> + + </div> + <div class="layout-content-col span-4"> + +<h4>Top level views</h4> +<p>The top level of the app typically consists of the different views that your app supports. The views +either show different representations of the same data or expose an altogether different functional +facet of your app.</p> +<div class="vspace size-3"> </div> + +<h4>Category views</h4> +<p>Category views allow you to drill deeper into your data.</p> +<div class="vspace size-11"> </div> + +<h4>Detail/edit view</h4> +<p>The detail/edit view is where you consume or create data.</p> + + </div> +</div> + +<h2 id="top-level">Top Level</h2> + +<p>The layout of your start screen requires special attention. This is the first screen people see +after launching your app, so it should be an equally rewarding experience for new and frequent +visitors alike.</p> +<p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure +your start screen experience accordingly.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<h4>Put content forward</h4> +<p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to +the meat of your app right away by making content the centerpiece of your start screen. Choose +layouts that are visually engaging and appropriate for the data type and screen size.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/app_structure_market.png"> + <div class="figure-caption"> + The Play Store app's start screen primarily allows navigation into the stores for Apps, Music, Books, + Movies and Games. It is also enriched with tailored recommendations and promotions that + surface content of interest to the user. Search is readily available from the action bar. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<h4>Set up action bars for navigation and actions</h4> +<p>All screens in your app should display action bars to provide consistent navigation and surface +important actions.</p> +<p>At the top level, special considerations apply to the action bar:</p> +<ul> +<li>Use the action bar to display your app's icon or title.</li> +<li>If your top level consists of multiple views, or if switching between data from different user + accounts is a significant use case, make sure that it's easy for the user to navigate between them + by adding view controls to your action bar.</li> +<li>If your app allows people to create content, consider making the content accessible right from the + top level.</li> +<li>If your content is searchable, include the Search action in the action bar so people can cut + through the navigation hierarchy.</li> +</ul> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/app_structure_gmail.png"> + <div class="figure-caption"> + Email is about productivity, so an efficient, easy-to-skim list with higher data density works + well. Navigation supports switching between accounts and recent labels. Icons for creating a + new message or searching are prominent in the split action bar at the bottom. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<h4>Create an identity for your app</h4> +<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity +through its data, the way that data is arranged, and how people interact with it. Especially for +media-rich applications, try to create unique layouts that showcase your data and go beyond the +monotony of simple list views.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/app_structure_music_lndscp.png"> + <div class="figure-caption"> + The 3D carousel celebrates cover art and establishes a unique identity for the Music app. + Defaulting to the Recent view keeps the focus on music the user has been listening to lately. + </div> + + </div> +</div> + +<h2 id="categories">Categories</h2> + +<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories +to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by +keeping your apps shallow.</p> +<p>Even though the number of vertical navigation steps from the top level down to the detail views is +typically dictated by the structure of your app's content, there are several ways you can cut down +on the perception of onerous navigation.</p> +<h4>Use tabs to combine category selection and data display</h4> +<p>This can be successful if the categories are familiar or the number of categories is small. It has +the advantage that a level of hierarchy is removed and data remains at the center of the user's +attention. Navigating laterally between data-rich categories is more akin to a casual browsing +experience than to an explicit navigation step.</p> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + +<p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all +items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to +minimize navigational effort. Rule of thumb: no more than 5–7 tabs.</p> + + <img src="{@docRoot}design/media/app_structure_scrolltabs.png"> + <div class="figure-caption"> + The Play Store app uses tabs to simultaneously show category choice and content. To navigate + between categories, users can swipe left/right on the content. + </div> + + </div> + <div class="layout-content-col span-5"> + +<p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are +in view at the same time.</p> + + <img src="{@docRoot}design/media/app_structure_fixedtabs.png"> + <div class="figure-caption"> + YouTube uses fixed tabs to switch between different, relatively unrelated functional areas. + </div> + + + </div> +</div> + +<h4>Allow cutting through hierarchies</h4> +<p>Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level +invocation of actions for a data item from within list or grid views, display prominent actions +directly on list view items using drop-downs or split list items. This lets people invoke actions on +data without having to navigate all the way down the hierarchy.</p> + +<img src="{@docRoot}design/media/app_structure_shortcut_on_item.png"> +<div class="figure-caption"> + Music allows the user to act upon a data item (song) from within the category view (album), + thereby removing the need to navigate all the way down to the song's detail view. +</div> + +<h4>Acting upon multiple data items</h4> +<p>Even though category views mostly serve to guide people to content detail, keep in mind that there +are often good reasons to act on collections of data as well.</p> +<p>For example, if you allow people to delete an item in a detail view, you should also allow them to +delete multiple items in the category view. Analyze which detail view actions are applicable to +collections of items. Then use multi-select to allow application of those actions to multiple items +in a category view.</p> +<h2 id="details">Details</h2> + +<p>The detail view allows you to view and act on your data. The layout of the detail view depends on +the data type being displayed, and therefore differs widely among apps.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + +<h4>Layout</h4> +<p>Consider the activities people will perform in the detail view and arrange the layout accordingly. +For immersive content, make use of the lights-out mode to allow for distraction-free viewing of +full-screen content.</p> + + <img src="{@docRoot}design/media/app_structure_people_detail.png"> + + </div> + <div class="layout-content-col span-9"> + + <img src="{@docRoot}design/media/app_structure_book_detail_page_flip.png"> + <div class="figure-caption"> + Google Books' detail view is all about replicating the experience of reading an actual book. + The page-flip animation reinforces that notion. To create an immersive experience the app + enters lights-out mode, which hides all system UI affordances. + </div> + + <div class="figure-caption"> + The purpose of the People app's detail view is to surface communication options. The list view + allows for efficient scanning and quick access of phone numbers, email addresses and other + information items. Split items are used to combine calling and messaging into one compact line + item. + </div> + </div> +</div> + +<h4>Make navigation between detail views efficient</h4> +<p>If your users are likely to want to look at multiple items in sequence, allow them to navigate +between items from within the detail view. Use swipe views or other techniques, such as filmstrips, +to achieve this.</p> + +<img src="{@docRoot}design/media/app_structure_gmail_swipe.png"> +<div class="figure-caption"> + Gmail using swipe views to navigate from detail view to detail view. +</div> + +<img src="{@docRoot}design/media/app_structure_gallery_filmstrip.png"> +<div class="figure-caption"> + In addition to supporting swipe gestures to move left or right through images, Gallery provides a + filmstrip control that lets people quickly jump to specific images. +</div> + +<h2 id="checklist">Checklist</h2> + +<ul> +<li> +<p>Find ways to display useful content on your start screen.</p> +</li> +<li> +<p>Use action bars to provide consistent navigation.</p> +</li> +<li> +<p>Keep your hierarchies shallow by using horizontal navigation and shortcuts.</p> +</li> +<li> +<p>Use multi-select to allow the user to act on collections of data.</p> +</li> +<li> +<p>Allow for quick navigation between detail items with swipe views.</p> +</li> +</ul> |