O documento discute o design para aplicativos no Windows Phone, abordando: 1) O estilo de interface moderna com inspirações, tipografia, grade e componentes; 2) Boas práticas de design como layout responsivo e fluxo de navegação; 3) Um estudo de caso de aplicativo.

1. DESIGN PARA
WINDOWS PHONE

2. AGENDA
modern style UI
boas práticas
estudo de caso de app
perguntas

3. MODERN STYLE UI
inspirações e princípios, tipografia segoe,
grid, gestos suportados, iconografia
minimalista e principais componentes

4. MODERN STYLE UI
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes

5. 5 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

6. • Sinalizações de Estações, Aeroportos, Espaços
Urbanísticos em geral;

7. • Sinalizações de Estações, Aeroportos, Espaços
Urbanísticos em geral;
• Sinalizações que possuem uma unidade visual,
não importa o lugar do mundo;

8. • Sinalizações de Estações, Aeroportos, Espaços
Urbanísticos em geral;
• Sinalizações que possuem uma unidade visual,
não importa o lugar do mundo;
• Sinalizações simples, objetivas, universais;

9. • Sinalizações de Estações, Aeroportos, Espaços
Urbanísticos em geral;
• Sinalizações que possuem uma unidade visual,
não importa o lugar do mundo;
• Sinalizações simples, objetivas, universais;
• Modern Style UI tem forte inspiração na
Sinalização Urbanística.

10. 10 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

11. • Bauhaus, berço do Design Gráfico Moderno:
Design Funcional e Objetivo;

12. • Bauhaus, berço do Design Gráfico Moderno:
Design Funcional e Objetivo;
• Estilo Tipográfico Internacional: Clareza,
Legibilidade e Objetividade;

13. • Bauhaus, berço do Design Gráfico Moderno:
Design Funcional e Objetivo;
• Estilo Tipográfico Internacional: Clareza,
Legibilidade e Objetividade;
• Uso de Grid e Tipografias Sans Serif.

14. 14 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

15. 15 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

16. 16 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

17. 17 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

18. 18 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

19. 19 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

20. 20 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

21. 21 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

22. 22 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

23. MODERN STYLE UI
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes

24. 24 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

25. MODERN STYLE UI
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes

26. GRID
• Tudo inicia com uma tela de
480x800 e densidade de 96dpi;

27. GRID
• Tudo inicia com uma tela de
480x800 e densidade de 96dpi;
• Este é o grid base do WP, tendo
12px e 25px como números
mágicos;

28. GRID
• Tudo inicia com uma tela de
480x800 e densidade de 96dpi;
• Este é o grid base do WP, tendo
12px e 25px como números
mágicos;
• Quadrados de 25 px com 12px de
espaçamento. 24 px de margens
laterais;

29. GRID
• Grid em coluna vertical;

30. GRID
• Grid em coluna vertical;
• Grid em coluna horizontal;

31. GRID
• Grid em coluna vertical;
• Grid em coluna horizontal;
• Outro grid em coluna vertical;

32. GRID
• Grid em coluna vertical;
• Grid em coluna horizontal;
• Outro grid em coluna vertical;
• Outro grid em coluna vertical;

33. GRID
• Grid em coluna vertical;
• Grid em coluna horizontal;
• Outro grid em coluna vertical;
• Outro grid em coluna vertical;
• Outro grid em coluna vertical;

34. GRID
• Grid na prática: Start Screen;

35. GRID
• Grid na prática: Start Screen;
• Grid na prática: Application
Screen;

36. GRID
• Grid na prática: Start Screen;
• Grid na prática: Application
Screen;
• Grid na prática: Hub People;

37. GRID
• Grid na prática: Start Screen;
• Grid na prática: Application
Screen;
• Grid na prática: Hub People;
• Grid na prática: Albums list.

38. MODERN STYLE UI
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes

39. GESTOS
• tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points

40. GESTOS
• tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points

41. GESTOS
• tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points

42. GESTOS
• tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points

43. GESTOS
• tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points

44. GESTOS
• tap
• double tap
• pan
• flick
• pinch/stretch
• touch+hold
• four points

45. GESTOS
• tap
• double tap
• pan
• flick
• pinch/stretch
• touch+hold
• four points

46. GESTOS
• tap
• double tap
• pan
• flick
• pinch/stretch
• touch+hold
• four points

47. MODERN STYLE UI
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes

49. MODERN STYLE UI
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes

50. COMPONENTES // PANORAMA

51. COMPONENTES // PANORAMA
• Panorama é um dos mais
emblemáticos componentes
WP;

52. COMPONENTES // PANORAMA
• Panorama é um dos mais
emblemáticos componentes
WP;
• 5 a 6 telas;

53. COMPONENTES // PANORAMA
• Panorama é um dos mais
emblemáticos componentes
WP;
• 5 a 6 telas;
• Visão de uma pequena parte
da próxima tela;

54. COMPONENTES // PANORAMA
• Panorama é um dos mais
emblemáticos componentes
WP;
• 5 a 6 telas;
• Visão de uma pequena parte
da próxima tela;
• É opcional;

55. COMPONENTES // PANORAMA
• Panorama é um dos mais
emblemáticos componentes
WP;
• 5 a 6 telas;
• Visão de uma pequena parte
da próxima tela;
• É opcional;
• Sempre deve ser a 1ª tela do
aplicativo;

56. COMPONENTES // PANORAMA
• Panorama é um dos mais
emblemáticos componentes
WP;
• 5 a 6 telas;
• Visão de uma pequena parte
da próxima tela;
• É opcional;
• Sempre deve ser a 1ª tela do
aplicativo;
• Conceito de Capa de Revista.

