Automatisiertes Framework für das Prototyping von Benutzeroberflächen unter Integration kognitiver und visueller Designprinzipien zur Verbesserung der Benutzerfreundlichkeit und Layoutklarheit

Zusammenfassung

Diese Studie stellt einen automatisierten Rahmen für die Benutzeroberflächen-Prototypenerstellung vor, der kognitive Designprinzipien, wahrnehmungsbasierte Farbmodellierung und Deep Learning integriert. Das System verbessert die Zugänglichkeit, die Klarheit des Layouts, die Farbharmonie und die Konsistenz über verschiedene Bildschirme hinweg und führt so zu kohärenten, benutzerzentrierten Oberflächendesigns.

Zusammenfassung

Ein effektives Benutzeroberflächendesign erfordert ein harmonisches Gleichgewicht zwischen visueller Attraktivität, kognitiver Benutzbarkeit und Layout-Konsistenz. Aktuelle automatische Ansätze zur Generierung von Benutzeroberflächen konzentrieren sich jedoch hauptsächlich auf das visuelle Erscheinungsbild oder die Erkennung von Komponenten und verfügen nicht über einen einheitlichen Rahmen, der kognitive Prinzipien, Farbintelligenz und strukturelle Schlussfolgerungen integriert. Zudem weisen bestehende Methoden eine begrenzte Verallgemeinerungsfähigkeit bezüglich des Layouts, geringe Interpretierbarkeit, statische Farbauswahl und inkonsistentes Verhalten zwischen verschiedenen Bildschirmen auf. Vor diesem Hintergrund schlägt diese Arbeit einen automatisierten Prototyping-Rahmen für Benutzeroberflächen vor, der die Komponentenerkennung basierend auf Faster R-CNN (region-based convolutional neural network) und die wahrnehmungsbasierte Farbmodellierung mittels des einheitlichen Farbraums CIECAM02 (CAM02-UCS) integriert und um kognitive sowie visuelle Gestaltungsprinzipien erweitert. Faster R-CNN dient dabei der Identifizierung von UI-Komponenten und der Ableitung hierarchischer Strukturen aus umfangreichen Interface-Datensätzen. Ein erweiterter Farbgenerierungsmodul analysiert Marken- oder Referenzbilder, um wahrnehmungsmäßig einheitliche, harmonische und benutzbarkeitskonforme Farbthemen unter Verwendung von CAM02-UCS sicherzustellen. Diese Ergebnisse werden anschließend durch kognitive Gestaltungsregeln optimiert, darunter Gestalt-Gesetze zur Gruppierung, Fitts’ und Hick’s Gesetze, aufmerksamkeitsbasierte Abstände sowie Modellierung der visuellen Hierarchie, um automatisch verfeinerte, aufgabenorientierte UI-Layouts zu erzeugen. Experimente auf den Datensätzen RICO, ENRICO und Guo’s UI Color Datasets zeigen, dass das vorgeschlagene System eine Komponentenerkennungsgenauigkeit von 92,4 % erreicht, die Klarheit des Layouts und die Genauigkeit der Lesereihenfolge um 18,7 % verbessert und Farbpaletten generiert, die von Designern im Vergleich zu Baseline-Methoden als 24,5 % harmonischer bewertet werden. Benutzerevaluierungen deuten außerdem auf eine um 31 % reduzierte wahrgenommene kognitive Belastung und eine um 28 % erhöhte Gestaltungskonsistenz zwischen Bildschirmen hin. Diese Ergebnisse belegen, dass die Kombination eines auf Deep Learning basierenden strukturellen Verständnisses mit wahrnehmungsgerechter Farbmodellierung und kognitiven Gestaltungsprinzipien Benutzeroberflächen-Prototypen hervorbringt, die äußerst effizient, ästhetisch kohärent und benutzerfreundlich sind. Dieser Rahmen schafft einen neuartigen, durchgängigen Ansatz für intelligentes und menschenzentriertes, automatisiertes UI-Prototyping.

Einleitung

Grafische Benutzeroberflächen (GUIs) dienen als grundlegendes Kommunikationsmedium zwischen Menschen und Computersystemen und beeinflussen maßgeblich die Benutzbarkeit, Zugänglichkeit und die gesamte Benutzererfahrung (UX)^1,2. Moderne Softwaresysteme setzen auf intuitive und visuell ansprechende Schnittstellen, um Benutzer anzuziehen und zu binden. Traditionell umfasst die Benutzeroberflächengestaltung die Erstellung grafischer Layouts, die anschließend von Entwicklern in Frontend-Code umgesetzt werden. Aufgrund unterschiedlicher plattformspezifischer Protokolle zwischen Betriebssystemen ist jedoch eine wiederholte Anpassung erforderlich, was den Entwicklungsaufwand und die Komplexität erhöht. Die automatisierte Generierung von UI-Code hat sich daher zu einem wichtigen Forschungsbereich entwickelt, um manuelle Arbeitsschritte zu reduzieren und die Entwicklungseffizienz zu steigern.

Frühe Ansätze zur automatisierten Erstellung von Benutzeroberflächen kombinierten traditionelle Bildverarbeitungstechniken mit Deep-Learning-Modellen zur Erkennung und Klassifizierung von Bereichen^3,4. Derzeitige dominierende Strategien zur Generierung von GUI-Code wenden Techniken der Computer Vision an, um UI-Bilder zu analysieren und in strukturierte Frontend-Darstellungen umzuwandeln^5,6,7. Während Bildverarbeitungsmethoden auf manuell erstellten Merkmalen basieren, extrahieren Deep-Learning-Ansätze hierarchische Darstellungen aus umfangreichen Datensätzen. Daher haben Forscher hybride Ansätze untersucht, die Deep Learning mit domänenspezifischen Bildverarbeitungstechniken kombinieren, um Robustheit und Genauigkeit zu verbessern.

Farbe ist ein weiterer entscheidender Faktor im UI-Design, der die Wahrnehmung, Benutzbarkeit und ästhetische Anziehungskraft der Benutzeroberfläche beeinflusst¹. Die Aufrechterhaltung einer Konsistenz zwischen Bildinhalten und den Farbschemata der Benutzeroberfläche wird schwierig, wenn visuelle Eingaben in Farbton und Kontext variieren^8,9,10. Daher hat die Forschung zunehmend Methoden zur automatischen Generierung von Farbpaletten und zur wahrnehmungsgerechten Farbmodellierung untersucht. Zu den bestehenden Verfahren zur Farbgenerierung gehören Techniken, die auf dem CIELAB-Farbraum basieren¹¹. Andere Ansätze verwenden Clustering-Algorithmen wie k-Means, um dominierende Farben aus Bildern zu extrahieren¹². Infolgedessen haben neuere Arbeiten verstärkt datengestützte, auf maschinellem Lernen basierende Ansätze für die Farbmodellierung übernommen.

Parallel dazu haben Deep-Learning-Verfahren die Erkennung von UI-Komponenten und das Verständnis von Layouts erheblich verbessert. Neuronale Netze haben eine genauere strukturelle Analyse mobiler Schnittstellen ermöglicht¹³. Diese Methoden konzentrieren sich jedoch hauptsächlich auf die Erkennungsgenauigkeit und vernachlässigen oft übergeordnete Aspekte wie kognitive Benutzerfreundlichkeit, Layout-Hierarchie und Interaktions-Effizienz. Generative Modelle zur Synthese von UI-Layouts wurden ebenfalls vorgeschlagen^14,15, stehen jedoch vor Herausforderungen bei der Aufrechterhaltung der Konsistenz über mehrere Bildschirme hinweg und bei der Bereitstellung nachvollziehbarer Gestaltungsentscheidungen¹⁶. Andere Ansätze konzentrieren sich auf visuelle Ähnlichkeit oder Wiedergabequalität, verfügen jedoch nicht über einen einheitlichen Rahmen, der Komponenten-Semantik, Farbharmonie und Benutzerfreundlichkeitsbeschränkungen kombiniert¹⁷. Die Texterkennung ist ebenfalls wichtig für das Verständnis von UI-Inhalten. Techniken wie faltungsrekurrente neuronale Netze (CRNNs) ermöglichen die genaue Erkennung komplexer Textmuster in Interface-Bildschirmen^18,19,20.

Es wurden mehrere Systeme vorgeschlagen, um UI-Code aus Skizzen oder Bildern zu generieren. Sketch2Code verwendet die Objekterkennung, um Skizzen in Code-Darstellungen umzuwandeln^21,22, ist jedoch empfindlich gegenüber der Bildqualität. REDRAW bietet eine automatisierte Pipeline für Datensammlung und Modelltraining und kombiniert dabei faltende und rekurrente neuronale Netze, um strukturierte UI-Darstellungen zu erzeugen^23,24. In nachfolgenden Arbeiten wurden verbesserte Evaluierungsmetriken eingeführt, um die Qualität generierter Benutzeroberflächen zu bewerten²⁵. Neuere Ansätze beinhalten diffusionsbasierte und transformerbasierte Modelle zur Layoutgenerierung, wie beispielsweise Diffusion-Layout-Transformer ohne Autoencoder-Methoden, die Generierung von GUI-Layouts mithilfe transformerbasierter Anordnungsgraphen für grafische Benutzeroberflächen sowie die Erzeugung von UI-Layouts, die von großen Sprachmodellen gesteuert wird^26,27,28. Ein vergleichender Überblick über diese Ansätze wird in Tabelle 1 bereitgestellt.

Referenzen und zentrale Methode(n)	Ziel	Vorteile	Nachteile
Automatisierte, bildbasierte Generierung von Benutzeroberflächen-Farbthemen: Extraktion dominanter Farben + CAM02-UCS-wahrnehmungsbezogenes Farbmodell¹	Automatische Generierung von Farbthemen für Benutzeroberflächen aus Referenzbildern unter Optimierung von Harmonie und Bedienbarkeit.	Starke wahrnehmungsbezogene Grundlage (CAM02-UCS); berücksichtigt explizit Harmonie und Bedienbarkeit (Kontrast und Diversität); beinhaltet webbasierte Implementierung und Bewertung durch Designer.	Fokussiert ausschließlich auf Farbe/Thema (nicht auf Layout oder Komponentenstruktur); regel- oder heuristikbasiert statt end-to-end gelernte Generierung von Benutzeroberflächen.
Einheitliche Layout-Generierung mit einem entkoppelten Diffusionsmodell (LDGM)²⁵	Einheitliche, flexible Layout-Generierung für grafische Szenen und Benutzeroberflächen.	Zustandsderkunst-Verfahren hinsichtlich Diversität und Steuerbarkeit bei der Layout-Generierung; unterstützt bedingte Generierung und mehrere Attributtypen.	Diffusionsbasierte Ausgaben können Ausrichtungs- oder feingliedrige Layout-Probleme aufweisen, sofern nicht eingeschränkt; höhere Modellkomplexität und Inferenzkosten.
Diffusion Layout Transformers ohne Autoencoder-Methoden: Transformer + Diffusion für die Layout-Generierung (ohne Autoencoder)²⁶	Verbesserung von Genauigkeit und Ausrichtung bei Layout-Generierungs-Benchmarks (FID, Ausrichtungs- und Überlappungsmetriken).	Bessere Erfassung semantischer Korrelationen zwischen benachbarten Objekten; starke Leistung bei FID- und Ausrichtungsmetriken.	Fokussiert hauptsächlich auf Layout-Geometrie (Positionen, Größen, Kategorien) statt auf Semantik von Benutzeroberflächen.
Generierung von GUI-Layouts mit transformerbasierten Modellen aus GUI-Anordnungsgraphen (GUI-AGs)²⁷	Erstellung von GUI-Layouts aus positions- oder graphbasierten Beschränkungen zur Unterstützung von Designern.	Graphdarstellungen erfassen relationale Beschränkungen; Transformer ermöglicht flexible, beschränkungsbedingte Generierung.	Kann explizite Beschränkungsgraphen von Designern erfordern; geringer Fokus auf Farb- und Bedienbarkeitsmetriken.
Generierung von UI-Layouts mit durch UI-Grammatik gesteuerten großen Sprachmodellen (LLMs): Große Sprachmodelle (LLMs) + hierarchische UI-Grammatik²⁸	Untersuchung von LLMs für die Layout-Generierung und Verbesserung der Erklärbarkeit und Steuerbarkeit mittels Grammatikdarstellungen.	Hohe Steuerbarkeit auf höherer Ebene und verbesserte Erklärbarkeit; kann In-Context-Learning von LLMs (GPT-Typ) nutzen.	Frühes Stadium mit begrenzter empirischer Validierung; Grammatik-Design und Robustheit über verschiedene UIs hinweg begrenzt.

Tabelle 1: Vergleich bestehender Methoden zur Farbmodellierung und Layoutgenerierung in der Benutzeroberfläche. Die Tabelle fasst repräsentative Ansätze für das Design von Benutzeroberflächen zusammen, darunter die Generierung von Farbschemata, die layoutbasierte Generierung mittels Diffusion, transformatorbasierte Methoden und die layoutbasierte Generierung mithilfe großer Sprachmodelle. Für jede Methode werden die zugrundeliegende Technik, das Ziel, die Vorteile und die Einschränkungen dargestellt, wobei Unterschiede hinsichtlich der Wahrnehmungsmodellierung, der Fähigkeit zur Layoutgenerierung, der Steuerbarkeit und der Benutzerfreundlichkeit hervorgehoben werden.

