Objetos de la interfaz de usuario

Las prácticas eficaces de nomenclatura y diseño de objetos de la interfaz de usuario mejoran la legibilidad, el mantenimiento y el rendimiento. Esta sección describe las convenciones para asignar nombres, organizar y diseñar elementos de la interfaz de usuario para garantizar la claridad y la coherencia.

Asignar un nombre a un objeto de la interfaz de usuario

En lugar de utilizar prefijos basados en roles, procure que los nombres de los objetos de la interfaz de usuario sean mínimos, claros y significativos, evitando redundancias.
  • Utilice nombres concisos y descriptivos que definan la función del objeto sin prefijos innecesarios. Por ejemplo:
    • StartAction
       en lugar de
      btnStart
    • TemperatureString
       en lugar de
      lblTemperature
    • Username
       en lugar de
      txtUsername
IMPORTANTE: Evite nombres imprecisos como
Object1
 o
UIElement
.

Contenedores y jerarquía

La organización de contenedores y objetos es esencial para un entorno colaborativo y para ahorrar tiempo al crear su proyecto.
  • Organice los objetos de la interfaz de usuario por función mediante contenedores, como paneles, botones, etiquetas, gráficos y elementos relacionados.
  • Utilice jerarquías anidadas para mejor la estructura y la escalabilidad.
  • Minimice el número de nodos evitando las propiedades redundantes.
  • Reduzca los vínculos dinámicos innecesarios que solo se necesitan en tiempo de diseño.
    CONSEJO: Consulte Vínculos dinámicos para obtener más información sobre este tema.

Tamaño y diseño

Garantice la coherencia en el tamaño y posicionamiento de los objetos para lograr un diseño más equilibrado en su aplicación.
  • Asegúrese de que el tamaño sea consistente para objetos de interfaz de usuario similares.
    CONSEJO: Consulte Diseño de objetos gráficos para obtener más información sobre este tema.
  • Utilice posicionamiento relativo (anclajes) para soportar diferentes tamaños de pantalla.
  • Si desea que sus widgets se adapten automáticamente a los cambios de contenido, como el tamaño de fuente, utilice la función
    Auto
    .
    CONSEJO: La función
    Auto
     está diseñada para escenarios de ajuste al contenido, lo que la hace ideal cuando los contenedores necesitan ajustarse a su contenido o cuando el texto necesita adaptarse a las dimensiones del contenedor.
    Para activar
    Auto
    , abra el panel
    Propiedades
     y quite el valor de los campos
    Altura
     o
    Ancho
    . Una vez eliminado, el campo cambiará automáticamente a
    Auto
    , habilitando el cambio de tamaño dinámico en función del contenido.

Diseño coherente

Aplique coherencia para lograr una aplicación bien acabada.
  • Utilice hojas de estilo y sus estilos predefinidos.
  • Siga un tema unificado para los colores, las fuentes y los bordes.
  • Alinee los elementos de la interfaz de usuario para lograr un aspecto estructurado y profesional.
CONSEJO: Consulte Objetos gráficos, Hojas de estilo y Aplicar un estilo global al proyecto para obtener más información.

Tipos reutilizables

Utilice tipos reutilizables y estilos globales para garantizar la coherencia y simplificar el mantenimiento en todos los componentes de la interfaz de usuario.
  • Cree tipos reutilizables para objetos comunes de la interfaz de usuario, como botones y campos de texto.
  • Utilice estilos globales para el texto y los botones para mantener la uniformidad.

Espaciado, alineación y sistema de cuadrícula

Aplique un espaciado coherente y una alineación de diseño para crear un diseño de interfaz de usuario claro, escalable y visualmente equilibrado.
  • Siga la regla de los 8 píxeles: Mantenga el espaciado y los márgenes en incrementos de 8px (8px, 16px, 24px).
  • Utilice un diseño basado en cuadrícula para mejorar la estructura de la interfaz de usuario.
  • Asegúrese de que el relleno y los márgenes sean consistentes para lograr un aspecto uniforme.
Entregue su opinión
¿Tiene dudas o comentarios acerca de esta documentación? Por favor deje su opinión aquí.
Normal