Marco de prototipado automatizado de interfaces de usuario que integra principios de diseño cognitivo y visual para mejorar la usabilidad y la claridad del diseño

Resumen

Este estudio presenta un marco automatizado para la prototipación de interfaces de usuario que integra principios de diseño cognitivo, modelado perceptual del color y aprendizaje profundo. El sistema mejora la accesibilidad, la claridad del diseño, la armonía del color y la coherencia entre pantallas, lo que resulta en diseños de interfaz coherentes y centrados en el usuario.

Resumen

El diseño eficaz de interfaces de usuario (UI) requiere un equilibrio armonioso entre atractivo visual, usabilidad cognitiva y consistencia de diseño. Sin embargo, los enfoques actuales de generación automática de interfaces se centran principalmente en la apariencia visual o en la detección de componentes, y carecen de un marco unificado que integre principios cognitivos, inteligencia del color y razonamiento estructural. Además, los métodos existentes presentan limitaciones en la generalización del diseño, baja interpretabilidad, selección estática de colores e inconsistencia de comportamiento entre pantallas. En este contexto, este trabajo propone un marco automatizado para la creación de prototipos de interfaces que integra la detección de componentes basada en la red neuronal convolucional con regiones más rápidas (Faster R-CNN) y un modelado del color perceptual guiado por el espacio de color uniforme CIECAM02 (CAM02-UCS), enriquecido con principios cognitivos y de diseño visual. Se utiliza Faster R-CNN para identificar componentes de la interfaz e inferir estructuras jerárquicas a partir de conjuntos de datos de interfaces a gran escala. Un módulo mejorado de generación de color analiza imágenes de marca o de referencia para garantizar paletas cromáticas perceptualmente uniformes, armónicas y compatibles con la usabilidad, empleando CAM02-UCS. Estas salidas se optimizan además mediante reglas de diseño cognitivo, incluyendo agrupación gestáltica, leyes de Fitts y Hick, espaciado basado en la atención y modelado de jerarquía visual, con el fin de generar automáticamente diseños de interfaz refinados y orientados a tareas. Los experimentos realizados en los conjuntos de datos RICO, ENRICO y Guo sobre colores en interfaces muestran que el sistema propuesto alcanza una precisión del 92,4 % en la detección de componentes, mejora la claridad del diseño y la precisión del orden de lectura en un 18,7 %, y genera paletas de color valoradas como un 24,5 % más armónicas por diseñadores, en comparación con los métodos de referencia. Las evaluaciones de usuarios también indican una reducción del 31 % en la carga cognitiva percibida y un aumento del 28 % en la consistencia del diseño entre pantallas. Estos resultados demuestran que combinar la comprensión estructural basada en aprendizaje profundo con modelado del color fundamentado en la percepción y principios de diseño cognitivo produce prototipos de interfaz altamente eficientes, estéticamente coherentes y fáciles de usar. Este marco establece un enfoque novedoso, integral y centrado en el ser humano para la creación automatizada de prototipos de interfaces inteligentes.

Introducción

Las interfaces gráficas de usuario (GUI) sirven como un medio fundamental de comunicación entre los seres humanos y los sistemas informáticos, influyendo significativamente en la usabilidad, accesibilidad y experiencia general del usuario (UX)^1,2. Los sistemas de software modernos dependen de interfaces intuitivas y visualmente atractivas para atraer y retener usuarios. Tradicionalmente, el diseño de interfaces implica crear diseños gráficos que posteriormente son traducidos en código de front-end por ingenieros. Sin embargo, las diferencias en los protocolos específicos de cada plataforma entre sistemas operativos requieren adaptaciones repetidas, lo que aumenta la complejidad y el esfuerzo de desarrollo. Por ello, la generación automática de código de interfaz de usuario ha surgido como una dirección de investigación importante, reduciendo el esfuerzo manual y mejorando la eficiencia del desarrollo.

Los primeros enfoques para la generación automatizada de interfaces de usuario combinaban técnicas tradicionales de procesamiento de imágenes con modelos de aprendizaje profundo para la detección y clasificación de regiones^3,4. Actualmente, las estrategias predominantes para la generación de código de interfaces gráficas de usuario aplican técnicas de visión por computadora para analizar imágenes de interfaces y convertirlas en representaciones estructuradas del front-end^5,6,7. Mientras que los métodos de procesamiento de imágenes dependen de características diseñadas manualmente, los enfoques de aprendizaje profundo extraen representaciones jerárquicas a partir de conjuntos de datos a gran escala. Como resultado, los investigadores han explorado enfoques híbridos que combinan el aprendizaje profundo con técnicas específicas del dominio de procesamiento de imágenes para mejorar la robustez y precisión.

El color es otro factor crítico en el diseño de interfaces de usuario, ya que influye en la percepción del usuario, la usabilidad y el atractivo estético¹. Mantener la coherencia entre el contenido de la imagen y las combinaciones de colores de la interfaz resulta complicado cuando las entradas visuales varían en matiz y contexto^8,9,10. Por consiguiente, una cantidad significativa de investigación se ha centrado en la generación automatizada de paletas de colores y en la modelización perceptual del color. Los métodos existentes para la generación de colores incluyen técnicas basadas en el espacio de color CIELAB¹¹. Otros enfoques utilizan algoritmos de agrupamiento, como k-medias, para extraer los colores dominantes de las imágenes¹². Como resultado, trabajos recientes han adoptado cada vez más enfoques basados en datos y en aprendizaje automático para la modelización del color.

Paralelamente, los enfoques de aprendizaje profundo han mejorado significativamente la detección de componentes de interfaz de usuario y la comprensión del diseño. Las redes neuronales han permitido un análisis estructural más preciso de las interfaces móviles¹³. Sin embargo, estos métodos se centran principalmente en la precisión de la detección y a menudo pasan por alto aspectos de nivel superior, como la usabilidad cognitiva, la jerarquía del diseño y la eficiencia de la interacción. También se han propuesto modelos generativos para la síntesis de diseños de interfaz de usuario^14,15, pero enfrentan dificultades para mantener la coherencia entre pantallas y ofrecer decisiones de diseño interpretables¹⁶. Otros enfoques se centran en la similitud visual o en la calidad de representación, pero carecen de un marco unificado que combine la semántica de los componentes, la armonía cromática y las restricciones de usabilidad¹⁷. El reconocimiento de texto también es importante para comprender el contenido de la interfaz de usuario. Técnicas como las redes neuronales recurrentes convolucionales (CRNN) permiten reconocer con precisión patrones de texto complejos en las pantallas de interfaz^18,19,20.

Se han propuesto varios sistemas para generar código de interfaz de usuario (UI) a partir de bocetos o imágenes. Sketch2Code utiliza detección de objetos para convertir bocetos en representaciones de código^21,22, pero es sensible a la calidad de la imagen. REDRAW proporciona una canalización automatizada para la recolección de datos y el entrenamiento de modelos, combinando redes neuronales convolucionales y recurrentes para generar representaciones estructuradas de interfaces de usuario^23,24. Trabajos posteriores han introducido métricas de evaluación mejoradas para evaluar la calidad de las interfaces generadas²⁵. Enfoques más recientes incluyen modelos basados en difusión y en transformadores para la generación de diseños, como transformadores de diseño por difusión sin métodos de autoencoder, generación de diseños de interfaces gráficas de usuario (GUI) mediante grafos de disposición basados en transformadores, y generación de diseños de interfaces guiada por modelos de lenguaje grandes^26,27,28. En el Table 1 se ofrece una visión comparativa de estos enfoques.

Referencias y Método(s) Clave	Objetivo	Ventajas	Desventajas
Generación Automatizada de Temas de Color de Interfaz de Usuario Basada en Imágenes: extracción de colores prominentes + modelado perceptual de color CAM02-UCS¹	Generar automáticamente temas de color para interfaces de usuario a partir de imágenes de referencia, optimizando armonía y usabilidad.	Sólida base perceptual (CAM02-UCS); equilibra explícitamente armonía y usabilidad (contraste y diversidad); incluye implementación web y evaluación por diseñadores.	Enfocado únicamente en color/tema (no en diseño ni estructura de componentes); basado en reglas o heurísticas en lugar de síntesis de interfaz de usuario aprendida de extremo a extremo.
Unificación de la Generación de Diseños con un Modelo de Difusión Desacoplado (LDGM)²⁵	Generación unificada y flexible de diseños para escenas gráficas e interfaces de usuario.	Diversidad y controlabilidad de vanguardia en la generación de diseños; admite generación condicional y múltiples tipos de atributos.	Las salidas basadas en difusión pueden presentar problemas de alineación o detalles finos del diseño a menos que estén restringidas; mayor complejidad del modelo y costo de inferencia.
Transformadores de Diseño por Difusión sin Métodos de Autoencoder: transformador + difusión para generación de diseño (sin autoencoder)²⁶	Mejorar la fidelidad y alineación en pruebas de generación de diseño (métricas FID, alineación y superposición).	Mejor captura de correlaciones semánticas entre objetos vecinos; alto desempeño en métricas FID y de alineación.	Se centra principalmente en la geometría del diseño (posiciones, tamaños, categorías) más que en la semántica de la interfaz de usuario.
Generación de Diseños de GUI con Modelos Basados en Transformadores a partir de Grafos de Disposición de GUI (GUI-AGs)²⁷	Crear diseños de GUI a partir de restricciones posicionales o de grafo para asistir a diseñadores.	Las representaciones en grafo capturan restricciones relacionales; el transformador permite una generación flexible condicionada a restricciones.	Puede requerir grafos de restricción explícitos por parte de los diseñadores; énfasis limitado en métricas de color y usabilidad.
Generación de Diseños de Interfaz de Usuario con Modelos de Lenguaje Grande Guiados por Gramática de Interfaz de Usuario: Modelos de Lenguaje Grande (LLMs) + gramática jerárquica de interfaz de usuario²⁸	Explorar el uso de LLMs en la generación de diseños y mejorar la explicabilidad y el control mediante representaciones gramaticales.	Alto nivel de controlabilidad y explicabilidad; puede aprovechar el aprendizaje en contexto de LLMs (tipo GPT).	Trabajo en etapas iniciales con validación empírica limitada; diseño de gramática y robustez a través de diferentes interfaces de usuario

Tabla 1: Comparación de los métodos existentes de modelado de colores de interfaz de usuario y generación de diseños. La tabla resume enfoques representativos para el diseño de interfaces de usuario, incluyendo la generación de temas de color, la generación de diseños basada en difusión, métodos basados en transformadores y la generación de diseños guiada por modelos de lenguaje grandes. Para cada método, se presentan la técnica subyacente, el objetivo, las ventajas y las limitaciones, destacando las diferencias en el modelado perceptual, la capacidad de generación de diseños, la controlabilidad y las consideraciones de usabilidad.

A pesar de estos avances, persiste una limitación clave: ningún sistema existente integra conjuntamente la detección de componentes, el modelado perceptual del color, los principios cognitivos de diseño y la coherencia de diseño en múltiples pantallas dentro de un único marco integral¹. Los enfoques actuales suelen optimizar solo uno o dos aspectos, como la detección, el diseño o el color, sin considerar sus interdependencias. Esta fragmentación pone de manifiesto una brecha crítica en la investigación para desarrollar sistemas unificados de prototipado automatizado de interfaces de usuario centrados en el ser humano. En particular, los principios de diseño cognitivo, como las leyes de la Gestalt, la ley de Fitts y la ley de Hick, a menudo se tratan de forma conceptual en lugar de integrarse formalmente en modelos computacionales.