Trotz dieser Fortschritte bleibt eine zentrale Einschränkung bestehen: Bisher gibt es kein System, das Komponentenerkennung, wahrnehmungsbasierte Farbmodellierung, kognitive Gestaltungsprinzipien und konsistente Multibildschirm-Layouts innerhalb eines einzigen, durchgängigen Gesamtrahmens gemeinsam integriert¹. Aktuelle Ansätze optimieren typischerweise nur einen oder zwei Aspekte – wie Erkennung, Layout oder Farbe –, ohne deren gegenseitige Abhängigkeiten zu berücksichtigen. Diese Zersplitterung verdeutlicht eine entscheidende Forschungslücke bei der Entwicklung einheitlicher, auf den Menschen ausgerichteter automatisierter Systeme zur Erstellung von Benutzeroberflächen-Prototypen. Insbesondere kognitive Gestaltungsprinzipien wie die Gestaltgesetze, das Fitts’sche Gesetz und das Hick’sche Gesetz werden oft lediglich konzeptionell behandelt, statt formal in rechnergestützte Modelle integriert zu werden.

Um diese Einschränkungen zu beheben, schlägt diese Studie einen durchgängig automatisierten UI-Prototyping-Rahmen vor, der Komponentenerkennung, wahrnehmungsbasierte Farbmodellierung und kognitive Gestaltungsprinzipien in einem einheitlichen System integriert. Der Rahmen zielt darauf ab, die Layoutqualität zu verbessern, die kognitive Belastung zu verringern, die Farbharmonie zu steigern und die Gesamtnutzbarkeit zu erhöhen. Diese Verbesserungen werden durch Experimente anhand der Datensätze RICO, ENRICO und Guos UI-Farbdatensatz validiert, wodurch die Wirksamkeit der Kombination struktureller, wahrnehmungsbezogener und kognitiver Aspekte in einer einzigen automatisierten UI-Prototyping-Pipeline belegt wird. Es wird vermutet, dass die Integration einer auf Deep Learning basierenden Komponentenerkennung, wahrnehmungsbasierter Farbmodellierung und kognitiver Gestaltungsprinzipien in einem einheitlichen Rahmen die Qualität von UI-Prototypen im Vergleich zu bestehenden Ansätzen signifikant verbessert. Insbesondere besagt H1, dass der Rahmen die Layoutqualität verbessert, einschließlich Ausrichtung, Gruppierung und Lesereihenfolge. H2 postuliert, dass der Rahmen die kognitive Belastung des Nutzers reduziert. H3 vermutet, dass die wahrnehmungsbasierte Farbmodellierung die Farbabstimmung und visuelle Harmonie verbessert. H4 besagt, dass die Gesamtnutzbarkeit und ästhetische Qualität von UI-Prototypen gesteigert werden.

Protokoll

Diese Studie verwendet öffentlich zugängliche Datensätze und beinhaltet keine menschlichen oder tierischen Versuchspersonen.

Der vorgeschlagene automatisierte Rahmen für die UI-Prototyperstellung integriert eine strukturelle Verständnismethode auf Basis von Deep Learning, eine wahrnehmungsgemäß einheitliche Farbmodellierung und kognitive Gestaltungsprinzipien, um kohärente und benutzerzentrierte Schnittstellenprototypen zu erzeugen. Die Methodik beginnt mit einer Faster-R-CNN-Architektur, die auf den Datensätzen RICO und ENRICO trainiert wurde, um UI-Komponenten zu erkennen und ihre hierarchischen Beziehungen zu extrahieren, wodurch eine genaue Interpretation unterschiedlicher Bildschirmlayouts ermöglicht wird. Die erkannten Komponenten werden anschließend von einem Farbintelligenzmodul verarbeitet, das marken- oder bildbasierte Farbhinweise extrahiert, die wahrgenommene Ähnlichkeit mittels CAM02-UCS modelliert und harmonische, kontrastbewusste sowie barrierefreie Farbpaletten generiert. Danach werden kognitive Gestaltungsprinzipien – darunter Gestalt-Gesetze zur Gruppierung, Fitts’ Gesetz, Hick’s Gesetz, aufmerksamkeitsbasierte Abstände und Beschränkungen der visuellen Hierarchie – über eine kognitive Optimierungs-Engine angewendet, um die räumliche Organisation und die Ausrichtung der Komponenten zu verfeinern. Schließlich integriert eine Layout-Reasoning-Schicht strukturelle, wahrnehmungsbezogene und kognitive Beschränkungen, um mehrseitig konsistente UI-Prototypen zu erzeugen, die Nutzbarkeit, Ästhetik und funktionale Klarheit ausbalancieren. Diese integrierte Pipeline gewährleistet Wahrnehmungskohärenz, reduziert die kognitive Belastung und folgt menschenzentrierten Gestaltungsprinzipien. Der vollständige Arbeitsablauf der vorgeschlagenen Methode ist in Abbildung 1 dargestellt.

Abbildung 1. Gesamtarchitektur des vorgeschlagenen Rahmens für die automatisierte Benutzeroberflächen-Prototypenerstellung. Das Diagramm veranschaulicht die vollständige Pipeline, beginnend mit einem Eingabebild einer Benutzeroberfläche. Die Erkennung von Komponenten erfolgt mithilfe von Faster R-CNN, um Schnittstellenelemente zu identifizieren. Die erkannten Komponenten werden anschließend unter Verwendung einer CAM02-UCS-basierten wahrnehmungsbezogenen Modellierung zur Extraktion von Hierarchie und Layout verarbeitet. Danach wird eine kognitive Optimierung unter Anwendung von Gestaltgesetzen, Fitts’ Gesetz, Hick’s Gesetz und aufmerksamkeitsbasierten Anpassungen durchgeführt. Pfeile zeigen den Datenfluss zwischen den Modulen an und führen zum schlussendlichen Ausgabeprototyp der Benutzeroberfläche. Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Überblick über das Framework

Abbildung 1 veranschaulicht den durchgängigen Workflow des vorgeschlagenen automatisierten UI-Prototyping-Frameworks, das einen rohen UI-Screenshot in einen kognitiv optimierten Prototyp umwandelt. Der Prozess beginnt mit dem Eingabebild der Benutzeroberfläche, das an das Komponentenerkennungsmodul basierend auf Faster R-CNN übergeben wird. Dieses Modul identifiziert Bedienelemente wie Schaltflächen, Symbole, Textfelder und Container und gibt deren entsprechende Begrenzungsrahmen und Klassenbezeichnungen aus. Die erkannten Komponenten werden anschließend in der Phase zur Extraktion von Hierarchie und Layout verarbeitet. Basierend auf räumlichen Beziehungen und strukturellen Mustern erstellt das System einen hierarchischen Layoutbaum, der widerspiegelt, wie Benutzer die Bildschirmorganisation natürlicherweise wahrnehmen. Diese Darstellung erfasst visuelle Gruppierungen und strukturelle Abhängigkeiten zwischen UI-Elementen. Das extrahierte Layout wird danach durch kognitive Optimierung unter Anwendung menschenzentrierter Gestaltungsprinzipien verfeinert. Dazu gehören Gestalt-Gesetzmäßigkeiten zur visuellen Gruppierung, das Fitts’sche Gesetz zur Optimierung der Größe und Erreichbarkeit von Touch-Zielen, das Hick’sche Gesetz zur Reduzierung der Entscheidungskomplexität sowie eine aufmerksamkeitsbasierte Abstandsgestaltung zur Verbesserung der visuellen Hierarchie. Dadurch wird das Layout intuitiver, besser lesbar und effizienter für die Benutzerinteraktion. Schließlich wird das optimierte Layout mit einer wahrnehmungsbasierten Farbmodellierung kombiniert, um einen kohärenten UI-Prototyp zu erzeugen. Die resultierende Benutzeroberfläche ist strukturell genau, visuell harmonisch und entspricht den menschlichen Erwartungen an Benutzerfreundlichkeit.

Der Framework wurde mithilfe von PyTorch 2.0 unter Ubuntu 22.04 implementiert. Die Experimente wurden auf einem System mit einer NVIDIA RTX 4090-GPU (24 GB VRAM) durchgeführt. Das Faster-R-CNN-Modell verwendete einen ResNet-50-Backbone, der zuvor auf dem ImageNet-Datensatz vortrainiert worden war. Das Training erfolgte mit dem Optimierer „stochastic gradient descent“ (SGD) bei einer Lernrate von 0,001, einer Batch-Größe von 16 und bis zu 60 Epochen. Zur Vermeidung von Überanpassung wurde Early Stopping anhand eines Validierungsdatensatzes angewandt, der 20 % der Daten umfasste. Obwohl das Training bis zu 60 Epochen dauerte, wurde die Konvergenz üblicherweise früher durch Early Stopping basierend auf dem Validierungsverlust erreicht. Momentum und Weight Decay wurden auf 0,9 bzw. 0,0005 festgelegt. Zur Datenvermehrung gehörten Normalisierung, zufällige horizontale Spiegelung sowie zufälliges Zuschneiden und Ändern der Bildgröße.

Datensatzvorbereitung

Zur Unterstützung des vorgeschlagenen automatisierten UI-Prototyping-Frameworks wurden drei ergänzende Datensätze verwendet: ENRICO²⁹, RICO³⁰ und Guos UI-Farbdatensatz¹. Der RICO-Datensatz enthält 66.261 Android-Benutzeroberflächen-Screenshots, die aus 9.700 Anwendungen gesammelt wurden, und bietet eine breite Vielfalt für die Erkennung von Komponenten sowie die extrahierende hierarchische Layoutanalyse. ENRICO umfasst 1.464 hochwertige UI-Screenshots, die manuell in 20 Designmuster kategorisiert wurden und eine verbesserte Generalisierung für strukturelle Schlussfolgerungen und die Modellierung von Layoutkonsistenz ermöglichen. Guos UI-Farbdatensatz besteht aus 128 kuratierten UI-Bildern mit annotierten Farbthemen, die für die modellhafte Erfassung der Farbwahrnehmung und die Bewertung von Farbpaletten verwendet werden. Aufgrund seines relativ geringen Umfangs kann dieser Datensatz jedoch gewisse Variabilität in den Layouteigenschaften verursachen. Für diese Studie wurde ein kombinierter Datensatz aus 5.128 Screenshots zur Schulung und Evaluierung erstellt. Konkret wurden etwa 4.000 Bilder aus RICO zur Schulung des Faster-R-CNN-Modells für die Komponentenerkennung verwendet, 1.000 Bilder aus ENRICO für das Lernen von Layoutmustern und die Modellierung struktureller Konsistenz sowie 128 Bilder aus Guos Datensatz für Farbevaluierungsaufgaben. Alle Bilder wurden auf eine Auflösung von 480 × 800 Pixel normalisiert, in einen einheitlichen sRGB-Farbraum konvertiert und mit standardisierten Begrenzungsrahmen sowie hierarchischen Metadaten neu annotiert, um die Kompatibilität zwischen den Datensätzen sicherzustellen. Ein Überblick über die in dieser Studie verwendeten Datensätze ist in Tabelle 2 dargestellt. Der RICO-Datensatz ermöglicht die großskalige Erkennung von UI-Komponenten und die strukturelle Analyse, während ENRICO die Fähigkeit des Modells verbessert, Layoutmuster zu erkennen und die Konsistenz über mehrere Bildschirme hinweg sicherzustellen. Guos UI-Farbdatensatz, obwohl kleiner im Umfang, spielt eine entscheidende Rolle bei der Bewertung der wahrnehmungsmäßigen Farbharmonie und der Modellierung von Kontrasten. Zusammen bieten diese Datensätze eine umfassende und ausgewogene Grundlage für das Training, die Validierung und die Evaluierung des vorgeschlagenen automatisierten UI-Prototyping-Frameworks.

Datensatz	Gesamtanzahl verfügbarer Bilder	Bilder, die in der Studie verwendet wurden	Zweck im vorgeschlagenen Framework
RICO Dataset30	66.261	4.000	Erkennung von Benutzeroberflächenkomponenten, Extraktion der strukturellen Anordnung
ENRICO Dataset29	1.464	1.000	Lernen von Gestaltungsmustern, Modellierung der Layout-Konsistenz
Guo’s UI Color Dataset1	128	128	Extraktion von Farbthemen, wahrnehmungsbasierte Farbevaluation
Kombinierte Gesamtanzahl	67.853	5.128	Umfassender Datensatz für Erkennung, Layout- und Farbmodellierung

Tabelle 2: Zusammenfassung der im vorgeschlagenen Framework verwendeten Datensätze. Die Tabelle zeigt die zur Schulung und Bewertung verwendeten Datensätze, einschließlich der RICO-, ENRICO- und Guos UI-Farbdatensätze. Sie enthält die Gesamtanzahl der verfügbaren Bilder, den in dieser Studie verwendeten Teildatensatz sowie die spezifische Rolle jedes Datensatzes bei der Komponentenerkennung, der Layoutmodellierung und der wahrnehmungsbasierten Farbanalyse innerhalb des vorgeschlagenen Frameworks.

Es wurde eine geschichtete Stichprobenstrategie angewandt, um die Vielfalt bei Benutzeroberflächenkomponenten, Layoutstrukturen und Farbverteilungen über die Datensätze RICO, ENRICO und Guo hinweg zu bewahren. Der Datensatz wurde mithilfe geschichteter Stichprobenbildung in einen Trainingsanteil (70 %), einen Validierungsanteil (15 %) und einen Testanteil (15 %) aufgeteilt. Die Bilder wurden mit dem Mittelwert (0.485, 0.456 und 0.406) und der Standardabweichung (0.229, 0.224 und 0.225) normalisiert. Die Datenvermehrung umfasste zufälliges horizontales Spiegeln (Wahrscheinlichkeit = 0,5) und zufälliges Zuschneiden (Skalenbereich: 0,8–1,0), gefolgt von einer Größenänderung auf 224 × 224 Pixel, die während des Trainings angewandt wurde.

Komponentenannotierung und Vorverarbeitung

