Orientações de design da aplicação

Controlos modernos

Os controlos modernos em aplicações de tela representam um avanço significativo no desenvolvimento e design de interfaces de utilizador dentro do ecossistema Microsoft. Baseados no Fluent Design System da Microsoft, estes controlos foram concebidos para proporcionar uma experiência de utilizador rápida, orientada para o desempenho e acessível, tudo isto ao mesmo tempo que assegura uma integração perfeita com as capacidades de personalização. A introdução destes controlos, incluindo listas de separadores, barras de progresso, botões de informações, ícones de progresso e muito mais, sublinha uma mudança estratégica para a criação de aplicações mais intuitivas, reativas e visualmente apelativas. Ao utilizar estes controlos modernos, os programadores podem implementar facilmente elementos sofisticados da IU que são esteticamente agradáveis e funcionalmente ricos, aumentando o envolvimento e a satisfação gerais dos utilizadores.

O design inerente destes controlos, tendo em mente a personalização, permite uma aparência unificada e consistente em todas as aplicações, o que reduz significativamente o esforço necessário na personalização e aplicação de marca corporativa nas aplicações. 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 por toda parte. Isso se alinha perfeitamente com as necessidades das empresas modernas que buscam manter a consistência da marca enquanto oferecem 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ência, alinhando-se aos princípios de design inclusivo. Como tal, os controlos modernos em aplicações tela não são apenas um conjunto de componentes de IU, mas um conjunto de ferramentas transformativas que capacita os programadores para criarem aplicações mais eficientes, de manutenção fácil, acessíveis e coesas que vão ao encontro das necessidades em evolução das empresas e dos utilizadores.

Design e orientações de formulários

Organizar o formulário

• Divida o formulário em secções lógicas e agrupe campos relacionados.
• Procure manter o formulário num único ecrã. Se for longo, considere dividi-lo em vários ecrãs, passos ou separadores.
• Utilize uma linguagem clara e simples para as etiquetas de campo, 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 são obrigatórios. Valide endereços de e-mail, números de telefone e outros formatos, conforme necessário.

Reutilizar formulários

• Utilize um único formulário para criar novos registos, editar registos existentes e apresentar registos no modo só de visualização.
• A reutilização do mesmo formulário reduz o tempo de desenvolvimento e manutenção, assegurando a consistência.

Modos de formulário

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

• Ao criar um novo registo, defina o formulário para o modo "Novo".
• Quando editar um registo existente, defina o formulário para o modo "Editar".
• Quando apresentar um registo, defina o formulário no modo "Ver".

Colocação do controlo

• Coloque os controlos diferentes (por exemplo, galeria, apresentar formulário e editar formulário) em ecrãs separados para os tornar distinguíveis.
• Combine estes controlos com fórmulas para criar uma experiência de utilizador coesa.

Contentores

À medida que a aplicação de tela cresce em tamanho para abordar mais cenários de negócio, o número de controlos continua a crescer e é necessário organizar os controlos com base na função que desempenham. Uma forma fácil de o fazer é selecionar os controlos e agrupá-los. No entanto, agrupar controlos nem sempre é recomendado. O controlo Container de aplicação de tela pode conter um conjunto de controlos e tem as suas próprias propriedades.

Os contentores funcionam como espaços vazios onde pode inserir e organizar controlos em relação ao canto superior esquerdo do contentor. Tem a flexibilidade de aninhar contentores, o que permite a criação de esquemas mais complexos e proporciona liberdade no design.

Os contentores são controlos reais com propriedades próprias, como Width e BorderColor. Os contentores afetam o esquema da aplicação e ajudam os utilizadores de leitores de ecrã a compreenderem a estrutura da aplicação.

Apesar de poder adicionar controlos num grupo, só deverá adicionar controlos logicamente relacionados num contentor.

A organização de elementos na utilização de grupos do Power Apps permite que os utilizadores apliquem propriedades partilhadas a vários elementos. No entanto, fazer alterações de propriedade individuais dentro de um grupo pode exigir ajustes manuais. Além disso, os grupos não estão presentes na estrutura lógica de uma aplicação por razões de acessibilidade, uma vez que os leitores de ecrã não conseguem reconhecê-los. Além disso, a incapacidade de aninhar grupos dificulta a criação de esquemas mais complexos.

Design da galeria e orientações

Evite alterar itens da galeria a partir de dentro

Evite modificar a propriedade Items de uma galeria em eventos de controlos subordinados, como OnChange ou OnSelect. Isto pode levar a um comportamento inesperado, especialmente quando se trata de determinados controlos que acionam eventos quando os respetivos valores são alterados.

Seja cauteloso com controlos acionados por OnChange

Tenha cuidado ao utilizar controlos como Caixa de combinação, Seletor de datas, Controlo de deslize ou Alternar em galerias. Estes controlos podem acionar o OnChange evento inesperadamente, levando a potenciais problemas, como ciclos infinitos.

Impacto no desempenho da aplicação de patches

Tenha em atenção o impacto no desempenho ao aplicar patches ou atualizar itens numa galeria, especialmente quando se trata de 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 acionar eventos que levam a ciclos infinitos, considere utilizar controlos modernos ou controlos que não acionem OnChange quando os respetivos dados mudam para quebrar o ciclo.

Evite galerias aninhadas

As galerias aninhadas podem levar a problemas de desempenho e a vinculação de dados complexa.

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

Utilizar galerias de altura flexível

Galerias de altura fixa podem limitar a visibilidade do conteúdo, especialmente quando se trata de dados dinâmicos.

Utilize galerias de altura flexíveis definindo a propriedade Height para Parent.Height ou um valor dinâmico com base nos seus dados. Isto garante que a galeria ajusta a altura para acomodar quantidades variáveis de dados.

Otimizar o carregamento de dados

Ao otimizar o carregamento de dados no Power Apps, poderá pretender obter e apresentar apenas as colunas necessárias numa galeria, em vez de obter todo o conjunto de dados.

Eis um exemplo de como o conseguir: partindo do princípio de que tem uma coleção EmployeeData com várias colunas e que pretende apresentar apenas as colunas "Nome" e "Departamento" numa 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.

Criação de componentes reutilizáveis

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

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

Eis os cenários em que pode considerar a criação de componentes PCF no Power Apps:

Elementos complexos da IU

Quando necessita de criar elementos ou controlos complexos da interface de utilizador que não estão prontamente disponíveis nos controlos padrão Power Apps .

Controlos personalizados para requisitos específicos

Quando a sua aplicação tem requisitos específicos que não são cumpridos pelos controlos predefinidos e precisa de criar controlos personalizados adaptados às suas necessidades.

Experiência de utilizador consistente em todas as aplicações

Quando pretende manter uma experiência de utilizador consistente em vários Power Apps ou ambientes, ao encapsular funcionalidades específicas num componente PCF.

Reutilização entre aplicações

Quando antecipa a necessidade de reutilizar uma parte específica da funcionalidade ou do elemento da interface de utilizador em várias aplicações, a criação de um componente PCF permite que crie apenas uma vez e reutilize.

Implementar lógica avançada

Quando necessita de implementar lógicas de negócio ou cálculos avançados que estão para além das capacidades de fórmulas ou funções padrão no Power Apps.

Experiência de utilizador melhorada

Quando pretende melhorar a experiência geral do utilizador criando componentes visualmente apelativos e interativos que não são alcançáveis com os controlos predefinidos.

Próximo passo