Estrutura de Prototipagem Automatizada de Interface do Usuário Integrando Princípios de Design Cognitivo e Visual para Melhorar a Usabilidade e a Clareza do Layout

Resumo

Este estudo apresenta uma estrutura automatizada para prototipagem de interfaces de usuário, integrando princípios de design cognitivo, modelagem perceptual de cores e aprendizado profundo. O sistema melhora a acessibilidade, a clareza do layout, a harmonia de cores e a consistência entre telas, resultando em designs de interface coerentes e centrados no usuário.

Resumo

O design eficaz de interface do usuário (IU) exige um equilíbrio harmônico entre apelo visual, usabilidade cognitiva e consistência de layout. No entanto, as abordagens atuais de geração automática de IU focam principalmente na aparência visual ou na detecção de componentes, carecendo de um framework unificado que integre princípios cognitivos, inteligência de cor e raciocínio estrutural. Além disso, os métodos existentes sofrem com generalização limitada de layout, baixa interpretabilidade, seleção estática de cores e comportamento inconsistente entre telas. Nesse contexto, este trabalho propõe um framework automatizado de prototipagem de IU que integra a detecção de componentes baseada na rede neural convolucional com região proposta mais rápida (Faster R-CNN) e a modelagem perceptual de cores orientada pelo espaço de cor uniforme CIECAM02 (CAM02-UCS), enriquecidos com princípios de design cognitivo e visual. O Faster R-CNN é utilizado para identificar componentes de IU e inferir estruturas hierárquicas a partir de conjuntos de dados de interfaces em larga escala. Um módulo aprimorado de geração de cores analisa imagens de marca ou de referência para garantir temas cromáticos perceptualmente uniformes, harmônicos e compatíveis com usabilidade, utilizando o CAM02-UCS. Essas saídas são ainda otimizadas por meio de regras de design cognitivo, incluindo agrupamento Gestalt, leis de Fitts e Hick, espaçamento baseado em atenção e modelagem de hierarquia visual, para gerar automaticamente layouts de IU refinados e orientados a tarefas. Experimentos realizados nos conjuntos de dados RICO, ENRICO e Guo’s UI Color mostram que o sistema proposto alcança 92,4% de precisão na detecção de componentes, melhora a clareza do layout e a precisão da ordem de leitura em 18,7% e produz paletas de cores consideradas 24,5% mais harmônicas por designers, em comparação com métodos de referência. Avaliações por usuários também indicam uma redução de 31% na carga cognitiva percebida e um aumento de 28% na consistência do design entre telas. Esses resultados demonstram que a combinação da compreensão estrutural baseada em aprendizado profundo com modelagem de cores fundamentada na percepção e princípios de design cognitivo produz protótipos de IU altamente eficientes, esteticamente coerentes e amigáveis ao usuário. Este framework estabelece uma nova abordagem completa e centrada no ser humano para a prototipagem automatizada e inteligente de IU.

Introdução

As interfaces gráficas do usuário (GUIs) atuam como um meio fundamental de comunicação entre humanos e sistemas computacionais, influenciando significativamente a usabilidade, acessibilidade e a experiência geral do usuário (UX)^1,2. Sistemas de software modernos dependem de interfaces intuitivas e visualmente atraentes para atrair e reter usuários. Tradicionalmente, o design de interfaces envolve a criação de layouts gráficos que posteriormente são convertidos em código front-end por engenheiros. No entanto, as diferenças em protocolos específicos de plataforma entre sistemas operacionais exigem adaptações repetidas, aumentando a complexidade e o esforço de desenvolvimento. Assim, a geração automatizada de código de interface emergiu como uma direção de pesquisa importante, reduzindo o esforço manual e melhorando a eficiência do desenvolvimento.

As primeiras abordagens para geração automatizada de interfaces gráficas combinavam técnicas tradicionais de processamento de imagens com modelos de aprendizado profundo para detecção e classificação de regiões^3,4. Atualmente, as estratégias predominantes para geração de código de interfaces gráficas aplicam técnicas de visão computacional para analisar imagens de interfaces e convertê-las em representações estruturadas de front-end^5,6,7. Enquanto métodos de processamento de imagens dependem de características manualmente projetadas, abordagens de aprendizado profundo extraem representações hierárquicas a partir de conjuntos de dados em larga escala. Como resultado, pesquisadores têm explorado abordagens híbridas que combinam aprendizado profundo com técnicas específicas de domínio de processamento de imagens para melhorar a robustez e a precisão.

A cor é outro fator crítico no design de interfaces, influenciando a percepção do usuário, a usabilidade e o apelo estético¹. Manter a consistência entre o conteúdo da imagem e os esquemas de cores da interface torna-se desafiador quando as entradas visuais variam em matiz e contexto^8,9,10. Consequentemente, uma quantidade significativa de pesquisa tem se concentrado na geração automatizada de paletas de cores e na modelagem perceptual de cores. Os métodos existentes para geração de cores incluem técnicas baseadas no espaço de cor CIELAB¹¹. Outras abordagens utilizam algoritmos de agrupamento, como o k-means, para extrair as cores dominantes de imagens¹². Como resultado, trabalhos recentes têm adotado cada vez mais abordagens baseadas em dados e em aprendizado de máquina para modelagem de cores.

Paralelamente, as abordagens de aprendizado profundo melhoraram significativamente a detecção de componentes de interface e a compreensão de layout. Redes neurais permitiram uma análise estrutural mais precisa de interfaces móveis.¹³No entanto, esses métodos concentram-se principalmente na precisão de detecção e muitas vezes negligenciam aspectos de nível superior, como usabilidade cognitiva, hierarquia de layout e eficiência de interação. Também foram propostos modelos generativos para a síntese de layout de interface de usuário^14,15, mas enfrentam desafios na manutenção da consistência entre telas e na fornecimento de decisões de design interpretáveis¹⁶Outras abordagens concentram-se na similaridade visual ou na qualidade de renderização, mas carecem de um framework unificado que combine semântica dos componentes, harmonia de cores e restrições de usabilidade¹⁷O reconhecimento de texto também é importante para a compreensão do conteúdo da interface do usuário (UI). Técnicas como redes neurais recorrentes convolucionais (CRNNs) permitem o reconhecimento preciso de padrões de texto complexos em telas de interface.^18,19,20.

Vários sistemas foram propostos para gerar código de interface do usuário (UI) a partir de esboços ou imagens. O Sketch2Code utiliza detecção de objetos para converter esboços em representações de código^21,22, mas é sensível à qualidade da imagem. O REDRAW fornece um pipeline automatizado para coleta de dados e treinamento de modelos, combinando redes neurais convolucionais e recorrentes para gerar representações estruturadas de interfaces do usuário^23,24. Trabalhos posteriores introduziram métricas de avaliação aprimoradas para avaliar a qualidade das interfaces do usuário geradas²⁵. Abordagens mais recentes incluem modelos baseados em difusão e em transformadores para geração de layouts, como transformadores de layout por difusão sem métodos de autoencoder, geração de layout de interface gráfica do usuário (GUI) usando grafos de organização de GUI baseados em transformadores e geração de layout de interface do usuário orientada por modelos de linguagem grandes^26,27,28. Uma visão geral comparativa dessas abordagens é apresentada na Tabela 1.

Referências e Método(s) Principal(is)	Objetivo	Vantagens	Desvantagens
Geração Automatizada de Temas de Cores em Interface de Usuário Baseada em Imagem: extração de cores predominantes + modelagem perceptual de cores CAM02-UCS¹	Gerar automaticamente temas de cores para interfaces de usuário a partir de imagens de referência, otimizando harmonia e usabilidade.	Forte base perceptual (CAM02-UCS); equilibra explicitamente harmonia e usabilidade (contraste e diversidade); inclui implementação baseada na web e avaliação por designers.	Foca apenas em cores/temas (não em layout ou estrutura de componentes); baseado em regras/heurísticas, em vez de síntese de interface de usuário aprendida de ponta a ponta.
Unificação da Geração de Layout com um Modelo de Difusão Desacoplado (LDGM)²⁵	Geração unificada e flexível de layout para cenas gráficas e interfaces de usuário.	Diversidade e controlabilidade de estado da arte na geração de layout; suporta geração condicional e múltiplos tipos de atributos.	Saídas baseadas em difusão podem apresentar problemas de alinhamento ou detalhes finos no layout, a menos que sejam restritas; maior complexidade do modelo e custo de inferência.
Transformadores de Layout por Difusão sem Métodos de Autoencoder: transformador + difusão para geração de layout (sem autoencoder)²⁶	Melhorar fidelidade e alinhamento em benchmarks de geração de layout (métricas FID, alinhamento e sobreposição).	Melhor capturação de correlações semânticas entre objetos vizinhos; desempenho robusto nas métricas FID e de alinhamento.	Foca principalmente na geometria do layout (posições, tamanhos, categorias), e não na semântica da interface de usuário.
Geração de Layout de GUI com Modelos Baseados em Transformador a Partir de Grafos de Organização de GUI (GUI-AGs)²⁷	Criar layouts de GUI a partir de restrições posicionais/gráficas para auxiliar designers.	Representações em grafo capturam restrições relacionais; o transformador permite geração flexível condicionada a restrições.	Pode exigir grafos de restrição explícitos dos designers; ênfase limitada em métricas de cor e usabilidade.
Geração de Layout de UI com Modelos de Linguagem de Grande Porte (LLMs) Guiados por Gramática de UI: Modelos de Linguagem de Grande Porte (LLMs) + gramática hierárquica de UI²⁸	Explorar LLMs para geração de layout e melhorar explicabilidade/controle por meio de representações gramaticais.	Alta controlabilidade e explicabilidade em nível superior; pode aproveitar o aprendizado em contexto de LLMs (tipo GPT).	Trabalho em estágio inicial com validação empírica limitada; design da gramática e robustez em diferentes interfaces de usuário

Tabela 1: Comparação dos métodos existentes de modelagem de cores de interface e geração de layout. A tabela resume abordagens representativas para o design de interface de usuário, incluindo geração de tema de cores, geração de layout baseada em difusão, métodos baseados em transformadores e geração de layout orientada por modelos de linguagem grandes. Para cada método, são apresentadas a técnica subjacente, o objetivo, as vantagens e as limitações, destacando as diferenças nos aspectos de modelagem perceptual, capacidade de geração de layout, controlabilidade e considerações de usabilidade.

Apesar desses avanços, uma limitação fundamental permanece: nenhum sistema existente integra conjuntamente a detecção de componentes, a modelagem perceptual de cores, os princípios cognitivos de design e a consistência de layout em múltiplas telas dentro de um único framework ponta a ponta¹. As abordagens atuais normalmente otimizam apenas um ou dois aspectos — como detecção, layout ou cor — sem considerar suas interdependências. Essa fragmentação evidencia uma lacuna crítica na pesquisa para o desenvolvimento de sistemas unificados de prototipagem automatizada de interfaces centradas no ser humano. Em particular, os princípios de design cognitivo, como as leis de Gestalt, a lei de Fitts e a lei de Hick, muitas vezes são tratados de forma conceitual, em vez de serem formalmente integrados em modelos computacionais.

