Gitiles
Code Review Sign In
gerrit.witaqua.org / frameworks_base / 06a864413f03627ba7671d1c19ae114e3afaad4b / . / docs / html / design / patterns / app-structure.html
blob: b87f4021879eb2fc7d505ade914dddde816e375d [file] [log] [blame]
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>
6
7Android Design - Application Structure
8 </title>
9 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
10 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
11 <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
12 <link rel="stylesheet" href="../static/default.css">
13
14 </head>
15 <body>
16
17 <div id="page-container">
18
19 <div id="page-header"><a href="../index.html">Android Design</a></div>
20
21 <div id="main-row">
22
23 <ul id="nav">
24
25 <li class="nav-section">
26 <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
27 <ul>
28 <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
29 <li><a href="../get-started/principles.html">Design Principles</a></li>
30 <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
31 </ul>
32 </li>
33
34 <li class="nav-section">
35 <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
36 <ul>
37 <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
38 <li><a href="../style/themes.html">Themes</a></li>
39 <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
40 <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
41 <li><a href="../style/typography.html">Typography</a></li>
42 <li><a href="../style/color.html">Color</a></li>
43 <li><a href="../style/iconography.html">Iconography</a></li>
44 <li><a href="../style/writing.html">Writing Style</a></li>
45 </ul>
46 </li>
47
48 <li class="nav-section">
49 <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
50 <ul>
51 <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
52 <li><a href="../patterns/gestures.html">Gestures</a></li>
53 <li><a href="../patterns/app-structure.html">App Structure</a></li>
54 <li><a href="../patterns/navigation.html">Navigation</a></li>
55 <li><a href="../patterns/actionbar.html">Action Bar</a></li>
56 <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
57 <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
58 <li><a href="../patterns/selection.html">Selection</a></li>
59 <li><a href="../patterns/notifications.html">Notifications</a></li>
60 <li><a href="../patterns/compatibility.html">Compatibility</a></li>
61 <li><a href="../patterns/pure-android.html">Pure Android</a></li>
62 </ul>
63 </li>
64
65 <li class="nav-section">
66 <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
67 <ul>
68 <li><a href="../building-blocks/tabs.html">Tabs</a></li>
69 <li><a href="../building-blocks/lists.html">Lists</a></li>
70 <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
71 <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
72 <li><a href="../building-blocks/spinners.html">Spinners</a></li>
73 <li><a href="../building-blocks/buttons.html">Buttons</a></li>
74 <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
75 <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
76 <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
77 <li><a href="../building-blocks/switches.html">Switches</a></li>
78 <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
79 <li><a href="../building-blocks/pickers.html">Pickers</a></li>
80 </ul>
81 </li>
82
83 <li>
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]84 <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]85 </li>
86
87 </ul>
88
89 <div id="content">
90
91
92 <div class="layout-content-row content-header">
93 <div class="layout-content-col span-9">
94 <h2>Application Structure</h2>
95 </div>
96 <div class="paging-links layout-content-col span-4">
97 <a href="#" class="prev-page-link">Previous</a>
98 <a href="#" class="next-page-link">Next</a>
99 </div>
100 </div>
101
102
103
104
105<p>Apps come in many varieties that address very different needs. For example:</p>
106<ul>
107<li>Apps such as Calculator or Camera that are built around a single focused activity handled from a
108 single screen</li>
109<li>Apps such as Phone whose main purpose is to switch between different activities without deeper
110 navigation</li>
111<li>Apps such as Gmail or Market that combine a broad set of data views with deep navigation</li>
112</ul>
113<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p>
114<h2>General Structure</h2>
115<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is
116deep and complex, category views connect top level and detail views.</p>
117
118<div class="layout-content-row">
119 <div class="layout-content-col span-9">
120
121 <img src="../static/content/app_structure_overview.png">
122
123 </div>
124 <div class="layout-content-col span-4">
125
126<h4>Top level views</h4>
127<p>The top level of the app typically consists of the different views that your app supports. The views
128either show different representations of the same data or expose an altogether different functional
129facet of your app.</p>
130<div class="vspace size-3">&nbsp;</div>
131
132<h4>Category views</h4>
133<p>Category views allow you to drill deeper into your data.</p>
134<div class="vspace size-11">&nbsp;</div>
135
136<h4>Detail/edit view</h4>
137<p>The detail/edit view is where you consume or create data.</p>
138
139 </div>
140</div>
141
142<h2>Top Level</h2>
143<p>The layout of your start screen requires special attention. This is the first screen people see
144after launching your app, so it should be an equally rewarding experience for new and frequent
145visitors alike.</p>
146<p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure
147your start screen experience accordingly.</p>
148
149<div class="layout-content-row">
150 <div class="layout-content-col span-5">
151
152<h4>Put content forward</h4>
153<p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to
154the meat of your app right away by making content the centerpiece of your start screen. Choose
155layouts that are visually engaging and appropriate for the data type and screen size.</p>
156
157 </div>
158 <div class="layout-content-col span-8">
159
160 <img src="../static/content/app_structure_market.png">
161 <div class="figure-caption">
162 Market's start screen primarily allows navigation into the stores for Apps, Music, Books, and
163 Games. It is also enriched with tailored recommendations and promotions that surface content
164 of interest to the user. Search is readily available from the action bar.
165 </div>
166
167 </div>
168</div>
169
170<div class="layout-content-row">
171 <div class="layout-content-col span-5">
172
173<h4>Set up action bars for navigation and actions</h4>
174<p>All screens in your app should display action bars to provide consistent navigation and surface
175important actions.</p>
176<p>At the top level, special considerations apply to the action bar:</p>
177<ul>
178<li>Use the action bar to display your app's icon or title.</li>
179<li>If your top level consists of multiple views, or if switching between data from different user
180 accounts is a significant use case, make sure that it's easy for the user to navigate between them
181 by adding view controls to your action bar.</li>
182<li>If your app allows people to create content, consider making the content accessible right from the
183 top level.</li>
184<li>If your content is searchable, include the Search action in the action bar so people can cut
185 through the navigation hierarchy.</li>
186</ul>
187
188 </div>
189 <div class="layout-content-col span-8">
190
191 <img src="../static/content/app_structure_gmail.png">
192 <div class="figure-caption">
193 Email is about productivity, so an efficient, easy-to-skim list with higher data density works
194 well. Navigation supports switching between accounts and recent labels. Icons for creating a
195 new message or searching are prominent in the split action bar at the bottom.
196 </div>
197
198 </div>
199</div>
200
201<div class="layout-content-row">
202 <div class="layout-content-col span-5">
203
204<h4>Create an identity for your app</h4>
205<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity
206through its data, the way that data is arranged, and how people interact with it. Especially for
207media-rich applications, try to create unique layouts that showcase your data and go beyond the
208monotony of simple list views.</p>
209
210 </div>
211 <div class="layout-content-col span-8">
212
213 <img src="../static/content/app_structure_music_lndscp.png">
214 <div class="figure-caption">
215 The 3D carousel celebrates cover art and establishes a unique identity for the Music app.
216 Defaulting to the Recent view keeps the focus on music the user has been listening to lately.
217 </div>
218
219 </div>
220</div>
221
222<h2>Categories</h2>
223<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories
224to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by
225keeping your apps shallow.</p>
226<p>Even though the number of vertical navigation steps from the top level down to the detail views is
227typically dictated by the structure of your app's content, there are several ways you can cut down
228on the perception of onerous navigation.</p>
229<h4>Use tabs to combine category selection and data display</h4>
230<p>This can be successful if the categories are familiar or the number of categories is small. It has
231the advantage that a level of hierarchy is removed and data remains at the center of the user's
232attention. Navigating laterally between data-rich categories is more akin to a casual browsing
233experience than to an explicit navigation step.</p>
234
235<div class="vspace size-1">&nbsp;</div>
236
237<div class="layout-content-row">
238 <div class="layout-content-col span-8">
239
240<p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all
241items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to
242minimize navigational effort. Rule of thumb: no more than 5&ndash;7 tabs.</p>
243
244 <img src="../static/content/app_structure_scrolltabs.png">
245 <div class="figure-caption">
246 Market uses tabs to simultaneously show category choice and content. To navigate between
247 categories, users can swipe left/right on the content.
248 </div>
249
250 </div>
251 <div class="layout-content-col span-5">
252
253<p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are
254in view at the same time.</p>
255
256 <img src="../static/content/app_structure_fixedtabs.png">
257 <div class="figure-caption">
258 YouTube uses fixed tabs to switch between different, relatively unrelated functional areas.
259 </div>
260
261
262 </div>
263</div>
264
265<h4>Allow cutting through hierarchies</h4>
266<p>Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level
267invocation of actions for a data item from within list or grid views, display prominent actions
268directly on list view items using drop-downs or split list items. This lets people invoke actions on
269data without having to navigate all the way down the hierarchy.</p>
270
271<img src="../static/content/app_structure_shortcut_on_item.png">
272<div class="figure-caption">
273 Music allows the user to act upon a data item (song) from within the category view (album),
274 thereby removing the need to navigate all the way down to the song's detail view.
275</div>
276
277<h4>Acting upon multiple data items</h4>
278<p>Even though category views mostly serve to guide people to content detail, keep in mind that there
279are often good reasons to act on collections of data as well.</p>
280<p>For example, if you allow people to delete an item in a detail view, you should also allow them to
281delete multiple items in the category view. Analyze which detail view actions are applicable to
282collections of items. Then use multi-select to allow application of those actions to multiple items
283in a category view.</p>
284<h2>Details</h2>
285<p>The detail view allows you to view and act on your data. The layout of the detail view depends on
286the data type being displayed, and therefore differs widely among apps.</p>
287
288<div class="layout-content-row">
289 <div class="layout-content-col span-4">
290
291<h4>Layout</h4>
292<p>Consider the activities people will perform in the detail view and arrange the layout accordingly.
293For immersive content, make use of the lights-out mode to allow for distraction-free viewing of
294full-screen content.</p>
295
296 <img src="../static/content/app_structure_people_detail.png">
297
298 </div>
299 <div class="layout-content-col span-9">
300
301 <img src="../static/content/app_structure_book_detail_page_flip.png">
302 <div class="figure-caption">
303 Google Books' detail view is all about replicating the experience of reading an actual book.
304 The page-flip animation reinforces that notion. To create an immersive experience the app
305 enters lights-out mode, which hides all system UI affordances.
306 </div>
307
308 <div class="figure-caption">
309 The purpose of the People app's detail view is to surface communication options. The list view
310 allows for efficient scanning and quick access of phone numbers, email addresses and other
311 information items. Split items are used to combine calling and messaging into one compact line
312 item.
313 </div>
314 </div>
315</div>
316
317<h4>Make navigation between detail views efficient</h4>
318<p>If your users are likely to want to look at multiple items in sequence, allow them to navigate
319between items from within the detail view. Use swipe views or other techniques, such as filmstrips,
320to achieve this.</p>
321
322<img src="../static/content/app_structure_gmail_swipe.png">
323<div class="figure-caption">
324 Gmail using swipe views to navigate from detail view to detail view.
325</div>
326
327<img src="../static/content/app_structure_gallery_filmstrip.png">
328<div class="figure-caption">
329 In addition to supporting swipe gestures to move left or right through images, Gallery provides a
330 filmstrip control that lets people quickly jump to specific images.
331</div>
332
333<h2>Checklist</h2>
334<ul>
335<li>
336<p>Find ways to display useful content on your start screen.</p>
337</li>
338<li>
339<p>Use action bars to provide consistent navigation.</p>
340</li>
341<li>
342<p>Keep your hierarchies shallow by using horizontal navigation and shortcuts.</p>
343</li>
344<li>
345<p>Use multi-select to allow the user to act on collections of data.</p>
346</li>
347<li>
348<p>Allow for quick navigation between detail items with swipe views.</p>
349</li>
350</ul>
351
352
353
354
355 <div class="layout-content-row content-footer">
356 <div class="paging-links layout-content-col span-9">&nbsp;</div>
357 <div class="paging-links layout-content-col span-4">
358 <a href="#" class="prev-page-link">Previous</a>
359 <a href="#" class="next-page-link">Next</a>
360 </div>
361 </div>
362
363 </div>
364
365 </div>
366
367 <div id="page-footer">
368
369 <p id="copyright">
370 Except as noted, this content is licensed under
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]371 <a href="http://creativecommons.org/licenses/by/2.5/">
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]372 Creative Commons Attribution 2.5</a>.<br>
373 For details and restrictions, see the
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]374 <a href="http://developer.android.com/license.html">Content License</a>.
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]375 </p>
376
377 <p>
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]378 <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
379 <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
380 <a href="http://www.android.com/branding.html">Brand Guidelines</a>
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]381 </p>
382
383 </div>
384 </div>
385
386 <script src="../static/jquery-1.6.2.min.js"></script>
387 <script>
388 var SITE_ROOT = '../';
389 </script>
390 <script src="../static/default.js"></script>
391
392
393 <script type="text/javascript">
394 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
395 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
396 </script>
397 <script type="text/javascript">
398 var pageTracker = _gat._getTracker("UA-5831155-1");
399 pageTracker._trackPageview();
400 </script>
401 </body>
402</html>