1 page.title=Principios de diseo para Android 2 @jd:body 3 4 <p>Estos principios de diseo fueron creados por el 5 equipo de experiencia del usuario de Android para su propio uso, con el fin de tener siempre en cuenta lo mejor para los usuarios. 6 En cuanto a los desarrolladores y diseadores de Android, continan 7 utilizando las pautas de diseo ms detalladas para los diferentes 8 tipos de dispositivos.</p> 9 10 <p> 11 Tenga en cuenta estos principios cuando ponga en prctica su propia 12 creatividad e ideas de diseo. Desvese de lo tradicional con un propsito. 13 </p> 14 15 <h2 id="enchant-me">Cautvame</h2> 16 17 <div class="layout-content-row"> 18 <div class="layout-content-col span-7"> 19 20 <h4 id="delight-me">Delitame de formas sorprendentes</h4> 21 <p>Una superficie atractiva, una animacin colocada en el lugar correcto o un efecto de sonido bien sincronizado suelen ser experiencias 22 placenteras. Los efectos sutiles contribuyen a crear un sentimiento de facilidad y la sensacin de que se cuenta con una fuerza 23 poderosa.</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"> </div> 34 35 <div class="layout-content-row"> 36 <div class="layout-content-col span-7"> 37 38 <h4 id="real-objects-more-fun">Los objetos reales son ms divertidos que los botones y los mens</h4> 39 <p>Permita que los usuarios toquen y manipulen directamente los objetos de su aplicacin. Esto reduce el esfuerzo cognitivo 40 que se necesita para llevar a cabo una tarea que resulte satisfactoria a nivel emocional.</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"> </div> 51 52 <div class="layout-content-row"> 53 <div class="layout-content-col span-7"> 54 55 <h4 id="make-it-mine">Permteme darle un toque personal</h4> 56 <p>A los usuarios les gusta agregar toques personales, ya que esto los ayuda a sentirse cmodos y a sentir que tienen el control. Ofrezca 57 opciones predeterminadas prcticas y atractivas, pero tambin tenga en cuenta personalizaciones opcionales y divertidas que no entorpezcan las 58 tareas principales.</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"> </div> 69 70 <div class="layout-content-row"> 71 <div class="layout-content-col span-7"> 72 73 <h4 id="get-to-know-me">Conceme</h4> 74 <p>Con el paso del tiempo, conozca las preferencias de los usuarios. En lugar de pedirles a los usuarios que elijan las mismas cosas una y otra 75 vez, permita que puedan acceder fcilmente a las opciones que ya eligieron antes.</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">Simplifica mi vida</h2> 86 87 <div class="layout-content-row"> 88 <div class="layout-content-col span-7"> 89 90 <h4 id="keep-it-brief">S breve</h4> 91 <p>Utilice frases cortas con palabras simples. Las personas tienden a omitir las oraciones largas.</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"> </div> 102 103 <div class="layout-content-row"> 104 <div class="layout-content-col span-7"> 105 106 <h4 id="pictures-faster-than-words">Las imgenes son ms prcticas que las palabras</h4> 107 <p>Considere la idea de utilizar imgenes para explicar las ideas. Las imgenes atraen la atencin de las personas y pueden ser mucho ms eficientes 108 que las palabras.</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"> </div> 119 120 <div class="layout-content-row"> 121 <div class="layout-content-col span-7"> 122 123 <h4 id="decide-for-me">Decide por m, pero permteme tener la ltima palabra</h4> 124 <p>Siga su instinto y acte sin preguntar primero. Tener que elegir demasiadas veces y tomar muchas decisiones hace que las personas 125 se sientan molestas. Permita que los usuarios puedan deshacer sus elecciones en caso de que no sean lo que ellos desean.</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"> </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">Solo mustrame lo que necesito, cuando lo necesito</h4> 141 <p>Los usuarios se sienten abrumados cuando se les presenta demasiada informacin al mismo tiempo. Divida las tareas y la informacin en fragmentos pequeos 142 y fciles de digerir. Oculte las opciones que no son fundamentales en el momento y capacite a los usuarios sobre la marcha.</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"> </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">Siempre debo saber dnde me encuentro</h4> 158 <p>Haga que los usuarios sientan que conocen el camino de regreso. Para ello, disee las distintas partes de su aplicacin de modo tal que se vean diferentes y 159 utilice transiciones para mostrar la relacin entre las pantallas. Proporcione comentarios sobre las tareas que estn en curso.</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"> </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 pierdas lo que es mo</h4> 175 <p>Guarde aquellas cosas que los usuarios crearon y permtales acceder a ellas desde cualquier lugar. Recuerde las configuraciones, 176 los toques personales y las creaciones en todos los telfonos, las tablets y las computadoras. Esta es la forma de hacer que las actualizaciones 177 sean lo ms simple del 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"> </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">Si se ve igual, debe funcionar de la misma manera</h4> 193 <p>Ayude a los usuarios a distinguir las diferencias funcionales al lograr que se vean diferentes en lugar de sutiles. 194 Evite los modos, que son sitios que lucen similar pero actan diferente ante la misma entrada.</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"> </div> 205 206 <div class="layout-content-row"> 207 <div class="layout-content-col span-7"> 208 209 <h4 id="interrupt-only-if-important">Solo interrmpeme si es importante</h4> 210 <p>Al igual que un buen asistente personal, evite a los usuarios los pormenores poco importantes. Las personas desean estar 211 concentradas y, a menos que sea fundamental y est sujeta a un plazo de tiempo, una interrupcin puede resultar agobiante y 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">Permteme ser asombroso</h2> 222 223 <div class="layout-content-row"> 224 <div class="layout-content-col span-7"> 225 226 <h4 id="give-me-tricks">Ofrceme trucos que funcionen en todos lados</h4> 227 <p>Las personas se sienten muy bien cuando descubren cosas por s mismos. Logre que su aplicacin sea ms simple de utilizar al 228 aprovechar los patrones visuales y la memoria muscular de otras aplicaciones de Android. Por ejemplo, el gesto de deslizar rpidamente 229 puede ser un buen acceso directo de navegacin.</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"> </div> 240 241 <div class="layout-content-row"> 242 <div class="layout-content-col span-7"> 243 244 <h4 id="its-not-my-fault">No es mi culpa</h4> 245 <p>Sea sutil cuando les solicite a los usuarios que realicen correcciones. Ellos desean sentirse inteligentes cuando usan la 246 aplicacin que usted cre. Si hacen algo mal, brndeles instrucciones claras de recuperacin, pero evite darles detalles tcnicos. 247 Sera incluso mejor que usted lo solucione en segundo plano.</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"> </div> 258 259 <div class="layout-content-row"> 260 <div class="layout-content-col span-7"> 261 262 <h4 id="sprinkle-encouragement">Fomenta lo simple</h4> 263 <p>Desglose las tareas complejas en pasos ms pequeos que se puedan cumplir fcilmente. Ofrezca comentarios sobre las acciones, 264 incluso si es simplemente un halago 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"> </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">Haz el trabajo pesado por m</h4> 280 <p>Haga que los principiantes se sientan como expertos al permitirles hacer cosas que pensaron que nunca podran hacer. Por 281 ejemplo, a travs de los accesos directos en los que se combinan mltiples efectos de fotografas, puede lograr que las fotografas de principiantes se vean maravillosas 282 en solo algunos pasos.</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"> </div> 293 294 <div class="layout-content-row"> 295 <div class="layout-content-col span-7"> 296 297 <h4 id="make-important-things-fast">Haz que lo importante sea rpido</h4> 298 <p>No todas las acciones son iguales. Decida qu es lo ms importante en su aplicacin y haga 299 que los usuarios lo puedan encontrar fcilmente y utilizar de forma rpida, como el obturador de una cmara o el botn de pausa de un reproductor de msica.</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
