O documento apresenta os princípios e componentes da interface Metro para Windows Phone, incluindo layouts, gestos, ícones e processos de desenvolvimento. O objetivo é inspirar os designers a criarem experiências de usuário consistentes com a linguagem Metro, enquanto mantêm sua própria identidade e estilo.

1. Interface Metro para
Windows Phone
Manoel dos Santos

2. me
User Experience Designer
manoeldossantos@gmail.com
@manoeldossantos
blogs.solidq.com/msantos

3. agenda
• A Interface Metro
• Layout
• Interação
• Criação

5. metro

6. metro no windows phone

7. metro no zune HD

8. metro no desktop

9. metro no xbox

10. metro no windows 8

11. Windows Phone, I’m your father

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

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

16. duelo de titãs

17. a interface metro

18. início

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

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

22. gestos

23. layouts

24. panorama

25. pivot

26. listas

27. barra da aplicação e de menu

28. menu contextual

29. ícones

30. processo de desenvolvimento
concept visual design interactive design development
front end dev
Mão
Sketchflow

31. demo

32. benchmarking

36. links
Design templates
http://wp7designtemplates.codeplex.com/
Sketchflow templates
http://wp7sketchflow.codeplex.com/
Cheatsheet
http://nordkapp.fi/blog/2011/05/wp7-for-designers-cheatsheet/
User Experience Design Guidelines
http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx
Stencil Kit
http://www.uistencils.com/products/windows-phone-stencil-kit

37. perguntas?
manoeldossantos@gmail.com
@manoeldossantos