1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Design Principles
</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
<link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
<link rel="stylesheet" href="../static/default.css">
</head>
<body>
<div id="page-container">
<div id="page-header"><a href="../index.html">Android Design</a></div>
<div id="main-row">
<ul id="nav">
<li class="nav-section">
<div class="nav-section-header"><a href="../index.html">Get Started</a></div>
<ul>
<li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
<li><a href="../get-started/principles.html">Design Principles</a></li>
<li><a href="../get-started/ui-overview.html">UI Overview</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../style/index.html">Style</a></div>
<ul>
<li><a href="../style/devices-displays.html">Devices and Displays</a></li>
<li><a href="../style/themes.html">Themes</a></li>
<li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
<li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
<li><a href="../style/typography.html">Typography</a></li>
<li><a href="../style/color.html">Color</a></li>
<li><a href="../style/iconography.html">Iconography</a></li>
<li><a href="../style/writing.html">Writing Style</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
<ul>
<li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
<li><a href="../patterns/gestures.html">Gestures</a></li>
<li><a href="../patterns/app-structure.html">App Structure</a></li>
<li><a href="../patterns/navigation.html">Navigation</a></li>
<li><a href="../patterns/actionbar.html">Action Bar</a></li>
<li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
<li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
<li><a href="../patterns/selection.html">Selection</a></li>
<li><a href="../patterns/notifications.html">Notifications</a></li>
<li><a href="../patterns/compatibility.html">Compatibility</a></li>
<li><a href="../patterns/pure-android.html">Pure Android</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
<ul>
<li><a href="../building-blocks/tabs.html">Tabs</a></li>
<li><a href="../building-blocks/lists.html">Lists</a></li>
<li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
<li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
<li><a href="../building-blocks/spinners.html">Spinners</a></li>
<li><a href="../building-blocks/buttons.html">Buttons</a></li>
<li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
<li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
<li><a href="../building-blocks/progress.html">Progress & Activity</a></li>
<li><a href="../building-blocks/switches.html">Switches</a></li>
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
</li>
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
</ul>
<div id="content">
<div class="layout-content-row content-header">
<div class="layout-content-col span-9">
<h2>Design Principles</h2>
</div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
<p>These design principles were developed by and for the Android User Experience Team to keep users'
best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
with purpose.</p>
<h2 id="enchant-me">Enchant Me</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Delight me in surprising ways</h4>
<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful
force is at hand.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_delight.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Real objects are more fun than buttons and menus</h4>
<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
needed to perform a task while making it more emotionally satisfying.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_real_objects.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Let me make it mine</h4>
<p>People love to add personal touches because it helps them feel at home and in control. Provide
sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
primary tasks.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_make_it_mine.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Get to know me</h4>
<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
over, place previous choices within easy reach.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_get_to_know_me.png">
</div>
</div>
<h2 id="simplify-my-life">Simplify My Life</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Keep it brief</h4>
<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_keep_it_brief.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Pictures are faster than words</h4>
<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
than words.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_pictures.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Decide for me but let me have the final say</h4>
<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
unhappy. Just in case you get it wrong, allow for 'undo'.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_decide_for_me.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Only show what I need when I need it</h4>
<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_information_when_need_it.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>I should always know where I am</h4>
<p>Give people confidence that they know their way around. Make places in your app look distinct and
use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_navigation.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Never lose my stuff</h4>
<p>Save what people took time to create and let them access it from anywhere. Remember settings,
personal touches, and creations across phones, tablets, and computers. It makes upgrading the
easiest thing in the world.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_never_lose_stuff.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>If it looks the same, it should act the same</h4>
<p>Help people discern functional differences by making them visually distinct rather than subtle.
Avoid modes, which are places that look similar but act differently on the same input.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_looks_same.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Only interrupt me if it's important</h4>
<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_important_interruption.png">
</div>
</div>
<h2 id="make-me-amazing">Make Me Amazing</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Give me tricks that work everywhere</h4>
<p>People feel great when they figure things out for themselves. Make your app easier to learn by
leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture
may be a good navigational shortcut.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_tricks.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>It's not my fault</h4>
<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
app. If something goes wrong, give clear recovery instructions but spare them the technical details.
If you can fix it behind the scenes, even better.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_error.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Sprinkle encouragement</h4>
<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
even if it's just a subtle glow.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_sprinkle_encouragement.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Do the heavy lifting for me</h4>
<p>Make novices feel like experts by enabling them to do things they never thought they could. For
example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in
only a few steps.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_heavy_lifting.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Make important things fast</h4>
<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_make_important_fast.png">
</div>
</div>
<div class="layout-content-row content-footer">
<div class="paging-links layout-content-col span-9"> </div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
</div>
</div>
<div id="page-footer">
<p id="copyright">
Except as noted, this content is licensed under
<a href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5</a>.<br>
For details and restrictions, see the
<a href="http://developer.android.com/license.html">Content License</a>.
</p>
<p>
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
</p>
</div>
</div>
<script src="../static/jquery-1.6.2.min.js"></script>
<script>
var SITE_ROOT = '../';
</script>
<script src="../static/default.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5831155-1");
pageTracker._trackPageview();
</script>
</body>
</html>
|
