Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design de aplicações Windows 8.1 [MVP ShowCast 2013 - DEV - Windows Store apps]

359 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Design de aplicações Windows 8.1 [MVP ShowCast 2013 - DEV - Windows Store apps]

  1. 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.
  2. 2. SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS Conteúdo é mais importante que os enfeites © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  3. 3. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  4. 4. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  5. 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. 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.
  7. 7. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  8. 8. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  9. 9. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  10. 10. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  11. 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.
  12. 12. SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS 42pt 20pt 11pt 9pt © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  13. 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.
  14. 14. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  15. 15. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  16. 16. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  17. 17. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  18. 18. SESSÃO: DESENVOLVIMENTO Interações © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  19. 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.
  20. 20. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  21. 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. 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.
  23. 23. SESSÃO: DESENVOLVIMENTO Erros Quando possível mostrar erros no local © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  24. 24. SESSÃO: DESENVOLVIMENTO Navegação © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  25. 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. 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. 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. 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.
  29. 29. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  30. 30. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  31. 31. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  32. 32. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  33. 33. SESSÃO: DESENVOLVIMENTO Rápido e Fluido © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  34. 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.
  35. 35. SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS Design para Toque Toque para ação primária © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  36. 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. 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. 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. 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.
  40. 40. SESSÃO: DESENVOLVIMENTO Invista numa bela Tile © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  41. 41. SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  42. 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. 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.
  44. 44. SESSÃO: DESENVOLVIMENTO Viaje para a Nuvem © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  45. 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. 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. 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
  48. 48. SESSÃO: DESENVOLVIMENTO Perguntas & Respostas © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS

×