Diseño de interfaces para Android

9,553 views

Published on

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,553
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
150
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Diseño de interfaces para Android

  1. 1. DISEÑO DEINTERFACESPARA ANDROID
  2. 2. QUEREMOS UNA APP
  3. 3. ANTES DE COMENZARUsuariosViabilidad comercialEntorno(s) de usoErgonomíaLimitaciones
  4. 4. ANDROID HOYInformación fragmentadaMenos recursos que losque existen para iOSAndroid Designbit.ly/android-guidelines
  5. 5. ESTILODesde Honeycomb el diseño de Android esmás limpio, más moderno y más geométricoDiferenciado del realismo táctil de iOS y delestilo “señalético” de Windows Phone
  6. 6. CONSIDERACIONESNo copiar un diseño de iOS en AndroidMóvil ≠ computadora de escritorioInvestigar, experimentar y compartir
  7. 7. vía @jamespearce bit.ly/30_years
  8. 8. COMPONENTES
  9. 9. TABS
  10. 10. LISTAS
  11. 11. LISTAS EN MOSAICO
  12. 12. SCROLLING
  13. 13. SPINNERS
  14. 14. BOTONES
  15. 15. CAMPOS DE TEXTO
  16. 16. SLIDERS
  17. 17. PROGRESO / ACTIVIDAD
  18. 18. SWITCHES
  19. 19. PICKERS
  20. 20. DIÁLOGOS
  21. 21. ALERTAS
  22. 22. POPUPS
  23. 23. TOASTS
  24. 24. PANTALLAS
  25. 25. 320x240 px 128x160 px 176x220 px320x320 px 240x320 px
  26. 26. TAMAÑOS Y DENSIDADES Pantalla Densidad: small ldpi (low) normal mdpi (medium) large hdpi (high) xlarge (tablets) xhdpi (extra high)
  27. 27. 3:4:6:8 SCALING RATIOCambiar dimensiones de assetsMantener todos los assets a 72 PPI
  28. 28. ESTRATEGIASBase: 320 x 533 px (ajustar layouts después)Vectores y objetos inteligentes (Photoshop)Reducir el uso de texturas y degradadosColores sólidos y líneasRetículas y espacio en blanco
  29. 29. RECORDARParidad funcionalDiálogo DEV / DESTesteo inicialThemes de Android
  30. 30. MEJORES PRÁCTICAS
  31. 31. PATRONESSoluciones probadas a problemas comunesAyudan a mantener la consistencia ymejorar la experiencia de usoEjemplo: cómo descubrir la funcionalidad deuna app
  32. 32. bit.ly/invitations-patterns
  33. 33. Android Design Patterns Android UI Patterns Android Patternsbit.ly/android-design-patterns bit.ly/android-ui-patterns bit.ly/android-patterns
  34. 34. 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
  35. 35. Manage complexity through conversation. Josh Clark
  36. 36. RECURSOS
  37. 37. ASSETSAndroid GUI PSDbit.ly/android-gui-psdAndroid Asset Studiobit.ly/asset-studio
  38. 38. @MatiasDuarteDirector of Android User Experience at Google
  39. 39. MÁS INFORMACIÓNAndroid Design Guidelines (no oficial, paraHoneycomb) bit.ly/mm-android-designMeaningful Transitions bit.ly/ui-animationsMobile Design Pattern Gallery bit.ly/pattern-galleryMobile Web Best Practices bit.ly/mob-best-practices
  40. 40. linkd.in/ivanalarcon @ivanalarcon ivánalarcón

×