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

Podsumowanie

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

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

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)^1,2. 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^3,4. 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^5,6,7. 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^8,9,10. 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^14,15, 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^18,19,20.

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^21,22, 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^23,24. 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^26,27,28. 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ół

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

Zaproponowany zautomatyzowany system prototypowania interfejsów użytkownika (UI) integruje analizę strukturalną opartą na głębokim uczeniu, percepcyjnie jednorodne modelowanie kolorów oraz zasady projektowania poznawczego w celu generowania spójnych i zorientowanych na użytkownika prototypów interfejsów. Metodologia rozpoczyna się od wykorzystania architektury Faster R-CNN, wytrenowanej na zbiorach danych RICO i ENRICO, do wykrywania komponentów UI i wyodrębniania ich relacji hierarchicznych, co umożliwia dokładną interpretację zróżnicowanych układów ekranów. Wykryte komponenty są następnie przetwarzane przez moduł inteligencji kolorystycznej, który wyodrębnia wskazówki kolorystyczne na podstawie marki lub obrazu, 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 poznawczej, stosowane są zasady projektowania poznawczego — w tym prawa grupowania Gestalt, prawo Fittsa, prawo Hicksa, odstępy oparte na uwadze oraz ograniczenia hierarchii wizualnej — w celu udoskonalenia organizacji przestrzennej i wyrównania komponentów. Na koniec warstwa wnioskowania o układzie integruje ograniczenia strukturalne, percepcyjne i poznawcze, 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 poznawcze i jest zgodny z zasadami projektowania zorientowanego na człowieka. Pełny przebieg proponowanej metody przedstawiono na Rysunku 1.

Rysunek 1. Ogólna architektura proponowanego frameworka do zautomatyzowanego prototypowania interfejsu użytkownika. Diagram przedstawia kompletny proces, rozpoczynający się od wejściowego obrazu UI. Detekcja komponentów jest wykonywana przy użyciu Faster R-CNN w celu zidentyfikowania elementów interfejsu. Wykryte komponenty są następnie przetwarzane z wykorzystaniem 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 Hicka oraz korekt opartych na uwadze. Strzałki wskazują przepływ danych między modułami, co prowadzi do końcowego prototypu UI. Aby wyświetlić powiększoną wersję tego rysunku, kliknij tutaj.

Przegląd schematu

Rysunek 1 przedstawia kompletny schemat działania proponowanego zautomatyzowanego frameworka 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 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. Na podstawie relacji przestrzennych i wzorców strukturalnych system konstruuje hierarchiczne drzewo układu, które odzwierciedla sposób, w jaki użytkownicy naturalnie postrzegają organizację ekranu. Reprezentacja ta obejmuje grupowanie wizualne oraz 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. Obejmują one grupowanie Gestalt dla klastrowania wizualnego, prawo Fittsa w celu optymalizacji rozmiaru i dostępności celów dotykowych, prawo Hicksa w celu zmniejszenia złożoności podejmowania decyzji oraz odstępy oparte na uwadze w celu poprawy hierarchii wizualnej. W rezultacie układ staje się bardziej intuicyjny, czytelny i efektywny w interakcji z użytkownikiem. Na koniec zoptymalizowany układ jest łączony z percepcyjnym modelowaniem kolorów w celu wygenerowania spójnego prototypu UI. Powstały interfejs jest poprawny strukturalnie, harmonijny wizualnie i zgodny z ludzkimi oczekiwaniami dotyczącymi użyteczności.

Struktura została zaimplementowana przy użyciu PyTorch 2.0 w systemie Ubuntu 22.04. Eksperymenty przeprowadzono na systemie wyposażonym w procesor graficzny NVIDIA RTX 4090 GPU (24 GB VRAM). Model Faster R-CNN wykorzystywał szkielet ResNet-50 wstępnie wytrenowany na zbiorze danych ImageNet. Trening przeprowadzono z użyciem optymalizatora stochastycznego spadku gradientu (SGD) przy współczynniku uczenia 0.001, rozmiarze partii (batch size) 16 i maksymalnie 60 epokach. Aby zapobiec przeuczeniu, zastosowano mechanizm wczesnego zatrzymania (early stopping) z wykorzystaniem zbioru walidacyjnego stanowiącego 20% danych. Chociaż trening zaplanowano na maksymalnie 60 epok, zbieżność była zazwyczaj osiągana wcześniej dzięki wczesnemu zatrzymaniu w oparciu o stratę na zbiorze walidacyjnym. Pęd (momentum) oraz spadek wag (weight decay) ustawiono odpowiednio na 0.9 i 0.0005. Augmentacja danych obejmowała normalizację, losowe poziome odbicie lustrzane oraz losowe przycinanie i zmianę rozmiaru.

Przygotowanie zestawu 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 autorstwa Guo¹. Zbiór danych RICO zawiera 66 261 ekranów UI systemu Android, zebranych z 9 700 aplikacji, co zapewnia dużą różnorodność w zakresie detekcji komponentów i ekstrakcji hierarchicznego układu. ENRICO obejmuje 1 464 wysokiej jakości zrzuty ekranu UI, ręcznie podzielone na 20 wzorców projektowych, co umożliwia lepszą generalizację w rozumowaniu strukturalnym i modelowaniu spójności układu. Zbiór kolorów UI autorstwa Guo składa się ze 128 wyselekcjonowanych obrazów UI z adnotacjami motywów kolorystycznych, które służą do percepcyjnego modelowania kolorów i oceny palet. Jednak ze względu na stosunkowo niewielki rozmiar, zbiór ten może wprowadzać pewną zmienność w charakterystyce układu. Na potrzeby niniejszego badania przygotowano połączony zbiór 5 128 ekranów do trenowania i ewaluacji. Konkretnie, około 4 000 obrazów z RICO wykorzystano do trenowania modelu Faster R-CNN w celu detekcji komponentów, 1 000 obrazów z ENRICO posłużyło do uczenia wzorców układów i modelowania spójności strukturalnej, a 128 obrazów ze zbioru Guo wykorzystano 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 (bounding boxes) oraz metadanych hierarchicznych, aby zapewnić kompatybilność między zbiorami danych. Przegląd zbiorów danych wykorzystanych w tej badaniu przedstawiono w Tabeli 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ładów i wymuszania spójności między ekranami. Zbiór kolorów UI autorstwa Guo, mimo mniejszego rozmiaru, odgrywa kluczową rolę w ocenie percepcyjnej harmonii kolorów i modelowaniu kontrastu. Wspólnie zbiory te stanowią kompleksowy i dobrze zbalansowany fundament dla 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 proponowanym modelu
Zbiór danych RICO30	66 261	4 000	Wykrywanie komponentów UI, ekstrakcja struktury układu
Zbiór danych ENRICO29	1 464	1 000	Uczenie wzorców projektowych, modelowanie spójności układu
Zbiór kolorów UI Guo1	128	128	Ekstrakcja motywu kolorystycznego, ocena percepcji kolorów
Suma łączna	67 853	5 128	Kompleksowy zbiór danych do detekcji, układu i modelowania kolorów

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

Zastosowano strategię próbkowania warstwowego w celu zachowania różnorodności komponentów interfejsu użytkownika, 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 i 0.406) oraz odchylenie standardowe (0.229, 0.224 i 0.225). Augmentacja danych obejmowała losowe odzwierciedlenie poziome (prawdopodobieństwo = 0.5) oraz losowe przycinanie (zakres skali: 0.8–1.0), a następnie zmianę rozmiaru do 224 × 224 pikseli zastosowaną podczas trenowania.

Adnotacja i przetwarzanie wstępne komponentów

Zbiory danych RICO, ENRICO oraz Guo’s UI Color Dataset wspólnie obsługują trzy główne komponenty funkcjonalne proponowanego frameworka do zautomatyzowanego prototypowania interfejsów użytkownika (UI): detekcję komponentów, modelowanie układu oraz percepcyjną optymalizację kolorów. Zbiór danych RICO zawiera wielkoskalową kolekcję ponad 66 000 ekranów mobilnych UI i jest wykorzystywany przede wszystkim do trenowania modułu detekcji komponentów. Jego różnorodność pozwala modelowi Faster R-CNN na wypracowanie odpornych reprezentacji powszechnych 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 różnych warunkach projektowych. Zbiór danych ENRICO dostarcza wysokiej jakości ekrany UI z etykietami wzorców, służące do uczenia relacji strukturalnych i schematów układu. Pozwala to systemowi zrozumieć zależności między komponentami, organizację hierarchiczną i popularne szablony projektowe. Zbiór ten odgrywa kluczową rolę w modelowaniu struktur układu i wymuszaniu spójności między wieloma ekranami, co umożliwia frameworkowi generowanie układów zgodnych z uznanymi konwencjami projektowymi. W przeciwieństwie do nich, Guo’s UI Color Dataset jest stosowany specjalnie do percepcyjnego i kognitywnego modelowania kolorów. W odróżnieniu od 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 kolorów, które równoważą kontrast, dostępność i spójność estetyczną. Razem 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 danych Guo ułatwia percepcyjną optymalizację kolorów. Taka integracja gwarantuje, że generowane prototypy UI są strukturalnie dokładne, wizualnie harmonijne i zoptymalizowane pod kątem poznawczym.

Normalizację przeprowadzono, przyjmując średnią [0,485, 0,456, 0,406] oraz odchylenie standardowe [0,229, 0,224, 0,225]. W celu poprawy zdolności modelu do generalizacji zastosowano techniki augmentacji danych, w tym losowe przycinanie, odbicia poziome oraz rotację. Ponadto wartości pikseli przeskalowano do zakresu [0, 1], a wszystkie obrazy zmieniono do rozdzielczości 480 × 800 pikseli, aby zapewnić spójność w obrębie zbiorów danych. Obrazy przeskalowane do 224 × 224 pikseli wykorzystano do augmentacji podczas trenowania, natomiast oryginalną rozdzielczość 480 × 800 pikseli zachowano do analizy układu. Bounding boxy dostosowano, aby odfiltrować nieistotne adnotacje przy użyciu zdefiniowanych progów. Aby uzyskać jednolitość między zbiorami danych, wszystkie elementy interfejsu użytkownika (UI) zostały ręcznie zaadnotowane przy użyciu narzędzia do adnotacji LabelImg. Przed rozpoczęciem adnotacji opracowano schemat pozwalający na klasyfikację elementów UI do kategorii takich jak przycisk, tekst, obraz, ikona oraz kontener. Do reprezentacji bounding boxów zastosowano jednolity układ współrzędnych, a informacje hierarchiczne skonstruowano na podstawie relacji przestrzennych między elementami oraz ich powiązań rodzic–dziecko w drzewie układu. Dodatkowo ustanowiono wytyczne zapewniające spójność adnotacji elementów, prawidłową obsługę nakładających się komponentów oraz przestrzeganie minimalnych progów rozmiaru w zbiorach danych RICO, ENRICO i Guo.

Szczegółowe sformułowania matematyczne dotyczące trenowania detekcji 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 i współczynnikiem weight decay na poziomie 0,0005. Początkową szybkość uczenia (learning rate) ustawiono na 0,001, a następnie korygowano ją zgodnie z polityką step decay w oparciu o wyniki na zbiorze walidacyjnym. Trenowanie przeprowadzano przez maksymalnie 60 epok przy wielkości wsadu (batch size) wynoszącej 16. Aby zapobiec przeuczeniu, zastosowano mechanizm early stopping, wykorzystując zbiór walidacyjny stanowią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 na podstawie odległości przestrzennych i kryteriów wyrównania, a następnie konstruuje macierz sąsiedztwa w celu przedstawienia tych relacji. Następnie stosowany jest algorytm klastrowania, taki jak DBSCAN, aby pogrupować powiązane komponenty. Na koniec pogrupowane elementy są organizowane w struktury hierarchiczne w oparciu o relacje rodzic-dziecko, co tworzy ustrukturyzowaną reprezentację układu.

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

Ta funkcja celu matematycznie formalizuje integrację detekcji strukturalnej, rozumowania w zakresie układu oraz percepcyjnego modelowania kolorów, zapewniając, że wszystkie komponenty frameworku wspólnie przyczyniają się do generowania spójnych i zorientowanych na użytkownika prototypów interfejsu użytkownika (UI). Optymalizacja jest przeprowadzana w sposób modularny dla każdego komponentu frameworka. Do trenowania modułu detekcji komponentów wykorzystywany jest algorytm SGD, natomiast podczas wspólnej optymalizacji zunifikowanego celu stosowany jest optymalizator Adam. Złożony cel służy do sterowania ogólną wydajnością systemu. W etapach wspólnej optymalizacji funkcję celu minimalizuje się przy użyciu optymalizatora Adam z szybkością uczenia 0,001 i rozmiarem partii (batch size) wynoszącym 16. Trenowanie jest przeprowadzane przez maksymalnie 60 epok, z zastosowaniem wczesnego zatrzymania (early stopping), gdy zmiana straty walidacyjnej jest mniejsza niż 10⁻⁴ przez pięć kolejnych epok.

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

Zaproponowany schemat wykorzystuje 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ść wykrywania 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 architekturę szkieletową ResNet-50 wstępnie wytrenowaną na zbiorze danych ImageNet do ekstrakcji konwolucyjnych map cech z każdego ekranu UI. Podczas trenowania wczesne warstwy zostały zamrożone, aby zachować ogólne cechy wizualne, natomiast warstwy wyższe (conv4_x i conv5_x) zostały dostrojone do wykrywania komponentów specyficznych dla UI. Mapy cech te rejestrują struktury wizualne, krawędzie, tekstury oraz granice komponentów. Podczas detekcji sieć propozycji regionów (RPN) identyfikuje regiony kandydackie (kotwice), które prawdopodobnie zawierają komponenty UI. Kotwice są definiowane przy użyciu wielu skal (128, 256 i 512) oraz proporcji (1:1, 1:2 i 2:1), aby dostosować się do elementów UI o różnych rozmiarach. Podczas trenowania kotwice z wartością intersection-over-union (IoU) większą niż 0,7 w stosunku do ramek prawdy naziemnej są oznaczane jako pozytywne, natomiast te z IoU mniejszym niż 0,3 są oznaczane jako negatywne; kotwice o pośrednich wartościach IoU są pomijane. Każdej kotwicy przypisane jest prawdopodobieństwo wskazujące na obecność komponentu. Następnie stosuje się nie-maksymalną supresję (NMS), aby usunąć redundantne i nakładające się propozycje, zapewniając wydajną lokalizację istotnych elementów UI nawet w przeładowanych interfejsach. Po wygenerowaniu regionów kandydackich każda propozycja jest klasyfikowana do zdefiniowanych kategorii komponentów, a współrzędne jej ramki ograniczającej są doprecyzowane. Operacja ROI Align (Region of Interest Align) ekstrahuje 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 dokładne współrzędne ramki ograniczającej. Cały model Faster R-CNN jest trenowany end-to-end poprzez optymalizację wspólnej funkcji straty, która łączy stratę RPN ze stratą końcowej detekcji. Pozwala to systemowi nie tylko na dokładne rozpoznawanie komponentów UI, ale także na ich precyzyjną lokalizację w zróżnicowanych strukturach interfejsu. Szczegółowy opis wykrywania komponentów za pomocą Faster R-CNN, obejmujący etap RPN, klasyfikację ROI, doprecyzowanie ramek ograniczających oraz końcowy cel optymalizacji, znajduje się w Supplementary File 1.

Algorytm S1 przedstawia szczegółowy schemat detekcji komponentów i ekstrakcji struktury (Plik uzupełniający 1). Opisuje on kompletny proces automatycznej detekcji komponentów interfejsu użytkownika (UI) oraz ekstrakcji struktury z surowego obrazu ekranu. Obraz wejściowy jest najpierw poddawany przetwarzaniu wstępnemu, a następnie przekazywany do szkieletu CNN w celu ekstrakcji głębokich cech wizualnych. Cechy te są wykorzystywane przez RPN do generowania kandydujących ramek ograniczających (bounding boxes), 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 gęstościowego przestrzennego klastrowania aplikacji z szumem (DBSCAN). Ten etap klastrowania umożliwia budowę hierarchicznego drzewa UI, które oddaje 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. Button i Text), co wskazują podpisane 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 późniejszych, w tym ekstrakcji układu, optymalizacji poznawczej i generowania prototypów UI, dostarczając dokładnych i semantycznie znaczących reprezentacji komponentów UI.

Rycina 2. Detekcja komponentów elementów interfejsu użytkownika przy użyciu Faster R-CNN. Rycina przedstawia detekcję komponentów interfejsu użytkownika z zrzutu ekranu 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. Proszę kliknąć tutaj, aby wyświetlić powiększoną wersję tej ryciny.

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ą. Jednak same ramki ograniczające nie przekazują 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ć to ograniczenie, wykryte komponenty są przekształcane w logiczne drzewo UI, w którym każdy komponent traktowany jest jako węzeł, a komponenty powiązane funkcjonalnie lub wizualnie są grupowane pod wspólnymi węzłami nadrzędnymi. W celu zidentyfikowania istotnych grup układu stosuje się techniki klastrowania, takie jak DBSCAN lub hierarchiczne klastrowanie aglomeracyjne. Metody te analizują bliskość przestrzenną i 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ć typowe 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 — aby skonstruować kompleksową reprezentację układu. Na przykład komponenty wyrównane w kolumnach o równej 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 (feed). Dzięki integracji klastrowania, 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 dopracowania układu i modelowania spójności wieloekranowej, umożliwiając systemowi generowanie ustrukturyzowanych, spójnych i zorientowanych na użytkownika projektów interfejsu.

Szczegółowe formuły dla odległości przestrzennej i podobieństwa wyrównania zostały przedstawione w Pliku uzupełniającym 1.

Klasteryzacja w celu grupowania układu (DBSCAN)

W celu identyfikacji grup układu 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 pikseli). Parametr odległości sąsiedztwa ustawiono na ε = 50 pikseli, aby uchwycić bliskość przestrzenną między przylegającymi komponentami UI. Minimalną liczbę punktów wymaganych do utworzenia klastra ustawiono na MinPts = 3, aby uniknąć tworzenia nieznaczących lub pozornych grup komponentów UI.

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

Modelowanie barw percepcyjnych za pomocą CAM02-UCS

