Usando blocos dinâmicos com diferentes tipos de aplicativos (aplicativos do Tempo de Execução do Windows)

Applies to Windows and Windows Phone

Este tópico aborda considerações de design ao usar blocos dinâmicos para diferentes tipos de aplicativos.

Jogos

Você pode usar os blocos dinâmicos para convencer os usuários a executar um jogo, lembrando-os do progresso do jogo, mostrando as pontuações maximas ou notificando-os sobre atualizações.

Jogos baseados em rodada

Você pode usar os blocos dinâmicos para notificar um usuário quando é sua vez de jogar, junto com detalhes adicionais sobre o progresso do jogo.

Este exemplo mostra o modelo de bloco largo TileWide310x150PeekImage06, que alterna entre uma imagem que mostra o status atual do jogo (1) e uma imagem do jogador adversário e seu status (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150PeekImageAndText01, que alterna entre uma imagem menor do jogo e o texto que avisa o usuário que é sua vez (3).

Exemplo de jogo rodada a rodada

Jogos sociais

Você pode usar os blocos dinâmicos para convencer um usuário a jogar mostrando convites de jogos, convites perdidos ou pontuações competitivas dos amigos.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text09, que exibe uma mensagem informando que o jogo tem uma nova pontuação máxima (1), além de detalhes sobre a pontuação (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe as novas informações de pontuação máxima em uma área menor.

Exemplo de jogo social

Continuar um jogo

Você pode usar os blocos dinâmicos para convencer um usuário a continuar um jogo de onde ele parou.

Este exemplo mostra o modelo de bloco largo TileWide310x150ImageAndText02, que exibe uma imagem de onde o usuário salvou pela última vez o progresso de seu jogo (1) e as informações sobre o jogo do usuário (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text02, que exibe detalhes sobre o último ponto de salvamento do usuário no jogo.

Exemplo de continuação no jogo

Atualizações do jogo

Você pode usar blocos dinâmicos para notificar um usuário que um jogo tem novo conteúdo para download ou outras atualizações.

Este exemplo mostra o modelo de bloco largo TileWide310x150ImageAndText02, que exibe uma imagem do jogo (1) e as informações sobre a atualização do jogo (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150PeekImageAndText04, que alterna entre uma imagem do jogo e informações sobre a atualização do jogo (3).

Lembre-se de que os blocos têm apenas um destino de clique, portanto você pode direcionar o usuário para o seu jogo ou para o site de download.

Exemplo de atualizações do jogo

 

Aplicativos sociais

Você pode usar os blocos dinâmicos em um aplicativo social para imergir o usuário no aplicativo mesmo quando o aplicativo não está no primeiro plano.

Atualizações de status

Você pode usar blocos dinâmicos para manter o usuário atualizado sobre seus amigos.

Este exemplo mostra o modelo de bloco largo TileWide310x150SmallImageAndText04, que exibe tanto a imagem da pessoa que adicionou um status ou comentário (1) junto com seu nome quanto o início do texto (2).

O exemplo também mostra o modelo médio TileSquare150x150Text02, que exibe o nome curto e o texto da pessoa que adicionou o status ou o comentário.

Exemplo de atualizações de status

Fotos e imagens

Se uma postagem ou um comentário se referir a uma imagem ou foto, você poderá incluir a imagem no bloco dinâmico ao exibir a atualização.

Este exemplo mostra o modelo de bloco largo TileWide310x150PeekImage05, que alterna entre uma foto (1) e um comentário sobre a foto (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150PeekImageAndText04, que alterna entre uma foto e o texto do comentário sobre a foto, truncado para se ajustar ao bloco menor (3).

Exemplo de fotos

Pessoas ou grupos

Você pode usar um bloco secundário para permitir que um usuário fixe amigos, familiares ou colegas à página inicial. Você pode usar os modelos de bloco de coleção para mostrar imagens de membros do grupo no bloco dinâmico. Você pode usar os modelos de bloco de espiada para mostrar atualizações relacionadas a membros do grupo.

Este exemplo mostra o modelo de bloco largo TileWide310x150PeekImageCollection05, que alterna entre uma coleção de imagens de membros do grupo (1) e uma mensagem recente postada por um membro do grupo (2) com um nome que representa o grupo (3).

O exemplo também mostra o modelo de bloco médio TileSquare150x150PeekImageAndText02, que alterna entre atualizações sobre membros do grupo e uma imagem do membro do grupo relacionado (4).

Exemplo de fotos

Eventos

Você pode usar blocos dinâmicos para mostrar informações de eventos, incluindo o local, o horário e os amigos que estão participando. Também é possível usar um bloco secundário para um evento que um usuário pode fixar na página inicial. Dessa forma, o usuário pode acessar facilmente as informações mais recentes sobre um evento em que ele esteja participando ou que esteja promovendo.

Este exemplo mostra o modelo de bloco largo TileWide310x150PeekImageCollection02, que alterna entre uma imagem do evento (1) e uma coleção de imagens dos amigos que estão participando do evento (2), além das informações do evento que incluem o número total de participantes.

O exemplo também mostra o modelo de bloco médio TileSquare150x150PeekImageAndText04, que alterna entre uma imagem do evento ou dos participantes do evento (3), além das informações do evento que incluem o número total de participantes.

Exemplo de fotos

Informações resumidas

Você pode usar blocos dinâmicos para mostrar um resumo de atualizações em seu aplicativo. Embora um resumo geralmente seja uma notificação menos atraente, é útil quando o usuário não deseja mostrar informações privadas na tela inicial.

Este exemplo mostra o modelo de bloco largo TileWide310x150BlockAndText01, que exibe o número total de atualizações (1), junto com um resumo das atualizações de categorias diferentes (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Block, que exibe o número total de atualizações.

Exemplo de fotos

 

Novos aplicativos

Você pode usar blocos dinâmicos em aplicativos de notícias para atrair os usuários, mostrando a eles uma visualização das notícias mais recentes. Como os blocos dinâmicos podem ter apenas um destino, você deve exibir apenas as notícias que o usuário pode localizar facilmente na página frontal do seu aplicativo.

Artigos de recursos

Você pode usar um bloco dinâmico para exibir as partes mais atraentes de um artigo em destaque. O bloco dinâmico pode alternar um grupo de artigos para fornecer ao usuário uma visão geral das notícias do dia.

Este exemplo mostra o modelo de bloco largo TileWide310x150ImageAndText01, que exibe tanto uma imagem para o artigo quanto o texto do título (1). O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que mostra apenas o título (2).

Para artigos com títulos maiores, você pode usar um modelo diferente de bloco dinâmico que permita adicionar mais texto, como o modelo de bloco largo TileWide310x150Text04.

Exemplo de artigo em destaque

Artigos com títulos longos

Para artigos com títulos maiores, você pode usar um modelo de bloco dinâmico que permita adicionar mais texto.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text04, que não inclui uma imagem e usa uma fonte menor (1). Isso permite que o usuário leia o título completo do artigo.

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe uma versão abreviada do texto do título (2). Convém verificar se o texto do título truncado no bloco médio ainda é compreensível pelo leitor.

Exemplo de títulos longos

Artigos com títulos curtos

Para artigos com títulos curtos, você pode usar um modelo de bloco dinâmico que exiba o texto usando uma fonte grande.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text03, que exibe um título curto usando uma fonte grande. Convém verificar se o texto do título não está truncado quando usar esse modelo.

Se você estiver usando um modelo de bloco médio, use um modelo como o TileSquare150x150Text04, que usa uma fonte menor (2) e é apropriado para o espaço reduzido disponível para blocos médios.

Exemplo de títulos curtos

Mostrando imagens maiores

Você pode usar um modelo de bloco de inspeção para alternar entre uma imagem e o texto do título de um artigo. Neste caso, o bloco exibirá a imagem sem o texto, portanto verifique se sua imagem pode ser facilmente reconhecida pelo leitor.

Este exemplo mostra o modelo de bloco largo TileWide310x150PeekImageAndText01, que alterna entre uma imagem do artigo e o texto do título mais longo (1).

O exemplo também mostra o modelo de bloco médio TileSquare150x150PeekImageAndText04, que alterna entre uma imagem do artigo e o texto do título mais longo e truncado.

Exemplo de imagens maiores

Pesquisas e estatísticas

Você pode mostrar os resultados das pesquisas ou as estatísticas de um artigo adicionando uma imagem que exibe um gráfico.

Este exemplo mostra o modelo de bloco largo TileWide310x150ImageAndText01, que exibe uma imagem de resultados da pesquisa (1) e o texto que descreve os resultados da pesquisa (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que mostra apenas o texto que descreve os resultados da pesquisa.

Exemplo de pesquisas e estatísticas

Blogs e artigos de opiniões

Você pode usar um bloco de imagem pequeno para exibir uma imagem do autor de um blog ou artigo de opinião. Com o foco no autor, você pode separar opiniões de outros tipos de notícias.

Este exemplo mostra o modelo de bloco largo TileWide310x150SmallImageAndText03, que exibe uma foto do autor junto com o seu nome e o texto do título (1).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe o nome do autor e o texto do título usando uma fonte menor (2). O uso de uma fonte menor exibe mais do texto do título para o leitor.

Exemplo de blogs e artigos de opiniões

Vídeos

Você pode usar um bloco dinâmico para iniciar um vídeo.

Este exemplo mostra o modelo de bloco largo TileWide310x150ImageAndText02, que exibe uma captura de tela relevante do vídeo (1), o título do vídeo rotulado como Vídeo (2), e a notificação de execução para indicar que o bloco inicia o vídeo (3).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Image, que exibe uma captura de tela e a notificação de execução.

Exemplo de vídeo

Categorias de notícias

Você pode usar um bloco secundário para permitir que um usuário fixe uma categoria específica de artigos de notícias para personalizar o conteúdo recebido. Você pode usar modelos de bloco de espiada para percorrer um conjunto de artigos relacionados.

Este exemplo mostra um bloco fixado que exibe as notícias sobre negócios mais recentes. O exemplo usa o modelo de bloco largo TileWide310x150SmallImageAndText01, que exibe o logotipo da empresa como uma imagem pequena (1) e um título curto em fonte grande (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe apenas o texto do título curto (3).

Exemplo de categorias

 

Produtividade

Você pode usar blocos dinâmicos para manter o usuário constantemente atualizado sobre seu trabalho, como notificá-lo sobre novas alterações em documentos compartilhados, acompanhar eventos importantes, exibir uma lista de tarefas e assim por diante.

Fazendo anotações

Você pode usar um bloco dinâmico para que o usuário tenha fácil acesso a suas anotações ou para atualizá-las com relação às alterações em seus documentos.

Este exemplo mostra o modelo de bloco largo TileWide310x150SmallImageAndText02, que exibe uma imagem da pessoa que modificou o documento (1), o título do documento (2) e quando o documento foi atualizado pela última vez (3).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe apenas o título do documento e quando ele foi modificado pela última vez.

Os dois exemplos de modelo de bloco mostram um selo de ícone de estrela (4) para indicar que o documento foi modificado.

Exemplo de anotações

Calendário e compromissos

Você pode usar blocos dinâmicos para mostrar informações de compromissos futuros. Pode mostrar informações relevantes para o compromisso, incluindo o local, o horário e os detalhes do compromisso.

Este exemplo mostra o modelo de bloco largo TileWide310x150SmallImageAndText04, que exibe uma imagem de direções do mapa (1) e informações sobre o compromisso.

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe apenas as informações cruciais sobre o compromisso.

Exemplo de calendário e compromissos

Listas de tarefas

Você pode usar um bloco dinâmico para exibir informações de tarefas para o usuário. É possível exibir vários itens usando um modelo de bloco largo ou exibir um item de cada vez usando um modelo de bloco médio.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text11, que usa um glifo de fonte para exibir o status da tarefa (1) e mostra vários itens da lista de tarefas (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que alterna cada tarefa na lista e inclui uma notificação que contém o número de tarefas na lista (3).

Exemplo de tarefa

Sincronizando dados

Você pode usar blocos dinâmicos para notificar um usuário sobre alterações quando seus arquivos ou dados sincronizam com a nuvem, um servidor ou um diretório compartilhado. Também é possível fornecer avisos com relação a pouco espaço ou largura de banda restante.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text02, que exibe uma notificação sobre o que foi alterado e quem fez a alteração (1), além de uma lista detalhada das alterações do arquivo (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Block, que exibe um resumo das alterações.

Exemplo de sincronização de dados

 

Aplicativos de mídia e entretenimento

Os blocos dinâmicos podem ajudar o usuário a descobrir conteúdo novo por meio de recomendações personalizadas ou se tornar mais conectado com seus artistas e programas favoritos exibindo listas de reprodução e lançamentos.

Filmes e programas

Você pode usar blocos dinâmicos para notificar um usuário sobre um lançamento de filme ou episódio de um programa disponível em breve. Você também pode incluir classificações e recomendações de aplicativos sociais.

Este exemplo mostra o modelo de bloco largo TileWide310x150PeekImage05, que alterna entre uma imagem de um programa e uma recomendação de um amigo para o programa (1).

O exemplo também mostra o modelo de bloco médio TileSquare150x150PeekImageAndText04, que alterna entre uma imagem do programa (2) e uma recomendação de um amigo sem incluir uma imagem do amigo (3).

Exemplo de filmes

Filmes e programas pausados

Você pode usar os blocos dinâmicos para exibir filmes pausados em blocos como um lembrete para o usuário.

Este exemplo mostra o modelo de bloco largo TileWide310x150Image, que exibe uma imagem da última cena assistida de um filme pausado (1) e a notificação pausada para indicar que o filme está pausado (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Image, que exibe uma imagem truncada da última cena do filme pausado, junto com a notificação pausada.

Tenha em mente como um bloco pausado será relevante para o usuário. Um usuário pode não desejar retomar uma música em alguns dias, mas pode retomar um filme um ou dois dias depois.

Exemplo de filme pausado

Música

Você pode usar blocos dinâmicos para exibir a música que está tocando no momento, as músicas futuras e detalhes sobre o artista. Você pode incluir classificações e comentários de aplicativos sociais, bem como informações sobre aparições futuras e lançamentos de músicas.

Este exemplo mostra o modelo de bloco largo TileWide310x150SmallImageAndText02, que exibe uma imagem do artista ou do álbum (1) e as informações sobre a música, o artista e o álbum (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe apenas as informações importantes sobre a música em um formato menor (3).

Exemplo de música

Fotografia

Você pode usar blocos dinâmicos para exibir imagens em miniatura de fotos e álbuns. Para aplicativos que permitem que os usuários criem e editem imagens, você pode usar blocos dinâmicos para mostrar efeitos que o aplicativo pode aplicar a uma foto.

Este exemplo mostra o modelo de bloco largo TileWide310x150PeekImageCollection05, que alterna entre uma coleção de imagens de um álbum de fotos (1) e uma imagem do criador do álbum (2) com o nome e a descrição do conteúdo do álbum (3).

O exemplo também mostra o modelo de bloco médio TileSquare150x150PeekImageAndText04, que alterna entre uma única foto do álbum e as informações do álbum.

Exemplo de fotos

 

Aplicativos de compras

Você pode usar blocos dinâmicos para mostrar o estoque em seu aplicativo, exibindo as ofertas diárias em destaque ou recomendações personalizadas de itens. Você também pode usar blocos para notificar vendedores e compradores quando as vendas tiverem sido processadas ou despachadas.

Recomendações de compra

Você pode usar os blocos dinâmicos para exibir recomendações de itens novos e especiais ou de itens relacionados aos interesses do usuário.

Este exemplo mostra o modelo de bloco largo TileWide310x150ImageAndText01, que exibe uma imagem e informações de venda para um feriado futuro (1).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text02, que exibe informações de venda para um feriado futuro sem uma imagem (2).

Exemplo de recomendações

Catálogos

Você pode usar blocos dinâmicos que exibem uma coleção de imagens para itens do catálogo.

Este exemplo mostra o modelo de bloco largo TileWide310x150ImageCollection, que exibe várias imagens de itens relacionados de um catálogo (1).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Image, que exibe uma imagem única de um item do catálogo (2). Em seguida, você pode alternar entre as imagens relacionadas, mostrando uma imagem de cada vez.

Exemplo de catálogos

Notificações do comprador

Se o seu aplicativo der suporte para lances para itens, você poderá usar blocos dinâmicos para notificar os usuários quando eles ganharem um item, o lance for superado, o item for despachado e assim por diante.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text09, que exibe a atualização para o comprador em texto grande (1) e os detalhes da atualização em texto menor (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe a atualização e uma versão abreviada dos detalhes.

Exemplo de notificações do comprador

Notificações do vendedor

De maneira semelhante às notificações do comprador, você pode notificar um vendedor quando um item foi vendido. Para vendedores de grandes volumes, é possível atualizar o vendedor sobre as alterações de estoque ou informações comuns de análise, como volume de vendas.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text07, que exibe uma visão geral do total de vendas em texto grande (1) e os detalhes em texto menor (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text02, que exibe informações mais específicas, como vendas para o dia (3).

As notificações de bloco podem manter o vendedor atualizado sobre seu estoque, alertando-o quando um item foi vendido ou exibindo informações de análises básicas.

Exemplo de notificações do vendedor

Carrinho de compra

Você pode usar blocos dinâmicos para mostrar um resumo dos itens no carrinho de compras de um usuário.

Este exemplo mostra o modelo de bloco largo TileWide310x150BlockAndText01, que exibe o número de itens no carrinho (1) e os detalhes sobre quais itens estão no carrinho (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Block, que exibe apenas o número total de itens no carrinho (3).

Exemplo de carrinho de compras

Categorias e pesquisas comuns

Você pode usar um bloco secundário para permitir que um usuário fixe uma categoria específica de item, uma lista de desejos ou uma pesquisa personalizada do catálogo.

Este exemplo mostra o modelo de bloco largo TileWide310x150SmallImageAndText01, que exibe uma imagem de uma categoria de produto (1) e os detalhes sobre a categoria de produto, como uma venda futura (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Image, que exibe uma imagem da categoria do produto e uma notificação de alerta indicando as novas informações para o usuário (3).

Exemplo de categorias

 

Aplicativos financeiros

Você pode usar blocos dinâmicos para exibir as cotações e informações mais recentes de ações que o usuário esteja acompanhando, índices de mercado, tópicos de tendências, como ofertas públicas iniciais ou grandes movimentações, e assim por diante.

Finanças pessoais

Você pode usar blocos dinâmicos para fornecer ao usuário um resumo de seus gastos. Forneça ao usuário opções relativas a quais informações eles deseja exibir na página inicial.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text03, que exibe um resumo dos gastos do usuário (1) e uma notificação de alerta para informar o usuário sobre gastos excessivos (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text04, que exibe as informações resumidas e a notificação de alerta em uma área menor.

Exemplo de finanças pessoais

Cobrança

Você pode usar blocos dinâmicos para lembrar usuários sobre contas ou pagamentos futuros.

Este exemplo mostra o modelo de bloco largo TileWide310x150BlockAndText01, que exibe um resumo dos pagamentos devidos (1) e um glifo de fonte grande com uma data para notificar o usuário sobre o próximo pagamento devido (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Block, que mostra apenas o glifo de fonte e a data para notificar o usuário sobre o próximo pagamento devido.

Exemplo de cobrança

Mercados financeiros

Você pode usar os blocos dinâmicos para mostrar o desempenho das ações e dos ativos que o usuário possui ou está observando.

Este exemplo mostra o modelo de bloco largo TileWide310x150Text06, que usa um glifo de fonte para indicar se o valor de uma ação está subindo ou caindo (1) e exibe uma lista das ações e de seus valores atuais, incluindo a porcentagem de variação no dia (2).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text03, que exibe uma versão abreviada das ações observadas e de seus valores atuais.

Exemplo de mercados financeiros

Ações individuais

Você pode usar um bloco secundário para permitir que um usuário fixe uma ação específica na página inicial e receba informações detalhadas sobre as ações num relance.

Este exemplo mostra o modelo de bloco largo TileWide310x150SmallImageAndText02, que exibe uma imagem de um gráfico do desempenho das ações (1), detalhes sobre a ação e sua cotação atual (2) e um carimbo de data e hora mostrando quando as informações foram atualizadas pela última vez (3).

O exemplo também mostra o modelo de bloco médio TileSquare150x150Text03, que exibe informações da ação e um carimbo de data e hora em formato menor.

Exemplo de ações individuais

 

Tópicos relacionados

O catálogo de modelos de bloco
TileTemplateType enumeration
Exemplo de notificações e blocos de aplicativos
Guia de início rápido: enviando uma atualização de bloco
Esquema XML de blocos
Visão geral de blocos e notificações de bloco
Tamanhos de imagem de blocos e notificações do sistema

 

 

Mostrar:
© 2014 Microsoft