Morton 16 de agosto de 2012 a las 02.22
   Imprimir artículo
elWebmaster.com

C├│mo dise├▒ar una aplicaci├│n para Android – 1┬║ parte


android-wideAndroid es una plataforma atractiva para desarrolladores, pero no todos los diseñadores comparten este entusiasmo. Crear una aplicación que conserve un buen look and feel en los variados dispositivos en los que puede ser usada, con sus distintas resoluciones y aspectos, no es nada fácil.

El dise├▒o visual es muy importante a la hora de que el usuario perciba la calidad de nuestra aplicaci├│n. Incluso mejora la usabilidad de la misma. Muchos desarrolladores utilizan patrones para su interfaz de usuario, mientras que los desarrolladores con conocimientos de dise├▒o visual. Entregar mock-ups de alta calidad y gu├şas claras para los desarrolladores es la mejor manera de proveer una experiencia est├ęticamente agradable al usuario final.

Android es una plataforma de muchas densidades distintas de pantalla. No hay un set de resoluciones objetivo. No siempre es práctico optimizar los assets gráficos a mano por cada densidad. La plataforma puede escalar recursos de manera aceptable. Sin embargo, siempre vale la pena realizar pruebas en dispositivos de baja gama y optimizar recursos que no escalen bien.

da_density

Los estados t├íctiles proveen importante confirmaci├│n de los clic y las selecciones. Cuando personalices widgets como por ejemplo, botones, es importante crear versiones dibujables por cada estado necesario (como default, en foco, presionado y deshabilitado). El estado “en foco” es feedback esencial para el usuario en dispositivos con pad direccional o trackball.

El tama├▒o tambi├ęn importa. Las pantallas t├íctiles son imprecisas y los propios dedos nos impiden ver la misma interfaz con la que intentamos interactuar.
Los objetivos táctiles deben ser al menos de 45 pixeles de densidad en ancho y alto.

da_roboto

Android tiene dos fuentes de texto: Droid Sans y Roboto. Roboto fue lanzado junto con Ice Cream Sandwich (Android 4). Ha sido comparado con la fuente Helvetica, pero es algo m├ís condensada, lo que es ideal para peque├▒as pantallas. Esto no significa que est├ęs limitado a Roboto o Droid Sans. Cualquier fuente puede ser empacada junto con la aplicaci├│n en formato TTF.

Los 9-patch permiten que los PNGs se estiren y escalen bien en maneras predefinidas. Marcas a lo largo de los limites superiores e inferiores definen las areas estirables. Los 9-patch son un recurso esencial para crear y personalizar widgets en tu interfaz de usuario. Es posible crear 9-patchs manualmente, pero el SDK de Android viene con una sencilla herramienta llamada Draw 9-patch. Esto hace mucho más rápido y fácil convertir PNG regulares en 9-patch. Esto logra resaltar las areas estirables y muestra una vista previa de los dibujables resultantes con diferentes anchos y altos.

da_draw9patch

Algunos temen que apegarse a patrones de diseño de interfaces ya reconocidos harán a su aplicación menos distinguida. Por el contrario, los patrones como la barra de acción se vuelven ubicuos, y se funden con el fondo. Los usuarios evitarán perder tiempo preguntándose cómo usar una aplicación y podrán dedicarlo a solucionar su problema. La experiencia es mucho más valuable por la marca que por una interfaz que intenta ser única sin otro objetivo claro.

da_color

La marca puede ser expresada a trav├ęs del dise├▒o de los ├şconos, de los widgets, as├ş como a trav├ęs de la elecci├│n de colores y de fuentes. La personalizaci├│n sutil de una interfaz est├índar puede conseguir un perfecto balance entre consistencia y valor.

Esto es todo por esta semana ¡Pero continuaremos en la próxima!

Fuente original del art├şculo: Smashing Magazine
Traducci├│n realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. Dise├▒o de pagina web dice:

    Muy buenooooo!!!!

  2. BaseKit dice:

    Muy buena informaci├│n, gracias por compartirla!

  3. Ebook dice:

    Muy ├║til! Gracias

  4. andres murcia dice:

    Si se hace en flash y luego se exporta como html 5 o se hace en adobe edge esta mal o es valido?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder