Diretrizes de design do aplicativo

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. Baseados no Sistema Fluent Design da Microsoft, esses controles são projetados para oferecer uma experiência de usuário rápida, orientada ao desempenho e acessível, garantindo uma integração perfeita com 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 implementar facilmente elementos sofisticados da interface do usuário que são esteticamente agradáveis e funcionalmente ricos, aumentando o envolvimento e a satisfação 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. Isso se alinha perfeitamente com as necessidades das empresas modernas que buscam manter a consistência da marca e, ao mesmo tempo, oferecer 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 de tela não são apenas um conjunto de componentes de interface do usuário, mas um conjunto de ferramentas transformador que capacita os desenvolvedores a criar aplicativos mais eficientes, sustentáveis, acessíveis e coesos que atendam às necessidades em evolução de empresas e usuários.

Importante

Embora um subconjunto dos controles modernos em aplicativos de tela tenha sido disponibilizado para o público geral (GA), o conjunto de recursos mais amplo permanece em versão preliminar. Recomendamos que você explore e forneça comentários sobre esses controles de visualização. No entanto, é importante ter em mente que seus recursos e funcionalidades podem ser refinados com base em comentários e testes antes de chegarem à disponibilidade geral.

Design e diretrizes de formulários

Organizar seu form

• 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 campos, evitando 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.
• A reutilização do mesmo formulário reduz o tempo de desenvolvimento e manutenção, garantindo 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 aumenta de tamanho para lidar com mais cenários de negócios, o número de controles continua crescendo e é necessário organizar os controles com base na função que desempenham. Uma maneira fácil de fazer isso é selecionar os controles juntos e agrupá-los em um grupo. No entanto, agrupar controles nem sempre é recomendado. O controle do Container do aplicativo de tela pode armazenar um conjunto de controles e tem 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ê tem a flexibilidade de aninhar contêineres, permitindo a criação de layouts mais complexos e proporcionando liberdade no design.

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 no Power Apps usando grupos permite que os usuários apliquem propriedades compartilhadas a vários elementos. No entanto, fazer alterações de propriedades individuais dentro de um grupo pode exigir ajustes manuais. Além disso, os grupos não têm presença na estrutura lógica de um aplicativo por motivos de acessibilidade, pois os leitores de tela não conseguem reconhecê-los. Além disso, a incapacidade de aninhar grupos torna difícil criar layouts mais complexos.

Design e diretrizes de galeria

Evite alterar itens da galeria de dentro

Evite modificar a propriedade Items de uma galeria em eventos de controle filho como OnChange ou OnSelect. Isso pode levar a um comportamento inesperado, especialmente ao lidar com certos controles que disparam eventos quando seus valores mudam.

Seja cauteloso com os controles acionados por OnChange

Seja cauteloso 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, levando a problemas potenciais, como loops infinitos.

Impacto no desempenho na aplicação de patches

Esteja atento ao impacto no desempenho ao aplicar patches ou atualizar itens em uma galeria, especialmente ao lidar com um grande número de itens. A aplicação de patches pode ser lenta e a galeria pode recarregar todos os itens, afetando o desempenho.

Lide com loops infinitos com cuidado**

Se a modificação dos dados da galeria disparar eventos que levam a loops infinitos, considere usar controles modernos ou controles que não acionem OnChange quando os dados forem alterados para quebrar o loop.

Evite galerias aninhadas

Galerias aninhadas podem levar a problemas de desempenho e associação de dados complexos.

Sempre que possível, evite aninhar galerias. Em vez disso, tente projetar sua estrutura de dados e usar funções de maneira otimizada.

Usar galerias de altura flexíveis

Galerias de altura fixa podem resultar em visibilidade de conteúdo limitada, 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. Isso garante que a galeria ajuste sua altura para acomodar quantidades variáveis de dados.

Otimizar carga de dados

Ao otimizar o carregamento de dados no Power Apps, talvez você queira buscar e exibir 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 conseguir isso: supondo que você tenha uma coleção EmployeeData com várias colunas e queira exibir apenas as colunas "Nome" e "Departamento" 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)

Obtenha mais informações sobre as melhores práticas da Galeria.

Criando componentes reutilizáveis

Ao criar componentes de código personalizado usando o Power Apps Component Framework (PCF)

O Power Platform permite a criação de componentes reutilizáveis por meio do Power Apps Component Framework (PCF). Mais detalhes aqui.

Aqui estão cenários em que você pode considerar a criação de componentes PCF no Power Apps:

Elementos complexos da interface de usuário

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

Controles personalizados para requisitos específicos

Quando 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.

Experiência de usuário consistente em aplicativos

Quando 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.

Capacidade de reutilização nos aplicativos

Quando você antecipa a necessidade de reutilizar uma parte específica da funcionalidade ou 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.

Implementar lógica avançada

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

Experiência aprimorada do usuário

Quando você pretende melhorar a experiência geral do usuário criando componentes visualmente atraentes e interativos que não podem ser alcançados com os controles padrão.

Próxima etapa

Diretrizes de Design responsivo