UI Design
Metro Style UX
Johnny Ordóñez
Limpio, Ligero, Abierto, Rápido
Tipografía
Movimiento
Contenido
Auténticamente Digital
Limpio, Ligero, Abierto, Rápido
Fuerte reducción de elementos innecesarios
Enfocado en tareas primarias
Hacer más con menos
Uso del espacio en blanco
Que se sienta rápido y activo
1
Tipografía
El tipo de letra debe ser hermoso, no sólo legible
Clara y simple
Sensibilidad con el balance, escala y peso
Denota ubicación y mejora la navegabilidad
2
Movimiento
Sentir al sistema vivo y con respuesta
Entrega un contexto para mejorar la usabilidad
Transición
Añade dimensión y profundidad
3
Contenido
El contenido es el rey
Sin bordes (Chromeless)
Deleitar con contenido en lugar de decoración
Reducir elementos visuales que no sean
contenido
4
Interacción directa con el contenido
Auténticamente Digital
Directo
Interconectado
Mobile
5
Cloud connected
Color
Uso de color para deleitar al usuario
Uso de color para personalizar la experiencia
Uso de color para enfatizar jerarquía
Tipografía
Crear palabras que
hagan sentirse
bienvenido
Prestar atención en el
peso, balance y
escala
Movimiento
Usar el movimiento para deleitar
Enfatizar o no el flujo de la aplicación
Dar espacio: entre más se use, se volverá menos
especial
Fácil de usar
Familiar = Fácil de usar
Experiencia predecible y consistente
Hardware
Botones del Hardware
Diseñar para que se
use con una mano
Teclados opcionales
Gestos
Lenguaje diseñado para Touch
Press and hold to
learn
Swipe to select Slide to drag Tap for primary action
Pinch to zoom Rotate to rotate Swipe from edge for
system and app UI
6
Touch
9mm es el tamaño recomendado
para el destino táctil
7mm es el tamaño mínimo para
el destino táctil
El espacio mínimo entre
elementos es de 2mm
Controles Comunes
Barra de Aplicación
Hasta 4 iconos (Windows Phone)
No usar todos si no son
necesarios
Panorama
Experiencia
enriquecida
Agrega múltiples
fuentes
Iconografía
Los iconos deben ser
consistentes
Pruebe los iconos con el
usuario
Prestar atención al
contexto
Top Related