Técnicas de design responsivo

O design responsivo utiliza apenas um layout onde o conteúdo é fluido e pode adaptar-se a tamanhos de janelas que mudam. O design responsivo permite-lhe criar uma funcionalidade de uma só vez e esperar que funcione em todos os tamanhos de ecrã. O design adaptativo é semelhante, mas substitui um layout por outro.

As aplicações XAML usam píxeis eficazes para garantir que a sua interface será legível e utilizável em todos os dispositivos com Windows. Então, por que razão alguma vez haveria de querer personalizar a interface da sua aplicação para um dispositivo específico ou tamanho de ecrã?

• Para fazer o melhor uso possível do espaço e reduzir a necessidade de navegar

  Se desenhares uma aplicação para ficar bem num dispositivo com ecrã pequeno, como um tablet, a aplicação será utilizável num PC com um ecrã muito maior, mas provavelmente haverá algum espaço desperdiçado. Pode personalizar a aplicação para mostrar mais conteúdo quando o ecrã estiver acima de um determinado tamanho. Por exemplo, uma app de compras pode apresentar uma categoria de produtos num tablet, mas mostrar várias categorias e produtos simultaneamente num PC ou portátil.

  Ao colocar mais conteúdo no ecrã, reduz a quantidade de navegação que o utilizador precisa de realizar.

• Para tirar partido das capacidades dos dispositivos

  Certos dispositivos têm mais probabilidade de ter certas capacidades. Por exemplo, os portáteis provavelmente têm um sensor de localização e uma câmara, enquanto uma TV pode não ter nenhum dos dois. A sua aplicação pode detetar quais as funcionalidades disponíveis e ativar as funcionalidades que as utilizam.

• Para otimizar a entrada

  A biblioteca universal de controlos funciona com todos os tipos de entrada (toque, caneta, teclado, rato), mas ainda podes otimizar para certos tipos de entrada reorganizando os elementos da interface.

Quando otimiza a interface da sua aplicação para larguras específicas de ecrã, dizemos que está a criar um design responsivo. Aqui estão algumas técnicas de design responsivo que pode usar para personalizar a interface da sua aplicação.

Reposicionamento

Podes alterar a localização e posição dos elementos da interface para tirar o máximo partido do tamanho da janela. Neste exemplo, a janela mais pequena empilha elementos verticalmente. Quando a aplicação é ajustada para uma janela maior, os elementos podem tirar partido da maior largura da janela.

Neste design de exemplo para uma aplicação de fotografia, a aplicação de fotografia reposiciona o seu conteúdo em ecrãs maiores.

Redimensionar

Podes otimizar para o tamanho da janela ajustando as margens e o tamanho dos elementos da interface. Por exemplo, isto poderia aumentar a experiência de leitura num ecrã maior simplesmente aumentando o quadro do conteúdo.

Refluxo

Ao alterar o fluxo dos elementos da interface consoante o dispositivo e a orientação, a sua aplicação pode oferecer uma exibição ótima do conteúdo. Por exemplo, ao passar para um ecrã maior, pode fazer sentido adicionar colunas, usar contentores maiores ou gerar itens de lista de uma forma diferente.

Este exemplo mostra como uma única coluna de conteúdo que se desloca verticalmente num ecrã mais pequeno pode ser refluída num ecrã maior para mostrar duas colunas de texto.

Mostrar/ocultar

Pode mostrar ou esconder elementos da interface com base no espaço do ecrã, ou quando o dispositivo suporta funcionalidades adicionais, situações específicas ou orientações preferidas do ecrã.

Por exemplo, os controlos do leitor multimédia reduzem o conjunto de botões em ecrãs mais pequenos e expandem-se em ecrãs maiores. O leitor multimédia numa janela maior consegue gerir muito mais funcionalidades no ecrã do que numa janela mais pequena.

Parte da técnica de revelar ou esconder inclui escolher quando mostrar mais metadados. Com janelas mais pequenas, é melhor mostrar o mínimo de metadados. Com janelas maiores, uma quantidade significativa de metadados pode ser revelada. Alguns exemplos de quando mostrar ou ocultar metadados incluem:

• Numa aplicação de email, pode mostrar o avatar do utilizador.
• Numa aplicação de música, pode mostrar mais informações sobre um álbum ou artista.
• Numa aplicação de vídeo, pode mostrar mais informações sobre um filme ou espetáculo, como detalhes do elenco e da equipa técnica.
• Em qualquer aplicação, pode separar colunas e revelar mais detalhes.
• Em qualquer aplicação, podes transformar algo empilhado verticalmente em disposição horizontal. Ao passar de uma janela pequena para uma janela maior, os itens de lista empilhados podem mudar para revelar linhas de itens de lista e colunas de metadados.

Rearquiteto

Pode colapsar ou fazer um fork da arquitetura da sua aplicação para melhor direcionar dispositivos específicos. Neste exemplo, expandir a janela mostra todo o padrão de lista/detalhes.

Disposição adaptativa

Um layout adaptativo é semelhante ao layout responsivo, mas substitui completamente a interface com base no formato em que é apresentada. O design adaptativo tem múltiplos tamanhos fixos de layout e faz com que a página carregue um dado layout com base no espaço disponível.

Esta técnica permite-te mudar a interface do utilizador para pontos de interrupção específicos. Neste exemplo, o painel de navegação e a sua interface compacta e transitória funcionam bem para um ecrã mais pequeno, mas num ecrã maior, os separadores podem ser uma escolha melhor.

O controlo NavigationView suporta esta técnica permitindo aos utilizadores definir a posição do painel para o topo ou para a esquerda.

Tópicos relacionados

• Fluent Design - Esquema
• Tamanhos de ecrã e pontos de interrupção
• XAML com layouts responsivos
• Controlos XAML