diseño de interfaces para android
DESCRIPTION
TRANSCRIPT
DISEÑO DEINTERFACESPARA ANDROID
QUEREMOS UNA APP
ANTES DE COMENZAR
Usuarios
Viabilidad comercial
Entorno(s) de uso
Ergonomía
Limitaciones
ANDROID HOY
Información fragmentada
Menos recursos que los
que existen para iOS
Android Design
bit.ly/android-guidelines
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
CONSIDERACIONES
No copiar un diseño de iOS en Android
Móvil ≠ computadora de escritorio
Investigar, experimentar y compartir
vía @jamespearce
bit.ly/30_years
COMPONENTES
TABS
LISTAS
LISTAS EN MOSAICO
SCROLLING
SPINNERS
BOTONES
CAMPOS DE TEXTO
SLIDERS
PROGRESO / ACTIVIDAD
SWITCHES
PICKERS
DIÁLOGOS
ALERTAS
POPUPS
TOASTS
PANTALLAS
128x160 px
176x220 px
240x320 px320x320 px
320
x24
0 p
x
TAMAÑOS Y DENSIDADES
Pantalla
small
normal
large
xlarge (tablets)
Densidad:
ldpi (low)
mdpi (medium)
hdpi (high)
xhdpi (extra high)
3:4:6:8 SCALING RATIO
Cambiar dimensiones de assets
Mantener todos los assets a 72 PPI
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
RECORDAR
Paridad funcional
Diálogo DEV / DES
Testeo inicial
Themes de Android
MEJORES PRÁCTICAS
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
bit.ly/invitations-patterns
Android Design Patterns
bit.ly/android-design-patterns
Android UI Patterns
bit.ly/android-ui-patterns
Android Patterns
bit.ly/android-patterns
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
Manage complexitythrough conversation.
Josh Clark
RECURSOS
ASSETS
Android GUI PSD
bit.ly/android-gui-psd
Android Asset Studio
bit.ly/asset-studio
@MatiasDuarte
Director of Android User Experience at Google
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
linkd.in/ivanalarcon
ivánalarcónivánalarcón
@ivanalarcon