Die Datensätze RICO, ENRICO und Guo’s UI Color Dataset unterstützen gemeinsam die drei zentralen funktionalen Komponenten des vorgeschlagenen automatisierten UI-Prototyping-Frameworks: die Erkennung von Komponenten, die Modellierung der Anordnung und die wahrnehmungsbezogene Farboptimierung. Der RICO-Datensatz umfasst eine umfangreiche Sammlung von über 66.000 mobilen Benutzeroberflächen (UI) und wird hauptsächlich zum Training des Moduls zur Komponentenerkennung verwendet. Aufgrund seiner Vielfalt kann das Faster-R-CNN-Modell robuste Repräsentationen gängiger UI-Elemente wie Schaltflächen, Bilder und Textfelder aus einer breiten Palette von Anwendungen erlernen. Dies gewährleistet eine genaue Erkennung und Lokalisierung von UI-Komponenten unter unterschiedlichen Gestaltungsbedingungen. Der ENRICO-Datensatz bietet hochwertige, mit Mustern gekennzeichnete UI-Bildschirme, um strukturelle Beziehungen und Layoutmuster zu erlernen. Er ermöglicht dem System, die Beziehungen zwischen Komponenten, die hierarchische Organisation sowie gängige Gestaltungsvorlagen zu verstehen. Dieser Datensatz spielt eine entscheidende Rolle bei der Modellierung von Layoutstrukturen und der Sicherstellung der Konsistenz über mehrere Bildschirme hinweg, wodurch das Framework in der Lage ist, Layouts zu generieren, die mit etablierten Gestaltungskonventionen übereinstimmen. Im Gegensatz dazu wird der Datensatz Guo’s UI Color Dataset speziell für die wahrnehmungs- und kognitionsbezogene Farbmodellierung eingesetzt. Im Unterschied zu RICO und ENRICO, die sich auf strukturelle Aspekte konzentrieren, enthält dieser Datensatz kuratierte UI-Bilder mit annotierten Farbthemen. Diese Anmerkungen dienen zum Training der Module zur Farbextraktion und Harmoniebewertung. Durch die Abbildung von Farbbeziehungen in wahrnehmungsbezogene Farbräume wie CAM02-UCS lernt das Framework, Farbpaletten zu generieren, die Kontrast, Barrierefreiheit und ästhetische Kohärenz ausbalancieren. Zusammen bilden diese Datensätze eine integrierte Pipeline: RICO unterstützt die Erkennung von Komponenten, ENRICO ermöglicht das Verständnis von Layoutmustern und strukturelle Konsistenz, und Guos Datensatz trägt zur wahrnehmungsbezogenen Farboptimierung bei. Diese Integration stellt sicher, dass die generierten UI-Prototypen strukturell korrekt, visuell harmonisch und kognitiv optimiert sind.

Die Normalisierung erfolgte mit einem Mittelwert von [0,485, 0,456, 0,406] und einer Standardabweichung von [0,229, 0,224, 0,225]. Zur Verbesserung der Generalisierungsfähigkeit des Modells wurden Techniken zur Datenaugmentierung angewendet, darunter zufälliges Zuschneiden, horizontales Spiegeln und Drehen. Zusätzlich wurden die Pixelwerte auf den Bereich [0, 1] skaliert, und alle Bilder wurden auf eine Auflösung von 480 × 800 Pixeln verkleinert, um Konsistenz über die Datensätze hinweg sicherzustellen. Für die Augmentierung während des Trainings werden Bilder auf 224 × 224 Pixel verkleinert, während die ursprüngliche Auflösung von 480 × 800 Pixeln für die Layoutanalyse beibehalten wird. Begrenzungsrahmen wurden angepasst, um irrelevante Annotationen mithilfe vordefinierter Schwellenwerte herauszufiltern. Um eine einheitliche Vorgehensweise über alle Datensätze hinweg zu gewährleisten, wurden alle Benutzeroberflächenelemente manuell mit dem Annotationstool LabelImg annotiert. Vor der Annotation wurde ein vordefiniertes Schema festgelegt, um Benutzeroberflächenelemente in Kategorien wie Schaltfläche, Text, Bild, Symbol und Container einzuteilen. Für die Darstellung der Begrenzungsrahmen wurde ein einheitliches Koordinatensystem verwendet, und hierarchische Informationen wurden basierend auf den räumlichen Beziehungen zwischen den Elementen und ihren Eltern-Kind-Beziehungen im Layoutbaum erstellt. Darüber hinaus wurden Richtlinien festgelegt, um eine konsistente Annotation von Elementen, eine ordnungsgemäße Behandlung überlappender Komponenten und die Einhaltung minimaler Größenschwellenwerte in den Datensätzen RICO, ENRICO und Guo sicherzustellen.

Detaillierte mathematische Formulierungen für das Training zur Komponentenerkennung und die Extraktion von Layout-Mustern sind in Supplementary File 1 enthalten.

Das Faster-R-CNN-Modell wurde mit SGD und einem Momentum von 0,9 sowie einer Gewichtsreduzierung von 0,0005 trainiert. Die anfängliche Lernrate wurde auf 0,001 festgelegt und anhand einer Schritt-Abnahmestrategie basierend auf der Validierungsleistung angepasst. Das Training wurde für bis zu 60 Epochen mit einer Batch-Größe von 16 durchgeführt. Zur Vermeidung von Überanpassung wurde ein frühzeitiges Abbruchkriterium angewendet, wobei ein Validierungsdatensatz verwendet wurde, der 20 % der Trainingsdaten umfasste.

Die Abbildungsfunktion f(.) nimmt erkannte Benutzeroberflächenelemente als Eingabe entgegen und erzeugt eine hierarchische Layoutdarstellung als Ausgabe. Sie berechnet Nachbarschaftsbeziehungen zwischen Benutzeroberflächenelementen basierend auf räumlichem Abstand und Ausrichtungskriterien und erstellt eine Adjazenzmatrix, um diese Beziehungen darzustellen. Anschließend wird ein Clustering-Algorithmus wie DBSCAN angewendet, um verwandte Komponenten zu gruppieren. Schließlich werden die gruppierten Elemente basierend auf übergeordneten und untergeordneten Beziehungen in hierarchische Strukturen organisiert, wodurch eine strukturierte Layoutdarstellung entsteht.

Detaillierte Formulierungen für die Modellierung der Farbharmonie und das einheitliche Optimierungsziel sind in Supplementary File 1 enthalten.

Diese Zielfunktion formalisiert mathematisch die Integration der strukturellen Erkennung, der Layout-Interpretation und der wahrnehmungsbasierten Farbmodellierung und stellt sicher, dass alle Komponenten des Frameworks gemeinsam zur Erzeugung kohärenter und benutzerzentrierter UI-Prototypen beitragen. Die Optimierung erfolgt modulartig für jede Komponente des Frameworks. SGD wird zum Trainieren des Moduls zur Komponentenerkennung verwendet, während der Adam-Optimierer während der gemeinsamen Optimierung der vereinheitlichten Zielfunktion zum Einsatz kommt. Die kombinierte Zielfunktion dient der Steuerung der Gesamtsystemleistung. In den Phasen der gemeinsamen Optimierung wird die Zielfunktion mithilfe des Adam-Optimierers mit einer Lernrate von 0,001 und einer Batch-Größe von 16 minimiert. Das Training wird für bis zu 60 Epochen durchgeführt, wobei ein vorzeitiges Abbruchkriterium greift, wenn die Änderung des Validierungsverlusts über fünf aufeinanderfolgende Epochen hinweg kleiner als 10⁻⁴ ist.

Erkennung von Komponenten mithilfe von Faster R-CNN

Der vorgeschlagene Ansatz verwendet Faster R-CNN zur automatischen Erkennung von Benutzeroberflächenkomponenten, einschließlich Schaltflächen, Symbolen, Textfeldern, Bildern und Containern. Faster R-CNN eignet sich gut für diese Aufgabe, da es eine hohe Objekterkennungsgenauigkeit mit einer effizienten Generierung von Regionsvorschlägen kombiniert, was für die Verarbeitung komplexer Benutzeroberflächenlayouts mit dicht angeordneten Elementen unerlässlich ist. Das Modell nutzt einen ResNet-50-Backbone, der zuvor auf dem ImageNet-Datensatz vortrainiert wurde, um faltungs-basierte Merkmalskarten aus jedem Benutzeroberflächenbildschirm zu extrahieren. Während des Trainings wurden die unteren Schichten fixiert, um allgemeine visuelle Merkmale beizubehalten, während die höheren Schichten (conv4_x und conv5_x) für die erkennungsspezifische Erkennung von Benutzeroberflächenkomponenten angepasst wurden. Diese Merkmalskarten erfassen visuelle Strukturen, Kanten, Texturen und Komponentengrenzen. Während der Erkennung identifiziert das Region-Vorschlags-Netzwerk (RPN) Kandidatenregionen (Anker), die wahrscheinlich Benutzeroberflächenkomponenten enthalten. Anker werden mithilfe mehrerer Skalen (128, 256 und 512) und Seitenverhältnisse (1:1, 1:2 und 2:1) definiert, um Benutzeroberflächenelemente unterschiedlicher Größe zu berücksichtigen. Während des Trainings werden Anker mit einem Überlappungsmaß (Intersection-over-Union, IoU) von mehr als 0,7 im Vergleich zu Referenzboxen als positiv gekennzeichnet, während Anker mit einem IoU-Wert unter 0,3 als negativ markiert werden; Anker mit mittleren IoU-Werten werden ignoriert. Jeder Anker erhält eine Wahrscheinlichkeit, die das Vorhandensein einer Komponente angibt. Anschließend wird eine Nicht-Maxima-Unterdrückung (Non-maximum Suppression, NMS) angewendet, um redundante und überlappende Vorschläge zu entfernen, wodurch eine effiziente Lokalisierung aussagekräftiger Benutzeroberflächenelemente auch in stark überladenen Schnittstellen sichergestellt wird. Sobald die Kandidatenregionen generiert sind, wird jeder Vorschlag in vordefinierte Kategorien klassifiziert und seine Begrenzungsboxkoordinaten werden verfeinert. Eine Region-of-Interest-(ROI-)Align-Operation extrahiert feste, gleichgroße Merkmalsdarstellungen für jeden Vorschlag, die anschließend von vollvermaschten Schichten zur Klassifizierung und Regression verarbeitet werden. Der Klassifizierungszweig gibt Klassenwahrscheinlichkeiten aus, während der Regressionszweig präzise Koordinaten der Begrenzungsbox vorhersagt. Das gesamte Faster-R-CNN-Modell wird end-to-end trainiert, indem eine gemeinsame Verlustfunktion optimiert wird, die den RPN-Verlust mit dem endgültigen Erkennungsverlust kombiniert. Dadurch ist das System in der Lage, Benutzeroberflächenkomponenten nicht nur genau zu erkennen, sondern sie auch präzise über verschiedene Schnittstellenstrukturen hinweg zu lokalisieren. Eine detaillierte Beschreibung der Faster-R-CNN-Komponentenerkennung, einschließlich der RPN-Phase, der ROI-Klassifizierung, der Verfeinerung der Begrenzungsbox und des endgültigen Optimierungsziels, ist in Supplementary File 1 enthalten.

Algorithmus S1 enthält den detaillierten Arbeitsablauf zur Komponentenerkennung und strukturellen Extraktion (Ergänzende Datei 1). Er beschreibt den gesamten Prozess der automatischen Erkennung von Benutzeroberflächenkomponenten und der strukturellen Extraktion aus einem rohen Bildschirmfoto. Das Eingabebild wird zunächst vorverarbeitet und anschließend über einen CNN-Backbone geleitet, um tiefe visuelle Merkmale zu extrahieren. Diese Merkmale werden von der RPN verwendet, um vorgeschlagene Begrenzungsboxen zu generieren, die dann durch Klassifizierung und Regression verfeinert werden. NMS entfernt überflüssige Erkennungen, um eine präzise Lokalisierung sicherzustellen. Nach der Erkennung werden Komponenten basierend auf räumlicher Nähe mithilfe der dichte-basierten räumlichen Clustermethode mit Rauschen (DBSCAN) gruppiert. Dieser Clustering-Schritt ermöglicht den Aufbau eines hierarchischen UI-Baums, der Eltern-Kind-Beziehungen und logische Gruppierungen zwischen den Komponenten erfasst. Diese hierarchische Darstellung bildet die Grundlage für nachfolgende Layout-Analysen und das Verständnis der Benutzeroberfläche. Abbildung 2 veranschaulicht den Komponentenerkennungsprozess mittels Faster R-CNN auf einem mobilen Benutzeroberflächenbildschirm. Die Eingabeschnittstelle (links) enthält Benutzeroberflächenelemente wie Schaltflächen und Textblöcke, die automatisch in Begrenzungsboxen eingeschlossen sind. Diese erkannten Bereiche werden anschließend in Komponentenkategorien klassifiziert (z. B. Schaltfläche und Text), wie durch beschriftete Verbindungen angezeigt. Das Faster R-CNN-Erkennungsmodul (rechts) verfeinert die Koordinaten der Begrenzungsboxen, weist semantische Beschriftungen zu und gibt strukturierte, komponentenbasierte Informationen aus. Dieser Schritt stellt eine entscheidende Grundlage für nachgelagerte Prozesse dar, wie die Layout-Extraktion, kognitive Optimierung und die Generierung von UI-Prototypen, indem er genaue, semantisch aussagekräftige Darstellungen der UI-Komponenten bereitstellt.

Abbildung 2. Erkennung von Komponenten der Benutzeroberflächenelemente mithilfe von Faster R-CNN. Die Abbildung veranschaulicht die Erkennung von UI-Komponenten aus einem Eingabebildschirm der Benutzeroberfläche. Interessierende Bereiche werden mithilfe von Begrenzungsrahmen identifiziert, und Elemente wie Schaltflächen und Textfelder werden mit Faster R-CNN klassifiziert. Pfeile zeigen die Zuordnung der erkannten Komponenten zu ihren entsprechenden semantischen Bezeichnungen an. Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Extraktion von Layout-Mustern und hierarchische Modellierung