Percepcyjne modelowanie kolorów zapewnia, że barwy użyte w generowanym interfejsie użytkownika (UI) są harmonijne, czytelne i efektywne poznawczo. Kolory dominujące są wyodrębniane ze źródeł wejściowych, takich jak obrazy UI, przy użyciu technik klastrowania. W szczególności zastosowano klastrowanie K-średnich z inicjalizacją K-means++ przez 300 iteracji w celu uzyskania reprezentatywnych palet kolorystycznych. Jednak przestrzeń barwna RGB nie oddaje precyzyjnie ludzkiej percepcji wzrokowej, co oznacza, że numerycznie podobne kolory mogą być postrzegane jako różne. Aby rozwiązać ten problem, wszystkie wyodrębnione kolory są przekształcane do systemu CAM02-UCS, który jest percepcyjnie jednolity. W tej przestrzeni równe odległości odpowiadają równym postrzeganym różnicom kolorów, co czyni ją odpowiednią do modelowania harmonii barw i kontrastu. Po zmapowaniu do CAM02-UCS percepcyjne różnice kolorów są obliczane za pomocą odległości euklidesowej, co pozwala systemowi kwantyfikować kontrast, harmonię i zróżnicowanie 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 harmonia kolorów jest wymuszana poprzez ograniczanie 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 z uwzględnieniem 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ą dostosowywane pod kątem luminancji i chromatyczności w celu zachowania hierarchii wizualnej. Mechanizm oceny oparty na regułach analizuje kandydatów na 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 opracowane rozwiązanie tworzy schematy kolorystyczne UI, które wykazują spójność, czytelność i jednolitość percepcyjną na profesjonalnym poziomie.

Szczegółowe wyrażenia matematyczne dla modelowania percepcyjnego koloru 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 uwzględnieniu ograniczeń dotyczących harmonii i dostępności. Początkowo z obrazu wejściowego ekstrahowane są kolory dominujące, a następnie przekształcane do przestrzeni CAM02-UCS, aby zapewnić zgodność różnic kolorystycznych z ludzką percepcją. Następnie obliczane są percepcyjne odległości między kolorami, które ograniczane są do wcześniej zdefiniowanych zakresów w celu zachowania przejrzystości i harmonii. W kolejnym kroku egzekwowana jest dostępność poprzez ocenę współczynników kontrastu luminancji zgodnie z wytycznymi WCAG. Końcowa paleta jest uzyskiwana poprzez optymalizację złożonej funkcji celu, która równoważy percepcyjne rozmieszczenie, wymagania dotyczące kontrastu oraz ograniczenia dotyczące harmonii kolorów. Zapewnia to, że wygenerowane schematy kolorystyczne interfejsu użytkownika są nie tylko atrakcyjne wizualnie, ale także czytelne, dostępne i percepcyjnie spójne.

Optymalizacja projektowania kognitywnego

Optymalizacja projektu kognitywnego zapewnia, że automatycznie generowane prototypy interfejsu użytkownika 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 komponentów 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 i złożoności decyzji są oznaczone odpowiednio jako alfa, beta i gamma. W niniejszym badaniu wartości alfa, beta i gamma zostały określone empirycznie przy użyciu zbioru danych walidacyjnych. Dla obecnego eksperymentu współczynniki ustawiono następująco: α = 0.5, β = 0.3 oraz γ = 0.2. Konfiguracja ta zapewnia skuteczną równowagę między grupowaniem wizualnym, efektywnością interakcji a prostotą podejmowania decyzji.

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

Modelowanie spójności wieloekranowej zapewnia, że różne ekrany w obrębie aplikacji dzielą spójną tożsamość wizualną, układ strukturalny i wzorce interakcji. Podczas nawigacji między ekranami użytkownicy budują oczekiwania dotyczące rozmieszczenia elementów, typografii, odstępów i hierarchii wizualnej. Aby sprostać tym oczekiwaniom, system analizuje wzorce międzyekranowe, wykorzystując szablony pochodzące z zestawów danych RICO i ENRICO. Szablony te obejmują powszechne struktury interfejsu użytkownika (UI), takie jak układy strona główna–szczegóły, wzorce lista–szczegóły, wieloetapowe formularze oraz przepływy paneli sterowania. Poprzez porównywanie rozmieszczenia komponentów i zachowań grupowania, system tworzy międzyekranowy profil strukturalny, który określa, które elementy powinny pozostać spójne, a które mogą ulegać zmianom. Po zidentyfikowaniu wzorców strukturalnych, framework wymusza spójność w skalach typograficznych, proporcjach odstępów, układach siatek i kotwicach nawigacyjnych. Na przykład paski nagłówków zachowują stałą wysokość, główne przyciski mają jednolity rozmiar i wyrównanie, a bloki treści podążają za przewidywalnym porządkiem wizualnym. 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 – np. poprzez niespójne marginesy wewnętrzne lub niewyrównane tytuły – system automatycznie koryguje układ, aby przywrócić spójność. Korekty te pomagają zapewnić płynne doświadczenie użytkownika (UX) i redukują koszt poznawczy związany ze zmianą ekranów. Framework analizuje ponadto graf nawigacyjny między ekranami, aby zachować spójność przepływu interakcji. Identyfikowane i wymuszane są powszechne wzorce nawigacyjne, w tym przejścia w przód/w tył, nawigacja kartowa oraz wieloetapowe przepływy pracy. Każde przejście jest walidowane pod kątem zgodności z modelem mentalnym użytkownika, co poprawia użyteczność i zmniejsza dezorientację. W rezultacie model spójności wieloekranowej minimalizuje szum wizualny, zwiększa intuicyjność i promuje jednolity model interakcji.

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

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

Algorytm S3 przedstawia proces optymalizacji układu poznawczo-wizualnego 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 użytkownika (UI). Łączy on grupowanie percepcyjne (zasady Gestalt), efektywność interakcji (prawo Fittsa) oraz prostotę podejmowania decyzji (prawo Hicka) 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. Dodatkowo algorytm wymusza spójność wieloekranową poprzez dopasowanie każdego ekranu do wyuczonych szablonów układów, zapewniając jednolitość typografii, odstępów i organizacji strukturalnej. Wielokryterialna funkcja optymalizacji dopracowuje 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. Ogólnie rzecz biorąc, algorytm ten zapewnia, że generowane układy wieloekranowe zachowują wysoki poziom spójności wizualnej, użyteczności i przejrzystości percepcyjnej.

Wyniki

Zaproponowany zautomatyzowany framework prototypowania interfejsów użytkownika (UI) został oceniony 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 opracowanego przez 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 wieloma ekranami oraz percepcyjnej harmonii kolorystycznej.

Wyniki eksperymentalne wykazują, że model detekcji oparty na Faster R-CNN osiąga dokładność wykrywania komponentów na poziomie 92,4% i skutecznie generalizuje wyniki dla różnorodnych stylów mobilnych interfejsów użytkownika (UI). Co więcej, włączenie adnotacji wzorców ENRICO usprawnia rozumowanie w zakresie układu, co skutkuje wzrostem klarowności układu o 18,7% oraz lepszym zachowaniem kolejności odczytu. W eksperymentach dotyczących oceny kolorystyki moduł modelowania kolorów oparty na CAM02-UCS generuje palety, które według ocen projektantów są o 24,5% bardziej harmonijne, a także osiąga wyższą jednolitość percepcyjną w porównaniu do tradycyjnych metod generowania palet opartych na przestrzeniach RGB i LAB. Ponadto 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 za pomocą proponowanego systemu. Wspólnie wyniki te wskazują, że połączenie detekcji komponentów, percepcyjnego modelowania kolorów i optymalizacji poznawczej pozwala na tworzenie prototypów UI, które są nie tylko strukturalnie dokładne, ale także wizualnie spójne i efektywne poznawczo. Tabela 3 przedstawia środowisko symulacyjne i ustawienia techniczne wykorzystane do oceny proponowanego frameworka prototypowania UI. Obliczeniowo intensywne 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 zostały przeprowadzone w środowisku Ubuntu 22.04 z wykorzystaniem PyTorch 2.0 do implementacji głębokiego uczenia.

Parametr	Konfiguracja
Sprzęt	NVIDIA RTX 4090 GPU (24 GB), Intel i9 Processor, 64 GB RAM
System operacyjny	Ubuntu 22.04 LTS
Framework głębokiego uczenia	PyTorch 2.0
Backbone Faster R-CNN	ResNet-50 + FPN
Rozdzielczość obrazu	480 × 800 (znormalizowana 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 do ekstrakcji palety	K-means (k = 5)
Klasteryzacja układu	DBSCAN (ε = 20, min_samples = 3)

Tabela 3: Parametry implementacji i konfiguracja eksperymentalna proponowanego modelu. Tabela podsumowuje konfigurację sprzętową i programową wykorzystaną do trenowania i ewaluacji modelu, w tym zasoby obliczeniowe, system operacyjny, framework do uczenia głębokiego, architekturę modelu, rozdzielczość obrazów, 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 szczegółowych komponentów UI. Wszystkie obrazy UI są jednolicie zmieniane na rozmiar 480 × 800 pikseli przed przetwarzaniem. Trening przeprowadzono przez 60 epok przy użyciu optymalizatora SGD, z wielkością partii (batch size) wynoszącą 16, aby zapewnić stabilną zbieżność. Generator palety kolorów wykorzystuje CAM02-UCS z klastrowaniem K-means, natomiast algorytm DBSCAN jest stosowany do klastrowania struktury układu. 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ść wykrywania komponentów, analizowana za pomocą precyzji (precision), pełności (recall), miary F1 (F1-score), współczynnika IoU (intersection-over-union) oraz średniej precyzji średniej (mAP), które określają dokładność modelu Faster R-CNN w identyfikowaniu komponentów interfejsu użytkownika (UI) 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ść kolorów, 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 kolorów opracowanych na podstawie ram oceny kolorów interfejsu użytkownika według Guo;

iv) Mierniki efektywności poznawczej zorientowane na użytkownika, w tym obciążenie poznawcze mierzone za pomocą indeksu obciążenia zadaniowego NASA (NASA-TLX), oceny spójności estetycznej oraz efektywność wykonania zadań.

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

Metryki detekcji składników

Precyzja określa dokładność modelu w przewidywaniu komponentów interfejsu użytkownika (UI) bez generowania wyników fałszywie dodatnich. Wysoka precyzja oznacza, że większość przewidzianych ramek ograniczających odpowiada prawidłowym elementom UI. Czułość (recall) mierzy zdolność modelu do zidentyfikowania wszystkich istotnych komponentów UI na ekranie. Wysoka czułość wskazuje, że model z sukcesem wykrywa większość komponentów z zestawu danych referencyjnych (ground-truth). Wynik 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 określa stopień pokrycia się przewidywanego pola ograniczającego (bounding box) z rzeczywistym polem ograniczającym (ground truth). W zadaniach detekcji obiektów powszechnie stosuje się progi IoU wynoszące 0,5 oraz 0,75, aby reprezentować umiarkowane i rygorystyczne warunki ewaluacji. mAP podsumowuje wydajność detekcji dla wielu progów IoU. Metryka mAP@0,5:0,95 zapewnia bardziej rzetelną ocenę poprzez uśrednianie precyzji dla progów od 0,5 do 0,95 w krokach co 0,05, w związku z czym jest powszechnie uznawana za standardowy punkt odniesienia w detekcji obiektów.

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

Zbiór danych	Precyzja	Pełność	Wynik F1
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tabela 4: Wydajność wykrywania komponentów w różnych zbiorach danych. Tabela przedstawia precyzję (precision), pełność (recall) oraz miarę F1 (F1-score) dla wykrywania komponentów interfejsu użytkownika w zbiorach danych RICO, ENRICO oraz Guo, co dowodzi skuteczności modelu detekcji.

Rysunek 3 przedstawia wydajność modelu w zbiorach danych RICO, ENRICO oraz Guo przy progach IoU wynoszących 0,5 i 0,75. Zgodnie z przewidywaniami, wartości mAP są wyższe dla 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 oraz 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 oraz gęstości komponentów. Tendencja spadkowa przy bardziej rygorystycznych progach IoU obrazuje, że złożoność zbioru danych bezpośrednio wpływa na odporność detekcji.

