Zautomatyzowany system prototypowania interfejsów użytkownika integrujący zasady projektowania poznawczego i wizualnego w celu poprawy użyteczności i przejrzystości układu

Jun Shi; Di Chen

doi:10.3791/71071

Artykuł badawczy

Zautomatyzowany system prototypowania interfejsów użytkownika integrujący zasady projektowania poznawczego i wizualnego w celu poprawy użyteczności i przejrzystości układu

DOI:

10.3791/71071

⸱

14 sierpnia 2026

Jun Shi¹ , Di Chen²

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

W tym artykule

Podsumowanie

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Niniejsze badanie przedstawia zautomatyzowany system prototypowania interfejsów użytkownika, integrujący zasady projektowania kognitywnego, percepcyjne modelowanie kolorów oraz głębokie uczenie. System ten poprawia dostępność, przejrzystość układu, harmonię kolorystyczną oraz spójność między różnymi ekranami, co prowadzi do tworzenia spójnych i zorientowanych na użytkownika projektów interfejsów.

Streszczenie

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Efektywne projektowanie interfejsu użytkownika (UI) wymaga harmonijnej równowagi między atrakcyjnością wizualną, użytecznością poznawczą a spójnością układu. Jednak obecne podejścia do automatycznego generowania UI koncentrują się głównie na wyglądzie wizualnym lub detekcji komponentów i brakuje im zunifikowanych ram, które integrowałyby zasady poznawcze, inteligencję kolorystyczną i rozumowanie strukturalne. Ponadto istniejące metody obarczone są ograniczoną generalizacją układów, słabą interpretowalnością, statycznym doborem kolorów i niespójnym zachowaniem między ekranami. W tym kontekście niniejsza praca proponuje zautomatyzowane ramy prototypowania UI, które integrują detekcję komponentów opartą na szybkiej konwolucyjnej sieci neuronowej opartej na regionach (Faster R-CNN) oraz percepcyjne modelowanie kolorów sterowane przez jednolity obszar kolorów CIECAM02 (CAM02-UCS), wzbogacone o zasady projektowania wizualnego i poznawczego. Faster R-CNN jest wykorzystywany do identyfikacji komponentów UI i wnioskowania struktur hierarchicznych z wielkoskalowych zbiorów danych interfejsów. Ulepszony moduł generowania kolorów analizuje obrazy marki lub obrazy referencyjne, aby zapewnić percepcyjnie jednolite, harmonijne i zgodne z zasadami użyteczności motywy kolorystyczne przy użyciu CAM02-UCS. Wyniki te są następnie optymalizowane za pomocą zasad projektowania poznawczego, w tym grupowania Gestalt, praw Fittsa i Hicksa, odstępów opartych na uwadze oraz modelowania hierarchii wizualnej, aby automatycznie generować dopracowane, zorientowane na zadania układy UI. Eksperymenty przeprowadzone na zbiorach danych RICO, ENRICO i Guo’s UI Color wykazują, że proponowany system osiąga 92,4% dokładności detekcji komponentów, poprawia przejrzystość układu i dokładność kolejności czytania o 18,7% oraz tworzy palety kolorystyczne oceniane przez projektantów jako o 24,5% bardziej harmonijne w porównaniu z metodami bazowymi. Ewaluacje użytkowników wskazują również na 31% redukcję postrzeganego obciążenia poznawczego i 28% wzrost spójności projektowej między ekranami. Wyniki te dowodzą, że połączenie strukturalnego zrozumienia opartego na głębokim uczeniu z percepcyjnym modelowaniem kolorów i zasadami projektowania poznawczego pozwala na tworzenie prototypów UI, które są wysoce wydajne, estetycznie spójne i przyjazne dla użytkownika. Przedstawione ramy ustanawiają nowatorskie, kompleksowe podejście do inteligentnego i zorientowanego na człowieka automatycznego prototypowania UI.

Wprowadzenie

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Graficzne interfejsy użytkownika (GUI) stanowią podstawowy środek komunikacji między ludźmi a systemami komputerowymi, znacząco wpływając na użyteczność, dostępność oraz ogólne doświadczenia użytkownika (UX)¹^,². Nowoczesne systemy oprogramowania opierają się na intuicyjnych i atrakcyjnych wizualnie interfejsach, aby przyciągać i zatrzymywać użytkowników. Tradycyjnie projektowanie interfejsu użytkownika polega na tworzeniu układów graficznych, które są następnie tłumaczone na kod front-endowy przez inżynierów. Jednak różnice w protokołach specyficznych dla poszczególnych platform w zależności od systemu operacyjnego wymagają wielokrotnej adaptacji, co zwiększa złożoność i nakład pracy związany z rozwojem. Automatyczne generowanie kodu interfejsu użytkownika stało się zatem ważnym kierunkiem badań, pozwalającym na ograniczenie pracy ręcznej i zwiększenie wydajności procesu tworzenia oprogramowania.

Wczesne podejścia do zautomatyzowanego generowania interfejsów użytkownika (UI) łączą tradycyjne techniki przetwarzania obrazów z modelami głębokiego uczenia w celu detekcji i klasyfikacji obszarów³^,⁴. Obecnie dominujące strategie generowania kodu GUI stosują techniki komputerowego rozpoznawania obrazu do analizy obrazów UI i ich konwersji na ustrukturyzowane reprezentacje front-endowe⁵^,⁶^,⁷. Podczas gdy metody przetwarzania obrazów opierają się na ręcznie definiowanych cechach, podejścia oparte na głębokim uczeniu wyodrębniają reprezentacje hierarchiczne z wielkoskalowych zbiorów danych. W konsekwencji badacze analizowali podejścia hybrydowe, które łączą głębokie uczenie ze specyficznymi dla danej dziedziny technikami przetwarzania obrazów w celu zwiększenia odporności i dokładności.

Kolor jest kolejnym kluczowym czynnikiem w projektowaniu interfejsu użytkownika (UI), wpływającym na postrzeganie przez użytkownika, użyteczność oraz estetykę¹. Zachowanie spójności między treścią obrazu a schematami kolorystycznymi UI staje się wyzwaniem, gdy wejścia wizualne różnią się odcieniem i kontekstem⁸^,⁹^,¹⁰. W związku z tym znacząca część badań skupiła się na automatycznym generowaniu palet kolorów i percepcyjnym modelowaniu barw. Istniejące metody generowania kolorów obejmują techniki oparte na przestrzeni barw CIELAB¹¹. Inne podejścia wykorzystują algorytmy klastrowania, takie jak k-średnich, do wyodrębniania dominujących kolorów z obrazów¹². W rezultacie w nowszych pracach coraz częściej stosuje się podejścia oparte na danych i uczeniu maszynowym w celu modelowania kolorów.

Równolegle podejścia oparte na głębokim uczeniu znacząco poprawiły detekcję komponentów interfejsu użytkownika (UI) oraz rozumienie układu. Sieci neuronowe umożliwiły dokładniejszą analizę strukturalną interfejsów mobilnych¹³. Metody te koncentrują się jednak przede wszystkim na dokładności detekcji, często pomijając aspekty wyższego poziomu, takie jak użyteczność poznawcza, hierarchia układu i efektywność interakcji. Zaproponowano również generatywne modele syntezy układu UI¹⁴^,¹⁵, lecz napotykają one trudności w utrzymaniu spójności między różnymi ekranami oraz w dostarczaniu interpretowalnych decyzji projektowych¹⁶. Inne podejścia skupiają się na podobieństwie wizualnym lub jakości renderowania, ale brakuje im ujednoliconego modelu łączącego semantykę komponentów, harmonię kolorystyczną i ograniczenia dotyczące użyteczności¹⁷. Rozpoznawanie tekstu jest również istotne dla zrozumienia treści UI. Techniki takie jak splotowe rekurencyjne sieci neuronowe (CRNNs) umożliwiają dokładne rozpoznawanie złożonych wzorców tekstowych na ekranach interfejsu¹⁸^,¹⁹^,²⁰.

Zaproponowano kilka systemów służących do generowania kodu interfejsu użytkownika (UI) na podstawie szkiców lub obrazów. Sketch2Code wykorzystuje detekcję obiektów do konwersji szkiców na reprezentacje kodowe²¹^,²², jednak jest on wrażliwy na jakość obrazu. REDRAW zapewnia zautomatyzowany proces zbierania danych i trenowania modeli, łącząc splotowe i rekurencyjne sieci neuronowe w celu generowania ustrukturyzowanych reprezentacji UI²³^,²⁴. W późniejszych pracach wprowadzono ulepszone metryki oceny w celu analizy jakości wygenerowanego UI²⁵. Nowsze podejścia obejmują modele oparte na dyfuzji i transformatorach do generowania układów, takie jak transformatory układu dyfuzyjnego bez metod autoenkodera, generowanie układu GUI z wykorzystaniem grafów rozmieszczenia GUI opartych na transformatorach oraz generowanie układu UI sterowane przez duże modele językowe²⁶^,²⁷^,²⁸. Porównawczy przegląd tych podejść przedstawiono w Tabeli 1.

Literatura i kluczowa metoda (metody)	Cel	Zalety	Wady
Zautomatyzowane generowanie motywów kolorystycznych interfejsu użytkownika na podstawie obrazów: ekstrakcja kolorów dominujących + percepcyjne modelowanie barw CAM02-UCS¹	Automatyczne generowanie motywów kolorystycznych interfejsu użytkownika z obrazów referencyjnych przy jednoczesnej optymalizacji harmonii i użyteczności.	Silne ugruntowanie percepcyjne (CAM02-UCS); jawnie równoważy harmonię i użyteczność (kontrast i różnorodność); obejmuje implementację internetową oraz ocenę projektantów.	Skupienie wyłącznie na kolorystyce/motywie (nie na układzie ani strukturze komponentów); synteza interfejsu użytkownika oparta na regułach/heurystykach, a nie na uczeniu end-to-end.
Ujednolicenie generowania układu za pomocą rozdzielonego modelu dyfuzyjnego (LDGM)²⁵	Ujednolicone, elastyczne generowanie układu dla scen graficznych i interfejsów użytkownika.	Najnowocześniejszy poziom różnorodności i sterowalności w generowaniu układów; obsługa generowania warunkowego oraz wielu typów atrybutów.	Wyniki oparte na dyfuzji mogą wykazywać problemy z wyrównaniem lub szczegółowym układem, jeśli nie zostaną odpowiednio ograniczone; wiążą się one z wyższą złożonością modelu i kosztem wnioskowania.
Transformery układu dyfuzyjnego bez metod autoenkodujących: transformer + dyfuzja do generowania układów (bez autoenkodera)²⁶	Poprawa wierności i dopasowania dla benchmarków generowania układów (metryki FID, dopasowania i nakładania).	Lepsze uchwycenie korelacji semantycznych między sąsiadującymi obiektami; wysoka wydajność w zakresie wskaźnika FID oraz metryk wyrównania.	Koncentruje się przede wszystkim na geometrii układu (pozycjach, rozmiarach, kategoriach), a nie na semantyce interfejsu użytkownika.
Generowanie układu GUI za pomocą modeli opartych na Transformerach z grafów rozmieszczenia GUI (GUI-AGs)²⁷	Tworzenie układów interfejsu graficznego użytkownika (GUI) na podstawie więzów pozycyjnych i grafowych w celu wsparcia projektantów.	Reprezentacje grafowe oddają więzy relacyjne; transformer umożliwia elastyczne generowanie warunkowane tymi więzami.	Może wymagać od projektantów jawnych grafów ograniczeń; ograniczony nacisk na kolorystykę i wskaźniki użyteczności.
Generowanie układów interfejsu użytkownika (UI) za pomocą modeli LLM kierowanych gramatyką UI: duże modele językowe (LLM) + hierarchiczna gramatyka UI²⁸	Badanie dużych modeli językowych (LLM) w zakresie generowania układów oraz poprawa wyjaśnialności i kontroli poprzez reprezentacje gramatyczne.	Wysoki poziom sterowalności i wyjaśnialności; możliwość wykorzystania uczenia w kontekście (in-context learning) z dużych modeli językowych (typu GPT).	Prace na wczesnym etapie z ograniczoną walidacją empiryczną; projektowanie gramatyki i odporność w różnych interfejsach użytkownika (UI)

Tabela 1: Porównanie istniejących metod modelowania kolorów i generowania układu interfejsu użytkownika (UI). Tabela podsumowuje reprezentatywne podejścia do projektowania interfejsu użytkownika, w tym generowanie motywów kolorystycznych, generowanie układu w oparciu o modele dyfuzyjne, metody oparte na transformatorach oraz generowanie układu kierowane przez duże modele językowe. Dla każdej metody przedstawiono zastosowaną technikę, cel, zalety i ograniczenia, podkreślając różnice w modelowaniu percepcyjnym, możliwościach generowania układu, sterowalności oraz kwestiach związanych z użytecznością.

Mimo tych postępów utrzymuje się kluczowe ograniczenie: żaden z istniejących systemów nie integruje wspólnie detekcji komponentów, percepcyjnego modelowania kolorów, zasad projektowania poznawczego oraz spójności układu wieloekranowego w ramach jednej, kompleksowej struktury end-to-end¹. Obecne podejścia zazwyczaj optymalizują tylko jeden lub dwa aspekty — takie jak detekcja, układ lub kolor — bez uwzględnienia ich wzajemnych zależności. Ta fragmentacja podkreśla krytyczną lukę badawczą w opracowywaniu ujednoliconych, zorientowanych na człowieka zautomatyzowanych systemów prototypowania interfejsów użytkownika (UI). W szczególności zasady projektowania poznawczego, takie jak prawa Gestalt, prawo Fittsa i prawo Hicksa, są często traktowane koncepcyjnie, zamiast być formalnie zintegrowane z modelami obliczeniowymi.

