Diretrizes de design do aplicativo

A criação de Power Apps eficazes e amigáveis é essencial para a criação de soluções de negócios impactantes. Este guia fornece as melhores práticas e recomendações para criar Power Apps, com foco em controles modernos, design de formulário, uso de contêiner, otimização da galeria e criação de componentes reutilizáveis.

Controles modernos

Os controles modernos em aplicativos de tela representam um avanço significativo no desenvolvimento e design de interfaces de usuário dentro do ecossistema da Microsoft. Com base no Sistema fluente de design da Microsoft, esses controles foram projetados para oferecer uma experiência de usuário rápida, orientada ao desempenho e acessível, garantindo a integração perfeita com os recursos de temas. A introdução desses controles, incluindo listas de guias, barras de progresso, botões de informações, spinners e muito mais, ressalta uma mudança estratégica em direção à criação de aplicativos mais intuitivos, responsivos e visualmente atraentes. Usando esses controles modernos, os desenvolvedores podem facilmente implementar elementos sofisticados da interface do usuário (interface do usuário) que são esteticamente agradáveis e funcionalmente ricos, melhorando a satisfação e o envolvimento geral do usuário.

O design inerente desses controles, mantendo os temas em mente, permite uma aparência unificada e consistente em todos os aplicativos, reduzindo significativamente o esforço necessário na personalização e identidade visual de aplicativos. A capacidade de atualizar automaticamente os estilos de todos os controles com base no tema definido simplifica o processo de design e garante que os aplicativos permaneçam visualmente coerentes durante todo o processo. Essa abordagem se alinha às necessidades das empresas modernas que buscam manter a consistência da marca, oferecendo experiências digitais de alta qualidade. Os controles modernos também enfatizam a acessibilidade e o desempenho, garantindo que os aplicativos sejam utilizáveis por uma ampla gama de públicos, incluindo pessoas com deficiências, alinhando-se aos princípios de design inclusivo. Como tal, os controles modernos em aplicativos Canvas não são apenas um conjunto de componentes de interface do usuário, mas um conjunto de ferramentas transformadoras que capacitam os desenvolvedores a criar aplicativos mais eficientes, manuteníveis, acessíveis e coesos que atendam às necessidades em evolução de empresas e usuários.

Design e diretrizes de formulários

Esta seção fornece as práticas recomendadas para criar formulários em Power Apps, incluindo organizar seu formulário, reutilização de formulários, modos de formulário e posicionamento de controle.

Organize seu formulário

• Divida o formulário em seções lógicas e agrupe campos relacionados.
• Procure manter seu formulário em uma única tela. Se for longo, considere dividi-lo em várias telas, etapas ou guias.
• Use uma linguagem clara e simples para rótulos de campo e evite termos ou jargões desconhecidos.
• Implemente regras de validação para garantir a precisão dos dados. Para campos obrigatórios, indique claramente que eles são obrigatórios. Valide endereços de email, números de telefone e outros formatos, conforme necessário.

Reutilizar formulários

• Use um único formulário para criar novos registros, editar registros existentes e exibir registros no modo somente exibição.
• Reutilize o mesmo formulário para reduzir o tempo de desenvolvimento e manutenção, garantindo a consistência.

Modos de formulário

Defina o modo de formulário dinamicamente com base nas ações do usuário. Por exemplo:

• Ao criar um registro, defina o formulário para o modo "Novo".
• Ao editar um registro existente, defina o formulário para o modo "Editar".
• Ao exibir um registro, defina o formulário para o modo "Exibir".

Posicionamento do controle

• Coloque diferentes controles (como galeria, formulário de exibição e formulário de edição) em telas separadas para torná-los distinguíveis.
• Combine esses controles com fórmulas para criar a experiência de usuário coesa.

Contêineres

À medida que o aplicativo de tela se desenvolve para atender a mais situações empresariais, o número de controles aumenta, e você precisa organizar os controles de acordo com sua função. Uma maneira to do isso é agrupar os controles. No entanto, agrupar controles nem sempre é recomendado. O controle de aplicativo de tela Container agrupa um conjunto de controles e possui suas próprias propriedades.

Os contêineres funcionam como espaços vazios onde você pode inserir e organizar controles em relação ao canto superior esquerdo do contêiner. Você pode aninhar contêineres, o que permite criar layouts mais complexos e gerenciar controles relacionados.

Contêineres são controles reais com suas próprias propriedades, como Width e BorderColor. Os contêineres afetam o layout do aplicativo e ajudam os usuários de leitores de tela a entender a estrutura do aplicativo.

Embora possa adicionar qualquer controle em um grupo, você só deve adicionar controles relacionados logicamente em um contêiner.