Rycina 3. Średnia precyzja średnia (mAP) przy progach intersection over union (IoU) wynoszących 0,5 i 0,75 dla poszczególnych zbiorów danych. Wykres liniowy porównuje skuteczność detekcji komponentów w zbiorach danych RICO, ENRICO i Guo. Oś x reprezentuje zbiory danych, a oś y przedstawia wartości mAP. Dwie krzywe odpowiadają progom IoU 0,5 i 0,75, obrazując zmienność wydajności przy różnych poziomach rygorystyczności detekcji. Kliknij tutaj, aby wyświetlić powiększoną wersję tej ryciny.

Rysunek 4 przedstawia mAP@IoU(0.5:0.95) dla każdego zbioru danych, zapewniając szerszą ocenę wydajności detekcji w obrębie dziesięciu progów IoU. Wyniki wykazują wyraźną tendencję spadkową od RICO (0.61) przez ENRICO (0.57) do Guo (0.52), co potwierdza, że proponowany model detekcji najlepiej generalizuje na większych i bardziej ustrukturyzowanych zbiorach danych. Ta bardziej rygorystyczna uśredniona metryka uwypukla subtelne spadki wydajności, które mogą 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 stwarzają dodatkowe wyzwania podczas rygorystycznej ewaluacji w stylu COCO. Wyniki detekcji przedstawiono na Rysunkach 3 i 4, które zawierają ilościowe porównania mAP dla różnych poziomów IoU.

Rysunek 4. Średnia precyzja średnia (mAP) uśredniona dla progów intersection over union (IoU) od 0.5 do 0.95 w różnych zbiorach danych.Wykres liniowy przedstawia wydajność detekcji komponentów w zbiorach danych RICO, ENRICO i Guo z wykorzystaniem 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 przedstawione w skali 0–1, odzwierciedlając wydajność modelu przy różnych progach detekcji. Kliknij tutaj, aby wyświetlić powiększoną wersję tego rysunku.

Metryki jakości układu

Jakość układu jest oceniana za pomocą AE, dokładności grupowania (GA) oraz dokładności kolejności czytania (ROA), które wspólnie oceniają poprawność strukturalną, organizację percepcyjną i 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 są wyrównane względem idealnych linii wyrównania, takich jak prowadnice lewe, prawe, górne lub linie bazowe. 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 doprecyzowania układu poznawczego, ponieważ brak wyrównania zaburza przepływ wizualny i zwiększa postrzeganą złożoność. Rysunek 5 przedstawia AE w zbiorach danych RICO, ENRICO i Guo, mierzone jako średnie odchylenie pikselowe 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 wyrównanie dla modelu. Kolejny jest zbiór ENRICO z umiarkowanym odchyleniem wyrównania wynoszącym 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 i niestandardowe struktury układów, które utrudniają doprecyzowanie oparte na wyrównaniu. Ogólnie wyniki te pokazują, że model zachowuje wysoką dokładność wyrównania w różnych zbiorach danych, pomimo rosnącej złożoności układu.

Rycina 5. Błąd dopasowania w różnych zbiorach danych. Rycina przedstawia błąd dopasowania w różnych zbiorach danych; niższe wartości wskazują na lepsze dopasowanie. Kliknij tutaj, aby wyświetlić powiększoną wersję tej ryciny.

Dokładność grupowania (GA).