Aby wyeliminować te ograniczenia, w niniejszym badaniu zaproponowano kompleksowy, zautomatyzowany system prototypowania interfejsów użytkownika (UI), który integruje detekcję komponentów, percepcyjne modelowanie kolorów oraz kognitywne zasady projektowania w ramach jednego systemu. System został opracowany w celu poprawy jakości układu, zmniejszenia obciążenia poznawczego, zwiększenia harmonii kolorystycznej oraz poprawy ogólnej użyteczności. Udoskonalenia te zostały zweryfikowane w drodze eksperymentów na zbiorach danych RICO, ENRICO oraz Guo’s UI Color, co wykazało skuteczność łączenia aspektów strukturalnych, percepcyjnych i kognitywnych w ramach jednego zautomatyzowanego procesu prototypowania UI. Postawiono hipotezę, że integracja detekcji komponentów opartej na głębokim uczeniu, percepcyjnego modelowania kolorów oraz kognitywnych zasad projektowania w ramach jednolitego systemu znacząco poprawi jakość prototypów UI w porównaniu z istniejącymi podejściami. W szczególności H1 zakłada, że system poprawia jakość układu, w tym wyrównanie, grupowanie i kolejność czytania. H2 zakłada, że system zmniejsza obciążenie poznawcze użytkownika. H3 sugeruje, że percepcyjne modelowanie kolorów poprawia koordynację barw i harmonię wizualną. H4 stwierdza, że poprawiona zostaje ogólna użyteczność oraz jakość estetyczna prototypów UI.

Protokół

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Niniejsze badanie wykorzystuje publicznie dostępne zbiory danych i nie obejmuje udziału ludzi ani zwierząt.

Zaproponowany zautomatyzowany framework prototypowania interfejsów użytkownika (UI) integruje strukturalne rozumienie oparte na głębokim uczeniu, percepcyjnie jednolity model kolorystyczny oraz zasady projektowania kognitywnego w celu generowania spójnych i zorientowanych na użytkownika prototypów interfejsów. Metodologia rozpoczyna się od architektury Faster R-CNN wytrenowanej na zbiorach danych RICO i ENRICO w celu wykrywania komponentów UI i wyodrębniania ich relacji hierarchicznych, co umożliwia dokładną interpretację różnorodnych układów ekranów. Wykryte komponenty są następnie przetwarzane przez moduł inteligencji kolorystycznej, który wyodrębnia wskazówki kolorystyczne oparte na marce lub obrazach, modeluje podobieństwo percepcyjne przy użyciu CAM02-UCS i generuje harmonijne, uwzględniające kontrast i zgodne z zasadami dostępności palety barw. Następnie, poprzez silnik optymalizacji kognitywnej, stosowane są zasady projektowania kognitywnego – w tym prawa grupowania Gestalt, prawo Fittsa, prawo Hicka, odstępy oparte na uwadze oraz ograniczenia hierarchii wizualnej – aby dopracować organizację przestrzenną i wyrównanie komponentów. Na koniec warstwa rozumowania układu integruje ograniczenia strukturalne, percepcyjne i kognitywne, aby wygenerować spójne dla wielu ekranów prototypy UI, które równoważą użyteczność, estetykę i przejrzystość funkcjonalną. Ten zintegrowany proces zapewnia spójność percepcyjną, redukuje obciążenie kognitywne i przestrzega zasad projektowania zorientowanego na człowieka. Kompletny schemat proponowanej metody przedstawiono na Rysunku 1.

figure-protocol-1
Rysunek 1. Ogólna architektura proponowanego zautomatyzowanego frameworka do prototypowania interfejsów użytkownika. Schemat ilustruje cały proces, rozpoczynający się od wejściowego obrazu interfejsu użytkownika. Detekcja komponentów jest wykonywana za pomocą Faster R-CNN w celu zidentyfikowania elementów interfejsu. Wykryte komponenty są następnie przetwarzane przy użyciu modelowania percepcyjnego opartego na CAM02-UCS w celu ekstrakcji hierarchii i układu. Następnie stosowana jest optymalizacja poznawcza z wykorzystaniem zasad Gestalt, prawa Fittsa, prawa Hicksa oraz korekt opartych na uwadze. Strzałki wskazują przepływ danych między modułami, co prowadzi do końcowego wygenerowania prototypu interfejsu użytkownika. Kliknij tutaj, aby wyświetlić powiększoną wersję tego rysunku.

Przegląd struktury

Rysunek 1 przedstawia kompletny przebieg pracy proponowanego zautomatyzowanego frameworka do prototypowania interfejsów użytkownika (UI), który przekształca surowy zrzut ekranu UI w poznawczo dopracowany prototyp. Proces rozpoczyna się od wejściowego obrazu UI, który jest przekazywany do modułu detekcji komponentów opartego na modelu Faster R-CNN. Moduł ten identyfikuje elementy interfejsu, takie jak przyciski, ikony, pola tekstowe i kontenery, a następnie generuje odpowiadające im ramki ograniczające (bounding boxes) oraz etykiety klas. Wykryte komponenty są następnie przetwarzane na etapie ekstrakcji hierarchii i układu. W oparciu o relacje przestrzenne i wzorce strukturalne system buduje hierarchiczne drzewo układu, które odzwierciedla naturalny sposób postrzegania organizacji ekranu przez użytkowników. Reprezentacja ta obejmuje wizualne grupowanie i zależności strukturalne między elementami UI. Wyekstrahowany układ jest następnie udoskonalany poprzez optymalizację poznawczą z zastosowaniem zasad projektowania zorientowanego na człowieka. Obejmuje to grupowanie Gestalt w celu klastrowania wizualnego, prawo Fittsa w celu optymalizacji rozmiaru i dostępności elementów interaktywnych, prawo Hicka w celu zmniejszenia złożoności podejmowania decyzji oraz rozmieszczenie oparte na mechanizmach uwagi dla poprawy hierarchii wizualnej. W rezultacie układ staje się bardziej intuicyjny, czytelny i efektywny w interakcji z użytkownikiem. Na koniec zoptymalizowany układ zostaje połączony z percepcyjnym modelowaniem kolorów w celu wygenerowania spójnego prototypu UI. Powstały interfejs jest strukturalnie dokładny, wizualnie harmonijny i zgodny z oczekiwaniami w zakresie użyteczności dla człowieka.

Struktura została zaimplementowana przy użyciu PyTorch 2.0 w systemie Ubuntu 22.04. Eksperymenty przeprowadzono na systemie wyposażonym w GPU NVIDIA RTX 4090 (24 GB VRAM). Model Faster R-CNN wykorzystywał architekturę ResNet-50 jako szkielet (backbone), wstępnie wytrenowany na zbiorze danych ImageNet. Trening przeprowadzono z wykorzystaniem optymalizatora stochastycznego spadku gradientu (SGD) z szybkością uczenia 0.001, rozmiarem partii (batch size) 16 i maksymalnie 60 epokami. Aby zapobiec przeuczeniu, zastosowano wczesne zatrzymanie (early stopping) na podstawie zbioru walidacyjnego obejmującego 20% danych. Choć trening zaplanowano na maksymalnie 60 epok, zbieżność zazwyczaj osiągano wcześniej dzięki wczesnemu zatrzymaniu opartemu na stracie walidacyjnej. Pęd (momentum) oraz spadek wag (weight decay) ustawiono odpowiednio na 0.9 i 0.0005. Augmentacja danych obejmowała normalizację, losowe odwracanie poziome oraz losowe przycinanie i zmiana rozmiaru.

Przygotowanie zbioru danych

Aby wesprzeć proponowany zautomatyzowany framework prototypowania interfejsów użytkownika (UI), wykorzystano trzy komplementarne zbiory danych: ENRICO²⁹, RICO³⁰ oraz zbiór kolorów UI opracowany przez Guo¹. Zbiór RICO zawiera 66 261 ekranów UI systemu Android zebranych z 9 700 aplikacji, zapewniając szeroką różnorodność niezbędną do detekcji komponentów i ekstrakcji hierarchicznych układów. Zbiór ENRICO obejmuje 1 464 wysokiej jakości zrzuty ekranu UI, ręcznie podzielone na 20 wzorców projektowych, co pozwala na lepszą generalizację w zakresie wnioskowania strukturalnego i modelowania spójności układu. Zbiór kolorów UI opracowany przez Guo składa się ze 128 wyselekcjonowanych obrazów UI z adnotacjami tematów kolorystycznych, które są wykorzystywane do percepcyjnego modelowania kolorów i ewaluacji palet. Jednak ze względu na stosunkowo niewielki rozmiar, zbiór ten może wprowadzać pewną zmienność w charakterystyce układów. Na potrzeby niniejszego badania przygotowano połączony zbiór 5 128 ekranów do trenowania i ewaluacji. W szczególności około 4 000 obrazów z RICO posłużyło do trenowania modelu Faster R-CNN do detekcji komponentów, 1 000 obrazów z ENRICO wykorzystano do nauki wzorców układu i modelowania spójności strukturalnej, a 128 obrazów ze zbioru Guo użyto do zadań oceny kolorów. Wszystkie obrazy znormalizowano do rozdzielczości 480 × 800 pikseli, przekonwertowano do jednolitej przestrzeni barw sRGB i ponownie opisano za pomocą standaryzowanych ramek ograniczających oraz metadanych hierarchicznych, aby zapewnić kompatybilność między zbiorami danych. Przegląd zbiorów danych wykorzystanych w tym badaniu przedstawiono w Table 2. Zbiór RICO wspiera wielkoskalową detekcję komponentów UI i analizę strukturalną, podczas gdy ENRICO zwiększa zdolność modelu do rozpoznawania wzorców układu i wymuszania spójności między ekranami. Zbiór kolorów UI opracowany przez Guo, mimo mniejszego rozmiaru, odgrywa kluczową rolę w ocenie percepcyjnej harmonii kolorystycznej i modelowaniu kontrastu. Wspólnie zbiory te stanowią kompleksową i dobrze zbalansowaną podstawę do trenowania, walidacji i ewaluacji proponowanego zautomatyzowanego frameworka prototypowania UI.

Zbiór danych	Całkowita liczba dostępnych obrazów	Obrazy wykorzystane w badaniu	Cel w proponowanej strukturze
Zbiór danych RICO³⁰	66,261	4,000	Wykrywanie komponentów interfejsu użytkownika, ekstrakcja układu strukturalnego
Zbiór danych ENRICO²⁹	1,464	1,000	Uczenie wzorców projektowych, modelowanie spójności układu
Zbiór kolorów UI Guo¹	128	128	Ekstrakcja motywu kolorystycznego, percepcyjna ocena koloru
Suma łączna	67,853	5,128	Kompleksowy zbiór danych do wykrywania, analizy układu i modelowania kolorów

Tabela 2: Podsumowanie zbiorów danych wykorzystanych w proponowanym modelu.Tabela przedstawia zbiory danych wykorzystane do uczenia i ewaluacji, w tym zbiory RICO, ENRICO oraz Guo’s UI Color. Podano całkowitą liczbę dostępnych obrazów, podzbiór wykorzystany w niniejszym badaniu oraz konkretną rolę każdego zbioru danych w detekcji komponentów, modelowaniu układu oraz percepcyjnej analizie kolorów w ramach proponowanego modelu.

Zastosowano strategię próbkowania warstwowego, aby zachować różnorodność komponentów interfejsu użytkownika (UI), struktur układu oraz rozkładów kolorów w zbiorach danych RICO, ENRICO i Guo. Zbiór danych podzielono na podzbiory treningowy (70%), walidacyjny (15%) i testowy (15%) przy użyciu próbkowania warstwowego. Obrazy znormalizowano, stosując średnią (0.485, 0.456 oraz 0.406) i odchylenie standardowe (0.229, 0.224 oraz 0.225). Augmentacja danych obejmowała losowe odbicia poziome (prawdopodobieństwo = 0.5) oraz losowe przycinanie (zakres skali: 0.8–1.0), a następnie zmianę rozmiaru do 224 × 224 pikseli, co było stosowane podczas treningu.

Adnotacja i przetwarzanie wstępne komponentów

Zbiory danych RICO, ENRICO oraz UI Color Dataset autorstwa Guo wspólnie obsługują trzy podstawowe komponenty funkcjonalne proponowanego frameworka do automatycznego prototypowania interfejsów użytkownika (UI): detekcję komponentów, modelowanie układu oraz optymalizację kolorystyczną opartą na percepcji. Zbiór RICO zawiera wielkoskalową kolekcję ponad 66 000 ekranów mobilnych UI i służy przede wszystkim do trenowania modułu detekcji komponentów. Jego różnorodność pozwala modelowi Faster R-CNN na naukę odpornych reprezentacji typowych elementów UI, takich jak przyciski, obrazy i pola tekstowe, w szerokim zakresie aplikacji. Zapewnia to dokładną detekcję i lokalizację komponentów UI w zmiennych warunkach projektowych. Zbiór ENRICO dostarcza wysokiej jakości ekrany UI z etykietami wzorców, co pozwala na naukę relacji strukturalnych i schematów układu. Umożliwia to systemowi zrozumienie relacji między komponentami, organizacji hierarchicznej oraz powszechnych szablonów projektowych. Zbiór ten odgrywa kluczową rolę w modelowaniu struktur układu i wymuszaniu spójności wieloekranowej, co pozwala frameworkowi generować układy zgodne z ustalonymi konwencjami projektowymi. Z kolei UI Color Dataset autorstwa Guo jest wykorzystywany specjalnie do modelowania kolorystycznego w aspekcie percepcyjnym i poznawczym. W przeciwieństwie do RICO i ENRICO, które koncentrują się na aspektach strukturalnych, zbiór ten zawiera wyselekcjonowane obrazy UI z adnotacjami motywów kolorystycznych. Adnotacje te są wykorzystywane do trenowania modułów ekstrakcji kolorów i oceny harmonii. Poprzez mapowanie relacji kolorystycznych na percepcyjne przestrzenie barw, takie jak CAM02-UCS, framework uczy się generować palety kolorystyczne, które równoważą kontrast, dostępność i spójność estetyczną. Wspólnie zbiory te tworzą zintegrowany potok przetwarzania: RICO wspiera detekcję komponentów, ENRICO umożliwia zrozumienie wzorców układu i spójność strukturalną, a zbiór Guo ułatwia percepcyjną optymalizację kolorów. Taka integracja gwarantuje, że generowane prototypy UI są strukturalnie dokładne, wizualnie harmonijne i zoptymalizowane poznawczo.

