Hub de aplicativo central com menu da página inicial (controle de hub ou pivô) (aplicativos da Windows Phone Store)

Você pode estar projetando um aplicativo com muitos recursos. Quando você observa os recursos, pode decidir organizá-los em áreas diferentes. Essas áreas terminarão como partes separadas do aplicativo, que o usuário desejará visitar. Você precisará criar um modo fácil para que o usuário navegue por essas áreas da IU. Esse tipo de aplicativo precisa de um hub central de aplicativo a partir do qual o usuário navega para cada subárea desse aplicativo.

Imagine criar um aplicativo para gerenciar um time de futebol, por exemplo. Esse aplicativo exigiria diversas áreas de funcionalidade—uma para agendamento de jogos de treinos, outra para informações sobre o plantel, outra para resultados e estatísticas dos jogadores, além de uma última para reprises em vídeo de jogos passados. Você deve fornecer um meio para que o usuário navegue para cada uma dessas diferentes áreas da IU. Você precisa fazer isso implementando um hub central de aplicativo com uma página inicial exibida quando o aplicativo é iniciado.

Interface de usuário de hub central de aplicativo para gerenciamento de time de futebol

A partir do hub central da interface de usuário, o usuário pode navegar para qualquer área dentro do aplicativo. Após a navegação até essa subárea, você pode apresentar a usuário qualquer IU necessária nesse momento. Por exemplo, no aplicativo para time de futebol, o usuário pode ir da página do hub central do aplicativo para uma página que permite que ele veja estatísticas dos jogadores para uma determinada partida. Quando o usuário termina de utilizar uma determinada subárea do aplicativo e deseja ir para outra diferente, deve retornar primeiro ao hub central do aplicativo. O usuário não pode ir diretamente de Resultados e estatísticas para Calendário. Ele ou ela precisa primeiro voltar ao hub central do aplicativo.

Observação  Utilizar um hub central do aplicativo com uma página inicial para navegar até áreas diferentes de seu aplicativo é um ótimo design, que permite aos usuários interagir com o aplicativo de modo eficiente.

Há diversos modos de apresentar visualmente o hub do aplicativo ao usuário. Recomendamos que você utilize o controle de hub. Esse tópico descreve esse design e então mostra a você variações que você também pode pensar em usar.

Uso do controle de hub como o hub do aplicativo

A Microsoft fornece um controle para IU chamado de controle de hub, que pode ser utilizado como o hub central do aplicativo. Esse controle permite que o usuário navegue para todas as áreas de funcionalidade dentro do aplicativo. O controle de hub é estruturado conforme demonstrado a seguir—uma imagem de fundo no hub que fica atrás de todo o controle como seu plano de fundo, uma seção inicial à qual você é enviado quando o aplicativo é iniciado e seções adicionais que segmentam sua IU no nível máximo do aplicativo.

Hub Música

O controle de hub apresenta ao usuário uma ampla tela virtual que se estende horizontalmente além dos confins da tela. O usuário move-se pela tela horizontalmente, seção por seção, realizando movimentos rápidos para passar por elas. Quando o aplicativo é iniciado, o usuário é levado à primeira seção do hub. Há variações de utilização a partir desse ponto, dependendo de como você deseja que a navegação funcione. Cada uma das variações é explicada.

Seção inicial

Essa primeira seção na extrema esquerda pode ser utilizada como página inicial, como ponto inicial para se navegar para subáreas do aplicativo. Essa seção apresenta o menu com as áreas dentre as quais o usuário faz sua seleção. No Hub Música mostrado na figura anterior, um toque com o dedo em rádio leva você para a página de rádio, que é na realidade um subaplicativo dentro do Hub Música. A IU do hub é totalmente substituída e é apresentada ao usuário a IU de rádio. Se o usuário agora deseja ir até a área de podcast, ele deve navegar de volta à página inicial do hub utilizando o botão voltar do aparelho e então tocar na entrada podcast na lista de menu. Uma exibição com rolagem pode ser utilizada na página inicial se a lista de subáreas for maior do que a tela é capaz de exibir.

Página Rádio do Hub Música

A lista de locais para os quais navegar na seção Início pode conter entradas que levariam você a um aplicativo totalmente novo. Por exemplo, a página inicial do Hub Música tem uma entrada para levar você à Store. Tocar nesse item leva você à subárea de música da Store, que é um controle de hub por si só.

Seções à direita

As seções à direita do painel da página inicial contêm interfaces de usuário que você quer que esteja facilmente acessível para o usuário. Como utilizá-las, depende de você. Não confunda o usuário utilizando subáreas que são acessadas de diferentes modos. Em vez disso, utilize essas seções à direita para conter algum tipo de informações resumidas relativas ao conteúdo dessas subáreas. Por exemplo, no caso do Hub Música, há duas seções adicionais que exibem mídia acessada recentemente.

