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
|
page.title=Princípios de projeto para Android
@jd:body
<p>Estes princípios de projeto foram desenvolvidos pela e para a Equipe de Experiência do Usuário do Android
para manter os interesses dos usuários em mente.
Para desenvolvedores e projetistas do Android, eles continuam a
definir as diretrizes de projeto mais detalhadas para diferentes
tipos de dispositivo.</p>
<p>
Considere estes princípios ao aplicar
suas próprias criatividade e mentalidade de projeto. Desvie-se de forma objetiva.
</p>
<h2 id="enchant-me">Encante-me</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4 id="delight-me">Agrade-me de formas surpreendentes</h4>
<p>Uma bela superfície, uma animação cuidadosamente posicionada ou um efeito sonoro no momento certo
contribui para a boa experiência. Efeitos sutis contribuem para uma sensação de facilidade e de que algo
poderoso está à mão.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/principles_delight.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4 id="real-objects-more-fun">Objetos reais são mais divertidos que botões e menus</h4>
<p>Deixe que as pessoas manipulem e toquem diretamente em objetos no seu aplicativo. Isso reduz o esforço cognitivo
necessário para realizar uma tarefa e torna o aplicativo mais emocionalmente satisfatório.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="make-it-mine">Deixe-me torná-lo meu</h4>
<p>As pessoas adoram adicionar toques pessoais, pois isso as ajuda a se sentirem à vontade e em controle. Forneça
padrões sensatos e belos, mas também considere personalizações divertidas e opcionais que não
prejudiquem as tarefas principais.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="get-to-know-me">Conheça-me</h4>
<p>Conheça as preferências das pessoas no decorrer do tempo. Em vez de pedir que façam as mesmas escolhas repetidamente,
coloque escolhas anteriores em alcance fácil.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/principles_get_to_know_me.png">
</div>
</div>
<h2 id="simplify-my-life">Simplifique minha vida</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4 id="keep-it-brief">Seja breve</h4>
<p>Use frases curtas com palavras simples. As pessoas provavelmente ignorarão frases longas.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="pictures-faster-than-words">Imagens são mais rápidas que palavras</h4>
<p>Considere usar imagens para explicar ideias. Elas chamam a atenção das pessoas e podem ser muito mais eficientes
que palavras.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/principles_pictures.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4 id="decide-for-me">Decida por mim, mas deixe que eu tenha a palavra final</h4>
<p>Faça a melhor suposição e tome uma ação, em vez de primeiro perguntar. Escolhas e decisões demais deixam as pessoas
incomodadas. Caso suponha errado, permita "desfazer".</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="only-show-when-i-need-it">Mostre só o que preciso, quando eu precisar</h4>
<p>As pessoas se sentem oprimidas quando veem coisas demais de uma vez. Detalhe tarefas e informações em partes
pequenas e digeríveis. Oculte opções que não sejam essenciais no momento e ensine as pessoas à medida que avançam.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="always-know-where-i-am">Eu sempre devo saber onde estou</h4>
<p>Dê às pessoas a confiança de saberem o que fazer. Faça com que os locais no seu aplicativo pareçam distintos
e use transições para mostrar relacionamentos entre telas. Forneça feedback sobre tarefas em andamento.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/principles_navigation.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4 id="never-lose-my-stuff">Nunca perca as minhas coisas</h4>
<p>Salve o que as pessoas criaram e deixe que elas acessem de qualquer lugar. Lembre-se de configurações,
toques pessoais e criações entre celulares, tablets e computadores. Isso torna a atualização a
coisa mais fácil do mundo.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="looks-same-should-act-same">Se parece igual, deve agir da mesma forma</h4>
<p>Ajude as pessoas a discernir diferenças funcionais tornando-as visualmente distintas, em vez de sutis.
Evite que modos locais que agem de forma diferente sobre a mesma entrada se pareçam.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="interrupt-only-if-important">Só me interrompa se for importante</h4>
<p>Como um bom assistente pessoal, proteja as pessoas de informações não importantes. As pessoas querem ficar
concentradas e, a não ser que seja crítica e dependente de tempo, uma interrupção pode ser irritante e frustrante.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/principles_important_interruption.png">
</div>
</div>
<h2 id="make-me-amazing">Faça com que eu seja incrível</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4 id="give-me-tricks">Dê-me truques que funcionem em qualquer lugar</h4>
<p>As pessoas se sentem ótimas quando descobrem coisas sozinhas. Torne seu aplicativo mais inteligível ao
aproveitar padrões visuais e memórias de outros aplicativos do Android. Por exemplo, o gesto de deslizar
pode ser um bom atalho de navegação.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/principles_tricks.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4 id="its-not-my-fault">Não é culpa minha</h4>
<p>Seja gentil sobre como solicita correções a pessoas. Elas querem se sentir inteligentes ao usar o seu
aplicativo. Se alguma coisa der errada, dê instruções de recuperação claras, mas evite os detalhes técnicos.
Se for possível corrigir em segundo plano, melhor ainda.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/principles_error.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4 id="sprinkle-encouragement">Espalhe motivação</h4>
<p>Divida tarefas complexas em passos menores que possam ser realizados facilmente. Dê feedback sobre ações,
mesmo que seja um brilho sutil.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="do-heavy-lifting-for-me">Faça o trabalho pesado por mim</h4>
<p>Faça com que novatos se sintam peritos possibilitando que façam coisas que nunca acharam possíveis. Por
exemplo, atalhos que combinem vários efeitos de fotos podem fazer com que fotografias amadoras pareçam incríveis
com apenas alguns passos.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/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 id="make-important-things-fast">Torne coisas importantes rápidas</h4>
<p>Nem todas as ações são iguais. Decida o que é mais importante em seu aplicativo e torne fácil de encontrar e
rápido de usar, como o botão do obturador em uma câmera ou o botão de pausa em um reprodutor de música.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/principles_make_important_fast.png">
</div>
</div>
|