Design de aplicações Windows 8.1 [MVP ShowCast 2013 - DEV - Windows Store apps]
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 272 views

Palestra: Design de aplicações Windows 8.1 ...

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

Statistics

Views

Total Views
272
Views on SlideShare
272
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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.
  • 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.
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • 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.
  • 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.
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • 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.
  • SESSÃO: DESENVOLVIMENTO TRILHA: WINDOWS STORE APPS 42pt 20pt 11pt 9pt © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 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.
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO Interações © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • 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.
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • 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
  • 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.
  • 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
  • SESSÃO: DESENVOLVIMENTO Navegação © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • 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.
  • 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.
  • 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.
  • 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.
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO Rápido e Fluido © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • 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.
  • 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.
  • 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.
  • 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.
  • 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
  • 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.
  • SESSÃO: DESENVOLVIMENTO Invista numa bela Tile © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • SESSÃO: DESENVOLVIMENTO © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • 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.
  • 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.
  • SESSÃO: DESENVOLVIMENTO Viaje para a Nuvem © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS
  • 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.
  • 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
  • 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
  • SESSÃO: DESENVOLVIMENTO Perguntas & Respostas © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: WINDOWS STORE APPS