Diretrizes do controle hub

Um controle hub permite organizar o conteúdo do aplicativo em seções ou categorias distintas, mas relacionadas. A seções de um hub devem ser percorridas em uma ordem preferencial e podem servir como ponto de partida para experiências mais detalhadas.

Exemplo de um hub

O conteúdo em um hub pode ser mostrado em uma exibição panorâmica robusta em que os usuários têm uma prévia do que é novo, do que está disponível e do que é relevante. Normalmente os hubs têm um cabeçalho de página, e cada uma das várias seções de conteúdo tem um cabeçalho de seção.

Este é o controle correto?

O controle hub tem vários recursos que o fazem funcionar bem para a criação de um padrão de navegação de conteúdo.

  • Navegação visual

    Um hub permite que o conteúdo seja exibido em uma matriz diversificada, breve e fácil de pesquisar.

  • Categorização

    Cada seção do hub permite que seu conteúdo seja organizado em uma ordem lógica.

  • Suporte herdado

    Os hubs são convertidos bem nos vários destinos de dispositivos futuros.

  • Tipos de conteúdo misto

    Com tipos de conteúdo misto, razões e tamanhos de ativos variáveis são comuns. Um hub permite que cada tipo de conteúdo seja dispostos de forma exclusiva e organizada em cada seção.

  • Larguras de conteúdo e página variáveis

    Por ser um modelo panorâmico, o hub permite a variação nas larguras da seção. Isso é ótimo para conteúdo de diferentes profundidades e permite que um número pequeno a alto de itens sejam formatados igualmente bem.

  • Arquitetura flexível

    Se preferir manter a arquitetura do aplicativo superficial, você poderá ajustar todo o conteúdo de canal em um resumo de seções do hub.

Arquitetura do hub

O controle hub tem um padrão de navegação hierárquico que dá suporte a aplicativos com uma arquitetura de informações relacionais. Um hub consiste em categorias de conteúdo diferentes, cada uma mapeada para as páginas de seção do aplicativo. As páginas de seção podem ser exibidas na forma que melhor represente o cenário e o conteúdo contido na seção.

estrutura delineada de um aplicativo hierárquico Food with Friends

Layouts e movimento panorâmico/rolagem

Há várias maneiras de criar o dispor e navegar pelo conteúdo em um hub; basta ter certeza de que as listas de conteúdo em um hub sempre tenham movimento panorâmico na direção perpendicular à da rolagem do hub.

Movimento panorâmico horizontal

Exemplo de um hub de movimento panorâmico horizontal

Movimento panorâmico vertical

Exemplo de um hub de movimento panorâmico vertical

Movimento panorâmico horizontal com lista/grade de rolagem vertical

Exemplo de um hub de movimento panorâmico horizontal com uma lista de rolagem vertical

Movimento panorâmico vertical com lista/grade de rolagem horizontal

Exemplo de um hub de movimento panorâmico horizontal

Exemplos

O hub proporciona uma grande flexibilidade de design. Isso permite projetar aplicativos que possuam uma grande variedade de experiências atraentes e visualmente ricas. Você pode usar uma imagem de celebridade ou uma seção de conteúdo para o primeiro grupo; uma imagem grande da celebridade pode ser cortada tanto na vertical quanto na horizontal, sem perder o centro de interesse. Veja a seguir um exemplo de uma única imagem de celebridade e como ela pode ser cortada para paisagem, retrato e largura estreita.

imagem de celebridade cortada para diferentes tamanhos de janela

Em dispositivos móveis, uma seção de hub está visível por vez.

Exemplo de controle hub no Windows Phone

Recomendações gerais

  • Para que os usuários saibam que há mais conteúdo em uma seção do hub, recomendamos recortar o conteúdo de forma que uma parte dele seja mostrada.
  • Dependendo das necessidades do aplicativo, é possível adicionar diversas seções de hub ao controle hub, cada uma oferecendo seu próprio propósito funcional. Por exemplo, uma seção poderia conter uma série de links e controles, enquanto outra poderia ser um repositório de miniaturas. Um usuário pode se movimentar entre essas seções usando o suporte a gestos integrado no controle hub.
  • O refluxo dinâmico de conteúdo é a melhor maneira de acomodar tamanhos de janela diferentes.
  • Se houver muitas seções no hub, considere a adição do zoom semântico. Isso também facilita a localização de seções quando o aplicativo é redimensionado para uma largura estreita.
  • Recomendamos que um item em uma seção de hub não leve a outro hub; em vez disso, você pode usar cabeçalhos interativos para navegar para seções ou páginas de outro hub.
  • O hub é um ponto de partida que deve ser personalizado para atender às necessidades do seu aplicativo. É possível alterar os seguintes aspectos de um hub:
    • Número de seções
    • Tipo de conteúdo em cada seção
    • Colocação e ordem das seções
    • Tamanho das seções
    • Espaçamento entre seções
    • Espaçamento entre uma seção e a parte superior ou inferior do hub
    • Estilo do texto e tamanho em cabeçalhos e conteúdo
    • Cor da tela de fundo, seções, cabeçalhos de seção e conteúdo de seção

Tópicos relacionados

Para designers
Noções básicas de navegação
Para desenvolvedores (XAML)
Navegação hierárquica, do início ao fim
Windows.UI.Xaml.Controls Hub class
Exemplo de controle Hub XAML
Usando um hub
Para desenvolvedores (HTML)
Navegação hierárquica, do início ao fim
WinJS.UI.Hub object
Amostra de controle Hub em HTML

 

 

Mostrar:
© 2015 Microsoft