Diseño de interfaces para Android

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