design de aplicações windows 8.1 [mvp showcast 2013 - dev - windows store apps]

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

http://mvp.microsoft.com/pt-br/mvp/Bruno Sonnino-38504

http://mvp.microsoft.com/pt-br/mvp/Bruno Sonnino-38504

https://twitter.com/bsonnino

https://twitter.com/bsonnino



Conteúdo é mais importante que os enfeites



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



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



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



42pt20pt

11pt

9pt



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



Interações



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



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



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



Erros

Quando possível mostrar erros no local



Navegação



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



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





Attractions

My Trips Featured Destinations Top Destinations for 2012

Barcelona, Spain

My Trips City Guide City Guide



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





Attractions

My Trips Featured Destinations Top Destinations for 2012

Barcelona, Spain



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



Rápido e Fluido



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



Design para Toque

Toque para ação primária



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



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



Ajuste e Escale de maneira bonita



Design para Múltiplas Visualizações

As pessoas executam múltiplas tarefas. Sua aplicação pode sermostrada em qualquer destes layouts:



Invista numa bela Tile



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



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



Viaje para a Nuvem



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



Abrace os princípios de design



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



Perguntas & Respostas

design de aplicações windows 8.1 [mvp showcast 2013 - dev - windows store apps]

Technology