Normalizację przeprowadzono przy użyciu średniej [0.485, 0.456, 0.406] oraz odchylenia standardowego [0.229, 0.224, 0.225]. W celu poprawy generalizacji modelu zastosowano techniki augmentacji danych, w tym losowe przycinanie, poziome odbicie lustrzane oraz rotację. Dodatkowo wartości pikseli przeskalowano do zakresu [0, 1], a wszystkie obrazy zmieniono na rozdzielczość 480 × 800 pixels, aby zapewnić spójność między zbiorami danych. Obrazy przeskalowane do 224 × 224 pixels wykorzystano do augmentacji podczas treningu, natomiast oryginalną rozdzielczość 480 × 800 pixels zachowano do analizy układu. Ramki ograniczające (bounding boxes) skorygowano w celu odfiltrowania nieistotnych adnotacji przy użyciu zdefiniowanych progów. Aby osiągnąć jednolitość między zbiorami danych, wszystkie elementy interfejsu użytkownika (UI) zostały ręcznie opisane za pomocą narzędzia do adnotacji LabelImg. Przed przystąpieniem do adnotacji ustalono schemat klasyfikacji elementów UI na takie kategorie jak przycisk, tekst, obraz, ikona i kontener. Do reprezentacji ramek ograniczających zastosowano jednolity układ współrzędnych, a informacje hierarchiczne zbudowano na podstawie relacji przestrzennych między elementami oraz powiązań rodzic-dziecko w drzewie układu. Ponadto opracowano wytyczne zapewniające spójność adnotacji elementów, prawidłową obsługę nakładających się komponentów oraz egzekwowanie minimalnych progów wielkości w zbiorach danych RICO, ENRICO i Guo.

Szczegółowe sformułowania matematyczne dla treningu wykrywania komponentów oraz ekstrakcji wzorca układu znajdują się w Pliku uzupełniającym 1.

Model Faster R-CNN został wytrenowany przy użyciu algorytmu SGD z momentum wynoszącym 0,9 oraz współczynnikiem weight decay na poziomie 0,0005. Początkowa wartość learning rate została ustawiona na 0,001 i dostosowywana zgodnie z polityką step decay w oparciu o wyniki na zbiorze walidacyjnym. Trening przeprowadzano przez maksymalnie 60 epok przy rozmiarze batch wynoszącym 16. Aby zapobiec overfittingowi, zastosowano procedurę early stopping, wykorzystując zbiór walidacyjny obejmujący 20% danych treningowych.

Funkcja mapowania f(.) przyjmuje wykryte elementy interfejsu użytkownika (UI) jako dane wejściowe i generuje hierarchiczną reprezentację układu jako wynik. Oblicza ona relacje sąsiedztwa między elementami UI w oparciu o odległość przestrzenną i kryteria wyrównania, a następnie tworzy macierz sąsiedztwa reprezentującą te relacje. Następnie zastosowany zostaje algorytm klastrowania, taki jak DBSCAN, w celu pogrupowania powiązanych komponentów. Na koniec elementy zgrupowane są organizowane w struktury hierarchiczne na podstawie relacji rodzic–dziecko, tworząc ustrukturyzowaną reprezentację układu.

Szczegółowe sformułowania dla modelowania harmonii kolorów oraz jednolity cel optymalizacji zostały przedstawione w Pliku uzupełniającym 1.

Ta funkcja celu w sposób matematyczny formalizuje integrację detekcji strukturalnej, rozumowania w zakresie układu oraz percepcyjnego modelowania kolorów, zapewniając, że wszystkie komponenty frameworka wspólnie przyczyniają się do generowania spójnych i zorientowanych na użytkownika prototypów UI. Optymalizacja jest przeprowadzana w sposób modularny dla każdego komponentu frameworka. Do trenowania modułu detekcji komponentów wykorzystuje się SGD, natomiast podczas wspólnej optymalizacji ujednoliconego celu stosowany jest optymalizator Adam. Połączony cel służy do kierowania ogólną wydajnością systemu. W etapach wspólnej optymalizacji funkcję celu minimalizuje się za pomocą optymalizatora Adam z szybkością uczenia 0,001 i rozmiarem batcha 16. Trenowanie jest przeprowadzane przez maksymalnie 60 epok, z zastosowaniem wczesnego zatrzymania, gdy zmiana straty walidacyjnej jest mniejsza niż 10⁻⁴ przez pięć kolejnych epok.

Wykrywanie komponentów przy użyciu Faster R-CNN

Zaproponowane ramy wykorzystują model Faster R-CNN do automatycznego wykrywania komponentów interfejsu użytkownika (UI), w tym przycisków, ikon, pól tekstowych, obrazów i kontenerów. Faster R-CNN jest odpowiedni do tego zadania, ponieważ łączy wysoką dokładność detekcji obiektów z wydajnym generowaniem propozycji regionów, co jest niezbędne przy obsłudze złożonych układów UI zawierających gęsto rozmieszczone elementy. Model wykorzystuje szkielet ResNet-50, wstępnie przeszkolony na zbiorze danych ImageNet, do ekstrakcji konwolucyjnych map cech z każdego ekranu UI. Podczas treningu wczesne warstwy zostały zamrożone, aby zachować ogólne cechy wizualne, podczas gdy wyższe warstwy (conv4_x i conv5_x) zostały dostrojone (fine-tuned) do detekcji komponentów specyficznych dla UI. Mapy cech te przechwytują struktury wizualne, krawędzie, tekstury i granice komponentów. Podczas detekcji sieć propozycji regionów (RPN) identyfikuje kandydackie regiony (kotwice), które prawdopodobnie zawierają komponenty UI. Kotwice są definiowane przy użyciu wielu skal (128, 256 i 512) oraz proporcji stron (1:1, 1:2 i 2:1), aby dostosować się do elementów UI o różnych rozmiarach. Podczas treningu kotwice z wskaźnikiem intersection-over-union (IoU) większym niż 0,7 w stosunku do ramek prawdy podstawowej (ground truth) są etykietowane jako pozytywne, natomiast te z IoU mniejszym niż 0,3 są etykietowane jako negatywne; kotwice z pośrednimi wartościami IoU są pomijane. Każdej kotwicy przypisana jest prawdopodobieństwo wskazujące na obecność komponentu. Następnie stosowana jest metoda non-maximum suppression (NMS), aby usunąć redundantne i nakładające się propozycje, zapewniając efektywną lokalizację istotnych elementów UI nawet w przeładowanych interfejsach. Po wygenerowaniu regionów kandydackich każda propozycja jest klasyfikowana do predefined komponentów kategorii, a współrzędne jej ramki ograniczającej (bounding-box) są doprecyzowane. Operacja ROI Align wyodrębnia reprezentacje cech o stałym rozmiarze dla każdej propozycji, które są następnie przetwarzane przez warstwy w pełni połączone w celu klasyfikacji i regresji. Gałąź klasyfikacji generuje prawdopodobieństwa klas, natomiast gałąź regresji przewiduje precyzyjne współrzędne ramki ograniczającej. Cały model Faster R-CNN jest trenowany w sposób end-to-end poprzez optymalizację wspólnej funkcji straty, która łączy stratę RPN ze ostateczną stratą detekcji. Pozwala to systemowi nie tylko na dokładne rozpoznawanie komponentów UI, ale także na ich precyzyjną lokalizację w różnorodnych strukturach interfejsu. Szczegółowy opis detekcji komponentów Faster R-CNN, w tym etap RPN, klasyfikacja ROI, doprecyzowanie ramki ograniczającej oraz końcowy cel optymalizacji, znajduje się w Supplementary File 1.

Algorytm S1 przedstawia szczegółowy schemat detekcji komponentów i ekstrakcji strukturalnej (Plik uzupełniający 1). Opisuje on kompletny proces automatycznego wykrywania komponentów interfejsu użytkownika (UI) oraz ekstrakcji struktury z surowego obrazu ekranu. Obraz wejściowy jest najpierw poddawany wstępnej obróbce, a następnie przekazywany do sieci CNN (backbone) w celu ekstrakcji głębokich cech wizualnych. Cechy te są wykorzystywane przez RPN do generowania kandyd own ramek ograniczających, które następnie są doprecyzowane poprzez klasyfikację i regresję. NMS usuwa nadmiarowe detekcje, aby zapewnić dokładną lokalizację. Po detekcji komponenty są grupowane na podstawie bliskości przestrzennej przy użyciu algorytmu DBSCAN (density-based spatial clustering of applications with noise). Ten etap klastrowania umożliwia budowę hierarchicznego drzewa UI, które odzwierciedla relacje rodzic–dziecko oraz logiczne grupowanie komponentów. Taka reprezentacja hierarchiczna stanowi podstawę dla późniejszej analizy układu i zrozumienia UI. Rysunek 2 ilustruje proces detekcji komponentów za pomocą Faster R-CNN na ekranie mobilnego UI. Interfejs wejściowy (po lewej) zawiera elementy UI, takie jak przyciski i bloki tekstu, które są automatycznie obramowane ramkami ograniczającymi. Wykryte obszary są następnie klasyfikowane do kategorii komponentów (np. Przycisk i Tekst), co wskazują opisane połączenia. Moduł detekcji Faster R-CNN (po prawej) doprecyzowuje współrzędne ramek ograniczających, przypisuje etykiety semantyczne i generuje ustrukturyzowane informacje na poziomie komponentów. Krok ten stanowi kluczowy fundament dla procesów końcowych, w tym ekstrakcji układu, optymalizacji poznawczej i generowania prototypów UI, dostarczając dokładnych i semantycznie znaczących reprezentacji komponentów interfejsu użytkownika.

figure-protocol-2
Rysunek 2. Wykrywanie komponentów elementów interfejsu użytkownika przy użyciu Faster R-CNN. Rysunek przedstawia wykrywanie komponentów interfejsu użytkownika na podstawie zrzutu ekranu interfejsu wejściowego. Obszary zainteresowania są identyfikowane za pomocą ramek ograniczających, a elementy takie jak przyciski i pola tekstowe są klasyfikowane przy użyciu Faster R-CNN. Strzałki wskazują przypisanie wykrytych komponentów do odpowiadających im etykiet semantycznych. Kliknij tutaj, aby wyświetlić powiększoną wersję tego rysunku.

Ekstrakcja wzorców układu i modelowanie hierarchiczne

Po wykryciu komponentów za pomocą Faster R-CNN każdy element interfejsu użytkownika (UI) jest reprezentowany przez ramkę ograniczającą (bounding box). Same ramki ograniczające nie przekazują jednak informacji o tym, jak elementy są zorganizowane strukturalnie w obrębie interfejsu, na przykład które z nich należą do nagłówków, pasków nawigacji lub zgrupowanych obszarów treści. Aby rozwiązać ten problem, wykryte komponenty są przekształcane w logiczne drzewo UI, w którym każdy komponent jest traktowany jako węzeł, a komponenty powiązane funkcjonalnie lub wizualnie są grupowane pod wspólnymi węzłami nadrzędnymi. W celu identyfikacji istotnych grup układu stosuje się techniki klasteryzacji, takie jak DBSCAN lub hierarchiczna klasteryzacja aglomeracyjna. Metody te analizują bliskość przestrzenną oraz wzorce wyrównania komponentów, aby wykryć relacje między elementami UI. W sposób analogiczny do praktyk projektowych stosowanych przez ludzi, system uczy się rozpoznawać powszechne wzorce strukturalne, takie jak nagłówki, stopki, siatki i bloki treści. Po ustaleniu grupowania analizowane są dodatkowe właściwości strukturalne — w tym wyrównanie, organizacja siatki i kolejność czytania — w celu zbudowania kompleksowej reprezentacji układu. Na przykład komponenty wyrównane w kolumnach o tej samej szerokości mogą wskazywać na układ oparty na kartach, podczas gdy elementy ułożone pionowo mogą wskazywać na interfejs oparty na formularzu lub kanale aktualności. Poprzez integrację klasteryzacji, wnioskowania przestrzennego i reguł wyrównania, framework buduje hierarchiczne drzewo UI, które oddaje zarówno grupowanie wizualne, jak i relacje funkcjonalne. Ta hierarchiczna reprezentacja służy jako podstawa do późniejszego doprecyzowania układu i modelowania spójności wieloekranowej, umożliwiając systemowi generowanie ustrukturyzowanych, spójnych i zorientowanych na użytkownika projektów interfejsów.

