Upload
mvp-showcast
View
123
Download
4
Embed Size (px)
DESCRIPTION
Palestra: Design de aplicações Windows 8.1 Palestrante: Bruno Sonnino (MVP Client App Dev) Realização: 09/11/2013 17h Trilha: Windows Store apps Sessão: Desenvolvimento Evento: MVP ShowCast 2013 Site: http://mvpshowcast.azurewebsites.net
Citation preview
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
MVP ShowCast 2013
Design de aplicações Windows 8.1
Bruno Sonnino
Client App Dev
Owner – Revolution Software
@bsonnino
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Conteúdo é mais importante que os enfeites
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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 olhosfocalizem na coisa certa
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Layout
♦Usar para criar um senso de estrutura e hierarquia no conteúdo
♦Um conjunto de tamanhos, pesos e cores mostram o conteúdoconforme sua importância
♦Usar a folha de estilos padrão para obter os estilos de uma maneirapré-definida
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
42pt20pt
11pt
9pt
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Interações
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Usando as bordas
♦Use a para comandos esfregando a borda superior ouinferior
♦Use a Barra Lateral como pontos de entrada para Contratos de Pesquisa, Compartilhamento, Configurações e Dispositivos
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Erros
Quando possível mostrar erros no local
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Navegação
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Contoso Travel Featured destinations Last minute deals
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather7 days
Chicago (3/11 – 3/19)
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips Featured Destinations Top Destinations for 2012
Barcelona, Spain
My Trips City Guide City Guide
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Contoso Travel Featured destinations Last minute deals My Trips
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather7 days
Chicago (3/11 – 3/19)Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips Featured Destinations Top Destinations for 2012
Barcelona, Spain
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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 ourearranjar)
♦ 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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Rápido e Fluido
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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 osusuá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 adicioneanimações só porque quer uma animação
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Design para Toque
Toque para ação primária
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Design para Toque
♦Forneça feedback instantâneo ao toque e termine a operação aolevantar o dedo
♦As ações devem ser reversíveis, de maneira que o usuário possaexplorar
♦Pense além do toque e use as interações de arrastar. Deixe que as coisas sigam os dedos
♦Movimente apenas em 1 eixo
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Ajuste e Escale de maneira bonita
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Design para Múltiplas Visualizações
As pessoas executam múltiplas tarefas. Sua aplicação pode sermostrada em qualquer destes layouts:
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Invista numa bela Tile
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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 interessanteda 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 napágina inicial
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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 colocarsua 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émas anteriores desatualizadas)
♦ As tiles default e secundárias podem ser live
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Viaje para a Nuvem
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Abrace os princípios de design
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Perguntas & Respostas