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

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.



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 olhos
focalizem na coisa certa




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




42pt
20pt

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
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



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

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


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




Contoso Travel

My Trips

Last minute deals

Featured Destinations

Last Minute Deals

My Trips

Top Destinations for 2012

Barcelona, Spain
7 night Alaska Cruise


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




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



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 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



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 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



Ajuste e Escale de maneira bonita





Design para Múltiplas Visualizações
As pessoas executam múltiplas tarefas. Sua aplicação pode ser
mostrada 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 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




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


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]

Recommandé

Recommandé

Contenu connexe

Plus de MVP ShowCast

Plus de MVP ShowCast (10)

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