Szczegółowe sformułowania dotyczące odległości przestrzennej i podobieństwa wyrównania znajdują się w Pliku uzupełniającym 1.

Klasteryzacja dla grupowania układu (DBSCAN)

W celu zidentyfikowania grup układów zastosowano algorytm DBSCAN. DBSCAN wykorzystuje dwa parametry: (1) ε = maksymalna odległość między sąsiadującymi komponentami oraz (2) = minimalna liczba komponentów wymagana do utworzenia klastra. W tej analizie parametry DBSCAN zostały dobrane empirycznie na podstawie znormalizowanej rozdzielczości interfejsu użytkownika (480 × 800 pixels). Parametr odległości sąsiedztwa ustawiono na ε = 50 pixels, aby uchwycić bliskość przestrzenną między sąsiednimi komponentami interfejsu użytkownika. Minimalna liczba punktów wymagana do utworzenia klastra została ustawiona na MinPts = 3, aby uniknąć tworzenia nieistotnych lub pozornych grup komponentów interfejsu użytkownika.

Szczegółowa formuła konstrukcji logicznego drzewa interfejsu użytkownika została przedstawiona w Pliku uzupełniającym 1.

Percepcyjne modelowanie barw z wykorzystaniem CAM02-UCS

Percepcyjne modelowanie kolorów zapewnia, że barwy zastosowane w generowanym interfejsie użytkownika (UI) są harmonijne, czytelne i efektywne poznawczo. Dominujące kolory są wyodrębniane ze źródeł wejściowych, takich jak obrazy UI, przy użyciu technik klastrowania. W szczególności zastosowano klastrowanie K-means z inicjalizacją K-means++ przez 300 iteracji w celu uzyskania reprezentatywnych palet kolorystycznych. Jednak przestrzeń barw RGB nie odzwierciedla dokładnie ludzkiej percepcji wzrokowej, co oznacza, że kolory numerycznie podobne mogą wydawać się percepcyjnie różne. Aby rozwiązać ten problem, wszystkie wyodrębnione kolory są przekształcane do przestrzeni CAM02-UCS, która jest percepcyjnie jednorodna. W tej przestrzeni równe odległości odpowiadają równym postrzeganym różnicom kolorów, co czyni ją odpowiednią do modelowania harmonii i kontrastu barw. Po zmapowaniu do CAM02-UCS percepcyjne różnice kolorów są obliczane za pomocą odległości euklidesowej, co umożliwia systemowi kwantyfikację kontrastu, harmonii oraz zróżnicowania między kolorami. Kolory zbyt podobne są rozdzielane w celu poprawy czytelności, natomiast kolory o zbyt dużym kontraście są łagodzone, aby uniknąć dyskomfortu wizualnego. Wygenerowana paleta jest zgodna ze standardami dostępności, takimi jak WCAG AA i AAA, co zapewnia wystarczający kontrast między elementami pierwszego planu a tłem. Ponadto harmonię kolorystyczną wymusza ograniczenie relacji w palecie do schematów komplementarnych, analogicznych lub triadycznych, w zależności od zamierzonego motywu UI. Gwarantuje to, że wynikowa paleta kolorów jest nie tylko atrakcyjna wizualnie, ale także funkcjonalnie dostępna i zoptymalizowana poznawczo. W celu dalszego udoskonalenia palety stosowany jest proces optymalizacji przy zachowaniu ograniczeń dotyczących podobieństwa percepcyjnego, kontrastu, harmonii i spójności marki. Wybierany jest kolor podstawowy (np. z identyfikacji wizualnej marki), a kolory wtórne są korygowane pod kątem luminancji i chromy, aby zachować hierarchię wizualną. Mechanizm ewaluacji oparty na regułach ocenia potencjalne palety na podstawie odległości percepcyjnych i metryk dostępności, minimalizując obciążenie poznawcze przy jednoczesnym zachowaniu równowagi estetycznej. W rezultacie opracowany model generuje schematy kolorów UI wykazujące spójność, czytelność i jednolitość percepcyjną na poziomie profesjonalnym.

Szczegółowe wyrażenia matematyczne dla modelowania percepcji barw w oparciu o CAM02-UCS znajdują się w Pliku uzupełniającym 1.

Algorytm S2 (Plik uzupełniający 1) opisuje proces ekstrakcji i optymalizacji percepcyjnych kolorów w oparciu o CAM02-UCS przy zachowaniu ograniczeń dotyczących harmonii i dostępności. W pierwszej kolejności z obrazu wejściowego ekstrahowane są kolory dominujące, które następnie są transformowane do przestrzeni CAM02-UCS, aby zapewnić zgodność różnic kolorystycznych z ludzką percepcją. Odległości percepcyjne między kolorami są następnie obliczane i ograniczane do zdefiniowanych zakresów w celu zachowania przejrzystości i harmonii. Następnie egzekwowana jest dostępność poprzez ocenę współczynników kontrastu luminancji zgodnie z wytycznymi WCAG. Końcowa paleta jest uzyskiwana poprzez optymalizację połączonej funkcji celu, która równoważy odstępy percepcyjne, wymagania dotyczące kontrastu oraz ograniczenia harmonii kolorystycznej. Zapewnia to, że wygenerowane schematy kolorów interfejsu użytkownika są nie tylko estetyczne, ale także czytelne, dostępne i percepcyjnie spójne.

Optymalizacja projektu poznawczego

Optymalizacja projektu kognitywnego zapewnia, że automatycznie generowane prototypy interfejsu użytkownika (UI) są nie tylko spójne wizualnie, ale także łatwe do zrozumienia i obsługi. Moduł ten integruje kluczowe zasady projektowania kognitywnego, w tym zasady Gestalt, prawo Fittsa oraz prawo Hicksa, aby kierować rozmieszczeniem, grupowaniem i odstępami między komponentami UI. Szczegółowe sformułowania matematyczne dotyczące optymalizacji projektu kognitywnego znajdują się w Pliku uzupełniającym 1.

Zintegrowany cel optymalizacji poznawczej

Wyrażenie matematyczne dla zintegrowanego celu optymalizacji poznawczej znajduje się w Pliku uzupełniającym 1. Współczynniki reprezentujące znaczenie grupowania wizualnego, efektywności interakcji oraz złożoności decyzji oznaczone są odpowiednio przez alfa, beta i gamma. W niniejszym badaniu wartości alfa, beta i gamma zostały wyznaczone empirycznie przy użyciu zestawu danych walidacyjnych. W przypadku obecnego eksperymentu współczynniki ustalono następująco: α = 0.5, β = 0.3 i γ = 0.2. Taka konfiguracja zapewnia efektywną równowagę między grupowaniem wizualnym, efektywnością interakcji a prostotą podejmowania decyzji.

Spójność wieloekranowa i generowanie interfejsu użytkownika

Modelowanie spójności wieloekranowej zapewnia, że różne ekrany w aplikacji dzielą spójną tożsamość wizualną, układ strukturalny i wzorce interakcji. Podczas nawigowania użytkowników między ekranami, wykształcają oni oczekiwania dotyczące rozmieszczenia elementów, typografii, odstępów i hierarchii wizualnej. Aby sprostać tym oczekiwaniom, system analizuje wzorce międzyekranowe przy użyciu szablonów pochodzących ze zbiorów danych RICO i ENRICO. Szablony te obejmują typowe struktury interfejsu użytkownika (UI), takie jak układy główny–szczegółowy, wzorce lista–szczegóły, formularze wielokrokowe oraz przepływy paneli sterowania. Poprzez porównywanie rozmieszczenia komponentów i zachowań grupowania, system konstruuje międzyekranowy profil strukturalny, który identyfikuje elementy, które powinny pozostać spójne, oraz te, które mogą ulegać zmianom. Po zidentyfikowaniu wzorców strukturalnych, framework wymusza spójność skal typograficznych, proporcji odstępów, układów siatek oraz punktów zakotwiczenia nawigacji. Przykładowo, paski nagłówka utrzymują stałą wysokość, przyciski główne zachowują jednolity rozmiar i wyrównanie, a bloki treści podążają za przewidywalną kolejnością wizualną. Jest to osiągane poprzez proces regularyzacji układu, który ocenia każdy ekran w odniesieniu do globalnych ograniczeń strukturalnych. Jeśli ekran odbiega od wyuczonych szablonów – na przykład poprzez niespójne margnesy wewnętrzne lub niewyrównane tytuły – system automatycznie koryguje układ, aby przywrócić spójność. Korekty te pomagają zapewnić płynne UX i redukują koszty poznawcze związane ze zmianą kontekstu między ekranami. Framework dodatkowo analizuje graf nawigacyjny między ekranami, aby utrzymać spójność przepływu interakcji. Identyfikowane są i egzekwowane typowe wzorce nawigacji, w tym przejścia do przodu/do tyłu, nawigacja kartowa oraz wielokrokowe przepływy pracy. Każde przejście jest walidowane w celu zapewnienia zgodności z modelem mentalnym użytkownika, co poprawia użyteczność i redukuje dezorientację. W rezultacie model spójności wieloekranowej minimalizuje szum wizualny, zwiększa intuicyjność i promuje jednolity proces interakcji.

Szczegółowe sformułowania matematyczne dotyczące spójności wieloekranowej oraz generowania interfejsu użytkownika znajdują się w Pliku uzupełniającym 1.

Na koniec silnik renderujący generuje wyjścia wizualne w formatach takich jak makiety schematyczne SVG, prototypy HTML/CSS lub rastrowe makiety interfejsu użytkownika (UI). Powstałe ekrany interfejsu użytkownika wykazują prawidłową kolejność odczytu, harmonijne relacje kolorystyczne, precyzyjne wyrównanie do siatki oraz spójną hierarchię wizualną na wielu ekranach.

Algorytm S3 przedstawia proces optymalizacji poznawczo-wizualnego układu oraz przepływ pracy zapewniający spójność wieloekranową (Plik uzupełniający 1). Algorytm S3 opisuje zintegrowany proces optymalizacji poznawczej i strukturalnej wykorzystywany do generowania przyjaznych dla użytkownika układów interfejsu UI. Łączy on grupowanie percepcyjne (zasady Gestalt), efektywność interakcji (prawo Fittsa) oraz prostotę podejmowania decyzji (prawo Hicksa) w ramach jednolitego schematu optymalizacji. W pierwszej kolejności oceniane są relacje przestrzenne między komponentami w celu ustanowienia grup percepcyjnych. Następnie optymalizuje się efektywność interakcji poprzez dostosowanie rozmiaru i rozmieszczenia komponentów, podczas gdy złożoność decyzji jest kontrolowana poprzez ograniczenie liczby opcji prezentowanych użytkownikom. Ponadto algorytm wymusza spójność wieloekranową, dopasowując każdy ekran do wyuczonych szablonów układów, co zapewnia jednolitość typografii, odstępów i organizacji strukturalnej. Wielokryterialna funkcja optymalizacji doprecyzowuje następnie układ, balansując wyrównanie, odstępy i koszt poznawczy, co skutkuje interfejsem, który jest jednocześnie spójny wizualnie i efektywny poznawczo. W ogólnym ujęciu algorytm ten gwarantuje, że generowane układy wieloekranowe zachowują wysoki poziom spójności wizualnej, użyteczności i klarowności percepcyjnej.

Wyniki

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Zaproponowany zautomatyzowany framework prototypowania interfejsów użytkownika (UI) oceniono przy użyciu zintegrowanego zbioru danych obejmującego 5 128 ekranów UI z trzech źródeł: 4 000 obrazów RICO, 1 000 ekranów ENRICO oraz 128 próbek UI z adnotacjami kolorystycznymi z zestawu danych UI Color Dataset autorstwa Guo. Ten mieszany zbiór danych stanowi dobrze zrównoważony punkt odniesienia do oceny dokładności wykrywania komponentów, przejrzystości struktury układu, spójności między ekranami oraz percepcyjnej harmonii kolorystycznej.

Wyniki eksperymentów wykazują, że model detekcji oparty na Faster R-CNN osiąga dokładność wykrywania komponentów na poziomie 92,4% i skutecznie generalizuje wyniki w obrębie różnych stylów interfejsów użytkownika (UI) urządzeń mobilnych. Ponadto włączenie adnotacji wzorców ENRICO poprawia rozumowanie dotyczące układu, co skutkuje wzrostem przejrzystości layoutu o 18,7% oraz lepszym zachowaniem kolejności czytania. W eksperymentach z oceny koloru moduł modelowania barw oparty na CAM02-UCS generuje palety, które według ocen projektantów są o 24,5% bardziej harmonijne i osiągają wyższą jednolitość percepcyjną w porównaniu z tradycyjnymi metodami generowania palet w przestrzeniach RGB i LAB. Co więcej, modelowanie spójności wieloekranowej pozwala na 28-procentową poprawę wyrównania między ekranami oraz spójności typograficznej. Badania z udziałem 30 uczestników wykazują 31-procentową redukcję postrzeganego obciążenia poznawczego podczas interakcji z prototypami stworzonymi przez proponowany system. Wspólnie wyniki te wskazują, że połączenie detekcji komponentów, percepcyjnego modelowania barw i optymalizacji poznawczej pozwala na tworzenie prototypów UI, które są nie tylko strukturalnie dokładne, ale także wizualnie spójne i wydajne poznawczo. Tabela 3 przedstawia środowisko symulacyjne i ustawienia techniczne wykorzystane do oceny proponowanego frameworka prototypowania UI. Obliczeniowo wymagające procedury trenowania modelu Faster R-CNN oraz modułów spójności układu były wspierane przez wysokowydajny procesor graficzny NVIDIA RTX 4090 GPU. Wszystkie eksperymenty przeprowadzono w środowisku Ubuntu 22.04 z wykorzystaniem PyTorch 2.0 do implementacji głębokiego uczenia.

