O documento discute os princípios e diretrizes do design "Metro" da Microsoft para Windows Phone, Windows 8 e Xbox. O design Metro é descrito como "limpo, leve, aberto e rápido" com foco em "conteúdo, sem decoração". Ele também discute como os elementos da interface como telas iniciais, ícones, toque e gestos são implementados de forma consistente entre esses sistemas.

1. Metro para Windows Phone
Manoel dos
Santos
UX
blogs.
solidq.com/
msantos
manoeldossantos
@gmail.com @manoeldossanto
s

2. metro (ou seja lá como será o nome)

3. história

4. “evolução”

5. novas formas de interação

6. nova era
“Windows 8 sabe que
nós utilizamos
computadores de forma
diferente agora”
http://www.theverge.com/2012/8/16/3246185/this-is-my-next-windows-8

8. METRO IS OUR DESIGN
LANGUAGE. WE CALL IT METRO
BECAUSE IT’S MODERN AND
CLEAN. IT’S FAST AND IN
MOTION. IT’S ABOUT CONTENT
AND TYPOGRAPHY. AND IT’S
ENTIRELY AUTHENTIC.

11. princípios
“Clean”, leve, aberto e rápido
Tipografia é arte
Vivo, em movimento
Conteúdo, sem decoração
Autenticamente digital

13. windows phone

14. windows 8

15. xbox

16. desktop

17. web

18. além do visual
A experiência METRO

20. tela inicial

21. tela inicial

22. live tiles

23. live tiles

24. panorama

25. panorama

26. integração

27. integração

28. fluxo

29. fluxo

30. grid

31. grid

32. tipografia
Windows 8 Windows Phone
Segoe UI Segoe WP
elementos da interface tudo
Calibri
leitura/escrita
Cambria
leitura

33. tipografia

34. ícones

35. ícones
http://templarian.com/project_windows_phone_icons/

36. toque
Área recomendada para toque = 9mm
Área mínima para toque = 7mm
Espaço mínimo entre os elementos =
2mm
Conteúdo deve ocupar entre 60 e 100%
da área de toque

37. gestos

38. seja você mesmo
Inspire-se nos conceitos da
linguagem METRO,
mas procure balancear com
sua identidade e estilo.

39. branding

40. processo de design
Ícones, Fundos, Estilos, Identidade, Paleta de
cores, Tiles, SplashScreen
Design Visual
Protótipo interativo, Design Patterns, Gestos e
Animações, Áreas de toque
Design de Interação
Fluxo da aplicação, Documentação de AI,
Protótipos de baixa fidelidade
Arquitetura da Informação
Exploração, Brainstorm, Consolidação de ideias
Conceituação
Tema do App

41. softwares
Mão
Sketchflow

42. links
User Experience Design Guidelines - WinPhone
http://msdn.microsoft.com/en-us/library/hh202915.aspx
User Experience Design Guidelines – Win8
http://msdn.microsoft.com/pt-br/library/windows/apps/hh779072.aspx
Microsoft .toolbox Design Training
http://www.microsoft.com/design/toolbox/school

43. Q&A
?
manoel@outlook.com
@manoeldossantos
blogs.solidq.com/msantos