Para superar essas limitações, este estudo propõe um framework automatizado de prototipagem de interface do usuário (UI) de ponta a ponta que integra detecção de componentes, modelagem de cor perceptual e princípios de design cognitivo em um sistema unificado. O framework foi projetado para melhorar a qualidade do layout, reduzir a carga cognitiva, aprimorar a harmonia de cores e aumentar a usabilidade geral. Essas melhorias são validadas por meio de experimentos nos conjuntos de dados RICO, ENRICO e Guo’s UI Color Datasets, demonstrando a eficácia da combinação de aspectos estruturais, perceptuais e cognitivos em um único pipeline automatizado de prototipagem de UI. Levanta-se a hipótese de que a integração da detecção de componentes baseada em aprendizado profundo, modelagem de cor perceptual e princípios de design cognitivo em um framework unificado melhorará significativamente a qualidade do protótipo de UI em comparação com abordagens existentes. Especificamente, H1 propõe que o framework aprimora a qualidade do layout, incluindo alinhamento, agrupamento e ordem de leitura. H2 postula que o framework reduz a carga cognitiva do usuário. H3 sugere que a modelagem de cor perceptual melhora a coordenação de cores e a harmonia visual. H4 afirma que a usabilidade geral e a qualidade estética dos protótipos de UI são aprimoradas.

Protocolo

Este estudo utiliza conjuntos de dados de acesso público e não envolve seres humanos ou animais.

A estrutura proposta de prototipagem automatizada de interface com o usuário integra a compreensão estrutural baseada em aprendizado profundo, a modelagem de cores perceptualmente uniforme e princípios de design cognitivo para gerar protótipos de interface coerentes e centrados no usuário. A metodologia inicia-se com uma arquitetura Faster R-CNN treinada nos conjuntos de dados RICO e ENRICO para detectar componentes de interface e extrair suas relações hierárquicas, permitindo a interpretação precisa de diversos layouts de tela. Os componentes detectados são então processados por um módulo de inteligência de cor, que extrai pistas de cor baseadas em marca ou imagem, modela a similaridade perceptual usando CAM02-UCS e gera paletas de cores harmônicas, com atenção ao contraste e compatíveis com acessibilidade. Posteriormente, princípios de design cognitivo — incluindo as leis de agrupamento de Gestalt, a lei de Fitts, a lei de Hick, espaçamento baseado em atenção e restrições de hierarquia visual — são aplicados por meio de um mecanismo de otimização cognitiva para aprimorar a organização espacial e o alinhamento dos componentes. Por fim, uma camada de raciocínio de layout integra restrições estruturais, perceptuais e cognitivas para gerar protótipos de interface com múltiplas telas consistentes, equilibrando usabilidade, estética e clareza funcional. Este pipeline integrado garante coerência perceptual, reduz a carga cognitiva e adere a princípios de design centrados no ser humano. O fluxo de trabalho completo do método proposto é ilustrado na Figura 1.

Figura 1. Arquitetura geral do framework proposto para prototipagem automatizada de interface de usuário. O diagrama ilustra o pipeline completo, começando com uma imagem de interface de usuário (UI) de entrada. A detecção de componentes é realizada usando Faster R-CNN para identificar os elementos da interface. Os componentes detectados são então processados utilizando modelagem perceptual baseada em CAM02-UCS para extração de hierarquia e layout. Em seguida, é aplicada a otimização cognitiva com base nos princípios de Gestalt, na lei de Fitts, na lei de Hick e em ajustes baseados na atenção. As setas indicam o fluxo de dados entre os módulos, resultando na saída final do protótipo de interface de usuário. Clique aqui para visualizar uma versão maior desta figura.

Visão geral do framework

Figura 1 ilustra o fluxo de trabalho completo do framework proposto de prototipagem automatizada de interface do usuário (UI), que transforma uma captura de tela bruta de uma UI em um protótipo refinado cognitivamente. O processo inicia com a imagem de entrada da interface, que é enviada ao módulo de detecção de componentes baseado no Faster R-CNN. Este módulo identifica elementos da interface, como botões, ícones, campos de texto e contêineres, e gera seus respectivos retângulos delimitadores e rótulos de classe. Os componentes detectados são então processados na etapa de extração de hierarquia e layout. Com base em relações espaciais e padrões estruturais, o sistema constrói uma árvore hierárquica de layout que reflete a forma como os usuários percebem naturalmente a organização da tela. Essa representação captura o agrupamento visual e as dependências estruturais entre os elementos da interface. O layout extraído é posteriormente refinado por meio de otimização cognitiva mediante a aplicação de princípios de design centrado no ser humano. Entre eles estão o agrupamento de Gestalt para o agrupamento visual, a lei de Fitts para otimizar o tamanho e a acessibilidade de áreas de toque, a lei de Hick para reduzir a complexidade de decisão e o espaçamento baseado na atenção para melhorar a hierarquia visual. Como resultado, o layout torna-se mais intuitivo, legível e eficiente para a interação do usuário. Por fim, o layout otimizado é combinado com modelagem perceptual de cores para gerar um protótipo de interface coerente. A interface resultante é estruturalmente precisa, visualmente harmônica e compatível com as expectativas humanas de usabilidade.

O framework foi implementado usando PyTorch 2.0 no Ubuntu 22.04. Os experimentos foram realizados em um sistema equipado com uma GPU NVIDIA RTX 4090 (24 GB de VRAM). O modelo Faster R-CNN utilizou uma estrutura ResNet-50 pré-treinada no conjunto de dados ImageNet. O treinamento foi realizado usando o otimizador stochastic gradient descent (SGD) com uma taxa de aprendizado de 0,001, tamanho de lote de 16 e até 60 épocas. A parada antecipada foi aplicada para evitar overfitting, utilizando um conjunto de validação composto por 20% dos dados. Embora o treinamento tenha sido realizado por até 60 épocas, a convergência foi geralmente alcançada anteriormente por meio da parada antecipada com base na perda de validação. O momento e a redução de peso foram definidos como 0,9 e 0,0005, respectivamente. A ampliação dos dados incluiu normalização, espelhamento horizontal aleatório e recorte e redimensionamento aleatórios.

Preparação do conjunto de dados

Para apoiar o framework proposto de prototipagem automatizada de interface do usuário (UI), foram utilizados três conjuntos de dados complementares: ENRICO²⁹, RICO³⁰ e o Guo’s UI Color Dataset¹. O conjunto de dados RICO contém 66.261 telas de interface do usuário do Android coletadas de 9.700 aplicações, fornecendo diversidade em larga escala para detecção de componentes e extração de layout hierárquico. O ENRICO inclui 1.464 capturas de tela de alta qualidade classificadas manualmente em 20 padrões de design, permitindo uma generalização aprimorada para raciocínio estrutural e modelagem de consistência de layout. O Guo’s UI Color Dataset consiste em 128 imagens de interface do usuário curadas com temas de cores anotados, utilizadas para modelagem de cor perceptual e avaliação de paletas. No entanto, devido ao seu tamanho relativamente menor, este conjunto de dados pode introduzir alguma variabilidade nas características de layout. Para este estudo, foi preparado um conjunto combinado de 5.128 telas para treinamento e avaliação. Especificamente, cerca de 4.000 imagens do RICO foram usadas para treinar o modelo Faster R-CNN para detecção de componentes, 1.000 imagens do ENRICO foram utilizadas para aprendizado de padrões de layout e modelagem de consistência estrutural, e 128 imagens do conjunto de dados de Guo foram empregadas para tarefas de avaliação de cor. Todas as imagens foram normalizadas para uma resolução de 480 × 800 pixels, convertidas para um espaço de cor sRGB uniforme e reanotadas com caixas delimitadoras padronizadas e metadados hierárquicos para garantir compatibilidade entre os conjuntos de dados. Uma visão geral dos conjuntos de dados utilizados neste estudo é apresentada na Tabela 2. O conjunto de dados RICO apoia a detecção em larga escala de componentes de interface do usuário e análise estrutural, enquanto o ENRICO aprimora a capacidade do modelo de reconhecer padrões de layout e impor consistência entre telas. O Guo’s UI Color Dataset, embora menor em tamanho, desempenha um papel crítico na avaliação da harmonia de cor perceptual e modelagem de contraste. Juntos, esses conjuntos de dados fornecem uma base abrangente e bem equilibrada para o treinamento, validação e avaliação do framework proposto de prototipagem automatizada de interface do usuário.

Conjunto de Dados	Total de Imagens Disponíveis	Imagens Utilizadas no Estudo	Finalidade na Estrutura Proposta
RICO Dataset30	66.261	4.000	detecção de componentes de interface, extração de layout estrutural
ENRICO Dataset29	1.464	1.000	aprendizado de padrões de design, modelagem de consistência de layout
Guo’s UI Color Dataset1	128	128	extração de tema de cor, avaliação perceptual de cor
Total Combinado	67.853	5.128	conjunto de dados abrangente para detecção, layout e modelagem de cor

Tabela 2: Resumo dos conjuntos de dados utilizados na estrutura proposta. A tabela apresenta os conjuntos de dados utilizados para treinamento e avaliação, incluindo os conjuntos de dados RICO, ENRICO e Guo’s UI Color. São relatados o número total de imagens disponíveis, o subconjunto utilizado neste estudo e o papel específico de cada conjunto de dados na detecção de componentes, modelagem de layout e análise perceptual de cores dentro da estrutura proposta.

Uma estratégia de amostragem estratificada foi empregada para preservar a diversidade em componentes de interface do usuário, estruturas de layout e distribuições de cores nos conjuntos de dados RICO, ENRICO e Guo. O conjunto de dados foi dividido em subconjuntos de treinamento (70%), validação (15%) e teste (15%) utilizando amostragem estratificada. As imagens foram normalizadas usando média (0.485, 0.456 e 0.406) e desvio padrão (0.229, 0.224 e 0.225). Aumento de dados incluiu inversão horizontal aleatória (probabilidade = 0.5) e recorte aleatório (intervalo de escala: 0.8–1.0), seguido por redimensionamento para 224 × 224 pixels aplicado durante o treinamento.

Anotação dos componentes e pré-processamento

O RICO, o ENRICO e o Guo’s UI Color Dataset apoiam conjuntamente os três componentes funcionais principais do framework proposto de prototipagem automatizada de interfaces: detecção de componentes, modelagem de layout e otimização perceptual de cores. O conjunto de dados RICO contém uma coleção em larga escala de mais de 66.000 telas de interfaces móveis e é usado principalmente para treinar o módulo de detecção de componentes. Sua diversidade permite que o modelo Faster R-CNN aprenda representações robustas de elementos comuns de interfaces, como botões, imagens e campos de texto, em uma ampla variedade de aplicações. Isso garante a detecção e localização precisas dos componentes da interface sob diferentes condições de design. O conjunto de dados ENRICO fornece telas de interfaces de alta qualidade, com padrões rotulados, para o aprendizado de relações estruturais e padrões de layout. Ele permite que o sistema compreenda as relações entre componentes, a organização hierárquica e os modelos de design comuns. Esse conjunto de dados desempenha um papel fundamental na modelagem de estruturas de layout e na imposição de consistência entre telas, permitindo que o framework gere layouts alinhados às convenções de design estabelecidas. Em contraste, o Guo’s UI Color Dataset é especificamente utilizado para modelagem de cores perceptual e cognitiva. Diferentemente do RICO e do ENRICO, que enfocam aspectos estruturais, este conjunto contém imagens de interfaces cuidadosamente selecionadas com temas de cores anotados. Essas anotações são usadas para treinar módulos de extração de cores e avaliação de harmonia. Ao mapear as relações de cor em espaços de cor perceptuais, como o CAM02-UCS, o framework aprende a gerar paletas de cores que equilibram contraste, acessibilidade e coerência estética. Juntos, esses conjuntos de dados formam um pipeline integrado: o RICO apoia a detecção de componentes, o ENRICO permite a compreensão de padrões de layout e a consistência estrutural, e o conjunto de dados de Guo facilita a otimização perceptual de cores. Essa integração garante que os protótipos de interface gerados sejam estruturalmente precisos, visualmente harmônicos e otimizados cognitivamente.

A normalização foi realizada utilizando uma média de [0,485, 0,456, 0,406] e um desvio padrão de [0,229, 0,224, 0,225]. Técnicas de aumento de dados, incluindo recorte aleatório, inversão horizontal e rotação, foram aplicadas para melhorar a generalização do modelo. Além disso, os valores dos pixels foram escalonados para a faixa [0, 1], e todas as imagens foram redimensionadas para uma resolução de 480 × 800 pixels para garantir consistência entre os conjuntos de dados. Imagens redimensionadas para 224 × 224 pixels são utilizadas para aumento durante o treinamento, enquanto a resolução original de 480 × 800 pixels é mantida para análise de layout. As caixas delimitadoras foram ajustadas para filtrar anotações irrelevantes usando limiares predefinidos. Para alcançar uniformidade entre os conjuntos de dados, todos os elementos de interface foram anotados manualmente utilizando a ferramenta de anotação LabelImg. Um esquema predefinido foi estabelecido antes da anotação para classificar os elementos de interface em categorias como botão, texto, imagem, ícone e contêiner. Para a representação das caixas delimitadoras, foi aplicado um sistema de coordenadas uniforme, e informações hierárquicas foram construídas com base nas relações espaciais entre os elementos e suas associações pai-filho dentro da árvore de layout. Além disso, diretrizes foram estabelecidas para garantir anotação consistente dos elementos, tratamento adequado de componentes sobrepostos e aplicação de limiares mínimos de tamanho nos conjuntos de dados RICO, ENRICO e Guo.

Formulações matemáticas detalhadas para o treinamento de detecção de componentes e extração de padrões de layout são fornecidas no Arquivo Suplementar 1.

O modelo Faster R-CNN foi treinado usando SGD com um momento de 0,9 e uma taxa de decaimento de peso de 0,0005. A taxa de aprendizado inicial foi definida como 0,001 e ajustada usando uma política de decaimento em etapas com base no desempenho da validação. O treinamento foi realizado por até 60 épocas com um tamanho de lote de 16. A parada antecipada foi aplicada para evitar overfitting, utilizando um conjunto de validação composto por 20% dos dados de treinamento.

A função de mapeamento f(.) recebe como entrada elementos de interface do usuário detectados e produz como saída uma representação hierárquica do layout. Ela calcula as relações de adjacência entre os elementos da interface com base em critérios de distância espacial e alinhamento, e constrói uma matriz de adjacência para representar essas relações. Um algoritmo de agrupamento, como o DBSCAN, é então aplicado para agrupar componentes relacionados. Por fim, os elementos agrupados são organizados em estruturas hierárquicas com base em relações pai-filho, formando uma representação estruturada do layout.

Formulações detalhadas para a modelagem de harmonia de cores e o objetivo de otimização unificado são fornecidas no Arquivo Suplementar 1.

Essa função objetiva formaliza matematicamente a integração da detecção estrutural, raciocínio de layout e modelagem perceptual de cores, garantindo que todos os componentes do framework contribuam conjuntamente para gerar protótipos de interfaces de usuário coerentes e centrados no usuário. A otimização é realizada de maneira modular para cada componente do framework. SGD é utilizado para treinar o módulo de detecção de componentes, enquanto o otimizador Adam é empregado durante a otimização conjunta do objetivo unificado. O objetivo combinado é usado para orientar o desempenho geral do sistema. Nas etapas de otimização conjunta, a função objetiva é minimizada usando o otimizador Adam com uma taxa de aprendizado de 0,001 e um tamanho de lote de 16. O treinamento é realizado por até 60 épocas, com parada antecipada aplicada quando a variação da perda na validação for inferior a 10⁻⁴ durante cinco épocas consecutivas.

Detecção de componentes usando Faster R-CNN

O framework proposto utiliza o Faster R-CNN para detecção automática de componentes de interface (UI), incluindo botões, ícones, campos de texto, imagens e contêineres. O Faster R-CNN é adequado para esta tarefa porque combina alta precisão na detecção de objetos com geração eficiente de propostas de região, o que é essencial para lidar com layouts de interface complexos que contêm elementos densamente agrupados. O modelo utiliza uma estrutura ResNet-50 pré-treinada no conjunto de dados ImageNet para extrair mapas de características convolucionais de cada tela de interface. Durante o treinamento, as camadas iniciais foram congeladas para manter características visuais gerais, enquanto as camadas superiores (conv4_x e conv5_x) foram ajustadas finamente para detecção específica de componentes de interface. Esses mapas de características capturam estruturas visuais, bordas, texturas e limites dos componentes. Durante a detecção, a rede de proposta de região (RPN) identifica regiões candidatas (âncoras) que provavelmente contenham componentes de interface. As âncoras são definidas utilizando múltiplas escalas (128, 256 e 512) e proporções de aspecto (1:1, 1:2 e 2:1) para acomodar elementos de interface de tamanhos variados. Durante o treinamento, âncoras com uma interseção sobre união (IoU) maior que 0,7 em relação às caixas reais são rotuladas como positivas, enquanto aquelas com IoU menor que 0,3 são rotuladas como negativas; âncoras com valores intermediários de IoU são ignoradas. Cada âncora recebe uma probabilidade indicando a presença de um componente. A supressão não máxima (NMS) é então aplicada para remover propostas redundantes e sobrepostas, garantindo uma localização eficiente de elementos de interface significativos, mesmo em interfaces poluídas. Uma vez geradas as regiões candidatas, cada proposta é classificada em categorias predefinidas de componentes e suas coordenadas de caixa delimitadora são refinadas. Uma operação de alinhamento de região de interesse (ROI) extrai representações de características de tamanho fixo para cada proposta, que são então processadas por camadas totalmente conectadas para classificação e regressão. O ramo de classificação gera probabilidades de classe, enquanto o ramo de regressão prevê coordenadas precisas da caixa delimitadora. Todo o modelo Faster R-CNN é treinado de ponta a ponta pela otimização de uma função de perda conjunta que combina a perda da RPN com a perda final de detecção. Isso permite que o sistema não apenas reconheça com precisão os componentes de interface, mas também os localize com exatidão em diversas estruturas de interface. Uma descrição detalhada da detecção de componentes pelo Faster R-CNN, incluindo a etapa da RPN, classificação do ROI, refinamento da caixa delimitadora e objetivo final de otimização, é fornecida no Arquivo Suplementar 1.

Algoritmo S1 fornece o fluxo detalhado de detecção de componentes e extração estrutural (Arquivo Suplementar 1). Ele descreve o processo completo de detecção automática de componentes de interface do usuário (UI) e extração estrutural a partir de uma imagem bruta da tela. A imagem de entrada é primeiramente pré-processada e encaminhada por meio de uma estrutura de CNN para extrair características visuais profundas. Essas características são utilizadas pela RPN para gerar caixas delimitadoras candidatas, que são então refinadas por meio de classificação e regressão. A supressão não máxima (NMS) remove detecções redundantes para garantir uma localização precisa. Após a detecção, os componentes são agrupados com base na proximidade espacial, utilizando o agrupamento espacial baseado em densidade de aplicações com ruído (DBSCAN). Esta etapa de agrupamento permite a construção de uma árvore hierárquica de UI que captura relações pai-filho e agrupamentos lógicos entre os componentes. Essa representação hierárquica constitui a base para análises posteriores de layout e compreensão da interface. Figura 2 ilustra o processo de detecção de componentes por Faster R-CNN em uma tela de interface móvel. A interface de entrada (à esquerda) contém elementos de UI, como botões e blocos de texto, que são automaticamente delimitados por caixas. Essas regiões detectadas são então classificadas em categorias de componentes (por exemplo, Botão e Texto), conforme indicado pelas conexões rotuladas. O módulo de detecção Faster R-CNN (à direita) refina as coordenadas das caixas delimitadoras, atribui rótulos semânticos e gera informações estruturadas em nível de componente. Esta etapa serve como fundamento essencial para processos subsequentes, incluindo extração de layout, otimização cognitiva e geração de protótipos de interface, ao fornecer representações precisas e semanticamente significativas dos componentes de interface.

Figura 2. Detecção de componentes dos elementos da interface do usuário usando Faster R-CNN. A figura ilustra a detecção de componentes da interface a partir de uma captura de tela de interface de entrada. Regiões de interesse são identificadas usando caixas delimitadoras, e elementos como botões e campos de texto são classificados usando o Faster R-CNN. Setas indicam o mapeamento dos componentes detectados para suas respectivas etiquetas semânticas. Clique aqui para visualizar uma versão maior desta figura.

Extração do padrão de layout e modelagem hierárquica

Após a detecção de componentes usando Faster R-CNN, cada elemento de interface (UI) é representado por uma caixa delimitadora. No entanto, essas caixas delimitadoras isoladamente não indicam como os elementos estão organizados estruturalmente dentro da interface, por exemplo, quais elementos pertencem a cabeçalhos, barras de navegação ou regiões de conteúdo agrupado. Para superar essa limitação, os componentes detectados são transformados em uma árvore lógica de interface, na qual cada componente é tratado como um nó e componentes relacionados funcional ou visualmente são agrupados sob nós pais comuns. Para identificar grupos de layout significativos, são aplicadas técnicas de agrupamento, como DBSCAN ou agrupamento hierárquico aglomerativo. Esses métodos analisam padrões de proximidade espacial e alinhamento entre componentes para detectar relações entre elementos de interface. De maneira análoga às práticas humanas de design, o sistema aprende a reconhecer padrões estruturais comuns, como cabeçalhos, rodapés, grades e blocos de conteúdo. Uma vez estabelecido o agrupamento, propriedades estruturais adicionais — incluindo alinhamento, organização em grade e ordem de leitura — são analisadas para construir uma representação abrangente do layout. Por exemplo, componentes alinhados em colunas de largura igual podem indicar um layout baseado em cartões, enquanto elementos empilhados verticalmente podem indicar uma interface baseada em formulários ou em feed. Ao integrar agrupamento, raciocínio espacial e regras de alinhamento, a estrutura constrói uma árvore hierárquica de interface que captura tanto o agrupamento visual quanto as relações funcionais. Essa representação hierárquica serve como base para o refinamento subsequente do layout e para a modelagem de consistência entre múltiplas telas, permitindo que o sistema gere designs de interface estruturados, coerentes e centrados no usuário.

Formulações detalhadas para distância espacial e similaridade de alinhamento são fornecidas no Arquivo Suplementar 1.

Agrupamento para agrupamento de layout (DBSCAN)

Para identificar grupos de layout, aplica-se o DBSCAN. O DBSCAN utiliza dois parâmetros: (1) ε = distância máxima entre componentes vizinhos e (2) = número mínimo de componentes necessários para formar um agrupamento. Para esta análise, os parâmetros do DBSCAN foram selecionados empiricamente com base na resolução normalizada da interface do usuário (480 × 800 pixels). O parâmetro de distância de vizinhança foi definido como ε = 50 pixels para capturar a proximidade espacial entre componentes da interface do usuário adjacentes. O número mínimo de pontos necessário para formar um agrupamento foi definido como MinPts = 3 para evitar a formação de grupos insignificantes ou espúrios de componentes da interface do usuário.

A formulação detalhada da construção da árvore lógica de interface do usuário é fornecida no Arquivo Suplementar 1.

Modelagem de cor perceptual com CAM02-UCS

A modelagem perceptual de cores garante que as cores utilizadas na interface gerada sejam harmoniosas, legíveis e cognitivamente eficientes. Cores dominantes são extraídas de fontes de entrada, como imagens de interfaces, usando técnicas de agrupamento. Especificamente, o agrupamento K-médias com inicialização K-médias++ é aplicado por 300 iterações para obter paletas de cores representativas. No entanto, o espaço de cores RGB não reflete com precisão a percepção visual humana, o que significa que cores numericamente semelhantes podem parecer perceptualmente diferentes. Para superar essa limitação, todas as cores extraídas são transformadas em CAM02-UCS, que é perceptualmente uniforme. Nesse espaço, distâncias iguais correspondem a diferenças de cor percebidas iguais, tornando-o adequado para modelar harmonia e contraste de cores. Uma vez mapeadas no CAM02-UCS, as diferenças perceptuais de cor são calculadas usando a distância euclidiana, permitindo ao sistema quantificar contraste, harmonia e variação entre as cores. Cores muito semelhantes são separadas para melhorar a legibilidade, enquanto cores excessivamente contrastantes são moderadas para evitar desconforto visual. A paleta gerada também segue padrões de acessibilidade, como WCAG AA e AAA, assegurando contraste suficiente entre elementos de primeiro e segundo plano. Além disso, a harmonia de cores é garantida ao restringir as relações da paleta a esquemas complementares, análogos ou triádicos, dependendo do tema pretendido para a interface. Isso assegura que a paleta de cores resultante seja não apenas visualmente agradável, mas também funcionalmente acessível e otimizada cognitivamente. Para refinar ainda mais a paleta, um processo de otimização é aplicado sob as restrições de similaridade perceptual, contraste, harmonia e consistência da marca. Uma cor primária é selecionada (por exemplo, a partir da identidade da marca), e as cores secundárias são ajustadas em termos de luminância e croma para preservar a hierarquia visual. Um mecanismo de avaliação baseado em regras avalia paletas candidatas com base em distâncias perceptuais e métricas de acessibilidade, minimizando a carga cognitiva enquanto mantém o equilíbrio estético. Como resultado, o framework produz esquemas de cores para interfaces que exibem coerência, legibilidade e consistência perceptual em nível profissional.

Expressões matemáticas detalhadas para a modelagem de cor perceptual baseada em CAM02-UCS são fornecidas no Arquivo Suplementar 1.

Algoritmo S2 (Arquivo Suplementar 1) descreve o fluxo de trabalho de extração e otimização de cores perceptuais baseado no CAM02-UCS, sujeito a restrições de harmonia e acessibilidade. Inicialmente, as cores dominantes são extraídas da imagem de entrada e transformadas para o espaço CAM02-UCS, garantindo que as diferenças de cor correspondam à percepção humana. Em seguida, as distâncias perceptuais entre as cores são calculadas e limitadas a intervalos predefinidos, mantendo clareza e harmonia. Posteriormente, a acessibilidade é garantida mediante avaliação das relações de contraste de luminância de acordo com as diretrizes WCAG. A paleta final é obtida pela otimização de uma função objetivo combinada, que equilibra o espaçamento perceptual, os requisitos de contraste e as restrições de harmonia cromática. Isso assegura que os esquemas de cores de interface gerados sejam não apenas visualmente agradáveis, mas também legíveis, acessíveis e perceptualmente consistentes.

Otimização do design cognitivo

A otimização do design cognitivo garante que os protótipos de interface gerados automaticamente sejam não apenas visualmente consistentes, mas também fáceis de compreender e de interagir. Este módulo integra princípios-chave de design cognitivo, incluindo os princípios de Gestalt, a lei de Fitts e a lei de Hick, para orientar o arranjo, o agrupamento e o espaçamento dos componentes da interface. As formulações matemáticas detalhadas para a otimização do design cognitivo são fornecidas no Arquivo Suplementar 1.

Objetivo integrado de otimização cognitiva

A expressão matemática para o objetivo integrado de otimização cognitiva é fornecida no Arquivo Suplementar 1. Os coeficientes que representam a importância do agrupamento visual, da eficiência da interação e da complexidade da decisão são denotados por alfa, beta e gama, respectivamente. Neste estudo, os valores de alfa, beta e gama foram determinados empiricamente utilizando o conjunto de dados de validação. Para o experimento atual, os coeficientes foram definidos da seguinte forma: α = 0,5, β = 0,3 e γ = 0,2. Essa configuração proporciona um equilíbrio eficaz entre agrupamento visual, eficiência da interação e simplicidade da decisão.

Consistência entre várias telas e geração de interface do usuário

A modelagem de consistência multitetela garante que diferentes telas dentro de um aplicativo compartilhem uma identidade visual coerente, layout estrutural e padrão de interação. À medida que os usuários navegam entre telas, desenvolvem expectativas quanto ao posicionamento dos elementos, tipografia, espaçamento e hierarquia visual. Para atender a essas expectativas, o sistema analisa padrões entre telas usando modelos derivados dos conjuntos de dados RICO e ENRICO. Esses modelos capturam estruturas comuns de interface, como layouts inicial–detalhe, padrões lista–detalhe, formulários em múltiplas etapas e fluxos de painel. Ao comparar o posicionamento dos componentes e o comportamento de agrupamento, o sistema constrói um perfil estrutural entre telas que identifica quais elementos devem permanecer consistentes e quais podem variar. Uma vez identificados os padrões estruturais, a estrutura assegura consistência nas escalas tipográficas, nas proporções de espaçamento, nos layouts de grade e nos pontos de navegação. Por exemplo, as barras de cabeçalho mantêm altura constante, os botões principais preservam tamanho e alinhamento uniformes, e os blocos de conteúdo seguem uma ordem visual previsível. Isso é alcançado por meio de um processo de regularização de layout que avalia cada tela com base em restrições estruturais globais. Se uma tela se desviar dos modelos aprendidos — como preenchimento inconsistente ou títulos desalinhados — o sistema ajusta automaticamente o layout para restaurar a coerência. Essas correções ajudam a garantir uma experiência de usuário contínua e reduzem os custos cognitivos de troca entre telas. A estrutura analisa ainda o grafo de navegação entre telas para manter a consistência no fluxo de interação. Padrões comuns de navegação, incluindo transições para frente/para trás, navegação por abas e fluxos de trabalho em etapas múltiplas, são identificados e aplicados. Cada transição é validada para assegurar alinhamento com o modelo mental do usuário, melhorando assim a usabilidade e reduzindo a confusão. Como resultado, o modelo de consistência multitetela minimiza o ruído visual, aumenta a familiaridade e promove uma experiência de interação unificada.

Formulações matemáticas detalhadas para a consistência entre telas múltiplas e a geração de interface de usuário são fornecidas no Arquivo Suplementar 1.

Por fim, o mecanismo de renderização gera saídas visuais em formatos como estruturas vetoriais SVG, protótipos em HTML/CSS ou maquetes de interface baseadas em pixels. As telas de interface resultantes exibem ordem correta de leitura, relações harmônicas de cores, alinhamento preciso à grade e hierarquia visual consistente entre múltiplas telas.

Algoritmo S3 fornece a otimização do layout cognitivo-visual e o fluxo de trabalho de consistência entre telas (Arquivo Suplementar 1). O Algoritmo S3 descreve o processo integrado de otimização cognitiva e estrutural utilizado para gerar layouts de interface de usuário fáceis de usar. Ele combina agrupamento perceptual (princípios da Gestalt), eficiência de interação (lei de Fitts) e simplicidade de decisão (lei de Hick) dentro de um quadro unificado de otimização. Inicialmente, as relações espaciais entre os componentes são avaliadas para estabelecer agrupamentos perceptuais. Em seguida, a eficiência de interação é otimizada ajustando o tamanho e o posicionamento dos componentes, enquanto a complexidade de decisão é controlada limitando o número de opções apresentadas aos usuários. Além disso, o algoritmo garante a consistência entre telas alinhando cada tela com modelos de layout aprendidos, assegurando uniformidade na tipografia, espaçamento e organização estrutural. Uma função de otimização multiobjetivo então aperfeiçoa o layout equilibrando alinhamento, espaçamento e custo cognitivo, resultando em uma interface que é ao mesmo tempo visualmente coerente e cognitivamente eficiente. No geral, este algoritmo assegura que os layouts multiscreen gerados mantenham altos níveis de consistência visual, usabilidade e clareza perceptual.

Resultados