Organizar elementos em Power Apps usando grupos permite que os usuários apliquem propriedades compartilhadas a vários elementos. No entanto, fazer alterações de propriedade individuais em um grupo pode exigir ajustes manuais. Os grupos não fazem parte da estrutura lógica de um aplicativo por motivos de acessibilidade porque os leitores de tela não podem reconhecê-los. A incapacidade de aninhar grupos também torna a criação de layouts intrincados um desafio.

Design e diretrizes de galeria

O controle galeria em Power Apps permite que você exiba e interaja com os dados. Tenha em mente as práticas recomendadas a seguir ao criar galerias para garantir o desempenho ideal e a experiência do usuário.

• Evite alterar os itens da galeria internamente: não modifique a Items propriedade de uma galeria dentro de eventos de controles filhos, como OnChange ou OnSelect. Essa ação pode causar um comportamento inesperado, especialmente ao lidar com controles que disparam eventos quando seus valores são alterados.

• Tenha cuidado com os controles disparados pelo OnChange: tenha cuidado ao usar controles como caixa de combinação, seletor de data, controle deslizante ou alternância em galerias. Esses controles podem disparar o evento OnChange inesperadamente, o que pode causar problemas potenciais, como loops infinitos.

• Avaliar o impacto no desempenho na aplicação de patch: considere o impacto no desempenho ao aplicar patch ou atualizar itens em uma galeria, especialmente ao lidar com muitos itens. A aplicação de patch pode ser lenta e a galeria pode recarregar todos os itens, o que afeta o desempenho.

• Trate laços infinitos com cuidado: se a modificação de dados da galeria disparar eventos que levam a laços infinitos, use controles modernos ou controles que não disparam OnChange quando os dados são alterados para interromper o laço.

• Evite galerias aninhadas: galerias aninhadas podem levar a problemas de desempenho e associação de dados complexas. Sempre que possível, evite aninhar galerias. Em vez disso, tente projetar sua estrutura de dados e usar funções de maneira otimizada.

• Use galerias de altura flexível: galerias de altura fixa podem limitar a visibilidade do conteúdo, especialmente ao lidar com dados dinâmicos. Use galerias de altura flexíveis definindo a propriedade Height para Parent.Height ou um valor dinâmico com base em seus dados. Essa configuração garante que a galeria ajuste sua altura para acomodar diferentes quantidades de dados.

  

• Optimize o carregamento de dados: ao otimizar o carregamento de dados em Power Apps, busque e exiba apenas as colunas necessárias em uma galeria em vez de recuperar todo o conjunto de dados.

  Aqui está um exemplo de como você pode obter essa otimização. Suponha que você tenha uma coleção nomeada ProductSales com várias colunas, mas deseja exibir apenas as colunas "ProductName" e "QuantitySold" em uma galeria.

  // Collection named ProductSales with sample sales data
  
  ClearCollect(ProductSales, 
      Table(
          { ProductName: "Phone", UnitPrice: 499.99, QuantitySold: 100 },
          { ProductName: "Laptop", UnitPrice: 999.99, QuantitySold: 50 },
          { ProductName: "Tablet", UnitPrice: 299.99, QuantitySold: 75 }
      )
  )
  
  // Bind the gallery to display only the "ProductName" and "QuantitySold" columns
  
  Gallery1.Items = ShowColumns(ProductSales, ProductName, QuantitySold)
  

Saiba mais sobre as práticas recomendadas da Galeria.

Criar componentes reutilizáveis com o PCF (Power Apps Component Framework)

O Power Platform permite que você crie componentes reutilizáveis por meio do PCF (Power Apps Component Framework). Saiba mais na visão geral Power Apps Component Framework.

Considere criar componentes PCF em Power Apps para os seguintes cenários:

• Complex UI elements: você precisa criar elementos de interface do usuário complexos ou controles que não estão prontamente disponíveis nos controles de Power Apps padrão.

• Controles personalizados para requisitos específicos: seu aplicativo tem requisitos específicos que não são atendidos pelos controles prontos para uso e você precisa criar controles personalizados adaptados às suas necessidades.

• Consistent user experience across apps: você deseja manter uma experiência de usuário consistente em vários Power Apps ou ambientes encapsulando funcionalidades específicas em um componente PCF.

• Reutilização entre aplicativos: você prevê a necessidade de reutilizar uma parte específica da funcionalidade ou do elemento de interface do usuário em vários aplicativos. A criação de um componente pcf permite que você crie uma vez e reutilize.

• Implementing advanced logic: você precisa implementar lógica de negócios avançada ou cálculos que estão além dos recursos de fórmulas ou funções padrão em Power Apps.

• Experiência aprimorada do usuário: você pretende aprimorar a experiência geral do usuário criando componentes visualmente atraentes e interativos que não são alcançáveis com os controles padrão.

Próxima etapa