Nach der Komponentenerkennung mithilfe von Faster R-CNN wird jedes Benutzeroberflächenelement (UI-Element) durch eine umgebende Box repräsentiert. Allein diese umgebenden Boxen vermitteln jedoch nicht, wie die Elemente innerhalb der Benutzeroberfläche strukturell organisiert sind, beispielsweise welche Elemente zu Kopfzeilen, Navigationsleisten oder gruppierten Inhaltsbereichen gehören. Um diese Einschränkung zu beheben, werden die erkannten Komponenten in einen logischen UI-Baum umgewandelt, wobei jede Komponente als Knoten betrachtet wird und funktional oder visuell verwandte Komponenten unter gemeinsamen übergeordneten Knoten zusammengefasst werden. Um sinnvolle Layoutgruppen zu identifizieren, werden Clusterverfahren wie DBSCAN oder hierarchisches agglomeratives Clustering angewendet. Diese Methoden analysieren räumliche Nähe und Ausrichtungsmuster zwischen den Komponenten, um Beziehungen zwischen UI-Elementen zu erkennen. Analog zu menschlichen Gestaltungspraktiken lernt das System, häufige strukturelle Muster wie Kopf- und Fußzeilen, Raster sowie Inhaltsblöcke zu erkennen. Sobald die Gruppierung festgelegt ist, werden zusätzliche strukturelle Eigenschaften – einschließlich Ausrichtung, Rasteranordnung und Lesereihenfolge – analysiert, um eine umfassende Layoutdarstellung zu erstellen. Beispielsweise können gleich breite, nebeneinander angeordnete Komponenten auf ein Karten-basiertes Layout hindeuten, während vertikal gestapelte Elemente auf eine formular- oder feedbasierte Benutzeroberfläche schließen lassen. Durch die Integration von Clustering, räumlichem Schlussfolgern und Ausrichtungsregeln erstellt das Framework einen hierarchischen UI-Baum, der sowohl visuelle Gruppierungen als auch funktionale Beziehungen erfasst. Diese hierarchische Darstellung bildet die Grundlage für nachfolgende Layout-Verbesserungen und die Modellierung der Konsistenz über mehrere Bildschirme hinweg und ermöglicht es dem System, strukturierte, kohärente und benutzerzentrierte Benutzeroberflächendesigns zu generieren.

Detaillierte Formulierungen für räumliche Distanz und Alignmentsimilarität sind in Supplementary File 1 enthalten.

Clustering zur Layout-Gruppierung (DBSCAN)

Zur Identifizierung von Layout-Gruppen wird DBSCAN angewendet. DBSCAN verwendet zwei Parameter: (1) ε = maximale Distanz zwischen benachbarten Komponenten und (2) = minimale Anzahl an Komponenten, die erforderlich ist, um einen Cluster zu bilden. Für diese Analyse wurden die DBSCAN-Parameter empirisch basierend auf der normalisierten UI-Auflösung (480 × 800 Pixel) ausgewählt. Der Nachbarschaftsabstandsparameter wurde auf ε = 50 Pixel festgelegt, um die räumliche Nähe zwischen benachbarten UI-Komponenten zu erfassen. Die minimale Anzahl an Punkten, die zur Bildung eines Clusters erforderlich ist, wurde auf MinPts = 3 gesetzt, um die Bildung unbedeutender oder zufälliger Gruppen von UI-Komponenten zu vermeiden.

Die detaillierte logische Formulierung der UI-Baumkonstruktion ist in Zusatzdatei 1 enthalten.

Wahrnehmungsbezogene Farbmodellierung mit CAM02-UCS

Das perzeptive Farbmodell stellt sicher, dass in der generierten Benutzeroberfläche verwendete Farben harmonisch, gut lesbar und kognitiv effizient sind. Dominante Farben werden mithilfe von Clusterverfahren aus Eingabequellen wie UI-Bildern extrahiert. Konkret wird K-Means-Clustering mit K-Means++-Initialisierung über 300 Iterationen angewendet, um repräsentative Farbpaletten zu erhalten. Der RGB-Farbraum spiegelt jedoch die menschliche visuelle Wahrnehmung nicht genau wider, sodass numerisch ähnliche Farben wahrnehmungsmäßig unterschiedlich erscheinen können. Um diese Einschränkung zu beheben, werden alle extrahierten Farben in den CAM02-UCS-Farbraum transformiert, der wahrnehmungsmäßig uniform ist. In diesem Raum entsprechen gleiche Distanzen gleichen wahrgenommenen Farbunterschieden, was ihn geeignet für die Modellierung von Farbharmonie und Kontrast macht. Sobald die Farben in CAM02-UCS abgebildet sind, werden perzeptive Farbunterschiede mittels euklidischer Distanz berechnet, wodurch das System Kontrast, Harmonie und Variation zwischen Farben quantifizieren kann. Zu ähnliche Farben werden auseinandergezogen, um die Lesbarkeit zu verbessern, während übermäßig kontrastreiche Farben abgemildert werden, um visuelle Unannehmlichkeiten zu vermeiden. Die generierte Palette erfüllt außerdem Barrierefreiheitsstandards wie WCAG AA und AAA, um ausreichenden Kontrast zwischen Vorder- und Hintergrundelementen sicherzustellen. Außerdem wird Farbharmonie durch Beschränkung der Palettenbeziehungen auf komplementäre, analoge oder triadische Schemata erzwungen, abhängig vom vorgesehenen UI-Thema. Dadurch ist die resultierende Farbpalette nicht nur optisch ansprechend, sondern auch funktional zugänglich und kognitiv optimiert. Zur weiteren Verfeinerung der Palette wird ein Optimierungsprozess unter Berücksichtigung der Zwänge perzeptiver Ähnlichkeit, Kontrast, Harmonie und Markenkonsistenz angewendet. Eine Primärfarbe wird ausgewählt (z. B. aus der Markenidentität), und Sekundärfarben werden hinsichtlich Helligkeit und Chroma angepasst, um die visuelle Hierarchie zu bewahren. Ein regelbasiertes Evaluationsverfahren bewertet Kandidatenpaletten anhand perzeptiver Distanzen und Barrierefreiheitsmetriken, um kognitive Belastung zu minimieren und gleichzeitig ästhetisches Gleichgewicht zu wahren. Dadurch erzeugt das Framework Farbschemata für Benutzeroberflächen, die professionelle Kohärenz, Lesbarkeit und perzeptive Konsistenz aufweisen.

Detaillierte mathematische Ausdrücke für die CAM02-UCS-basierte wahrnehmungsbezogene Farbmodellierung sind in Zusatzdatei 1 enthalten.

Algorithmus S2 (Zusatzdatei 1) beschreibt den CAM02-UCS-basierten Workflow zur wahrnehmungsgerechten Extraktion und Optimierung von Farben unter Berücksichtigung von Harmonie- und Zugänglichkeitsanforderungen. Zunächst werden dominante Farben aus dem Eingabebild extrahiert und in den CAM02-UCS-Farbraum transformiert, um sicherzustellen, dass Farbunterschiede der menschlichen Wahrnehmung entsprechen. Anschließend werden die wahrnehmbaren Abstände zwischen den Farben berechnet und innerhalb vordefinierter Grenzen eingeschränkt, um sowohl Klarheit als auch Harmonie zu gewährleisten. Danach wird die Zugänglichkeit durch die Bewertung der Leuchtdichtekontrastverhältnisse gemäß den WCAG-Richtlinien sichergestellt. Die endgültige Farbpalette ergibt sich aus der Optimierung einer kombinierten Zielfunktion, die den wahrnehmungsgerechten Abstand, die Kontrastanforderungen und die Farbharmoniebedingungen ausbalanciert. Dadurch wird sichergestellt, dass die generierten Benutzeroberflächen-Farbschemata nicht nur visuell ansprechend, sondern auch lesbar, zugänglich und wahrnehmungsmäßig konsistent sind.

Kognitive Designoptimierung

Die kognitive Designoptimierung stellt sicher, dass die automatisch generierten UI-Prototypen nicht nur visuell konsistent, sondern auch leicht verständlich und benutzerfreundlich sind. Dieses Modul integriert zentrale Prinzipien des kognitiven Designs, darunter die Gestaltgesetze, das Fitts’sche Gesetz und das Hick’sche Gesetz, um die Anordnung, Gruppierung und den Abstand der UI-Komponenten zu steuern. Ausführliche mathematische Formulierungen zur kognitiven Designoptimierung finden sich in Supplementary File 1.

Integriertes kognitives Optimierungsziel

Der mathematische Ausdruck für das integrierte kognitive Optimierungsziel wird angegeben in Zusatzdatei 1. Die Koeffizienten, die die Bedeutung der visuellen Gruppierung, der Interaktions-Effizienz und der Entscheidungskomplexität repräsentieren, werden mit alpha, beta bzw. gamma bezeichnet. In dieser Studie wurden die Werte von alpha, beta und gamma empirisch anhand des Validierungsdatensatzes bestimmt. Für das vorliegende Experiment wurden die Koeffizienten wie folgt festgelegt: α = 0.5, β = 0,3 und γ = 0,2. Diese Konfiguration bietet ein effektives Gleichgewicht zwischen visueller Gruppierung, Interaktions-Effizienz und Entscheidungseinfachheit.

Konsistenz über mehrere Bildschirme hinweg und Erstellung der Benutzeroberfläche

Das Multiscreen-Konsistenzmodell gewährleistet, dass verschiedene Bildschirme innerhalb einer Anwendung eine kohärente visuelle Identität, eine einheitliche Struktur und ähnliche Interaktionsmuster aufweisen. Während Nutzer zwischen Bildschirmen navigieren, bilden sie Erwartungen hinsichtlich der Platzierung von Elementen, der Typografie, des Abstands und der visuellen Hierarchie. Um diesen Erwartungen gerecht zu werden, analysiert das System Muster über mehrere Bildschirme hinweg anhand von Vorlagen, die aus den Datensätzen RICO und ENRICO abgeleitet sind. Diese Vorlagen erfassen gängige Benutzeroberflächenstrukturen wie Startseite–Detail-Anordnungen, Listen–Detail-Muster, mehrstufige Formulare und Dashboard-Flows. Durch den Vergleich von Komponentenplatzierungen und Gruppierungsverhalten erstellt das System ein strukturelles Profil über alle Bildschirme hinweg, das identifiziert, welche Elemente konsistent bleiben sollten und welche variieren dürfen. Sobald die strukturellen Muster erkannt sind, setzt das Framework Konsistenz bei Typografieskalen, Abstandsverhältnissen, Rasterlayouts und Navigationsankern um. Beispielsweise behalten Kopfleisten eine einheitliche Höhe, primäre Schaltflächen eine gleichbleibende Größe und Ausrichtung, und Inhaltsblöcke folgen einer vorhersagbaren visuellen Reihenfolge. Dies wird durch einen Layout-Regularisierungsprozess erreicht, der jeden Bildschirm anhand globaler struktureller Vorgaben überprüft. Weicht ein Bildschirm von den erlernten Vorlagen ab – etwa durch inkonsistente Auffüllung oder falsch ausgerichtete Überschriften –, passt das System das Layout automatisch an, um die Kohärenz wiederherzustellen. Solche Korrekturen tragen dazu bei, ein nahtloses Nutzererlebnis sicherzustellen und kognitive Umschaltkosten zwischen Bildschirmen zu verringern. Das Framework analysiert außerdem den Navigationsgraphen zwischen den Bildschirmen, um die Konsistenz des Interaktionsablaufs zu wahren. Gängige Navigationsmuster wie Vorwärts-/Rückwärts-Übergänge, Registerkartennavigation und mehrstufige Arbeitsabläufe werden erkannt und durchgesetzt. Jeder Übergang wird überprüft, um sicherzustellen, dass er mit dem mentalen Modell des Nutzers übereinstimmt, wodurch die Benutzbarkeit verbessert und Verwirrung reduziert wird. Infolgedessen minimiert das Multiscreen-Konsistenzmodell visuelle Störungen, erhöht die Vertrautheit und fördert ein einheitliches Interaktionserlebnis.

Detaillierte mathematische Formulierungen zur Konsistenz mehrerer Bildschirme und zur Benutzeroberflächengenerierung sind in Supplementary File 1 enthalten.

Schließlich erzeugt die Render-Engine visuelle Ausgaben in Formaten wie SVG-Konturmodellen, HTML/CSS-Prototypen oder pixelbasierten UI-Entwürfen. Die resultierenden Benutzeroberflächen verfügen über eine korrekte Lesereihenfolge, harmonische Farbbeziehungen, präzise Rasterausrichtung und eine konsistente visuelle Hierarchie über mehrere Bildschirme hinweg.

Algorithmus S3 bietet den Workflow zur kognitiv-visuellen Layout-Optimierung und zur konsistenten Gestaltung über mehrere Bildschirme hinweg (Zusatzdatei 1). Algorithmus S3 beschreibt den integrierten Prozess der kognitiven und strukturellen Optimierung, der zur Erstellung benutzerfreundlicher Benutzeroberflächen-Layouts verwendet wird. Er kombiniert Wahrnehmungsgruppierung (Gestaltgesetze), Interaktions-Effizienz (Fitts’sches Gesetz) und Entscheidungs-Einfachheit (Hick’sches Gesetz) innerhalb eines einheitlichen Optimierungsrahmens. Zunächst werden die räumlichen Beziehungen zwischen den Komponenten bewertet, um Wahrnehmungsgruppen zu bilden. Anschließend wird die Interaktions-Effizienz durch Anpassung der Größe und Position der Komponenten optimiert, während die Entscheidungskomplexität durch Begrenzung der Anzahl an Benutzern präsentierten Optionen kontrolliert wird. Zusätzlich stellt der Algorithmus eine konsistente Gestaltung über mehrere Bildschirme sicher, indem jeder Bildschirm anhand erlernter Layout-Vorlagen ausgerichtet wird, wodurch Einheitlichkeit in Typografie, Abständen und struktureller Organisation gewährleistet ist. Eine multikriterielle Optimierungsfunktion verfeinert anschließend das Layout, indem sie Ausrichtung, Abstände und kognitiven Aufwand ausbalanciert, was zu einer Benutzeroberfläche führt, die sowohl visuell stimmig als auch kognitiv effizient ist. Insgesamt gewährleistet dieser Algorithmus, dass die generierten mehrseitigen Layouts ein hohes Maß an visueller Konsistenz, Benutzbarkeit und Wahrnehmungsklarheit aufweisen.

