You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/html/design/building-blocks/dialogs.jd
+22-21Lines changed: 22 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -10,28 +10,29 @@ user to adjust settings or enter text.</p>
10
10
<div class="with-callouts">
11
11
12
12
<ol>
13
-
<li>
14
-
<h4>Optional title region</h4>
15
-
<p>The title introduces the content of your dialog. It can, for example, identify the name of a
16
-
setting that the user is about to change, or request a decision.</p>
17
-
</li>
18
-
<li>
19
-
<h4>Content area</h4>
20
-
<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as
21
-
sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system
22
-
settings. In other cases, such as alerts, the content may consist solely of text that provides
23
-
further context for a user decision.</p>
24
-
</li>
25
-
<li>
26
-
<h4>Action buttons</h4>
27
-
<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely
28
-
action. However, if the options consist of specific actions such as Close or Wait rather than
29
-
a confirmation or cancellation of the action described in the content, then all the buttons
30
-
should be active verbs. As a rule, the dismissive action of a dialog is always on the left
31
-
whereas the affirmative actions are on the right.</p>
32
-
</li>
13
+
<li>
14
+
<h4>Optional title region</h4>
15
+
<p>The title introduces the content of your dialog. It can, for example, identify the name of a
16
+
setting that the user is about to change, or request a decision.</p>
17
+
</li>
18
+
<li>
19
+
<h4>Content area</h4>
20
+
<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as
21
+
sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system
22
+
settings. In other cases, such as alerts, the content may consist solely of text that provides
23
+
further context for a user decision.</p>
24
+
</li>
25
+
26
+
<li>
27
+
<h4>Action buttons</h4>
28
+
<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs. Order actions following these rules:</p>
29
+
<ul>
30
+
31
+
<li>The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.</li>
32
+
<li>The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.</li>
<p>When an operation of interest to the user is taking place over a relatively long period of time,
5
-
provide visual feedback that it's still happening and in the process of being completed.</p>
6
-
<h2 id="progress">Progress</h2>
4
+
<p>Progress bars and activity indicators signal to users that something is happening that will take a moment.</p>
5
+
<h2 id="progress">Progress bars</h2>
7
6
8
-
<p>If you know the percentage of the operation that has been completed, use a determinate progress bar
9
-
to give the user a sense of how much longer it will take.</p>
7
+
<p>Progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take.</p>
<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower
14
-
value than a previous value, or using the same progress bar to represent the progress of multiple
15
-
events, since doing so makes the display meaningless. If you're not sure how long a particular
16
-
operation will take, use an indeterminate progress indicator.</p>
11
+
<p>A progress bar should always fill from 0% to 100% and never move backwards to a lower value. If multiple operations are happening in sequence, use the progress bar to represent the delay as a whole, so that when the bar reaches 100%, it doesn't return back to 0%.</p>
17
12
18
13
<div class="vspace size-2"> </div>
19
14
@@ -22,12 +17,11 @@ operation will take, use an indeterminate progress indicator.</p>
22
17
Progress bar in Holo Dark and Holo Light.
23
18
</div>
24
19
25
-
<h2 id="activity">Activity</h2>
20
+
<h2 id="activity">Activity indicators</h2>
26
21
27
-
<p>If you don't know how much longer an operation will continue, use an indeterminate progress
28
-
indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the
29
-
available space.</p>
22
+
<p>Activity indicators are for operations of an indeterminate length. They ask users to wait a moment while something finishes up, without getting into specifics about what's happening behind the scenes.</p>
30
23
24
+
<p>Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. For example, the largest activity circle works well when displayed in a blank content area, but not in a smaller dialog box. Each operation should only be represented by one activity indicator.</p>
<li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4>
42
-
<p>
43
-
44
-
An indeterminate activity bar is used at the start of an application download because the Play Store
45
-
app hasn't been able to contact the server yet, and it's not possible to determine how long it will
46
-
take for the download to begin.
47
-
48
-
</p>
35
+
<li class="value-1"><h4>Activity bar</h4>
36
+
<p>In this example, an activity bar (in Holo Dark) appears when a user first requests a download. There's an unknown period of time when the download has not yet started. As soon as the download starts, this activity bar transforms into a progress bar.</p>
49
37
</li>
50
38
</ol>
51
39
@@ -61,19 +49,54 @@ take for the download to begin.
<li class="value-2"><h4>Activity circle (shown with the Holo Light theme)</h4>
52
+
<li class="value-2"><h4>Activity circle</h4>
53
+
<p>In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.</p>
54
+
<p>When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.</p>
65
55
<p>
66
-
67
-
An indeterminate activity circle is used in the Gmail application when a message is being
68
-
loaded because it's not possible to determine how long it will take to download the email.
<p>You should only use one activity indicator on screen per activity, and it should appropriately sized
78
-
for the surrounding context. For example, the largest activity circle works well when displayed in a
79
-
blank content area, but not in a smaller dialog box.</p>
72
+
<h2 id="custom-indicators">Custom indicators</h2>
73
+
<p>The standard progress bar and activity indicators work well for most situations and should be used whenever possible to provide a consistent experience across Android. However, some situations may call for something more custom.</p>
74
+
75
+
<p>Here's an example:<br>
76
+
In all of the Google Play apps (Music, Books, Movies, Magazines), we wanted the current download state of each item to be visible at all times at the top-level screen. These states are:
77
+
<ul>
78
+
<li>Not downloaded</li>
79
+
<li>Temporarily downloaded (automatically cached by the app)</li>
80
+
<li>Permanently downloaded on the device at the user's request</li>
81
+
</ul>
82
+
</p>
83
+
<p>We also needed to indicate progress from one download state to another, because downloading is not instantaneous.</p>
84
+
<p>This presented a challenge, because the Google Play apps use a variety of different layouts, and some of them are highly space-constrained. We didn't want this information to clutter the top-level screens, or compete too much with the cover art.</p>
85
+
<p>So we designed a custom indicator that could show all of the information in a tiny footprint, with the flexibility to appear on top of content if necessary.</p>
<p>The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart.</p>
Across Google Play apps with different layouts, the same custom indicator appears with each item. It communicates download state as well as progress, in a compact package that can be incorporated into any screen design.
98
+
</div>
99
+
</div>
100
+
</div>
101
+
102
+
<p>If you find that the standard indicators aren't meeting your needs (due to space constraints, state complexities), by all means design your own. Make it feel like part of the Android family by injecting some of the visual characteristics of the standard indicators. In this example, we carried over the circular shape, the same shade of blue, and the flat and simple style.</p>
<p>The Android Design Team was pleased to present five fantastic design-oriented sessions at Google I/O 2012. Visit these pages to view the videos and presentations from the conference.</p>
<h3 id="design-for-success"><a href="https://developers.google.com/events/io/sessions/gooio2012/112/">Android Design for Success</a></h3>
8
+
<p>You have a great idea for an Android app. You want it to stand out among hundreds of thousands. You want your users to love it and tell everyone they know. The Android User Experience team is here to help. We talk about the Android Design guide and other tricks of the trade for creating apps that delight users and help them accomplish their goals. No design background is required.</p>
9
+
10
+
<h3 id="design-for-engineers"><a href="https://developers.google.com/events/io/sessions/gooio2012/1204/">Android Design for Engineers</a></h3>
11
+
<p>Design isn't black magic, it's a field that people can learn. In this talk two elite designers from Google give you an advanced crash course in interactive and visual design. Topics include mental models, natural mappings, metaphors, mode errors, visual hierarchies, typography and gestalt principles. Correctly applied, this knowledge can drastically improve the quality of your work.</p>
12
+
13
+
<h3 id="navigation-in-android"><a href="https://developers.google.com/events/io/sessions/gooio2012/114/">Navigation in Android</a></h3>
14
+
<p>An app is useless if people can't find their way around it. Android introduced big navigation-support changes in 3.0 and 4.0. The Action Bar offers a convenient control for Up navigation, the Back key's behavior became more consistent within tasks, and the Recent Tasks UI got an overhaul. In this talk, we discuss how and why we got where we are today, how to think about navigation when designing your app's user experience, and how to write apps that offer effortless navigation in multiple Android versions.</p>
15
+
16
+
<h3 id="now-what"><a href="https://developers.google.com/events/io/sessions/gooio2012/115/">So You've Read the Design Guide; Now What?</a></h3>
17
+
<p>The Android Design Guide describes how to design beautiful Android apps, but not how to build them. In this talk we give practical tips for how to apply fit & finish as you implement your design, we show you how to avoid some common pitfalls, we describe some useful patterns, and show how tools can help.</p>
18
+
19
+
<h3 id="playing-with-patterns"><a href="https://developers.google.com/events/io/sessions/gooio2012/131/">Playing with Patterns</a></h3>
20
+
<p>Best-in-class application designers and developers talk about their experience in developing for Android, showing screenshots from their app, exploring the challenges they faced, and offering creative solutions congruent with the Android Design guide. Guests are invited to show examples of visual and interaction patterns in their application that manage to keep it simultaneously consistent and personal.</p>
21
+
22
+
<p>Videos for the entire Design Track can also be found on the <a href="http://www.youtube.com/playlist?list=PL54FA004D676C3EE9">Android Developers Channel</a> on YouTube.</p>
0 commit comments