1page.title=Princípios de projeto para Android
2@jd:body
3
4<p>Estes princípios de projeto foram desenvolvidos pela e para a Equipe de Experiência do Usuário do Android
5para manter os interesses dos usuários em mente.
6Para desenvolvedores e projetistas do Android, eles continuam a
7definir as diretrizes de projeto mais detalhadas para diferentes
8tipos de dispositivo.</p>
9
10<p>
11Considere estes princípios ao aplicar
12suas próprias criatividade e mentalidade de projeto. Desvie-se de forma objetiva.
13</p>
14
15<h2 id="enchant-me">Encante-me</h2>
16
17<div class="layout-content-row">
18  <div class="layout-content-col span-7">
19
20<h4 id="delight-me">Agrade-me de formas surpreendentes</h4>
21<p>Uma bela superfície, uma animação cuidadosamente posicionada ou um efeito sonoro no momento certo
22 contribui para a boa experiência. Efeitos sutis contribuem para uma sensação de facilidade e de que algo
23poderoso está à mão.</p>
24
25  </div>
26  <div class="layout-content-col span-6">
27
28    <img src="{@docRoot}design/media/principles_delight.png">
29
30  </div>
31</div>
32
33<div class="vspace size-2">&nbsp;</div>
34
35<div class="layout-content-row">
36  <div class="layout-content-col span-7">
37
38<h4 id="real-objects-more-fun">Objetos reais são mais divertidos que botões e menus</h4>
39<p>Deixe que as pessoas manipulem e toquem diretamente em objetos no seu aplicativo. Isso reduz o esforço cognitivo
40necessário para realizar uma tarefa e torna o aplicativo mais emocionalmente satisfatório.</p>
41
42  </div>
43  <div class="layout-content-col span-6">
44
45    <img src="{@docRoot}design/media/principles_real_objects.png">
46
47  </div>
48</div>
49
50<div class="vspace size-2">&nbsp;</div>
51
52<div class="layout-content-row">
53  <div class="layout-content-col span-7">
54
55<h4 id="make-it-mine">Deixe-me torná-lo meu</h4>
56<p>As pessoas adoram adicionar toques pessoais, pois isso as ajuda a se sentirem à vontade e em controle. Forneça
57padrões sensatos e belos, mas também considere personalizações divertidas e opcionais que não
58prejudiquem as tarefas principais.</p>
59
60  </div>
61  <div class="layout-content-col span-6">
62
63    <img src="{@docRoot}design/media/principles_make_it_mine.png">
64
65  </div>
66</div>
67
68<div class="vspace size-2">&nbsp;</div>
69
70<div class="layout-content-row">
71  <div class="layout-content-col span-7">
72
73<h4 id="get-to-know-me">Conheça-me</h4>
74<p>Conheça as preferências das pessoas no decorrer do tempo. Em vez de pedir que façam as mesmas escolhas repetidamente,
75coloque escolhas anteriores em alcance fácil.</p>
76
77  </div>
78  <div class="layout-content-col span-6">
79
80    <img src="{@docRoot}design/media/principles_get_to_know_me.png">
81
82  </div>
83</div>
84
85<h2 id="simplify-my-life">Simplifique minha vida</h2>
86
87<div class="layout-content-row">
88  <div class="layout-content-col span-7">
89
90<h4 id="keep-it-brief">Seja breve</h4>
91<p>Use frases curtas com palavras simples. As pessoas provavelmente ignorarão frases longas.</p>
92
93  </div>
94  <div class="layout-content-col span-6">
95
96    <img src="{@docRoot}design/media/principles_keep_it_brief.png">
97
98  </div>
99</div>
100
101<div class="vspace size-2">&nbsp;</div>
102
103<div class="layout-content-row">
104  <div class="layout-content-col span-7">
105
106<h4 id="pictures-faster-than-words">Imagens são mais rápidas que palavras</h4>
107<p>Considere usar imagens para explicar ideias. Elas chamam a atenção das pessoas e podem ser muito mais eficientes
108que palavras.</p>
109
110  </div>
111  <div class="layout-content-col span-6">
112
113    <img src="{@docRoot}design/media/principles_pictures.png">
114
115  </div>
116</div>
117
118<div class="vspace size-2">&nbsp;</div>
119
120<div class="layout-content-row">
121  <div class="layout-content-col span-7">
122
123<h4 id="decide-for-me">Decida por mim, mas deixe que eu tenha a palavra final</h4>
124<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
125incomodadas. Caso suponha errado, permita "desfazer".</p>
126
127  </div>
128  <div class="layout-content-col span-6">
129
130    <img src="{@docRoot}design/media/principles_decide_for_me.png">
131
132  </div>
133</div>
134
135<div class="vspace size-2">&nbsp;</div>
136
137<div class="layout-content-row">
138  <div class="layout-content-col span-7">
139
140<h4 id="only-show-when-i-need-it">Mostre só o que preciso, quando eu precisar</h4>
141<p>As pessoas se sentem oprimidas quando veem coisas demais de uma vez. Detalhe tarefas e informações em partes
142pequenas e digeríveis. Oculte opções que não sejam essenciais no momento e ensine as pessoas à medida que avançam.</p>
143
144  </div>
145  <div class="layout-content-col span-6">
146
147    <img src="{@docRoot}design/media/principles_information_when_need_it.png">
148
149  </div>
150</div>
151
152<div class="vspace size-2">&nbsp;</div>
153
154<div class="layout-content-row">
155  <div class="layout-content-col span-7">
156
157<h4 id="always-know-where-i-am">Eu sempre devo saber onde estou</h4>
158<p>Dê às pessoas a confiança de saberem o que fazer. Faça com que os locais no seu aplicativo pareçam distintos
159e use transições para mostrar relacionamentos entre telas. Forneça feedback sobre tarefas em andamento.</p>
160
161  </div>
162  <div class="layout-content-col span-6">
163
164    <img src="{@docRoot}design/media/principles_navigation.png">
165
166  </div>
167</div>
168
169<div class="vspace size-2">&nbsp;</div>
170
171<div class="layout-content-row">
172  <div class="layout-content-col span-7">
173
174<h4 id="never-lose-my-stuff">Nunca perca as minhas coisas</h4>
175<p>Salve o que as pessoas criaram e deixe que elas acessem de qualquer lugar. Lembre-se de configurações,
176toques pessoais e criações entre celulares, tablets e computadores. Isso torna a atualização a
177coisa mais fácil do mundo.</p>
178
179  </div>
180  <div class="layout-content-col span-6">
181
182    <img src="{@docRoot}design/media/principles_never_lose_stuff.png">
183
184  </div>
185</div>
186
187<div class="vspace size-2">&nbsp;</div>
188
189<div class="layout-content-row">
190  <div class="layout-content-col span-7">
191
192<h4 id="looks-same-should-act-same">Se parece igual, deve agir da mesma forma</h4>
193<p>Ajude as pessoas a discernir diferenças funcionais tornando-as visualmente distintas, em vez de sutis.
194Evite que modos locais que agem de forma diferente sobre a mesma entrada se pareçam.</p>
195
196  </div>
197  <div class="layout-content-col span-6">
198
199    <img src="{@docRoot}design/media/principles_looks_same.png">
200
201  </div>
202</div>
203
204<div class="vspace size-2">&nbsp;</div>
205
206<div class="layout-content-row">
207  <div class="layout-content-col span-7">
208
209<h4 id="interrupt-only-if-important">Só me interrompa se for importante</h4>
210<p>Como um bom assistente pessoal, proteja as pessoas de informações não importantes. As pessoas querem ficar
211concentradas e, a não ser que seja crítica e dependente de tempo, uma interrupção pode ser irritante e frustrante.</p>
212
213  </div>
214  <div class="layout-content-col span-6">
215
216    <img src="{@docRoot}design/media/principles_important_interruption.png">
217
218  </div>
219</div>
220
221<h2 id="make-me-amazing">Faça com que eu seja incrível</h2>
222
223<div class="layout-content-row">
224  <div class="layout-content-col span-7">
225
226<h4 id="give-me-tricks">Dê-me truques que funcionem em qualquer lugar</h4>
227<p>As pessoas se sentem ótimas quando descobrem coisas sozinhas. Torne seu aplicativo mais inteligível ao
228aproveitar padrões visuais e memórias de outros aplicativos do Android. Por exemplo, o gesto de deslizar
229pode ser um bom atalho de navegação.</p>
230
231  </div>
232  <div class="layout-content-col span-6">
233
234    <img src="{@docRoot}design/media/principles_tricks.png">
235
236  </div>
237</div>
238
239<div class="vspace size-2">&nbsp;</div>
240
241<div class="layout-content-row">
242  <div class="layout-content-col span-7">
243
244<h4 id="its-not-my-fault">Não é culpa minha</h4>
245<p>Seja gentil sobre como solicita correções a pessoas. Elas querem se sentir inteligentes ao usar o seu
246aplicativo. Se alguma coisa der errada, dê instruções de recuperação claras, mas evite os detalhes técnicos.
247Se for possível corrigir em segundo plano, melhor ainda.</p>
248
249  </div>
250  <div class="layout-content-col span-6">
251
252    <img src="{@docRoot}design/media/principles_error.png">
253
254  </div>
255</div>
256
257<div class="vspace size-2">&nbsp;</div>
258
259<div class="layout-content-row">
260  <div class="layout-content-col span-7">
261
262<h4 id="sprinkle-encouragement">Espalhe motivação</h4>
263<p>Divida tarefas complexas em passos menores que possam ser realizados facilmente. Dê feedback sobre ações,
264mesmo que seja um brilho sutil.</p>
265
266  </div>
267  <div class="layout-content-col span-6">
268
269    <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">
270
271  </div>
272</div>
273
274<div class="vspace size-2">&nbsp;</div>
275
276<div class="layout-content-row">
277  <div class="layout-content-col span-7">
278
279<h4 id="do-heavy-lifting-for-me">Faça o trabalho pesado por mim</h4>
280<p>Faça com que novatos se sintam peritos possibilitando que façam coisas que nunca acharam possíveis. Por
281exemplo, atalhos que combinem vários efeitos de fotos podem fazer com que fotografias amadoras pareçam incríveis
282com apenas alguns passos.</p>
283
284  </div>
285  <div class="layout-content-col span-6">
286
287    <img src="{@docRoot}design/media/principles_heavy_lifting.png">
288
289  </div>
290</div>
291
292<div class="vspace size-2">&nbsp;</div>
293
294<div class="layout-content-row">
295  <div class="layout-content-col span-7">
296
297<h4 id="make-important-things-fast">Torne coisas importantes rápidas</h4>
298<p>Nem todas as ações são iguais. Decida o que é mais importante em seu aplicativo e torne fácil de encontrar e
299rá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>
300
301  </div>
302  <div class="layout-content-col span-6">
303
304    <img src="{@docRoot}design/media/principles_make_important_fast.png">
305
306  </div>
307</div>
308