Wskaźnik GA określa, jak skutecznie model grupuje powiązane komponenty interfejsu użytkownika (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 zawartość 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ędzykwartylny, co wskazuje na stabilną i spójną wydajność grupowania dzięki dobrze zdefiniowanym układom z etykietami wzorców. Zbiór danych RICO wykazuje umiarkowaną dokładność grupowania przy większej zmienności, co prawdopodobnie wynika z jego 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 koncentrują się na strukturze układu. Ogólnie rzecz biorąc, wyniki wskazują, że moduł poznawczego doprecyzowania układu działa niezawodnie w różnych zbiorach danych, osiągając najlepszą wydajność grupowania na danych o spójnej strukturze.

Rysunek 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 Guo’s UI Color. Pudełka reprezentują rozstęp międzykwartylny, linia środkowa wskazuje medianę, a wąsy określają zakres wartości. Oś X reprezentuje zbiory danych, a oś Y wartości dokładności grupowania. Wielkość próby n=5128 ekranów interfejsu użytkownika (RICO: 4000, ENRICO: 1000 i Guo: 128). Kliknij tutaj, aby zobaczyć powiększoną wersję tego rysunku.

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 niezbędne dla użyteczności, przejrzystości nawigacji oraz spójności z ustalonymi konwencjami projektowymi. Wyższa wartość ROA wskazuje, że system zachowuje oczekiwane wzorce skanowania poznawczego. Rycina 7 przedstawia ROA w różnych etapach ewaluacji dla zbiorów danych RICO, ENRICO i Guo. ENRICO konsekwentnie osiąga najwyższą wartość ROA dzięki regularnej i zorientowanej na wzorce strukturze układu, co umożliwia dokładniejsze przewidywanie sekwencji odczytu przypominających ludzkie. RICO wykazuje umiarkowaną wydajność z niewielką zmiennością, co odzwierciedla jego większą różnorodność i złożoność rzeczywistych zastosowań. Zbiór danych Guo wykazuje najniższą wartość ROA, ponieważ wiele z jego ekranów jest bogatych wizualnie, ale brakuje im jasno zdefiniowanych hierarchii odczytu. Ogólnie wyniki te wskazują, że proponowany moduł rafinacji układu poznawczego działa najstabilniej na ustrukturyzowanych zbiorach danych, utrzymując jednocześnie stabilne przewidywania kolejności odczytu w zróżnicowanych projektach UI.

Rysunek 7. Dokładność kolejności odczytu w kolejnych etapach oceny dla wielu zbiorów danych. Wykres liniowy przedstawia dokładność kolejności odczytu w poszczególnych krokach oceny dla zbiorów danych RICO, ENRICO oraz Guo’s UI Color. Oś X reprezentuje etap oceny, 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 następujących po sobie etapach oceny. Etap oceny jest reprezentacją stopniowych etapów udoskonalania w proponowanym modelu. Kliknij tutaj, aby wyświetlić powiększoną wersję tego rysunku.

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

Wskaźnik spójności układu (LCS) mierzy, z jaką konsekwencją generowane układy interfejsu użytkownika (UI) są utrzymywane 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 poprawioną koherencję międzyekranową, co przekłada się na bardziej jednolity i intuicyjny UX. Rysunek 8 przedstawia LCS mierzony na wielu etapach ewaluacji dla zbiorów danych RICO, ENRICO oraz Guo’s UI Color. Zbiór 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. Z kolei zbiór RICO wykazuje umiarkowaną, ale stale poprawiającą się spójność, co przypisuje się 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 czyni spójność wieloekranową bardziej wymagającą. Ogólnie wyniki te wskazują, że zaproponowany 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.

Rycina 8. Wynik spójności układu w kolejnych etapach ewaluacji dla wielu zbiorów danych. Wykres liniowy przedstawia wyniki spójności układu w etapach ewaluacji dla zbiorów danych RICO, ENRICO oraz zbioru UI Color autorstwa Guo. Oś X reprezentuje etap ewaluacji, 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 ewaluacji. Kliknij tutaj, aby wyświetlić powiększoną wersję tej ryciny.

Metryki jakości koloru

Wygenerowane motywy kolorystyczne interfejsu użytkownika (UI) zostały ocenione za pomocą pięciu metryk opartych na percepcji, pochodnych z modelu CAM02-UCS: ΔE (percepcyjna różnica kolorów), która określa jednolitość percepcyjną między kolorami palety; stosunek kontrastu (na podstawie WCAG 2.1), który ocenia czytelność między elementami pierwszego planu i tła; wskaźnik harmonii kolorów (CHI), który mierzy estetyczną kompatybilność odcieni; wynik różnorodności kolorów (CDS), odzwierciedlający zróżnicowanie w percepcyjnej przestrzeni barw; oraz wynik 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ą jednolitość percepcyjną kolorów. Stosunek kontrastu na poziomie 6,21 potwierdza zgodność ze standardami dostępności, zapewniając lepszą czytelność. Tabela 5 przedstawia ilościowe porównanie między proponowanym modułem modelowania kolorów a metodami bazowymi. Wskaźnik CHI wzrósł z 0,61 do 0,83, co wskazuje na poprawioną spójność estetyczną przejść kolorystycznych. Dodatkowo CDS wzrósł o ponad 50%, wykazując, że generowane palety zachowują bogatszą różnorodność bez wprowadzania wizualnego chaosu. Wyższe wartości CPS wskazują na zrównoważony rozkład kolorów dominujących, co zapobiega 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	Wartość odniesienia1	Poprawa (%)
ΔE (CAM02-UCS)	Percepcyjna różnica kolorów	4.12	7.85	o 47.5% niższa
Współczynnik kontrastu (WCAG)	Czytelność par pierwszy plan–tło	6.21	4.38	41.80%
CHI (Color Harmony Index)	Harmonia barwy i nasycenia	0.83	0.61	36.10%
CDS (Color Diversity Score)	Wariancja w przestrzeni J′a′b′	18.70	12.40	50.80%
CPS (Color Prominence Score)	Stabilność kolorów dominujących	0.72	0.55	30.90%

Tabela 5: Ilościowe porównanie metryk jakości kolorów pomiędzy proponowaną a bazową metodą. Tabela przedstawia metryki 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 wyrazistości kolorów (CPS). Wyniki proponowanej metody są zestawione z wartościami bazowymi wraz z procentową poprawą.

Demografia uczestników i projekt badania

W procesie ewaluacji wzięło udział łącznie 30 uczestników. Wiek uczestników mieścił się w przedziale od 20 do 35 lat (średni wiek: 26,4 ± 3,2 lat). Grupa obejmowała osoby o różnym wykształceniu i doświadczeniu, w tym inżynierów oprogramowania, studentów oraz projektantów UI/UX. Na podstawie samooceny biegłości w obsłudze komputera, 40% uczestników zaklasyfikowano jako użytkowników średniozaawansowanych, 35% jako zaawansowanych, a 25% jako początkujących. Około połowy uczestników posiadało wcześniejsze doświadczenie w projektowaniu UI/UX lub dziedzinach pokrewnych, natomiast pozostali nie mieli takiego doświadczenia. Taka różnorodność zapewniła zrównoważoną ewaluację w odniesieniu do różnych poziomów wiedzy technicznej i znajomości zasad projektowania.

Metryki badania użytkowników

Przeprowadzono ewaluację zorientowaną na użytkownika z wykorzystaniem 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 takich czynników jak wymagania umysłowe, wysiłek i frustracja. Niższe wyniki wskazują na zmniejszone obciążenie poznawcze i większą łatwość interakcji. Zaproponowany model konsekwentnie skutkował niższymi wynikami NASA-TLX we wszystkich zbiorach danych, co wskazuje na zmniejszony wysiłek umysłowy. Poprawę tę można przypisać integracji zasad projektowania poznawczego, w tym grupowania według zasad Gestalt, zoptymalizowanych odstępów oraz wzmocnionej hierarchii wizualnej, co łącznie ułatwia bardziej intuicyjną nawigację. Metryka SUS dostarcza standaryzowanej oceny użyteczności w zakresie od 0 do 100, gdzie wyższe wartości wskazują na lepszą użyteczność i przejrzystość. Zaproponowany model 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. Lepsze wyrównanie, odstępy i przepływ nawigacji przyczyniły się do stworzenia interfejsów postrzeganych przez użytkowników jako bardziej intuicyjne i spójne funkcjonalnie. AHS, mierzony w 7-punktowej 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 poprawiony 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ę i hierarchię wizualną. Zaproponowany model znacząco zredukował SET we wszystkich zbiorach danych, wykazując, że integracja grupowania Gestalt, odstępów sterowanych uwagą oraz dopracowanych struktur układu umożliwia szybszą i bardziej efektywną interakcję. Metryka CSCR ocenia spójność projektu interfejsu użytkownika na wielu ekranach. Wyższe wyniki wskazują na lepszą ciągłość układu, kolorystyki i organizacji strukturalnej. Zaproponowany model osiągnął wyższe wartości CSCR, co odzwierciedla skuteczność modułu spójności wieloekranowej w utrzymywaniu 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 oraz CSCR) w odniesieniu do zbiorów danych RICO, ENRICO i Guo. Ogólnie zaobserwowano spójną poprawę we wszystkich metrykach ewaluacyjnych. W szczególności zbiór danych Guo wykazuje lepsze wyniki w metrykach skoncentrowanych na użytkowniku, 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 ostrożnej interpretacji. Poprawę metryk UX zaobserwowaną dla zbioru danych Guo przypisuje się przede wszystkim silnej spójności kolorystycznej i relatywnie prostszej kompozycji wizualnej, a nie lepszej 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 kątem wyrównania, grupowania i kolejności czytania. Podkreśla to istotną różnicę między czynnikami percepcyjnymi a strukturalnymi w projektowaniu UI. O ile atrybuty percepcyjne, takie jak harmonia kolorów, znacząco poprawiają UX, o tyle dokładność strukturalna i spójność układu pozostają kluczowe dla funkcjonalnej użyteczności. Zatem optymalny projekt UI wymaga równowagi między harmonią percepcyjną a poprawnością strukturalną.