A estrutura proposta de prototipagem automatizada de interface foi avaliada usando um conjunto de dados integrado de 5.128 telas de interface provenientes de três fontes: 4.000 imagens do RICO, 1.000 telas do ENRICO e 128 amostras de interface com anotação de cores do Conjunto de Dados de Cores de Interface de Guo. Esse conjunto de dados combinado fornece um benchmark bem equilibrado para avaliar a precisão na detecção de componentes, a clareza estrutural do layout, a consistência entre telas e a harmonia perceptual das cores.

Os resultados experimentais demonstram que o modelo de detecção baseado no Faster R-CNN alcança uma precisão de 92,4% na detecção de componentes e generaliza efetivamente entre diversos estilos de interfaces móveis. Além disso, a incorporação de anotações de padrões do ENRICO melhora o raciocínio de layout, resultando em um aumento de 18,7% na clareza do layout e na preservação aprimorada da ordem de leitura. Em experimentos de avaliação de cor, o módulo de modelagem de cor baseado no CAM02-UCS gera paletas 24,5% mais harmônicas, segundo avaliações de designers, e alcança maior uniformidade perceptual em comparação com métodos tradicionais de geração de paletas baseados em RGB e LAB. Além disso, a modelagem de consistência entre telas obtém uma melhoria de 28% no alinhamento entre telas e na consistência tipográfica. Estudos com usuários envolvendo 30 participantes demonstraram uma redução de 31% na carga cognitiva percebida ao interagir com protótipos produzidos pelo sistema proposto. Em conjunto, esses resultados indicam que a combinação de detecção de componentes, modelagem de cor perceptual e otimização cognitiva produz protótipos de interface que não são apenas estruturalmente precisos, mas também visualmente coerentes e cognitivamente eficientes. Tabela 3 destaca o ambiente de simulação e as configurações técnicas utilizadas para avaliar o framework proposto de prototipagem de interfaces. Os procedimentos computacionalmente intensivos de treinamento do Faster R-CNN e dos módulos de consistência de layout foram suportados por uma GPU de alto desempenho NVIDIA RTX 4090. Todos os experimentos foram conduzidos em um ambiente Ubuntu 22.04 utilizando o PyTorch 2.0 para a implementação de aprendizado profundo.

Parâmetro	Configuração
Hardware	NVIDIA RTX 4090 GPU (24 GB), Processador Intel i9, 64 GB de RAM
Sistema Operacional	Ubuntu 22.04 LTS
Framework de Aprendizado Profundo	PyTorch 2.0
Backbone do Faster R-CNN	ResNet-50 + FPN
Resolução da Imagem	480 × 800 (normalizada em todos os conjuntos de dados)
Tamanho do Lote de Treinamento	8
Otimizador	AdamW (LR = 1e−4, Weight Decay = 0,01)
Épocas	40
Espaço de Modelagem de Cor	CAM02-UCS
Agrupamento para Extração de Paleta	K-means (k = 5)
Agrupamento de Layout	DBSCAN (ε = 20, min_samples = 3)

Tabela 3: Parâmetros de implementação e configuração experimental do framework proposto. A tabela resume a configuração de hardware e software utilizada para o treinamento e avaliação do modelo, incluindo recursos computacionais, sistema operacional, framework de aprendizado profundo, arquitetura do modelo, resolução da imagem, parâmetros de treinamento, estratégia de otimização, espaço de modelagem de cores e métodos de agrupamento utilizados para a extração da paleta e agrupamento de layout.

A arquitetura Faster R-CNN utiliza uma base ResNet-50 com uma FPN para detectar uma ampla variedade de componentes de interface de usuário de grão fino. Todas as imagens de interface são redimensionadas uniformemente para 480 × 800 pixels antes do processamento. O treinamento é realizado ao longo de 60 épocas usando o otimizador SGD, com um tamanho de lote de 16 para garantir uma convergência estável. O gerador de paleta de cores utiliza CAM02-UCS com agrupamento K-means, enquanto o DBSCAN é usado para agrupamento de layout estrutural. Essas configurações técnicas garantem que os resultados de interface gerados sejam reproduzíveis, estáveis e de alta fidelidade. Para fornecer uma avaliação abrangente do framework proposto de prototipagem automatizada de interface, quatro categorias de métricas de avaliação são empregadas:

i) Desempenho na detecção de componentes, analisado por meio de precisão, revocação, pontuação F1, interseção sobre união (IoU) e precisão média aritmética (mAP), que quantificam a exatidão do modelo Faster R-CNN na identificação de componentes de interface do usuário nos conjuntos de dados RICO e ENRICO;

ii) Clareza de layout e consistência estrutural, medidas por meio do erro de alinhamento (AE), precisão de agrupamento, correção da ordem de leitura e pontuações de consistência entre telas derivadas de restrições de padrões de design;

iii) Qualidade perceptual da cor, avaliada utilizando a distância perceptual CAM02-UCS (ΔE_UCS), as relações de contraste WCAG 2.1, índice de diversidade e pontuações de harmonia de cores inspiradas no framework de avaliação de cores de interface de Guo;

iv) Métricas de eficiência cognitiva centradas no usuário, incluindo carga cognitiva medida pelo índice de carga de tarefa da NASA (NASA-TLX), avaliações de coerência estética e eficiência na conclusão da tarefa.

Essas métricas permitem a avaliação do framework não apenas em termos de precisão de detecção, mas também em termos de harmonia perceptual, qualidade de usabilidade e experiência cognitiva.

Métricas de detecção de componentes

A precisão descreve a exatidão do modelo ao prever componentes de interface do usuário sem gerar falsos positivos. Uma alta precisão implica que a maioria das caixas delimitadoras previstas corresponde a elementos de interface válidos. A revocação mede a capacidade do modelo em identificar todos os componentes de interface relevantes em uma tela. Uma alta revocação indica que o modelo detecta com sucesso a maioria dos componentes reais. O escore F1, definido como a média harmônica entre precisão e revocação, fornece uma avaliação equilibrada e é particularmente útil quando os componentes de interface estão distribuídos de forma desigual entre os conjuntos de dados.

A métrica IoU mede o quão bem a caixa delimitadora prevista se sobrepõe à caixa delimitadora real. Em tarefas de detecção de objetos, limiares de IoU de 0,5 e 0,75 são comumente usados para representar condições de avaliação moderadas e rigorosas. O mAP resume o desempenho de detecção ao longo de múltiplos limiares de IoU. A métrica mAP@0,5:0,95 fornece uma avaliação mais robusta ao calcular a média da precisão ao longo de limiares de 0,5 a 0,95 em intervalos de 0,05 e, portanto, é amplamente aceita como um padrão de referência para detecção de objetos.

Os resultados de detecção nos três conjuntos de dados indicam que o módulo de detecção de componentes proposto apresenta desempenho consistentemente elevado. Os resultados quantitativos são apresentados na Tabela 4. O conjunto de dados RICO alcança o desempenho mais alto, com precisão de 0,91, revocação de 0,88 e pontuação F1 de 0,89, devido ao seu grande conjunto diversificado de anotações de componentes de interface do usuário. O ENRICO apresenta pontuações ligeiramente inferiores devido à sua estrutura mais simplificada e menor número de tipos de componentes anotados. O conjunto de dados Guo registra a menor pontuação F1 (0,81), provavelmente devido à maior variação visual e à menor quantidade de padrões de layout padronizados, o que torna a detecção mais desafiadora. De modo geral, esses resultados confirmam que o modelo mantém desempenho robusto na detecção de componentes em diferentes estilos de design de interface do usuário e características de conjuntos de dados.

Conjunto de dados	Precisão	Revocação	Pontuação F1
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tabela 4: Desempenho na detecção de componentes em diferentes conjuntos de dados. A tabela apresenta a precisão, revocação e pontuação F1 para a detecção de componentes de interface do usuário nos conjuntos de dados RICO, ENRICO e Guo, demonstrando a eficácia do modelo de detecção.

Figura 3 mostra o desempenho do modelo nos conjuntos de dados RICO, ENRICO e Guo em limiares de IoU de 0,5 e 0,75. Como esperado, os valores de mAP são mais altos em IoU 0,5 devido ao requisito de sobreposição mais relaxado. O RICO apresenta consistentemente os valores mais altos de mAP (0,89 em IoU 0,5 e 0,78 em IoU 0,75), refletindo a riqueza e coerência de suas anotações. O ENRICO apresenta valores ligeiramente mais baixos, enquanto Guo registra as pontuações mais baixas devido à maior variação no estilo de layout e na densidade de componentes. A tendência decrescente com limiares de IoU mais rigorosos ilustra que a complexidade do conjunto de dados influencia diretamente a robustez da detecção.

Figura 3. Precisão média (mAP) nos limiares de interseção sobre união (IoU) de 0,5 e 0,75 entre conjuntos de dados. O gráfico de linhas compara o desempenho na detecção de componentes nos conjuntos de dados RICO, ENRICO e Guo. O eixo x representa os conjuntos de dados e o eixo y mostra os valores de mAP. Duas curvas correspondem aos limiares de IoU de 0,5 e 0,75, ilustrando a variação de desempenho sob diferentes níveis de rigor na detecção. Clique aqui para visualizar uma versão maior desta figura.

Figura 4 apresenta o mAP@IoU(0,5:0,95) para cada conjunto de dados, fornecendo uma avaliação mais ampla do desempenho de detecção ao longo de dez limiares de IoU. Os resultados revelam uma tendência clara decrescente de RICO (0,61) para ENRICO (0,57) e Guo (0,52), confirmando que o modelo de detecção proposto generaliza melhor em conjuntos de dados maiores e mais estruturados. Esta métrica média mais rigorosa destaca degradações sutis de desempenho que podem não ser evidentes sob avaliação com um único limiar. Esses achados indicam que, embora o modelo apresente bom desempenho em todos os conjuntos de dados, a maior diversidade de layouts e a variabilidade dos componentes introduzem desafios adicionais sob avaliação rigorosa no estilo COCO. Os resultados de detecção são apresentados em Figuras 3 e 4, que fornecem comparações quantitativas do mAP em diferentes níveis de IoU.

Figura 4. Precisão média (mAP) média ao longo dos limiares de interseção sobre união (IoU) de 0,5 a 0,95 entre conjuntos de dados. O gráfico de linhas mostra o desempenho da detecção de componentes nos conjuntos de dados RICO, ENRICO e Guo, utilizando a métrica mAP média ao longo dos limiares de IoU variando de 0,5 a 0,95. O eixo x representa os conjuntos de dados e o eixo y indica os valores correspondentes de mAP reportados em uma escala de 0 a 1, refletindo o desempenho do modelo sob diferentes limiares de detecção. Clique aqui para visualizar uma versão maior desta figura.

Métricas de qualidade do layout

A qualidade do layout é avaliada utilizando AE, precisão de agrupamento (GA) e precisão da ordem de leitura (ROA), que conjuntamente avaliam a correção estrutural, a organização perceptual e a legibilidade cognitiva dos layouts de interface do usuário gerados.

