Objetos da interface do usuário

Práticas eficazes de nomeação e layout de objetos da interface do usuário melhoram a legibilidade, a capacidade de manutenção e o desempenho. Esta seção descreve convenções para nomear, organizar e projetar elementos da interface do usuário para garantir clareza e consistência.

Nomear um objeto de interface do usuário

Em vez de usar prefixos baseados em função, tente manter os nomes de objetos da interface do usuário mínimos, claros e significativos, evitando redundância.
  • Use nomes concisos e descritivos que definam a função do objeto sem prefixos desnecessários. Por exemplo:
    • StartAction
       em vez de
      btnStart
    • TemperatureString
       em vez de
      lblTemperature
    • Username
       em vez de
      txtUsername
IMPORTANTE: Evite nomes vagos como
Object1
 ou
UIElement
.

Agrupamento e hierarquia

O agrupamento e a organização de objetos são essenciais para um ambiente colaborativo e para economizar tempo durante a criação do seu projeto.
  • Organize objetos da interface do usuário por função, como botões, rótulos, gráficos, contêineres e assim por diante.
  • Use hierarquias aninhadas para melhor estrutura e escalabilidade.
  • Minimize a contagem de nós evitando propriedades redundantes.
  • Reduza vínculos dinâmicos desnecessários que são necessários apenas em tempo de design.
    DICA: Consulte Vínculos dinâmicos para obter mais informações sobre o assunto.

Tamanho e layout

Garanta consistência no tamanho e posicionamento dos objetos para um layout mais equilibrado em seu aplicativo.
  • Garanta um dimensionamento consistente para objetos de interface do usuário semelhantes.
    DICA: Consulte Layout de objetos gráficos para obter mais informações sobre o assunto.
  • Use o posicionamento relativo (âncoras) para suportar diferentes tamanhos de tela.
  • Se você quiser que seus widgets se adaptem automaticamente às alterações de conteúdo, como o tamanho da fonte, use o recurso
    Auto
    .
    DICA: O recurso
    Auto
     foi projetado para cenários de ajuste ao conteúdo, tornando-o ideal quando os contêineres precisam se ajustar ao conteúdo ou quando o texto precisa se adaptar às dimensões do contêiner.
    Para ativar o
    Auto
    , abra o painel
    Propriedades
     e remova o valor do campo
    Altura
     ou
    Largura
    . Após removido, o campo mudará automaticamente para
    Auto
    , permitindo o redimensionamento dinâmico com base no conteúdo.

Design consistente

Aplique consistência para um aplicativo bem acabado.
  • Siga um tema unificado para cores, fontes e bordas.
  • Alinhe os elementos da interface do usuário para uma aparência estruturada e profissional.
DICA: Consulte Objetos gráficos e seus subcapítulos para obter mais informações.

Tipos reutilizáveis

Use tipos reutilizáveis e estilos globais para garantir a consistência e simplificar a manutenção entre os componentes da interface do usuário.
  • Crie tipos reutilizáveis para objetos comuns da interface do usuário, como botões e campos de texto.
  • Use estilos globais para texto e botões para manter a uniformidade.

Espaçamento, alinhamento e sistema de grade

Aplique espaçamento e alinhamento de layout consistentes para criar um layout de interface do usuário limpo, escalável e visualmente equilibrado.
  • Siga a regra dos 8 pixels: Mantenha o espaçamento e as margens em incrementos de 8px (8px, 16px, 24px).
  • Use um layout baseado em grade para melhor estrutura da interface do usuário.
  • Garanta preenchimento e margens consistentes para um visual uniforme.
Dê sua opinião
Tem dúvidas ou comentários sobre esta documentação? Por favor, envie seu comentário aqui.
Normal