Para abordar estas limitaciones, este estudio propone un marco automatizado de prototipado de interfaz de usuario (UI) de extremo a extremo que integra la detección de componentes, el modelado perceptual del color y principios de diseño cognitivo dentro de un sistema unificado. El marco está diseñado para mejorar la calidad del diseño, reducir la carga cognitiva, potenciar la armonía cromática y aumentar la usabilidad general. Estas mejoras se validan mediante experimentos con los conjuntos de datos RICO, ENRICO y Guo’s UI Color Datasets, demostrando la eficacia de combinar aspectos estructurales, perceptuales y cognitivos dentro de una única canalización automatizada de prototipado de interfaz de usuario. Se plantea la hipótesis de que integrar la detección de componentes basada en aprendizaje profundo, el modelado perceptual del color y principios de diseño cognitivo dentro de un marco unificado mejorará significativamente la calidad del prototipo de interfaz de usuario en comparación con los enfoques existentes. Específicamente, H1 propone que el marco mejora la calidad del diseño, incluyendo alineación, agrupación y orden de lectura. H2 postula que el marco reduce la carga cognitiva del usuario. H3 sugiere que el modelado perceptual del color mejora la coordinación cromática y la armonía visual. H4 afirma que mejoran la usabilidad general y la calidad estética de los prototipos de interfaz de usuario.

Protocolo

Este estudio utiliza conjuntos de datos de acceso público y no involucra sujetos humanos ni animales.

El marco propuesto para la prototipación automatizada de interfaces de usuario integra el entendimiento estructural basado en aprendizaje profundo, la modelación de color perceptualmente uniforme y principios de diseño cognitivo para generar prototipos de interfaz coherentes y centrados en el usuario. La metodología comienza con una arquitectura Faster R-CNN entrenada con los conjuntos de datos RICO y ENRICO para detectar componentes de la interfaz de usuario y extraer sus relaciones jerárquicas, lo que permite una interpretación precisa de diversas disposiciones de pantalla. Los componentes detectados son luego procesados por un módulo de inteligencia del color, que extrae pistas cromáticas basadas en marcas o imágenes, modela la similitud perceptual mediante CAM02-UCS y genera paletas de colores armoniosas, conscientes del contraste y compatibles con las normas de accesibilidad. Posteriormente, se aplican principios de diseño cognitivo —incluyendo las leyes de agrupación de la Gestalt, la ley de Fitts, la ley de Hick, el espaciado basado en la atención y las restricciones de jerarquía visual— a través de un motor de optimización cognitiva para perfeccionar la organización espacial y el alineamiento de los componentes. Finalmente, una capa de razonamiento de diseño integra restricciones estructurales, perceptuales y cognitivas para generar prototipos de interfaz de usuario coherentes entre múltiples pantallas que equilibren usabilidad, estética y claridad funcional. Esta canalización integrada garantiza coherencia perceptual, reduce la carga cognitiva y se ajusta a principios de diseño centrados en el ser humano. El flujo de trabajo completo del método propuesto se ilustra en Figura 1.

Figura 1. Arquitectura general del marco propuesto para la prototipación automatizada de interfaces de usuario. El diagrama ilustra la tubería completa, que comienza con una imagen de interfaz de usuario de entrada. La detección de componentes se realiza mediante Faster R-CNN para identificar los elementos de la interfaz. Los componentes detectados se procesan luego utilizando un modelo perceptual basado en CAM02-UCS para la extracción de jerarquía y disposición. Posteriormente, se aplica una optimización cognitiva empleando principios de la Gestalt, la ley de Fitts, la ley de Hick y ajustes basados en la atención. Las flechas indican el flujo de datos entre los módulos, lo que resulta en la salida del prototipo final de interfaz de usuario. Haga clic aquí para ver una versión más grande de esta figura.

Resumen del marco

Figura 1 ilustra el flujo de trabajo de extremo a extremo del marco propuesto para la prototipación automatizada de interfaces de usuario, que transforma una captura de pantalla de interfaz en bruto en un prototipo refinado cognitivamente. El proceso comienza con la imagen de entrada de la interfaz, que se envía al módulo de detección de componentes basado en Faster R-CNN. Este módulo identifica elementos de la interfaz, como botones, iconos, campos de texto y contenedores, y genera sus cajas delimitadoras y etiquetas de clase correspondientes. Los componentes detectados se procesan luego en la etapa de extracción de jerarquía y diseño. Basándose en las relaciones espaciales y los patrones estructurales, el sistema construye un árbol jerárquico de diseño que refleja la forma en que los usuarios perciben naturalmente la organización de la pantalla. Esta representación captura la agrupación visual y las dependencias estructurales entre los elementos de la interfaz. El diseño extraído se refina posteriormente mediante una optimización cognitiva que aplica principios de diseño centrados en el ser humano. Estos incluyen el agrupamiento de la Gestalt para la agrupación visual, la ley de Fitts para optimizar el tamaño y la accesibilidad de los objetivos táctiles, la ley de Hick para reducir la complejidad de la toma de decisiones y el espaciado basado en la atención para mejorar la jerarquía visual. Como resultado, el diseño se vuelve más intuitivo, legible y eficiente para la interacción del usuario. Finalmente, el diseño optimizado se combina con un modelo de color perceptual para generar un prototipo de interfaz coherente. La interfaz resultante es estructuralmente precisa, visualmente armoniosa y coherente con las expectativas humanas de usabilidad.

El marco se implementó utilizando PyTorch 2.0 en Ubuntu 22.04. Los experimentos se realizaron en un sistema equipado con una GPU NVIDIA RTX 4090 (24 GB de VRAM). El modelo Faster R-CNN empleó una estructura ResNet-50 previamente entrenada en el conjunto de datos ImageNet. El entrenamiento se realizó utilizando el optimizador de descenso de gradiente estocástico (SGD) con una tasa de aprendizaje de 0.001, tamaño de lote de 16 y hasta 60 épocas. Se aplicó la detención anticipada para prevenir el sobreajuste, utilizando un conjunto de validación que comprendía el 20 % de los datos. Aunque el entrenamiento se realizó durante hasta 60 épocas, la convergencia generalmente se alcanzó antes mediante la detención anticipada basada en la pérdida de validación. El momento y el decaimiento del peso se establecieron en 0,9 y 0,0005, respectivamente. La ampliación de datos incluyó normalización, volteo horizontal aleatorio y recorte aleatorio con cambio de tamaño.

Preparación del conjunto de datos

Para respaldar el marco propuesto de prototipado automatizado de interfaces de usuario (UI), se utilizaron tres conjuntos de datos complementarios: ENRICO²⁹, RICO³⁰ y el Conjunto de Datos de Colores de UI de Guo¹. El conjunto de datos RICO contiene 66 261 pantallas de interfaces de usuario de Android recopiladas de 9 700 aplicaciones, lo que proporciona una diversidad a gran escala para la detección de componentes y la extracción de diseños jerárquicos. ENRICO incluye 1 464 capturas de pantalla de alta calidad clasificadas manualmente en 20 patrones de diseño, lo que permite una mejor generalización para el razonamiento estructural y la modelación de consistencia de diseño. El Conjunto de Datos de Colores de UI de Guo consta de 128 imágenes de interfaces de usuario seleccionadas con temas de color anotados, que se utilizan para la modelación perceptual de color y la evaluación de paletas. Sin embargo, debido a su tamaño relativamente pequeño, este conjunto de datos podría introducir cierta variabilidad en las características de diseño. Para este estudio, se preparó un conjunto combinado de 5 128 pantallas para entrenamiento y evaluación. Específicamente, aproximadamente 4 000 imágenes de RICO se utilizaron para entrenar el modelo Faster R-CNN en la detección de componentes, 1 000 imágenes de ENRICO se emplearon para el aprendizaje de patrones de diseño y la modelación de consistencia estructural, y 128 imágenes del conjunto de datos de Guo se usaron para tareas de evaluación de color. Todas las imágenes se normalizaron a una resolución de 480 × 800 píxeles, se convirtieron a un espacio de color sRGB uniforme y se reanotaron con cuadros delimitadores estandarizados y metadatos jerárquicos para garantizar compatibilidad entre los conjuntos de datos. En Tabla 2 se proporciona una visión general de los conjuntos de datos utilizados en este estudio. El conjunto de datos RICO respalda la detección a gran escala de componentes de interfaz de usuario y el análisis estructural, mientras que ENRICO mejora la capacidad del modelo para reconocer patrones de diseño y aplicar consistencia entre pantallas. El Conjunto de Datos de Colores de UI de Guo, aunque más pequeño en tamaño, desempeña un papel fundamental en la evaluación de la armonía perceptual del color y la modelación del contraste. Juntos, estos conjuntos de datos proporcionan una base integral y bien equilibrada para el entrenamiento, validación y evaluación del marco propuesto de prototipado automatizado de interfaces de usuario.

Conjunto de datos	Total de imágenes disponibles	Imágenes utilizadas en el estudio	Propósito en el marco propuesto
RICO Dataset30	66,261	4,000	Detección de componentes de interfaz de usuario, extracción de distribución estructural
ENRICO Dataset29	1,464	1,000	Aprendizaje de patrones de diseño, modelado de consistencia de distribución
Guo’s UI Color Dataset1	128	128	Extracción de temas de color, evaluación perceptual del color
Total combinado	67,853	5,128	Conjunto de datos integral para detección, distribución y modelado del color

Tabla 2: Resumen de los conjuntos de datos utilizados en el marco propuesto. La tabla presenta los conjuntos de datos empleados para el entrenamiento y la evaluación, incluyendo los conjuntos de datos RICO, ENRICO y Guo’s UI Color. Se indica el número total de imágenes disponibles, el subconjunto utilizado en este estudio y el papel específico de cada conjunto de datos en la detección de componentes, modelado de diseño y análisis perceptual del color dentro del marco propuesto.

Se empleó una estrategia de muestreo estratificado para preservar la diversidad en componentes de interfaz de usuario, estructuras de diseño y distribuciones de color en los conjuntos de datos RICO, ENRICO y Guo. El conjunto de datos se dividió en subconjuntos de entrenamiento (70 %), validación (15 %) y prueba (15 %) utilizando muestreo estratificado. Las imágenes se normalizaron usando la media (0.485, 0.456 y 0.406) y la desviación estándar (0.229, 0.224 y 0.225). La ampliación de datos incluyó volteo horizontal aleatorio (probabilidad = 0,5) y recorte aleatorio (rango de escala: 0,8–1,0), seguido de un cambio de tamaño a 224 × 224 píxeles aplicado durante el entrenamiento.

Anotación del componente y preprocesamiento

Los conjuntos de datos RICO, ENRICO y Guo’s UI Color respaldan conjuntamente los tres componentes funcionales principales del marco propuesto para prototipado automatizado de interfaces de usuario (UI): detección de componentes, modelado de diseño y optimización perceptual del color. El conjunto de datos RICO contiene una colección a gran escala de más de 66 000 pantallas de interfaces de usuario móviles y se utiliza principalmente para entrenar el módulo de detección de componentes. Su diversidad permite que el modelo Faster R-CNN aprenda representaciones robustas de elementos comunes de interfaces de usuario, como botones, imágenes y campos de texto, en una amplia variedad de aplicaciones. Esto garantiza la detección y localización precisas de los componentes de la interfaz de usuario bajo diferentes condiciones de diseño. El conjunto de datos ENRICO proporciona pantallas de interfaces de usuario de alta calidad etiquetadas por patrones, para aprender relaciones estructurales y patrones de diseño. Permite al sistema comprender las relaciones entre componentes, la organización jerárquica y las plantillas de diseño comunes. Este conjunto de datos desempeña un papel fundamental en el modelado de estructuras de diseño y en el cumplimiento de la coherencia entre múltiples pantallas, permitiendo al marco generar diseños que se ajusten a las convenciones de diseño establecidas. En contraste, el conjunto de datos Guo’s UI Color se utiliza específicamente para el modelado del color desde una perspectiva perceptual y cognitiva. A diferencia de RICO y ENRICO, que se centran en aspectos estructurales, este conjunto de datos contiene imágenes de interfaces de usuario curadas con temas de color anotados. Estas anotaciones se emplean para entrenar módulos de extracción de color y evaluación de armonía cromática. Al mapear las relaciones de color en espacios cromáticos perceptuales como CAM02-UCS, el marco aprende a generar paletas de colores que equilibren contraste, accesibilidad y coherencia estética. En conjunto, estos conjuntos de datos forman una tubería integrada: RICO respalda la detección de componentes, ENRICO posibilita la comprensión de patrones de diseño y la coherencia estructural, y el conjunto de datos de Guo facilita la optimización perceptual del color. Esta integración asegura que los prototipos de interfaz de usuario generados sean estructuralmente precisos, visualmente armónicos y cognitivamente optimizados.

La normalización se realizó utilizando una media de [0.485, 0.456, 0.406] y una desviación estándar de [0.229, 0.224, 0.225]. Se aplicaron técnicas de aumento de datos, incluyendo recorte aleatorio, volteo horizontal y rotación, para mejorar la generalización del modelo. Además, los valores de los píxeles se escalaron al rango [0, 1] y todas las imágenes se redimensionaron a una resolución de 480 × 800 píxeles para garantizar la consistencia entre los conjuntos de datos. Las imágenes redimensionadas a 224 × 224 píxeles se utilizan para la ampliación durante el entrenamiento, mientras que se conserva la resolución original de 480 × 800 píxeles para el análisis de diseño. Se ajustaron los cuadros delimitadores para filtrar anotaciones irrelevantes mediante umbrales predefinidos. Para lograr uniformidad entre los conjuntos de datos, todos los elementos de interfaz de usuario fueron anotados manualmente utilizando la herramienta de anotación LabelImg. Se estableció previamente un esquema predefinido para clasificar los elementos de interfaz de usuario en categorías como botón, texto, imagen, icono y contenedor. Para la representación de los cuadros delimitadores, se aplicó un sistema de coordenadas uniforme y se construyó información jerárquica basada en las relaciones espaciales entre los elementos y sus asociaciones padre-hijo dentro del árbol de diseño. Además, se establecieron directrices para garantizar una anotación coherente de los elementos, el manejo adecuado de componentes superpuestos y el cumplimiento de umbrales mínimos de tamaño en los conjuntos de datos RICO, ENRICO y Guo.

Se proporcionan formulaciones matemáticas detalladas para la capacitación en detección de componentes y la extracción de patrones de diseño en el Archivo Suplementario 1.

El modelo Faster R-CNN se entrenó utilizando SGD con un momento de 0,9 y una reducción de peso de 0,0005. La tasa de aprendizaje inicial se estableció en 0,001 y se ajustó utilizando una política de decaimiento por etapas basada en el rendimiento de validación. El entrenamiento se realizó durante un máximo de 60 épocas con un tamaño de lote de 16. Se aplicó la detención temprana para prevenir el sobreajuste, utilizando un conjunto de validación que comprendía el 20 % de los datos de entrenamiento.

La función de mapeo f(.) toma como entrada los elementos de interfaz de usuario detectados y produce como salida una representación jerárquica del diseño. Calcula las relaciones de adyacencia entre los elementos de la interfaz de usuario en función de la distancia espacial y los criterios de alineación, y construye una matriz de adyacencia para representar estas relaciones. Luego se aplica un algoritmo de agrupamiento, como DBSCAN, para agrupar los componentes relacionados. Finalmente, los elementos agrupados se organizan en estructuras jerárquicas según las relaciones de padre–hijo, formando una representación estructurada del diseño.

Se proporcionan formulaciones detalladas para la modelización de la armonía de color y el objetivo de optimización unificado en el Archivo Suplementario 1.

Esta función objetivo formaliza matemáticamente la integración de la detección estructural, el razonamiento de diseño y la modelización perceptual del color, asegurando que todos los componentes del marco contribuyan conjuntamente a generar prototipos de interfaz de usuario coherentes y centrados en el usuario. La optimización se realiza de manera modular para cada componente del marco. Se utiliza SGD para entrenar el módulo de detección de componentes, mientras que el optimizador Adam se emplea durante la optimización conjunta del objetivo unificado. La función objetivo combinada se utiliza para guiar el rendimiento general del sistema. En las etapas de optimización conjunta, la función objetivo se minimiza utilizando el optimizador Adam con una tasa de aprendizaje de 0,001 y un tamaño de lote de 16. El entrenamiento se realiza durante un máximo de 60 épocas, aplicando detención temprana cuando el cambio en la pérdida de validación es menor que 10⁻⁴ durante cinco épocas consecutivas.

Detección de componentes mediante Faster R-CNN

El marco propuesto emplea Faster R-CNN para la detección automática de componentes de la interfaz de usuario (UI), incluyendo botones, iconos, campos de texto, imágenes y contenedores. Faster R-CNN es adecuado para esta tarea porque combina una alta precisión en la detección de objetos con una generación eficiente de propuestas de regiones, lo cual es esencial para manejar diseños complejos de interfaces con elementos densamente empaquetados. El modelo utiliza una estructura ResNet-50 preentrenada en el conjunto de datos ImageNet para extraer mapas de características convolucionales de cada pantalla de interfaz. Durante el entrenamiento, las capas iniciales se mantuvieron fijas para conservar características visuales generales, mientras que las capas superiores (conv4_x y conv5_x) se ajustaron finamente para la detección específica de componentes de interfaz. Estos mapas de características capturan estructuras visuales, bordes, texturas y límites de los componentes. Durante la detección, la red de propuesta de regiones (RPN) identifica regiones candidatas (anclas) que probablemente contengan componentes de interfaz. Las anclas se definen utilizando múltiples escalas (128, 256 y 512) y proporciones de aspecto (1:1, 1:2 y 2:1) para adaptarse a elementos de interfaz de diferentes tamaños. Durante el entrenamiento, las anclas con una intersección sobre unión (IoU) mayor a 0,7 respecto a las cajas reales se etiquetan como positivas, mientras que aquellas con IoU menor a 0,3 se etiquetan como negativas; las anclas con valores intermedios de IoU se ignoran. A cada ancla se le asigna una probabilidad que indica la presencia de un componente. Luego se aplica supresión no máxima (NMS) para eliminar propuestas redundantes y superpuestas, asegurando una localización eficiente de elementos de interfaz significativos incluso en interfaces congestionadas. Una vez generadas las regiones candidatas, cada propuesta se clasifica en categorías predefinidas de componentes y se refinan sus coordenadas de cuadro delimitador. Una operación de alineación de región de interés (ROI) extrae representaciones de características de tamaño fijo para cada propuesta, las cuales son procesadas posteriormente por capas completamente conectadas para clasificación y regresión. La rama de clasificación produce probabilidades de clase, mientras que la rama de regresión predice coordenadas precisas del cuadro delimitador. Todo el modelo Faster R-CNN se entrena de extremo a extremo mediante la optimización de una función de pérdida conjunta que combina la pérdida de la RPN con la pérdida final de detección. Esto permite que el sistema no solo reconozca con precisión los componentes de interfaz, sino que también los localice exactamente en diversas estructuras de interfaz. Se proporciona una descripción detallada de la detección de componentes mediante Faster R-CNN, incluyendo la etapa RPN, la clasificación de ROI, el refinamiento del cuadro delimitador y el objetivo final de optimización, en el Archivo Suplementario 1.

Algoritmo S1 proporciona el flujo de trabajo detallado de detección de componentes y extracción estructural (Archivo Suplementario 1). Describe el proceso completo de detección automática de componentes de interfaz de usuario y extracción estructural a partir de una imagen cruda de pantalla. Primero, la imagen de entrada se preprocesa y se introduce en una red neuronal convolucional (CNN) troncal para extraer características visuales profundas. Estas características son utilizadas por la red de propuestas regionales (RPN) para generar cajas delimitadoras candidatas, que luego se refinan mediante clasificación y regresión. La supresión no máxima (NMS) elimina detecciones redundantes para garantizar una localización precisa. Tras la detección, los componentes se agrupan según su proximidad espacial mediante la agrupación espacial basada en densidad de aplicaciones con ruido (DBSCAN). Este paso de agrupación permite construir un árbol jerárquico de interfaz de usuario que captura las relaciones de padre-hijo y los agrupamientos lógicos entre los componentes. Esta representación jerárquica constituye la base para el análisis de diseño y la comprensión de la interfaz de usuario en etapas posteriores. Figura 2 ilustra el proceso de detección de componentes mediante Faster R-CNN en una pantalla de interfaz de usuario móvil. La interfaz de entrada (izquierda) contiene elementos de interfaz de usuario como botones y bloques de texto, que quedan automáticamente encerrados dentro de cajas delimitadoras. Estas regiones detectadas luego se clasifican en categorías de componentes (por ejemplo, Botón y Texto), tal como indican las conexiones etiquetadas. El módulo de detección Faster R-CNN (derecha) refina las coordenadas de las cajas delimitadoras, asigna etiquetas semánticas y genera información estructurada a nivel de componente. Este paso sirve como fundamento crítico para procesos posteriores, incluyendo la extracción del diseño, la optimización cognitiva y la generación de prototipos de interfaz de usuario, al proporcionar representaciones precisas y semánticamente significativas de los componentes de interfaz de usuario.

Figura 2. Detección de componentes de elementos de la interfaz de usuario mediante Faster R-CNN. La figura ilustra la detección de componentes de la interfaz de usuario a partir de una captura de pantalla de una interfaz de entrada. Las regiones de interés se identifican mediante cuadros delimitadores, y los elementos como botones y campos de texto se clasifican utilizando Faster R-CNN. Las flechas indican la asignación de los componentes detectados a sus etiquetas semánticas correspondientes. Haga clic aquí para ver una versión más grande de esta figura.

Extracción del patrón de diseño y modelado jerárquico

Tras la detección de componentes mediante Faster R-CNN, cada elemento de interfaz de usuario (UI) queda representado por un cuadro delimitador. Sin embargo, estos cuadros delimitadores por sí solos no indican cómo están organizados estructuralmente los elementos dentro de la interfaz, por ejemplo, qué elementos pertenecen a encabezados, barras de navegación o regiones de contenido agrupado. Para abordar esta limitación, los componentes detectados se transforman en un árbol lógico de interfaz de usuario, en el que cada componente se trata como un nodo y los componentes relacionados funcional o visualmente se agrupan bajo nodos padres comunes. Para identificar grupos de diseño significativos, se aplican técnicas de agrupamiento como DBSCAN o el agrupamiento aglomerativo jerárquico. Estos métodos analizan la proximidad espacial y los patrones de alineación entre los componentes para detectar relaciones entre los elementos de la interfaz de usuario. De manera análoga a las prácticas humanas de diseño, el sistema aprende a reconocer patrones estructurales comunes, como encabezados, pies de página, cuadrículas y bloques de contenido. Una vez establecido el agrupamiento, se analizan propiedades estructurales adicionales, incluyendo alineación, organización en cuadrícula y orden de lectura, para construir una representación integral del diseño. Por ejemplo, los componentes alineados en columnas de igual ancho pueden indicar un diseño basado en tarjetas, mientras que los elementos apilados verticalmente pueden indicar una interfaz basada en formularios o en un flujo de contenido. Al integrar el agrupamiento, el razonamiento espacial y las reglas de alineación, el marco de trabajo construye un árbol jerárquico de interfaz de usuario que captura tanto el agrupamiento visual como las relaciones funcionales. Esta representación jerárquica sirve como base para el posterior refinamiento del diseño y la modelización de la coherencia entre múltiples pantallas, permitiendo al sistema generar diseños de interfaz estructurados, coherentes y centrados en el usuario.

Se proporcionan formulaciones detalladas para la distancia espacial y la similitud de alineación en el Archivo Suplementario 1.

Agrupamiento para la agrupación de diseño (DBSCAN)

Para identificar los grupos de diseño, se aplica DBSCAN. DBSCAN utiliza dos parámetros: (1) ε = distancia máxima entre componentes vecinos y (2) = número mínimo de componentes necesarios para formar un grupo. Para este análisis, los parámetros de DBSCAN se seleccionaron empíricamente en función de la resolución normalizada de la interfaz de usuario (480 × 800 píxeles). El parámetro de distancia de vecindad se estableció en ε = 50 píxeles para capturar la proximidad espacial entre componentes de la interfaz de usuario adyacentes. El número mínimo de puntos necesario para formar un grupo se estableció en MinPts = 3 para evitar la formación de grupos insignificantes o espurios de componentes de la interfaz de usuario.

La formulación detallada de la construcción del árbol lógico de interfaz de usuario se proporciona en el Archivo Suplementario 1.

Modelado del color perceptual con CAM02-UCS

La modelización perceptual de color garantiza que los colores utilizados en la interfaz de usuario (UI) generada sean armónicos, legibles y cognitivamente eficientes. Los colores dominantes se extraen de fuentes de entrada, como imágenes de interfaces, mediante técnicas de agrupamiento. Específicamente, se aplica el agrupamiento K-means con inicialización K-means++ durante 300 iteraciones para obtener paletas de colores representativas. Sin embargo, el espacio de color RGB no refleja con precisión la percepción visual humana, lo que significa que colores numéricamente similares pueden parecer perceptualmente diferentes. Para abordar esta limitación, todos los colores extraídos se transforman al espacio CAM02-UCS, que es perceptualmente uniforme. En este espacio, distancias iguales corresponden a diferencias de color percibidas iguales, lo que lo hace adecuado para modelar armonía y contraste de color. Una vez mapeados al espacio CAM02-UCS, las diferencias perceptuales de color se calculan mediante la distancia euclidiana, permitiendo al sistema cuantificar el contraste, la armonía y la variación entre colores. Los colores demasiado similares se separan para mejorar la legibilidad, mientras que los colores con contraste excesivo se moderan para evitar incomodidad visual. La paleta generada también cumple con estándares de accesibilidad como WCAG AA y AAA, asegurando un contraste suficiente entre elementos de primer plano y fondo. Además, se aplica armonía de color restringiendo las relaciones de la paleta a esquemas complementarios, análogos o triádicos, según el tema de interfaz previsto. Esto garantiza que la paleta de colores resultante no solo sea visualmente atractiva, sino también funcionalmente accesible y cognitivamente optimizada. Para refinar aún más la paleta, se aplica un proceso de optimización bajo restricciones de similitud perceptual, contraste, armonía y coherencia de marca. Se selecciona un color principal (por ejemplo, a partir de la identidad de marca) y se ajustan los colores secundarios en términos de luminancia y croma para preservar la jerarquía visual. Un mecanismo de evaluación basado en reglas analiza las paletas candidatas según distancias perceptuales y métricas de accesibilidad, minimizando la carga cognitiva mientras se mantiene el equilibrio estético. Como resultado, el marco produce esquemas de color para interfaces que exhiben coherencia, legibilidad y consistencia perceptual a nivel profesional.

Se proporcionan expresiones matemáticas detalladas para el modelado del color perceptual basado en CAM02-UCS en el Archivo Suplementario 1.

Algoritmo S2 (Archivo Suplementario 1) describe el flujo de trabajo de extracción y optimización de colores perceptuales basado en CAM02-UCS, sujeto a restricciones de armonía y accesibilidad. Inicialmente, se extraen los colores dominantes de la imagen de entrada y se transforman al espacio CAM02-UCS para garantizar que las diferencias de color correspondan a la percepción humana. Luego, se calculan las distancias perceptuales entre los colores y se restringen dentro de límites predefinidos para mantener tanto la claridad como la armonía. Posteriormente, se garantiza la accesibilidad evaluando las relaciones de contraste de luminancia según las directrices WCAG. La paleta final se obtiene optimizando una función objetivo combinada que equilibra el espaciado perceptual, los requisitos de contraste y las restricciones de armonía cromática. Esto asegura que los esquemas de color de interfaz generados sean no solo visualmente atractivos, sino también legibles, accesibles y perceptualmente consistentes.

Optimización del diseño cognitivo

La optimización del diseño cognitivo garantiza que los prototipos de interfaz de usuario generados automáticamente no solo sean visualmente coherentes, sino también fáciles de comprender e interactuar. Este módulo integra principios clave del diseño cognitivo, incluyendo los principios de la Gestalt, la ley de Fitts y la ley de Hick, para guiar la disposición, agrupación y espaciado de los componentes de la interfaz de usuario. Las formulaciones matemáticas detalladas para la optimización del diseño cognitivo se proporcionan en el Archivo Suplementario 1.

Objetivo integrado de optimización cognitiva

La expresión matemática para el objetivo integrado de optimización cognitiva se proporciona en el Archivo Suplementario 1. Los coeficientes que representan la importancia del agrupamiento visual, la eficiencia de la interacción y la complejidad de la decisión se denotan con alfa, beta y gamma, respectivamente. En este estudio, los valores de alfa, beta y gamma se determinaron empíricamente utilizando el conjunto de datos de validación. Para el presente experimento, los coeficientes se establecieron de la siguiente manera: α = 0.5, β = 0.3 y γ = 0.2. Esta configuración proporciona un equilibrio efectivo entre el agrupamiento visual, la eficiencia de la interacción y la simplicidad de la decisión.

Consistencia entre múltiples pantallas y generación de interfaz de usuario

La modelización de la coherencia entre múltiples pantallas garantiza que las distintas pantallas de una aplicación compartan una identidad visual coherente, una estructura de diseño y un patrón de interacción uniforme. A medida que los usuarios navegan entre pantallas, desarrollan expectativas respecto a la colocación de los elementos, la tipografía, el espaciado y la jerarquía visual. Para satisfacer estas expectativas, el sistema analiza patrones entre pantallas mediante plantillas derivadas de los conjuntos de datos RICO y ENRICO. Estas plantillas capturan estructuras comunes de interfaces de usuario, como diseños de inicio–detalle, patrones de lista–detalle, formularios de varios pasos y flujos de panel de control. Al comparar la colocación de componentes y el comportamiento de agrupamiento, el sistema construye un perfil estructural entre pantallas que identifica qué elementos deben mantenerse consistentes y cuáles pueden variar. Una vez identificados los patrones estructurales, el marco de trabajo aplica la coherencia en escalas tipográficas, proporciones de espaciado, diseños de cuadrícula y puntos de navegación. Por ejemplo, las barras de encabezado conservan una altura constante, los botones principales mantienen un tamaño y alineación uniformes, y los bloques de contenido siguen un orden visual predecible. Esto se logra mediante un proceso de regularización de diseño que evalúa cada pantalla frente a restricciones estructurales globales. Si una pantalla se desvía de las plantillas aprendidas—por ejemplo, por rellenos inconsistentes o títulos mal alineados—el sistema ajusta automáticamente el diseño para restablecer la coherencia. Estas correcciones ayudan a garantizar una experiencia de usuario fluida y reducen los costos cognitivos asociados al cambio entre pantallas. Además, el marco analiza el grafo de navegación entre pantallas para mantener la coherencia en el flujo de interacción. Se identifican y aplican patrones comunes de navegación, incluidas transiciones hacia adelante/atrás, navegación con pestañas y flujos de trabajo de varios pasos. Cada transición se valida para asegurar su alineación con el modelo mental del usuario, mejorando así la usabilidad y reduciendo la confusión. Como resultado, el modelo de coherencia entre múltiples pantallas minimiza el ruido visual, aumenta la familiaridad y promueve una experiencia de interacción unificada.

Se proporcionan formulaciones matemáticas detalladas para la consistencia entre múltiples pantallas y la generación de interfaces de usuario en el Archivo Suplementario 1.

Finalmente, el motor de renderizado genera salidas visuales en formatos como estructuras SVG, prototipos HTML/CSS o maquetas de interfaz de usuario basadas en píxeles. Las pantallas de interfaz resultantes presentan un orden de lectura correcto, relaciones armónicas de color, alineación precisa de la cuadrícula y una jerarquía visual consistente en múltiples pantallas.

Algoritmo S3 proporciona la optimización del diseño cognitivo-visual y el flujo de trabajo de coherencia entre múltiples pantallas (Archivo Suplementario 1). El Algoritmo S3 describe el proceso integrado de optimización cognitiva y estructural utilizado para generar diseños de interfaz de usuario fáciles de usar. Combina el agrupamiento perceptual (principios de la Gestalt), la eficiencia de la interacción (ley de Fitts) y la simplicidad en la toma de decisiones (ley de Hick) dentro de un marco unificado de optimización. En primer lugar, se evalúan las relaciones espaciales entre los componentes para establecer agrupamientos perceptuales. Luego, se optimiza la eficiencia de la interacción ajustando el tamaño y la colocación de los componentes, mientras que la complejidad de la decisión se controla limitando el número de opciones presentadas al usuario. Además, el algoritmo garantiza la coherencia entre múltiples pantallas alineando cada pantalla con plantillas de diseño aprendidas, asegurando uniformidad en la tipografía, el espaciado y la organización estructural. Una función de optimización multiobjetivo perfecciona entonces el diseño equilibrando alineación, espaciado y costo cognitivo, resultando en una interfaz que es visualmente coherente y cognitivamente eficiente. En conjunto, este algoritmo asegura que los diseños generados para múltiples pantallas mantengan altos niveles de coherencia visual, usabilidad y claridad perceptual.

Resultados

El marco propuesto para prototipado automatizado de interfaz de usuario (UI) fue evaluado utilizando un conjunto de datos integrado de 5.128 pantallas de interfaz de usuario procedentes de tres fuentes: 4.000 imágenes de RICO, 1.000 pantallas de ENRICO y 128 muestras de interfaz de usuario anotadas por color del conjunto de datos UI Color de Guo. Este conjunto de datos combinado proporciona un punto de referencia bien equilibrado para evaluar la precisión en la detección de componentes, la claridad estructural del diseño, la coherencia entre múltiples pantallas y la armonía perceptual del color.

Los resultados experimentales demuestran que el modelo de detección basado en Faster R-CNN alcanza una precisión del 92,4 % en la detección de componentes y se generaliza eficazmente a diversas estilos de interfaces móviles. Además, la incorporación de anotaciones de patrones ENRICO mejora el razonamiento del diseño, lo que resulta en un aumento del 18,7 % en la claridad del diseño y una mejor preservación del orden de lectura. En experimentos de evaluación del color, el módulo de modelado del color basado en CAM02-UCS genera paletas que son un 24,5 % más armónicas, según la evaluación de diseñadores, y logra una mayor uniformidad perceptual en comparación con los métodos tradicionales de generación de paletas basados en RGB y LAB. Asimismo, el modelado de consistencia multiscreen logra una mejora del 28 % en la alineación entre pantallas y la consistencia de la tipografía. Estudios con usuarios que incluyeron a 30 participantes muestran una reducción del 31 % en la carga cognitiva percibida al interactuar con prototipos generados por el sistema propuesto. En conjunto, estos resultados indican que combinar la detección de componentes, el modelado del color perceptual y la optimización cognitiva produce prototipos de interfaz de usuario que no solo son estructuralmente precisos, sino también visualmente coherentes y cognitivamente eficientes. Tabla 3 destaca el entorno de simulación y los ajustes técnicos utilizados para evaluar el marco propuesto de prototipado de interfaces. Los procedimientos computacionalmente intensivos de entrenamiento de Faster R-CNN y los módulos de consistencia del diseño fueron respaldados por una GPU NVIDIA RTX 4090 de alto rendimiento. Todos los experimentos se realizaron en un entorno Ubuntu 22.04 utilizando PyTorch 2.0 para la implementación del aprendizaje profundo.

Parámetro	Configuración
Hardware	GPU NVIDIA RTX 4090 (24 GB), procesador Intel i9, 64 GB de RAM
Sistema operativo	Ubuntu 22.04 LTS
Entorno de aprendizaje profundo	PyTorch 2.0
Estructura base de Faster R-CNN	ResNet-50 + FPN
Resolución de imagen	480 × 800 (normalizada en todos los conjuntos de datos)
Tamaño del lote de entrenamiento	8
Optimizador	AdamW (LR = 1e−4, decaimiento del peso = 0,01)
Épocas	40
Espacio de modelado de color	CAM02-UCS
Agrupamiento para extracción de paleta	K-means (k = 5)
Agrupamiento de distribución	DBSCAN (ε = 20, min_samples = 3)

Tabla 3: Parámetros de implementación y configuración experimental del marco propuesto. La tabla resume la configuración de hardware y software utilizada para el entrenamiento y la evaluación del modelo, incluyendo los recursos computacionales, sistema operativo, framework de aprendizaje profundo, arquitectura del modelo, resolución de imagen, parámetros de entrenamiento, estrategia de optimización, espacio de modelado de color y métodos de agrupamiento utilizados para la extracción de paletas y la agrupación de distribuciones.

La arquitectura Faster R-CNN emplea una base ResNet-50 con una FPN para detectar una amplia gama de componentes de interfaz de usuario de gran detalle. Todas las imágenes de interfaz de usuario se redimensionan uniformemente a 480 × 800 píxeles antes del procesamiento. El entrenamiento se realiza durante 60 épocas utilizando el optimizador SGD, con un tamaño de lote de 16 para garantizar una convergencia estable. El generador de paletas de colores utiliza CAM02-UCS con agrupamiento K-means, mientras que DBSCAN se utiliza para el agrupamiento del diseño estructural. Estas configuraciones técnicas aseguran que los resultados generados de interfaz de usuario sean reproducibles, estables y de alta fidelidad. Para proporcionar una evaluación integral del marco propuesto de prototipado automatizado de interfaz de usuario, se emplean cuatro categorías de métricas de evaluación:

i) Rendimiento en la detección de componentes, analizado mediante precisión, exhaustividad, puntuación F1, intersección sobre unión (IoU) y precisión media promedio (mAP), que cuantifican la exactitud del modelo Faster R-CNN para identificar componentes de interfaz de usuario en los conjuntos de datos RICO y ENRICO;

ii) Claridad del diseño y consistencia estructural, medida mediante el error de alineación (AE), precisión en el agrupamiento, corrección del orden de lectura y puntuaciones de consistencia entre pantallas derivadas de las restricciones de los patrones de diseño;

iii) Calidad perceptual del color, evaluada mediante la distancia perceptual CAM02-UCS (ΔE_UCS), las relaciones de contraste WCAG 2.1, el índice de diversidad y las puntuaciones de armonía cromática inspiradas en el marco de evaluación de colores de interfaz de usuario de Guo;

iv) Métricas de eficiencia cognitiva centradas en el usuario, incluyendo la carga cognitiva medida por el índice de carga de trabajo de la NASA (NASA-TLX), las calificaciones de coherencia estética y la eficiencia en la finalización de tareas.

Estas métricas permiten evaluar el marco no solo en términos de precisión de detección, sino también en cuanto a armonía perceptual, calidad de usabilidad y experiencia cognitiva.

Métricas de detección de componentes

La precisión describe la exactitud del modelo al predecir componentes de la interfaz de usuario sin generar falsos positivos. Una alta precisión implica que la mayoría de los cuadros delimitadores predichos corresponden a elementos de interfaz válidos. La exhaustividad (recall) mide la capacidad del modelo para identificar todos los componentes de interfaz relevantes en una pantalla. Una alta exhaustividad indica que el modelo detecta con éxito la mayoría de los componentes reales. El puntaje F1, definido como el promedio armónico de la precisión y la exhaustividad, proporciona una evaluación equilibrada y es particularmente útil cuando los componentes de interfaz están distribuidos de manera desigual entre los conjuntos de datos.

La métrica IoU mide en qué medida el cuadro delimitador predicho se superpone con el cuadro delimitador real. En las tareas de detección de objetos, los umbrales de IoU de 0,5 y 0,75 se utilizan comúnmente para representar condiciones de evaluación moderadas y estrictas. La mAP resume el rendimiento de detección a través de múltiples umbrales de IoU. La métrica mAP@0,5:0,95 proporciona una evaluación más robusta al promediar la precisión a través de umbrales desde 0,5 hasta 0,95 en pasos de 0,05 y, por lo tanto, es ampliamente aceptada como un punto de referencia estándar para la detección de objetos.

Los resultados de detección en los tres conjuntos de datos indican que el módulo propuesto de detección de componentes tiene un rendimiento consistentemente alto. Los resultados cuantitativos se presentan en la Tabla 4. El conjunto de datos RICO alcanza el rendimiento más alto, con una precisión de 0,91, una exhaustividad de 0,88 y una puntuación F1 de 0,89, gracias a su amplio conjunto diverso de anotaciones de componentes de interfaz de usuario. ENRICO muestra puntuaciones ligeramente más bajas debido a su estructura más simplificada y a la menor cantidad de tipos de componentes anotados. El conjunto de datos Guo registra la puntuación F1 más baja (0,81), probablemente debido a una mayor variación visual y a patrones de diseño menos estandarizados, lo que dificulta la detección. En general, estos resultados confirman que el modelo mantiene un rendimiento robusto en la detección de componentes en distintos estilos de diseño de interfaces de usuario y características de conjuntos de datos.

Conjunto de datos	Precisión	Recuperación	Puntaje F1
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tabla 4: Rendimiento de la detección de componentes en diferentes conjuntos de datos. La tabla presenta la precisión, recuperación y puntuación F1 para la detección de componentes de interfaz de usuario en los conjuntos de datos RICO, ENRICO y Guo, lo que demuestra la eficacia del modelo de detección.

Figura 3 muestra el rendimiento del modelo en los conjuntos de datos RICO, ENRICO y Guo con umbrales de IoU de 0,5 y 0,75. Como era de esperar, los valores de mAP son más altos a un IoU de 0,5 debido al requisito de superposición más flexible. RICO presenta consistentemente los valores más altos de mAP (0,89 a un IoU de 0,5 y 0,78 a un IoU de 0,75), lo que refleja la riqueza y coherencia de sus anotaciones. ENRICO muestra valores ligeramente más bajos, mientras que Guo registra las puntuaciones más bajas debido a una mayor variación en el estilo de diseño y la densidad de componentes. La tendencia decreciente con umbrales de IoU más estrictos ilustra que la complejidad del conjunto de datos influye directamente en la robustez de la detección.

Figura 3. Precisión media (mAP) en umbrales de intersección sobre unión (IoU) de 0,5 y 0,75 a través de conjuntos de datos. El gráfico de líneas compara el rendimiento de detección de componentes en los conjuntos de datos RICO, ENRICO y Guo. El eje x representa los conjuntos de datos y el eje y muestra los valores de mAP. Dos curvas corresponden a umbrales de IoU de 0,5 y 0,75, ilustrando la variación del rendimiento bajo diferentes niveles de rigurosidad en la detección. Haga clic aquí para ver una versión más grande de esta figura.

Figura 4 presenta la mAP@IoU(0,5:0,95) para cada conjunto de datos, proporcionando una evaluación más amplia del rendimiento de detección a través de diez umbrales de IoU. Los resultados revelan una tendencia claramente descendente desde RICO (0,61) hasta ENRICO (0,57) y Guo (0,52), lo que confirma que el modelo de detección propuesto se generaliza mejor en conjuntos de datos más grandes y más estructurados. Esta métrica promediada más estricta resalta degradaciones sutiles del rendimiento que podrían no ser evidentes bajo una evaluación con un único umbral. Estos hallazgos indican que, aunque el modelo tiene un buen desempeño en todos los conjuntos de datos, la mayor diversidad de diseños y la variabilidad de los componentes introducen desafíos adicionales bajo una evaluación rigurosa al estilo COCO. Los resultados de detección se presentan en Figuras 3 y 4, que proporcionan comparaciones cuantitativas de la mAP en diferentes niveles de IoU.

Figura 4. Precisión media promedio (mAP) promediada sobre umbrales de intersección sobre unión (IoU) desde 0,5 hasta 0,95 en diferentes conjuntos de datos. El gráfico de líneas muestra el rendimiento en la detección de componentes en los conjuntos de datos RICO, ENRICO y Guo, utilizando la métrica mAP promediada sobre umbrales de IoU que van desde 0,5 hasta 0,95. El eje x representa los conjuntos de datos, y el eje y indica los valores correspondientes de mAP reportados en una escala de 0 a 1, reflejando el desempeño del modelo bajo umbrales de detección variables. Haga clic aquí para ver una versión más grande de esta figura.

Métricas de calidad del diseño

La calidad del diseño se evalúa utilizando AE, precisión de agrupamiento (GA) y precisión del orden de lectura (ROA), que en conjunto evalúan la corrección estructural, la organización perceptual y la legibilidad cognitiva de los diseños de interfaz de usuario generados.

Error de alineación.

AE (desviación basada en píxeles) indica qué tan bien los elementos de la interfaz de usuario se alinean con líneas de alineación ideales, como guías izquierda, derecha, superior o de línea base. Un valor AE más bajo indica que los elementos están dispuestos de forma consistente con una distorsión visual mínima, lo que mejora la legibilidad y la claridad general del diseño. Esta métrica es particularmente importante para evaluar el refinamiento del diseño cognitivo, ya que el desalineamiento interrumpe el flujo visual y aumenta la complejidad percibida. Figura 5 ilustra el AE en los conjuntos de datos RICO, ENRICO y Guo, medido como la desviación promedio en píxeles respecto a las líneas de alineación ideales. Los resultados muestran que RICO logra el AE más bajo (4,2 px), lo que indica que los componentes de interfaz de usuario en este conjunto de datos presentan patrones estructurales más consistentes, facilitando así el alineamiento para el modelo. ENRICO sigue con una desviación de alineación moderada de 6,1 px, reflejando una combinación de diseños de pantalla bien estructurados y variados. El conjunto de datos Guo registra el AE más alto (7,4 px), debido a su mayor diversidad en la colocación de componentes y estructuras de diseño no estándar, lo que dificulta el refinamiento basado en alineación. En general, estos resultados demuestran que el modelo mantiene una alta precisión de alineación en todos los conjuntos de datos, a pesar del aumento en la complejidad del diseño.

Figura 5. Error de alineación entre conjuntos de datos. La figura muestra el error de alineación entre conjuntos de datos; valores más bajos indican una mejor alineación. Haga clic aquí para ver una versión más grande de esta figura.

Precisión del agrupamiento (GA).

GA cuantifica qué tan eficazmente el modelo agrupa componentes de interfaz de usuario (UI) relacionados, por ejemplo, según principios de la Gestalt como proximidad, similitud y continuidad. Una mayor precisión de agrupamiento indica que el modelo conserva la estructura prevista de los elementos de la interfaz, permitiendo a los usuarios interpretar la interfaz de manera más natural. Esta métrica es particularmente útil para evaluar si el módulo de refinamiento de diseño organiza correctamente el contenido en grupos visuales significativos. Figura 6 presenta la distribución de GA alcanzada por el marco propuesto en los tres conjuntos de datos. El conjunto de datos ENRICO muestra la mediana GA más alta y el rango intercuartílico más pequeño, lo que indica un rendimiento de agrupamiento estable y consistente debido a sus diseños bien definidos y etiquetados por patrones. El conjunto de datos RICO muestra una precisión de agrupamiento moderada con mayor variabilidad, probablemente debido a su mayor diversidad y complejidad de diseño. El conjunto de datos Guo UI Color registra una menor precisión de agrupamiento, ya que sus muestras son visualmente heterogéneas y menos enfocadas en la estructura del diseño. En general, los resultados indican que el módulo cognitivo de refinamiento de diseño funciona de manera confiable en diferentes conjuntos de datos, logrando el mejor desempeño de agrupamiento en datos estructuralmente consistentes.

Figura 6. Distribución de la precisión de agrupamiento entre conjuntos de datos. El gráfico de caja muestra la precisión de agrupamiento basada en los principios de la Gestalt en los conjuntos de datos RICO, ENRICO y Guo sobre colores de interfaz de usuario. Las cajas representan el rango intercuartílico, la línea central indica la mediana y los bigotes denotan el rango de valores. El eje x representa los conjuntos de datos y el eje y muestra las puntuaciones de precisión de agrupamiento. El tamaño de la muestra es n=5128 pantallas de interfaz de usuario (RICO: 4000, ENRICO: 1000 y Guo: 128). Haga clic aquí para ver una versión más grande de esta figura.

Precisión del orden de lectura (ROA).

La precisión del orden de lectura (ROA) mide con qué exactitud el modelo predice el flujo natural de lectura de una pantalla de interfaz de usuario, que generalmente sigue un patrón de arriba hacia abajo y de izquierda a derecha. Mantener el orden de lectura correcto es esencial para la usabilidad, la claridad de la navegación y la coherencia con las convenciones de diseño establecidas. Un ROA más alto indica que el sistema conserva patrones esperados de exploración cognitiva. Figura 7 muestra el ROA en diferentes etapas de evaluación para los conjuntos de datos RICO, ENRICO y Guo. ENRICO alcanza consistentemente el ROA más alto debido a su estructura de diseño regular y orientada a patrones, lo que permite una predicción más precisa de secuencias de lectura similares a las humanas. RICO muestra un rendimiento moderado con una ligera variabilidad, reflejando su mayor diversidad y complejidad del mundo real. El conjunto de datos Guo presenta el ROA más bajo, ya que muchas de sus pantallas son visualmente ricas pero carecen de jerarquías de lectura claramente definidas. En general, estos resultados indican que el módulo propuesto de refinamiento del diseño cognitivo funciona de manera más confiable en conjuntos de datos estructurados, al tiempo que mantiene predicciones estables del orden de lectura en diversos diseños de interfaz de usuario.

Figura 7. Precisión del orden de lectura en las distintas etapas de evaluación para múltiples conjuntos de datos. El gráfico de líneas muestra la precisión del orden de lectura en las distintas fases de evaluación para los conjuntos de datos RICO, ENRICO y Guo’s UI Color. El eje x representa la etapa de evaluación, y el eje y indica la precisión del orden de lectura. Cada curva corresponde a un conjunto de datos, ilustrando los cambios en la conservación del flujo visual a lo largo de las sucesivas etapas de evaluación. La etapa de evaluación representa las fases progresivas de refinamiento del marco propuesto. Haga clic aquí para ver una versión ampliada de esta figura.

Puntuación de consistencia de diseño (LCS)

La puntuación de consistencia de diseño (LCS) mide cuán consistentemente se mantienen los diseños de interfaz de usuario generados en múltiples pantallas dentro de la misma aplicación. Esto incluye consistencia en el espaciado, las reglas de alineación, las regiones tipográficas y los patrones de agrupamiento. Una puntuación más alta indica una mayor coherencia entre pantallas, lo que resulta en una experiencia de usuario más unificada e intuitiva. Figura 8 presenta el LCS medido en varias etapas de evaluación para los conjuntos de datos de color de interfaz de usuario RICO, ENRICO y Guo. El conjunto de datos ENRICO alcanza consistentemente los valores más altos de LCS debido a sus pantallas de interfaz de usuario etiquetadas por patrones y estructuralmente uniformes, lo que facilita un aprendizaje más estable de la consistencia entre pantallas. En contraste, el conjunto de datos RICO muestra una consistencia moderada pero en mejora constante, atribuible a la capacidad del modelo para generalizar a través de diseños de interfaz de usuario altamente diversos. Como era de esperar, el conjunto de datos Guo registra los valores más bajos de LCS, ya que se centra principalmente en las características de color en lugar del diseño estructural, lo que hace más difícil la consistencia entre múltiples pantallas. En general, estos resultados indican que el módulo propuesto de consistencia entre pantallas funciona más eficazmente en conjuntos de datos orientados a patrones, aunque sigue proporcionando mejoras medibles en todos los conjuntos de datos.

Figura 8. Puntuación de consistencia de diseño en las distintas etapas de evaluación para múltiples conjuntos de datos. El gráfico de líneas muestra las puntuaciones de consistencia de diseño según la etapa de evaluación para los conjuntos de datos de interfaces de usuario RICO, ENRICO y Guo. El eje x representa la etapa de evaluación y el eje y indica las puntuaciones de consistencia de diseño. Cada curva corresponde a un conjunto de datos e ilustra la mejora en la coherencia estructural de las interfaces generadas a lo largo de las sucesivas etapas de evaluación. Haga clic aquí para ver una versión más grande de esta figura.

Métricas de calidad del color

Los temas de color de interfaz de usuario generados se evalúan mediante cinco métricas basadas en la percepción, derivadas del CAM02-UCS: ΔE (diferencia perceptual de color), que cuantifica la uniformidad perceptual entre los colores de la paleta; la relación de contraste (basada en WCAG 2.1), que evalúa la legibilidad entre elementos de primer plano y fondo; el índice de armonía cromática (CHI), que mide la compatibilidad estética entre tonos; la puntuación de diversidad cromática (CDS), que refleja la variación dentro del espacio de color perceptual; y la puntuación de prominencia cromática (CPS), que evalúa el equilibrio y la dominancia de los colores dentro de la paleta. Juntas, estas métricas proporcionan una evaluación integral de la calidad estética y del rendimiento cromático orientado a la usabilidad. Los resultados demuestran que el método propuesto logra un valor de ΔE más bajo de 4,12, lo que indica una mayor uniformidad perceptual entre los colores. Una relación de contraste de 6,21 confirma el cumplimiento con las normas de accesibilidad, garantizando una mejor legibilidad. Tabla 5 presenta una comparación cuantitativa entre el módulo de modelado de color propuesto y los métodos de referencia. El CHI aumenta de 0,61 a 0,83, lo que indica una mayor cohesión estética en las transiciones de color. Además, la CDS aumenta en más del 50 %, demostrando que las paletas generadas mantienen una variación más rica sin introducir ruido visual. Valores más altos de CPS indican una distribución equilibrada de colores dominantes, evitando la saturación excesiva de cualquier tono único. En conjunto, estos resultados confirman la eficacia del módulo de modelado cromático basado en CAM02-UCS para generar esquemas de color de interfaz de usuario armónicos, legibles y optimizados perceptualmente.

Métrica	Definición	Método propuesto	Línea de base1	Mejora (%)
ΔE (CAM02-UCS)	Diferencia de color perceptual	4.12	7.85	47,5 % menor
Relación de contraste (WCAG)	Legibilidad de los pares FG–BG	6.21	4.38	41.80%
Índice de Armonía de Color (CHI)	Matiz & armonía cromática	0.83	0.61	36.10%
CDS (Puntuación de Diversidad de Color)	Varianza en J′a′b′ espacio	18.70	12.40	50.80%
CPS (Puntuación de Relevancia de Color)	Estabilidad de los colores dominantes	0.72	0.55	30.90%

Tabla 5: Comparación cuantitativa de métricas de calidad del color entre los métodos propuesto y de referencia. La tabla presenta métricas de evaluación para la calidad del color, incluyendo la diferencia de color perceptual (ΔE en CAM02-UCS), la relación de contraste (WCAG), el índice de armonía del color (CHI), la puntuación de diversidad del color (CDS) y la puntuación de prominencia del color (CPS). Se comparan los resultados del método propuesto con los valores de referencia, junto con los porcentajes de mejora.

Características demográficas de los participantes y diseño del estudio

Un total de 30 participantes participaron en el proceso de evaluación. Los participantes tenían edades comprendidas entre 20 y 35 años (edad media: 26,4 ± 3,2 años). La cohorte incluyó individuos con diversos antecedentes, entre ellos ingenieros de software, estudiantes y diseñadores de interfaces de usuario y experiencia de usuario (UI/UX). Según su competencia informática autodeclarada, el 40 % de los participantes se clasificaron como usuarios intermedios, el 35 % como usuarios avanzados y el 25 % como principiantes. Aproximadamente la mitad de los participantes tenían experiencia previa en diseño UI/UX o campos relacionados, mientras que el resto no la tenía. Esta diversidad garantizó una evaluación equilibrada en diferentes niveles de experiencia técnica y familiaridad con el diseño.

Métricas del estudio con usuarios

Se realizó una evaluación centrada en el usuario utilizando múltiples métricas, incluyendo la NASA-TLX, la escala de usabilidad del sistema (SUS), la puntuación de armonía estética (AHS), el tiempo de eficiencia de búsqueda (SET) y la calificación de consistencia entre pantallas (CSCR), para evaluar la carga cognitiva, la usabilidad, el atractivo visual, la eficiencia y la consistencia.

La métrica NASA-TLX cuantifica la carga mental midiendo factores como la demanda mental, el esfuerzo y la frustración. Puntuaciones más bajas indican una carga cognitiva reducida y una interacción más sencilla. El marco propuesto produjo consistentemente puntuaciones más bajas en la NASA-TLX en todos los conjuntos de datos, lo que indica un menor esfuerzo mental. Esta mejora puede atribuirse a la integración de principios de diseño cognitivo, incluyendo agrupamiento de Gestalt, espaciado optimizado y jerarquía visual mejorada, que en conjunto facilitan una navegación más intuitiva. La métrica SUS proporciona una puntuación estandarizada de usabilidad que varía de 0 a 100, donde valores más altos indican una mejor usabilidad y claridad. El marco propuesto obtuvo puntuaciones más altas en la SUS en comparación con los métodos de referencia, reflejando mejoras tanto en el diseño estructural como en la claridad del color. Una alineación, espaciado y flujo de navegación mejorados contribuyeron a interfaces que los usuarios percibieron como más intuitivas y funcionalmente coherentes. El AHS, medido en una escala Likert de 7 puntos, evalúa el atractivo visual percibido y la armonía cromática. Las interfaces generadas utilizando el módulo de modelado de color basado en CAM02-UCS alcanzaron valores más altos de AHS, lo que indica transiciones de color más suaves y paletas visualmente más equilibradas. Los participantes mostraron una preferencia constante por estas interfaces debido a un mejor contraste, coherencia de matiz y menor saturación visual, destacando la importancia del modelado perceptual del color en el diseño de interfaces. El SET mide el tiempo necesario para que los usuarios localicen elementos objetivo de la interfaz durante tareas de búsqueda visual. Valores más bajos de SET indican una mejor organización y jerarquía visual. El marco propuesto redujo significativamente el SET en todos los conjuntos de datos, demostrando que la integración de agrupamiento de Gestalt, espaciado guiado por la atención y estructuras de diseño refinadas permite una interacción más rápida y eficiente. La métrica CSCR evalúa la consistencia del diseño de la interfaz en múltiples pantallas. Puntuaciones más altas indican una mejor continuidad en el diseño, el color y la organización estructural. El marco propuesto alcanzó valores más altos de CSCR, reflejando la eficacia del módulo de consistencia multiscreen para mantener esquemas de color estables, espaciado y estructuras jerárquicas coherentes a través de las interfaces.

Figura 9 presenta los resultados del estudio comparativo con usuarios para todas las métricas (NASA-TLX, SUS, AHS, SET y CSCR) en los conjuntos de datos RICO, ENRICO y Guo. En general, se observan mejoras consistentes en todas las métricas de evaluación. En particular, el conjunto de datos Guo demuestra un rendimiento superior en métricas centradas en el usuario, incluyendo una carga cognitiva menor (NASA-TLX), una usabilidad más alta (SUS), una armonía estética mejorada (AHS), un tiempo de eficiencia de búsqueda reducido (SET) y una mayor consistencia entre pantallas (CSCR). Sin embargo, estos resultados requieren una interpretación cuidadosa. Las métricas de experiencia de usuario (UX) mejoradas observadas para el conjunto de datos Guo se atribuyen principalmente a su fuerte consistencia de color y composición visual relativamente más sencilla, más que a una calidad superior en el diseño estructural. Aunque los usuarios perciben estas interfaces como más armoniosas visualmente y menos exigentes cognitivamente, resultados previos demuestran que el conjunto de datos Guo tiene un desempeño deficiente en cuanto a alineación, agrupación y orden de lectura. Esto resalta una distinción importante entre factores perceptuales y estructurales en el diseño de interfaces de usuario. Si bien los atributos perceptuales, como la armonía de color, mejoran significativamente la experiencia de usuario, la precisión estructural y la consistencia del diseño siguen siendo fundamentales para la usabilidad funcional. Por lo tanto, un diseño óptimo de interfaz de usuario requiere un equilibrio entre armonía perceptual y corrección estructural.

Figura 9. Comparación de métricas del estudio con usuarios en diferentes conjuntos de datos. El gráfico de barras agrupadas compara las métricas del estudio con usuarios en los conjuntos de datos RICO, ENRICO y Guo’s UI Color Datasets. El eje x representa métricas de evaluación, incluyendo el Índice de Carga de Trabajo de la NASA (NASA-TLX), la Escala de Usabilidad del Sistema (SUS), la Puntuación de Armonía Estética (AHS), el Tiempo de Eficiencia Estructural (SET) y la Tasa de Consistencia entre Pantallas (CSCR), mientras que el eje y indica las puntuaciones correspondientes. Las barras representan el desempeño de cada conjunto de datos, mostrando diferencias en usabilidad, carga cognitiva, calidad estética y consistencia de la interfaz. NASA-TLX (0–100, menor es mejor), SUS (0–100, mayor es mejor), AHS (1–7 Likert), SET (s, menor es mejor) y CSCR (0–1, mayor es mejor). Haga clic aquí para ver una versión más grande de esta figura.

Validación estadística de hipótesis

Para validar aún más las hipótesis propuestas (H1–H4), se realizó una prueba de significancia estadística sobre métricas clave de evaluación, incluyendo calidad del diseño, carga cognitiva, armonía del color y medidas de usabilidad (Tabla 6). Los resultados se presentan como media ± desviación estándar, y la significancia estadística se evaluó mediante pruebas t pareadas con un intervalo de confianza del 95 % (p < 0,05). Los resultados indican que el marco propuesto logra mejoras estadísticamente significativas frente a los enfoques básicos en múltiples métricas, incluyendo precisión de alineación, precisión de agrupamiento, orden de lectura, carga cognitiva (NASA-TLX) y medidas de armonía del color. En particular, las reducciones en la carga cognitiva y las mejoras en las métricas de usabilidad muestran diferencias altamente significativas (p < 0,01). Estos hallazgos confirman que la integración de principios de diseño cognitivo y modelado perceptual del color conduce a mejoras medibles y estadísticamente significativas en la calidad de la interfaz de usuario, respaldando así las hipótesis H1–H4.