Parametr	Konfiguracja
Sprzęt	GPU NVIDIA RTX 4090 (24 GB), procesor Intel i9, 64 GB RAM
System operacyjny	Ubuntu 22.04 LTS
Środowisko głębokiego uczenia	PyTorch 2.0
Szkielet sieci Faster R-CNN	ResNet-50 + FPN
Rozdzielczość obrazu	480 × 800 (znormalizowane dla wszystkich zbiorów danych)
Wielkość partii treningowej	8
Optymalizator	AdamW (LR = 1e−4, Weight Decay = 0,01)
Epoki	40
Przestrzeń modelowania barw	CAM02-UCS
Klasteryzacja w celu ekstrakcji palety barw	Metoda K-średnich (k = 5)
Klastrowanie układu	DBSCAN (przestrzenne grupowanie gęstościowe z szumem)ε = 20, min_samples = 3)

Tabela 3: Parametry implementacji i konfiguracja eksperymentalna proponowanego frameworka. Tabela podsumowuje konfigurację sprzętową i programową wykorzystaną do trenowania i ewaluacji modelu, w tym zasoby obliczeniowe, system operacyjny, framework głębokiego uczenia, architekturę modelu, rozdzielczość obrazu, parametry trenowania, strategię optymalizacji, przestrzeń modelowania kolorów oraz metody klastrowania użyte do ekstrakcji palety i grupowania układu.

Architektura Faster R-CNN wykorzystuje szkielet ResNet-50 z FPN w celu wykrywania szerokiego zakresu drobnoziarnistych komponentów interfejsu użytkownika (UI). Przed przetwarzaniem wszystkie obrazy UI są jednolicie zmieniane na rozmiar 480 × 800 pikseli. Trening przeprowadzono przez 60 epok przy użyciu optymalizatora SGD, z rozmiarem partii wynoszącym 16, aby zapewnić stabilną zbieżność. Generator palety barw wykorzystuje CAM02-UCS z klastrowaniem K-średnich, natomiast DBSCAN jest stosowany do klastrowania układu strukturalnego. Te ustawienia techniczne gwarantują, że wygenerowane wyniki UI są powtarzalne, stabilne i wysokiej jakości. Aby zapewnić kompleksową ocenę proponowanego zautomatyzowanego frameworka prototypowania UI, zastosowano cztery kategorie metryk ewaluacyjnych:

i) wydajność detekcji komponentów, analizowana przy użyciu precyzji (precision), pełności (recall), miary F1 (F1-score), współczynnika IoU (intersection-over-union) oraz średniej precyzji (mAP), które określają dokładność modelu Faster R-CNN w identyfikacji komponentów interfejsu użytkownika w zbiorach danych RICO i ENRICO;

ii) Przejrzystość układu i spójność strukturalna, mierzone za pomocą błędu wyrównania (AE), dokładności grupowania, poprawności kolejności odczytu oraz wyników spójności międzyekranowej wynikających z ograniczeń wzorców projektowych;

iii) Percepcyjna jakość koloru, oceniana za pomocą percepcyjnej odległości CAM02-UCS (ΔE_UCS), współczynników kontrastu WCAG 2.1, indeksu różnorodności oraz wyników harmonii barw zainspirowanych ramami oceny kolorów interfejsu użytkownika według Guo;

iv) Mierniki efektywności poznawczej skoncentrowane na użytkowniku, w tym obciążenie poznawcze mierzone za pomocą wskaźnika NASA task load index (NASA-TLX), oceny spójności estetycznej oraz efektywność wykonania zadania.

Metryki te umożliwiają ocenę ramy nie tylko pod kątem dokładności detekcji, ale także harmonii percepcyjnej, jakości użyteczności oraz doświadczenia poznawczego.

Metryki detekcji komponentów

Precyzja opisuje dokładność modelu w przewidywaniu komponentów UI bez generowania wyników fałszywie dodatnich. Wysoka precyzja oznacza, że większość przewidzianych ramek ograniczających odpowiada poprawnym elementom UI. Czułość mierzy zdolność modelu do zidentyfikowania wszystkich istotnych komponentów UI na ekranie. Wysoka czułość wskazuje, że model skutecznie wykrywa większość komponentów z zestawu danych referencyjnych (ground-truth). Wskaźnik F1, zdefiniowany jako średnia harmoniczna precyzji i czułości, zapewnia zrównoważoną ocenę i jest szczególnie użyteczny, gdy komponenty UI są nierównomiernie rozłożone w zbiorach danych.

Metryka IoU mierzy, w jakim stopniu przewidziany ograniczający prostokąt (bounding box) pokrywa się z prostokątem referencyjnym (ground truth). W zadaniach detekcji obiektów progi IoU wynoszące 0,5 oraz 0,75 są powszechnie stosowane do reprezentowania umiarkowanych i rygorystycznych warunków ewaluacji. mAP podsumowuje wydajność detekcji dla wielu progów IoU. Metryka mAP@0,5:0,95 zapewnia bardziej solidną ewaluację poprzez uśrednienie precyzji dla progów od 0,5 do 0,95 w krokach co 0,05 i jest dlatego powszechnie akceptowana jako standardowy punkt odniesienia dla detekcji obiektów.

Wyniki detekcji w trzech zbiorach danych wskazują, że zaproponowany moduł detekcji komponentów działa konsekwentnie dobrze. Wyniki ilościowe przedstawiono w Tabeli 4. Zbiór danych RICO osiąga najwyższą wydajność, z precyzją (precision) 0,91, czułością (recall) 0,88 i wynikiem F1 (F1-score) 0,89, co wynika z jego dużego i zróżnicowanego zestawu adnotacji komponentów UI. ENRICO wykazuje nieco niższe wyniki ze względu na bardziej uproszczoną strukturę i mniejszą liczbę adnotowanych typów komponentów. Zbiór danych Guo odnotowuje najniższy wynik F1 (0,81), co prawdopodobnie wynika z większej zmienności wizualnej i mniejszej liczby zestandaryzowanych wzorców układu, co utrudnia detekcję. Ogólnie wyniki te potwierdzają, że model utrzymuje stabilną wydajność detekcji komponentów w różnych stylach projektowania UI i charakterystykach zbiorów danych.

Zbiór danych	Precyzja	Czułość	Wskaźnik F1
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tabela 4: Wyniki detekcji komponentów w różnych zbiorach danych. Tabela przedstawia precyzję, pełność (recall) oraz miarę F1 dla detekcji komponentów interfejsu użytkownika w zbiorach danych RICO, ENRICO i Guo, wykazując skuteczność modelu detekcji.

Rysunek 3 przedstawia wydajność modelu dla zbiorów danych RICO, ENRICO i Guo przy progach IoU wynoszących 0,5 oraz 0,75. Zgodnie z oczekiwaniami, wartości mAP są wyższe przy IoU 0,5 ze względu na mniej rygorystyczny wymóg nakładania się obszarów. Zbiór RICO konsekwentnie wykazuje najwyższe wartości mAP (0,89 przy IoU 0,5 i 0,78 przy IoU 0,75), co odzwierciedla bogactwo i spójność jego adnotacji. ENRICO wykazuje nieco niższe wartości, natomiast zbiór Guo raportuje najniższe wyniki ze względu na większą zmienność stylu układu i gęstości komponentów. Tendencja spadkowa przy bardziej rygorystycznych progach IoU ilustruje, że złożoność zbioru danych bezpośrednio wpływa na odporność detekcji.

figure-results-1
Rysunek 3. Średnia precyzja średnia (mAP) dla progów wezwania nad częścią wspólną (IoU) wynoszących 0,5 i 0,75 w różnych zbiorach danych. Wykres liniowy porównuje wydajność detekcji komponentów w zbiorach danych RICO, ENRICO i Guo. Oś x reprezentuje zbiory danych, a oś y wartości mAP. Dwie krzywe odpowiadają progom IoU 0,5 i 0,75, ilustrując zmienność wydajności przy różnych poziomach rygorystyczności detekcji. Kliknij tutaj, aby zobaczyć powiększoną wersję tego rysunku.

Rycina 4 przedstawia mAP@IoU(0.5:0.95) dla każdego zbioru danych, zapewniając szerszą ocenę wydajności detekcji w dziesięciu progach IoU. Wyniki wykazują wyraźną tendencję spadkową od RICO (0,61) przez ENRICO (0,57) do Guo (0,52), co potwierdza, że zaproponowany model detekcji generalizuje najlepiej w przypadku większych i bardziej ustrukturyzowanych zbiorów danych. Ta bardziej rygorystyczna uśredniona metryka uwydatnia subtelne pogorszenia wydajności, które mogły nie być widoczne przy ocenie z pojedynczym progiem. Wyniki te wskazują, że choć model wykazuje wysoką skuteczność we wszystkich zbiorach danych, zwiększona różnorodność układów i zmienność komponentów wprowadzają dodatkowe wyzwania w ramach rygorystycznej oceny w stylu COCO. Wyniki detekcji przedstawiono na Rycinnach 3 i 4, które dostarczają ilościowych porównań mAP dla różnych poziomów IoU.

figure-results-2
Rycina 4. Średnia precyzja średnia (mAP) uśredniona dla progów współczynnika IoU (intersection over union) od 0,5 do 0,95 dla różnych zbiorów danych. Wykres liniowy przedstawia wydajność detekcji komponentów w zbiorach danych RICO, ENRICO oraz Guo przy użyciu metryki mAP uśrednionej dla progów IoU w zakresie od 0,5 do 0,95. Oś x reprezentuje zbiory danych, a oś y wskazuje odpowiadające im wartości mAP podane w skali 0–1, odzwierciedlając wydajność modelu przy różnych progach detekcji. Kliknij tutaj, aby zobaczyć powiększoną wersję tej ryciny.

Metryki jakości układu

Jakość układu jest oceniana za pomocą AE, dokładności grupowania (GA) oraz dokładności kolejności odczytu (ROA), które wspólnie oceniają poprawność strukturalną, organizację percepcyjną oraz poznawczą czytelność wygenerowanych układów interfejsu użytkownika (UI).

Błąd wyrównania.

AE (odchylenie oparte na pikselach) wskazuje, jak dobrze elementy interfejsu użytkownika (UI) są wyrównane względem idealnych linii wyrównania, takich jak prowadnice lewa, prawa, górna lub linia bazowa. Niższa wartość AE oznacza, że elementy są rozmieszczone konsekwentnie przy minimalnych zniekształceniach wizualnych, co poprawia czytelność i ogólną przejrzystość projektu. Metryka ta jest szczególnie istotna przy ocenie rafinacji układu poznawczego, ponieważ brak wyrównania zakłóca przepływ wizualny i zwiększa postrzeganą złożoność. Rycina 5 przedstawia AE dla zbiorów danych RICO, ENRICO i Guo, mierzone jako średnie odchylenie w pikselach od idealnych linii wyrównania. Wyniki pokazują, że RICO osiąga najniższą wartość AE (4,2 px), co wskazuje, że komponenty UI w tym zbiorze danych wykazują bardziej spójne wzorce strukturalne, co ułatwia modelowi wyrównanie. ENRICO wykazuje umiarkowane odchylenie wyrównania wynoszące 6,1 px, co odzwierciedla kombinację dobrze ustrukturyzowanych i zróżnicowanych układów ekranów. Zbiór danych Guo odnotowuje najwyższą wartość AE (7,4 px) ze względu na większą różnorodność w rozmieszczeniu komponentów oraz niestandardowe struktury układów, które stanowią wyzwanie dla rafinacji opartej na wyrównaniu. Ogólnie rzecz biorąc, wyniki te dowodzą, że model utrzymuje wysoką dokładność wyrównania we wszystkich zbiorach danych, pomimo rosnącej złożoności układu.

figure-results-3
Rysunek 5. Błąd dopasowania w obrębie zbiorów danych. Rysunek przedstawia błąd dopasowania w obrębie zbiorów danych; niższe wartości wskazują na lepsze dopasowanie. Kliknij tutaj, aby wyświetlić powiększoną wersję tego rysunku.

Dokładność grupowania (GA).

GA kwantyfikuje, jak skutecznie model grupuje powiązane komponenty UI, na przykład w oparciu o zasady Gestalt, takie jak bliskość, podobieństwo i ciągłość. Wyższa dokładność grupowania wskazuje, że model zachowuje zamierzoną strukturę elementów UI, co pozwala użytkownikom na bardziej naturalną interpretację interfejsu. Metryka ta jest szczególnie użyteczna przy ocenie, czy moduł doprecyzowania układu skutecznie organizuje treści w sensowne grupy wizualne. Rysunek 6 przedstawia rozkład GA osiągnięty przez proponowany framework w trzech zbiorach danych. Zbiór danych ENRICO wykazuje najwyższą medianę GA oraz najmniejszy rozstęp międzykwartylowy, co wskazuje na stabilną i spójną wydajność grupowania ze względu na dobrze zdefiniowane układy z etykietami wzorców. Zbiór danych RICO wykazuje umiarkowaną dokładność grupowania przy większej zmienności, co prawdopodobnie wynika z większej różnorodności i złożoności układów. Zbiór danych Guo UI Color odnotowuje niższą dokładność grupowania, ponieważ jego próbki są wizualnie heterogeniczne i w mniejszym stopniu skupione na strukturze układu. Ogólnie wyniki wskazują, że moduł kognitywnego doprecyzowania układu działa niezawodnie we wszystkich zbiorach danych, osiągając najlepsze wyniki grupowania na danych o spójnej strukturze.

