Aplicativos de compras

Artigo
04/07/2015

O livro de ideias de aplicativos de compras descreve um aplicativo de compras fictício para o Windows 8.1. Você pode obter inspiração para o design do seu próprio aplicativo de compras examinando os cenários deste tópico e vendo como a linguagem de design da Microsoft é utilizada no aplicativo.

Exemplo de código disponível: a Tallan Inc. criou um ótimo exemplo de aplicativo baseado no livro de ideias de aplicativo de compras. Você pode baixar o exemplo de aplicativo para ver uma implementação real dos recursos descritos neste livro de ideias e muito mais. Baixe o exemplo de aplicativo de compras da Tallan aqui.

Cenários de aplicativo de compras

O aplicativo de compras descrito neste tópico usa os recursos de design da Microsoft para criar uma experiência de compras envolvente para os usuários.

Blocos dinâmicos e navegação	Pesquisa e redimensionamento de janelas	Compartilhamento

Atraia os usuários para o conteúdo do seu aplicativo

Você pode usar a linguagem de design da Microsoft para criar uma experiência de navegação casual que seja divertida, fácil e poderosa. Também pode usar blocos dinâmicos para atrair os usuários para o seu aplicativo. Siga este cenário para ver como você pode tornar seu aplicativo de compras envolvente.

imagem de blocos dinâmicos e navegação

Matt Berg está usando seu tablet com Windows 8.1 no ônibus no trajeto de volta do trabalho para casa.

imagem de blocos dinâmicos e navegação

Um bloco dinâmico dizendo "Acabou de Chegar:" alerta Matt sobre a chegada da nova coleção outono-inverno. Matt tem interesse, então clica no bloco para entrar no aplicativo.

imagem de blocos dinâmicos e navegação

Matt precisa de uma nova jaqueta, então clica na categoria "Casacos e Jaquetas".

imagem de blocos dinâmicos e navegação

A exibição da categoria apresenta layout horizontal, com uma visão detalhada de todas as opções mostrada na mesma tela. Matt pode procurar sem ter de navegar por nenhuma hierarquia de conteúdo.

imagem de blocos dinâmicos e navegação

Matt pinça para ativar o zoom semântico, que permite a ele exibir rapidamente e navegar pela lista de itens.

imagem de blocos dinâmicos e navegação

Após clicar na seção "Jaquetas", Matt seleciona uma jaqueta para ver na exibição do item e a adiciona ao carrinho.

imagem de blocos dinâmicos e navegação

Matt conclui a compra adquirindo a jaqueta junto com uma camisa que tinha adicionado ao carrinho anteriormente.

imagem de blocos dinâmicos e navegação

Resumo de blocos dinâmicos e cenário de navegação

Neste cenário, vemos casos de uso que tiram proveito dos seguintes elementos de design:

Os blocos dinâmicos atraem os usuários para o seu aplicativo, exibindo informações que são relevantes para eles.
Seu conteúdo se destaca em seu aplicativo sem nenhum artifício e permite que os usuários sejam imersos na experiência que lhes interessa.

Para obter informações sobre blocos dinâmicos e zoom semântico, consulte o seguinte:

Para auxiliá-lo a escolher qual o melhor navegador para o seu aplicativo, acesse Tipos de navegadores.

Acesse o Padrão de navegador simples atualmente em uso na seção Características para Aplicativos, da série do início ao fim.

Promover o envolvimento do usuário

Você pode usar a linguagem de design da Microsoft para envolver os usuários quando eles estão prontos para comprar, adicionando uma caixa de pesquisa, implementando o contrato de pesquisa, habilitando a multitarefa de usuários e projetando aplicativos que funcionam bem quando são redimensionados para restringir larguras.

imagem de blocos dinâmicos e navegação

Jon Rodman está usando seu tablet com Windows 8.1 para navegar em um blog de estilo.

imagem de blocos dinâmicos e navegação

Do Internet Explorer ou de qualquer outro aplicativo, Jon pode ativar o botão Pesquisar a partir da direita e procurar uma jaqueta parecida.

imagem de blocos dinâmicos e navegação

Jon seleciona o aplicativo "Head to Toe", que exibe os resultados da pesquisa pelo termo "Jaqueta".

imagem de blocos dinâmicos e navegação

Jon usa um filtro para reduzir os resultados da pesquisa com base no preço. Então, ele seleciona um item.

imagem de blocos dinâmicos e navegação

Jon redimensiona o aplicativo à esquerda, para poder comparar o item com a jaqueta do blog. Satisfeito com sua escolha, Jon adiciona a jaqueta ao carrinho.

imagem de blocos dinâmicos e navegação

Ainda com uma largura estreita, Jon decide concluir sua compra.

imagem de blocos dinâmicos e navegação

Resumo da promoção do envolvimento do usuário

Neste cenário, vemos casos de uso que tiram proveito dos seguintes elementos de design:

O contrato de Pesquisa coloca seu aplicativo na lista de possíveis destinos quando seu cliente tem uma intenção de compra.
Um aplicativo que funciona bem com larguras estreitas permite que os clientes procurem e comparem seu conteúdo com outros aplicativos e sites.

Para saber mais sobre pesquisa e tamanhos de janelas, consulte o seguinte:

Conectar com Compartilhamento

Você pode usar a linguagem de design da Microsoft para conectar os usuários a qualquer outro aplicativo, contato ou rede social.

imagem de blocos dinâmicos e navegação

David Hamilton acabou de comprar uma jaqueta nova. Após fazer o pedido, ele é incentivado a compartilhar a novidade.

imagem de blocos dinâmicos e navegação

David usa o contrato de Compartilhamento para compartilhar o código da promoção com seus amigos.

imagem de blocos dinâmicos e navegação

Resumo da conexão de usuários com Compartilhamento

Neste cenário, vemos casos de uso que tiram proveito dos seguintes elementos de design:

É possível converter seu conteúdo em uma origem de Compartilhamento, e o Windows 8.1 conecta você a outros aplicativos, email e redes sociais.
Você pode transformar seu aplicativo em um destino de Compartilhamento e receber conteúdo, links ou qualquer outro tipo de dados estruturados.

Para obter informações sobre compartilhamento, consulte o seguinte: