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

Jun Shi; Di Chen

doi:10.3791/71071

Se requiere una suscripción a JoVE para ver este contenido. Inicie sesión o comience su prueba gratuita.

Artículo de investigación

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

122 visualizaciones

⸱

DOI:

10.3791/71071

⸱

14 de agosto de 2026

Jun Shi¹ , Di Chen²

¹School of Art and Communication, Shanghai Institute of Commerce and Foreign Languages, ²Hubei College of the Arts

En este artículo

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)¹^,². 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 opera....