Qué es el estilo Metro?
-
Upload
johnny-ordonez -
Category
Technology
-
view
1.527 -
download
4
description
Transcript of Qué es el estilo Metro?
![Page 1: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/1.jpg)
UI Design
Metro Style UX
Johnny Ordóñez
![Page 2: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/2.jpg)
![Page 3: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/3.jpg)
![Page 4: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/4.jpg)
![Page 5: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/5.jpg)
![Page 6: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/6.jpg)
![Page 7: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/7.jpg)
![Page 8: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/8.jpg)
![Page 9: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/9.jpg)
![Page 10: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/10.jpg)
![Page 11: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/11.jpg)
![Page 12: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/12.jpg)
![Page 13: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/13.jpg)
![Page 14: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/14.jpg)
![Page 15: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/15.jpg)
![Page 16: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/16.jpg)
Limpio, Ligero, Abierto, Rápido
Tipografía
Movimiento
Contenido
Auténticamente Digital
![Page 17: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/17.jpg)
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
![Page 18: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/18.jpg)
![Page 19: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/19.jpg)
![Page 20: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/20.jpg)
![Page 21: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/21.jpg)
![Page 22: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/22.jpg)
![Page 23: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/23.jpg)
![Page 24: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/24.jpg)
![Page 25: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/25.jpg)
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
![Page 26: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/26.jpg)
![Page 27: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/27.jpg)
Movimiento
Sentir al sistema vivo y con respuesta
Entrega un contexto para mejorar la usabilidad
Transición
Añade dimensión y profundidad
3
![Page 28: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/28.jpg)
![Page 29: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/29.jpg)
![Page 30: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/30.jpg)
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
![Page 31: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/31.jpg)
![Page 32: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/32.jpg)
![Page 33: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/33.jpg)
Auténticamente Digital
Directo
Interconectado
Mobile
5
Cloud connected
![Page 34: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/34.jpg)
![Page 35: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/35.jpg)
![Page 36: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/36.jpg)
![Page 37: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/37.jpg)
Color
Uso de color para deleitar al usuario
Uso de color para personalizar la experiencia
Uso de color para enfatizar jerarquía
![Page 38: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/38.jpg)
![Page 39: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/39.jpg)
![Page 40: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/40.jpg)
Tipografía
Crear palabras que
hagan sentirse
bienvenido
Prestar atención en el
peso, balance y
escala
![Page 41: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/41.jpg)
![Page 42: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/42.jpg)
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
![Page 43: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/43.jpg)
Fácil de usar
Familiar = Fácil de usar
Experiencia predecible y consistente
![Page 44: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/44.jpg)
Hardware
Botones del Hardware
Diseñar para que se
use con una mano
Teclados opcionales
![Page 45: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/45.jpg)
Gestos
Lenguaje diseñado para Touch
![Page 46: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/46.jpg)
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
![Page 47: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/47.jpg)
![Page 48: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/48.jpg)
![Page 49: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/49.jpg)
6
![Page 50: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/50.jpg)
![Page 51: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/51.jpg)
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
![Page 52: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/52.jpg)
Controles Comunes
![Page 53: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/53.jpg)
Barra de Aplicación
Hasta 4 iconos (Windows Phone)
No usar todos si no son
necesarios
![Page 54: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/54.jpg)
Panorama
Experiencia
enriquecida
Agrega múltiples
fuentes
![Page 55: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/55.jpg)
![Page 56: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/56.jpg)
![Page 57: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/57.jpg)
Iconografía
Los iconos deben ser
consistentes
Pruebe los iconos con el
usuario
Prestar atención al
contexto
![Page 58: Qué es el estilo Metro?](https://reader034.fdocuments.net/reader034/viewer/2022042518/5573ea29d8b42a3f058b459c/html5/thumbnails/58.jpg)