Bu içeriği görüntülemek için JoVE aboneliğiniz gereklidir. Giriş yapın veya ücretsiz denemenizi bugün başlatın.

Araştırma makalesi

Kullanılabilirliği ve Düzen Netliğini Artırmak İçin Bilişsel ve Görsel Tasarım İlkelerini Entegre Eden Otomatik Kullanıcı Arayüzü Prototipleme Çerçevesi

54 görüntülenme

⸱

DOI:

10.3791/71071

⸱

14 Ağustos 2026

 , 
1School of Art and Communication, Shanghai Institute of Commerce and Foreign Languages, 2Hubei College of the Arts

Bu makalede

Özet

Bu çalışma, bilişsel tasarım ilkelerini, algısal renk modellemesini ve derin öğrenmeyi entegre eden otomatik bir kullanıcı arayüzü prototipleme çerçevesi sunmaktadır. Sistem; erişilebilirliği, düzen netliğini, renk uyumunu ve ekranlar arası tutarlılığı artırarak tutarlı ve kullanıcı merkezli arayüz tasarımları sağlar.

Özet

Etkili kullanıcı arayüzü (UI) tasarımı; görsel çekicilik, bilişsel kullanılabilirlik ve düzen tutarlılığı arasında harmonik bir denge gerektirir. Ancak, mevcut otomatik UI üretim yaklaşımları öncelikle görsel görünüme veya bileşen tespitine odaklanmakta olup bilişsel ilkeleri, renk zekasını ve yapısal akıl yürütmeyi entegre eden birleşik bir çerçeveden yoksundur. Ayrıca, mevcut yöntemler kısıtlı düzen genellemesi, düşük yorumlanabilirlik, statik renk seçimi ve ekranlar arası tutarsız davranışlardan muzdariptir. Bu bağlamda, bu çalışma; bilişsel ve görsel tasarım ilkeleriyle zenginleştirilmiş, Faster bölge tabanlı evrişimli sinir ağı (Faster R-CNN) tabanlı bileşen tespiti ve CIECAM02 tekbiçimli renk uzayı (CAM02-UCS) güdümlü algısal renk modellemesini entegre eden otomatik bir UI prototipleme çerçevesi önermektedir. Faster R-CNN, büyük ölçekli arayüz veri setlerinden UI bileşenlerini tanımlamak ve hiyerarşik yapıları anlamak için kullanılır. Geliştirilmiş bir renk üretim modülü, CAM02-UCS kullanarak algısal olarak tekbiçimli, uyumlu ve kullanılabilirlik standartlarına uygun renk temaları sağlamak amacıyla marka veya referans görsellerini analiz eder. Bu çıktılar; rafine, görev odaklı UI düzenlerini otomatik olarak oluşturmak için Gestalt gruplandırması, Fitts ve Hick yasaları, dikkat tabanlı boşluklandırma ve görsel hiyerarşi modellemesi dahil olmak üzere bilişsel tasarım kurallarıyla daha da optimize edilir. RICO, ENRICO ve Guo'nun UI Renk Veri Setleri üzerinde yürütülen deneyler, önerilen sistemin %92,4 bileşen tespit doğruluğuna ulaştığını, düzen netliğini ve okuma sırası doğruluğunu %18,7 oranında artırdığını ve temel yöntemlere kıyasla tasarımcılar tarafından %24,5 daha uyumlu olarak değerlendirilen renk paletleri ürettiğini göstermektedir. Kullanıcı değerlendirmeleri ayrıca, algılanan bilişsel yükte %31 azalma ve ekranlar arası tasarım tutarlılığında %28 artış olduğunu belirtmektedir. Bu bulgular, derin öğrenme tabanlı yapısal anlayışın, algısal temelli renk modellemesi ve bilişsel tasarım ilkeleriyle birleştirilmesinin; son derece verimli, estetik olarak tutarlı ve kullanıcı dostu UI prototipleri ürettiğini kanıtlamaktadır. Bu çerçeve, akıllı ve insan odaklı otomatik UI prototipleme için özgün, uçtan uca bir yaklaşım sunmaktadır.

Giriş

