Una presentación que hice hace un tiempo para dar a conocer el estilo Metro dentro de la empresa, para la creación de Windows RT Apps.

1. UI Design
Metro Style UX
Johnny Ordóñez

16. Limpio, Ligero, Abierto, Rápido
Tipografía
Movimiento
Contenido
Auténticamente Digital

17. Limpio, Ligero, Abierto, Rápido 1
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

25. Tipografía 2
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

27. Movimiento 3
Sentir al sistema vivo y con respuesta
Entrega un contexto para mejorar la usabilidad
Transición
Añade dimensión y profundidad

30. Contenido 4
El contenido es el rey
Sin bordes (Chromeless)
Deleitar con contenido en lugar de decoración
Reducir elementos visuales que no sean
contenido
Interacción directa con el contenido

33. Auténticamente Digital 5
Directo
Interconectado
Mobile
Cloud connected

37. Color
Uso de color para deleitar al usuario
Uso de color para personalizar la experiencia
Uso de color para enfatizar jerarquía

40. Tipografía
Crear palabras que
hagan sentirse
bienvenido
Prestar atención en el
peso, balance y
escala

42. 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

43. Fácil de usar
Familiar = Fácil de usar
Experiencia predecible y consistente

44. Hardware
Botones del Hardware
Teclados opcionales
Diseñar para que se
use con una mano

45. Gestos
Lenguaje diseñado para Touch

46. Press and hold to Tap for primary action Slide to drag Swipe to select
learn
Swipe from edge for
Pinch to zoom system and app UI Rotate to rotate

49. 6

51. 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

52. Controles Comunes

53. Barra de Aplicación
Hasta 4 iconos (Windows Phone)
No usar todos si no son
necesarios

54. Panorama
Experiencia
enriquecida
Agrega múltiples
fuentes

57. Iconografía
Los iconos deben ser
consistentes
Pruebe los iconos con el
usuario
Prestar atención al
contexto