Erro de alinhamento.

AE (desvio baseado em pixels) indica o quão bem os elementos da interface estão alinhados com linhas ideais de alinhamento, como guias esquerda, direita, superior ou de base. Um AE mais baixo indica que os elementos estão consistentemente organizados com mínima distorção visual, melhorando a legibilidade e a clareza geral do design. Esta métrica é particularmente importante para avaliar o refinamento do layout cognitivo, pois o desalinhamento interrompe o fluxo visual e aumenta a complexidade percebida. Figura 5 ilustra o AE nos conjuntos de dados RICO, ENRICO e Guo, medido como o desvio médio em pixels em relação às linhas ideais de alinhamento. Os resultados mostram que o RICO alcança o menor AE (4,2 px), indicando que os componentes da interface neste conjunto de dados exibem padrões estruturais mais consistentes, o que facilita o alinhamento para o modelo. O ENRICO segue com um desvio moderado de alinhamento de 6,1 px, refletindo uma combinação de layouts de tela bem estruturados e variados. O conjunto de dados Guo registra o AE mais alto (7,4 px), devido à maior diversidade no posicionamento dos componentes e estruturas de layout não padronizadas, o que desafia o refinamento baseado em alinhamento. De modo geral, esses resultados demonstram que o modelo mantém alta precisão de alinhamento em todos os conjuntos de dados, apesar do aumento na complexidade do layout.

Figura 5. Erro de alinhamento entre conjuntos de dados. A figura mostra o erro de alinhamento entre conjuntos de dados; valores menores indicam melhor alinhamento. Clique aqui para visualizar uma versão maior desta figura.

Precisão de agrupamento (GA).

A AG quantifica com que eficácia o modelo agrupa componentes de interface do usuário relacionados, por exemplo, com base em princípios da Gestalt, como proximidade, similaridade e continuidade. Uma maior precisão de agrupamento indica que o modelo preserva a estrutura pretendida dos elementos da interface, permitindo que os usuários interpretem a interface de maneira mais natural. Esta métrica é particularmente útil para avaliar se o módulo de refinamento de layout organiza com sucesso o conteúdo em grupos visuais significativos. Figura 6 apresenta a distribuição da AG alcançada pela estrutura proposta nos três conjuntos de dados. O conjunto de dados ENRICO exibe a maior mediana de AG e o menor intervalo interquartil, indicando desempenho de agrupamento estável e consistente devido aos seus layouts bem definidos e rotulados por padrões. O conjunto de dados RICO mostra precisão de agrupamento moderada com maior variabilidade, provavelmente devido à sua maior diversidade e complexidade de layout. O conjunto de dados Guo UI Color registra menor precisão de agrupamento, já que suas amostras são visualmente heterogêneas e menos focadas no layout estrutural. De modo geral, os resultados indicam que o módulo de refinamento de layout cognitivo apresenta desempenho confiável em diferentes conjuntos de dados, alcançando o melhor desempenho de agrupamento em dados estruturalmente consistentes.

Figura 6. Distribuição da precisão de agrupamento entre conjuntos de dados. O gráfico de caixa mostra a precisão de agrupamento com base nos princípios de Gestalt nos conjuntos de dados RICO, ENRICO e Guo’s UI Color. As caixas representam a faixa interquartil, a linha central indica a mediana e os bigodes indicam a amplitude dos valores. O eixo x representa os conjuntos de dados e o eixo y mostra os escores de precisão de agrupamento. O tamanho da amostra é n=5128 telas de interface de usuário (RICO: 4000, ENRICO: 1000 e Guo: 128). Clique aqui para visualizar uma versão maior desta figura.

Precisão da ordem de leitura (ROA).

A precisão da ordem de leitura (ROA) mede com que precisão o modelo prevê o fluxo natural de leitura de uma tela de interface do usuário, geralmente seguindo um padrão de cima para baixo e da esquerda para a direita. Manter a ordem de leitura correta é essencial para a usabilidade, clareza na navegação e consistência com as convenções de design estabelecidas. Um ROA mais alto indica que o sistema preserva padrões esperados de varredura cognitiva. Figura 7 mostra o ROA em diferentes estágios de avaliação para os conjuntos de dados RICO, ENRICO e Guo. O ENRICO alcança consistentemente o ROA mais alto devido à sua estrutura de layout regular e orientada a padrões, o que permite prever com maior precisão sequências de leitura semelhantes às humanas. O RICO demonstra desempenho moderado com leve variabilidade, refletindo sua maior diversidade e complexidade do mundo real. O conjunto de dados Guo apresenta o menor ROA, já que muitas de suas telas são visualmente ricas, mas carecem de hierarquias de leitura claramente definidas. De modo geral, esses resultados indicam que o módulo proposto de refinamento de layout cognitivo atua de forma mais confiável em conjuntos de dados estruturados, mantendo previsões estáveis da ordem de leitura em diferentes designs de interface do usuário.

Figura 7. Precisão na ordem de leitura ao longo das etapas de avaliação para múltiplos conjuntos de dados. O gráfico de linhas mostra a precisão na ordem de leitura ao longo das etapas de avaliação para os conjuntos de dados RICO, ENRICO e Guo’s UI Color. O eixo x representa a etapa de avaliação, e o eixo y indica a precisão na ordem de leitura. Cada curva corresponde a um conjunto de dados, ilustrando as alterações na preservação do fluxo visual ao longo das etapas sucessivas de avaliação. A etapa de avaliação representa as fases progressivas de refinamento do framework sugerido. Clique aqui para visualizar uma versão maior desta figura.

Pontuação de consistência de layout (LCS)

A pontuação de consistência de layout (LCS) mede com que consistência os layouts de interface gerados são mantidos em várias telas dentro do mesmo aplicativo. Isso inclui consistência em espaçamento, regras de alinhamento, regiões tipográficas e padrões de agrupamento. Uma pontuação mais alta indica uma coerência entre telas aprimorada, resultando em uma experiência do usuário (UX) mais unificada e intuitiva. Figura 8 apresenta o LCS medido em várias etapas de avaliação para os conjuntos de dados de cores de interface RICO, ENRICO e Guo. O conjunto de dados ENRICO alcança consistentemente os valores mais altos de LCS devido às suas telas de interface com padrões rotulados e estrutura uniforme, o que facilita uma aprendizagem mais estável da consistência entre telas. Em contraste, o conjunto de dados RICO demonstra consistência moderada, mas com melhoria contínua, atribuível à capacidade do modelo de generalizar em layouts de interface altamente diversos. Como esperado, o conjunto de dados Guo registra os valores mais baixos de LCS, já que se concentra principalmente em características de cor, em vez de layout estrutural, tornando a consistência entre múltiplas telas mais desafiadora. De modo geral, esses resultados indicam que o módulo proposto de consistência entre telas atua com maior eficácia em conjuntos de dados orientados a padrões, ao mesmo tempo que ainda fornece melhorias mensuráveis em todos os conjuntos de dados.

Figura 8. Pontuação de consistência de layout ao longo das etapas de avaliação para múltiplos conjuntos de dados. O gráfico de linhas mostra as pontuações de consistência de layout ao longo das etapas de avaliação para os conjuntos de dados RICO, ENRICO e Guo’s UI Color. O eixo x representa a etapa de avaliação e o eixo y indica as pontuações de consistência de layout. Cada curva corresponde a um conjunto de dados, ilustrando a melhoria na coerência estrutural das interfaces geradas ao longo das etapas sucessivas de avaliação. Clique aqui para visualizar uma versão maior desta figura.

Métricas de qualidade de cor

Os temas de cores da interface são avaliados utilizando cinco métricas baseadas na percepção, derivadas do CAM02-UCS: ΔE (diferença de cor perceptual), que quantifica a uniformidade perceptual entre as cores da paleta; razão de contraste (com base na WCAG 2.1), que avalia a legibilidade entre elementos de primeiro e segundo plano; índice de harmonia de cores (CHI), que mede a compatibilidade estética entre matizes; pontuação de diversidade de cores (CDS), que reflete a variação no espaço de cor perceptual; e pontuação de proeminência de cores (CPS), que avalia o equilíbrio e a dominância das cores dentro da paleta. Em conjunto, essas métricas fornecem uma avaliação abrangente da qualidade estética e do desempenho das cores orientado à usabilidade. Os resultados demonstram que o método proposto alcança um valor de ΔE mais baixo, de 4,12, indicando maior uniformidade perceptual entre as cores. Uma razão de contraste de 6,21 confirma a conformidade com as normas de acessibilidade, garantindo melhor legibilidade. Tabela 5 apresenta uma comparação quantitativa entre o módulo de modelagem de cores proposto e os métodos de referência. O CHI aumenta de 0,61 para 0,83, indicando maior coesão estética nas transições de cor. Além disso, a CDS aumenta em mais de 50%, demonstrando que as paletas geradas mantêm uma variação mais rica sem introduzir poluição visual. Valores mais altos de CPS indicam uma distribuição equilibrada de cores dominantes, evitando a saturação excessiva por um único matiz. No geral, esses resultados comprovam a eficácia do módulo de modelagem de cores baseado no CAM02-UCS na geração de esquemas de cores para interfaces harmoniosos, legíveis e otimizados perceptualmente.

Métrica	Definição	Método Proposto	Linha de base1	Melhoria (%)
ΔE (CAM02-UCS)	Diferença de cor perceptual	4.12	7.85	47,5% menor
Relação de Contraste (WCAG)	Legibilidade de pares FG–BG	6.21	4.38	41.80%
Índice de Harmonia de Cores (CHI)	Matiz & harmonia cromática	0.83	0.61	36.10%
CDS (Índice de Diversidade de Cor)	Variância em J′a′b′ espaço	18.70	12.40	50.80%
CPS (Pontuação de Destaque de Cor)	Estabilidade das cores dominantes	0.72	0.55	30.90%

Tabela 5: Comparação quantitativa de métricas de qualidade de cor entre os métodos proposto e de referência. A tabela apresenta métricas de avaliação da qualidade de cor, incluindo diferença de cor perceptual (ΔE em CAM02-UCS), razão de contraste (WCAG), índice de harmonia de cor (CHI), pontuação de diversidade de cor (CDS) e pontuação de destaque de cor (CPS). Os resultados do método proposto são comparados com os valores de referência, juntamente com os percentuais de melhoria.

Dados demográficos dos participantes e delineamento do estudo

Um total de 30 participantes participaram do processo de avaliação. Os participantes tinham idades entre 20 e 35 anos (idade média: 26,4 ± 3,2 anos). A coorte incluiu indivíduos com origens diversas, incluindo engenheiros de software, estudantes e designers de UI/UX. Com base na proficiência autoinformada em informática, 40% dos participantes foram classificados como usuários intermediários, 35% como usuários avançados e 25% como iniciantes. Aproximadamente metade dos participantes tinha experiência prévia em design de UI/UX ou áreas relacionadas, enquanto os demais participantes não tinham. Essa diversidade garantiu uma avaliação equilibrada entre diferentes níveis de expertise técnica e familiaridade com design.

