Diretrizes para controles de hub nos aplicativos da Loja do Windows Phone

Artigo
04/07/2015

Partes do controle de hub (cabeçalho do hub, cabeçalho da seção do hub e assim por diante)

Descrição

O controle hub—no telefone, projetado para ser usado na orientação retrato apenas—exibe uma série de seções que podem ser estendidas lado a lado. Ele é um contêiner e modelo de navegação de tela inteira para um aplicativo.

Experiências de hub (anteriormente panorâmicas) fazem parte da aparência e experiência nativa do Windows Phone. Ao contrário de um aplicativo projetado para se ajustar aos confins de uma tela, um aplicativo de hub fornece um modo exclusivo de exibir controles, dados e serviços usando uma tela virtual larga que se estende horizontalmente além dos confins da tela. No Windows Phone, essas exibições inerentemente dinâmicas usam animações e conteúdo em camadas, de modo que as camadas se estendam em diferentes velocidades, semelhantemente ao efeito parallax.

As seções de um aplicativo de hub servem de ponto de início para experiências mais detalhadas. Seu objetivo deve ser fornecer aos usuários uma apresentação de conteúdo visualmente avançada.

Exemplos

Aplicativo do Windows Phone: um controle de hub

A interface do usuário consiste em camadas, que se movem independentemente: uma imagem ou cor de fundo, ou cabeçalho de hub, cabeçalhos de seção de hub e seções de hub.

Se configurada, uma imagem de fundo será a camada mais baixa e deverá fornecer ao hub a aparência rica, semelhante a uma revista. Geralmente uma imagem sem bordas (gráfico cheio), a imagem de fundo é potencialmente a parte mais visual do aplicativo.

O cabeçalho do hub identifica o aplicativo e deve estar visível, independentemente de como o usuário entre no aplicativo.

As seções de hub são o componente do aplicativo de hub que contêm outros controles e conteúdo. As seções de hub se movem na mesma velocidade que o toque panorâmico ou o movimento rápido. Um cabeçalho da seção de hub é opcional para qualquer seção de hub.

Miniaturas podem ser um importante elemento, fornecendo links a conteúdo ou mídia em outras páginas.

Controle de hub com miniaturas

Diretriz de uso

Com base nos requisitos do aplicativo, é possível adicionar diversas seções de hub ao controle de hub—, cada uma oferecendo um propósito funcional distinto. Por exemplo: uma seção pode conter uma série de links e controles, enquanto outra pode ser um repositório para imagens em miniatura. Um usuário pode navegar por essas seções com o gesto panorâmico, usando o suporte a gestos integrado no controle de hub.

Diretrizes de design

O comportamento e renderização do controle hub são permitidos na orientação retrato somente.
Um controle de hub pode ser temático, e é possível substituir as cores padrão, e assim por diante.
Use o efeito de encapsulamento do controle de hub para o Windows Phone, para transicionar da última seção para a primeira e vice-versa. Um hub que contém 1 ou 2 seções não irá encapsular. Um hub que contém 3 ou mais seções irá encapsular.
No Windows Phone, se usar uma barra de aplicativos em seu hub, configure o modo da barra como minimizado. Esse modo é projetado especificamente para maximizar o espaço da tela em uma página de hub. Para obter mais informações, consulte App bar for Windows Phone (Barra de aplicativos para o Windows Phone).
Mostre uma barra de progresso na Bandeja do Sistema, ou um indicador em tela cheia do carregamento enquanto seu controle de hub estiver sendo inicializado.
Mostre uma barra de progresso na Bandeja do Sistema quando uma seção do controle de hub estiver sendo atualizada ou renovada, mas não estiver bloqueando a interação com o usuário.
Primeira visita: a primeira seção mostrada deve apresentar o cabeçalho de hub corretamente alinhado à esquerda. Não há diretriz padrão para qual seção é a padrão; depende do conteúdo sendo apresentado.
Para visitas subsequentes ao mesmo controle de hub, leve o usuário de volta a onde começou.
Não crie mais que cinco seções em um controle de hub. Isso por motivos de desempenho e, também, para limitar o número de áreas pelas quais o usuário deve navegar. Use menos seções quando os conteúdos forem mais complexos. Não sobrecarregue o usuário com muitas seções. Com apenas quatro ou cinco seções, os usuários conseguirão se orientar quanto a onde estão e o que está à esquerda e à direita.
Não use um controle de tabela dinâmica dentro de um controle de hub ou vice-versa. É possível, no entanto, vincular um item em uma seção de hub a uma página diferente, contendo um controle de pivô.
Não use controles que possam realizar o movimento panorâmico ou rolar em um controle de hub. Por exemplo, colocar um controle de mapa dentro de uma seção de hub poderá dificultar o uso do controle de hub. A entrada do gesto poderá se confundir. Por exemplo, se houver um controle deslizante e você tentar deslizá-lo para a esquerda e estiver em uma seção do controle de hub, não ficará claro se você deseja rolar a seção ou mover o controle deslizante. A solução para um controle que precisa de entrega de gesto é colocá-lo em sua própria página e navegar até ela. É possível colocar um controle desabilitado por gesto em uma seção de hub—, talvez um mapa. Você poderia sobrepor um botão que ative o mapa. Pressionar o botão navegaria para uma página diferente, contendo apenas o mapa. O usuário poderia então pressionar o botão Voltar para voltar à seção do hub.
Para obter mais diretrizes sobre o uso do controle de hub, versus o uso do controle de tabela dinâmica, revise os seguintes tópicos:

