Diretrizes de Design responsivo

Aplicativos de tela responsiva adaptam seu layout e navegação ao visor disponível em vez de dimensionar uma tela fixa. Projete um comportamento responsivo intencionalmente para que o aplicativo permaneça utilizável em cada tamanho de janela, orientação do dispositivo, nível de zoom e modo de entrada com suporte.

Cada uma das diretrizes a seguir tem como objetivo garantir que seu aplicativo canvas ofereça a melhor experiência ao usuário, independentemente do tamanho ou da orientação da tela do dispositivo. Essas diretrizes abordam um dos aspectos mais críticos do desenvolvimento de aplicativos modernos. Essas diretrizes são fundamentais para desenvolvedores que buscam aprimorar a acessibilidade e o envolvimento do usuário de seus Power Apps.

Adapte-se aos tamanhos de tela

Os aplicativos Canvas devem ser projetados para ajustar automaticamente seu layout e interface com base no tamanho da tela do dispositivo. Essa capacidade de resposta garante que o aplicativo permaneça funcional e visualmente atraente em vários dispositivos, de smartphones a computadores desktop.

Usar contêineres de layout automático

Use contêineres de layout automático horizontal e vertical como a estrutura primária para uma tela responsiva. Esses contêineres organizam e alinham dinamicamente os componentes do aplicativo, certificando-se de que eles respondam efetivamente às alterações nas dimensões da tela.

Desative Ajustar à escala e ajuste a proporção e a orientação

Desative a configuração Ajustar à tela para habilitar a responsividade real do aplicativo. Essa configuração impede o dimensionamento e promove a adaptação de layout natural a vários tamanhos de tela. Além disso, ajuste a taxa de proporção e as configurações de Orientação de Bloqueio . Esses ajustes garantem que o layout do aplicativo responda efetivamente a diferentes tamanhos e orientações de tela. O aplicativo mantém uma interface consistente e funcional se o dispositivo está no modo retrato ou paisagem.

Usar layouts dinâmicos

Use designs de layout, como tela dividida e barra lateral, que oferecem diferentes experiências do usuário em vários dispositivos. Essa adaptabilidade aprimora a funcionalidade do aplicativo, tornando-o mais intuitivo para usuários em qualquer dispositivo.

Use fórmulas para layout dinâmico

Use fórmulas em vez de coordenadas fixas para controles de posicionamento e dimensionamento. Essa abordagem garante que eles se adaptem às alterações nas dimensões da tela para um layout dinâmico e responsivo.

Planejar para vários dispositivos

Um design responsivo eficaz envolve antecipar a aparência e o funcionamento do aplicativo em diferentes dispositivos. Essa antecipação inclui decisões sobre redimensionar elementos ou escondê-los inteiramente em telas menores para otimizar o espaço e manter a usabilidade.

Implementação prática

Transformar um aplicativo de tela não responsivo em um responsivo requer uma abordagem sistemática. Essa abordagem envolve ajustar as configurações de capacidade de resposta e configurar cuidadosamente as propriedades do contêiner para garantir que os elementos dentro do aplicativo se adaptem a diferentes tamanhos de tela.

Resources

Próxima etapa

Legibilidade do código

  • Last updated on