Rysunek 9. Porównanie wskaźników badania użytkowników w różnych zbiorach danych. Grupowany wykres słupkowy porównuje wskaźniki badania użytkowników dla zbiorów danych RICO, ENRICO oraz Guo’s UI Color. Oś x przedstawia metryki oceny, 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 reprezentują wydajność dla każdego zbioru danych, ilustrując różnice w użyteczności, obciążeniu poznawczym, jakości estetycznej i 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 walidacji zaproponowanych hipotez (H1–H4) przeprowadzono testy istotności statystycznej kluczowych wskaźników oceny, w tym jakości układu, obciążenia poznawczego, harmonii kolorystycznej oraz miar użyteczności (Tabela 6). Wyniki przedstawiono jako średnią ± odchylenie standardowe, a istotność statystyczną oceniono za pomocą testów t dla prób zależnych z 95% przedziałem ufności (p < 0,05). Wyniki wskazują, że zaproponowane ramy osiągają statystycznie istotną poprawę w stosunku do podejść bazowych w wielu wskaźnikach, w tym w dokładności wyrównania, dokładności grupowania, kolejności czytania, obciążeniu poznawczym (NASA-TLX) oraz miarach harmonii kolorystycznej. Warto zaznaczyć, że redukcje obciążenia poznawczego i poprawy w miernikach użyteczności wykazują bardzo istotne różnice (p < 0,01). Wyniki te potwierdzają, że integracja zasad projektowania poznawczego i percepcyjnego modelowania kolorów prowadzi do mierzalnych, statystycznie istotnych usprawnień jakości interfejsu użytkownika, co wspiera hipotezy H1–H4.

Metryka	Wartość bazowa (Średnia ± SD)	Proponowana (Średnia ± SD)	Poprawa (%)	wartość p	Istotność
Błąd wyrównania (↓)	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 zadaniem NASA (NASA-TLX), skali użyteczności systemu (SUS), indeksu harmonii kolorystycznej oraz stosunku kontrastu. Przedstawiono procentową poprawę, wartości p oraz poziomy istotności statystycznej. Symbol (↑) oznacza, że wyższe wartości są lepsze, a symbol (↓) oznacza, że niższe wartości są lepsze. Istotność statystyczną oceniano przy p < 0,05.

Obserwacje specyficzne dla zestawu danych

Stosunkowo niższa wydajność zaobserwowana w metrykach strukturalnych w zbiorze 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 mię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, mimo 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 i 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, podczas gdy 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 (percepcyjna różnica kolorów), CHI i CDS, które łącznie oceniają jednolitość percepcyjną, spójność estetyczną i bogactwo palety. Wydajność detekcji jest oceniana za pomocą mAP, precyzji i 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 interfejsów użytkownika (UI). Pełny model osiąga najlepsze wyniki we wszystkich metrykach jakości układu, modelowania kolorów i detekcji, co dowodzi, że projektowanie kognitywne, percepcyjne modelowanie kolorów i głębokie rozumienie wizualne wywierają efekt synergiczny. Po usunięciu modułu modelowania kolorów wartość ΔE znacząco 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 estetyki i jakości percepcyjnej. Usunięcie kognitywnego modułu układu skutkuje znacznym wzrostem AE oraz wyraźnym spadkiem GA i ROA, co wykazuje, że zasady projektowania kognitywnego są niezbędne do tworzenia spójnych strukturalnie i czytelnych układów. Usunięcie modułu spójności wieloekranowej prowadzi do redukcji LCS, co potwierdza jego rolę w utrzymywaniu zgodnych wzorców układu na wielu ekranach. Zastąpienie detektora Faster R-CNN prostszą siecią CNN powoduje gwałtowny spadek mAP, precyzji i pełności, podkreślając krytyczne znaczenie 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 ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Usunięto moduł koloru	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Usunięto moduł poznawczego układu	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ąpiono 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
REDRAW	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM (Layout Diffusion)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
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ł kolorów, moduł układu poznawczego, 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), wyniku spójności układu (LCS), percepcyjnej różnicy kolorów (ΔE), indeksu harmonii kolorów (CHI), wyniku różnorodności kolorów (CDS) oraz średniej precyzji (mAP). Symbol (↑) oznacza, że wyższe wartości są lepsze, a symbol (↓) oznacza, że niższe wartości są lepsze.

DOSTĘPNOŚĆ DANYCH:

Zbiory danych wykorzystane w niniejszym badaniu są dostępne pod następującymi linkami: zbiór danych RICO: https://interactionmining.org/rico; zbiór danych ENRICO: https://github.com/luileito/enrico; zbiór danych kolorów interfejsów użytkownika (UI Color Dataset) autorstwa Guo: https://github.com/guozhongke/UI-Color-Dataset.

Plik uzupełniający 1. Sformułowania matematyczne i szczegółowe informacje o implementacji.Plik ten zawiera szczegółowe sformułowania matematyczne oraz schematy algorytmiczne wspierające proponowany zautomatyzowany system prototypowania interfejsów użytkownika (UI). Obejmuje on trening detekcji komponentów, ekstrakcję wzorców układu, modelowanie harmonii kolorystycznej, ujednolicony cel prototypowania UI, szczegóły detekcji Faster R-CNN, obliczenia odległości przestrzennych i podobieństwa wyrównania, konstrukcję logicznego drzewa UI, percepcyjne modelowanie kolorów 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

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^23,24 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.

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