figure-results-4
Rycina 6. Rozkład dokładności grupowania w różnych zbiorach danych. Wykres pudełkowy przedstawia dokładność grupowania w oparciu o zasady Gestalt dla zbiorów danych RICO, ENRICO oraz UI Color opracowanego przez Guo. Pudełka reprezentują rozstęp międzykwartylowy, linia środkowa wskazuje medianę, a wąsy oznaczają zakres wartości. Oś x reprezentuje zbiory danych, a oś y pokazuje wyniki dokładności grupowania. Wielkość próby n=5128 ekranów interfejsu użytkownika (RICO: 4000, ENRICO: 1000 i Guo: 128). Prosimy kliknąć tutaj, aby wyświetlić powiększoną wersję tej ryciny.

Dokładność kolejności odczytu (ROA).

Dokładność kolejności odczytu (ROA) mierzy, jak precyzyjnie model przewiduje naturalny przepływ odczytu ekranu interfejsu użytkownika (UI), który zazwyczaj przebiega od góry do dołu i od lewej do prawej. Zachowanie prawidłowej kolejności odczytu jest kluczowe dla użyteczności, przejrzystości nawigacji oraz spójności z ustalonymi konwencjami projektowymi. Wyższa wartość ROA wskazuje, że system zachowuje oczekiwane poznawcze wzorce skanowania. Rysunek 7 przedstawia ROA na różnych etapach oceny dla zbiorów danych RICO, ENRICO i Guo. Zbiór ENRICO konsekwentnie osiąga najwyższą ROA dzięki regularnej i zorientowanej na wzorce strukturze układu, co umożliwia dokładniejsze przewidywanie sekwencji odczytu zbliżonych do ludzkich. RICO wykazuje umiarkowaną wydajność z niewielką zmiennością, co odzwierciedla jego większą różnorodność i złożoność rzeczywistą. Zbiór danych Guo wykazuje najniższą ROA, ponieważ wiele z jego ekranów jest bogatych wizualnie, ale brakuje im jasno zdefiniowanych hierarchii odczytu. Ogólnie rzecz biorąc, wyniki te wskazują, że proponowany moduł udoskonalania układu poznawczego działa najpewniej w przypadku ustrukturyzowanych zbiorów danych, zachowując jednocześnie stabilne przewidywania kolejności odczytu w różnorodnych projektach UI.

figure-results-5
Rysunek 7. Dokładność kolejności odczytu w poszczególnych etapach ewaluacji dla wielu zbiorów danych. Wykres liniowy przedstawia dokładność kolejności odczytu na poszczególnych etapach ewaluacji dla zbiorów danych RICO, ENRICO oraz Guo’s UI Color. Oś x reprezentuje etap ewaluacji, a oś y wskazuje dokładność kolejności odczytu. Każda krzywa odpowiada jednemu zbiorowi danych, ilustrując zmiany w zachowaniu przepływu wizualnego w kolejnych etapach ewaluacji. Etap ewaluacji stanowi reprezentację progresywnych etapów udoskonalania sugerowanego schematu. Aby wyświetlić powiększoną wersję tego rysunku, kliknij tutaj.

Wskaźnik spójności układu (LCS)

Wskaźnik spójności układu (layout consistency score, LCS) mierzy, w jakim stopniu wygenerowane układy interfejsu użytkownika są utrzymane w sposób spójny na wielu ekranach w obrębie tej samej aplikacji. Obejmuje to spójność odstępów, reguł wyrównania, obszarów typograficznych oraz wzorców grupowania. Wyższy wynik wskazuje na lepszą kohezję międzyekranową, co przekłada się na bardziej jednolity i intuicyjny UX. Rycina 8 przedstawia LCS zmierzony na wielu etapach ewaluacji dla zbiorów danych RICO, ENRICO oraz Guo’s UI Color. Zbiór danych ENRICO konsekwentnie osiąga najwyższe wartości LCS dzięki opisanym wzorcami i strukturalnie jednolitym ekranom UI, co ułatwia stabilniejszą naukę spójności międzyekranowej. W przeciwieństwie do niego, zbiór RICO wykazuje umiarkowaną, lecz stale poprawiającą się spójność, co przypisać można zdolności modelu do generalizacji w obrębie bardzo zróżnicowanych układów UI. Zgodnie z oczekiwaniami, zbiór Guo odnotowuje najniższe wartości LCS, ponieważ koncentruje się on przede wszystkim na charakterystyce kolorystycznej, a nie na układzie strukturalnym, co utrudnia uzyskanie spójności wieloekranowej. Ogólnie rzecz biorąc, wyniki te wskazują, że proponowany moduł spójności międzyekranowej działa najskuteczniej na zbiorach danych zorientowanych na wzorce, zapewniając jednocześnie mierzalną poprawę we wszystkich analizowanych zbiorach.

figure-results-6
Rycina 8. Wynik spójności układu w poszczególnych etapach oceny dla wielu zbiorów danych. Wykres liniowy przedstawia wyniki spójności układu w etapach oceny dla zbiorów danych RICO, ENRICO i Guo’s UI Color. Oś x reprezentuje etap oceny, a oś y wskazuje wyniki spójności układu. Każda krzywa odpowiada jednemu zbiorowi danych, ilustrując poprawę spójności strukturalnej generowanych interfejsów w kolejnych etapach oceny. Kliknij tutaj, aby wyświetlić powiększoną wersję tej ryciny.

Metryki jakości koloru

Wygenerowane motywy kolorystyczne interfejsu użytkownika (UI) są oceniane przy użyciu pięciu metryk opartych na percepcji, pochodnych z CAM02-UCS: ΔE (percepcyjna różnica kolorów), która określa jednorodność percepcyjną między kolorami palety; współczynnika kontrastu (na podstawie WCAG 2.1), który ocenia czytelność między elementami pierwszego planu i tła; indeksu harmonii kolorów (CHI), który mierzy estetyczną kompatybilność odcieni; wskaźnika różnorodności kolorów (CDS), który odzwierciedla wariancję w percepcyjnej przestrzeni barw; oraz wskaźnika dominacji kolorów (CPS), który ocenia równowagę i dominację kolorów w obrębie palety. Wspólnie metryki te zapewniają kompleksową ocenę zarówno jakości estetycznej, jak i wydajności kolorystycznej zorientowanej na użyteczność. Wyniki wykazują, że proponowana metoda osiąga niższą wartość ΔE wynoszącą 4,12, co wskazuje na poprawioną jednorodność percepcyjną kolorów. Współczynnik kontrastu na poziomie 6,21 potwierdza zgodność ze standardami dostępności, zapewniając zwiększoną czytelność. Tabela 5 przedstawia ilościowe porównanie proponowanego modułu modelowania kolorów z metodami bazowymi. Wartość CHI wzrasta z 0,61 do 0,83, co wskazuje na poprawioną spójność estetyczną przejść tonalnych. Ponadto CDS wzrasta o ponad 50%, co dowodzi, że wygenerowane palety zachowują bogatszą różnorodność bez wprowadzania chaosu wizualnego. Wyższe wartości CPS wskazują na zrównoważony rozkład kolorów dominujących, zapobiegając przesyceniu przez pojedynczy odcień. Ogólnie wyniki te potwierdzają skuteczność modułu modelowania kolorów opartego na CAM02-UCS w generowaniu harmonijnych, czytelnych i zoptymalizowanych percepcyjnie schematów kolorystycznych UI.

Metryka	Definicja	Proponowana metoda	Poziom wyjściowy¹	Poprawa (%)
ΔE (CAM02-UCS)	Postrzegana różnica kolorów	4.12	7.85	o 47,5% niższe
Współczynnik kontrastu (WCAG)	Czytelność par tło-obiekt (FG–BG)	6.21	4.38	41.80%
CHI (Wskaźnik Harmonii Kolorów)	Barwa & harmonia chromatyczna	0.83	0.61	36.10%
CDS (wskaźnik różnorodności kolorystycznej)	Wariancja w J′a′b′ przestrzeń	18.70	12.40	50.80%
CPS (wskaźnik dominacji kolorystycznej)	Stabilność barw dominujących	0.72	0.55	30.90%

Tabela 5: Ilościowe porównanie wskaźników jakości kolorów pomiędzy proponowaną a bazową metodą. Tabela przedstawia wskaźniki oceny jakości kolorów, w tym percepcyjną różnicę kolorów (ΔE w CAM02-UCS), współczynnik kontrastu (WCAG), indeks harmonii kolorystycznej (CHI), wynik różnorodności kolorów (CDS) oraz wynik dominacji kolorów (CPS). Wyniki proponowanej metody zostały zestawione z wartościami bazowymi wraz z procentowymi poprawami.

Demografia uczestników i projekt badania

W procesie oceny uczestniczyło łącznie 30 osób. Wiek uczestników mieścił się w przedziale od 20 do 35 lat (średnia wieku: 26,4 ± 3,2 lata). Grupa obejmowała osoby o różnym wykształceniu i doświadczeniu, w tym programistów, studentów oraz projektantów UI/UX. Na podstawie deklarowanego poziomu biegłości w obsłudze komputera 40% uczestników sklasyfikowano jako użytkowników średniozaawansowanych, 35% jako zaawansowanych, a 25% jako początkujących. Około połowa uczestników miała wcześniejsze doświadczenie w projektowaniu UI/UX lub w dziedzinach pokrewnych, natomiast pozostali nie posiadali takiego doświadczenia. Taka różnorodność zapewniła zbalansowaną ocenę na różnych poziomach wiedzy technicznej oraz stopniu zaznajomienia z zasadami projektowania.

Metryki badania użytkowników

Przeprowadzono ocenę skoncentrowaną na użytkowniku przy użyciu wielu wskaźników, w tym NASA-TLX, skali użyteczności systemu (SUS), oceny harmonii estetycznej (AHS), czasu efektywności wyszukiwania (SET) oraz oceny spójności międzyekranowej (CSCR), aby ocenić obciążenie poznawcze, użyteczność, atrakcyjność wizualną, efektywność i spójność.

Metryka NASA-TLX kwantyfikuje obciążenie psychiczne poprzez pomiar czynników takich jak wymagania intelektualne, wysiłek i frustracja. Niższe wyniki wskazują na zmniejszone obciążenie poznawcze i większą łatwość interakcji. Zaproponowany framework konsekwentnie skutkował niższymi wynikami w skali NASA-TLX we wszystkich zbiorach danych, co wskazuje na zmniejszenie wysiłku psychicznego. Poprawę tę można przypisać integracji zasad projektowania poznawczego, w tym grupowaniu według zasad Gestalt, zoptymalizowaniu odstępów oraz wzmocnieniu hierarchii wizualnej, co wspólnie ułatwia bardziej intuicyjną nawigację. Metryka SUS zapewnia zestandaryzowaną ocenę użyteczności w zakresie od 0 do 100, gdzie wyższe wartości wskazują na lepszą użyteczność i przejrzystość. Zaproponowany framework osiągnął wyższe wyniki SUS w porównaniu z metodami bazowymi, co odzwierciedla poprawę zarówno w układzie strukturalnym, jak i w przejrzystości kolorystycznej. Ulepszone wyrównanie, odstępy i przepływ nawigacji przyczyniły się do stworzenia interfejsów, które użytkownicy uznali za bardziej intuicyjne i funkcjonalnie spójne. AHS, mierzony w 7-stopniowej skali Likerta, ocenia postrzeganą atrakcyjność wizualną i harmonię kolorystyczną. Interfejsy generowane przy użyciu modułu modelowania kolorów opartego na CAM02-UCS osiągnęły wyższe wartości AHS, co wskazuje na płynniejsze przejścia kolorystyczne i bardziej zrównoważone wizualnie palety. Uczestnicy konsekwentnie preferowali te interfejsy ze względu na lepszy kontrast, spójność odcieni i zmniejszony chaos wizualny, co podkreśla znaczenie percepcyjnego modelowania kolorów w projektowaniu interfejsów użytkownika. SET mierzy czas potrzebny użytkownikom na zlokalizowanie docelowych elementów interfejsu podczas zadań wyszukiwania wizualnego. Niższe wartości SET wskazują na lepszą organizację wizualną i hierarchię. Zaproponowany framework znacząco zredukował SET we wszystkich zbiorach danych, wykazując, że integracja grupowania Gestalt, odstępów sterowanych uwagą oraz udoskonalonych struktur układu umożliwia szybszą i bardziej efektywną interakcję. Metryka CSCR ocenia spójność projektu interfejsu na wielu ekranach. Wyższe wyniki wskazują na lepszą ciągłość w układzie, kolorystyce i organizacji strukturalnej. Zaproponowany framework osiągnął wyższe wartości CSCR, co odzwierciedla skuteczność modułu spójności wieloekranowej w utrzymaniu stabilnych schematów kolorystycznych, odstępów i struktur hierarchicznych w obrębie interfejsów.