Ergebnisse

Der vorgeschlagene automatisierte UI-Prototyping-Rahmen wurde anhand eines integrierten Datensatzes von 5.128 UI-Bildschirmen aus drei Quellen bewertet: 4.000 RICO-Bilder, 1.000 ENRICO-Bildschirme und 128 farblich annotierte UI-Beispiele aus Guos UI-Farbdatensatz. Dieser gemischte Datensatz bietet eine gut ausbalancierte Benchmark zur Bewertung der Genauigkeit der Komponentenerkennung, der Klarheit der Layout-Struktur, der Konsistenz über mehrere Bildschirme hinweg und der wahrnehmbaren Farbharmonie.

Experimentelle Ergebnisse zeigen, dass das auf Faster R-CNN basierende Erkennungsmodell eine Komponentenerkennungsgenauigkeit von 92,4 % erreicht und effektiv auf unterschiedliche mobile UI-Stile verallgemeinert. Darüber hinaus verbessert die Einbindung von ENRICO-Musterannotationen die Layout-Interpretation, was zu einer Steigerung der Layout-Klarheit um 18,7 % und einer besseren Wahrung der Lesereihenfolge führt. In Farbevaluierungsexperimenten erzeugt das auf CAM02-UCS basierende Farbmodellpaletten, die laut Bewertung durch Designer um 24,5 % harmonischer sind, und weist im Vergleich zu herkömmlichen, auf RGB und LAB basierenden Verfahren zur Palettenerzeugung eine höhere wahrgenommene Gleichförmigkeit auf. Zudem erzielt die Modellierung der Mehrfachbildschirmkonsistenz eine Verbesserung der Übereinstimmung zwischen Bildschirmen und der typografischen Konsistenz um 28 %. Benutzerstudien mit 30 Teilnehmern zeigen eine um 31 % verringerte wahrgenommene kognitive Belastung beim Umgang mit Prototypen, die mit dem vorgeschlagenen System erstellt wurden. Insgesamt deuten diese Ergebnisse darauf hin, dass die Kombination aus Komponentenerkennung, wahrnehmungsbasierter Farbmodellierung und kognitiver Optimierung UI-Prototypen hervorbringt, die nicht nur strukturell genau, sondern auch visuell kohärent und kognitiv effizient sind. Tabelle 3 zeigt die Simulationsumgebung und technischen Einstellungen, die zur Bewertung des vorgeschlagenen UI-Prototyping-Frameworks verwendet wurden. Die rechenintensiven Trainingsverfahren von Faster R-CNN und den Layoutkonsistenzmodulen wurden durch eine leistungsstarke NVIDIA RTX 4090-GPU unterstützt. Alle Experimente wurden in einer Ubuntu-22.04-Umgebung unter Verwendung von PyTorch 2.0 für die Implementierung des Deep Learnings durchgeführt.

Parameter	Konfiguration
Hardware	NVIDIA RTX 4090 GPU (24 GB), Intel i9-Prozessor, 64 GB RAM
Betriebssystem	Ubuntu 22.04 LTS
Tiefenlern-Framework	PyTorch 2.0
Faster-R-CNN-Backbone	ResNet-50 + FPN
Bildauflösung	480 × 800 (über alle Datensätze hinweg normalisiert)
Trainings-Batch-Größe	8
Optimierer	AdamW (LR = 1e−4, Weight Decay = 0.01)
Epochen	40
Farbmodellraum	CAM02-UCS
Clustering zur Palettenextraktion	K-Means (k = 5)
Layout-Clustering	DBSCAN (ε = 20, min_samples = 3)

Tabelle 3: Implementierungsparameter und experimentelle Konfiguration des vorgeschlagenen Frameworks. Die Tabelle fasst die verwendete Hardware- und Softwarekonfiguration für das Training und die Bewertung des Modells zusammen, einschließlich der Rechenressourcen, des Betriebssystems, des Deep-Learning-Frameworks, der Modellarchitektur, der Bildauflösung, der Trainingsparameter, der Optimierungsstrategie, des Farbmodellraums sowie der Clustering-Methoden, die für die Extraktion der Farbpalette und die Gruppierung des Layouts verwendet wurden.

Die Faster-R-CNN-Architektur verwendet einen ResNet-50-Backbone mit einem FPN, um eine breite Palette feinkörniger UI-Komponenten zu erkennen. Alle UI-Bilder werden vor der Verarbeitung einheitlich auf 480 × 800 Pixel skaliert. Das Training erfolgt über 60 Epochen mithilfe des SGD-Optimierers bei einer Batch-Größe von 16, um eine stabile Konvergenz sicherzustellen. Der Farbpalette-Generator nutzt CAM02-UCS in Kombination mit K-Means-Clustering, während DBSCAN für das strukturelle Layout-Clustering eingesetzt wird. Diese technischen Einstellungen gewährleisten, dass die generierten UI-Ergebnisse reproduzierbar, stabil und hochgenau sind. Um eine umfassende Bewertung des vorgeschlagenen automatisierten UI-Prototyping-Frameworks zu ermöglichen, werden vier Kategorien von Evaluierungsmetriken verwendet:

i) Leistung bei der Erkennung von Komponenten, analysiert anhand von Präzision, Rückruf, F1-Score, Intersection-over-Union (IoU) und mittlerer durchschnittlicher Präzision (mAP), die die Genauigkeit des Faster R-CNN-Modells bei der Identifizierung von UI-Komponenten in den Datensätzen RICO und ENRICO quantifizieren;

ii) Klarheit des Layouts und strukturelle Konsistenz, gemessen anhand von Ausrichtungsfehlern (AE), Gruppierungsgenauigkeit, Korrektheit der Lesereihenfolge und Querbildschirm-Konsistenzwerten, die sich aus Designmuster-Restriktionen ergeben;

iii) Wahrnehmungsbezogene Farbqualität, bewertet anhand des CAM02-UCS-Wahrnehmungsabstands (ΔE_UCS), der WCAG-2.1-Kontrastverhältnisse, des Diversitätsindex und der Farbharmonie-Scores, inspiriert vom UI-Farbbewertungsrahmen von Guo;

iv) Nutzerzentrierte kognitive Effizienzmetriken, einschließlich kognitiver Belastung, gemessen mit dem NASA-Arbeitsbelastungsindex (NASA-TLX), Bewertungen der ästhetischen Kohärenz und der Effizienz bei der Aufgabenerledigung.

Diese Metriken ermöglichen die Bewertung des Frameworks nicht nur hinsichtlich der Erkennungsgenauigkeit, sondern auch im Hinblick auf die wahrgenommene Harmonie, die Nutzungsgüte und die kognitive Erfahrung.

Metriken zur Komponentenerkennung

Präzision beschreibt die Genauigkeit des Modells bei der Vorhersage von UI-Komponenten, ohne falsch positive Ergebnisse zu erzeugen. Hohe Präzision bedeutet, dass die meisten vorhergesagten Begrenzungsrahmen gültigen UI-Elementen entsprechen. Der Rückruf misst die Fähigkeit des Modells, alle relevanten UI-Komponenten auf einem Bildschirm zu identifizieren. Ein hoher Rückrufwert zeigt an, dass das Modell die meisten tatsächlichen Komponenten erfolgreich erkennt. Der F1-Wert, definiert als das harmonische Mittel aus Präzision und Rückruf, liefert eine ausgewogene Bewertung und ist besonders nützlich, wenn UI-Komponenten ungleichmäßig über die Datensätze verteilt sind.

Das IoU-Maß quantifiziert, wie stark die vorhergesagte Begrenzungsbox mit der tatsächlichen Begrenzungsbox überlappt. Bei Objekterkennungsaufgaben werden IoU-Schwellenwerte von 0,5 und 0,75 üblicherweise verwendet, um moderate bzw. strenge Evaluierungsbedingungen darzustellen. Der mAP-Wert fasst die Erkennungsleistung über mehrere IoU-Schwellenwerte hinweg zusammen. Der mAP@0,5:0,95-Wert ermöglicht durch Mittelung der Präzision über Schwellenwerte von 0,5 bis 0,95 in Schritten von 0,05 eine robustere Bewertung und gilt daher weithin als Standardbenchmark für die Objekterkennung.

Die Erkennungsergebnisse über die drei Datensätze hinweg zeigen, dass das vorgeschlagene Modul zur Komponentenerkennung durchweg gut abschneidet. Die quantitativen Ergebnisse sind in Tabelle 4 dargestellt. Der RICO-Datensatz erzielt die höchste Leistung mit einer Präzision von 0,91, einem Recall von 0,88 und einem F1-Score von 0,89, was auf die umfangreiche und vielfältige Sammlung an UI-Komponentenannotationen zurückzuführen ist. ENRICO weist leicht niedrigere Werte auf, bedingt durch die vereinfachte Struktur und die geringere Anzahl annotierter Komponententypen. Der Guo-Datensatz verzeichnet den niedrigsten F1-Score (0,81), vermutlich aufgrund stärkerer visueller Variationen und weniger standardisierter Layoutmuster, was die Erkennung erschwert. Insgesamt bestätigen diese Ergebnisse, dass das Modell eine robuste Leistung bei der Erkennung von Komponenten über verschiedene UI-Designstile und Datensatzmerkmale hinweg aufrechterhält.

Datensatz	Präzision	Recall	F1-Score
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tabelle 4: Leistung bei der Erkennung von Komponenten über verschiedene Datensätze hinweg. Die Tabelle zeigt Präzision, Rückruf und F1-Score für die Erkennung von UI-Komponenten in den Datensätzen RICO, ENRICO und Guo und demonstriert die Effektivität des Erkennungsmodells.

Abbildung 3 zeigt die Leistung des Modells über die Datensätze RICO, ENRICO und Guo bei IoU-Schwellenwerten von 0,5 und 0,75. Wie erwartet sind die mAP-Werte bei IoU 0,5 aufgrund der weniger strengen Überlappungsanforderung höher. RICO weist durchgängig die höchsten mAP-Werte auf (0,89 bei IoU 0,5 und 0,78 bei IoU 0,75), was die Reichhaltigkeit und Kohärenz seiner Annotationen widerspiegelt. ENRICO zeigt leicht niedrigere Werte, während Guo die niedrigsten Werte aufweist, bedingt durch eine größere Variation im Layoutstil und in der Komponentendichte. Der abnehmende Trend bei strengeren IoU-Schwellenwerten verdeutlicht, dass die Komplexität des Datensatzes die Robustheit der Erkennung direkt beeinflusst.

Abbildung 3. Mittlere durchschnittliche Präzision (mAP) bei Intersection-over-Union-(IoU-)Schwellenwerten von 0,5 und 0,75 über verschiedene Datensätze hinweg. Das Liniendiagramm vergleicht die Leistung der Komponentenerkennung über die Datensätze RICO, ENRICO und Guo hinweg. Die x-Achse stellt die Datensätze dar, und die y-Achse zeigt die mAP-Werte. Zwei Kurven entsprechen den IoU-Schwellenwerten von 0,5 und 0,75 und veranschaulichen die Leistungsunterschiede unter verschiedenen Strengegraden der Erkennung. Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Abbildung 4 zeigt den mAP@IoU(0,5:0,95) für jeden Datensatz und ermöglicht eine umfassendere Bewertung der Erkennungsleistung über zehn IoU-Schwellenwerte hinweg. Die Ergebnisse zeigen einen deutlichen absteigenden Trend von RICO (0,61) über ENRICO (0,57) bis hin zu Guo (0,52), was bestätigt, dass das vorgeschlagene Erkennungsmodell auf größeren und strukturierteren Datensätzen am besten generalisiert. Dieser strengere, gemittelte Metrikwert verdeutlicht subtile Leistungseinbußen, die bei einer Auswertung mit einzelnen Schwellenwerten möglicherweise nicht offensichtlich sind. Diese Befunde deuten darauf hin, dass, obwohl das Modell bei allen Datensätzen gut abschneidet, eine größere Layoutvielfalt und Komponentenvariabilität zusätzliche Herausforderungen bei einer strengen COCO-artigen Auswertung mit sich bringen. Die Erkennungsergebnisse sind in Abbildungen 3 und 4 dargestellt, die quantitative Vergleiche des mAP auf verschiedenen IoU-Stufen bieten.

Abbildung 4. Mittlere durchschnittliche Präzision (mAP) gemittelt über Intersection-over-Union-Schwellenwerte (IoU) von 0,5 bis 0,95 über verschiedene Datensätze hinweg. Das Liniendiagramm zeigt die Leistung der Komponentenerkennung für die Datensätze RICO, ENRICO und Guo, gemessen anhand des mAP-Werts, der über IoU-Schwellenwerte von 0,5 bis 0,95 gemittelt wurde. Die x-Achse stellt die Datensätze dar, und die y-Achse gibt die entsprechenden mAP-Werte auf einer Skala von 0–1 an, was die Modellleistung unter variierenden Erkennungsschwellen widerspiegelt. Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Metriken zur Layout-Qualität

