Layout

O layout de seu aplicativo, ambos conteúdo e navegação entre páginas, é essencial para o design e aparência geral do aplicativo. O layout pode criar uma hierarquia, organizar seu conteúdo e refletir a identidade de sua marca. Uma experiência de usuário com um aplicativo depende da estrutura de páginas e conteúdo.

Layout no Windows

Os layouts do Windows são autenticamente digitais. Eles adotam o meio digital e evitam as metáforas da vida real que são geralmente desnecessárias ou confusas no mundo digital. A liberdade dos layouts digitais sem restrições podem criar aplicativos e experiências bonitos e poderosos para os usuários.

Os layouts do Windows possui uma aparência limpa e despoluída e tentam reduzir a poluição visual na tela. Você pode escolher mover os controles para as barras do aplicativo nas bordas do aplicativo. Os recursos principais de um aplicativo podem então ter lugar de destaque na tela, aprimorando a usabilidade do seu aplicativo.

Dependendo do conteúdo do seu aplicativo, você pode desejar criar uma composição leve e arejada com peças interativas amplas, ou uma experiência mais densa que pareça rica com o conteúdo e comandos a explorar. Por exemplo, o aplicativo Reading List tem um layout aberto, minimalista. Considere o que é visível no seu aplicativo e o que se move para fora da tela, como suas escolhas de layout afetam a experiência e uso do seu aplicativo.

O aplicativo Xbox Music usa uma grade vertical e um planejamento vertical não convencional para exibir uma ampla gama de conteúdo de uma vez. A barra persistente do aplicativo na parte inferior assegura que controles usados frequentemente estejam sempre visíveis, de modo que os usuários podem mover suas playlists, enquanto eles exploram outras áreas do aplicativo.

Inovação no layout

Songza, um aplicativo de música que muda de layout com base no cenário do usuário, usa um layout horizontal minimalista. Já que a maioria do tempo do usuário no aplicativo é ouvindo, em vez de navegando ativamente, menos é verdadeiramente mais.

Muitos aplicativos usam um sistema hierárquico de navegação. O hub, ou a página de aterrissagem, é o ponto de entrada do usuário no aplicativo e em níveis adicionais de conteúdo. Ele exibe o conteúdo em uma exibição rica e panorâmica que permite aos usuários ver as novidades e os destaques e depois se aprofundar no conteúdo do aplicativo. O controle de hub oferece uma estrutura e a flexibilidade necessária para personalizar seu aplicativo e adaptá-lo à sua marca.

A navegação hierárquica é somente um modelo de layout de aplicativo e seu aplicativo deve tirar vantagem do modelo de layout e navegação que melhor se adapta à sua marca e cria a melhor experiência para os usuários do aplicativo. A composição e layout são abertos para criatividade e fornecem uma grande oportunidade para os criadores para criar algo único.

Considere ambas as orientações de retrato e paisagem para o seu aplicativo. Decida se a grade na qual o conteúdo será arranjado é mais eficaz em um formato horizontal e vertical. Como mais e mais aplicativos tiram vantagem de uma linguagem de design moderna do Windows, as abordagens para o layout e design do aplicativo evoluem para encaixar as necessidades individuais e marca de cada aplicativo. O layout é um lugar ideal para inovar e fazer seu aplicativo se destacar. Veja Fazendo o layout da página de um aplicativo para saber mais sobre o sistema de grade do Windows.

Exemplos

Facebook

O Facebook usa um layout baseado em grade para organizar sua variedade de conteúdo e comandos na tela e permitir os usuários a se envolver imediatamente com todos os serviços oferecidos pelo Facebook.

Foursquare

O Foursquare é um aplicativo sobre localização e novas experiências O layout do aplicativo reflete essa missão com uma série de imagens que exibe cada locação em destaque. Avaliações e comentários são ancorados abaixo da imagem, criando uma composição unificada que permite aos usuários avaliar um local rapidamente e tocar para explorar com mais profundidade.

O layout do Foursquare é dinâmico e se reestrutura para encaixar o conteúdo melhor em cada área de seu aplicativo. Fazendo uma panorâmica pela área esquerda do aplicativo produz um mapa de pontos populares nas proximidades. Tocar em um local exibe uma página detalhada com todos os check-ins e comentários de usuários. Tocar em qualquer um desses exibe um trecho da recomendação.

NOOK

O aplicativo NOOK da Barnes and Noble usa o conceito fundamental de modelo hierárquico baseado em hub, mas personaliza-o profundamente para criar uma experiência com a marca NOOK diferenciada. A sombra esmaecida abaixo de cada livro dá um movimento sutil à qualidade física dos livros, em vez de simplesmente exibir as imagens da capa. Neste caso, uma sugestão de analogia com o mundo real aprimora a experiência do usuário.

Tópicos relacionados

Diretrizes do controle hub

Padrões de navegação

Definindo o layout de uma página de aplicativo

Definindo o layout da interface do usuário (aplicativos Windows Runtime)

Escolhendo um layout (aplicativos da Windows Store que usam JavaScript e HTML)

Definindo o layout de sua interface do usuário (XAML)

Galeria