Grafik kullanıcı arayüzleri (GUI'ler), insanlar ve bilgisayar sistemleri arasında temel bir iletişim ortamı görevi görerek kullanılabilirliği, erişilebilirliği ve genel kullanıcı deneyimini (UX) önemli ölçüde etkiler1,2. Modern yazılım sistemleri, kullanıcıları çekmek ve elde tutmak için sezgisel ve görsel olarak çekici arayüzlere güvenir. Geleneksel olarak UI tasarımı, daha sonra mühendisler tarafından ön uç koduna dönüştürülen grafik düzenlerin oluşturulmasını içerir. Ancak, işletim sistemleri arasındaki platforma özgü protokol farklılıkları tekrarlanan adaptasyonlar gerektirerek geliştirme karmaşıklığını ve çabasını artırmaktadır. Bu nedenle, manuel çabayı azaltan ve geliştirme verimliliğini artıran otomatik UI kod üretimi, önemli bir araştırma yönü olarak ortaya çıkmıştır.

Otomatik kullanıcı arayüzü (UI) oluşturmaya yönelik erken yaklaşımlar, bölge tespiti ve sınıflandırma için geleneksel görüntü işleme tekniklerini derin öğrenme modelleriyle birleştirmiştir3,4. Günümüzde, grafik kullanıcı arayüzü (GUI) kod üretimi için kullanılan baskın stratejiler, UI görüntülerini analiz etmek ve bunları yapılandırılmış ön uç gösterimlerine dönüştürmek için bilgisayarlı görü tekniklerini uygulamaktadır5,6,7. Görüntü işleme yöntemleri manuel olarak belirlenmiş özelliklere dayanırken, derin öğrenme yaklaşımları geniş ölçekli veri kümelerinden hiyerarşik temsillemeler çıkarmaktadır. Bunun sonucunda araştırmacılar, dayanıklılığı ve doğruluğu artırmak amacıyla derin öğrenmeyi alana özgü görüntü işleme teknikleriyle birleştiren hibrit yaklaşımlar üzerinde çalışmışlardır.

Renk, kullanıcı algısını, kullanılabilirliği ve estetik çekiciliği etkileyen, kullanıcı arayüzü (UI) tasarımındaki bir diğer kritik faktördür1. Görsel girdilerin ton ve bağlam açısından farklılık gösterdiği durumlarda, görüntü içeriği ile UI renk şemaları arasında tutarlılığı sağlamak zorlaşmaktadır8,9,10. Sonuç olarak, önemli miktarda araştırma otomatik renk paleti oluşturma ve algısal renk modelleme üzerine yoğunlaşmıştır. Renk oluşturma için mevcut yöntemler arasında CIELAB renk uzayına dayalı teknikler yer almaktadır11. Diğer yaklaşımlar ise görüntülerden baskın renkleri çıkarmak için k-means gibi kümeleme algoritmalarını kullanmaktadır12. Bunun sonucunda, yakın dönemdeki çalışmalar renk modellemesi için giderek daha fazla veri odaklı ve makine öğrenimi tabanlı yaklaşımlar benimsemiştir.

Paralel olarak, derin öğrenme yaklaşımları kullanıcı arayüzü (UI) bileşen tespitini ve yerleşim anlayışını önemli ölçüde geliştirmiştir. Sinir ağları, mobil arayüzlerin daha doğru yapısal ayrıştırılmasını sağlamıştır13. Ancak bu yöntemler temel olarak tespit doğruluğuna odaklanmakta ve genellikle bilişsel kullanılabilirlik, yerleşim hiyerarşisi ve etkileşim verimliliği gibi üst düzey yönleri göz ardı etmektedir. UI yerleşim sentezi için üretken modeller de önerilmiştir14,15, fakat bu modeller ekranlar arası tutarlılığın korunması ve yorumlanabilir tasarım kararlarının sunulması konusunda zorluklar yaşamaktadır16. Diğer yaklaşımlar görsel benzerliğe veya oluşturma kalitesine odaklanmaktadır ancak bileşen semantiğini, renk uyumunu ve kullanılabilirlik kısıtlamalarını birleştiren birleşik bir çerçeveden yoksundur17. Metin tanıma da UI içeriğinin anlaşılması için önemlidir. Evrişimli tekrarlayan sinir ağları (CRNN'ler) gibi teknikler, arayüz ekranlarındaki karmaşık metin kalıplarının doğru şekilde tanınmasını sağlar18,19,20.

Taslaklardan veya görsellerden UI kodu üretmek için çeşitli sistemler önerilmiştir. Sketch2Code, taslakları kod temsillerine dönüştürmek için nesne tespiti kullanır21,22, ancak görüntü kalitesine karşı hassastır. REDRAW, yapılandırılmış UI temsilleri oluşturmak için evrişimli ve tekrarlayan sinir ağlarını birleştirerek veri toplama ve model eğitimi için otomatik bir iş akışı sağlar23,24. Sonraki çalışmalar, üretilen UI kalitesini değerlendirmek için geliştirilmiş değerlendirme metrikleri sunmuştur25. Daha güncel yaklaşımlar arasında yerleşim oluşturma için difüzyon tabanlı ve transformer tabanlı modeller yer almaktadır; örneğin, oto-kodlayıcı yöntemleri içermeyen difüzyon yerleşim transformer'ları, transformer tabanlı GUI düzenleme grafikleri kullanarak GUI yerleşim oluşturma ve büyük dil modeli rehberliğinde UI yerleşim oluşturma gibi yöntemler bulunmaktadır26,27,28. Bu yaklaşımların karşılaştırmalı bir genel görünümü Tablo 1'de sunulmuştur.

Referanslar ve Temel Yöntem(ler)AmaçAvantajlarDezavantajlar
Otomatik Görüntü Tabanlı Kullanıcı Arayüzü Renk Teması Oluşturma: baskın renk çıkarımı + CAM02-UCS algısal renk modellemesi¹Referans görüntülerden, uyum ve kullanılabilirliği optimize ederek otomatik olarak kullanıcı arayüzü (UI) renk temaları oluşturun.Güçlü algısal temel (CAM02-UCS); uyum ve kullanılabilirliği (kontrast ve çeşitlilik) açıkça dengeler; web tabanlı uygulamayı ve tasarımcı değerlendirmesini içerir.Sadece renk/temaya odaklanmış (düzen veya bileşen yapısına değil); uçtan uca öğrenilmiş kullanıcı arayüzü sentezi yerine kural/sezgisel tabanlı.
Ayrıştırılmış Bir Difüzyon Modeli ile Düzen Oluşturmanın Birleştirilmesi (LDGM)²⁵Grafik sahneleri ve kullanıcı arayüzleri için birleştirilmiş, esnek düzen oluşturma.Yerleşim oluşturma için son teknoloji çeşitlilik ve kontrol edilebilirlik; koşullu oluşturmayı ve birden fazla öznitelik türünü destekler.Kısıtlanmadığı takdirde, difüzyon tabanlı çıktılar hizalama veya ince ayarlı düzen sorunları sergileyebilir; daha yüksek model karmaşıklığı ve çıkarım maliyeti söz konusudur.
Otokodlayıcı Yöntemleri Olmayan Difüzyon Düzen Transformers'ları: düzen oluşturma için transformer + difüzyon (otokodlayıcı yok)²⁶Yerleşim oluşturma kıyaslamaları (FID, hizalama ve örtüşme metrikleri) için sadakat ve hizalamayı iyileştirin.Komşu nesneler arasındaki semantik korelasyonların daha iyi yakalanması; FID ve hizalama metriklerinde güçlü performans.Kullanıcı arayüzü (UI) semantiğinden ziyade, öncelikle yerleşim geometrisine (konumlar, boyutlar, kategoriler) odaklanır.
GUI Düzenleme Grafikleri (GUI-AG'ler)²⁷ kullanılarak Transformer tabanlı modeller ile GUI Yerleşim ÜretimiTasarımcılara yardımcı olmak amacıyla, konumsal/grafik kısıtlamalarından GUI düzenleri oluşturun.Graf temsilleri ilişkisel kısıtlamaları yakalar; transformer ise esnek, kısıtlamaya bağlı üretimi mümkün kılar.Tasarımcılardan açık kısıtlama grafikleri gerektirebilir; renk ve kullanılabilirlik metrikleri üzerinde sınırlı vurgu vardır.
UI Grameri ile Yönlendirilen LLM'ler ile UI Düzen Oluşturma: Büyük Dil Modelleri (LLM'ler) + hiyerarşik UI grameri²⁸Yerleşim oluşturma için LLM'leri keşfedin ve gramer temsilleri aracılığıyla açıklanabilirlik/kontrolü geliştirin.Yüksek düzeyde kontrol edilebilirlik ve açıklanabilirlik; LLM'lerin (GPT tipi) bağlam içi öğrenme (in-context learning) yeteneğinden yararlanabilir.Sınırlı ampirik doğrulama içeren erken aşama çalışma; gramer tasarımı ve farklı kullanıcı arayüzleri genelindeki sağlamlık

Tablo 1: Mevcut kullanıcı arayüzü (UI) renk modelleme ve yerleşim oluşturma yöntemlerinin karşılaştırılması. Tablo; renk teması oluşturma, difüzyon tabanlı yerleşim oluşturma, transformer tabanlı yöntemler ve büyük dil modeli rehberliğinde yerleşim oluşturma dahil olmak üzere kullanıcı arayüzü tasarımı için temsili yaklaşımları özetlemektedir. Her yöntem için temel teknik, amaç, avantajlar ve kısıtlamalar sunulmuş; algısal modelleme, yerleşim oluşturma yeteneği, kontrol edilebilirlik ve kullanılabilirlik hususlarındaki farklar vurgulanmıştır.

Bu ilerlemelere rağmen, temel bir sınırlama devam etmektedir: mevcut hiçbir sistem; bileşen algılamayı, algısal renk modellemeyi, bilişsel tasarım ilkelerini ve çoklu ekran düzen tutarlılığını tek bir uçtan uca çerçeve içerisinde ortaklaşa entegre etmemektedir1. Mevcut yaklaşımlar genellikle, aralarındaki karşılıklı bağımlılıkları göz önünde bulundurmadan sadece algılama, düzen veya renk gibi bir veya iki yönü optimize etmektedir. Bu parçalı yapı, birleşik ve insan merkezli otomatik kullanıcı arayüzü (UI) prototipleme sistemlerinin geliştirilmesinde kritik bir araştırma boşluğunun olduğunu vurgulamaktadır. Özellikle, Gestalt yasaları, Fitts yasası ve Hick yasası gibi bilişsel tasarım ilkeleri, hesaplamalı modellere biçimsel olarak entegre edilmek yerine genellikle kavramsal olarak ele alınmaktadır.

Bu sınırlamaları gidermek için, bu çalışma; bileşen tespiti, algısal renk modellemesi ve bilişsel tasarım ilkelerini tek bir sistemde entegre eden uçtan uca otomatik bir kullanıcı arayüzü (UI) prototipleme çerçevesi önermektedir. Çerçeve; düzen kalitesini artırmak, bilişsel yükü azaltmak, renk uyumunu geliştirmek ve genel kullanışlılığı yükseltmek için tasarlanmıştır. Bu iyileştirmeler; RICO, ENRICO ve Guo'nun UI Renk Veri Setleri üzerinde yapılan deneylerle doğrulanmış olup yapısal, algısal ve bilişsel yönlerin tek bir otomatik UI prototipleme hattında birleştirilmesinin etkinliğini kanıtlamaktadır. Derin öğrenme tabanlı bileşen tespiti, algısal renk modellemesi ve bilişsel tasarım ilkelerinin birleşik bir çerçeve içinde entegre edilmesinin, mevcut yaklaşımlara kıyasla UI prototip kalitesini önemli ölçüde artıracağı hipotezi kurulmuştur. Spesifik olarak H1, çerçevenin hizalama, gruplandırma ve okuma sırası dahil olmak üzere düzen kalitesini artırdığını öne sürmektedir. H2, çerçevenin kullanıcı bilişsel yükünü azalttığını ileri sürmektedir. H3, algısal renk modellemesinin renk koordinasyonunu ve görsel uyumu iyileştirdiğini savunmaktadır. H4 ise UI prototiplerinin genel kullanışlılığının ve estetik kalitesinin iyileştiğini belirtmektedir.

Erişim kısıtlı. Bu içeriği görüntülemek için lütfen giriş yapın veya deneme sürümünü başlatın.

Protokol

Bu çalışma, halka açık veri setlerini kullanmaktadır ve insan veya hayvan denekleri içermemektedir.

Önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesi; tutarlı ve kullanıcı merkezli arayüz prototipleri üretmek için derin öğrenme tabanlı yapısal anlamlandırmayı, algısal olarak tekdüze renk modellemesini ve bilişsel tasarım ilkelerini entegre eder. Metodoloji, çeşitli ekran düzenlerinin doğru şekilde yorumlanmasını sağlamak amacıyla UI bileşenlerini tespit etmek ve bunların hiyerarşik ilişkilerini çıkarmak için RICO ve ENRICO veri kümeleri üzerinde eğitilmiş bir Faster R-CNN mimarisi ile başlar. Tespit edilen bileşenler daha sonra; marka veya görüntü tabanlı renk ipuçlarını çıkaran, CAM02-UCS kullanarak algısal benzerliği modelleyen ve uyumlu, kontrast duyarlı ile erişilebilirlik standartlarına uygun renk paletleri oluşturan bir renk zekası modülü tarafından işlenir. Ardından; mekansal organizasyonu ve bileşen hizalamasını optimize etmek için Gestalt gruplama yasaları, Fitts yasası, Hick yasası, dikkat tabanlı boşluklandırma ve görsel hiyerarşi kısıtlamaları dahil olmak üzere bilişsel tasarım ilkeleri, bir bilişsel optimizasyon motoru aracılığıyla uygulanır. Son olarak, bir düzen akıl yürütme katmanı; kullanılabilirlik, estetik ve fonksiyonel netlik arasında denge kuran çok ekranlı tutarlı UI prototipleri üretmek için yapısal, algısal ve bilişsel kısıtlamaları entegre eder. Bu entegre iş akışı, algısal tutarlılığı sağlar, bilişsel yükü azaltır ve insan merkezli tasarım ilkelerine bağlı kalır. Önerilen yöntemin tam iş akışı Şekil 1'de gösterilmiştir.

Bileşen tespiti için Faster R-CNN kullanımı ve bilişsel optimizasyon diyagramı ile kullanıcı arayüzü (UI) tasarım süreci.
Şekil 1Önerilen otomatik kullanıcı arayüzü prototipleme çerçevesinin genel mimarisi. Diyagram, bir giriş kullanıcı arayüzü (UI) görüntüsünden başlayan tüm iş akışını göstermektedir. Arayüz öğelerini tanımlamak için Faster R-CNN kullanılarak bileşen tespiti gerçekleştirilir. Tespit edilen bileşenler daha sonra hiyerarşi ve düzen çıkarımı için CAM02-UCS tabanlı algısal modelleme kullanılarak işlenir. Ardından; Gestalt ilkeleri, Fitts yasası, Hick yasası ve dikkat tabanlı düzenlemeler kullanılarak bilişsel optimizasyon uygulanır. Oklar, modüller arasındaki veri akışını göstermekte ve bu süreç nihai UI prototip çıktısıyla sonuçlanmaktadır. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Çerçevenin genel görünümü

Şekil 1, ham bir kullanıcı arayüzü (UI) ekran görüntüsünü bilişsel olarak geliştirilmiş bir prototipe dönüştüren önerilen otomatik UI prototipleme çerçevesinin uçtan uca iş akışını göstermektedir. Süreç, Faster R-CNN tabanlı bileşen tespit modülüne aktarılan giriş UI görüntüsü ile başlar. Bu modül; düğmeler, simgeler, metin alanları ve kapsayıcılar gibi arayüz öğelerini tanımlayarak bunların karşılık gelen sınırlayıcı kutularını ve sınıf etiketlerini çıktı olarak verir. Tespit edilen bileşenler daha sonra hiyerarşi ve düzen çıkarma aşamasında işlenir. Sistem, mekansal ilişkilere ve yapısal örüntülere dayanarak, kullanıcıların ekran organizasyonunu doğal olarak nasıl algıladığını yansıtan hiyerarşik bir düzen ağacı oluşturur. Bu temsil, UI öğeleri arasındaki görsel gruplandırmayı ve yapısal bağımlılıkları yakalar. Çıkarılan düzen, ardından insan merkezli tasarım ilkeleri uygulanarak bilişsel optimizasyon yoluyla geliştirilir. Bunlar arasında görsel kümeleme için Gestalt gruplandırması, dokunma hedefi boyutunu ve erişilebilirliğini optimize etmek için Fitts yasası, karar verme karmaşıklığını azaltmak için Hick yasası ve görsel hiyerarşiyi iyileştirmek için dikkat tabanlı boşluklandırma yer alır. Sonuç olarak düzen, kullanıcı etkileşimi için daha sezgisel, okunabilir ve verimli hale gelir. Son olarak, optimize edilen düzen, tutarlı bir UI prototipi oluşturmak için algısal renk modellemesi ile birleştirilir. Ortaya çıkan arayüz yapısal olarak doğru, görsel olarak uyumlu ve insan kullanılabilirlik beklentileriyle uyumludur.

Çerçeve, Ubuntu 2.04 üzerinde PyTorch 2.0 kullanılarak uygulanmıştır. Deneyler, NVIDIA RTX 4090 GPU (24 GB VRAM) ile donatılmış bir sistemde yürütülmüştür. Faster R-CNN modeli, ImageNet veri seti üzerinde önceden eğitilmiş bir ResNet-50 omurgası kullanmıştır. Eğitim; 0,01 öğrenme oranı, 16 grup boyutu ve 60 epoka kadar stochastic gradient descent (SGD) optimizatörü kullanılarak gerçekleştirilmiştir. Aşırı öğrenmeyi önlemek için verilerin %20'sini içeren bir doğrulama seti kullanılarak erken durdurma uygulanmıştır. Eğitim 60 epoka kadar sürdürülmüş olsa da, doğrulama kaybına dayalı erken durdurma sayesinde yakınsama genellikle daha erken aşamalarda sağlanmıştır. Momentum ve ağırlık azalımı sırasıyla 0,9 ve 0,005 olarak ayarlanmıştır. Veri artırma işlemleri; normalizasyon, rastgele yatay çevirme, rastgele kırpma ve yeniden boyutlandırmayı içermiştir.

Veri seti hazırlama

Önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesini desteklemek için üç tamamlayıcı veri seti kullanılmıştır: ENRICO29, RICO30 ve Guo'nun UI Renk Veri Seti1. RICO veri seti, 9.70 uygulamadan toplanmış 6.261 Android UI ekranını içermekte olup, bileşen tespiti ve hiyerarşik düzen çıkarma işlemleri için geniş ölçekli bir çeşitlilik sunmaktadır. ENRICO, yapısal muhakeme ve düzen tutarlılığı modellemesi için geliştirilmiş genelleştirme imkanı sağlayan, manuel olarak 20 tasarım desenine ayrılmış 1.464 yüksek kaliteli UI ekran görüntüsünü içermektedir. Guo'nun UI Renk Veri Seti, algısal renk modellemesi ve palet değerlendirmesi için kullanılan, açıklama eklenmiş renk temalarına sahip 128 küratörlü UI görüntüsünden oluşmaktadır. Ancak, nispeten küçük boyutu nedeniyle bu veri seti, düzen özelliklerinde bazı değişkenliklere yol açabilir. Bu çalışma için eğitim ve değerlendirme amacıyla 5.128 ekrandan oluşan birleşik bir veri seti hazırlanmıştır. Spesifik olarak, bileşen tespiti için Faster R-CNN modelini eğitmek amacıyla RICO'dan yaklaşık 4.0 görüntü, düzen deseni öğrenimi ve yapısal tutarlılık modellemesi için ENRICO'dan 1.0 görüntü ve renk değerlendirme görevleri için Guo'nun veri setinden 128 görüntü kullanılmıştır. Veri setleri arasında uyumluluğu sağlamak için tüm görüntüler 480 × 80 piksel çözünürlüğe normalize edilmiş, standart bir sRGB renk uzayına dönüştürülmüş ve standartlaştırılmış sınırlayıcı kutular ve hiyerarşik meta verilerle yeniden etiketlenmiştir. Bu çalışmada kullanılan veri setlerine genel bir bakış Tablo 2'de sunulmuştur. RICO veri seti, UI bileşenlerinin geniş ölçekli tespitini ve yapısal analizini desteklerken, ENRICO modelin düzen desenlerini tanıma ve ekranlar arası tutarlılığı sağlama yeteneğini artırmaktadır. Guo'nun UI Renk Veri Seti, boyutu daha küçük olmasına rağmen, algısal renk uyumu ve kontrast modellemesinin değerlendirilmesinde kritik bir rol oynamaktadır. Bu veri setleri birlikte, önerilen otomatik UI prototipleme çerçevesinin eğitimi, doğrulaması ve değerlendirilmesi için kapsamlı ve dengeli bir temel sağlamaktadır.

Veri SetiMevcut Toplam Görüntü SayısıÇalışmada Kullanılan GörüntülerÖnerilen Çerçevedeki Amaç
RICO Veri Seti3066,2614,000Kullanıcı arayüzü bileşeni tespiti, yapısal düzen çıkarımı
ENRICO Veri Seti291,4641,000Tasarım kalıbı öğrenimi, yerleşim tutarlılığı modellemesi
Guo’nun Kullanıcı Arayüzü Renk Veri Seti1128128Renk teması çıkarımı, algısal renk değerlendirmesi
Toplam Birleşik67,8535,128Saptama, düzen ve renk modelleme için kapsamlı veri seti

Tablo 2: Önerilen çerçevede kullanılan veri kümelerinin özeti. Tablo; RICO, ENRICO ve Guo’nun UI Color veri kümeleri dahil olmak üzere eğitim ve değerlendirme için kullanılan veri kümelerini sunmaktadır. Tabloda mevcut toplam görüntü sayısı, bu çalışmada kullanılan alt küme ve her bir veri kümesinin önerilen çerçeve içindeki bileşen tespiti, düzen modelleme ve algısal renk analizi süreçlarındaki spesifik rolü rapor edilmektedir.

RICO, ENRICO ve Guo veri kümelerinde UI bileşenleri, düzen yapıları ve renk dağılımlarındaki çeşitliliği korumak için tabakalı örnekleme stratejisi uygulanmıştır. Veri kümesi, tabakalı örnekleme kullanılarak eğitim (%70), doğrulama (%15) ve test (%15) alt kümelerine ayrılmıştır. Görüntüler, ortalama (0.485, 0.456 ve 0.406) ve standart sapma (0.29, 0.24 ve 0.25) kullanılarak normalize edilmiştir. Veri artırma işlemi, rastgele yatay çevirme (olasılık = 0.5) ve rastgele kırpma (ölçek aralığı: 0.8–1.0) işlemlerini içermiş ve eğitim sırasında 224 × 24 piksele yeniden boyutlandırma uygulanmıştır.

Bileşen açıklama ve ön işleme

RICO, ENRICO ve Guo’nun UI Renk Veri Seti, önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesinin üç temel fonksiyonel bileşeninile toplu olarak desteklemektedir: bileşen algılama, düzen modelleme ve algısal renk optimizasyonu. RICO veri seti, 6.00'den fazla mobil UI ekranından oluşan geniş ölçekli bir koleksiyon içerir ve öncelikle bileşen algılama modülünün eğitimi için kullanılır. Veri setindeki çeşitlilik, Faster R-CNN modelinin çok çeşitli uygulamalar genelinde butonlar, görseller ve metin alanları gibi yaygın UI öğelerinin güçlü temsillerini öğrenmesini sağlar. Bu durum, farklı tasarım koşulları altında UI bileşenlerinin doğru şekilde algılanmasını ve konumlandırılmasını sağlar. ENRICO veri seti, yapısal ilişkileri ve düzen kalıplarını öğrenmek için yüksek kaliteli, örüntü etiketli UI ekranları sunar. Bu sayede sistem, bileşenler arası ilişkileri, hiyerarşik organizasyonu ve yaygın tasarım şablonlarını anlayabilir. Bu veri seti, düzen yapılarının modellenmesinde ve çoklu ekran tutarlılığının sağlanmasında kritik bir rol oynayarak, çerçevenin yerleşik tasarım kurallarıyla uyumlu düzenler oluşturmasına olanak tanır. Buna karşılık, Guo’nun UI Renk Veri Seti özellikle algısal ve bilişsel renk modellemesi için kullanılır. Yapısal yönlere odaklanan RICO ve ENRICO'nun aksine, bu veri seti açıklanmış renk temalarına sahip küratörlü UI görselleri içerir. Bu açıklamalar, renk çıkarma ve uyum değerlendirme modüllerini eğitmek için kullanılır. Renk ilişkilerini CAM02-UCS gibi algısal renk uzaylarına eşleyerek çerçeve; kontrastı, erişilebilirliği ve estetik tutarlılığı dengeleyen renk paletleri oluşturmayı öğrenir. Birlikte bu veri setleri entegre bir iş akışı oluşturur: RICO bileşen algılamayı destekler, ENRICO düzen kalıplarının anlaşılmasını ve yapısal tutarlılığı sağlar ve Guo’nun veri seti algısal renk optimizasyonunu kolaylaştırır. Bu entegrasyon, oluşturulan UI prototiplerinin yapısal olarak doğru, görsel olarak uyumlu ve bilişsel olarak optimize edilmiş olmasını sağlar.

Normalizasyon, [0.485, 0.456, 0.406] ortalaması ve [0.29, 0.24, 0.25] standart sapması kullanılarak gerçekleştirilmiştir. Model genellemesini artırmak için rastgele kırpma, yatay çevirme ve döndürme dahil olmak üzere veri artırma teknikleri uygulanmıştır. Ayrıca, veri kümeleri arasında tutarlılığı sağlamak için piksel değerleri [0, 1] aralığına ölçeklendirilmiş ve tüm görüntüler 480 × 80 piksel çözünürlüğe yeniden boyutlandırılmıştır. Eğitim sırasında artırma işlemi için 224 × 24 piksel çözünürlüğe getirilen görüntüler kullanılırken, düzen analizi için 480 × 80 piksellik orijinal çözünürlük korunmuştur. Önceden tanımlanmış eşikler kullanılarak ilgisiz açıklamalara filtreleme yapmak amacıyla sınırlayıcı kutular düzenlenmiştir. Veri kümeleri arasında tek biçimlilik sağlamak için tüm kullanıcı arayüzü (UI) öğeleri LabelImg açıklama aracı kullanılarak manuel olarak etiketlenmiştir. Etiketlemeden önce, UI öğelerini buton, metin, görüntü, ikon ve kapsayıcı gibi kategorilere ayırmak için önceden tanımlanmış bir şema oluşturulmuştur. Sınırlayıcı kutu temsili için tek tip bir koordinat sistemi uygulanmış ve öğeler arasındaki mekansal ilişkilere ve düzen ağacı içindeki ebeveyn-çocuk ilişkilerine dayalı olarak hiyerarşik bilgiler oluşturulmuştur. Ek olarak, RICO, ENRICO ve Guo veri kümeleri genelinde öğelerin tutarlı şekilde etiketlenmesini, örtüşen bileşenlerin uygun şekilde işlenmesini ve minimum boyut eşiklerinin uygulanmasını sağlamak için kılavuzlar belirlenmiştir.

Bileşen algılama eğitimi ve yerleşim düzeni örüntüsü çıkarımı için ayrıntılı matematiksel formülasyonlar Ek Dosya 1'de sunulmuştur.

Faster R-CNN modeli, 0.9 momentum ve 0.05 ağırlık azalması (weight decay) ile SGD kullanılarak eğitilmiştir. Başlangıç öğrenme oranı 0.01 olarak belirlenmiş ve doğrulama performansına dayalı bir adım azalma (step decay) politikası ile ayarlanmıştır. Eğitim, 16'lık grup boyutu (batch size) ile 60 epoka kadar gerçekleştirilmiştir. Aşırı öğrenmeyi (overfitting) önlemek için, eğitim verilerinin %20'sini içeren bir doğrulama seti kullanılarak erken durdurma (early stopping) uygulanmıştır.

f(.) eşleme fonksiyonu, tespit edilen kullanıcı arayüzü (UI) öğelerini girdi olarak alır ve çıktı olarak hiyerarşik bir yerleşim temsili üretir. Uzaysal mesafe ve hizalama kriterlerine dayanarak UI öğeleri arasındaki komşuluk ilişkilerini hesaplar ve bu ilişkileri temsil etmek için bir komşuluk matrisi oluşturur. Daha sonra, ilgili bileşenleri gruplandırmak için DBSCAN gibi bir kümeleme algoritması uygulanır. Son olarak, kümelenmiş öğeler ebeveyn-çocuk ilişkilerine göre hiyerarşik yapılara organize edilerek yapılandırılmış bir yerleşim temsili oluşturulur.

Renk uyumu modellemesi ve birleştirilmiş optimizasyon hedefi için ayrıntılı formülasyonlar Ek Dosya 1'de sunulmuştur.

Bu amaç fonksiyonu; yapısal algılama, yerleşim akıl yürütme ve algısal renk modellemenin entegrasyonunu matematiksel olarak formüle ederek, çerçevenin tüm bileşenlerinin tutarlı ve kullanıcı merkezli UI prototipleri oluşturmaya ortaklaşa katkı sağlamasını garanti eder. Optimizasyon, çerçevenin her bir bileşeni için modüler bir şekilde gerçekleştirilir. Bileşen algılama modülünün eğitimi için SGD kullanılırken, birleşik amacın ortak optimizasyonu sırasında Adam optimize edici kullanılır. Birleştirilmiş amaç, genel sistem performansını yönlendirmek için kullanılır. Ortak optimizasyon aşamaları için amaç fonksiyonu, 0,01 öğrenme oranı ve 16 grup boyutu ile Adam optimize edici kullanılarak minimize edilir. Eğitim, doğrulama kaybı değişiminin beş ardışık epoch boyunca 10−4'ten düşük olduğu durumda erken durdurma uygulanarak 60 epoch'a kadar gerçekleştirilir.

Faster R-CNN kullanılarak bileşen tespiti

Önerilen çerçeve; butonlar, ikonlar, metin alanları, görüntüler ve kapsayıcılar dahil olmak üzere kullanıcı arayüzü (UI) bileşenlerinin otomatik tespiti için Faster R-CNN kullanmaktadır. Faster R-CNN, yüksek nesne tespit doğruluğunu verimli bölge önerisi üretimiyle birleştirdiği için bu görev için oldukça uygundur; bu özellik, yoğun yerleştirilmiş öğeler içeren karmaşık UI düzenlerinin işlenmesi için temel teşkil eder. Model, her bir UI ekranından konvolüsyonel özellik haritaları çıkarmak için ImageNet veri kümesi üzerinde önceden eğitilmiş bir ResNet-50 omurgası kullanır. Eğitim sırasında, genel görsel özellikleri korumak için erken katmanlar dondurulmuş, daha yüksek katmanlar (conv4_x ve conv5_x) ise UI'ye özgü bileşen tespiti için ince ayarlanmıştır. Bu özellik haritaları görsel yapıları, kenarları, dokuları ve bileşen sınırlarını yakalar. Tespit sırasında, bölge öneri ağı (RPN), UI bileşenleri içerme olasılığı yüksek olan aday bölgeleri (ankorlar) tanımlar. Farklı boyutlardaki UI öğelerine uyum sağlamak için ankorlar, birden fazla ölçek (128, 256 ve 512) ve en-boy oranı (1:1, 1:2 ve 2:1) kullanılarak tanımlanır. Eğitim sırasında, gerçek yerleşim kutuları (ground truth boxes) ile birlik üzerinden kesişim (IoU) değeri 0,7'den büyük olan ankorlar pozitif, IoU değeri 0,3'ten küçük olanlar ise negatif olarak etiketlenir; ara IoU değerlerine sahip ankorlar görmezden gelinir. Her ankor, bir bileşenin varlığını belirten bir olasılık değerine atanır. Ardından, gereksiz ve örtüşen önerileri kaldırmak için maksimum dışı baskılama (NMS) uygulanarak, karışık arayüzlerde bile anlamlı UI öğelerinin verimli bir şekilde yerelleştirilmesi sağlanır. Aday bölgeler oluşturulduktan sonra, her bir öneri önceden tanımlanmış bileşen kategorilerine sınıflandırılır ve sınırlayıcı kutu (bounding-box) koordinatları iyileştirilir. Bir ilgi alanı (ROI) Align işlemi, her öneri için sabit boyutlu özellik temsilleri çıkarır ve bunlar daha sonra sınıflandırma ve regresyon için tam bağlı katmanlar tarafından işlenir. Sınıflandırma dalı sınıf olasılıklarını üretirken, regresyon dalı kesin sınırlayıcı kutu koordinatlarını tahmin eder. Tüm Faster R-CNN modeli, RPN kaybını nihai tespit kaybıyla birleştiren ortak bir kayıp fonksiyonu optimize edilerek uçtan uca eğitilir. Bu, sistemin yalnızca UI bileşenlerini doğru bir şekilde tanımasını değil, aynı zamanda onları çeşitli arayüz yapıları genelinde kesin olarak yerelleştirmesini sağlar. RPN aşaması, ROI sınıflandırması, sınırlayıcı kutu iyileştirmesi ve nihai optimizasyon hedefi dahil olmak üzere Faster R-CNN bileşen tespitinin ayrıntılı bir açıklaması Ek Dosya 1'de sunulmuştur.

Algoritma S1, ayrıntılı bileşen tespiti ve yapısal çıkarma iş akışını sağlamaktadır (Ek Dosya 1). Bu algoritma, ham bir ekran görüntüsünden otomatik kullanıcı arayüzü (UI) bileşen tespitinin ve yapısal çıkarımın tüm sürecini tanımlar. Giriş görüntüsü önce ön işlemeden geçirilir ve derin görsel özellikleri çıkarmak için bir CNN omurgasından geçirilir. Bu özellikler, RPN tarafından aday sınırlayıcı kutular oluşturmak için kullanılır ve ardından sınıflandırma ve regresyon yoluyla rafine edilir. NMS, doğru yerleşimi sağlamak için gereksiz tespitleri kaldırır. Tespitin ardından bileşenler, gürültüye dayanıklı yoğunluk tabanlı mekansal kümeleme uygulamaları (DBSCAN) kullanılarak mekansal yakınlığa göre gruplandırılır. Bu kümeleme adımı, bileşenler arasındaki ebeveyn-çocuk ilişkilerini ve mantıksal gruplandırmaları yakalayan hiyerarşik bir UI ağacının oluşturulmasına olanak tanır. Bu hiyerarşik temsil, sonraki düzen analizi ve UI anlamlandırma işlemleri için temel oluşturur. Şekil 2, bir mobil UI ekranındaki Faster R-CNN bileşen tespit sürecini göstermektedir. Giriş arayüzü (sol), otomatik olarak sınırlayıcı kutular içine alınan düğmeler ve metin blokları gibi UI öğelerini içerir. Tespit edilen bu bölgeler daha sonra, etiketli bağlantılarla belirtildiği gibi bileşen kategorilerine (örneğin, Düğme ve Metin) göre sınıflandırılır. Faster R-CNN tespit modülü (sağ), sınırlayıcı kutu koordinatlarını rafine eder, anlamsal etiketler atar ve yapılandırılmış bileşen düzeyinde bilgi çıktısı verir. Bu adım, UI bileşenlerinin doğru ve anlamsal olarak anlamlı temsillerini sunarak düzen çıkarma, bilişsel optimizasyon ve UI prototip oluşturma dahil olmak üzere sonraki süreçler için kritik bir temel görevi görür.

Makine öğrenmesinde Faster R-CNN analizi için giriş öğeleri etiketlenmiş mobil uygulama kullanıcı arayüzü diyagramı.
Şekil 2Faster R-CNN kullanarak kullanıcı arayüzü öğelerinin bileşen tespiti. Şekil, bir giriş arayüzü ekran görüntüsünden UI bileşenlerinin tespit edilmesini göstermektedir. İlgi bölgeleri sınırlayıcı kutular kullanılarak belirlenmekte; butonlar ve metin alanları gibi elementler Faster R-CNN kullanılarak sınıflandırılmaktadır. Oklar, tespit edilen bileşenlerin karşılık gelen anlamsal etiketlerle eşleştirilmesini belirtmektedir. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Düzen deseni çıkarımı ve hiyerarşik modelleme

Faster R-CNN kullanılarak gerçekleştirilen bileşen tespitinin ardından, her bir Kullanıcı Arayüzü (UI) elementi bir sınırlayıcı kutu (bounding box) ile temsil edilir. Ancak, bu sınırlayıcı kutular tek başına elementlerin arayüz içinde yapısal olarak nasıl organize edildiğini; örneğin, hangi elementlerin üst başlıklara, navigasyon çubuklarına veya gruplandırılmış içerik bölgelerine ait olduğunu belirtmez. Bu sınırlamayı gidermek için, tespit edilen bileşenler, her bileşenin bir düğüm olarak ele alındığı ve fonksiyonel veya görsel olarak ilişkili bileşenlerin ortak üst düğümler altında gruplandırıldığı mantıksal bir UI ağacına dönüştürülür. Anlamlı yerleşim gruplarını tanımlamak için DBSCAN veya hiyerarşik kümeleme gibi kümeleme teknikleri uygulanır. Bu yöntemler, UI elementleri arasındaki ilişkileri tespit etmek amacıyla bileşenler arasındaki mekansal yakınlığı ve hizalama modellerini analiz eder. İnsan tasarım uygulamalarına benzer şekilde sistem; üst bilgiler (headers), alt bilgiler (footers), ızgaralar (grids) ve içerik blokları gibi yaygın yapısal modelleri tanımayı öğrenir. Gruplandırma işlemi tamamlandıktan sonra, kapsamlı bir yerleşim temsili oluşturmak için hizalama, ızgara organizasyonu ve okuma sırası dahil olmak üzere ek yapısal özellikler analiz edilir. Örneğin, eşit genişlikteki sütunlarda hizalanmış bileşenler kart tabanlı bir yerleşime işaret edebilirken, dikey olarak istiflenmiş elementler bir form veya akış tabanlı arayüze işaret edebilir. Kümeleme, mekansal akıl yürütme ve hizalama kurallarını entegre eden bu çerçeve, hem görsel gruplandırmayı hem de fonksiyonel ilişkileri yakalayan hiyerarşik bir UI ağacı oluşturur. Bu hiyerarşik temsil, sonraki yerleşim iyileştirmeleri ve çoklu ekran tutarlılığı modellemesi için temel oluşturarak sistemin yapılandırılmış, tutarlı ve kullanıcı merkezli arayüz tasarımları üretmesini sağlar.

Uzamsal mesafe ve hizalama benzerliği için ayrıntılı formülasyonlar Ek Dosya 1'de sunulmuştur.

Yerleşim gruplandırması için kümeleme (DBSCAN)

Yerleşim gruplarını belirlemek için DBSCAN uygulanır. DBSCAN iki parametre kullanır: (1) ε = komşu bileşenler arasındaki maksimum mesafe ve (2) = bir küme oluşturmak için gereken minimum bileşen sayısı. Bu analiz için DBSCAN parametreleri, normalize edilmiş kullanıcı arayüzü (UI) çözünürlüğüne (480 × 80 piksel) dayanarak ampirik olarak seçilmiştir. Komşuluk mesafesi parametresi, bitişik kullanıcı arayüzü bileşenleri arasındaki mekânsal yakınlığı yakalamak için ε = 50 piksel olarak ayarlanmıştır. Bir küme oluşturmak için gereken minimum nokta sayısı, önemsiz veya hatalı kullanıcı arayüzü bileşeni gruplarının oluşumunu önlemek amacıyla MinPts = 3 olarak belirlenmiştir.

Ayrıntılı mantıksal kullanıcı arayüzü ağacı oluşturma formülasyonu Ek Dosya 1'de sunulmuştur.

CAM02-UCS ile algısal renk modellemesi

Algısal renk modellemesi, oluşturulan kullanıcı arayüzünde (UI) kullanılan renklerin uyumlu, okunaklı ve bilişsel olarak verimli olmasını sağlar. Baskın renkler, kümeleme teknikleri kullanılarak UI görselleri gibi giriş kaynaklarından çıkarılır. Özellikle, temsili renk paletleri elde etmek için K-means++ başlangıçlandırması ile K-means kümelemesi 30 iterasyon boyunca uygulanır. Ancak, RGB renk uzayı insan görsel algısını doğru bir şekilde yansıtmaz; bu da sayısal olarak benzer renklerin algısal olarak farklı görünebileceği anlamına gelir. Bu sınırlamayı gidermek için çıkarılan tüm renkler, algısal olarak tekdüze olan CAM02-UCS'ye dönüştürülür. Bu uzayda, eşit mesafeler eşit algılanan renk farklarına karşılık gelir ve bu da onu renk uyumunu ve kontrastını modellemek için uygun hale getirir. CAM02-UCS'ye eşlendiğinde, algısal renk farkları Öklid uzaklığı kullanılarak hesaplanır; böylece sistemin renkler arasındaki kontrastı, uyumu ve varyasyonu nicelleştirmesi sağlanır. Okunabilirliği artırmak için birbirine çok benzer olan renkler birbirinden ayrılırken, görsel rahatsızlığı önlemek için aşırı kontrastlı renkler yumuşatılır. Oluşturulan palet ayrıca, ön plan ve arka plan öğeleri arasında yeterli kontrast sağlayarak WCAG AA ve AAA gibi erişilebilirlik standartlarına uyar. Ayrıca, renk uyumu, hedeflenen UI temasına bağlı olarak palet ilişkilerinin tamamlayıcı, benzer veya triadik şemalara kısıtlanmasıyla sağlanır. Bu, sonuçta ortaya çıkan renk paletinin yalnızca görsel olarak çekici değil, aynı zamanda fonksiyonel olarak erişilebilir ve bilişsel olarak optimize edilmiş olmasını sağlar. Paleti daha da geliştirmek için algısal benzerlik, kontrast, uyum ve marka tutarlılığı kısıtlamaları altında bir optimizasyon süreci uygulanır. Bir ana renk seçilir (örneğin marka kimliğinden) ve görsel hiyerarşiyi korumak için ikincil renkler ışıklandırma (luminans) ve renk doygunluğu (kroma) açısından ayarlanır. Kural tabanlı bir değerlendirme mekanizması, aday paletleri algısal uzaklıklar ve erişilebilirlik metriklerine göre değerlendirerek, estetik dengeyi korurken bilişsel yükü minimize eder. Sonuç olarak çerçeve, profesyonel düzeyde tutarlılık, okunabilirlik ve algısal istikrar sergileyen UI renk şemaları üretir.

CAM02-UCS tabanlı algısal renk modellemesi için detaylı matematiksel ifadeler Ek Dosya 1'de sunulmuştur.

Algoritma S2 (Ek Dosya 1), harmoni ve erişilebilirlik kısıtlamaları altında, CAM02-UCS tabanlı algısal renk çıkarımı ve optimizasyon iş akışını tanımlamaktadır. Başlangıçta, renk farklarının insan algısına karşılık gelmesini sağlamak için girdi görüntüsünden baskın renkler çıkarılır ve CAM02-UCS'ye dönüştürülür. Ardından, hem netliği hem de harmoniyi korumak için renkler arasındaki algısal mesafeler hesaplanır ve önceden tanımlanmış sınırlar dahilinde kısıtlanır. Sonrasında, WCAG yönergelerine göre parlaklık kontrast oranları değerlendirilerek erişilebilirlik sağlanır. Nihai palet; algısal boşluklandırmayı, kontrast gereksinimlerini ve renk harmoni kısıtlamalarını dengeleyen birleşik bir amaç fonksiyonunun optimize edilmesiyle elde edilir. Bu işlem, oluşturulan kullanıcı arayüzü (UI) renk şemalarının yalnızca görsel olarak çekici değil, aynı zamanda okunabilir, erişilebilir ve algısal olarak tutarlı olmasını sağlar.

Bilişsel tasarım optimizasyonu

Bilişsel tasarım optimizasyonu, otomatik olarak oluşturulan kullanıcı arayüzü (UI) prototiplerinin sadece görsel olarak tutarlı değil, aynı zamanda anlaşılması ve etkileşim kurulmasının kolay olmasını sağlar. Bu modül; UI bileşenlerinin düzenlenmesi, gruplandırılması ve boşluklandırılmasına rehberlik etmek için Gestalt ilkeleri, Fitts yasası ve Hick yasası gibi temel bilişsel tasarım ilkelerini entegre eder. Bilişsel tasarım optimizasyonuna ilişkin ayrıntılı matematiksel formülasyonlar Ek Dosya 1'de sunulmuştur.

Entegre bilişsel optimizasyon hedefi

Entegre bilişsel optimizasyon hedefinin matematiksel ifadesi Ek Dosya 1'de verilmiştir. Görsel gruplandırmanın, etkileşim verimliliğinin ve karar verme karmaşıklığının önemini temsil eden katsayılar sırasıyla alfa, beta ve gama ile gösterilmiştir. Bu çalışmada alfa, beta ve gama değerleri, doğrulama veri seti kullanılarak ampirik olarak belirlenmiştir. Mevcut deney için katsayılar şu şekilde ayarlanmıştır: α = 0.5, β = 0.3 ve γ = 0.2. Bu konfigürasyon; görsel gruplandırma, etkileşim verimliliği ve karar verme basitliği arasında etkili bir denge sağlar.

Çoklu ekran tutarlılığı ve kullanıcı arayüzü (UI) oluşturma

Çok ekranlı tutarlılık modellemesi, bir uygulama içerisindeki farklı ekranların tutarlı bir görsel kimliği, yapısal düzeni ve etkileşim modelini paylaşmasını sağlar. Kullanıcılar ekranlar arasında geçiş yaptıkça, öğelerin yerleşimi, tipografi, boşluklandırma ve görsel hiyerarşi konusunda beklentiler geliştirirler. Bu beklentileri karşılamak için sistem, RICO ve ENRICO veri kümelerinden türetilen şablonları kullanarak ekranlar arası modelleri analiz eder. Bu şablonlar; ana sayfa–detay düzenleri, liste–detay modelleri, çok adımlı formlar ve kontrol paneli akışları gibi yaygın kullanıcı arayüzü (UI) yapılarını yakalar. Sistem, bileşen yerleşimini ve gruplandırma davranışlarını karşılaştırarak, hangi öğelerin tutarlı kalması gerektiğini ve hangilerinin değişebileceğini belirleyen ekranlar arası yapısal bir profil oluşturur. Yapısal modeller tanımlandıktan sonra, çerçeve; tipografi ölçeklerinde, boşluk oranlarında, ızgara düzenlerinde ve navigasyon çıpalarında tutarlılığı zorunlu kılar. Örneğin, üst bilgi çubukları tutarlı bir yüksekliği korur, birincil düğmeler tek tip boyut ve hizalamaya sahip olur ve içerik blokları öngörülebilir bir görsel sıralamayı takip eder. Bu, her ekranı küresel yapısal kısıtlamalara göre değerlendiren bir düzenleme süreciyle gerçekleştirilir. Eğer bir ekran, tutarsız dolgular veya hizalanmamış başlıklar gibi nedenlerle öğrenilmiş şablonlardan saparsa, sistem tutarlılığı yeniden sağlamak için düzeni otomatik olarak ayarlar. Bu düzeltmeler, kesintisiz bir kullanıcı deneyimi (UX) sağlanmasına yardımcı olur ve ekranlar arası bilişsel geçiş maliyetlerini azaltır. Çerçeve, etkileşim akışındaki tutarlılığı korumak için ekranlar arasındaki navigasyon grafiğini daha ayrıntılı analiz eder. İleri/geri geçişler, sekmeli navigasyon ve çok adımlı iş akışları dahil olmak üzere yaygın navigasyon modelleri tanımlanır ve uygulanır. Her geçiş, kullanıcının zihinsel modeliyle uyumlu olduğundan emin olmak için doğrulanır; böylece kullanılabilirlik artırılır ve kafa karışıklığı azaltılır. Sonuç olarak, çok ekranlı tutarlılık modeli görsel gürültüyü minimize eder, aşinalığı artır ve birleşik bir etkileşim deneyimini destekler.

Çok ekran tutarlılığı ve kullanıcı arayüzü (UI) oluşturmaya yönelik ayrıntılı matematiksel formülasyonlar Ek Dosya 1'de sunulmuştur.

Son olarak, işleme motoru SVG tel kafesler, HTML/CSS prototipleri veya piksel tabanlı UI maketleri gibi formatlarda görsel çıktılar üretir. Ortaya çıkan UI ekranları; doğru okuma sırasını, uyumlu renk ilişkilerini, hassas ızgara hizalamasını ve birden fazla ekran boyunca tutarlı bir görsel hiyerarşiyi sergiler.

Algoritma S3, bilişsel-görsel düzen optimizasyonu ve çoklu ekran tutarlılığı iş akışını sağlamaktadır (Ek Dosya 1). Algoritma S3, kullanıcı dostu kullanıcı arayüzü (UI) düzenleri oluşturmak için kullanılan entegre bilişsel ve yapısal optimizasyon sürecini tanımlar. Bu süreç; algısal gruplandırmayı (Gestalt ilkeleri), etkileşim verimliliğini (Fitts yasası) ve karar basitliğini (Hick yasası) birleşik bir optimizasyon çerçevesinde birleştirir. Başlangıçta, algısal gruplandırmaları oluşturmak için bileşenler arasındaki mekansal ilişkiler değerlendirilir. Ardından, bileşen boyutu ve yerleşimi ayarlanarak etkileşim verimliliği optimize edilirken, kullanıcılara sunulan seçenek sayısı sınırlandırılarak karar karmaşıklığı kontrol altına alınır. Ayrıca algoritma, her ekranı öğrenilmiş düzen şablonlarıyla hizalayarak tipografi, boşluklandırma ve yapısal organizasyonda tekdüzeliği sağlayarak çoklu ekran tutarlılığını zorunlu kılar. Daha sonra çok amaçlı bir optimizasyon fonksiyonu; hizalamayı, boşluklandırmayı ve bilişsel maliyeti dengeleyerek düzeni geliştirir ve sonuç olarak hem görsel olarak tutarlı hem de bilişsel olarak verimli bir arayüz ortaya çıkarır. Genel olarak bu algoritma, oluşturulan çoklu ekran düzenlerinin yüksek düzeyde görsel tutarlılık, kullanılabilirlik ve algısal netlik korumasını sağlar.

Erişim kısıtlı. Bu içeriği görüntülemek için lütfen giriş yapın veya deneme sürümünü başlatın.

Sonuçlar

Önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesi, üç kaynaktan oluşan toplam 5.128 UI ekranından oluşan entegre bir veri kümesi kullanılarak değerlendirilmiştir: 4.0 RICO görüntüsü, 1.00 ENRICO ekranı ve Guo'nun UI Renk Veri Kümesi'nden alınan renklerle açıklanmış 128 UI örneği. Bu harmanlanmış veri kümesi; bileşen algılama doğruluğu, düzen yapısal netliği, çok ekran tutarlılığı ve algısal renk uyumunu değerlendirmek için dengeli bir kıyaslama sunmaktadır.

Deneysel sonuçlar, Fas...

Erişim kısıtlı. Bu içeriği görüntülemek için lütfen giriş yapın veya deneme sürümünü başlatın.

Tartışma

Bulgular; kullanılabilirlik, yapısal organizasyon ve algısal kalitede istatistiksel olarak anlamlı iyileşmeler (p < 0.05) olduğunu göstermekte ve bilişsel tasarım ilkelerinin otomatik kullanıcı arayüzü (UI) prototiplemesine dahil edilmesinin etkinliğini doğrulamaktadır. Temel olarak görsel algılamaya veya kural tabanlı sezgisellere dayanan geleneksel UI oluşturma sistemlerinin aksine, önerilen çerçeve; tüm UI yeniden yapılandırma süreci boyunca Gestalt gruplandırmasını, hiyerarşi modellemesini, boşluk kısıtlamalarını...

Erişim kısıtlı. Bu içeriği görüntülemek için lütfen giriş yapın veya deneme sürümünü başlatın.

Açıklamalar

Yazarların herhangi bir çıkar çatışması yoktur.

Teşekkürler

Yazarlar; bu araştırmanın tamamlanması sırasında Wuhan College of Foreign Languages & Foreign Affairs, Keimyung University ve Shanghai Institute of Commerce and Foreign Languages tarafından sağlanan akademik ve kurumsal desteği teşekkürle belirtirler.

Erişim kısıtlı. Bu içeriği görüntülemek için lütfen giriş yapın veya deneme sürümünü başlatın.

Malzemeler

Bu makalede kullanılan malzemelerin listesi
AdŞirketKatalog numarasıYorumlar
CPU (İşlemci)AMD Ryzen 9 7950X (16-core, 32-thread, 4.5–5.7 GHz)Advanced Micro Devices (AMD), USARyzen 9 7950X
CUDA ToolkitSürüm 11.8NVIDIA Corporation, USACUDA Toolkit 11.8
cuDNNSürüm 8.9NVIDIA Corporation, USAcuDNN v8.9
Faster R-CNNNesne Algılama Modeli (Region Proposal Network ile)Meta AI Research / Detectron2Detectron2 framework
MatplotlibSürüm 3.7Matplotlib Geliştirme Ekibiv3.7.0
NVIDIA RTX 4090 GPU24 GB GDDR6X Grafik KartıNVIDIA Corporation, Santa Clara, CA, USARTX 4090
NumPySürüm 1.24NumPy Geliştiricileriv1.24.0
OpenCVSürüm 4.8OpenCV Foundationv4.8.0
PyTorchSürüm 2.0PyTorch Foundation (Meta AI)v2.0.0
FPN ile ResNet-50Feature Pyramid Network ile Omurga CNNMicrosoft Research / Detectron2ResNet-50-FPN
Scikit-learnSürüm 1.3Scikit-learn Geliştiricileriv1.3.0
SciPySürüm 1.10SciPy Topluluğuv1.10.0
Sistem Belleği (RAM)64 GB DDR5Corsair / Kingston (veya eşdeğeri)DDR5 64GB Kit
Ubuntu İşletim SistemiSürüm 22.04 LTSCanonical Ltd., UKUbuntu 22.04 LTS

Kaynaklar

  1. Weingerl P. Automated image-based user interface color theme generation. Appl Sci. 2024;14:2850.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Gijsenij A, et al. Determining key colors from a design perspective using dE-means color clustering. Color Res Appl. 2023;48:69–87.
  7. Yuan LP, et al. InfoColorizer: Interactive recommendation of color palettes for infographics. IEEE Trans Vis Comput Graph. 2022;28:4252–4266.
  8. 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.
  9. 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.
  10. 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.
  11. Deng L, Zhang ZR, Zhou FY, Liu RY. Effects of app icon border form and interface background color saturation. Adv Multimed. 2022;2022:1166656.
  12. Weingerl P, Hladnik A, Javoršek D. Machine learning model for extracting image prominent colors. Color Res Appl. 2020;45:409–426.
  13. Huang K, et al. WovenProbe: Probing possibilities for on-skin systems. In: Proc ACM Des Interact Syst Conf; 2021; p. 1193–1207.
  14. 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.
  15. Kim J, Kim C, Nam KY. ThinkWrite: Design interventions for online petition deliberation. In: Proc CHI Conf Hum Factors Comput Syst Ext Abstr; 2022.
  16. 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.
  17. 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.
  18. 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.
  19. Jain V, et al. Sketch2code: Transformation of sketches to UI using deep neural network [preprint]. arXiv:1910.08930; 2019.
  20. Chai Y, et al. Dynamic prototype network for few-shot malware detection. IEEE Trans Knowl Data Eng. 2023;35:4754–4766.
  21. Qiu J, et al. AI security in 5G networks: Adversarial examples. IEEE Veh Technol Mag. 2020;15:95–100.
  22. Qiu J, et al. Automatic concept extraction from big data in smart city. IEEE Trans Comput Soc Syst. 2020;7:225–233.
  23. Xie M. UI2CODE: Computer vision-based reverse engineering of UI design [Internet]. GitHub; 2021. Available from: https://github.com
  24. 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.
  25. Hui M, et al. Unifying layout generation with decoupled diffusion model. In: Proc IEEE Conf Comput Vis Pattern Recognit; 2023; p. 18434–18443.
  26. Wang Y, et al. Dolfin: Diffusion layout transformers without autoencoder. In: Proc Eur Conf Comput Vis; 2024; p. 513–530.
  27. Sobolevsky A, et al. GuiLGet: GUI layout generation with transformer [preprint]. arXiv:2304.09012; 2023.
  28. Lu Y, et al. UI layout generation with LLMs guided by UI grammar [preprint]. arXiv:2310.15455; 2023.
  29. 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.
  30. Li G, et al. Learning to denoise mobile UI layouts. In: Proc CHI Conf Hum Factors Comput Syst; 2022; p. 1–15.
  31. Beltramelli T. pix2code: Generating code from a GUI screenshot. In: Proc ACM SIGCHI Symp Eng Interact Comput Syst; 2018.
  32. Zheng G, et al. LayoutDiffusion: Controllable diffusion model. In: Proc IEEE Conf Comput Vis Pattern Recognit; 2023; p. 18424–18433.

Erişim kısıtlı. Bu içeriği görüntülemek için lütfen giriş yapın veya deneme sürümünü başlatın.

Yeniden basım ve izinler

Etiketler

Otomatik Kullan c Aray z PrototiplemeBili sel Tasar m lkeleriFaster R CNNBile en Alg lamaAlg sal Renk ModellemeCAM02 UCSGestalt Grupland rmaKullan c Aray z Kullan labilirli i
Bize Ulaşın
Kütüphaneye Öner

Gizlilik

Kullanım Koşulları

Politikalar

Telif Hakkı © 2026 MyJoVE Corporation. Tüm hakları saklıdır.