UI Design Metro Style     UXJohnny Ordóñez
Limpio, Ligero, Abierto, RápidoTipografíaMovimientoContenidoAuténticamente Digital
Limpio, Ligero, Abierto, Rápido                1  Fuerte reducción de elementos innecesarios  Enfocado en tareas primarias...
Tipografía                                             2  El tipo de letra debe ser hermoso, no sólo legible  Clara y simp...
Movimiento                                        3 Sentir al sistema vivo y con respuesta Entrega un contexto para mejora...
Contenido                                        4 El contenido es el rey Sin bordes (Chromeless) Deleitar con contenido e...
Auténticamente Digital   5 Directo Interconectado Mobile Cloud connected
Color Uso de color para deleitar al usuario Uso de color para personalizar la experiencia Uso de color para enfatizar jera...
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 vol...
Fácil de usar  Familiar = Fácil de usar  Experiencia predecible y consistente
Hardware Botones del Hardware Teclados opcionales Diseñar para que se use con una mano
Gestos Lenguaje diseñado para Touch
Press and hold to      Tap for primary action   Slide to drag                Swipe to selectlearn                         ...
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...
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
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Qué es el estilo Metro?
Próxima SlideShare
Cargando en…5
×

Qué es el estilo Metro?

1.923 visualizaciones

Publicado el

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.

Publicado en: Tecnología

Qué es el estilo Metro?

  1. 1. UI Design Metro Style UXJohnny Ordóñez
  2. 2. Limpio, Ligero, Abierto, RápidoTipografíaMovimientoContenidoAuténticamente Digital
  3. 3. 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
  4. 4. 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
  5. 5. Movimiento 3 Sentir al sistema vivo y con respuesta Entrega un contexto para mejorar la usabilidad Transición Añade dimensión y profundidad
  6. 6. 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
  7. 7. Auténticamente Digital 5 Directo Interconectado Mobile Cloud connected
  8. 8. Color Uso de color para deleitar al usuario Uso de color para personalizar la experiencia Uso de color para enfatizar jerarquía
  9. 9. Tipografía Crear palabras que hagan sentirse bienvenido Prestar atención en el peso, balance y escala
  10. 10. 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
  11. 11. Fácil de usar Familiar = Fácil de usar Experiencia predecible y consistente
  12. 12. Hardware Botones del Hardware Teclados opcionales Diseñar para que se use con una mano
  13. 13. Gestos Lenguaje diseñado para Touch
  14. 14. Press and hold to Tap for primary action Slide to drag Swipe to selectlearn Swipe from edge for Pinch to zoom system and app UI Rotate to rotate
  15. 15. 6
  16. 16. 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
  17. 17. Controles Comunes
  18. 18. Barra de Aplicación Hasta 4 iconos (Windows Phone) No usar todos si no son necesarios
  19. 19. Panorama Experiencia enriquecida Agrega múltiples fuentes
  20. 20. Iconografía Los iconos deben ser consistentes Pruebe los iconos con el usuario Prestar atención al contexto

×