Rysunek 9 przedstawia wyniki porównawczego badania użytkowników dla wszystkich metryk (NASA-TLX, SUS, AHS, SET i CSCR) w odniesieniu do zbiorów danych RICO, ENRICO i Guo. Ogólnie rzecz biorąc, we wszystkich metrykach ewaluacyjnych obserwuje się spójne ulepszenia. W szczególności zbiór danych Guo wykazuje lepsze wyniki w metrykach zorientowanych na użytkownika, w tym niższe obciążenie poznawcze (NASA-TLX), wyższą użyteczność (SUS), lepszą harmonię estetyczną (AHS), krótszy czas efektywnego wyszukiwania (SET) oraz lepszą spójność między ekranami (CSCR). Wyniki te wymagają jednak uważnej interpretacji. Poprawa metryk UX zaobserwowana dla zbioru danych Guo wynika przede wszystkim z silnej spójności kolorystycznej i stosunkowo prostszej kompozycji wizualnej, a nie z wyższej jakości układu strukturalnego. Chociaż użytkownicy postrzegają te interfejsy jako bardziej harmonijne wizualnie i mniej obciążające poznawczo, wcześniejsze wyniki pokazują, że zbiór danych Guo wypada słabo pod względem wyrównania, grupowania i kolejności czytania. Podkreśla to istotną różnicę między czynnikami percepcyjnymi a strukturalnymi w projektowaniu interfejsów użytkownika. Podczas gdy atrybuty percepcyjne, takie jak harmonia kolorów, znacząco poprawiają UX, dokładność strukturalna i spójność układu pozostają krytyczne dla funkcjonalnej użyteczności. Zatem optymalny projekt UI wymaga równowagi między harmonią percepcyjną a poprawnością strukturalną.

figure-results-7
Rysunek 9. Porównanie metryk badania użytkowników w różnych zbiorach danych. Grupowy wykres słupkowy porównuje metryki badania użytkowników dla zbiorów danych RICO, ENRICO oraz Guo’s UI Color. Oś X reprezentuje metryki ewaluacyjne, w tym NASA Task Load Index (NASA-TLX), system usability scale (SUS), aesthetic harmony score (AHS), structural efficiency time (SET) oraz cross-screen consistency rate (CSCR), natomiast oś Y wskazuje odpowiadające im wyniki. Słupki przedstawiają wydajność dla każdego zbioru danych, ilustrując różnice w użyteczności, obciążeniu poznawczym, jakości estetycznej oraz spójności interfejsu. NASA-TLX (0–100, im mniej tym lepiej), SUS (0–100, im więcej tym lepiej), AHS (skala Likerta 1–7), SET (s, im mniej tym lepiej) oraz CSCR (0–1, im więcej tym lepiej). Kliknij tutaj, aby wyświetlić powiększoną wersję tego rysunku.

Statystyczna walidacja hipotez

W celu dalszej weryfikacji zaproponowanych hipotez (H1–H4) przeprowadzono testy istotności statystycznej kluczowych mierników oceny, w tym jakości układu, obciążenia poznawczego, harmonii kolorystycznej oraz mierników użyteczności (Tabela 6). Wyniki przedstawiono jako średnią ± odchylenie standardowe, a istotność statystyczną oceniono za pomocą testów t-Studenta dla prób zależnych z 95% przedziałem ufności (p < 0,05). Wyniki wskazują, że proponowane ramy osiągają statystycznie istotną poprawę w stosunku do podejść bazowych w wielu miernikach, w tym w dokładności wyrównania, dokładności grupowania, kolejności czytania, obciążeniu poznawczym (NASA-TLX) oraz miernikach harmonii kolorystycznej. Warto zauważyć, że redukcje obciążenia poznawczego i poprawa mierników użyteczności wykazują wysoce istotne różnice (p < 0,01). Wyniki te potwierdzają, że integracja poznawczych zasad projektowania i percepcyjnego modelowania kolorów prowadzi do mierzalnych, statystycznie istotnych usprawnień jakości UI, co tym samym potwierdza hipotezy H1–H4.