A seção histórico do Hub Música é um modo conveniente de não precisar navegar para uma subárea, e oferece a você acesso rápido a itens que você reproduziu ou visualizou recentemente. Se você visitou a subárea de música e ouviu uma certa canção, essa canção agora passa a ser exibida na seção histórico para acesso rápido. Nesse caso, as seções oferecem acesso rápido a conteúdo que você visitou nas subáreas.

O aplicativo Facebook é outro exemplo de aplicativo que utiliza o controle de hub para oferecer ao usuário um modo fácil de navegar por suas funções. Ele tem outra vez a mesma seção inicial que apresenta uma lista de áreas para as quais o usuário pode navegar. Por exemplo, um toque na entrada amigos leva o usuário à IU que gerencia a lista de seus amigos.

Em um controle de nível superior, as seções à direita são basicamente utilizadas para fornecer acesso rápido ao que os designers pensaram que seriam as exibições mais úteis aparecendo no nível superior. A seção mais recente do hub é na verdade IU de uma subárea. Para obtê-la a partir de uma seção inicial, toque em feed de notícias; então, você é levado a essa subárea (que é na verdade um controle de pivô). O controle de pivô da subárea feed de notícias contém esses itens: mais recente, fotos, links e vídeos. Os designers pensaram que, em vez de exigir que o usuário navegue até o feed de notícias e depois para mais recente, eles também poderiam expor essa como uma seção no controle de hub superior. Algo similar ocorre nas seções fotos e eventos do controle de hub superior.

IU de hub central de aplicativo para o aplicativo de Facebook

Uso de uma grade de imagens

Em vez de exibir uma lista de áreas para as quais navegar a partir de sua página inicial, você pode preferir exibir uma grade de imagens entre as quais selecionar. A mesma coisa está sendo realizada; ela só tem aparência um pouco diferente. Com imagens, você obtém uma iconografia visual que pode tornar mais fácil determinar onde aquela seleção leva você. Cada imagem pode ter texto sobreposto a si para fornecer informações sobre aquela área do aplicativo e sua atividade.

Se você tivesse uma grade de 3 x 3, poderia ter até nove imagens dentre as quais selecionar se necessário. A partir da seção inicial que hospeda essa grade de imagens, o usuário pode clicar em quaisquer imagens para navegar para áreas de recursos diferentes que o aplicativo oferece.

Essa seção inicial pode na verdade ser uma área que se estende por mais de uma medida da largura que pode ser exibida em tela. Por exemplo, você pode fazer com que a seção inicial de imagens se estenda horizontalmente para a direita para ocupar mais espaço, caso precise. O aplicativo Kelley Blue Book faz com que a grade se estenda para a direita, conforme visto na figura a seguir. Para obter o resto das imagens, você apenas faz um movimento rápido horizontal para aplicar movimento panorâmico. A seção inicial do controle de hub nesse caso tem o dobro da largura.

IU de hub do aplicativo para o aplicativo Kelley Blue Book

Não crie uma grade de imagens que tenha rolagem vertical, porque isso se torna muito confuso para o usuário.

Começando fora da seção inicial

Mesmo que você use o controle de hub e tenha uma seção inicial que age como um menu ou hub para navegar a áreas com determinados recursos de seu aplicativo, você não precisa tornar esse o ponto de partida quando seu aplicativo é aberto. A razão pela qual você pode escolher exibir outra seção primeiro é simplesmente o impacto que você pode causar. Por exemplo, se você tem um aplicativo que exibe filmes e mostra horários, você pode ter uma seção inicial contendo uma lista de seleções para subáreas do aplicativo. Em vez de fazer o usuário começar por algo que não é tão interessante, você pode ter uma seção que mostra imagens dos filmes mais recentes e populares. Desse modo, o usuário entra no aplicativo em contato com algo mais chamativo.

Ao abrir o aplicativo do eBay, você não precisa começar pela seção inicial. Em vez disso, esse design faz com que os usuários comecem pela seção contendo os negócios de destaque do momento. Com um movimento rápido para a direita, você vai até a seção inicial do hub do aplicativo com imagens nas quais clicar para navegar até as subáreas do aplicativo Assistindo, Vendendo, Comprando e Mensagens. Observe também o uso da caixa de texto de pesquisa na parte superior. Esse também é um elemento de IU útil para se posicionar na parte superior, de modo a encontrar rapidamente as coisas com ele.

IU de hub de aplicativo para o aplicativo eBay

Não crie uma grade de imagens que tenha rolagem vertical, porque isso se torna muito confuso para o usuário.

Menu personalizado de áreas da IU com recursos

Há alternativas para o uso do controle de hub fornecido pela Microsoft. O hub oferece a você a capacidade de ter múltiplas seções no nível mais elevado. Porém, pode ser que você não precise dessas seções. Em vez disso, você pode ter uma lista simples em uma única página, conforme mostrado na figura seguinte. Essa seria a página exibida ao usuário quando o aplicativo é aberto. Esse aplicativo utiliza um ícone à esquerda de um título e descrição de texto para cada subárea à qual se pode navegar.

