More Related Content More from MVP ShowCast (10) Design de aplicações Windows 8.1 [MVP ShowCast 2013 - DEV - Windows Store apps]1. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
MVP ShowCast 2013
Design de aplicações Windows 8.1
Bruno Sonnino
Client App Dev
Owner – Revolution Software
@bsonnino
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
5. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Conteúdo é mais importante
♦Colocar conteúdo em primeiro lugar
♦Deixar itens mais importantes na tela e minimizar distrações
♦Adicionar enfeites para:
1. Layout
2. Interações
3. Navegação
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
6. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Layout
♦Dar espaço para o conteúdo respirar
♦Remover linhas e caixas como maneira de organização de conteúdo
♦Dar espaçamento intencional no conteúdo e fazer que os olhos
focalizem na coisa certa
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
11. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Layout
♦Usar
conteúdo
para criar um senso de estrutura e hierarquia no
♦Um conjunto de tamanhos, pesos e cores mostram o conteúdo
conforme sua importância
♦Usar a folha de estilos padrão para obter os estilos de uma maneira
pré-definida
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
13. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Layout
♦Deixar o conteúdo fluir para todos os lados
♦Manter a ergonomia em vista, rolar no sentido mais largo
♦ Primariamente horizontal em retrato
♦ Vertical no modo ajustado
♦Rolar em apenas um eixo para criar um senso de estabilidade e
suportar o modelo de seleção
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
19. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Usando as bordas
♦Use a
inferior
para comandos esfregando a borda superior ou
♦Use a Barra Lateral como pontos de entrada para Contratos de
Pesquisa, Compartilhamento, Configurações e Dispositivos
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
21. SESSÃO: DESENVOLVIMENTO
App Bar
♦ Maior parte das aplicações vão usar uma app bar transitória
♦ App bar de baixo é para comandos
♦
♦
♦
♦
Comandos globais na direita, comandos contextuais na esquerda
Pode ser chamado por programa quando um item é selecionado para comandos contextuais
Se há apenas um comando chamado frequentemente, ele pode ser colocado na tela
Menu Flyout pode ser usado para mostrar grupos de comandos relacionados
♦ App bar do topo é para navegação em visualizações imersivas
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: WINDOWS STORE APPS
22. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Flyout
Usar o Flyout como uma maneira simples de
mostrar UI contextual e transitória
Coletando informações
Confirmações ou avisos
http://msdn.microsoft.com/en-us/library/windows/apps/hh465341(v=VS.85).aspx
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
25. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Navegando no Conteúdo
♦ Visualizações devem ser sobre onde você está, não onde você pode ir
♦ A maior parte da hierarquia de informação dos aplicativos tem o formato de
rede estrela:
♦ Centro: Normalmente a página central contendo as seções de topo, que permitem navegar para as pontas
♦ Ponta: Mostra o conteúdo de uma das seções, permitindo navegar para ver detalhes de um item
♦ Evitar ornamentos persistentes como abas
♦ Afinar a hierarquia e usar o Zoom Semântico para pular entre grupos numa lista
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
26. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Contoso Travel
Featured destinations
Featured Destinations
City Guide
City Guide
My Trips
Last minute deals
Last Minute Deals
My Trips
Top Destinations for 2012
Barcelona, Spain
7 night Alaska Cruise
Featured destinations
Last Minute Deals
My Trips
Barcelona, Spain
7 Night Alaska Cruise
Chicago (3/11 – 3/19)
Weather
Attractions
7 days
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Ocean View Cabins
Suites
Upgrade from an inside cabin and save $43/night/person!
Picture windows with ocean and port views
From $2,099 — only $150/night/person based on double
occupancy
Upgrade from an inside cabin and save
$43/night/person!
Picture windows with ocean and port view
From $2,099 — only $150/night/person do
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
27. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Contoso Travel
Featured destinations
My Trips
Last minute deals
Featured Destinations
Last Minute Deals
My Trips
Top Destinations for 2012
Barcelona, Spain
7 night Alaska Cruise
Featured destinations
Last Minute Deals
My Trips
Barcelona, Spain
7 Night Alaska Cruise
Chicago (3/11 – 3/19)
Weather
Attractions
7 days
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Ocean View Cabins
Suites
Upgrade from an inside cabin and save $43/night/person!
Picture windows with ocean and port views
From $2,099 — only $150/night/person based on double
occupancy
Upgrade from an inside cabin and save
$43/night/person!
Picture windows with ocean and port view
From $2,099 — only $150/night/person do
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
28. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Zoom Semântico
♦ Crie a visão comprimida para mostrar informações ricas sobre seus grupos
♦ Tente colocar o conteúdo em 1 a 3 páginas
♦ O layout ideal é linear, mas se há muito conteúdo, use uma grid
♦ Você pode habilitar operações em grupos na visão comprimida (selecionar ou
rearranjar)
♦ Quando mudar a visão do zoom, o escopo do conteúdo deve se manter
♦ O zoom semântico não é para navegar entre níveis de uma hierarquia
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
34. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Animações com propósito
♦ Animações bem feitas trazem vida à aplicação e criam uma experiência polida
♦ Animações com propósito criam um sentido de continuidade e ajudam os
usuários a confiar na UI
♦ Use a biblioteca de animações para obter animações prontas, voltadas a
cenários
♦ Use os controles incluídos para obter as animações gratuitamente!
♦ Animação não é um adorno visual, ela deve ter um propósito. Não adicione
animações só porque quer uma animação
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
36. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Design para Toque
Desenhe pensando nas mãos e dedos
♦ Os pontos de toque devem ter tamanho e espacejamento próprios para
toque, seu dedo não é um mouse
♦ Desenhe pensando no conforto e ergonomia
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
37. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Design para Toque
♦Forneça feedback instantâneo ao toque e termine a operação ao
levantar o dedo
♦As ações devem ser reversíveis, de maneira que o usuário possa
explorar
♦Pense além do toque e use as interações de arrastar. Deixe que as
coisas sigam os dedos
♦Movimente apenas em 1 eixo
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
38. SESSÃO: DESENVOLVIMENTO
Ajuste e Escale de maneira bonita
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: WINDOWS STORE APPS
39. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Design para Múltiplas Visualizações
As pessoas executam múltiplas tarefas. Sua aplicação pode ser
mostrada em qualquer destes layouts:
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
42. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Tiles
♦ Tiles são a “porta da frente” de sua app. Trate-a como uma extensão da app
♦ Tiles secundárias fazem com que os usuários coloquem conteúdo interessante
da sua app na tela inicial deles
♦ Encontre uma maneira de ligar diretamente a seções interessantes de sua app
♦ Coloque o comando Pin na AppBar quando o conteúdo puder ser fixado na
página inicial
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
43. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Live Tile
♦ Use Live tiles para direcionar os usuários para sua app com conteúdo dinâmico,
personalizado e relevante
♦ Crie conteúdo fresco para fazer que os usuários se sintam conectados a seu conteúdo e dê-lhes razão para colocar
sua tile em uma posição de destaque na tela de início
♦ Use badges para mostrar informações numéricas ou ícones
♦ Live updates devem ser acessíveis da tela inicial de sua app
♦ Você pode mostrar até as 5 últimas atualizações:
♦ Exemplos– uma app de notícias que manda 5 histórias por dia ou uma história com imagens suplementares por dia,
uma app de gerenciamento de ações que manda 3 notificações por hora, com determinadas ações
♦ Cuidado para não mostrar notificações desatualizadas (ex. Aplicação que manda uma oferta por dia, mas mantém
as anteriores desatualizadas)
♦ As tiles default e secundárias podem ser live
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
45. SESSÃO: DESENVOLVIMENTO
TRILHA: WINDOWS STORE APPS
Roaming
♦ Use o roaming para manter configurações e preferências entre máquinas
♦ Coloque as preferências que o usuário irá configurar em cada máquina de qualquer maneira
♦ Deixe que os usuários continuem uma tarefa entre dispositivos usando o roaming para dados
que permitam que o usuário possa retomar uma tarefa no mesmo ponto que deixaram no outro
dispositivo:
♦ Lista de compras
♦ Composição de email
♦ Roaming é melhor para preferências do usuário, pequenos arquivos e links
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
46. SESSÃO: DESENVOLVIMENTO
Abrace os princípios de design
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: WINDOWS STORE APPS
47. SESSÃO: DESENVOLVIMENTO
Princípios de design
♦ Orgulho na manufatura
♦ Concentre-se nos detalhes. Os pixels contam
♦ Faça mais com menos
♦ Conteúdo antes dos enfeites
♦ Seja rápido e fluido
♦ Movimentos com motivos e interações diretas
♦ Autenticamente digital
♦ Vá além das metáforas do mundo real e material
♦ Unidos venceremos
♦ Use o ecossistema
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: WINDOWS STORE APPS