requiere un equilibrio cuidadoso entre el rendimiento, el mantenimiento y la claridad.
A lo largo de este documento, exploraremos enfoques clave para lograr este equilibrio, tales como:
Tipos de enfoque
Casos de uso de los distintos enfoques
Cómo implementar cada enfoque de manera eficiente
Estos conceptos provienen originalmente del mundo del diseño web y las aplicaciones multiplataforma, pero ahora son imprescindibles en las HMI industriales, donde la misma aplicación puede visualizarse en dispositivos muy diferentes.
Enfoque escalable:
Un enfoque escalable en una interfaz consiste en cambiar el tamaño proporcionalmente manteniendo el diseño, la posición y la legibilidad, independientemente de la resolución del dispositivo.
Por ejemplo: Un diseño realizado a 1920×1080 que también encaja correctamente en 1280×720 o 3840×2160.
Enfoque adaptable:
Un enfoque adaptable en una interfaz consiste en ajustar su diseño en función del dispositivo o la resolución, cargando diferentes estructuras como corresponda.
Por ejemplo: Un panel de control que se muestra compacto en una tableta y ampliado en un PC de panel industrial.
Enfoque con capacidad de respuesta:
Un enfoque con capacidad de respuesta en una interfaz reorganiza sus contenidos en tiempo real según el espacio disponible, sin cambiar de página.
Ejemplo: Una cuadrícula que cambia de 4 a 2 columnas al cambiar el tamaño de la ventana.
Cuándo usar cada enfoque
La tabla a continuación muestra el enfoque recomendado para cada escenario de interfaz:
Por ejemplo, para crear un encabezado, utilice un objeto
Panel
y establezca su alineación horizontal en
Estirar
. Esto garantiza que, independientemente de la resolución final, el objeto ocupe todo el ancho disponible.
IMPORTANTE:
La asignación de tamaños fijos a los objetos contenedor evita que la interfaz se escale en distintas resoluciones de pantalla. Asigne tamaños fijos solo si es necesario.
Tamaño
Resultado
800px
1280px
CONSEJO:
Establezca la alineación del contenedor en
Estirar
para permitir la distribución automática del espacio en función de la resolución. Incluso si la aplicación se desarrolla con una resolución fija, los elementos se escalarán en tiempo de ejecución para adaptarse a su contenedor.
Tamaño
Resultado
800px
1280px
Implemente un enfoque adaptativo
Al diseñar para resoluciones muy diferentes (por ejemplo, 1920x1080 frente a 480x272), debe crear diseños independientes. Utilice el control
Cargador de paneles
para cargar dinámicamente diferentes diseños en función de la resolución.
Para determinar la resolución de pantalla, utilice las propiedades
Ancho
y
Altura
de
MainWindow
. Establezca la función
Cambiar regla de modelización
de estas propiedades en
Obligatoria
para garantizar que estos valores estén disponibles en tiempo de ejecución.
IMPORTANTE:
El uso de la función
Cambiar regla de modelización
solo está pensado para usuarios avanzados. Solo podrá ver esta función si ha activado el
modo Avanzado
en el panel
Opciones de FactoryTalk Optix Studio
.
Limite el uso de esta función a este ámbito específico para evitar comportamientos inesperados.
CONSEJO:
Es una práctica recomendable almacenar los valores calculados en variables auxiliares dentro de
MainWindow
, especialmente si se utilizan en varios lugares. Esto evita la repetición de
Vínculos dinámicos complejos
compuestos por varios convertidores, lo que reduce el número de nodos y mejora el rendimiento.
Implementar un enfoque con capacidad de respuesta
Además de usar el
Cargador de paneles
, la visibilidad condicional es clave para el diseño adaptable. Por ejemplo, es posible que un menú lateral solo aparezca por encima de un cierto ancho de pantalla, mientras que un botón de alternancia aparezca por debajo de ese umbral.
El
DiseñoDeCuadrícula
es esencial para organizar el contenido de forma dinámica. Permite definir el número de filas y columnas.
