1. DISEÑO DE
INTERFACES
PARA ANDROID

2. QUEREMOS UNA APP

3. ANTES DE COMENZAR
Usuarios
Viabilidad comercial
Entorno(s) de uso
Ergonomía
Limitaciones

4. ANDROID HOY
Información fragmentada
Menos recursos que los
que existen para iOS
Android Design
bit.ly/android-guidelines

5. ESTILO
Desde Honeycomb el diseño de Android es
más limpio, más moderno y más geométrico
Diferenciado del realismo táctil de iOS y del
estilo “señalético” de Windows Phone

6. CONSIDERACIONES
No copiar un diseño de iOS en Android
Móvil ≠ computadora de escritorio
Investigar, experimentar y compartir

7. vía @jamespearce
bit.ly/30_years

8. COMPONENTES

9. TABS

10. LISTAS

11. LISTAS EN MOSAICO

12. SCROLLING

13. SPINNERS

14. BOTONES

15. CAMPOS DE TEXTO

16. SLIDERS

17. PROGRESO / ACTIVIDAD

18. SWITCHES

19. PICKERS

20. DIÁLOGOS

21. ALERTAS

22. POPUPS

23. TOASTS

24. PANTALLAS

25. 320x240 px 128x160 px
176x220 px
320x320 px 240x320 px

26. TAMAÑOS Y DENSIDADES
Pantalla Densidad:
small ldpi (low)
normal mdpi (medium)
large hdpi (high)
xlarge (tablets) xhdpi (extra high)

27. 3:4:6:8 SCALING RATIO
Cambiar dimensiones de assets
Mantener todos los assets a 72 PPI

29. ESTRATEGIAS
Base: 320 x 533 px (ajustar layouts después)
Vectores y objetos inteligentes (Photoshop)
Reducir el uso de texturas y degradados
Colores sólidos y líneas
Retículas y espacio en blanco

32. RECORDAR
Paridad funcional
Diálogo DEV / DES
Testeo inicial
Themes de Android

33. MEJORES PRÁCTICAS

34. PATRONES
Soluciones probadas a problemas comunes
Ayudan a mantener la consistencia y
mejorar la experiencia de uso
Ejemplo: cómo descubrir la funcionalidad de
una app

35. bit.ly/invitations-patterns

36. Android Design Patterns Android UI Patterns Android Patterns
bit.ly/android-design-patterns bit.ly/android-ui-patterns bit.ly/android-patterns

37. PROTOTIPAR, PROTOTIPAR
Comenzar con prototipos en papel
bit.ly/android-prototype
Pencil para crear wireframes
bit.ly/pencil-project
Stencils para Pencil
bit.ly/pencil-stencils

39. Manage complexity
through conversation.
Josh Clark

40. RECURSOS

41. ASSETS
Android GUI PSD
bit.ly/android-gui-psd
Android Asset Studio
bit.ly/asset-studio

43. @MatiasDuarte
Director of Android User
Experience at Google

44. MÁS INFORMACIÓN
Android Design Guidelines (no oficial, para
Honeycomb) bit.ly/mm-android-design
Meaningful Transitions bit.ly/ui-animations
Mobile Design Pattern Gallery bit.ly/pattern-gallery
Mobile Web Best Practices bit.ly/mob-best-practices

45. linkd.in/ivanalarcon @ivanalarcon
ivánalarcón