Разработка приложений для Windows Phone 7Mango Владимир Колесников Windows Phone 7 Camp.
Eric Quezado - Design para Windows Phone
Transcript of Eric Quezado - Design para Windows Phone
DESIGN PARA WINDOWS PHONE
modern style UI
boas práticas
estudo de caso de app
perguntas
AGENDA
inspirações e princípios, tipografia segoe,
grid, gestos suportados, iconografia minimalista e principais componentes
MODERN STYLE UI
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes
MODERN STYLE UI
5 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
• Sinalizações de Estações, Aeroportos, Espaços Urbanísticos em geral;
• 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 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;
• 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 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
• Bauhaus, berço do Design Gráfico Moderno: Design Funcional e Objetivo;
• Bauhaus, berço do Design Gráfico Moderno: Design Funcional e Objetivo;
• Estilo Tipográfico Internacional: Clareza, Legibilidade e Objetividade;
• 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 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
15 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
16 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
17 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
18 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
19 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
20 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
21 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
22 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes
MODERN STYLE UI
24 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes
MODERN STYLE UI
GRID • Tudo inicia com uma tela de
480x800 e densidade de 96dpi;
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;
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;
GRID • Grid em coluna vertical;
GRID • Grid em coluna vertical;
• Grid em coluna horizontal;
GRID • Grid em coluna vertical;
• Grid em coluna horizontal;
• Outro grid em coluna vertical;
GRID • Grid em coluna vertical;
• Grid em coluna horizontal;
• Outro grid em coluna vertical;
• Outro grid em coluna vertical;
GRID • Grid em coluna vertical;
• Grid em coluna horizontal;
• Outro grid em coluna vertical;
• Outro grid em coluna vertical;
• Outro grid em coluna vertical;
GRID • Grid na prática: Start Screen;
GRID • Grid na prática: Start Screen;
• Grid na prática: Application Screen;
GRID • Grid na prática: Start Screen;
• Grid na prática: Application Screen;
• Grid na prática: Hub People;
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.
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes
MODERN STYLE UI
GESTOS • tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points
GESTOS • tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points
GESTOS • tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points
GESTOS • tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points
GESTOS • tap
• double tap
• pan
• flick
• pinch/stretch
• touch/hold
• four points
GESTOS • tap
• double tap
• pan
• flick
• pinch/stretch
• touch+hold
• four points
GESTOS • tap
• double tap
• pan
• flick
• pinch/stretch
• touch+hold
• four points
GESTOS • tap
• double tap
• pan
• flick
• pinch/stretch
• touch+hold
• four points
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes
MODERN STYLE UI
inspirações e princípios
tipografia segoe
grid
gestos suportados
iconografia minimalista
principais componentes
MODERN STYLE UI
COMPONENTES // PANORAMA
COMPONENTES // PANORAMA • Panorama é um dos mais
emblemáticos componentes WP;
COMPONENTES // PANORAMA • Panorama é um dos mais
emblemáticos componentes WP;
• 5 a 6 telas;
COMPONENTES // PANORAMA • Panorama é um dos mais
emblemáticos componentes WP;
• 5 a 6 telas;
• Visão de uma pequena parte da próxima tela;
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;
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;
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.
COMPONENTES // PANORAMA
COMPONENTES // PANORAMA
COMPONENTES // PANORAMA
COMPONENTES // PANORAMA
COMPONENTES // PIVOT
COMPONENTES // PIVOT • Pode ser a 1ª tela do App
mas também outras;
COMPONENTES // PIVOT • Pode ser a 1ª tela do App
mas também outras;
• 5 a 6 telas;
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;
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;
COMPONENTES // APP BAR
COMPONENTES // APP BAR • Até 4 botões;
COMPONENTES // APP BAR • Até 4 botões;
• Diferente de um TabMenu do iOS;
COMPONENTES // APP BAR • Até 4 botões;
• Diferente de um TabMenu do iOS;
• Contexto com a tela atual;
COMPONENTES // APP BAR • Até 4 botões;
• Diferente de um TabMenu do iOS;
• Contexto com a tela atual;
• Oculta ou recuada;
COMPONENTES // APP BAR • Até 4 botões;
• Diferente de um TabMenu do iOS;
• Contexto com a tela atual;
• Oculta ou recuada;
• MenuItens.
COMPONENTES // BUTTON
COMPONENTES // CHECK BOX
COMPONENTES // RADIO
COMPONENTES // SLIDER
COMPONENTES // PROGRESS
COMPONENTES // LIST BOX
COMPONENTES // CONTEXT M
COMPONENTES // DATE P
COMPONENTES // DIALOGS
COMPONENTES • Design Templates for Windows Phone
• http://go.microsoft.com/fwlink/?LinkId=266548
• Dev Center – Design Guides • https://dev.windowsphone.com/en-us/design
erros mais comuns, layout responsivo ao tema, panorama x pivot, flow de navegação, tiles, lockscreen
BOAS PRÁTICAS
erros mais comuns
layout responsivo ao tema
flow de navegação
tiles
BOAS PRÁTICAS
ERROS MAIS COMUNS • Respeitar as magens de
24px.
ERROS MAIS COMUNS • Agrupamento das
informações em blocos.
ERROS MAIS COMUNS • Consistência de espaços na
vertical e horizontal;
ERROS MAIS COMUNS • Consistência de espaços na
vertical e horizontal;
• 12 px, e seus múltiplos, deve ser o número base.
ERROS MAIS COMUNS • Consistência de espaços
entre conteúdo similares.
ERROS MAIS COMUNS • Adornos que não possuam
uma função de botão ou ícone são proibidos.
ERROS MAIS COMUNS • Botões, na medida do
possível, devem ser movidos para o AppBar Menu.
ERROS MAIS COMUNS • Feedback visual de links
pressionados não deve ser feito com a troca de cores mas com o Tilt Effect.
erros mais comuns
layout responsivo ao tema
flow de navegação
tiles
BOAS PRÁTICAS
LAYOUT RESPONSIVO AO TEMA
erros mais comuns
layout responsivo ao tema
flow de navegação
tiles
BOAS PRÁTICAS
95 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
FLOW
96 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
FLOW • Sair;
97 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
FLOW • Sair;
• Voltar;
98 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
FLOW • Sair;
• Voltar;
• Voltar também pode ser Cancelar.
erros mais comuns
layout responsivo ao tema
flow de navegação
tiles
BOAS PRÁTICAS
TILES • Estão na Start Screen;
TILES • Estão na Start Screen;
• São poderosas ferramentas de interação dos Apps;
TILES • Estão na Start Screen;
• São poderosas ferramentas de interação dos Apps;
• Pequeno, Normal e Grande;
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;
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;
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.
Cinema Manaus
Design de Interação e Design Visual para Windows Phone
ESTUDO DE CASO DE APP
TESTE DE USABILIDADE
CONCEITO
MODELAGEM
• Pesquisa • Briefing • Estrutura
• Design de interação
• Design Visual
• Útil? • Desejável? • Usável?
PROTÓTIPO
• Especificação
• Modelo funcional
DRAFTS
108 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
WIREFRAMES
109 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
VISUAL
110 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]
PERGUNTAS