Métricas do estudo com usuários

A avaliação centrada no usuário foi conduzida utilizando múltiplas métricas, incluindo NASA-TLX, escala de usabilidade do sistema (SUS), pontuação de harmonia estética (AHS), tempo de eficiência na busca (SET) e classificação de consistência entre telas (CSCR), para avaliar carga cognitiva, usabilidade, apelo visual, eficiência e consistência.

A métrica NASA-TLX quantifica a carga mental ao medir fatores como demanda mental, esforço e frustração. Pontuações mais baixas indicam menor carga cognitiva e maior facilidade de interação. O framework proposto resultou consistentemente em pontuações mais baixas de NASA-TLX em todos os conjuntos de dados, indicando menor esforço mental. Essa melhoria pode ser atribuída à integração de princípios de design cognitivo, incluindo agrupamento Gestalt, espaçamento otimizado e hierarquia visual aprimorada, que conjuntamente facilitam uma navegação mais intuitiva. A métrica SUS fornece uma pontuação padronizada de usabilidade variando de 0 a 100, em que valores mais altos indicam melhor usabilidade e clareza. O framework proposto obteve pontuações mais altas de SUS em comparação com métodos de referência, refletindo melhorias tanto no layout estrutural quanto na clareza de cores. O alinhamento aprimorado, espaçamento e fluxo de navegação contribuíram para interfaces que os usuários perceberam como mais intuitivas e funcionalmente coerentes. O AHS, medido em uma escala Likert de 7 pontos, avalia a atratividade visual percebida e a harmonia de cores. Interfaces geradas utilizando o módulo de modelagem de cores baseado em CAM02-UCS alcançaram valores mais altos de AHS, indicando transições de cor mais suaves e paletas visualmente mais equilibradas. Os participantes preferiram consistentemente essas interfaces devido ao contraste aprimorado, coerência de matiz e redução de poluição visual, destacando a importância da modelagem perceptual de cores no design de interfaces. O SET mede o tempo necessário para os usuários localizarem elementos-alvo da interface durante tarefas de busca visual. Valores mais baixos de SET indicam melhor organização e hierarquia visual. O framework proposto reduziu significativamente o SET em todos os conjuntos de dados, demonstrando que a integração de agrupamento Gestalt, espaçamento guiado pela atenção e estruturas de layout refinadas permite uma interação mais rápida e eficiente. A métrica CSCR avalia a consistência do design da interface em múltiplas telas. Pontuações mais altas indicam melhor continuidade no layout, cor e organização estrutural. O framework proposto alcançou valores mais altos de CSCR, refletindo a eficácia do módulo de consistência multitelas em manter esquemas de cor estáveis, espaçamento e estruturas hierárquicas consistentes entre as interfaces.

Figura 9 apresenta os resultados do estudo comparativo com usuários para todas as métricas (NASA-TLX, SUS, AHS, SET e CSCR) nos conjuntos de dados RICO, ENRICO e Guo. De modo geral, observam-se melhorias consistentes em todas as métricas de avaliação. Notavelmente, o conjunto de dados Guo demonstra desempenho superior nas métricas centradas no usuário, incluindo menor carga cognitiva (NASA-TLX), maior usabilidade (SUS), maior harmonia estética (AHS), redução do tempo de eficiência de busca (SET) e maior consistência entre telas (CSCR). Contudo, esses resultados exigem interpretação cuidadosa. As métricas de UX aprimoradas observadas para o conjunto de dados Guo são atribuídas principalmente à sua forte consistência de cores e composição visual relativamente mais simples, e não a uma qualidade superior do layout estrutural. Embora os usuários percebam essas interfaces como mais harmoniosas visualmente e menos exigentes cognitivamente, resultados anteriores demonstram que o conjunto de dados Guo apresenta desempenho inferior em termos de alinhamento, agrupamento e ordem de leitura. Isso destaca uma distinção importante entre fatores perceptuais e estruturais no design de interfaces. Embora atributos perceptuais, como a harmonia de cores, melhorem significativamente a experiência do usuário, a precisão estrutural e a consistência do layout permanecem críticas para a usabilidade funcional. Portanto, o design ideal de interfaces exige um equilíbrio entre harmonia perceptual e correção estrutural.

Figura 9. Comparação das métricas do estudo com usuários entre conjuntos de dados. O gráfico de barras agrupadas compara as métricas do estudo com usuários nos conjuntos de dados RICO, ENRICO e Guo’s UI Color Datasets. O eixo x representa métricas de avaliação, incluindo o Índice de Carga de Tarefa da NASA (NASA-TLX), escala de usabilidade do sistema (SUS), pontuação de harmonia estética (AHS), tempo de eficiência estrutural (SET) e taxa de consistência entre telas (CSCR), enquanto o eixo y indica as pontuações correspondentes. As barras representam o desempenho de cada conjunto de dados, ilustrando diferenças em usabilidade, carga cognitiva, qualidade estética e consistência da interface. NASA-TLX (0–100, menor é melhor), SUS (0–100, maior é melhor), AHS (1–7 Likert), SET (s, menor é melhor) e CSCR (0–1, maior é melhor). Clique aqui para visualizar uma versão maior desta figura.

Validação estatística de hipóteses

Para validar ainda mais as hipóteses propostas (H1–H4), testes de significância estatística foram realizados em métricas-chave de avaliação, incluindo qualidade do layout, carga cognitiva, harmonia de cores e medidas de usabilidade (Tabela 6). Os resultados são apresentados como média ± desvio padrão, e a significância estatística foi avaliada por meio de testes t pareados com um intervalo de confiança de 95% (p < 0,05). Os resultados indicam que a estrutura proposta alcança melhorias estatisticamente significativas em comparação com abordagens de referência em múltiplas métricas, incluindo precisão de alinhamento, precisão de agrupamento, ordem de leitura, carga cognitiva (NASA-TLX) e medidas de harmonia de cores. Notavelmente, as reduções na carga cognitiva e as melhorias nas métricas de usabilidade demonstram diferenças altamente significativas (p < 0,01). Esses achados confirmam que a integração de princípios de design cognitivo e modelagem perceptual de cores resulta em melhorias mensuráveis e estatisticamente significativas na qualidade da interface do usuário, apoiando assim as hipóteses H1–H4.

Métrica	Linha de base (Média ± DP)	Proposta (Média ± DP)	Melhoria (%)	valor-p	Significância
Erro de Alinhamento (↓)	7,8 ± 1,2	4,2 ± 0,9	46,10%	0,003	Significativo
Precisão de Agrupamento (↑)	0,68 ± 0,05	0,82 ± 0,04	20,50%	0,001	Significativo
Precisão da Ordem de Leitura (↑)	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
Pontuação SUS (↑)	71,3 ± 6,2	88,9 ± 4,5	24,70%	0,0008	Altamente Significativo
Índice de Harmonia de Cores (↑)	0,61 ± 0,07	0,83 ± 0,05	36,00%	0,001	Significativo
Razão de Contraste (↑)	4,1 ± 0,6	6,2 ± 0,5	51,20%	0,002	Significativo

Tabela 6: Comparação estatística das métricas de desempenho entre os métodos de referência e o método proposto. A tabela apresenta a média e o desvio padrão (média ± DP) para métricas-chave de desempenho, incluindo erro de alinhamento, precisão na agrupamento, precisão na ordem de leitura, Índice de Carga de Trabalho da NASA (NASA-TLX), escala de usabilidade do sistema (SUS), índice de harmonia de cores e razão de contraste. São apresentados os percentuais de melhoria, valores de p e níveis de significância estatística. (↑) indica que valores mais altos são melhores, e (↓) indica que valores mais baixos são melhores. A significância estatística foi avaliada em p < 0,05.

Observações específicas do conjunto de dados

O desempenho relativamente inferior observado nas métricas estruturais no conjunto de dados Guo pode ser atribuído às suas características inerentes. O conjunto de dados Guo é menor do que os conjuntos RICO e ENRICO e concentra-se principalmente em características de cor perceptuais, em vez de anotações de layout estruturado. Como resultado, apresenta maior variabilidade no posicionamento dos componentes, organização hierárquica mais fraca e estruturas de layout menos consistentes entre as telas. Essas propriedades tornam o aprendizado estrutural e a otimização de layout mais desafiadores, explicando o desempenho inferior nas métricas de alinhamento, agrupamento e ordem de leitura, apesar do bom desempenho em avaliações perceptuais e centradas no usuário.

Estudo de ablação

O estudo de ablação avalia a contribuição de cada módulo dentro do framework proposto ao remover sistematicamente componentes individuais e analisar seu impacto na qualidade do layout, modelagem de cor e desempenho de detecção. A qualidade do layout é avaliada usando AE, GA, ROA e LCS. AE reflete o desvio posicional dos elementos da interface do usuário, em que valores mais altos indicam estrutura espacial mais fraca. GA avalia quão efetivamente os componentes são organizados de acordo com os princípios da Gestalt. ROA mede a preservação do fluxo visual lógico, enquanto LCS quantifica a consistência estrutural entre telas em termos de alinhamento, espaçamento e organização do layout. A degradação da qualidade de cor é avaliada usando ΔE (diferença de cor perceptual), CHI e CDS, que conjuntamente avaliam uniformidade perceptual, coerência estética e riqueza da paleta. O desempenho de detecção é avaliado usando mAP, precisão e revocação, que quantificam o impacto da substituição do módulo Faster R-CNN por um modelo de detecção mais simples. Em conjunto, essas métricas fornecem uma avaliação abrangente de como cada módulo contribui para o desempenho geral do sistema.

Tabela 7 resume a contribuição de cada módulo e compara a estrutura proposta com abordagens existentes de geração de interface do usuário. O modelo completo alcança o melhor desempenho em todas as métricas de qualidade de layout, modelagem de cor e detecção, demonstrando que o design cognitivo, a modelagem perceptual de cor e a compreensão visual profunda têm um efeito sinérgico. Quando o módulo de modelagem de cor é removido, o ΔE aumenta significativamente, enquanto CHI e CDS diminuem substancialmente, indicando perda de uniformidade perceptual e harmonia de cor. Isso confirma a importância da modelagem baseada em CAM02-UCS para manter a qualidade estética e perceptual. A remoção do módulo de layout cognitivo resulta em um aumento significativo no AE e diminuições notáveis em GA e ROA, demonstrando que os princípios de design cognitivo são essenciais para produzir layouts estruturalmente coerentes e legíveis. A remoção do módulo de consistência entre telas leva à redução do LCS, confirmando seu papel na manutenção de padrões de layout consistentes em múltiplas telas. Substituir o detector Faster R-CNN por uma CNN mais simples resulta em uma queda acentuada no mAP, precisão e revocação, destacando a importância crítica de uma detecção robusta de componentes no fluxo geral. Em comparação com métodos básicos, incluindo pix2code, REDRAW e LDGM, a estrutura proposta supera consistentemente todas as abordagens em precisão de layout, coerência visual e qualidade perceptual de cor.