Die Layout-Qualität wird anhand von AE, der Gruppierungsgenauigkeit (GA) und der Genauigkeit der Lesereihenfolge (ROA) bewertet, die gemeinsam die strukturelle Korrektheit, die wahrnehmungsbezogene Organisation sowie die kognitive Lesbarkeit der generierten Benutzeroberflächenlayouts beurteilen.

Ausrichtungsfehler.

AE (pixelbasierte Abweichung) zeigt an, wie gut Benutzeroberflächenelemente mit idealen Ausrichtungslinien wie linken, rechten, oberen oder Baseline-Hilfslinien übereinstimmen. Eine niedrigere AE weist darauf hin, dass Elemente konsistent angeordnet sind und minimale visuelle Verzerrungen aufweisen, was die Lesbarkeit und die Gesamtklarheit des Designs verbessert. Dieses Maß ist besonders wichtig für die Bewertung der kognitiven Layout-Optimierung, da Fehlausrichtungen den visuellen Fluss stören und die wahrgenommene Komplexität erhöhen. Abbildung 5 veranschaulicht die AE über die Datensätze RICO, ENRICO und Guo hinweg, gemessen als durchschnittliche Pixelabweichung von idealen Ausrichtungslinien. Die Ergebnisse zeigen, dass RICO die niedrigste AE (4,2 px) erreicht, was darauf hindeutet, dass die UI-Komponenten in diesem Datensatz konsistentere strukturelle Muster aufweisen und die Ausrichtung für das Modell erleichtern. ENRICO folgt mit einer moderaten Ausrichtungsabweichung von 6,1 px, was eine Kombination aus gut strukturierten und variierenden Bildschirm-Layouts widerspiegelt. Der Guo-Datensatz weist die höchste AE (7,4 px) auf, bedingt durch eine größere Vielfalt in der Komponentenplatzierung und nicht standardisierte Layoutstrukturen, die die ausrichtungsbasierte Optimierung erschweren. Insgesamt zeigen diese Ergebnisse, dass das Modell trotz zunehmender Layout-Komplexität eine hohe Genauigkeit bei der Ausrichtung über alle Datensätze hinweg beibehält.

Abbildung 5. Ausrichtungsfehler über verschiedene Datensätze hinweg. Die Abbildung zeigt den Ausrichtungsfehler über verschiedene Datensätze hinweg; niedrigere Werte deuten auf eine bessere Ausrichtung hin. Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Gruppierungsgenauigkeit (GA).

GA quantifiziert, wie effektiv das Modell verwandte UI-Komponenten gruppiert, beispielsweise basierend auf Gestaltpsychologischen Prinzipien wie Nähe, Ähnlichkeit und Kontinuität. Eine höhere Gruppierungsgenauigkeit zeigt an, dass das Modell die beabsichtigte Struktur der Bedienelemente beibehält, wodurch Benutzer die Benutzeroberfläche natürlicher interpretieren können. Diese Metrik ist besonders nützlich, um zu bewerten, ob das Layout-Verbesserungsmodul Inhalte erfolgreich in sinnvolle visuelle Gruppen organisiert. Abbildung 6 zeigt die Verteilung der GA, die durch das vorgeschlagene Framework über die drei Datensätze hinweg erreicht wurde. Der ENRICO-Datensatz weist die höchste mediane GA und die geringste Interquartilspannweite auf, was auf eine stabile und konsistente Gruppierungsleistung aufgrund seiner gut definierten, musterbeschrifteten Layouts hinweist. Der RICO-Datensatz zeigt eine moderate Gruppierungsgenauigkeit mit höherer Variabilität, was wahrscheinlich auf seine größere Vielfalt und Layoutkomplexität zurückzuführen ist. Der Guo UI Color-Datensatz weist eine geringere Gruppierungsgenauigkeit auf, da seine Stichproben visuell heterogen sind und weniger auf die strukturelle Anordnung fokussiert sind. Insgesamt zeigen die Ergebnisse, dass das kognitive Layout-Verbesserungsmodul über verschiedene Datensätze hinweg zuverlässig funktioniert und die beste Gruppierungsleistung bei strukturell konsistenten Daten erzielt.

Abbildung 6. Verteilung der Gruppierungsgenauigkeit über verschiedene Datensätze hinweg. Das Boxplot zeigt die Gruppierungsgenauigkeit basierend auf Gestaltprinzipien über die Datensätze RICO, ENRICO und Guos UI-Farbdatensatz hinweg. Die Kästen repräsentieren den Interquartilsabstand, die mittlere Linie kennzeichnet den Median und die Whisker zeigen die Spannweite der Werte an. Die x-Achse stellt die Datensätze dar und die y-Achse zeigt die Werte der Gruppierungsgenauigkeit. Die Stichprobengröße beträgt n=5128 Benutzeroberflächen (RICO: 4000, ENRICO: 1000 und Guo: 128). Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Genaue Lesereihenfolge (ROA).

Die Genauigkeit der Lesereihenfolge (ROA) misst, wie genau das Modell den natürlichen Lesefluss eines Benutzeroberflächenbildschirms vorhersagt, der in der Regel einem Muster von oben nach unten und von links nach rechts folgt. Die Einhaltung der korrekten Lesereihenfolge ist entscheidend für die Benutzerfreundlichkeit, die Klarheit der Navigation und die Übereinstimmung mit etablierten Gestaltungskonventionen. Eine höhere ROA zeigt an, dass das System erwartete kognitive Scanmuster beibehält. Abbildung 7 zeigt die ROA über verschiedene Evaluierungsstufen hinweg für die Datensätze RICO, ENRICO und Guo. ENRICO erreicht aufgrund seiner regelmäßigen und musterbasierten Layoutstruktur durchgängig die höchste ROA, was eine genauere Vorhersage menschenähnlicher Leseabläufe ermöglicht. RICO zeigt mittelmäßige Leistung mit geringfügigen Schwankungen, was seiner größeren Vielfalt und realitätsnahen Komplexität entspricht. Der Guo-Datensatz weist die niedrigste ROA auf, da viele seiner Bildschirme visuell anspruchsvoll sind, aber keine klar definierten Lesehierarchien aufweisen. Insgesamt zeigen diese Ergebnisse, dass das vorgeschlagene Modul zur kognitiven Layoutverbesserung bei strukturierten Datensätzen am zuverlässigsten arbeitet und gleichzeitig stabile Vorhersagen der Lesereihenfolge über verschiedene UI-Designs hinweg beibehält.

Abbildung 7. Genauigkeit der Lesereihenfolge über verschiedene Evaluierungsstufen hinweg für mehrere Datensätze. Das Liniendiagramm zeigt die Genauigkeit der Lesereihenfolge über die einzelnen Evaluierungsschritte hinweg für die Datensätze RICO, ENRICO und Guos UI Color. Die x-Achse stellt die Evaluierungsstufe dar, die y-Achse gibt die Genauigkeit der Lesereihenfolge an. Jede Kurve entspricht einem Datensatz und veranschaulicht die Veränderungen bei der Beibehaltung des visuellen Flusses über aufeinanderfolgende Evaluierungsstufen. Die Evaluierungsstufe repräsentiert die schrittweisen Verfeinerungsphasen des vorgeschlagenen Frameworks. Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Konsistenzwert des Layouts (LCS)

Die Layout-Konsistenzbewertung (LCS) misst, wie konsistent die generierten Benutzeroberflächen-Layouts über mehrere Bildschirme innerhalb derselben Anwendung hinweg beibehalten werden. Dazu gehören Konsistenz in Abständen, Ausrichtungsregeln, Typografiebereichen und Gruppierungsmustern. Ein höherer Wert zeigt eine verbesserte Kohärenz zwischen Bildschirmen an, was zu einer einheitlicheren und intuitiveren Benutzererfahrung (UX) führt. Abbildung 8 zeigt die LCS-Werte über mehrere Evaluierungsstufen hinweg für die RICO-, ENRICO- und Guos UI-Farbdatensätze. Der ENRICO-Datensatz erreicht aufgrund seiner musterbeschrifteten und strukturell einheitlichen Benutzeroberflächenbildschirme durchgängig die höchsten LCS-Werte, wodurch ein stabileres Lernen der Konsistenz zwischen Bildschirmen ermöglicht wird. Im Gegensatz dazu zeigt der RICO-Datensatz eine moderate, aber stetig zunehmende Konsistenz, was auf die Fähigkeit des Modells zurückzuführen ist, über stark unterschiedliche Benutzeroberflächen-Layouts hinweg zu verallgemeinern. Wie erwartet weist der Guo-Datensatz die niedrigsten LCS-Werte auf, da er hauptsächlich auf Farbmerkmale und nicht auf strukturelle Layouts ausgerichtet ist, wodurch die Konsistenz über mehrere Bildschirme hinweg schwieriger wird. Insgesamt zeigen diese Ergebnisse, dass das vorgeschlagene Modul zur Konsistenz zwischen Bildschirmen am effektivsten bei musterbasierten Datensätzen arbeitet, gleichzeitig aber messbare Verbesserungen über alle Datensätze hinweg erzielt.

Abbildung 8. Layout-Konsistenzwert über die Bewertungsstufen hinweg für mehrere Datensätze. Das Liniendiagramm zeigt die Layout-Konsistenzwerte über die Bewertungsstufen für die Datensätze RICO, ENRICO und Guo’s UI Color an. Die x-Achse stellt die Bewertungsstufe dar und die y-Achse gibt die Layout-Konsistenzwerte an. Jede Kurve entspricht einem Datensatz und veranschaulicht die Verbesserung der strukturellen Kohärenz der generierten Benutzeroberflächen über aufeinanderfolgende Bewertungsstufen hinweg. Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Metriken zur Farbqualität

Die generierten UI-Farbthemen werden anhand von fünf wahrnehmungsbezogenen Metriken bewertet, die aus CAM02-UCS abgeleitet sind: ΔE (wahrnehmbare Farbdifferenz), das die wahrnehmungsmäßige Gleichförmigkeit zwischen den Farbpalette-Tönen quantifiziert; das Kontrastverhältnis (basierend auf WCAG 2.1), das die Lesbarkeit zwischen Vorder- und Hintergrundelementen beurteilt; der Farbharmonieindex (CHI), der die ästhetische Verträglichkeit zwischen Farbtönen misst; die Farbvielfaltskala (CDS), die die Variation innerhalb des wahrnehmbaren Farbraums widerspiegelt; und die Farbhervorhebungsskala (CPS), die das Gleichgewicht und die Dominanz von Farben innerhalb der Palette bewertet. Zusammen liefern diese Metriken eine umfassende Bewertung sowohl der ästhetischen Qualität als auch der gebrauchstauglichkeitsorientierten Farbgestaltung. Die Ergebnisse zeigen, dass die vorgeschlagene Methode einen niedrigeren ΔE-Wert von 4,12 erreicht, was auf eine verbesserte wahrnehmungsmäßige Gleichförmigkeit der Farben hinweist. Ein Kontrastverhältnis von 6,21 bestätigt die Einhaltung der Barrierefreiheitsstandards und gewährleistet eine verbesserte Lesbarkeit. Tabelle 5 zeigt einen quantitativen Vergleich zwischen dem vorgeschlagenen Farbmodellierungsmodul und den Baseline-Methoden. Der CHI steigt von 0,61 auf 0,83, was auf eine verbesserte ästhetische Kohärenz bei Farbüberleitungen hindeutet. Zudem erhöht sich die CDS um über 50 %, was zeigt, dass die generierten Paletten eine reichere Variation beibehalten, ohne visuelle Unübersichtlichkeit zu erzeugen. Höhere CPS-Werte deuten auf eine ausgewogene Verteilung dominanter Farben hin und verhindern eine Übersättigung durch einen einzelnen Farbton. Insgesamt belegen diese Ergebnisse die Wirksamkeit des auf CAM02-UCS basierenden Farbmodellierungsmoduls bei der Erzeugung harmonischer, lesbarer und wahrnehmungsoptimierter UI-Farbschemata.

Metrisch	Definition	Vorgeschlagene Methode	Grundlinie1	Verbesserung (%)
ΔE (CAM02-UCS)	Wahrnehmbarer Farbunterschied	4.12	7.85	47,5 % niedriger
Kontrastverhältnis (WCAG)	Lesbarkeit von FG–BG-Paaren	6.21	4.38	41.80%
CHI (Farbharmonieindex)	Farbton & chroma harmony	0.83	0.61	36.10%
CDS (Farbvielfaltscore)	Varianz in J′a′b′ Platz	18.70	12.40	50.80%
CPS (Farbhervorhebungs-Score)	Stabilität der dominierenden Farben	0.72	0.55	30.90%

Tabelle 5: Quantitativer Vergleich von Farbqualitätsmetriken zwischen der vorgeschlagenen und den Baseline-Methoden. Die Tabelle zeigt Evaluationsmetriken für die Farbqualität, einschließlich der wahrnehmungsbasierten Farbdifferenz (ΔE in CAM02-UCS), des Kontrastverhältnisses (WCAG), des Farbharmonie-Index (CHI), der Farbvielfalt (CDS) und der Farbhervorhebung (CPS). Die Ergebnisse der vorgeschlagenen Methode werden mit den Baseline-Werten verglichen, ergänzt um die prozentualen Verbesserungen.

Teilnehmerdemografie und Studiendesign

Insgesamt nahmen 30 Teilnehmer am Bewertungsprozess teil. Die Teilnehmer waren zwischen 20 und 35 Jahren alt (mittleres Alter: 26,4 ± 3,2 Jahre). Die Kohorte umfasste Personen mit unterschiedlichem Hintergrund, darunter Softwareentwickler, Studierende und UI/UX-Designer. Basierend auf selbstberichteter Computerkenntnis wurden 40 % der Teilnehmer als fortgeschrittene Anwender eingestuft, 35 % als erfahrene Anwender und 25 % als Anfänger. Etwa die Hälfte der Teilnehmer hatte bereits Erfahrung in UI/UX-Design oder verwandten Bereichen, während die übrigen Teilnehmer keine solche Erfahrung besaßen. Diese Vielfalt gewährleistete eine ausgewogene Bewertung über verschiedene Stufen technischer Fachkenntnisse und Gestaltungsvertrautheit hinweg.