IU de hub de aplicativo para o aplicativo diário fácil

Você pode optar por uma experiência de interação exclusiva apresentada ao usuário, em que você utiliza um certo plano de fundo gráfico com as subáreas navegáveis apresentadas de um modo artístico exclusivo. Você pode desejar fazer isso para estabelecer uma identidade visual para si. Isso é mais aplicável a alguns tipos de aplicativos de entretenimento. A seguir, um exemplo de uma página inicial visualmente atraente.

Aplicativo MyComic

Combine aplicativos parecidos em um só

Como já mencionado, seu aplicativo pode ter áreas de funcionamento distintas suficientes para que você tenha pensado em dividir esses recursos em aplicativos separados, como parte desses mesmos aplicativos ou dentro deles. Você não precisa fazer isso; você ainda pode ter um único aplicativo. A tela principal que é exibida quando o aplicativo se abre age como um local inicial para acessar os subaplicativos em si, que compõem o seu aplicativo único. Essa seção de hub do aplicativo principal será a página exibida quando os usuários clicam no ícone de seu aplicativo e começam a usá-lo.

Recomendamos que você evite criar um aplicativo separado para cada área única sobre as quais você tenha recursos. O problema nisso é que o usuário precisa sair de um de seus aplicativos e então iniciar o outro. Imagine ter nove aplicativos diferentes com os quais o usuário precisa interagir. Em vez disso, recomendamos que você crie um único aplicativo inicial para os usuários, e a partir desse único ponto de partida acessem as diferentes áreas de seu aplicativo. Você, como designer de aplicativo, deseja que os usuários sejam atraídos pelo seu hub central e sejam capazes de ver tudo o que você oferece em uma tela central.

Níveis de navegação

A decisão difícil de tomar é como dividir as funções de seu aplicativo, e por quais níveis de navegação você deseja que o usuário seja capaz de passar. Se você utiliza o controle de hub com uma seção inicial, você precisa decidir que IU é exibida quando o usuário toca em uma seleção a partir da lista. Uma seleção fará com que você navegue saindo do controle de hub e vá para um novo controle de IU, como uma página única ou talvez um controle de pivô. Nós utilizamos a seção inicial do Hub Música conforme mostrado abaixo para ilustrar essa situação.

Hub de aplicativo para Música

No caso do Hub Música, a seleção rádio é uma única página de IU que permite que você mude a estação de rádio que está ouvindo. Nessa subárea, não há necessidade para uso posterior da lista, hub e nem de controles de pivô para continuar com a navegação. A seleção música da seção inicial, todavia, apresenta exibições diferentes das canções que você tem. A figura a seguir mostra uma porção da árvore de IU através da qual navegar para a seleção música.

Árvore de navegação para a música no Hub Música

Quando você está na área música, um controle de pivô com rolagem horizontal é exibido. A página de pivô na qual você sempre chega primeiro em música é o item de pivô artistas. A partir daí você pode mover-se para a esquerda ou direita pelos diferentes itens de pivô. Cada item de pivô dá a você um meio diferente para visualizar as músicas dentre as quais você precisa escolher.

Quando o usuário tiver navegado para a área que deseja no aplicativo, você apresenta a ele a IU necessária para esse momento. A partir de qualquer determinada subárea do aplicativo, os usuários efetivamente realizam a tarefa que desejam. Nesse segundo nível, não é recomendável mostrar a eles outra lista de áreas para as quais podem navegar. É melhor manter somente o controle de hub da página principal e um segundo nível de detalhe. A partir desse segundo nível, o usuário retornaria à seção inicial antes de voltar para outra área do aplicativo. O botão Voltar do aparelho é o que é utilizado para retornar.

Utilizando uma imagem de plano de fundo

O controle de hub permite que você exiba uma imagem que se estende por trás de todas as seções. Você sempre pode ter a mesma imagem, ou pode mudá-la programaticamente de tempos em tempos para alterar o seu tema. Você pode exibir uma imagem relacionada aos interesses dos usuários no uso que eles fazem de seu aplicativo. Utilize uma imagem que não é desorganizada demais e não interferirá no conteúdo de IU acima dela.

Imagem de plano de fundo

Múltiplos painéis de página inicial

Você pode precisar de mais de uma seção contendo uma lista de subáreas para as quais navegar. Você pode ter um motivo para separar duas listas diferentes de áreas de navegação. Nesse caso, você pode ter duas seções que agem como seção inicial.

Telas principais de inicialização

Seu aplicativo pode não ser capaz de ir diretamente para o hub central do aplicativo quando é inicializado. Um motivo é que você pode precisar apresentar algum tipo de logon desbloqueio por senha para o usuário antes que ele possa ter acesso ao aplicativo. Você também pode preferir apresentar alguma página de apresentação da identidade visual para mostrar aos usuários antes que entrem em seu aplicativo.

IU de página de login para o aplicativo diário fácil

Tópicos relacionados

Hub

Pivô