Cabeçalhos de hub:

Use texto simples ou imagens, como um logotipo. Também é possível usar diversos elementos, como um logotipo e texto (ou outros elementos da interface do usuário).
Assegure-se de que a cor da fonte ou da imagem do cabeçalho o torne claramente visível na imagem de fundo (pois os dois se movem independentemente). Use fontes e estilos do sistema, salvo se houver necessidade de uma experiência com a marca específica, que use uma fonte, tamanho ou cor diferentes.
Evite animar o cabeçalho ou mudar seu tamanho dinamicamente.
Para fins de consistência, faça com que o cabeçalho do hub combine com o bloco de inicialização no início.
Ao determinar o layout de deu controle de hub, e projetar os cabeçalhos, evite problemas de oclusão com a Bandeja do Sistema ou outros elementos.

Cabeçalhos de seções de hub:

Use texto simples ou imagens, como um logotipo. Também é possível usar diversos elementos, como um logotipo e texto (ou outros elementos da interface do usuário).
Assegure-se de que a cor da fonte ou da imagem do cabeçalho o torne claramente visível na imagem de fundo (pois os dois se movem independentemente). Use fontes e estilos do sistema, salvo se houver necessidade de uma experiência com a marca específica, que use uma fonte, tamanho ou cor diferentes.
Evite animar o cabeçalho ou mudar seu tamanho dinamicamente.

Seções do hub:

Mantenha a beleza da experiência do controle de hub intacta, sendo seletivo a respeito do texto e das imagens inclusos no conteúdo da seção, de modo que o hub não se torne sobrecarregado e poluído.
Leve em consideração a orientação, se você usar a rolagem vertical. A rolagem vertical em uma seção de hub será aceitável enquanto a largura da seção for maior que a largura da tela.
Considere esconder seções do hub até que tenham conteúdo para exibir.

Arte de fundo

Um plano de fundo escuro, suave e de baixo contraste é o melhor. De uma única cor ou com um gradiente.
Uma foto sutil e discreta no plano de fundo pode tornar um controle de hub visualmente atrativo. Fotos com muitas cores brilhantes devem ser evitadas, pois elas podem dificultar a leitura das seções. Uma técnica prática é usar um filtro preto ou branco, semitransparente (um retângulo), em cima da foto. É possível fazer isso em uma ferramenta de edição de bitmap, simplificando a imagem.
Uma imagem de fundo deve cobrir todo o controle de hub. Isso significa que seu raio de aspecto deve ser igual ao do controle de hub, e seu tamanho deve considerar a resolução de dispositivo mais comum, a maior resolução de dispositivo e o desempenho. O formato JPEG é recomendado para manter os tamanhos de arquivo pequenos.
É possível trocar de imagens de fundo, mesmo enquanto o aplicativo estiver em execução, mas apenas uma imagem pode ser exibida por vez.

Miniaturas

Use imagens cortadas que realcem um assunto identificável, em vez de diminuir uma imagem inteira. Se a imagem não for identificável sem texto, até duas linhas de texto podem ser usadas para identificar o conteúdo.