Qué es el estilo Metro?

1,926 views
1,732 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,926
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×