Metriken für Benutzerstudien

Die nutzerzentrierte Evaluation wurde anhand mehrerer Metriken durchgeführt, darunter NASA-TLX, System Usability Scale (SUS), Aesthetic Harmony Score (AHS), Search Efficiency Time (SET) und Cross-Screen Consistency Rating (CSCR), um kognitive Belastung, Benutzbarkeit, visuelle Attraktivität, Effizienz und Konsistenz zu bewerten.

Der NASA-TLX-Wert quantifiziert die mentale Belastung, indem er Faktoren wie mentale Anforderung, Aufwand und Frustration misst. Niedrigere Werte deuten auf eine reduzierte kognitive Belastung und eine verbesserte Interaktionsleichtigkeit hin. Der vorgeschlagene Ansatz führte durchgängig zu niedrigeren NASA-TLX-Werten in allen Datensätzen, was auf einen geringeren mentalen Aufwand hindeutet. Diese Verbesserung ist auf die Integration kognitiver Gestaltungsprinzipien zurückzuführen, darunter Gestalt-Gruppierung, optimierte Abstände und eine verbesserte visuelle Hierarchie, die gemeinsam eine intuitivere Navigation ermöglichen. Der SUS-Wert liefert eine standardisierte Gebrauchstauglichkeitsbewertung im Bereich von 0 bis 100, wobei höhere Werte auf verbesserte Benutzerfreundlichkeit und Klarheit hindeuten. Der vorgeschlagene Ansatz erzielte im Vergleich zu Baseline-Methoden höhere SUS-Werte, was Verbesserungen in der strukturellen Anordnung und Farbklarheit widerspiegelt. Verbesserte Ausrichtung, Abstände und Navigationsfluss trugen dazu bei, dass Benutzer die Oberflächen als intuitiver und funktionaler kohärent wahrnahmen. Der AHS, gemessen anhand einer 7-stufigen Likert-Skala, bewertet die wahrgenommene visuelle Attraktivität und Farbharmonie. Oberflächen, die mit dem auf CAM02-UCS basierenden Farbmodellierungsmodul generiert wurden, erreichten höhere AHS-Werte, was auf sanftere Farbübergänge und visuell ausgewogenere Farbpaletten hindeutet. Die Teilnehmer bevorzugten diese Oberflächen aufgrund verbesserter Kontraste, kohärenterer Farbtonabstimmung und reduzierter visueller Unordnung, was die Bedeutung der wahrnehmungsbasierten Farbmodellierung im UI-Design unterstreicht. SET misst die Zeit, die Benutzer benötigen, um gezielte UI-Elemente bei visuellen Suchaufgaben zu finden. Niedrigere SET-Werte deuten auf eine verbesserte visuelle Organisation und Hierarchie hin. Der vorgeschlagene Ansatz reduzierte SET in allen Datensätzen signifikant und zeigt damit, dass die Integration von Gestalt-Gruppierung, aufmerksamkeitsgeleiteten Abständen und verfeinerten Layoutstrukturen eine schnellere und effizientere Interaktion ermöglicht. Der CSCR-Wert bewertet die Konsistenz des UI-Designs über mehrere Bildschirme hinweg. Höhere Werte deuten auf eine bessere Kontinuität in Layout, Farbe und struktureller Organisation hin. Der vorgeschlagene Ansatz erreichte höhere CSCR-Werte, was die Wirksamkeit des Multibildschirm-Konsistenzmoduls bei der Aufrechterhaltung stabiler Farbschemata, Abstände und hierarchischer Strukturen über verschiedene Oberflächen hinweg widerspiegelt.

Abbildung 9 zeigt die Ergebnisse der vergleichenden Nutzerstudie für alle Metriken (NASA-TLX, SUS, AHS, SET und CSCR) über die Datensätze RICO, ENRICO und Guo hinweg. Insgesamt sind über alle Bewertungsmetriken hinweg konsistente Verbesserungen zu beobachten. Insbesondere weist der Datensatz Guo eine überlegene Leistung bei nutzerzentrierten Metriken auf, darunter eine geringere kognitive Belastung (NASA-TLX), eine höhere Benutzbarkeit (SUS), eine verbesserte ästhetische Harmonie (AHS), eine reduzierte Suchzeit (SET) und eine verbesserte Konsistenz zwischen Bildschirmen (CSCR). Diese Ergebnisse bedürfen jedoch einer sorgfältigen Interpretation. Die verbesserten UX-Metriken für den Datensatz Guo sind hauptsächlich auf dessen starke Farbkonsistenz und die relativ einfachere visuelle Komposition zurückzuführen, nicht jedoch auf eine überlegene Qualität der strukturellen Anordnung. Obwohl Nutzer diese Benutzeroberflächen als visuell harmonischer und weniger kognitiv anspruchsvoll wahrnehmen, zeigen frühere Ergebnisse, dass der Datensatz Guo bei Ausrichtung, Gruppierung und Lesereihenfolge schlechter abschneidet. Dies verdeutlicht einen wichtigen Unterschied zwischen wahrnehmungsbezogenen und strukturellen Faktoren im UI-Design. Während wahrnehmungsbezogene Merkmale wie Farbharmonie die Nutzererfahrung deutlich verbessern, bleiben strukturelle Genauigkeit und Layout-Konsistenz entscheidend für die funktionale Benutzbarkeit. Daher erfordert ein optimales UI-Design ein Gleichgewicht zwischen wahrnehmbarer Harmonie und struktureller Korrektheit.

Abbildung 9. Vergleich der Benutzerstudien-Metriken über verschiedene Datensätze hinweg. Das gruppierte Balkendiagramm vergleicht die Metriken der Benutzerstudien für die Datensätze RICO, ENRICO und Guos UI-Farbdatensatz. Die x-Achse stellt Bewertungsmetriken dar, darunter den NASA-Arbeitsbelastungsindex (NASA-TLX), die System Usability Scale (SUS), die Bewertung der ästhetischen Harmonie (AHS), die strukturelle Effizienzzeit (SET) und die Konsistenzrate über Bildschirme hinweg (CSCR), während die y-Achse die entsprechenden Werte angibt. Die Balken zeigen die Leistung für jeden Datensatz und verdeutlichen Unterschiede hinsichtlich Benutzerfreundlichkeit, kognitiver Belastung, ästhetischer Qualität und Konsistenz der Benutzeroberfläche. NASA-TLX (0–100, niedriger ist besser), SUS (0–100, höher ist besser), AHS (1–7 Likert), SET (s, niedriger ist besser) und CSCR (0–1, höher ist besser). Bitte klicken Sie hier, um eine größere Version dieser Abbildung anzusehen.

Statistische Validierung von Hypothesen

Zur weiteren Überprüfung der vorgeschlagenen Hypothesen (H1–H4) wurde eine statistische Signifikanzprüfung anhand zentraler Evaluierungsmetriken durchgeführt, einschließlich Layout-Qualität, kognitive Belastung, Farbharmonie und Usability-Maße (Tabelle 6). Die Ergebnisse werden als Mittelwert ± Standardabweichung angegeben, und die statistische Signifikanz wurde mittels gepaarter t-Tests mit einem 95-%-Konfidenzintervall (p < 0,05) bewertet. Die Ergebnisse zeigen, dass der vorgeschlagene Ansatz in mehreren Metriken statistisch signifikante Verbesserungen gegenüber den Baseline-Verfahren erzielt, einschließlich Genauigkeit der Ausrichtung, Genauigkeit der Gruppierung, Lesereihenfolge, kognitive Belastung (NASA-TLX) und Farbharmonie-Maße. Insbesondere die Verringerung der kognitiven Belastung und die Verbesserung der Usability-Metriken weisen hochsignifikante Unterschiede auf (p < 0,01). Diese Befunde bestätigen, dass die Integration kognitiver Gestaltungsprinzipien und wahrnehmungsbasierter Farbmodellierung zu messbaren, statistisch signifikanten Verbesserungen der Benutzeroberflächenqualität führt und somit die Hypothesen H1–H4 stützt.

Metrik	Basislinie (Mittelwert ± SD)	Vorgeschlagen (Mittelwert ± SD)	Verbesserung (%)	p-Wert	Signifikanz
Ausrichtungsfehler (↓)	7,8 ± 1,2	4,2 ± 0,9	46,10 %	0,003	Signifikant
Gruppierungsgenauigkeit (↑)	0,68 ± 0,05	0,82 ± 0,04	20,50 %	0,001	Signifikant
Genauigkeit der Lesereihenfolge (↑)	0,72 ± 0,06	0,87 ± 0,03	20,80 %	0,002	Signifikant
NASA-TLX (↓)	68,5 ± 5,4	47,2 ± 4,8	31,10 %	0,0005	Sehr signifikant
SUS-Score (↑)	71,3 ± 6,2	88,9 ± 4,5	24,70 %	0,0008	Sehr signifikant
Farbharmonieindex (↑)	0,61 ± 0,07	0,83 ± 0,05	36,00 %	0,001	Signifikant
Kontrastverhältnis (↑)	4,1 ± 0,6	6,2 ± 0,5	51,20 %	0,002	Signifikant

Tabelle 6: Statistischer Vergleich der Leistungsmetriken zwischen Baseline- und vorgeschlagenen Methoden. Die Tabelle zeigt Mittelwert und Standardabweichung (Mittelwert ± SD) für wichtige Leistungsmetriken, einschließlich Ausrichtungsfehler, Gruppierungsgenauigkeit, Genauigkeit der Lesereihenfolge, NASA-Arbeitsbelastungsindex (NASA-TLX), System Usability Scale (SUS), Farbharmonieindex und Kontrastverhältnis. Prozentuale Verbesserungen, p-Werte und statistische Signifikanzniveaus werden angegeben. (↑) zeigt an, dass höhere Werte besser sind, und (↓) zeigt an, dass niedrigere Werte besser sind. Die statistische Signifikanz wurde bei p < 0,05 bewertet.

Beobachtungen spezifisch für den Datensatz

Die relativ geringere Leistung bei strukturellen Metriken im Guo-Datensatz ist auf dessen inhärente Eigenschaften zurückzuführen. Der Guo-Datensatz ist kleiner als RICO und ENRICO und konzentriert sich hauptsächlich auf wahrnehmungsbezogene Farbmerkmale statt auf strukturierte Layout-Anmerkungen. Folglich weist er eine höhere Variabilität bei der Komponentenplatzierung, eine schwächere hierarchische Organisation sowie weniger konsistente Layout-Strukturen zwischen den Bildschirmen auf. Diese Eigenschaften erschweren das strukturelle Lernen und die Layout-Optimierung, was die geringere Leistung bei Ausrichtungs-, Gruppierungs- und Lesereihenfolge-Metriken erklärt, trotz einer starken Leistung bei wahrnehmungsbezogenen und nutzerzentrierten Bewertungen.

Ablationsstudie

Die Ablationsstudie bewertet den Beitrag jedes Moduls innerhalb des vorgeschlagenen Frameworks, indem einzelne Komponenten systematisch entfernt und deren Auswirkungen auf Layoutqualität, Farbmodellierung und Erkennungsleistung analysiert werden. Die Layoutqualität wird anhand von AE, GA, ROA und LCS beurteilt. AE spiegelt die positionsmäßige Abweichung von Benutzeroberflächenelementen wider, wobei höhere Werte auf eine schwächere räumliche Struktur hinweisen. GA bewertet, wie effektiv die Komponenten gemäß den Gestaltprinzipien organisiert sind. ROA misst die Erhaltung des logischen visuellen Flusses, während LCS die strukturelle Konsistenz über verschiedene Bildschirme hinweg hinsichtlich Ausrichtung, Abstand und Layoutorganisation quantifiziert. Die Verschlechterung der Farbqualität wird anhand von ΔE (wahrnehmbarer Farbunterschied), CHI und CDS bewertet, die gemeinsam die wahrnehmungsmäßige Gleichförmigkeit, ästhetische Kohärenz und Palettevielfalt beurteilen. Die Erkennungsleistung wird anhand von mAP, Präzision und Sensitivität (Recall) bewertet, die den Einfluss des Ersatzes des Faster-R-CNN-Moduls durch ein einfacheres Erkennungsmodell quantifizieren. Zusammen liefern diese Metriken eine umfassende Bewertung, wie jedes Modul zur Gesamtsystemleistung beiträgt.

Tabelle 7 fasst den Beitrag jedes Moduls zusammen und vergleicht den vorgeschlagenen Ansatz mit bestehenden Methoden zur Benutzeroberflächengenerierung. Das vollständige Modell erzielt die beste Leistung bei allen Metriken zur Layoutqualität, Farbmodellierung und Erkennungsgenauigkeit, was zeigt, dass kognitives Design, wahrnehmungsbasierte Farbmodellierung und tiefes visuelles Verständnis synergistisch wirken. Wird das Farbmodellierungsmodul entfernt, steigt der ΔE-Wert deutlich an, während CHI und CDS stark abnehmen, was auf einen Verlust an wahrgenommener Gleichförmigkeit und Farbharmonie hindeutet. Dies bestätigt die Bedeutung der CAM02-UCS-basierten Modellierung für die Aufrechterhaltung ästhetischer und wahrnehmungsmäßiger Qualität. Das Entfernen des kognitiven Layoutmoduls führt zu einem signifikanten Anstieg des AE-Werts sowie merklichen Abnahmen von GA und ROA, was zeigt, dass kognitive Gestaltungsprinzipien entscheidend für die Erzeugung strukturell kohärenter und lesbarer Layouts sind. Die Deaktivierung des Multiscreen-Konsistenzmoduls bewirkt eine Verringerung des LCS-Werts, was dessen Rolle bei der Aufrechterhaltung konsistenter Layoutmuster über mehrere Bildschirme hinweg bestätigt. Der Ersatz des Faster-R-CNN-Detektors durch ein einfacheres CNN führt zu einem starken Rückgang von mAP, Präzision und Sensitivität, was die entscheidende Bedeutung einer robusten Komponentenerkennung in der gesamten Verarbeitungskette unterstreicht. Im Vergleich zu Basisverfahren wie pix2code, REDRAW und LDGM übertrifft der vorgeschlagene Ansatz alle anderen Methoden durchgängig hinsichtlich Layoutgenauigkeit, visueller Kohärenz und wahrgenommener Farbqualität.