57. COMPONENTES // PANORAMA

58. COMPONENTES // PANORAMA

59. COMPONENTES // PANORAMA

60. COMPONENTES // PANORAMA

61. COMPONENTES // PIVOT

62. COMPONENTES // PIVOT
• Pode ser a 1ª tela do App
mas também outras;

63. COMPONENTES // PIVOT
• Pode ser a 1ª tela do App
mas também outras;
• 5 a 6 telas;

64. COMPONENTES // PIVOT
• Pode ser a 1ª tela do App
mas também outras;
• 5 a 6 telas;
• Divisão de conteúdos
semelhantes, como abas;

65. COMPONENTES // PIVOT
• Pode ser a 1ª tela do App
mas também outras;
• 5 a 6 telas;
• Divisão de conteúdos
semelhantes, como abas;
• O fundo é fixo;

66. COMPONENTES // APP BAR

67. COMPONENTES // APP BAR
• Até 4 botões;

68. COMPONENTES // APP BAR
• Até 4 botões;
• Diferente de
um TabMenu
do iOS;

69. COMPONENTES // APP BAR
• Até 4 botões;
• Diferente de
um TabMenu
do iOS;
• Contexto com a
tela atual;

70. COMPONENTES // APP BAR
• Até 4 botões;
• Diferente de
um TabMenu
do iOS;
• Contexto com a
tela atual;
• Oculta ou
recuada;

71. COMPONENTES // APP BAR
• Até 4 botões;
• Diferente de
um TabMenu
do iOS;
• Contexto com a
tela atual;
• Oculta ou
recuada;
• MenuItens.

72. COMPONENTES // BUTTON

73. COMPONENTES // CHECK BOX

74. COMPONENTES // RADIO

75. COMPONENTES // SLIDER

76. COMPONENTES // PROGRESS

77. COMPONENTES // LIST BOX

78. COMPONENTES // CONTEXT M

79. COMPONENTES // DATE P

80. COMPONENTES // DIALOGS

81. COMPONENTES
• Design Templates for Windows Phone
• http://go.microsoft.com/fwlink/?LinkId=266548
• Dev Center – Design Guides
• https://dev.windowsphone.com/en-us/design

82. BOAS PRÁTICAS
erros mais comuns, layout responsivo ao
tema, panorama x pivot, flow de navegação,
tiles, lockscreen

83. BOAS PRÁTICAS
erros mais comuns
layout responsivo ao tema
flow de navegação
tiles

84. ERROS MAIS COMUNS
• Respeitar as magens de
24px.

85. ERROS MAIS COMUNS
• Agrupamento das
informações em blocos.

86. ERROS MAIS COMUNS
• Consistência de espaços na
vertical e horizontal;

87. ERROS MAIS COMUNS
• Consistência de espaços na
vertical e horizontal;
• 12 px, e seus múltiplos, deve
ser o número base.

88. ERROS MAIS COMUNS
• Consistência de espaços
entre conteúdo similares.

89. ERROS MAIS COMUNS
• Adornos que não possuam
uma função de botão ou
ícone são proibidos.

90. ERROS MAIS COMUNS
• Botões, na medida do
possível, devem ser movidos
para o AppBar Menu.

91. ERROS MAIS COMUNS
• Feedback visual de links
pressionados não deve ser
feito com a troca de cores
mas com o Tilt Effect.

92. BOAS PRÁTICAS
erros mais comuns
layout responsivo ao tema
flow de navegação
tiles

93. LAYOUT RESPONSIVO AO TEMA

94. BOAS PRÁTICAS
erros mais comuns
layout responsivo ao tema
flow de navegação
tiles

95. FLOW
95 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

96. FLOW
• Sair;
96 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

97. FLOW
• Sair;
• Voltar;
97 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

98. FLOW
• Sair;
• Voltar;
• Voltar
também pode
ser Cancelar.
98 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

99. BOAS PRÁTICAS
erros mais comuns
layout responsivo ao tema
flow de navegação
tiles

100. TILES
• Estão na Start Screen;

101. TILES
• Estão na Start Screen;
• São poderosas ferramentas
de interação dos Apps;

102. TILES
• Estão na Start Screen;
• São poderosas ferramentas
de interação dos Apps;
• Pequeno, Normal e Grande;

103. TILES
• Estão na Start Screen;
• São poderosas ferramentas
de interação dos Apps;
• Pequeno, Normal e Grande;
• Podem ser atalhos para
partes específicas de um App;

104. TILES
• Estão na Start Screen;
• São poderosas ferramentas
de interação dos Apps;
• Pequeno, Normal e Grande;
• Podem ser atalhos para
partes específicas de um App;
• Podem receber informações
dinâmicas;

105. TILES
• Estão na Start Screen;
• São poderosas ferramentas
de interação dos Apps;
• Pequeno, Normal e Grande;
• Podem ser atalhos para
partes específicas de um App;
• Podem receber informações
dinâmicas;
• Podem ter 2 faces, sendo
animado.

106. ESTUDO DE CASO DE APP
Cinema Manaus
Design de Interação e Design Visual para
Windows Phone

107. CONCEI MODEL PROTÓ TESTE DE
USABILIDA
TO AGEM TIPO DE
• Pesquisa • Design de • Especificaçã • Útil?
• Briefing interação o • Desejável?
• Estrutura • Design Visual • Modelo • Usável?
funcional

108. DRAFTS
108 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

109. WIREFRAMES
109 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

110. VISUAL
110 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

111. PERGUNTAS