Método / Módulo	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Módulo de Cor Removido	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Módulo de Layout Cognitivo Removido	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
Consistência Multi-Tela Removida	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNN Substituído por CNN Simples	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 (Difusão de Layout)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
Modelo Completo Proposto	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Tabela 7: Estudo de ablação e análise comparativa de desempenho do framework proposto e métodos de referência. A tabela avalia o impacto de componentes individuais comparando o modelo proposto completo com variantes nas quais módulos específicos são removidos (módulo de cor, módulo de layout cognitivo, consistência entre telas e substituição do Faster R-CNN por uma CNN simples), bem como métodos de referência (pix2code, REDRAW e LDGM). O desempenho é avaliado utilizando erro de alinhamento (AE), precisão de agrupamento (GA), precisão da ordem de leitura (ROA), pontuação de consistência de layout (LCS), diferença perceptual de cor (ΔE), índice de harmonia de cor (CHI), pontuação de diversidade de cor (CDS) e precisão média (mAP). (↑) indica que valores mais altos são melhores, e (↓) indica que valores mais baixos são melhores.

DISPONIBILIDADE DE DADOS:

Os conjuntos de dados utilizados neste estudo estão disponíveis nos seguintes links: conjunto de dados RICO: https://interactionmining.org/rico; conjunto de dados ENRICO: https://github.com/luileito/enrico; conjunto de dados de Cores de Interface do Usuário de Guo: https://github.com/guozhongke/UI-Color-Dataset.

Arquivo Suplementar 1. Formulações matemáticas e detalhes estendidos de implementação. Este arquivo fornece as formulações matemáticas detalhadas e os fluxos algorítmicos que sustentam o framework proposto de prototipagem automatizada de interface do usuário (UI). Inclui treinamento da detecção de componentes, extração de padrões de layout, modelagem de harmonia de cores, objetivo unificado de prototipagem de UI, detalhes da detecção com Faster R-CNN, cálculos de distância espacial e similaridade de alinhamento, construção da árvore lógica de UI, modelagem perceptual de cores baseada em CAM02-UCS, otimização de design cognitivo, modelagem de consistência entre telas e os Algoritmos S1–S3.Clique aqui para baixar este arquivo.

Discussão

Os resultados demonstram melhorias estatisticamente significativas na usabilidade, organização estrutural e qualidade perceptual (p < 0,05), confirmando a eficácia da incorporação de princípios de design cognitivo na prototipagem automatizada de interfaces. Diferentemente dos sistemas tradicionais de geração de interfaces, que dependem principalmente de detecção visual ou heurísticas baseadas em regras, a estrutura proposta integra agrupamento gestáltico, modelagem de hierarquia, restrições de espaçamento e legibilidade perceptual em todo o processo de reconstrução da interface. As melhorias observadas nos instrumentos NASA-TLX, SUS e SET confirmam ainda uma redução estatisticamente significativa na carga cognitiva (NASA-TLX, p.< 0,01). Esses resultados indicam que a geração automatizada de interfaces deve ir além da precisão na reconstrução visual e incorporar conhecimentos de design centrado no ser humano para alcançar usabilidade prática. Além disso, todas as hipóteses formuladas (H1–H4) são empiricamente apoiadas pelos resultados experimentais.

Além das melhorias no layout, a integração de modelagem de cor perceptual baseada em CAM02-UCS resulta em ganhos estatisticamente significativos em harmonia de cores, acessibilidade e estabilidade perceptual (p < 0,05), conforme refletido pelas melhorias em ΔE, CHI, CDS e razão de contraste. Em comparação com trabalhos anteriores, como a geração automatizada de temas de cor de interface baseada em imagens, que se concentra principalmente na otimização de cores, a estrutura proposta integra tanto o refinamento de cores quanto de layout em um único fluxo de trabalho. Além disso, a inclusão de um módulo de consistência multiscreen aborda uma limitação fundamental das abordagens anteriores, que se concentram apenas na geração de interfaces de tela única. Uma comparação com métodos existentes, incluindo pix2code³¹, REDRAW^23,24 e LDGM³², mostra que essas abordagens enfatizam principalmente a reconstrução estrutural ou a modelagem generativa, sem incorporar princípios cognitivos, harmonização de cores perceptual ou raciocínio multiscreen. A estrutura proposta demonstra melhorias estatisticamente significativas em relação a esses métodos (p < 0,05) em métricas de precisão de layout (AE, GA e ROA), métricas perceptuais (CHI e ΔE) e medidas de usabilidade (SUS e CSCR). Esses resultados destacam a vantagem de combinar princípios de design cognitivo, modelagem de cor perceptual e aprendizado profundo em um sistema unificado.

Uma observação importante dos resultados é a distinção entre fatores estruturais e perceptuais que influenciam a experiência do usuário (UX). A otimização estrutural melhora a correção funcional e a clareza do layout, enquanto a otimização perceptual — especialmente a harmonia de cores — influencia significativamente a percepção do usuário e a carga cognitiva. Os resultados indicam que o design ideal de interface requer um equilíbrio entre precisão estrutural e coerência perceptual. Apesar das melhorias demonstradas, certas limitações permanecem. Por exemplo, o desempenho em conjuntos de dados menores e mais voltados para a percepção, como o conjunto de dados Guo UI Color, é inferior em métricas estruturais devido à variabilidade na organização do layout e à escassez de anotações estruturais. Essas características introduzem desafios para o aprendizado de padrões de layout consistentes e relações hierárquicas. Trabalhos futuros focarão na melhoria da robustez nesses conjuntos de dados.

Do ponto de vista teórico, esta pesquisa demonstra que a geração de interfaces de usuário pode ser significativamente aprimorada pela incorporação direta de princípios cognitivos e perceptuais nos fluxos de trabalho de aprendizado profundo. O estudo desafia a visão convencional de que a geração de interfaces de usuário é exclusivamente um problema de visão computacional ou geração de código. Em vez disso, destaca a importância de incorporar a uniformidade perceptual (por meio do CAM02-UCS), a redução da carga cognitiva (por meio dos princípios da Gestalt e modelagem hierárquica) e a coerência no design multiscreen como componentes fundamentais de sistemas automatizados de interfaces de usuário. Este trabalho contribui para uma mudança rumo a modelos computacionais centrados no ser humano, nos quais a geração de interfaces leva em conta não apenas a correção estrutural, mas também fatores psicológicos e perceptuais. Assim, estabelece uma nova direção teórica para a inteligência de design automatizado.

Do ponto de vista prático, a estrutura proposta oferece uma solução implementável para designers de interfaces, equipes de produtos e ferramentas de prototipagem. Ao reduzir a carga cognitiva e melhorar a eficiência da busca, o sistema gera layouts de interface que exigem menos refinamento manual para atender aos padrões profissionais de design. O uso de temas de cores otimizados perceptualmente garante conformidade com diretrizes de acessibilidade, como as WCAG 2.1, permitindo uso imediato em aplicações do mundo real. Além disso, o módulo de consistência entre telas facilita o desenvolvimento mais rápido de aplicações com múltiplas páginas, mantendo layouts e padrões de design consistentes sem necessidade de ajustes manuais. No geral, a estrutura tem o potencial de reduzir significativamente o tempo de desenvolvimento de interfaces, ao mesmo tempo que melhora a qualidade e a usabilidade dos designs gerados.

O framework proposto introduz uma abordagem centrada no ser humano para a prototipagem automatizada de interfaces de usuário, integrando princípios de design cognitivo, modelagem perceptual de cores (CAM02-UCS) e consistência de layout em múltiplas telas em um único pipeline computacional. Diferentemente das abordagens anteriores, focadas principalmente na reconstrução estrutural ou na detecção visual, este framework modela explicitamente o agrupamento gestáltico, hierarquia, otimização de contraste e uniformidade perceptual. Os resultados experimentais demonstram melhorias significativas na usabilidade (SUS e NASA-TLX), na harmonia visual (AHS, CHI e ΔE) e no desempenho estrutural (GA, ROA, LCS e mAP), confirmando que a modelagem cognitiva e perceptual aprimora a qualidade da interface e a experiência do usuário. Trabalhos futuros explorarão a integração de modelos visão–linguagem baseados em transformadores para melhorar a compreensão semântica e o raciocínio estrutural. Além disso, a incorporação de personalização adaptativa, layouts responsivos a dispositivos e refinamento com participação humana pode aumentar ainda mais a aplicabilidade prática do sistema. De modo geral, este trabalho fornece uma base para sistemas de design de interfaces de próxima geração orientados por IA, que são não apenas visualmente precisos, mas também cognitivamente eficientes, perceptualmente harmônicos e passíveis de implantação prática.

Materiais

Lista de materiais utilizados neste artigo

Nome	Empresa	Número de catálogo	Comentários
CPU (Processador)	AMD Ryzen 9 7950X (16 núcleos, 32 threads, 4,5–5,7 GHz)	Advanced Micro Devices (AMD), EUA	Ryzen 9 7950X
CUDA Toolkit	Versão 11.8	NVIDIA Corporation, EUA	CUDA Toolkit 11.8
cuDNN	Versão 8.9	NVIDIA Corporation, EUA	cuDNN v8.9
Faster R-CNN	Modelo de Detecção de Objetos (com Rede de Proposta de Região)	Pesquisa da Meta AI / Detectron2	Framework Detectron2
Matplotlib	Versão 3.7	Equipe de Desenvolvimento do Matplotlib	v3.7.0
GPU NVIDIA RTX 4090	Placa de vídeo de 24 GB GDDR6X	NVIDIA Corporation, Santa Clara, CA, EUA	RTX 4090
NumPy	Versão 1.24	Desenvolvedores do NumPy	v1.24.0
OpenCV	Versão 4.8	Fundação OpenCV	v4.8.0
PyTorch	Versão 2.0	Fundação PyTorch (Meta AI)	v2.0.0
ResNet-50 com FPN	CNN de base com Rede de Pirâmide de Características	Pesquisa da Microsoft / Detectron2	ResNet-50-FPN
Scikit-learn	Versão 1.3	Desenvolvedores do Scikit-learn	v1.3.0
SciPy	Versão 1.10	Comunidade SciPy	v1.10.0
Memória do Sistema (RAM)	64 GB DDR5	Corsair / Kingston (ou equivalente)	Kit DDR5 64 GB
Sistema Operacional Ubuntu	Versão 22.04 LTS	Canonical Ltd., Reino Unido	Ubuntu 22.04 LTS