Methode / Modul	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Farbmodul entfernt	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Kognitives Layout-Modul entfernt	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
Mehrfachbild-Konsistenz entfernt	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNN durch einfaches CNN ersetzt	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 (Layout-Diffusion)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
Vorgeschlagenes Vollmodell	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Tabelle 7: Ablationsstudie und vergleichende Leistungsanalyse des vorgeschlagenen Frameworks und der Baseline-Methoden. Die Tabelle bewertet die Auswirkungen einzelner Komponenten, indem das vollständige vorgeschlagene Modell mit Varianten verglichen wird, bei denen spezifische Module entfernt wurden (Farbmodul, kognitives Layoutmodul, Multiscreen-Konsistenz und Faster R-CNN, das durch ein einfaches CNN ersetzt wurde), sowie mit Baseline-Methoden (pix2code, REDRAW und LDGM). Die Leistung wird anhand des Ausrichtungsfehlers (AE), der Gruppierungsgenauigkeit (GA), der Genauigkeit der Lesereihenfolge (ROA), des Layout-Konsistenz-Scores (LCS), des wahrgenommenen Farbunterschieds (ΔE), des Farbharmonie-Index (CHI), des Farbvielfalt-Scores (CDS) und der mittleren durchschnittlichen Präzision (mAP) bewertet. (↑) zeigt an, dass höhere Werte besser sind, und (↓) zeigt an, dass niedrigere Werte besser sind.

VERFÜGBARKEIT VON DATEN:

Die in dieser Studie verwendeten Datensätze sind unter den folgenden Links verfügbar: RICO-Datensatz: https://interactionmining.org/rico; ENRICO-Datensatz: https://github.com/luileito/enrico; Guos UI-Farbdatensatz: https://github.com/guozhongke/UI-Color-Dataset.

Zusatzdatei 1. Mathematische Formulierungen und erweiterte Implementierungsdetails. Diese Datei enthält detaillierte mathematische Formulierungen und algorithmische Abläufe, die den vorgeschlagenen automatisierten UI-Prototyping-Rahmen unterstützen. Dazu gehören das Training zur Komponentenerkennung, die Extraktion von Layout-Mustern, die Modellierung harmonischer Farben, die vereinheitlichte Zielsetzung für UI-Prototyping, Einzelheiten zur Faster-R-CNN-Erkennung, Berechnungen zur räumlichen Distanz und Ausrichtungsähnlichkeit, der Aufbau logischer UI-Bäume, die wahrnehmungsbezogene Farbmodellierung basierend auf CAM02-UCS, die kognitive Designoptimierung, die Modellierung der Konsistenz über mehrere Bildschirme hinweg sowie die Algorithmen S1–S3.Bitte klicken Sie hier, um diese Datei herunterzuladen.

Diskussion

Die Ergebnisse zeigen statistisch signifikante Verbesserungen hinsichtlich der Benutzerfreundlichkeit, der strukturellen Organisation und der wahrgenommenen Qualität (p < 0,05), wodurch die Wirksamkeit der Einbindung kognitiver Gestaltungsprinzipien in die automatisierte UI-Prototyperstellung bestätigt wird. Im Gegensatz zu herkömmlichen Systemen zur UI-Generierung, die hauptsächlich auf visueller Erkennung oder regelbasierten Heuristiken beruhen, integriert der vorgeschlagene Ansatz Gestalt-Gruppierungen, Hierarchiemodellierung, Abstandsbeschränkungen und wahrgenommene Lesbarkeit in den gesamten Prozess der UI-Rekonstruktion. Die beobachteten Verbesserungen bei NASA-TLX, SUS und SET bestätigen zudem eine statistisch signifikante Verringerung der kognitiven Belastung (NASA-TLX, p.< 0,01). Diese Ergebnisse deuten darauf hin, dass die automatisierte UI-Generierung über die Genauigkeit der visuellen Rekonstruktion hinausgehen und wissensbasierte, menschenzentrierte Gestaltungsansätze einbeziehen sollte, um eine praktikable Benutzerfreundlichkeit zu erreichen. Darüber hinaus werden alle aufgestellten Hypothesen (H1–H4) durch die experimentellen Ergebnisse empirisch gestützt.

Neben Layout-Verbesserungen führt die Integration eines auf CAM02-UCS basierenden wahrnehmungsbasierten Farbmodells zu statistisch signifikanten Gewinnen hinsichtlich Farbharmonie, Zugänglichkeit und wahrnehmbarer Stabilität (p < 0,05), wie durch Verbesserungen bei ΔE, CHI, CDS und Kontrastverhältnis belegt wird. Im Vergleich zu früheren Arbeiten, wie der automatisierten, bildbasierten Generierung von UI-Farbthemen, die sich hauptsächlich auf die Farboptimierung konzentrieren, integriert der vorgeschlagene Ansatz sowohl Farb- als auch Layout-Verbesserungen in einer einheitlichen Pipeline. Darüber hinaus behebt das Hinzufügen eines Moduls für Mehrbildschirm-Konsistenz eine zentrale Einschränkung früherer Ansätze, die sich ausschließlich auf die Generierung von Einzelbildschirm-UIs konzentrieren. Ein Vergleich mit bestehenden Methoden, einschließlich pix2code³¹, REDRAW^23,24 und LDGM³², zeigt, dass diese Ansätze primär die strukturelle Rekonstruktion oder generative Modellierung betonen, ohne kognitive Prinzipien, wahrnehmungsbasierte Farbharmonisierung oder Mehrbildschirm-Überlegungen einzubeziehen. Der vorgeschlagene Ansatz weist statistisch signifikante Verbesserungen gegenüber diesen Methoden auf (p < 0,05) in Bezug auf Metriken zur Layout-Genauigkeit (AE, GA und ROA), wahrnehmungsbasierte Metriken (CHI und ΔE) sowie Maße der Benutzbarkeit (SUS und CSCR). Diese Ergebnisse unterstreichen den Vorteil, kognitive Gestaltungsprinzipien, wahrnehmungsbasiertes Farbmodellieren und Deep Learning in einem einheitlichen System zu kombinieren.

Eine wichtige Beobachtung der Ergebnisse ist der Unterschied zwischen strukturellen und wahrnehmungsbezogenen Faktoren, die die Benutzererfahrung beeinflussen. Die strukturelle Optimierung verbessert die funktionale Korrektheit und die Klarheit des Layouts, während die wahrnehmungsbezogene Optimierung – insbesondere die Farbharmonie – die Benutzerwahrnehmung und kognitive Belastung erheblich beeinflusst. Die Ergebnisse zeigen, dass ein optimales UI-Design ein Gleichgewicht zwischen struktureller Genauigkeit und wahrnehmungsmäßiger Kohärenz erfordert. Trotz der nachgewiesenen Verbesserungen bestehen bestimmte Einschränkungen weiterhin. Beispielsweise ist die Leistung bei kleineren und stärker wahrnehmungsorientierten Datensätzen wie dem Guo UI Color-Datensatz bei strukturellen Metriken geringer, bedingt durch die Variabilität in der Layoutorganisation und begrenzte strukturelle Annotationen. Diese Merkmale erschweren das Lernen konsistenter Layoutmuster und hierarchischer Beziehungen. Zukünftige Arbeiten werden darauf abzielen, die Robustheit über solche Datensätze hinweg zu verbessern.

Aus theoretischer Perspektive zeigt diese Studie, dass die Generierung von Benutzeroberflächen erheblich verbessert werden kann, indem kognitive und wahrnehmungsbezogene Prinzipien direkt in Deep-Learning-Workflows integriert werden. Die Arbeit stellt die herkömmliche Auffassung in Frage, dass die Generierung von Benutzeroberflächen ausschließlich ein Problem der Computer Vision oder der Code-Generierung darstellt. Stattdessen betont sie die Bedeutung der Einbeziehung von wahrgenommener Gleichförmigkeit (über CAM02-UCS), der Reduzierung der kognitiven Belastung (über Gestaltpsychologische Prinzipien und Hierarchiemodellierung) sowie der kohärenten Gestaltung über mehrere Bildschirme hinweg als zentrale Bestandteile automatisierter Benutzeroberflächensysteme. Diese Arbeit leistet einen Beitrag zu einem Paradigmenwechsel hin zu menschenzentrierten computerbasierten Modellen, bei denen die Generierung von Benutzeroberflächen nicht nur strukturelle Korrektheit, sondern auch psychologische und wahrnehmungsbezogene Faktoren berücksichtigt. Damit eröffnet sie eine neue theoretische Richtung für die intelligente automatisierte Gestaltung.

Aus praktischer Sicht bietet das vorgeschlagene Framework eine einsetzbare Lösung für UI-Designer, Produktteams und Prototyping-Tools. Durch die Verringerung der kognitiven Belastung und die Verbesserung der Sucheffizienz erzeugt das System Benutzeroberflächen-Layouts, die weniger manuelle Nachbearbeitung benötigen, um professionelle Designstandards zu erfüllen. Die Verwendung wahrnehmungsoptimierter Farbthemen stellt die Einhaltung von Barrierefreiheitsrichtlinien wie WCAG 2.1 sicher und ermöglicht eine sofortige Nutzung in realen Anwendungen. Zusätzlich beschleunigt das Modul für mehrseitige Konsistenz die Entwicklung mehrseitiger Anwendungen, indem es ein einheitliches Layout und konsistente Designmuster ohne manuelle Anpassungen aufrechterhält. Insgesamt hat das Framework das Potenzial, die Entwicklungszeit für Benutzeroberflächen erheblich zu verkürzen und gleichzeitig Qualität und Benutzerfreundlichkeit der generierten Designs zu verbessern.

Der vorgeschlagene Ansatz verfolgt einen menschenzentrierten Ansatz für die automatisierte UI-Prototyperstellung, indem kognitive Gestaltungsprinzipien, perzeptive Farbmodellierung (CAM02-UCS) und konsistente Multiscreen-Layouts in eine einheitliche rechnergestützte Pipeline integriert werden. Im Gegensatz zu früheren Ansätzen, die hauptsächlich auf struktureller Rekonstruktion oder visueller Erkennung basieren, modelliert der Ansatz explizit Gestalt-Gruppierungen, Hierarchien, Kontrastoptimierung und perzeptive Gleichförmigkeit. Experimentelle Ergebnisse zeigen signifikante Verbesserungen hinsichtlich der Benutzbarkeit (SUS und NASA-TLX), visueller Harmonie (AHS, CHI und ΔE) sowie struktureller Leistung (GA, ROA, LCS und mAP), was bestätigt, dass kognitive und perzeptive Modellierung die UI-Qualität und das Nutzererlebnis (UX) verbessern. Zukünftige Arbeiten werden die Integration von transformerbasierten Sprach- und Bildmodellen untersuchen, um das semantische Verständnis und die strukturelle Schlussfolgerung zu verbessern. Außerdem könnte die Einbindung adaptiver Personalisierung, geräteangepasster Layouts und iterativer menschlicher Feedbackschleifen die praktische Anwendbarkeit des Systems weiter erhöhen. Insgesamt schafft diese Arbeit eine Grundlage für UI-Design-Systeme der nächsten Generation, die nicht nur visuell präzise, sondern auch kognitiv effizient, wahrnehmungsmäßig harmonisch und praktisch einsetzbar sind.

Materialien

Liste der in diesem Artikel verwendeten Materialien

Name	Unternehmen	Katalognummer	Kommentare
CPU (Prozessor)	AMD Ryzen 9 7950X (16-Kern, 32-Thread, 4,5–5,7 GHz)	Advanced Micro Devices (AMD), USA	Ryzen 9 7950X
CUDA Toolkit	Version 11,8	NVIDIA Corporation, USA	CUDA Toolkit 11,8
cuDNN	Version 8,9	NVIDIA Corporation, USA	cuDNN v8,9
Faster R-CNN	Objekterkennungsmodell (mit Region Proposal Network)	Meta AI Research / Detectron2	Detectron2-Framework
Matplotlib	Version 3,7	Matplotlib-Entwicklungsteam	v3,7,0
NVIDIA RTX 4090 GPU	24-GB-GDDR6X-Grafikkarte	NVIDIA Corporation, Santa Clara, CA, USA	RTX 4090
NumPy	Version 1,24	NumPy-Entwickler	v1,24,0
OpenCV	Version 4,8	OpenCV Foundation	v4,8,0
PyTorch	Version 2,0	PyTorch Foundation (Meta AI)	v2,0,0
ResNet-50 mit FPN	Backbone-CNN mit Feature-Pyramid-Netzwerk	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	Version 1,3	Scikit-learn-Entwickler	v1,3,0
SciPy	Version 1,10	SciPy-Community	v1,10,0
Arbeitsspeicher (RAM)	64 GB DDR5	Corsair / Kingston (oder vergleichbar)	DDR5-64-GB-Kit
Ubuntu-Betriebssystem	Version 22,04 LTS	Canonical Ltd., UK	Ubuntu 22,04 LTS