Métrica	Línea base (Media ± DE)	Propuesta (Media ± DE)	Mejora (%)	valor p	Significancia
Error de alineación (↓)	7.8 ± 1.2	4.2 ± 0.9	46.10%	0.003	Significativo
Precisión de agrupamiento (↑)	0.68 ± 0.05	0.82 ± 0.04	20.50%	0.001	Significativo
Precisión del orden de lectura (↑)	0.72 ± 0.06	0.87 ± 0.03	20.80%	0.002	Significativo
NASA-TLX (↓)	68.5 ± 5.4	47.2 ± 4.8	31.10%	0.0005	Altamente significativo
Puntuación SUS (↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	Altamente significativo
Índice de armonía cromática (↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	Significativo
Relación de contraste (↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	Significativo

Tabla 6: Comparación estadística de las métricas de desempeño entre los métodos de referencia y el método propuesto. La tabla presenta la media y la desviación estándar (media ± DE) de métricas clave de desempeño, incluyendo error de alineación, precisión en agrupamiento, precisión en orden de lectura, Índice de Carga de Trabajo NASA (NASA-TLX), escala de usabilidad del sistema (SUS), índice de armonía cromática y relación de contraste. Se indican los porcentajes de mejora, los valores p y los niveles de significancia estadística. (↑) indica que valores más altos son mejores, y (↓) indica que valores más bajos son mejores. La significancia estadística se evaluó con p < 0,05.

Observaciones específicas del conjunto de datos

El rendimiento relativamente inferior observado en las métricas estructurales en el conjunto de datos Guo puede atribuirse a sus características inherentes. El conjunto de datos Guo es más pequeño que RICO y ENRICO y se centra principalmente en características de color perceptuales en lugar de anotaciones de diseño estructurado. Como resultado, presenta una mayor variabilidad en la colocación de componentes, una organización jerárquica más débil y estructuras de diseño menos consistentes entre pantallas. Estas propiedades dificultan más el aprendizaje estructural y la optimización del diseño, lo que explica el menor rendimiento en las métricas de alineación, agrupamiento y orden de lectura, a pesar del buen desempeño en evaluaciones perceptuales y centradas en el usuario.

Estudio de ablación

El estudio de ablación evalúa la contribución de cada módulo dentro del marco propuesto mediante la eliminación sistemática de componentes individuales y el análisis de su impacto en la calidad del diseño, la modelización del color y el rendimiento de detección. La calidad del diseño se evalúa utilizando AE, GA, ROA y LCS. AE refleja la desviación posicional de los elementos de la interfaz de usuario, donde valores más altos indican una estructura espacial más débil. GA evalúa la eficacia con la que los componentes se organizan según los principios de la Gestalt. ROA mide la preservación del flujo visual lógico, mientras que LCS cuantifica la coherencia estructural entre pantallas en términos de alineación, espaciado y organización del diseño. La degradación de la calidad del color se evalúa mediante ΔE (diferencia de color perceptual), CHI y CDS, que conjuntamente evalúan la uniformidad perceptual, la coherencia estética y la riqueza de la paleta. El rendimiento de detección se evalúa mediante mAP, precisión y exhaustividad, que cuantifican el impacto de reemplazar el módulo Faster R-CNN por un modelo de detección más simple. En conjunto, estas métricas proporcionan una evaluación integral de cómo cada módulo contribuye al rendimiento general del sistema.

Tabla 7 resume la contribución de cada módulo y compara el marco propuesto con enfoques existentes de generación de interfaces de usuario. El modelo completo alcanza el mejor desempeño en todas las métricas de calidad de diseño, modelado de color y detección, lo que demuestra que el diseño cognitivo, el modelado perceptual de color y la comprensión visual profunda tienen un efecto sinérgico. Cuando se elimina el módulo de modelado de color, ΔE aumenta significativamente, mientras que CHI y CDS disminuyen considerablemente, lo que indica una pérdida de uniformidad perceptual y armonía cromática. Esto confirma la importancia del modelado basado en CAM02-UCS para mantener la calidad estética y perceptual. La eliminación del módulo de diseño cognitivo provoca un aumento significativo en AE y disminuciones notables en GA y ROA, lo que demuestra que los principios de diseño cognitivo son esenciales para producir diseños estructuralmente coherentes y legibles. La supresión del módulo de consistencia entre pantallas conduce a una reducción en LCS, confirmando su papel en el mantenimiento de patrones de diseño consistentes en múltiples pantallas. Reemplazar el detector Faster R-CNN por una CNN más simple resulta en una marcada disminución en mAP, precisión y recuperación, destacando la importancia crítica de una detección robusta de componentes en todo el proceso. En comparación con métodos básicos, incluidos pix2code, REDRAW y LDGM, el marco propuesto supera consistentemente a todos los enfoques en precisión de diseño, coherencia visual y calidad perceptual del color.

Método / Módulo	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Módulo de color eliminado	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Módulo de distribución cognitiva eliminado	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
Consistencia multi-pantalla eliminada	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNN sustituido por CNN simple	0.16	0.85	0.91	0.85	4.15	0.82	18.1	0.74
Pix2Code	0.25	0.61	0.65	0.51	10.2	0.48	9.6	0.65
REDRAW	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM (Difusión de distribución)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
Modelo completo propuesto	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Tabla 7: Estudio de ablación y análisis comparativo del rendimiento del marco propuesto y los métodos básicos. La tabla evalúa el impacto de componentes individuales mediante la comparación del modelo completo propuesto con variantes en las que se eliminan módulos específicos (módulo de color, módulo de distribución cognitiva, consistencia entre pantallas y sustitución de Faster R-CNN por una CNN sencilla), así como con métodos básicos (pix2code, REDRAW y LDGM). El rendimiento se evalúa mediante el error de alineación (AE), la precisión de agrupamiento (GA), la precisión del orden de lectura (ROA), la puntuación de consistencia de distribución (LCS), la diferencia de color perceptual (ΔE), el índice de armonía de color (CHI), la puntuación de diversidad de color (CDS) y la precisión media promedio (mAP). (↑) indica que valores más altos son mejores, y (↓) indica que valores más bajos son mejores.

DISPONIBILIDAD DE LOS DATOS:

Los conjuntos de datos utilizados en este estudio están disponibles en los siguientes enlaces: conjunto de datos RICO: https://interactionmining.org/rico; conjunto de datos ENRICO: https://github.com/luileito/enrico; conjunto de datos de color de interfaz de usuario de Guo: https://github.com/guozhongke/UI-Color-Dataset.

Archivo complementario 1. Formulaciones matemáticas y detalles extendidos de implementación. Este archivo proporciona las formulaciones matemáticas detalladas y los flujos de trabajo algorítmicos que respaldan el marco propuesto de prototipado automatizado de interfaces de usuario (UI). Incluye el entrenamiento de detección de componentes, extracción de patrones de disposición, modelado de armonía de color, el objetivo unificado de prototipado de interfaces de usuario, detalles de detección mediante Faster R-CNN, cálculos de similitud de alineación y distancia espacial, construcción de árboles lógicos de interfaces de usuario, modelado de color perceptual basado en CAM02-UCS, optimización de diseño cognitivo, modelado de consistencia entre pantallas y los Algoritmos S1–S3.Haga clic aquí para descargar este archivo.

Discusión

Los hallazgos demuestran mejoras estadísticamente significativas en usabilidad, organización estructural y calidad perceptual (p < 0,05), confirmando la eficacia de incorporar principios de diseño cognitivo en la prototipación automatizada de interfaces de usuario. A diferencia de los sistemas tradicionales de generación de interfaces que dependen principalmente de la detección visual o de heurísticas basadas en reglas, el marco propuesto integra agrupamiento gestáltico, modelado de jerarquías, restricciones de espaciado y legibilidad perceptual en todo el proceso de reconstrucción de la interfaz. Las mejoras observadas en las escalas NASA-TLX, SUS y SET confirman además una reducción estadísticamente significativa en la carga cognitiva (NASA-TLX, p.< 0,01). Estos resultados indican que la generación automatizada de interfaces debe ir más allá de la precisión en la reconstrucción visual e incorporar conocimientos de diseño centrado en el ser humano para lograr una usabilidad práctica. Además, todas las hipótesis formuladas (H1–H4) reciben apoyo empírico por parte de los resultados experimentales.

Más allá de las mejoras en el diseño, la integración de un modelo de color perceptual basado en CAM02-UCS produce ganancias estadísticamente significativas en armonía del color, accesibilidad y estabilidad perceptual (p < 0,05), tal como se refleja en las mejoras de ΔE, CHI, CDS y la relación de contraste. En comparación con trabajos previos, como la generación automatizada de temas de color en interfaces basados en imágenes, que se centran principalmente en la optimización del color, el marco propuesto integra tanto el refinamiento del color como del diseño dentro de una misma canalización unificada. Además, la inclusión de un módulo de consistencia multiscreen aborda una limitación clave de enfoques anteriores que se enfocan únicamente en la generación de interfaces para una sola pantalla. Una comparación con métodos existentes, incluidos pix2code³¹, REDRAW^23,24 y LDGM³², muestra que estos enfoques enfatizan principalmente la reconstrucción estructural o el modelado generativo, sin incorporar principios cognitivos, armonización perceptual del color ni razonamiento multiscreen. El marco propuesto demuestra mejoras estadísticamente significativas frente a estos métodos (p < 0,05) en métricas de precisión de diseño (AE, GA y ROA), métricas perceptuales (CHI y ΔE) y medidas de usabilidad (SUS y CSCR). Estos hallazgos destacan la ventaja de combinar principios de diseño cognitivo, modelado del color perceptual y aprendizaje profundo dentro de un sistema unificado.

Una observación importante derivada de los resultados es la distinción entre factores estructurales y perceptuales que influyen en la experiencia de usuario (UX). La optimización estructural mejora la corrección funcional y la claridad del diseño, mientras que la optimización perceptual —en particular, la armonía del color— influye significativamente en la percepción del usuario y en la carga cognitiva. Los hallazgos indican que un diseño de interfaz de usuario (UI) óptimo requiere un equilibrio entre precisión estructural y coherencia perceptual. A pesar de las mejoras demostradas, aún persisten ciertas limitaciones. Por ejemplo, el desempeño en conjuntos de datos más pequeños y orientados principalmente a lo perceptual, como el conjunto de datos Guo UI Color, es menor en las métricas estructurales debido a la variabilidad en la organización del diseño y a la escasez de anotaciones estructurales. Estas características introducen desafíos para aprender patrones de diseño consistentes y relaciones jerárquicas. En trabajos futuros se enfocará el esfuerzo en mejorar la robustez en este tipo de conjuntos de datos.

Desde una perspectiva teórica, esta investigación demuestra que la generación de interfaces de usuario puede mejorarse significativamente mediante la incorporación de principios cognitivos y perceptuales directamente en los flujos de trabajo de aprendizaje profundo. El estudio cuestiona la visión convencional de que la generación de interfaces de usuario es únicamente un problema de visión por computadora o generación de código. En cambio, destaca la importancia de incorporar la uniformidad perceptual (mediante CAM02-UCS), la reducción de la carga cognitiva (mediante principios de la Gestalt y modelado jerárquico) y la coherencia en el diseño multiscreen como componentes fundamentales de los sistemas automatizados de interfaces de usuario. Este trabajo contribuye a un cambio hacia modelos computacionales centrados en el ser humano, en los que la generación de interfaces de usuario considera no solo la corrección estructural, sino también factores psicológicos y perceptuales. Como tal, establece una nueva dirección teórica para la inteligencia de diseño automatizado.

Desde un punto de vista práctico, el marco propuesto ofrece una solución implementable para diseñadores de interfaces de usuario, equipos de productos y herramientas de prototipado. Al reducir la carga cognitiva y mejorar la eficiencia de búsqueda, el sistema genera diseños de interfaces que requieren menos ajustes manuales para cumplir con los estándares profesionales de diseño. El uso de temas de color optimizados perceptualmente garantiza el cumplimiento de las directrices de accesibilidad, como las WCAG 2.1, posibilitando su uso inmediato en aplicaciones del mundo real. Además, el módulo de consistencia multiscreen facilita un desarrollo más rápido de aplicaciones multipágina al mantener patrones de diseño y diseño consistentes sin necesidad de ajustes manuales. En conjunto, el marco tiene el potencial de reducir significativamente el tiempo de desarrollo de interfaces, al tiempo que mejora tanto la calidad como la usabilidad de los diseños generados.

El marco propuesto introduce un enfoque centrado en el ser humano para la prototipación automatizada de interfaces de usuario, integrando principios de diseño cognitivo, modelado perceptual del color (CAM02-UCS) y consistencia de diseño multiscreen en una tubería computacional unificada. A diferencia de enfoques anteriores centrados principalmente en la reconstrucción estructural o la detección visual, este marco modela explícitamente la agrupación gestáltica, la jerarquía, la optimización del contraste y la uniformidad perceptual. Los resultados experimentales demuestran mejoras significativas en usabilidad (SUS y NASA-TLX), armonía visual (AHS, CHI y ΔE) y desempeño estructural (GA, ROA, LCS y mAP), lo que confirma que la modelización cognitiva y perceptual mejora la calidad de la interfaz de usuario y la experiencia del usuario. Futuros trabajos explorarán la integración de modelos visuales–lingüísticos basados en transformadores para mejorar la comprensión semántica y el razonamiento estructural. Además, la incorporación de personalización adaptativa, diseños adaptables a dispositivos y refinamiento con intervención humana podría mejorar aún más la aplicabilidad práctica del sistema. En conjunto, este trabajo proporciona una base para sistemas de diseño de interfaces de usuario impulsados por inteligencia artificial de próxima generación que no solo sean visualmente precisos, sino también cognitivamente eficientes, perceptualmente armónicos y prácticamente desplegables.

Materiales

Lista de materiales utilizados en este artículo

Nombre	Empresa	Número de catálogo	Comentarios
CPU (Procesador)	AMD Ryzen 9 7950X (16 núcleos, 32 hilos, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), EE. UU.	Ryzen 9 7950X
CUDA Toolkit	Versión 11.8	NVIDIA Corporation, EE. UU.	CUDA Toolkit 11.8
cuDNN	Versión 8.9	NVIDIA Corporation, EE. UU.	cuDNN v8.9
Faster R-CNN	Modelo de detección de objetos (con red de propuesta de regiones)	Meta AI Research / Detectron2	Entorno Detectron2
Matplotlib	Versión 3.7	Equipo de desarrollo de Matplotlib	v3.7.0
GPU NVIDIA RTX 4090	Tarjeta gráfica de 24 GB GDDR6X	NVIDIA Corporation, Santa Clara, CA, EE. UU.	RTX 4090
NumPy	Versión 1.24	Desarrolladores de NumPy	v1.24.0
OpenCV	Versión 4.8	Fundación OpenCV	v4.8.0
PyTorch	Versión 2.0	Fundación PyTorch (Meta AI)	v2.0.0
ResNet-50 con FPN	CNN base con red de pirámide de características	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	Versión 1.3	Desarrolladores de Scikit-learn	v1.3.0
SciPy	Versión 1.10	Comunidad SciPy	v1.10.0
Memoria del sistema (RAM)	64 GB DDR5	Corsair / Kingston (o equivalente)	Kit DDR5 de 64 GB
Sistema operativo Ubuntu	Versión 22.04 LTS	Canonical Ltd., Reino Unido	Ubuntu 22.04 LTS