Geautomatiseerd raamwerk voor het prototypen van gebruikersinterfaces dat cognitieve en visuele ontwerpprincipes integreert om de bruikbaarheid en lay-outhelderheid te verbeteren

Jun Shi; Di Chen

doi:10.3791/71071

Een abonnement op JoVE is vereist om deze inhoud te bekijken. Log in of start vandaag met uw gratis proefperiode.

Onderzoeksartikel

Geautomatiseerd raamwerk voor het prototypen van gebruikersinterfaces dat cognitieve en visuele ontwerpprincipes integreert om de bruikbaarheid en lay-outhelderheid te verbeteren

119 weergaven

⸱

DOI:

10.3791/71071

⸱

14 augustus 2026

Jun Shi¹ , Di Chen²

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

In dit artikel

Samenvatting

Deze studie presenteert een geautomatiseerd framework voor het prototypen van gebruikersinterfaces, waarin cognitieve ontwerpprincipes, perceptuele kleuremodellering en deep learning zijn geïntegreerd. Het systeem verbetert de toegankelijkheid, de duidelijkheid van de lay-out, de kleurharmonie en de consistentie over verschillende schermen, wat resulteert in coherente, gebruikersgerichte interfaceontwerpen.

Samenvatting

Effectief ontwerp van gebruikersinterfaces (UI) vereist een harmonieuze balans tussen visuele aantrekkingskracht, cognitieve bruikbaarheid en consistentie in de lay-out. Huidige benaderingen voor automatische UI-generatie richten zich echter primair op het visuele uiterlijk of componentdetectie en missen een uniform raamwerk dat cognitieve principes, kleurintelligentie en structurele redenering integreert. Bovendien kampen bestaande methoden met beperkte generalisatie van lay-outs, een gebrekkige interpreteerbaarheid, statische kleurselectie en inconsistent gedrag over verschillende schermen heen. In deze context stelt dit werk een geautomatiseerd UI-prototypingraamwerk voor dat componentdetectie op basis van het Faster region-based convolutional neural network (Faster R-CNN) en perceptuele kleurmodellering aangestuurd door de CIECAM02 uniforme kleurruimte (CAM02-UCS) integreert, verrijkt met cognitieve en visuele ontwerpprincipes. Faster R-CNN wordt gebruikt om UI-componenten te identificeren en hiërarchische structuren af te leiden uit grootschalige interface-datasets. Een verbeterde kleurgeneratiemodule analyseert merk- of referentieafbeeldingen om met behulp van CAM02-UCS perceptueel uniforme, harmonieuze en gebruiksvriendelijke kleurthema's te waarborgen. Deze outputs worden verder geoptimaliseerd via cognitieve ontwerpregels, waaronder Gestalt-groepering, de wetten van Fitts en Hick, op aandacht gebaseerde spatiëring en visuele hiërarchie-modellering, om automatisch verfijnde, taakgerichte UI-lay-outs te genereren. Experimenten uitgevoerd op de RICO-, ENRICO- en Guo's UI Color Datasets laten zien dat het voorgestelde systeem een nauwkeurigheid van 92,4% bij de componentdetectie behaalt, de duidelijkheid van de lay-out en de nauwkeurigheid van de leesvolgorde met 18,7% verbetert en kleurenpaletten produceert die door ontwerpers 24,5% harmonieuzer worden beoordeeld in vergelijking met referentiemethoden. Gebruikersbeoordelingen wijzen daarnaast op een afname van 31% in de waargenomen cognitieve belasting en een toename van 28% in ontwerpconsistentie over schermen heen. Deze bevindingen tonen aan dat de combinatie van deep learning-gebaseerd structureel begrip met perceptueel gefundeerde kleurmodellering en cognitieve ontwerpprincipes UI-prototypes oplevert die zeer efficiënt, esthetisch coherent en gebruiksvriendelijk zijn. Dit raamwerk vestigt een nieuwe, end-to-end benadering voor intelligente en mensgerichte geautomatiseerde UI-prototyping.

Inleiding

Grafische gebruikersinterfaces (GUI's) dienen als een fundamenteel communicatiemiddel tussen mensen en computersystemen en beïnvloeden de bruikbaarheid, toegankelijkheid en de algehele gebruikerservaring (UX) aanzienlijk¹^,². Moderne softwaresystemen vertrouwen op intuïtieve en visueel aantrekkelijke interfaces om gebruikers aan te trekken en te behouden. Traditioneel omvat UI-ontwerp het creëren van grafische lay-outs die later door engineers worden vertaald naar front-endcode. Verschillen in platformspecifieke protocollen tussen besturingssystemen vereisen echter herhaaldelijke aanpassingen, wat de ontwikkeli....