Metryka	Baseline (Średnia ± SD)	Proponowana (Średnia ± SD)	Poprawa (%)	wartość p	Istotność
Błąd dopasowania (↓)	7.8 ± 1.2	4.2 ± 0.9	46.10%	0.003	Istotne
Dokładność grupowania (↑)	0.68 ± 0.05	0.82 ± 0.04	20.50%	0.001	Istotne
Dokładność kolejności odczytu (↑)	0.72 ± 0.06	0.87 ± 0.03	20.80%	0.002	Istotne
NASA-TLX (↓)	68.5 ± 5.4	47.2 ± 4.8	31.10%	0.0005	Wysoce istotne
Wynik SUS (↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	Wysoce istotne
Indeks harmonii kolorów (↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	Istotne
Współczynnik kontrastu (↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	Istotne

Tabela 6: Porównanie statystyczne wskaźników wydajności między metodą bazową a proponowanymi metodami. Tabela przedstawia średnią i odchylenie standardowe (średnia ± SD) dla kluczowych wskaźników wydajności, w tym błędu wyrównania, dokładności grupowania, dokładności kolejności odczytu, indeksu obciążenia zadań NASA (NASA-TLX), skali użyteczności systemu (SUS), indeksu harmonii kolorów oraz kontrastu. Przedstawiono procentowe poprawy, wartości p oraz poziomy istotności statystycznej. Symbol (↑) oznacza, że wyższe wartości są lepsze, a (↓) oznacza, że niższe wartości są lepsze. Istotność statystyczną oceniano przy p < 0,05.

Obserwacje specyficzne dla zbioru danych

Stosunkowo niższa wydajność zaobserwowana w metrykach strukturalnych dla zbioru danych Guo może wynikać z jego immanentnych cech. Zbiór danych Guo jest mniejszy niż RICO i ENRICO i koncentruje się przede wszystkim na percepcyjnych cechach kolorystycznych, a nie na ustrukturyzowanych adnotacjach układu. W konsekwencji wykazuje on większą zmienność w rozmieszczeniu komponentów, słabszą organizację hierarchiczną oraz mniej spójne struktury układu pomiędzy ekranami. Właściwości te sprawiają, że uczenie strukturalne i optymalizacja układu są bardziej wymagające, co wyjaśnia niższą wydajność w metrykach wyrównania, grupowania i kolejności czytania, pomimo wysokich wyników w ewaluacjach percepcyjnych i zorientowanych na użytkownika.

Badanie ablacyjne

Badanie ablacyjne ocenia wkład każdego modułu w proponowanej strukturze poprzez systematyczne usuwanie poszczególnych komponentów i analizę ich wpływu na jakość układu, modelowanie kolorów oraz wydajność detekcji. Jakość układu jest oceniana za pomocą AE, GA, ROA oraz LCS. AE odzwierciedla odchylenie pozycyjne elementów interfejsu użytkownika, gdzie wyższe wartości wskazują na słabszą strukturę przestrzenną. GA ocenia, jak skutecznie komponenty są zorganizowane zgodnie z zasadami Gestalt. ROA mierzy zachowanie logicznego przepływu wizualnego, natomiast LCS kwantyfikuje spójność strukturalną między ekranami pod kątem wyrównania, odstępów i organizacji układu. Degradacja jakości kolorów jest oceniana za pomocą ΔE (percepcyjnej różnicy kolorów), CHI oraz CDS, które łącznie oceniają jednolitość percepcyjną, spójność estetyczną i bogactwo palety. Wydajność detekcji jest oceniana za pomocą mAP, precyzji oraz pełności, co pozwala określić wpływ zastąpienia modułu Faster R-CNN prostszym modelem detekcji. Wspólnie metryki te zapewniają kompleksową ocenę tego, w jaki sposób każdy moduł przyczynia się do ogólnej wydajności systemu.

Tabela 7 podsumowuje wkład każdego modułu i porównuje proponowany framework z istniejącymi podejściami do generowania UI. Pełny model osiąga najlepsze wyniki we wszystkich metrykach jakości układu, modelowania kolorów i detekcji, co dowodzi, że projekt kognitywny, percepcyjne modelowanie kolorów i głębokie zrozumienie wizualne wykazują efekt synergiczny. Po usunięciu modułu modelowania kolorów wartość ΔE znacznie wzrasta, natomiast CHI i CDS ulegają istotnemu obniżeniu, co wskazuje na utratę jednolitości percepcyjnej i harmonii kolorystycznej. Potwierdza to znaczenie modelowania opartego na CAM02-UCS w utrzymaniu jakości estetycznej i percepcyjnej. Usunięcie modułu kognitywnego układu skutkuje znacznym wzrostem AE oraz zauważalnymi spadkami GA i ROA, co pokazuje, że zasady projektowania kognitywnego są niezbędne do tworzenia strukturalnie spójnych i czytelnych układów. Usunięcie modułu spójności wieloekranowej prowadzi do redukcji LCS, co potwierdza jego rolę w utrzymywaniu spójnych wzorców układu na wielu ekranach. Zastąpienie detektora Faster R-CNN prostszą siecią CNN skutkuje gwałtownym spadkiem mAP, precyzji (precision) i pełności (recall), co podkreśla krytyczną rolę niezawodnej detekcji komponentów w całym procesie. W porównaniu z metodami bazowymi, w tym pix2code, REDRAW i LDGM, proponowany framework konsekwentnie przewyższa wszystkie podejścia pod względem dokładności układu, spójności wizualnej i percepcyjnej jakości kolorów.

Metoda / Moduł	AE ↓	GA ↑	ROA ↑	Płyn mózgowo-rdzeniowy ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Moduł kolorów został usunięty	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Usunięto moduł układu poznawczego	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
Usunięto spójność wieloekranową	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Zastąpienie modelu Faster R-CNN prostą siecią CNN	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
PRZERYSUJ	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
Proponowany pełny model	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Tabela 7: Badanie ablacyjne i porównawcza analiza wydajności proponowanego frameworka oraz metod bazowych. Tabela ocenia wpływ poszczególnych komponentów poprzez porównanie pełnego proponowanego modelu z wariantami, w których usunięto konkretne moduły (moduł koloru, moduł układu kognitywnego, spójność wieloekranową oraz zastąpienie Faster R-CNN prostą siecią CNN), a także z metodami bazowymi (pix2code, REDRAW i LDGM). Wydajność oceniano za pomocą błędu wyrównania (AE), dokładności grupowania (GA), dokładności kolejności czytania (ROA), wskaźnika spójności układu (LCS), percepcyjnej różnicy kolorów (ΔE), indeksu harmonii kolorów (CHI), wskaźnika różnorodności kolorów (CDS) oraz średniej precyzji (mAP). Symbol (↑) oznacza, że wyższe wartości są lepsze, a (↓) oznacza, że niższe wartości są lepsze.

DOSTĘPNOŚĆ DANYCH:

Zestawy danych wykorzystane w tej badaniu są dostępne pod następującymi linkami: zestaw danych RICO: https://interactionmining.org/rico; zestaw danych ENRICO: https://github.com/luileito/enrico; zestaw danych UI Color Dataset autorstwa Guo: https://github.com/guozhongke/UI-Color-Dataset.

Plik uzupełniający 1. Sformułowania matematyczne i rozszerzone szczegóły implementacji. Plik ten zawiera szczegółowe sformułowania matematyczne i przepływy algorytmiczne wspierające proponowany framework automatycznego prototypowania UI. Obejmuje on trenowanie detekcji komponentów, ekstrakcję wzorców układu, modelowanie harmonii kolorów, zunifikowany cel prototypowania UI, szczegóły detekcji Faster R-CNN, obliczenia odległości przestrzennej i podobieństwa wyrównania, konstrukcję logicznego drzewa UI, modelowanie kolorów percepcyjnych w oparciu o CAM02-UCS, optymalizację projektowania kognitywnego, modelowanie spójności wieloekranowej oraz algorytmy S1–S3.Prosimy kliknąć tutaj, aby pobrać ten plik.

Dyskusja

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Wyniki wykazują statystycznie istotną poprawę w zakresie użyteczności, organizacji strukturalnej i jakości percepcyjnej (p < 0,05), co potwierdza skuteczność włączenia zasad projektowania poznawczego do zautomatyzowanego prototypowania interfejsów użytkownika (UI). W przeciwieństwie do tradycyjnych systemów generowania UI, które opierają się głównie na detekcji wizualnej lub heurystykach opartych na regułach, proponowany framework integruje grupowanie według zasad Gestalt, modelowanie hierarchii, ograniczenia dotyczące odstępów oraz czytelność percepcyjną w całym procesie rekonstrukcji UI. Poprawy zaobserwowane w NASA-TLX, SUS i SET dodatkowo potwierdzają statystycznie istotną redukcję obciążenia poznawczego (NASA-TLX, p.< 0,01). Wyniki te wskazują, że zautomatyzowane generowanie UI powinno wykraczać poza dokładność rekonstrukcji wizualnej i uwzględniać wiedzę z zakresu projektowania zorientowanego na człowieka, aby osiągnąć praktyczną użyteczność. Ponadto wszystkie sformułowane hipotezy (H1–H4) zostały potwierdzone empirycznie przez wyniki eksperymentalne.

Poza usprawnieniami w zakresie układu, integracja modelowania barw percepcyjnych w oparciu o CAM02-UCS skutkuje statystycznie istotnym wzrostem harmonii kolorystycznej, dostępności i stabilności percepcyjnej (p < 0.05), co odzwierciedlają poprawy wskaźników ΔE, CHI, CDS oraz współczynnika kontrastu. W porównaniu z wcześniejszymi pracami, takimi jak zautomatyzowane generowanie motywów kolorystycznych interfejsu użytkownika (UI) na podstawie obrazów, które koncentrowały się głównie na optymalizacji kolorów, proponowany framework integruje dopracowanie zarówno kolorystyki, jak i układu w ramach ujednoliconego potoku przetwarzania. Co więcej, włączenie modułu spójności wieloekranowej rozwiązuje kluczowe ograniczenie poprzednich podejść, które skupiały się wyłącznie na generowaniu interfejsu dla pojedynczego ekranu. Porównanie z istniejącymi metodami, w tym pix2code³¹, REDRAW²³^,²⁴ oraz LDGM³², wykazuje, że podejścia te kładą nacisk głównie na rekonstrukcję strukturalną lub modelowanie generatywne, bez uwzględnienia zasad poznawczych, percepcyjnej harmonizacji kolorów czy rozumowania wieloekranowego. Proponowany framework wykazuje statystycznie istotną przewagę nad tymi metodami (p < 0.05) w zakresie metryk dokładności układu (AE, GA i ROA), metryk percepcyjnych (CHI i ΔE) oraz mierników użyteczności (SUS i CSCR). Wyniki te podkreślają zaletę łączenia kognitywnych zasad projektowania, modelowania barw percepcyjnych oraz głębokiego uczenia w ramach jednego, spójnego systemu.

Ważnym spostrzeżeniem wynikającym z rezultatów jest rozróżnienie między czynnikami strukturalnymi a percepcyjnymi wpływającymi na UX. Optymalizacja strukturalna poprawia poprawność funkcjonalną i przejrzystość układu, natomiast optymalizacja percepcyjna — w szczególności harmonia kolorystyczna — znacząco wpływa na percepcję użytkownika i obciążenie poznawcze. Wyniki wskazują, że optymalny projekt UI wymaga równowagi między dokładnością strukturalną a spójnością percepcyjną. Pomimo wykazanych ulepszeń, nadal istnieją pewne ograniczenia. Na przykład wydajność w przypadku mniejszych i bardziej zorientowanych na percepcję zbiorów danych, takich jak zbiór Guo UI Color, jest niższa w metrykach strukturalnych ze względu na zmienność organizacji układu oraz ograniczone adnotacje strukturalne. Cechy te wprowadzają trudności w nauce spójnych wzorców układu i relacji hierarchicznych. Przyszłe prace skupią się na poprawie odporności w odniesieniu do takich zbiorów danych.

Z perspektywy teoretycznej niniejsze badanie wykazuje, że generowanie interfejsów użytkownika (UI) może zostać znacząco usprawnione poprzez bezpośrednie wbudowanie zasad poznawczych i percepcyjnych w przepływy pracy głębokiego uczenia. Badanie to podważa konwencjonalny pogląd, według którego generowanie UI jest wyłącznie problemem komputerowego rozpoznawania obrazu lub generowania kodu. Zamiast tego podkreśla znaczenie włączenia jednorodności percepcyjnej (za pomocą CAM02-UCS), redukcji obciążenia poznawczego (poprzez zasady Gestalt i modelowanie hierarchii) oraz spójności projektowania wieloekranowego jako kluczowych komponentów zautomatyzowanych systemów UI. Praca ta przyczynia się do przejścia w stronę skoncentrowanych na człowieku modeli obliczeniowych, w których generowanie UI uwzględnia nie tylko poprawność strukturalną, ale także czynniki psychologiczne i percepcyjne. W ten sposób wyznacza ona nowy kierunek teoretyczny dla zautomatyzowanej inteligencji projektowej.

Z praktycznego punktu widzenia proponowane ramy stanowią gotowe do wdrożenia rozwiązanie dla projektantów interfejsów użytkownika, zespołów produktowych oraz narzędzi do prototypowania. Poprzez zmniejszenie obciążenia poznawczego i poprawę efektywności wyszukiwania, system generuje układy UI, które wymagają mniejszej liczby ręcznych poprawek w celu spełnienia profesjonalnych standardów projektowych. Zastosowanie optymalizowanych percepcyjnie motywów kolorystycznych zapewnia zgodność z wytycznymi dotyczącymi dostępności, takimi jak WCAG 2.1, co umożliwia natychmiastowe zastosowanie w rzeczywistych aplikacjach. Dodatkowo moduł spójności wieloekranowej ułatwia szybsze tworzenie aplikacji wielostronicowych poprzez utrzymanie jednolitych układów i wzorców projektowych bez konieczności wprowadzania ręcznych korekt. Podsumowując, opracowane ramy mają potencjał do znaczącego skrócenia czasu opracowywania interfejsów użytkownika, przy jednoczesnej poprawie jakości i użyteczności generowanych projektów.

Zaproponowane ramy wprowadzają podejście zorientowane na człowieka w zakresie zautomatyzowanego prototypowania interfejsów użytkownika (UI), integrując zasady projektowania poznawczego, percepcyjne modelowanie kolorów (CAM02-UCS) oraz spójność układu wieloekranowego w ramach jednolitego potoku obliczeniowego. W przeciwieństwie do wcześniejszych podejść, skupiających się głównie na rekonstrukcji strukturalnej lub detekcji wizualnej, niniejsze ramy jawnie modelują grupowanie Gestalt, hierarchię, optymalizację kontrastu oraz jednolitość percepcyjną. Wyniki eksperymentalne wykazują znaczną poprawę w zakresie użyteczności (SUS i NASA-TLX), harmonii wizualnej (AHS, CHI i ΔE) oraz wydajności strukturalnej (GA, ROA, LCS i mAP), co potwierdza, że modelowanie poznawcze i percepcyjne podnosi jakość UI i UX. Przyszłe prace będą dotyczyć integracji modeli wizyjno-językowych opartych na architekturze transformer w celu poprawy zrozumienia semantycznego i rozumowania strukturalnego. Dodatkowo, wdrożenie adaptacyjnej personalizacji, układów responsywnych dla różnych urządzeń oraz udoskonalenia z udziałem człowieka (human-in-the-loop) może dalej zwiększyć praktyczną przydatność systemu. Podsumowując, niniejsza praca stanowi fundament dla systemów projektowania UI nowej generacji opartych na AI, które są nie tylko wizualnie dokładne, ale także efektywne poznawczo, harmonijne percepcyjnie i praktyczne w implementacji.

Oświadczenia

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Autorzy nie deklarują żadnych konfliktów interesów.

Podziękowania

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Autorzy wyrażają wdzięczność za wsparcie akademickie i instytucjonalne zapewnione przez Wuhan College of Foreign Languages & Foreign Affairs, Keimyung University oraz Shanghai Institute of Commerce and Foreign Languages podczas realizacji niniejszych badań.

Materiały

Lista materiałów użytych w tym artykule
Nazwa	Firma	Numer katalogowy	Komentarze
CPU (Procesor)	AMD Ryzen 9 7950X (16-rdzeniowy, 32-wątkowy, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), USA	Ryzen 9 7950X
CUDA Toolkit	Wersja 11.8	NVIDIA Corporation, USA	CUDA Toolkit 11.8
cuDNN	Wersja 8.9	NVIDIA Corporation, USA	cuDNN v8.9
Faster R-CNN	Model detekcji obiektów (z siecią propozycji regionów)	Meta AI Research / Detectron2	Framework Detectron2
Matplotlib	Wersja 3.7	Matplotlib Development Team	v3.7.0
GPU NVIDIA RTX 4090	Karta graficzna 24 GB GDDR6X	NVIDIA Corporation, Santa Clara, CA, USA	RTX 4090
NumPy	Wersja 1.24	NumPy Developers	v1.24.0
OpenCV	Wersja 4.8	OpenCV Foundation	v4.8.0
PyTorch	Wersja 2.0	PyTorch Foundation (Meta AI)	v2.0.0
ResNet-50 z FPN	Szkieletowa sieć CNN z siecią piramidy cech	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	Wersja 1.3	Scikit-learn Developers	v1.3.0
SciPy	Wersja 1.10	SciPy Community	v1.10.0
Pamięć systemowa (RAM)	64 GB DDR5	Corsair / Kingston (lub odpowiednik)	Zestaw DDR5 64GB
System operacyjny Ubuntu	Wersja 22.04 LTS	Canonical Ltd., UK	Ubuntu 22.04 LTS

Bibliografia

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Weingerl P. Automated image-based user interface color theme generation. Appl Sci. 2024;14:2850.
Feng Z, Fang J, Cai B, Zhang Y. Guis2Code: Computer vision tool to generate code automatically from graphical user interface sketches. In: Proc Int Conf Artif Neural Netw; 2021; p. 53–65.
Chen C, Zhang X, Yang Y, Li Y. GalleryDC: Design search knowledge discovery through auto-created GUI component gallery. Proc ACM Hum Comput Interact. 2019;3:1–22.
Chen J, et al. Object detection for graphical user interface: Old-fashioned deep learning combination. In: Proc ACM Eur Softw Eng Conf Symp Found Softw Eng; 2020; p. 1202–1214.
Xie M, et al. UIED: Hybrid tool for GUI element detection. In: Proc ACM Eur Softw Eng Conf Symp Found Softw Eng; 2020; p. 1655–1659.
Gijsenij A, et al. Determining key colors from a design perspective using dE-means color clustering. Color Res Appl. 2023;48:69–87.
Yuan LP, et al. InfoColorizer: Interactive recommendation of color palettes for infographics. IEEE Trans Vis Comput Graph. 2022;28:4252–4266.
Cao Y, et al. Influences of color salience and location of website links on user performance and affective experience. Int J Hum Comput Interact. 2021;37:547–559.
Liu W, Cao Y, Proctor RW. App icon color and border shape influence visual search efficiency and user experience. Int J Ind Ergon. 2021;84:103160.
Yamin PAR, Park J, Kim HK, Hussain M. Effects of button colour and background on augmented reality interfaces. Behav Inf Technol. 2023;43:663–676.
Deng L, Zhang ZR, Zhou FY, Liu RY. Effects of app icon border form and interface background color saturation. Adv Multimed. 2022;2022:1166656.
Weingerl P, Hladnik A, Javoršek D. Machine learning model for extracting image prominent colors. Color Res Appl. 2020;45:409–426.
Huang K, et al. WovenProbe: Probing possibilities for on-skin systems. In: Proc ACM Des Interact Syst Conf; 2021; p. 1193–1207.
Dewez D, Guillemot C, Bailly G, Isenberg T. Dual body representations during an isomorphic 3D manipulation. IEEE Trans Vis Comput Graph. 2022;28:2047–2057.
Kim J, Kim C, Nam KY. ThinkWrite: Design interventions for online petition deliberation. In: Proc CHI Conf Hum Factors Comput Syst Ext Abstr; 2022.
Gao L, Wang Y, Müller S, Hudson SE. DataLev: Mid-air data physicalisation using acoustic levitation. In: Proc CHI Conf Hum Factors Comput Syst; 2023; p. 1–14.
Khorsandi PM, Ogata M, Rekimoto J, Inami M. FabriCar: In-car media interactions using e-textile sensors. In: Proc ACM Des Interact Syst Conf; 2023; p. 764–776.
Zhang Z, Ding Y, Huang C. Automatic front-end code generation via multi-head attention. In: Proc Int Conf Comput Eng Appl; 2023; p. 869–872.
Jain V, et al. Sketch2code: Transformation of sketches to UI using deep neural network [preprint]. arXiv:1910.08930; 2019.
Chai Y, et al. Dynamic prototype network for few-shot malware detection. IEEE Trans Knowl Data Eng. 2023;35:4754–4766.
Qiu J, et al. AI security in 5G networks: Adversarial examples. IEEE Veh Technol Mag. 2020;15:95–100.
Qiu J, et al. Automatic concept extraction from big data in smart city. IEEE Trans Comput Soc Syst. 2020;7:225–233.
Xie M. UI2CODE: Computer vision-based reverse engineering of UI design [Internet]. GitHub; 2021. Available from: https://github.com
Wang C, Bochkovskiy A, Liao HYM. CSPNet: Backbone enhancing learning capability of CNNs. In: Proc IEEE Conf Comput Vis Pattern Recognit Workshops; 2020; p. 1571–1580.
Hui M, et al. Unifying layout generation with decoupled diffusion model. In: Proc IEEE Conf Comput Vis Pattern Recognit; 2023; p. 18434–18443.
Wang Y, et al. Dolfin: Diffusion layout transformers without autoencoder. In: Proc Eur Conf Comput Vis; 2024; p. 513–530.
Sobolevsky A, et al. GuiLGet: GUI layout generation with transformer [preprint]. arXiv:2304.09012; 2023.
Lu Y, et al. UI layout generation with LLMs guided by UI grammar [preprint]. arXiv:2310.15455; 2023.
Leiva LA, Hota A, Oulasvirta A. ENRICO: A dataset for mobile UI design modeling. In: Proc Int Conf Hum Comput Interact Mobile Devices Serv; 2020.
Li G, et al. Learning to denoise mobile UI layouts. In: Proc CHI Conf Hum Factors Comput Syst; 2022; p. 1–15.
Beltramelli T. pix2code: Generating code from a GUI screenshot. In: Proc ACM SIGCHI Symp Eng Interact Comput Syst; 2018.
Zheng G, et al. LayoutDiffusion: Controllable diffusion model. In: Proc IEEE Conf Comput Vis Pattern Recognit; 2023; p. 18424–18433.

Przedruki i uprawnienia

Poproś o pozwolenie na ponowne wykorzystanie tekstu lub ilustracji tego artykułu JoVE

Poproś o pozwolenie

Tagi

Engineering All Prototyping Cognitive and Visual Design User Interfaces color modelling component detection

Zautomatyzowany system prototypowania interfejsów użytkownika integrujący zasady projektowania poznawczego i wizualnego w celu poprawy użyteczności i przejrzystości układu

W tym artykule

Podsumowanie

Streszczenie

Wprowadzenie

Protokół

Wyniki

Dyskusja

Oświadczenia

Podziękowania

Materiały

Bibliografia

Przedruki i uprawnienia

Tagi

Powiązane artykuły