Фреймворк автоматизированного прототипирования пользовательского интерфейса, интегрирующий принципы когнитивного и визуального дизайна для повышения юзабилити и четкости макета

Краткое содержание

В данном исследовании представлена платформа для автоматизированного прототипирования пользовательских интерфейсов, объединяющая принципы когнитивного дизайна, перцептивное моделирование цвета и глубокое обучение. Система улучшает доступность, четкость макета, гармонию цветов и согласованность между различными экранами, что позволяет создавать целостные, ориентированные на пользователя интерфейсы.

Аннотация

Эффективный дизайн пользовательского интерфейса (UI) требует гармоничного баланса между визуальной привлекательностью, когнитивным удобством и согласованностью макета. Однако современные подходы к автоматической генерации UI сосредоточены преимущественно на визуальном облике или детектировании компонентов и лишены единой структуры, которая объединяла бы когнитивные принципы, интеллектуальный подбор цвета и структурный анализ. Кроме того, существующие методы характеризуются ограниченной обобщающей способностью макета, низкой интерпретируемостью, статичным выбором цвета и несогласованностью поведения элементов на разных экранах. В связи с этим в данной работе предлагается платформа для автоматического прототипирования UI, которая объединяет детектирование компонентов на основе быстрой региональной сверточной нейронной сети (Faster R-CNN) и перцептивное моделирование цвета на базе однородного цветового пространства CIECAM02 (CAM02-UCS), дополненное когнитивными принципами и правилами визуального дизайна. Faster R-CNN используется для идентификации компонентов UI и вывода иерархических структур на основе масштабных наборов данных интерфейсов. Улучшенный модуль генерации цвета анализирует брендовые или эталонные изображения для создания перцептивно однородных, гармоничных и соответствующих требованиям юзабилити цветовых тем с использованием CAM02-UCS. Эти результаты дополнительно оптимизируются с помощью правил когнитивного дизайна, включая группировку по Гештальту, законы Фиттса и Хика, интервалы на основе внимания и моделирование визуальной иерархии, что позволяет автоматически генерировать доработанные, ориентированные на задачу макеты UI. Эксперименты, проведенные на наборах данных RICO, ENRICO и Guo’s UI Color, показывают, что предлагаемая система достигает точности детектирования компонентов 92,4%, повышает четкость макета и точность порядка чтения на 18,7%, а создаваемые цветовые палитры оцениваются дизайнерами как на 24,5% более гармоничные по сравнению с базовыми методами. Оценки пользователей также указывают на снижение воспринимаемой когнитивной нагрузки на 31% и увеличение согласованности дизайна между экранами на 28%. Эти результаты демонстрируют, что сочетание структурного анализа на базе глубокого обучения с перцептивным моделированием цвета и когнитивными принципами дизайна позволяет создавать прототипы UI, которые являются высокоэффективными, эстетически целостными и удобными для пользователя. Данная платформа представляет собой новый сквозной подход к интеллектуальному и человекоцентричному автоматизированному прототипированию UI.

Введение

Графические пользовательские интерфейсы (ГПИ) служат основным средством взаимодействия между человеком и компьютерными системами, оказывая значительное влияние на удобство использования, доступность и общий пользовательский опыт (UX)^1,2. Современные программные системы опираются на интуитивно понятные и визуально привлекательные интерфейсы для привлечения и удержания пользователей. Традиционно проектирование пользовательского интерфейса включает создание графических макетов, которые затем переводятся инженерами в программный код фронтенда. Однако различия в протоколах конкретных платформ в разных операционных системах требуют повторной адаптации, что увеличивает сложность и трудозатраты при разработке. В связи с этим автоматическая генерация кода пользовательского интерфейса стала важным направлением исследований, позволяющим снизить объем ручного труда и повысить эффективность разработки.

Ранние подходы к автоматической генерации пользовательского интерфейса (UI) сочетали традиционные методы обработки изображений с моделями глубокого обучения для детектирования и классификации областей^3,4. В настоящее время доминирующие стратегии генерации кода GUI используют методы компьютерного зрения для анализа изображений UI и их преобразования в структурированные фронтенд-представления^5,6,7. В то время как методы обработки изображений опираются на признаки, созданные вручную, подходы на основе глубокого обучения извлекают иерархические представления из крупномасштабных наборов данных. В результате исследователи изучили гибридные подходы, сочетающие глубокое обучение со специфическими для данной области методами обработки изображений для повышения устойчивости и точности.

Цвет является еще одним критическим фактором в дизайне пользовательского интерфейса (UI), влияющим на восприятие пользователя, юзабилити и эстетическую привлекательность¹. Обеспечение согласованности между содержимым изображения и цветовыми схемами UI становится сложной задачей, когда визуальные данные различаются по оттенку и контексту^8,9,10. Вследствие этого значительная часть исследований была сосредоточена на автоматической генерации цветовых палитр и перцептивном моделировании цвета. Существующие методы генерации цвета включают техники, основанные на цветовом пространстве CIELAB¹¹. Другие подходы используют алгоритмы кластеризации, такие как k-средних, для извлечения доминирующих цветов из изображений¹². В результате в последних работах все чаще применяются подходы к моделированию цвета на основе данных и машинного обучения.

Параллельно с этим подходы глубокого обучения значительно улучшили детектирование компонентов пользовательского интерфейса (UI) и понимание макета. Нейронные сети позволили более точно проводить структурный анализ мобильных интерфейсов¹³. Однако эти методы сосредоточены преимущественно на точности детектирования и зачастую игнорируют такие аспекты высокого уровня, как когнитивная юзабилити, иерархия макета и эффективность взаимодействия. Также были предложены генеративные модели для синтеза макетов UI^14,15, но они сталкиваются с трудностями в поддержании согласованности между разными экранами и обеспечении интерпретируемости проектных решений¹⁶. Другие подходы ориентированы на визуальное сходство или качество рендеринга, но в них отсутствует единая структура, объединяющая семантику компонентов, гармонию цветов и ограничения юзабилити¹⁷. Для понимания контента UI также важно распознавание текста. Такие методы, как сверточные рекуррентные нейронные сети (CRNN), позволяют точно распознавать сложные текстовые паттерны на экранах интерфейса^18,19,20.

Для генерации кода пользовательского интерфейса (UI) из набросков или изображений было предложено несколько систем. Sketch2Code использует детектирование объектов для преобразования набросков в представления кода^21,22, однако этот метод чувствителен к качеству изображения. REDRAW предоставляет автоматизированный конвейер для сбора данных и обучения моделей, объединяя сверточные и рекуррентные нейронные сети для генерации структурированных представлений UI^23,24. В последующих работах были представлены улучшенные метрики оценки для анализа качества сгенерированных UI²⁵. Более современные подходы включают модели на основе диффузии и трансформеров для генерации макетов, такие как диффузионные трансформеры макетов без использования методов автоэнкодеров, генерация макетов GUI с использованием графов расположения GUI на базе трансформеров, а также генерация макетов UI под руководством больших языковых моделей^26,27,28. Сравнительный обзор этих подходов представлен в Таблице 1.

Список литературы и основные метод(ы)	Цель	Преимущества	Недостатки
Автоматизированная генерация цветовых тем пользовательского интерфейса на основе изображений: извлечение доминирующих цветов + перцептивное моделирование цвета CAM02-UCS¹	Автоматическая генерация цветовых тем пользовательского интерфейса на основе эталонных изображений с оптимизацией гармонии и юзабилити.	Сильное перцептивное обоснование (CAM02-UCS); явный баланс между гармоничностью и удобством использования (контраст и разнообразие); включает веб-реализацию и оценку дизайнерами.	Ориентирован исключительно на цвет/тему (а не на макет или структуру компонентов); основан на правилах/эвристиках, а не на сквозном обучении синтезу пользовательского интерфейса.
Объединение генерации макета с помощью разделенной диффузионной модели (LDGM)²⁵	Единая гибкая генерация макетов для графических сцен и пользовательских интерфейсов.	Современный уровень разнообразия и управляемости при генерации макетов; поддержка условной генерации и множества типов атрибутов.	Результаты работы диффузионных моделей могут иметь проблемы с выравниванием или детализацией макета, если не использовать соответствующие ограничения; также характеризуются более высокой сложностью модели и затратами на логический вывод.
Трансформеры диффузионной компоновки без методов автокодировщика: трансформер + диффузия для генерации компоновки (без автокодировщика)²⁶	Повышение точности и согласованности для бенчмарков генерации макетов (метрики FID, согласованности и перекрытия).	Более точный захват семантических корреляций между соседними объектами; высокие показатели по метрикам FID и выравнивания.	Основное внимание уделяется геометрии макета (положениям, размерам, категориям), а не семантике пользовательского интерфейса.
Генерация макета GUI с помощью моделей на базе трансформеров на основе графов расположения GUI (GUI-AGs)²⁷	Создание макетов графического интерфейса пользователя (GUI) на основе позиционных и графовых ограничений для помощи дизайнерам.	Графовые представления фиксируют реляционные ограничения; трансформер обеспечивает гибкую генерацию с учетом этих ограничений.	Может потребоваться предоставление явных графов ограничений от проектировщиков; ограниченное внимание уделяется показателям цвета и удобства использования.
Генерация макетов пользовательского интерфейса с помощью LLM на основе грамматики интерфейса: большие языковые модели (LLM) + иерархическая грамматика пользовательского интерфейса²⁸	Исследуйте использование больших языковых моделей (LLM) для генерации макетов и улучшите объяснимость и управляемость с помощью грамматических представлений.	Высокий уровень управляемости и интерпретируемости; возможность использования контекстного обучения (in-context learning) больших языковых моделей (типа GPT).	Работа на ранней стадии с ограниченным эмпирическим подтверждением; разработка грамматики и устойчивость в различных пользовательских интерфейсах

Таблица 1: Сравнение существующих методов моделирования цвета и генерации макета пользовательского интерфейса. В таблице обобщены репрезентативные подходы к проектированию пользовательских интерфейсов, включая генерацию цветовых тем, генерацию макета на основе диффузионных моделей, методы на базе трансформеров и генерацию макета под управлением больших языковых моделей. Для каждого метода представлены используемая технология, цель, преимущества и ограничения, что позволяет выделить различия в перцептивном моделировании, возможностях генерации макета, управляемости и аспектах удобства использования.

Несмотря на эти достижения, основным ограничением остается то, что ни одна из существующих систем не объединяет в рамках единого сквозного механизма детектирование компонентов, перцептивное моделирование цвета, принципы когнитивного дизайна и согласованность макета для нескольких экранов¹. Современные подходы обычно оптимизируют только один или два аспекта — например, детектирование, макет или цвет — без учета их взаимозависимости. Такая фрагментация указывает на критический пробел в исследованиях по разработке унифицированных человекоцентричных систем автоматического прототипирования пользовательских интерфейсов. В частности, принципы когнитивного дизайна, такие как законы Гештальта, закон Фиттса и закон Хика, часто рассматриваются концептуально, а не интегрируются формально в вычислительные модели.

Чтобы преодолеть эти ограничения, в данном исследовании предлагается сквозная автоматизированная среда прототипирования пользовательских интерфейсов (UI), которая объединяет детектирование компонентов, перцептивное моделирование цвета и когнитивные принципы дизайна в единую систему. Данная среда разработана для повышения качества макета, снижения когнитивной нагрузки, улучшения цветовой гармонии и повышения общей юзабильности. Эти улучшения подтверждены экспериментами на наборах данных RICO, ENRICO и Guo’s UI Color, что демонстрирует эффективность объединения структурных, перцептивных и когнитивных аспектов в рамках одного автоматизированного конвейера прототипирования UI. Выдвигается гипотеза, что интеграция детектирования компонентов на основе глубокого обучения, перцептивного моделирования цвета и когнитивных принципов дизайна в единую среду значительно повысит качество прототипов UI по сравнению с существующими подходами. В частности, гипотеза H1 предполагает, что среда улучшает качество макета, включая выравнивание, группировку и порядок чтения. H2 постулирует, что среда снижает когнитивную нагрузку на пользователя. H3 предполагает, что перцептивное моделирование цвета улучшает согласование цветов и визуальную гармонию. H4 утверждает, что общая юзабильность и эстетическое качество прототипов UI повышаются.

Протокол

В данном исследовании используются общедоступные наборы данных; участие людей или животных не предполагалось.

Предлагаемый фреймворк для автоматизированного прототипирования пользовательских интерфейсов (UI) объединяет структурный анализ на основе глубокого обучения, перцептивно однородное моделирование цвета и когнитивные принципы проектирования для создания согласованных и ориентированных на пользователя прототипов интерфейса. Методология начинается с архитектуры Faster R-CNN, обученной на наборах данных RICO и ENRICO, для обнаружения компонентов UI и извлечения их иерархических связей, что позволяет точно интерпретировать различные макеты экранов. Обнаруженные компоненты затем обрабатываются модулем интеллектуального анализа цвета, который извлекает цветовые подсказки на основе бренда или изображений, моделирует перцептивное сходство с использованием CAM02-UCS и генерирует гармоничные, контрастные и соответствующие стандартам доступности цветовые палитры. Впоследствии через механизм когнитивной оптимизации применяются принципы когнитивного дизайна — включая законы группировки Гештальта, закон Фиттса, закон Хика, интервалы на основе внимания и ограничения визуальной иерархии — для уточнения пространственной организации и выравнивания компонентов. Наконец, слой логического вывода макета интегрирует структурные, перцептивные и когнитивные ограничения для генерации согласованных многоэкранных прототипов UI, в которых сбалансированы юзабилити, эстетика и функциональная ясность. Этот интегрированный конвейер обеспечивает перцептивную согласованность, снижает когнитивную нагрузку и придерживается принципов человекоцентричного проектирования. Полный рабочий процесс предлагаемого метода проиллюстрирован на рисунке 1.

Рисунок 1. Общая архитектура предлагаемого фреймворка для автоматизированного прототипирования пользовательского интерфейса. На диаграмме представлен полный конвейер обработки, начинающийся с входного изображения пользовательского интерфейса (UI). Детектирование компонентов выполняется с помощью Faster R-CNN для идентификации элементов интерфейса. Затем обнаруженные компоненты обрабатываются с использованием перцептивного моделирования на основе CAM02-UCS для извлечения иерархии и макета. Впоследствии применяется когнитивная оптимизация с использованием принципов Гештальта, закона Фиттса, закона Хика и корректировок на основе внимания. Стрелки указывают поток данных между модулями, результатом чего является итоговый прототип пользовательского интерфейса. Пожалуйста, нажмите здесь, чтобы просмотреть увеличенную версию этого рисунка.

Обзор структуры

Рисунок 1 иллюстрирует полный рабочий процесс предлагаемой системы автоматизированного прототипирования пользовательских интерфейсов (UI), которая преобразует исходный скриншот интерфейса в когнитивно оптимизированный прототип. Процесс начинается с входного изображения UI, которое передается в модуль детектирования компонентов на базе Faster R-CNN. Этот модуль идентифицирует элементы интерфейса, такие как кнопки, иконки, текстовые поля и контейнеры, и выдает соответствующие им ограничивающие рамки (bounding boxes) и метки классов. Затем обнаруженные компоненты обрабатываются на этапе извлечения иерархии и макета. На основе пространственных отношений и структурных паттернов система выстраивает иерархическое дерево макета, которое отражает то, как пользователи естественным образом воспринимают организацию экрана. Такое представление фиксирует визуальную группировку и структурные зависимости между элементами UI. Извлеченный макет впоследствии дорабатывается путем когнитивной оптимизации с применением принципов человекоцентричного дизайна. К ним относятся группировка по Гештальту для визуального кластерирования, закон Фиттса для оптимизации размера и доступности зон касания, закон Хика для снижения сложности принятия решений и интервалы, основанные на внимании, для улучшения визуальной иерархии. В результате макет становится более интуитивно понятным, читабельным и эффективным для взаимодействия с пользователем. Наконец, оптимизированный макет объединяется с перцептивным моделированием цвета для генерации согласованного прототипа UI. Полученный интерфейс является структурно точным, визуально гармоничным и соответствующим ожиданиям пользователей с точки зрения юзабилити.

Архитектура была реализована с использованием PyTorch 2.0 в ОС Ubuntu 22.04. Эксперименты проводились на системе, оснащенной графическим процессором NVIDIA RTX 4090 (24 GB VRAM). В модели Faster R-CNN в качестве основной сети (backbone) использовалась ResNet-50, предварительно обученная на наборе данных ImageNet. Обучение выполнялось с помощью оптимизатора стохастического градиентного спуска (SGD) при скорости обучения 0.001, размере пакета 16 и до 60 эпох. Для предотвращения переобучения применялась процедура ранней остановки на основе валидационного набора, составляющего 20% данных. Несмотря на то, что обучение было рассчитано до 60 эпох, сходимость обычно достигалась раньше благодаря ранней остановке по значению потерь на валидационном наборе. Моментум и коэффициент затухания весов (weight decay) были установлены на уровне 0.9 и 0.0005 соответственно. Аугментация данных включала нормализацию, случайное горизонтальное отражение, а также случайную обрезку и изменение размера изображений.

Подготовка набора данных

Для поддержки предлагаемого фреймворка автоматического прототипирования пользовательского интерфейса (UI) были использованы три дополняющих друг друга набора данных: ENRICO²⁹, RICO³⁰ и набор данных цветов UI от Guo¹. Набор данных RICO содержит 66 261 экран UI Android, собранных из 9 700 приложений, что обеспечивает масштабное разнообразие для детектирования компонентов и извлечения иерархической разметки. ENRICO включает 1 464 высококачественных скриншота UI, вручную распределенных по 20 шаблонам проектирования, что позволяет улучшить обобщение для структурного анализа и моделирования согласованности макета. Набор данных цветов UI от Guo состоит из 128 отобранных изображений UI с аннотированными цветовыми темами, которые используются для перцептивного моделирования цвета и оценки палитр. Однако из-за относительно небольшого размера этот набор данных может привносить некоторую вариативность в характеристики макета. Для данного исследования был подготовлен комбинированный набор из 5 128 экранов для обучения и оценки. В частности, примерно 4 000 изображений из RICO были использованы для обучения модели Faster R-CNN для детектирования компонентов, 1 000 изображений из ENRICO — для изучения шаблонов разметки и моделирования структурной согласованности, а 128 изображений из набора данных Guo — для задач оценки цвета. Все изображения были нормализованы до разрешения 480 × 800 пикселей, переведены в единое цветовое пространство sRGB и повторно аннотированы стандартизированными ограничивающими рамками (bounding boxes) и иерархическими метаданными для обеспечения совместимости между наборами данных. Обзор наборов данных, использованных в данном исследовании, представлен в Таблице 2. Набор данных RICO поддерживает крупномасштабное детектирование компонентов UI и структурный анализ, в то время как ENRICO расширяет возможности модели по распознаванию шаблонов разметки и обеспечению согласованности между экранами. Набор данных цветов UI от Guo, несмотря на меньший размер, играет критическую роль в оценке перцептивной цветовой гармонии и моделировании контрастности. В совокупности эти наборы данных обеспечивают комплексную и сбалансированную основу для обучения, валидации и оценки предлагаемого фреймворка автоматического прототипирования UI.

Набор данных	Всего доступных изображений	Изображения, использованные в исследовании	Назначение в предлагаемой структуре
Набор данных RICO30	66,261	4,000	детектирование компонентов пользовательского интерфейса, извлечение структурного макета
Набор данных ENRICO29	1,464	1,000	Изучение паттернов проектирования, моделирование согласованности макета
Набор данных цветов пользовательского интерфейса Го (Guo’s UI Color Dataset)1	128	128	Извлечение цветовой темы, перцептивная оценка цвета
Общий итог	67,853	5,128	Комплексный набор данных для детектирования, анализа макета и цветового моделирования

Таблица 2: Обзор наборов данных, использованных в предлагаемой структуре.В таблице представлены наборы данных, использованные для обучения и оценки, включая RICO, ENRICO и наборы данных UI Color от Guo. В ней указано общее количество доступных изображений, подмножество, использованное в данном исследовании, а также конкретная роль каждого набора данных в обнаружении компонентов, моделировании макета и перцептивном анализе цвета в рамках предлагаемой структуры.

Для сохранения разнообразия компонентов пользовательского интерфейса, структур макета и распределения цветов в наборах данных RICO, ENRICO и Guo была применена стратегия стратифицированной выборки. Набор данных был разделен на обучающую (70%), валидационную (15%) и тестовую (15%) подвыборки с использованием стратифицированного сэмплирования. Изображения были нормализованы с использованием среднего значения (0.485, 0.456 и 0.406) и стандартного отклонения (0.229, 0.224 и 0.225). Аугментация данных включала случайное горизонтальное отражение (вероятность = 0.5) и случайную обрезку (диапазон масштаба: 0.8–1.0) с последующим изменением размера до 224 × 224 пикселей, которые применялись в процессе обучения.

Аннотация и предварительная обработка компонентов

Наборы данных RICO, ENRICO и UI Color Dataset от Guo в совокупности обеспечивают работу трех основных функциональных компонентов предлагаемой структуры автоматизированного прототипирования пользовательских интерфейсов (UI): обнаружение компонентов, моделирование макета и перцептивная оптимизация цвета. Набор данных RICO представляет собой крупномасштабную коллекцию из более чем 66 000 экранов мобильных интерфейсов и в первую очередь используется для обучения модуля обнаружения компонентов. Его разнообразие позволяет модели Faster R-CNN изучать устойчивые представления общих элементов UI, таких как кнопки, изображения и текстовые поля, в широком спектре приложений. Это обеспечивает точное обнаружение и локализацию компонентов UI при различных условиях проектирования. Набор данных ENRICO предоставляет высококачественные экраны UI с размеченными паттернами для изучения структурных взаимосвязей и шаблонов макета. Он позволяет системе понимать взаимосвязи между компонентами, иерархическую организацию и распространенные шаблоны дизайна. Этот набор данных играет критическую роль в моделировании структур макета и обеспечении согласованности между несколькими экранами, что позволяет структуре генерировать макеты, соответствующие установленным конвенциям дизайна. В отличие от них, UI Color Dataset от Guo используется специально для перцептивного и когнитивного моделирования цвета. В отличие от RICO и ENRICO, которые фокусируются на структурных аспектах, этот набор данных содержит курируемые изображения UI с аннотированными цветовыми темами. Эти аннотации используются для обучения модулей извлечения цвета и оценки гармонии. Путем отображения цветовых отношений в перцептивные цветовые пространства, такие как CAM02-UCS, структура учится генерировать цветовые палитры, которые балансируют контрастность, доступность и эстетическую целостность. Вместе эти наборы данных образуют интегрированный конвейер: RICO поддерживает обнаружение компонентов, ENRICO обеспечивает понимание паттернов макета и структурную согласованность, а набор данных Guo способствует перцептивной оптимизации цвета. Такая интеграция гарантирует, что генерируемые прототипы UI будут структурно точными, визуально гармоничными и когнитивно оптимизированными.

Нормализация проводилась с использованием среднего значения [0.485, 0.456, 0.406] и стандартного отклонения [0.229, 0.224, 0.225]. Для улучшения обобщающей способности модели применялись методы аугментации данных, включая случайную обрезку, горизонтальное отражение и поворот. Кроме того, значения пикселей были масштабированы до диапазона [0, 1], а все изображения приведены к разрешению 480 × 800 пикселей для обеспечения согласованности наборов данных. Для аугментации в процессе обучения используются изображения, масштабированные до 224 × 224 пикселей, в то время как исходное разрешение 480 × 800 пикселей сохраняется для анализа макета. Ограничивающие рамки были скорректированы с использованием предопределенных пороговых значений для фильтрации нерелевантных аннотаций. Для достижения единообразия во всех наборах данных все элементы пользовательского интерфейса (UI) были размечены вручную с помощью инструмента аннотирования LabelImg. Перед началом разметки была разработана предварительная схема для классификации элементов UI по таким категориям, как кнопка, текст, изображение, иконка и контейнер. Для представления ограничивающих рамок применялась единая система координат, а иерархическая информация выстраивалась на основе пространственных отношений между элементами и их связей «родитель — потомок» в дереве макета. Кроме того, были установлены правила для обеспечения согласованности разметки элементов, правильной обработки перекрывающихся компонентов и соблюдения минимальных порогов размера в наборах данных RICO, ENRICO и Guo.

Подробные математические формулировки для обучения детектированию компонентов и извлечения паттернов компоновки представлены в Дополнительном файле 1.

Модель Faster R-CNN была обучена с использованием метода SGD с моментом 0.9 и весовым коэффициентом затухания 0.0005. Начальная скорость обучения была установлена на уровне 0.001 и корректировалась с помощью политики ступенчатого снижения (step decay) на основе показателей валидации. Обучение проводилось в течение до 60 эпох с размером пакета (batch size) 16. Для предотвращения переобучения применялась стратегия ранней остановки с использованием валидационного набора, составлявшего 20% обучающих данных.

Функция отображения f(.) принимает на вход обнаруженные элементы пользовательского интерфейса (UI) и формирует в качестве результата иерархическое представление макета. Она вычисляет отношения смежности между элементами UI на основе критериев пространственного расстояния и выравнивания, а затем строит матрицу смежности для представления этих отношений. Затем применяется алгоритм кластеризации, такой как DBSCAN, для группировки связанных компонентов. Наконец, кластеризованные элементы объединяются в иерархические структуры на основе отношений «родитель — потомок», формируя структурированное представление макета.

Подробные формулы для моделирования цветовой гармонии и единая целевая функция оптимизации представлены в Дополнительном файле 1.

Данная целевая функция математически формализует интеграцию структурного детектирования, анализа компоновки и перцептивного моделирования цвета, обеспечивая совместный вклад всех компонентов фреймворка в создание когерентных и ориентированных на пользователя прототипов пользовательского интерфейса. Оптимизация выполняется модульно для каждого компонента фреймворка. Для обучения модуля детектирования компонентов используется SGD, в то время как при совместной оптимизации единой целевой функции применяется оптимизатор Adam. Комбинированная цель используется для управления общей производительностью системы. На этапах совместной оптимизации минимизация целевой функции осуществляется с помощью оптимизатора Adam со скоростью обучения 0.001 и размером пакета 16. Обучение проводится до 60 эпох с применением ранней остановки, если изменение функции потерь на валидации составляет менее 10⁻⁴ на протяжении пяти последовательных эпох.

Детектирование компонентов с помощью Faster R-CNN

Предлагаемая архитектура использует Faster R-CNN для автоматического обнаружения компонентов пользовательского интерфейса (UI), включая кнопки, иконки, текстовые поля, изображения и контейнеры. Faster R-CNN хорошо подходит для этой задачи, поскольку сочетает высокую точность обнаружения объектов с эффективной генерацией предложений регионов, что крайне важно при работе со сложными макетами UI, содержащими плотно расположенные элементы. Модель использует основу ResNet-50, предварительно обученную на наборе данных ImageNet, для извлечения сверточных карт признаков с каждого экрана UI. В процессе обучения начальные слои были заморожены для сохранения общих визуальных признаков, в то время как более высокие слои (conv4_x и conv5_x) были подвергнуты тонкой настройке для обнаружения специфических компонентов UI. Эти карты признаков фиксируют визуальные структуры, границы, текстуры и контуры компонентов. При обнаружении сеть предложений регионов (RPN) определяет области-кандидаты (якоря), которые с большой вероятностью содержат компоненты UI. Якоря определяются с использованием нескольких масштабов (128, 256 и 512) и соотношений сторон (1:1, 1:2 и 2:1), чтобы охватить элементы UI различных размеров. Во время обучения якоря с показателем пересечения над объединением (IoU) более 0,7 по отношению к истинным ограничивающим рамкам помечаются как положительные, а с IoU менее 0,3 — как отрицательные; якоря с промежуточными значениями IoU игнорируются. Каждому якорю присваивается вероятность, указывающая на наличие компонента. Затем применяется подавление не-максимумов (NMS) для удаления избыточных и перекрывающихся предложений, что обеспечивает эффективную локализацию значимых элементов UI даже в перегруженных интерфейсах. После генерации областей-кандидатов каждое предложение классифицируется по предопределенным категориям компонентов, а координаты его ограничивающей рамки уточняются. Операция ROI Align (выравнивание области интереса) извлекает представления признаков фиксированного размера для каждого предложения, которые затем обрабатываются полносвязными слоями для классификации и регрессии. Ветвь классификации выводит вероятности классов, а ветвь регрессии предсказывает точные координаты ограничивающей рамки. Вся модель Faster R-CNN обучается сквозным методом путем оптимизации совместной функции потерь, которая объединяет потери RPN с итоговыми потерями обнаружения. Это позволяет системе не только точно распознавать компоненты UI, но и прецизионно локализовать их в различных структурах интерфейса. Подробное описание обнаружения компонентов с помощью Faster R-CNN, включая стадию RPN, классификацию ROI, уточнение ограничивающих рамок и конечную цель оптимизации, представлено в Дополнительном файле 1.

Алгоритм S1 содержит подробный рабочий процесс обнаружения компонентов и извлечения структуры (Дополнительный файл 1). В нем описывается полный процесс автоматического обнаружения компонентов пользовательского интерфейса (UI) и извлечения структуры из исходного изображения экрана. Сначала входное изображение проходит предварительную обработку и подается на базовую сеть CNN для извлечения глубоких визуальных признаков. Эти признаки используются RPN для генерации потенциальных ограничивающих рамок (bounding boxes), которые затем уточняются с помощью классификации и регрессии. Метод NMS удаляет избыточные результаты обнаружения для обеспечения точной локализации. После обнаружения компоненты группируются на основе пространственной близости с использованием метода плотностной пространственной кластеризации приложений с шумом (DBSCAN). Этот этап кластеризации позволяет построить иерархическое дерево UI, которое отражает отношения «родитель-потомок» и логическую группировку компонентов. Данное иерархическое представление служит основой для последующего анализа макета и понимания UI. На Рисунке 2 проиллюстрирован процесс обнаружения компонентов с помощью Faster R-CNN на экране мобильного UI. Входной интерфейс (слева) содержит элементы UI, такие как кнопки и текстовые блоки, которые автоматически заключаются в ограничивающие рамки. Затем эти обнаруженные области классифицируются по категориям компонентов (например, Button и Text), что показано с помощью помеченных связей. Модуль обнаружения Faster R-CNN (справа) уточняет координаты ограничивающих рамок, присваивает семантические метки и выводит структурированную информацию на уровне компонентов. Этот этап является критически важным фундаментом для последующих процессов, включая извлечение макета, когнитивную оптимизацию и генерацию прототипов UI, поскольку он обеспечивает точные и семантически значимые представления компонентов пользовательского интерфейса.

Рисунок 2. Обнаружение компонентов элементов пользовательского интерфейса с использованием Faster R-CNN. На рисунке показан процесс обнаружения компонентов пользовательского интерфейса на скриншоте входного интерфейса. Области интереса определяются с помощью ограничивающих рамок, а такие элементы, как кнопки и текстовые поля, классифицируются с помощью Faster R-CNN. Стрелки указывают на сопоставление обнаруженных компонентов с соответствующими семантическими метками. Пожалуйста, нажмите здесь, чтобы просмотреть увеличенную версию этого рисунка.

Извлечение паттернов компоновки и иерархическое моделирование

После обнаружения компонентов с помощью Faster R-CNN каждый элемент пользовательского интерфейса (UI) представляется в виде ограничивающей рамки (bounding box). Однако одни лишь ограничивающие рамки не передают структурную организацию элементов в интерфейсе — например, какие элементы относятся к заголовкам, навигационным панелям или сгруппированным областям контента. Чтобы устранить этот недостаток, обнаруженные компоненты преобразуются в логическое дерево UI, где каждый компонент рассматривается как узел, а функционально или визуально связанные компоненты группируются под общими родительскими узлами. Для определения значимых групп макета применяются методы кластеризации, такие как DBSCAN или иерархическая агломеративная кластеризация. Эти методы анализируют пространственную близость и закономерности выравнивания компонентов для выявления связей между элементами UI. По аналогии с практиками человеческого дизайна, система обучается распознавать общие структурные паттерны, такие как хедеры, футеры, сетки и контентные блоки. После установления группировки анализируются дополнительные структурные свойства, включая выравнивание, организацию сетки и порядок чтения, для построения комплексного представления макета. Например, компоненты, выровненные в колонках равной ширины, могут указывать на карточный макет, в то время как вертикально расположенные элементы могут свидетельствовать об интерфейсе на основе форм или ленты новостей. Интегрируя кластеризацию, пространственное рассуждение и правила выравнивания, фреймворк строит иерархическое дерево UI, которое отражает как визуальную группировку, так и функциональные связи. Это иерархическое представление служит основой для последующего уточнения макета и моделирования согласованности между различными экранами, что позволяет системе генерировать структурированные, связные и ориентированные на пользователя дизайны интерфейса.

Подробные формулы для пространственного расстояния и сходства выравнивания приведены в Дополнительном файле 1.

Кластеризация для группировки макета (DBSCAN)

Для идентификации групп макета применяется алгоритм DBSCAN. DBSCAN использует два параметра: (1) ε = максимальное расстояние между соседними компонентами и (2) = минимальное количество компонентов, необходимых для формирования кластера. Для данного анализа параметры DBSCAN были эмпирически выбраны на основе нормализованного разрешения пользовательского интерфейса (480 × 800 пикселей). Параметр расстояния окрестности был установлен на уровне ε = 50 пикселей для учета пространственной близости соседних компонентов интерфейса. Минимальное количество точек, необходимое для формирования кластера, было установлено как MinPts = 3, чтобы избежать образования незначительных или ложных групп компонентов интерфейса.

Подробная формулировка построения логического дерева пользовательского интерфейса приведена в Дополнительном файле 1.

Перцептивное цветовое моделирование с использованием CAM02-UCS

Перцептивное моделирование цвета обеспечивает гармоничность, разборчивость и когнитивную эффективность цветов, используемых в генерируемом пользовательском интерфейсе (UI). Доминирующие цвета извлекаются из входных источников, таких как изображения UI, с использованием методов кластеризации. В частности, для получения репрезентативных цветовых палитр применяется кластеризация K-means с инициализацией K-means++ в течение 300 итераций. Однако цветовое пространство RGB недостаточно точно отражает человеческое зрительное восприятие, что означает, что численно близкие цвета могут восприниматься как разные. Чтобы устранить этот недостаток, все извлеченные цвета преобразуются в CAM02-UCS, которое является перцептивно однородным. В этом пространстве равные расстояния соответствуют равным воспринимаемым различиям в цвете, что делает его подходящим для моделирования цветовой гармонии и контраста. После отображения в CAM02-UCS перцептивные цветовые различия вычисляются с помощью евклидова расстояния, что позволяет системе количественно оценивать контраст, гармонию и вариативность цветов. Слишком похожие цвета разделяются для улучшения разборчивости, в то время как избыточно контрастные цвета корректируются во избежание визуального дискомфорта. Созданная палитра также соответствует стандартам доступности, таким как WCAG AA и AAA, обеспечивая достаточный контраст между элементами переднего и заднего плана. Кроме того, цветовая гармония обеспечивается путем ограничения взаимосвязей в палитре комплементарными, аналогичными или триадическими схемами, в зависимости от заданной темы UI. Это гарантирует, что итоговая цветовая палитра будет не только визуально привлекательной, но и функционально доступной и когнитивно оптимизированной. Для дальнейшего уточнения палитры применяется процесс оптимизации с учетом ограничений по перцептивному сходству, контрасту, гармонии и соответствию бренду. Выбирается основной цвет (например, из фирменного стиля), а вторичные цвета корректируются по яркости и насыщенности для сохранения визуальной иерархии. Механизм оценки на основе правил анализирует потенциальные палитры на основе перцептивных расстояний и метрик доступности, сводя к минимуму когнитивную нагрузку при сохранении эстетического баланса. В результате фреймворк создает цветовые схемы UI, обладающие профессиональным уровнем согласованности, читаемости и перцептивного единства.

Подробные математические выражения для перцептивного моделирования цвета на основе CAM02-UCS приведены в Дополнительном файле 1.

Алгоритм S2 (Дополнительный файл 1) описывает рабочий процесс извлечения и оптимизации перцептивного цвета на основе CAM02-UCS с учетом ограничений гармонии и доступности. Сначала из входного изображения извлекаются доминирующие цвета, которые затем преобразуются в систему CAM02-UCS, чтобы различия в цвете соответствовали человеческому восприятию. Затем вычисляются перцептивные расстояния между цветами, которые ограничиваются заданными значениями для поддержания четкости и гармонии. После этого обеспечивается доступность путем оценки коэффициентов контрастности яркости в соответствии с рекомендациями WCAG. Итоговая палитра получается путем оптимизации комбинированной целевой функции, которая балансирует перцептивный интервал, требования к контрастности и ограничения цветовой гармонии. Это гарантирует, что созданные цветовые схемы пользовательского интерфейса будут не только визуально привлекательными, но также читаемыми, доступными и перцептивно согласованными.

Когнитивная оптимизация дизайна

Оптимизация когнитивного дизайна гарантирует, что автоматически созданные прототипы пользовательского интерфейса (UI) будут не только визуально согласованными, но и простыми для понимания и взаимодействия. В данном модуле интегрированы ключевые принципы когнитивного дизайна, включая принципы Гештальта, закон Фиттса и закон Хика, которые определяют правила расположения, группировки и интервалов между компонентами UI. Подробные математические формулировки для оптимизации когнитивного дизайна представлены в Дополнительном файле 1.

Интегральная цель когнитивной оптимизации

Математическое выражение для интегрированной цели когнитивной оптимизации представлено в Дополнительном файле 1. Коэффициенты, представляющие значимость визуальной группировки, эффективности взаимодействия и сложности принятия решений, обозначены как альфа, бета и гамма соответственно. В данном исследовании значения альфа, бета и гамма были определены эмпирически с использованием валидационного набора данных. Для настоящего эксперимента коэффициенты были установлены следующим образом: α = 0.5, β = 0.3 и γ = 0.2. Такая конфигурация обеспечивает эффективный баланс между визуальной группировкой, эффективностью взаимодействия и простотой принятия решений.

Согласованность нескольких экранов и генерация пользовательского интерфейса

Моделирование многоэкранной согласованности обеспечивает единство визуального стиля, структурной компоновки и паттернов взаимодействия для различных экранов в рамках одного приложения. Переходя с одного экрана на другой, пользователи формируют определенные ожидания относительно расположения элементов, типографики, интервалов и визуальной иерархии. Для соответствия этим ожиданиям система анализирует межэкранные паттерны с использованием шаблонов, полученных из наборов данных RICO и ENRICO. Эти шаблоны фиксируют распространенные структуры пользовательского интерфейса, такие как макеты «главная страница — детализация», паттерны «список — детализация», многошаговые формы и потоки панелей управления. Путем сравнения размещения компонентов и принципов их группировки система выстраивает межэкранный структурный профиль, который определяет, какие элементы должны оставаться неизменными, а какие могут варьироваться. После идентификации структурных паттернов фреймворк обеспечивает согласованность масштабов типографики, коэффициентов отступов, сеточных макетов и навигационных якорей. Например, панели заголовков сохраняют постоянную высоту, основные кнопки имеют единообразный размер и выравнивание, а блоки контента следуют предсказуемому визуальному порядку. Это достигается за счет процесса регуляризации макета, при котором каждый экран проверяется на соответствие глобальным структурным ограничениям. Если экран отклоняется от изученных шаблонов — например, из-за несоответствия внутренних отступов или смещения заголовков — система автоматически корректирует макет для восстановления целостности. Такие исправления помогают обеспечить бесшовный UX и снизить когнитивные затраты при переключении между экранами. Далее фреймворк анализирует навигационный граф между экранами для поддержания согласованности потока взаимодействия. Идентифицируются и внедряются общие навигационные паттерны, включая переходы «вперед/назад», вкладничную навигацию и многошаговые рабочие процессы. Каждый переход валидируется на соответствие ментальной модели пользователя, что повышает юзабилити и снижает вероятность возникновения путаницы. В результате модель многоэкранной согласованности минимизирует визуальный шум, повышает узнаваемость интерфейса и способствует созданию единого опыта взаимодействия.

Подробные математические формулировки для обеспечения согласованности между несколькими экранами и генерации пользовательского интерфейса представлены в Дополнительном файле 1.

Наконец, движок рендеринга генерирует визуальные результаты в таких форматах, как SVG-каркасы, HTML/CSS-прототипы или растровые макеты пользовательского интерфейса. Полученные экраны пользовательского интерфейса демонстрируют правильный порядок чтения, гармоничные цветовые сочетания, точное выравнивание по сетке и согласованную визуальную иерархию на нескольких экранах.

Алгоритм S3 описывает рабочий процесс оптимизации когнитивно-визуального макета и обеспечения согласованности между несколькими экранами (Дополнительный файл 1). Алгоритм S3 описывает интегрированный процесс когнитивной и структурной оптимизации, используемый для создания удобных пользовательских интерфейсов. Он объединяет перцептивную группировку (принципы Гештальта), эффективность взаимодействия (закон Фиттса) и простоту принятия решений (закон Хика) в рамках единой системы оптимизации. Сначала оцениваются пространственные отношения между компонентами для установления перцептивных групп. Затем оптимизируется эффективность взаимодействия путем корректировки размера и расположения компонентов, а сложность принятия решений регулируется путем ограничения количества вариантов, предлагаемых пользователям. Кроме того, алгоритм обеспечивает согласованность между несколькими экранами, приводя каждый экран в соответствие с изученными шаблонами макетов, что гарантирует единообразие типографики, интервалов и структурной организации. Затем многокритериальная функция оптимизации совершенствует макет, балансируя выравнивание, интервалы и когнитивные затраты, что позволяет создать интерфейс, который является одновременно визуально связным и когнитивно эффективным. В целом, данный алгоритм гарантирует, что созданные многоэкранные макеты сохраняют высокий уровень визуальной согласованности, юзабилити и перцептивной ясности.

Результаты

Предложенная платформа для автоматизированного прототипирования пользовательских интерфейсов (UI) была оценена с использованием интегрированного набора данных из 5 128 экранов UI из трех источников: 4 000 изображений RICO, 1 000 экранов ENRICO и 128 образцов UI с цветовой аннотацией из набора данных Guo’s UI Color Dataset. Этот смешанный набор данных обеспечивает сбалансированный базис для оценки точности детектирования компонентов, структурной ясности макета, согласованности между несколькими экранами и перцептивного цветового соответствия.

Экспериментальные результаты демонстрируют, что модель детектирования на основе Faster R-CNN достигает точности распознавания компонентов 92,4% и эффективно обобщает данные для различных стилей мобильных пользовательских интерфейсов. Кроме того, включение аннотаций паттернов ENRICO улучшает логику построения макета, что привело к увеличению четкости макета на 18,7% и лучшему сохранению порядка чтения. В экспериментах по оценке цвета модуль цветового моделирования на базе CAM02-UCS генерирует палитры, которые, согласно оценкам дизайнеров, на 24,5% более гармоничны и обладают более высокой перцептивной равномерностью по сравнению с традиционными методами генерации палитр на основе RGB- и LAB-пространств. Более того, моделирование согласованности для нескольких экранов обеспечивает улучшение выравнивания между экранами и единообразия типографики на 28%. Пользовательские исследования с участием 30 человек демонстрируют снижение воспринимаемой когнитивной нагрузки на 31% при взаимодействии с прототипами, созданными с помощью предлагаемой системы. В совокупности эти результаты указывают на то, что сочетание детектирования компонентов, перцептивного цветового моделирования и когнитивной оптимизации позволяет создавать прототипы пользовательских интерфейсов, которые являются не только структурно точными, но также визуально согласованными и когнитивно эффективными. В Таблице 3 приведены сведения о симуляционной среде и технических настройках, использованных для оценки предлагаемой среды прототипирования пользовательских интерфейсов. Ресурсоемкие процедуры обучения Faster R-CNN и модулей согласованности макета поддерживались высокопроизводительным графическим процессором NVIDIA RTX 4090. Все эксперименты проводились в среде Ubuntu 22.04 с использованием PyTorch 2.0 для реализации глубокого обучения.

Параметр	Конфигурация
Аппаратное обеспечение	NVIDIA RTX 4090 GPU (24 GB), процессор Intel i9, 64 GB RAM
Операционная система	Ubuntu 22.04 LTS
Фреймворк глубокого обучения	PyTorch 2.0
Базовая сеть (Backbone) Faster R-CNN	ResNet-50 + FPN
Разрешение изображений	480 × 800 (нормировано для всех наборов данных)
Размер пакета при обучении	8
Оптимизатор	AdamW (LR = 1e−4, Weight Decay = 0.01)
Количество эпох	40
Цветовое пространство моделирования	CAM02-UCS
Кластеризация для извлечения палитры	K-means (k = 5)
Кластеризация расположения	DBSCAN (ε = 20, min_samples = 3)

Таблица 3: Параметры реализации и экспериментальная конфигурация предлагаемой структуры. В таблице обобщены аппаратные и программные настройки, использованные для обучения и оценки модели, включая вычислительные ресурсы, операционную систему, фреймворк глубокого обучения, архитектуру модели, разрешение изображений, параметры обучения, стратегию оптимизации, цветовое пространство моделирования и методы кластеризации, использованные для извлечения палитры и группировки макета.

Архитектура Faster R-CNN использует базовую сеть ResNet-50 с FPN для обнаружения широкого спектра детализированных компонентов пользовательского интерфейса (UI). Перед обработкой все изображения UI единообразно масштабируются до 480 × 800 пикселей. Обучение проводится в течение 60 эпох с использованием оптимизатора SGD при размере пакета 16 для обеспечения стабильной сходимости. Генератор цветовой палитры использует CAM02-UCS с кластеризацией K-means, в то время как DBSCAN применяется для кластеризации структурного макета. Эти технические настройки гарантируют, что полученные результаты UI воспроизводимы, стабильны и обладают высокой точностью. Для всесторонней оценки предлагаемой системы автоматизированного прототипирования UI используются четыре категории метрик оценки:

i) Эффективность обнаружения компонентов, проанализированная с помощью точности (precision), полноты (recall), F1-меры, пересечения над объединением (IoU) и средней средней точности (mAP), которые количественно определяют точность модели Faster R-CNN при идентификации компонентов пользовательского интерфейса в наборах данных RICO и ENRICO;

ii) четкость макета и структурная согласованность, измеряемые через ошибку выравнивания (AE), точность группировки, правильность порядка чтения и показатели согласованности между экранами, полученные на основе ограничений паттернов проектирования;

iii) Перцептивное качество цвета, оцененное с помощью перцептивного расстояния CAM02-UCS (ΔE_UCS), коэффициентов контрастности WCAG 2.1, индекса разнообразия и показателей цветовой гармонии на основе системы оценки цветов пользовательского интерфейса по Гво (Guo);

iv) Метрики когнитивной эффективности, ориентированные на пользователя, включая когнитивную нагрузку, измеренную по индексу нагрузки задач НАСА (NASA-TLX), оценки эстетической согласованности и эффективность выполнения задач.

Эти метрики позволяют оценить эффективность системы не только с точки зрения точности детектирования, но и с точки зрения перцептивной гармонии, качества юзабилити и когнитивного опыта.

Метрики детекции компонентов

Точность (precision) характеризует степень правильности предсказаний модели при определении компонентов пользовательского интерфейса (UI) без генерации ложноположительных результатов. Высокая точность означает, что большинство предсказанных ограничивающих рамок соответствуют действительным элементам UI. Полнота (recall) измеряет способность модели идентифицировать все релевантные компоненты UI на экране. Высокая полнота указывает на то, что модель успешно обнаруживает большинство эталонных компонентов. F1-мера, определяемая как гармоническое среднее точности и полноты, обеспечивает сбалансированную оценку и особенно полезна, когда компоненты UI распределены по наборам данных неравномерно.

Метрика IoU определяет степень перекрытия предсказанной ограничивающей рамки с истинной ограничивающей рамкой. В задачах детектирования объектов пороги IoU 0,5 и 0,75 обычно используются для представления умеренных и строгих условий оценки. mAP обобщает эффективность детектирования по нескольким порогам IoU. Метрика mAP@0.5:0.95 обеспечивает более надежную оценку путем усреднения точности по порогам от 0,5 до 0,95 с шагом 0,05 и поэтому широко признана стандартным эталоном для детектирования объектов.

Результаты детектирования по трем наборам данных указывают на стабильно высокую эффективность предлагаемого модуля детектирования компонентов. Количественные результаты представлены в Таблице 4. Наилучшие показатели достигнуты на наборе данных RICO (точность — 0,91, полнота — 0,88 и F1-мера — 0,89), что обусловлено наличием большого и разнообразного набора аннотаций компонентов пользовательского интерфейса. Для ENRICO зафиксированы несколько более низкие показатели из-за более упрощенной структуры и меньшего количества аннотированных типов компонентов. Самая низкая F1-мера (0,81) отмечена для набора данных Guo, что, вероятно, связано с большим визуальным разнообразием и меньшим количеством стандартизированных паттернов макета, которые усложняют процесс детектирования. В целом эти результаты подтверждают, что модель обеспечивает устойчивую эффективность детектирования компонентов при различных стилях дизайна пользовательского интерфейса и характеристиках наборов данных.

Набор данных	Точность	Полнота	F1-мера
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Таблица 4: Эффективность детектирования компонентов в различных наборах данных. В таблице представлены показатели точности (precision), полноты (recall) и F1-меры для детектирования компонентов пользовательского интерфейса в наборах данных RICO, ENRICO и Guo, что демонстрирует эффективность модели детектирования.

Рисунок 3 демонстрирует эффективность модели на наборах данных RICO, ENRICO и Guo при порогах IoU 0.5 и 0.75. Как и ожидалось, значения mAP выше при IoU 0.5 из-за менее строгих требований к перекрытию. Для RICO последовательно фиксируются самые высокие значения mAP (0.89 при IoU 0.5 и 0.78 при IoU 0.75), что отражает полноту и согласованность его аннотаций. ENRICO демонстрирует чуть более низкие показатели, в то время как для Guo зафиксированы самые низкие результаты из-за большего разнообразия стилей макетов и плотности компонентов. Тенденция к снижению показателей при более строгих порогах IoU показывает, что сложность набора данных напрямую влияет на устойчивость детектирования.

Рисунок 3. Средняя средняя точность (mAP) при порогах пересечения над объединением (IoU) 0,5 и 0,75 для различных наборов данных. Линейный график сравнивает эффективность детектирования компонентов в наборах данных RICO, ENRICO и Guo. Ось x представляет наборы данных, а ось y — значения mAP. Две кривые соответствуют порогам IoU 0,5 и 0,75, иллюстрируя изменение производительности при разных уровнях строгости детектирования. Пожалуйста, нажмите здесь, чтобы просмотреть увеличенную версию этого рисунка.

Рисунок 4 демонстрирует mAP@IoU(0.5:0.95) для каждого набора данных, обеспечивая более широкую оценку эффективности детектирования по десяти порогам IoU. Результаты выявляют четкую тенденцию к снижению от RICO (0.61) к ENRICO (0.57) и Guo (0.52), что подтверждает наилучшую обобщающую способность предложенной модели детектирования на более крупных и структурированных наборах данных. Эта более строгая усредненная метрика подчеркивает незначительное снижение производительности, которое может быть незаметно при оценке с одним порогом. Данные результаты указывают на то, что, несмотря на высокую эффективность модели на всех наборах данных, повышенное разнообразие макетов и вариативность компонентов создают дополнительные сложности при строгой оценке в стиле COCO. Результаты детектирования представлены на рисунках 3 и 4, которые содержат количественные сравнения mAP при различных уровнях IoU.

Рисунок 4. Средняя средняя точность (mAP), усредненная по порогам пересечения над объединением (IoU) от 0.5 до 0.95 для различных наборов данных. На линейном графике представлена эффективность обнаружения компонентов в наборах данных RICO, ENRICO и Guo с использованием метрики mAP, усредненной по порогам IoU в диапазоне от 0.5 до 0.95. Ось x представляет наборы данных, а ось y указывает соответствующие значения mAP по шкале от 0 до 1, что отражает производительность модели при различных порогах обнаружения. Пожалуйста, нажмите здесь, чтобы просмотреть увеличенную версию этого рисунка.

Метрики качества компоновки

Качество макета оценивается с помощью AE, точности группировки (GA) и точности порядка чтения (ROA), которые в совокупности позволяют оценить структурную правильность, перцептивную организацию и когнитивную читаемость сгенерированных макетов пользовательского интерфейса.

Ошибка выравнивания.

AE (отклонение в пикселях) показывает, насколько точно элементы пользовательского интерфейса (UI) выровнены по идеальным линиям выравнивания, таким как направляющие левого, правого, верхнего края или базовой линии. Более низкое значение AE указывает на то, что элементы расположены последовательно с минимальным визуальным искажением, что повышает читабельность и общую четкость дизайна. Эта метрика особенно важна для оценки уточнения когнитивного макета, поскольку нарушение выравнивания нарушает визуальный поток и увеличивает воспринимаемую сложность. На рисунке 5 показано значение AE для наборов данных RICO, ENRICO и Guo, измеренное как среднее отклонение в пикселях от идеальных линий выравнивания. Результаты показывают, что в RICO достигается самое низкое значение AE (4.2 px), что указывает на более последовательные структурные паттерны компонентов UI в этом наборе данных, что облегчает выравнивание для модели. Далее следует ENRICO с умеренным отклонением выравнивания 6.1 px, что отражает сочетание хорошо структурированных и разнообразных макетов экранов. В наборе данных Guo зафиксировано самое высокое значение AE (7.4 px) из-за большего разнообразия в размещении компонентов и нестандартных структур макета, которые затрудняют уточнение на основе выравнивания. В целом эти результаты демонстрируют, что модель сохраняет высокую точность выравнивания в различных наборах данных, несмотря на возрастающую сложность макетов.

Рисунок 5. Ошибка выравнивания в различных наборах данных. На рисунке показана ошибка выравнивания для разных наборов данных; более низкие значения указывают на лучшее выравнивание. Пожалуйста, нажмите здесь, чтобы просмотреть увеличенную версию этого рисунка.

Точность группировки (GA).

GA количественно определяет, насколько эффективно модель группирует связанные компоненты пользовательского интерфейса (UI), например, на основе принципов Гештальта, таких как близость, сходство и непрерывность. Более высокая точность группировки указывает на то, что модель сохраняет намеренную структуру элементов UI, позволяя пользователям интерпретировать интерфейс более естественно. Эта метрика особенно полезна для оценки того, насколько успешно модуль уточнения макета организует контент в осмысленные визуальные группы. На рисунке 6 представлено распределение GA, достигнутое предлагаемым фреймворком на трех наборах данных. Набор данных ENRICO демонстрирует самую высокую медианную GA и наименьший межквартильный размах, что указывает на стабильную и последовательную производительность группировки благодаря четко определенным макетам с размеченными паттернами. Набор данных RICO показывает умеренную точность группировки с более высокой вариативностью, что, вероятно, связано с его большим разнообразием и сложностью макетов. Набор данных Guo UI Color фиксирует более низкую точность группировки, так как его образцы визуально неоднородны и в меньшей степени ориентированы на структурный макет. В целом, результаты показывают, что модуль когнитивного уточнения макета работает надежно на различных наборах данных, демонстрируя наилучшие показатели группировки на структурно согласованных данных.

Рисунок 6. Распределение точности группировки по наборам данных. На диаграмме размаха представлена точность группировки на основе принципов гештальт-психологии для наборов данных RICO, ENRICO и Guo’s UI Color. Прямоугольники представляют собой межквартильный размах, центральная линия указывает медиану, а «усы» обозначают диапазон значений. Ось x соответствует наборам данных, а ось y — показателям точности группировки. Размер выборки n=5128 экранов пользовательского интерфейса (RICO: 4000, ENRICO: 1000 и Guo: 128). Пожалуйста, нажмите здесь, чтобы просмотреть увеличенную версию этого рисунка.

Точность порядка чтения (ROA).

Точность порядка чтения (Reading order accuracy, ROA) определяет, насколько точно модель предсказывает естественный поток чтения экрана пользовательского интерфейса, который обычно следует шаблону «сверху вниз и слева направо». Соблюдение правильного порядка чтения имеет решающее значение для удобства использования, ясности навигации и соответствия установленным конвенциям дизайна. Более высокий показатель ROA указывает на то, что система сохраняет ожидаемые когнитивные паттерны сканирования. На рисунке 7 показана ROA на разных этапах оценки для наборов данных RICO, ENRICO и Guo. ENRICO стабильно демонстрирует самую высокую ROA благодаря своей регулярной и ориентированной на паттерны структуре макета, что обеспечивает более точное предсказание последовательностей чтения, характерных для человека. RICO демонстрирует умеренную производительность с небольшой вариативностью, что отражает большее разнообразие и сложность реальных интерфейсов. Набор данных Guo показывает самую низкую ROA, так как многие его экраны визуально насыщенны, но лишены четко определенных иерархий чтения. В целом, эти результаты указывают на то, что предлагаемый модуль уточнения когнитивного макета работает наиболее надежно на структурированных наборах данных, сохраняя при этом стабильные предсказания порядка чтения для различных дизайнов пользовательских интерфейсов.

Рисунок 7. Точность порядка чтения на различных этапах оценки для нескольких наборов данных. На линейном графике показана точность порядка чтения на различных этапах оценки для наборов данных RICO, ENRICO и Guo’s UI Color. Ось x представляет этап оценки, а ось y указывает на точность порядка чтения. Каждая кривая соответствует набору данных, иллюстрируя изменения в сохранении визуального потока на последующих этапах оценки. Этап оценки представляет собой стадии постепенного уточнения предлагаемой структуры. Пожалуйста, нажмите здесь, чтобы просмотреть этот рисунок в большем размере.

Показатель согласованности структуры (LCS)

Показатель согласованности макета (layout consistency score, LCS) определяет, насколько стабильно сохраняются сгенерированные макеты пользовательского интерфейса (UI) на нескольких экранах одного и того же приложения. Это включает в себя согласованность отступов, правил выравнивания, типографических областей и паттернов группировки. Более высокий балл указывает на улучшенную когерентность между экранами, что приводит к более единому и интуитивно понятному пользовательскому опыту (UX). На Рисунке 8 представлены значения LCS, измеренные на нескольких этапах оценки для наборов данных RICO, ENRICO и Guo’s UI Color. Набор данных ENRICO последовательно демонстрирует самые высокие значения LCS благодаря маркированным по паттернам и структурно однообразным экранам UI, что способствует более стабильному обучению согласованности между экранами. Напротив, набор данных RICO демонстрирует умеренную, но неуклонно растущую согласованность, что объясняется способностью модели к обобщению при работе с крайне разнообразными макетами UI. Как и ожидалось, набор данных Guo показывает самые низкие значения LCS, так как он в первую очередь ориентирован на цветовые характеристики, а не на структурный макет, что затрудняет достижение многоэкранной согласованности. В целом, эти результаты указывают на то, что предложенный модуль многоэкранной согласованности наиболее эффективно работает на наборах данных, ориентированных на паттерны, при этом обеспечивая заметные улучшения для всех исследуемых наборов данных.

Рисунок 8. Показатель согласованности макета на различных этапах оценки для нескольких наборов данных. На линейном графике показаны показатели согласованности макета на этапе оценки для наборов данных RICO, ENRICO и UI Color от Guo. Ось X представляет этап оценки, а ось Y указывает на показатели согласованности макета. Каждая кривая соответствует набору данных, иллюстрируя улучшение структурной связности созданных интерфейсов на последующих этапах оценки. Пожалуйста, нажмите здесь, чтобы просмотреть увеличенную версию этого рисунка.

Метрики качества цвета

Сгенерированные цветовые темы пользовательского интерфейса оцениваются с помощью пяти перцептивно обоснованных метрик, основанных на CAM02-UCS: ΔE (перцептивная разность цветов), которая количественно определяет перцептивное однообразие цветов палитры; коэффициент контрастности (на основе WCAG 2.1), который оценивает читаемость элементов переднего и заднего плана; индекс цветовой гармонии (CHI), измеряющий эстетическую совместимость оттенков; показатель цветового разнообразия (CDS), отражающий вариативность в перцептивном цветовом пространстве; и показатель значимости цвета (CPS), который оценивает баланс и доминирование цветов в палитре. Совокупность этих метрик обеспечивает комплексную оценку как эстетического качества, так и функциональности цветового решения с точки зрения юзабилити. Результаты показывают, что предлагаемый метод обеспечивает более низкое значение ΔE, равное 4.12, что указывает на улучшенное перцептивное однообразие цветов. Коэффициент контрастности 6.21 подтверждает соответствие стандартам доступности, обеспечивая повышенную читаемость. В Таблице 5 представлено количественное сравнение предлагаемого модуля цветового моделирования с базовыми методами. Значение CHI увеличивается с 0.61 до 0.83, что свидетельствует об улучшении эстетической согласованности цветовых переходов. Кроме того, CDS увеличивается более чем на 50%, демонстрируя, что сгенерированные палитры сохраняют более богатое разнообразие без создания визуального шума. Более высокие значения CPS указывают на сбалансированное распределение доминирующих цветов, что предотвращает перенасыщение каким-либо одним оттенком. В целом, данные результаты подтверждают эффективность модуля цветового моделирования на основе CAM02-UCS при создании гармоничных, читаемых и перцептивно оптимизированных цветовых схем пользовательского интерфейса.

Метрика	Определение	Предлагаемый метод	Исходный уровень1	Улучшение (%)
ΔE (CAM02-UCS)	Перцептивное различие цветов	4.12	7.85	на 47,5% ниже
Коэффициент контрастности (WCAG)	Читаемость пар передний план — задний план	6.21	4.38	41.80%
CHI (индекс цветовой гармонии)	Цветовой тон & цветовая гармония	0.83	0.61	36.10%
CDS (показатель цветового разнообразия)	Дисперсия в пространстве J′a′b′	18.70	12.40	50.80%
CPS (показатель выраженности цвета)	Стабильность доминирующих цветов	0.72	0.55	30.90%

Таблица 5: Количественное сравнение показателей качества цвета между предлагаемым и базовым методами. В таблице представлены метрики оценки качества цвета, включая перцептивную разность цветов (ΔE в CAM02-UCS), коэффициент контрастности (WCAG), индекс цветовой гармонии (CHI), показатель цветового разнообразия (CDS) и показатель выраженности цвета (CPS). Результаты предлагаемого метода сопоставляются с базовыми значениями, а также указан процент улучшения.

Демографические характеристики участников и дизайн исследования

В процессе оценки приняли участие в общей сложности 30 человек. Возраст участников составлял от 20 до 35 лет (средний возраст: 26,4 ± 3,2 года). В когорту вошли представители различных профессиональных областей, включая инженеров-программистов, студентов и UI/UX-дизайнеров. На основании самооценки навыков работы с компьютером 40% участников были классифицированы как пользователи среднего уровня, 35% — как опытные пользователи и 25% — как начинающие. Примерно половина участников имела предварительный опыт в UI/UX-дизайне или смежных областях, остальные — нет. Такое разнообразие обеспечило сбалансированную оценку с учетом различных уровней технической подготовки и знакомства с принципами дизайна.

Метрики исследования пользователей

Оценка с учетом пользователя была проведена с использованием нескольких показателей, включая NASA-TLX, шкалу юзабилити системы (SUS), оценку эстетической гармонии (AHS), время эффективности поиска (SET) и рейтинг согласованности между экранами (CSCR), для анализа когнитивной нагрузки, юзабилити, визуальной привлекательности, эффективности и согласованности.

Метрика NASA-TLX количественно оценивает умственную нагрузку, измеряя такие факторы, как умственные требования, затрачиваемые усилия и уровень разочарования. Более низкие баллы свидетельствуют о снижении когнитивной нагрузки и облегчении взаимодействия. Предложенный фреймворк последовательно демонстрировал более низкие показатели NASA-TLX во всех наборах данных, что указывает на снижение умственных усилий. Это улучшение можно объяснить интеграцией принципов когнитивного дизайна, включая группировку по Гештальту, оптимизированные интервалы и улучшенную визуальную иерархию, которые в совокупности способствуют более интуитивной навигации. Метрика SUS предоставляет стандартизированную оценку юзабилити в диапазоне от 0 до 100, где более высокие значения указывают на улучшенное удобство использования и ясность. Предложенный фреймворк достиг более высоких баллов SUS по сравнению с базовыми методами, что отражает улучшения как в структурном макете, так и в четкости цветопередачи. Улучшенное выравнивание, интервалы и навигационный поток позволили создать интерфейсы, которые пользователи воспринимали как более интуитивно понятные и функционально согласованные. AHS, измеряемый по 7-балльной шкале Лайкерта, оценивает воспринимаемую визуальную привлекательность и гармонию цветов. Интерфейсы, созданные с использованием модуля цветового моделирования на базе CAM02-UCS, достигли более высоких значений AHS, что указывает на более плавные цветовые переходы и более визуально сбалансированные палитры. Участники последовательно отдавали предпочтение таким интерфейсам благодаря улучшенному контрасту, согласованности оттенков и меньшему количеству визуального шума, что подчеркивает важность перцептивного цветового моделирования в дизайне пользовательских интерфейсов. SET измеряет время, необходимое пользователям для поиска целевых элементов интерфейса во время задач визуального поиска. Более низкие значения SET указывают на улучшенную визуальную организацию и иерархию. Предложенный фреймворк значительно сократил SET во всех наборах данных, демонстрируя, что интеграция группировки по Гештальту, интервалов с учетом внимания и уточненных структур макета обеспечивает более быстрое и эффективное взаимодействие. Метрика CSCR оценивает согласованность дизайна пользовательского интерфейса на нескольких экранах. Более высокие баллы указывают на лучшую непрерывность макета, цвета и структурной организации. Предложенный фреймворк достиг более высоких значений CSCR, что отражает эффективность модуля многоэкранной согласованности в поддержании стабильных цветовых схем, интервалов и иерархических структур между интерфейсами.

Рисунок 9 представляет результаты сравнительного пользовательского исследования по всем метрикам (NASA-TLX, SUS, AHS, SET и CSCR) для наборов данных RICO, ENRICO и Guo. В целом, по всем показателям оценки наблюдаются последовательные улучшения. Примечательно, что набор данных Guo демонстрирует лучшие результаты по пользовательским метрикам, включая более низкую когнитивную нагрузку (NASA-TLX), более высокую юзабилити (SUS), улучшенную эстетическую гармонию (AHS), сокращение времени поиска (SET) и улучшенную согласованность между экранами (CSCR). Однако эти результаты требуют тщательной интерпретации. Улучшение показателей UX, наблюдаемое для набора данных Guo, в первую очередь обусловлено высокой согласованностью цветов и относительно более простой визуальной композицией, а не превосходным качеством структурной разметки. Несмотря на то, что пользователи воспринимают эти интерфейсы как более визуально гармоничные и менее когнитивно затратные, предыдущие результаты показывают, что набор данных Guo демонстрирует плохие показатели с точки зрения выравнивания, группировки и порядка чтения. Это подчеркивает важное различие между перцептивными и структурными факторами в дизайне пользовательского интерфейса. В то время как перцептивные атрибуты, такие как цветовая гармония, значительно улучшают UX, структурная точность и согласованность макета остаются критически важными для функциональной юзабилити. Следовательно, оптимальный дизайн пользовательского интерфейса требует баланса между перцептивной гармонией и структурной корректностью.

Рисунок 9. Сравнение показателей пользовательского исследования по разным наборам данных. На групповой столбчатой диаграмме представлены показатели пользовательского исследования для наборов данных RICO, ENRICO и Guo’s UI Color. Ось x представляет метрики оценки, включая индекс нагрузки при выполнении задач NASA (NASA-TLX), шкалу юзабилити системы (SUS), показатель эстетической гармонии (AHS), время структурной эффективности (SET) и коэффициент кросс-экранной согласованности (CSCR), а ось y указывает соответствующие баллы. Столбцы отображают производительность для каждого набора данных, иллюстрируя различия в юзабилити, когнитивной нагрузке, эстетическом качестве и согласованности интерфейса. NASA-TLX (0–100, чем ниже, тем лучше), SUS (0–100, чем выше, тем лучше), AHS (шкала Лайкерта 1–7), SET (s, чем ниже, тем лучше) и CSCR (0–1, чем выше, тем лучше). Пожалуйста, нажмите здесь, чтобы просмотреть увеличенную версию этого рисунка.

Статистическая проверка гипотез

Для дальнейшей проверки выдвинутых гипотез (H1–H4) был проведен анализ статистической значимости ключевых показателей оценки, включая качество макета, когнитивную нагрузку, гармонию цветов и показатели юзабилити (Таблица 6). Результаты представлены в виде среднего значения ± стандартное отклонение; статистическая значимость оценивалась с помощью парного t-критерия с 95% доверительным интервалом (p < 0,05). Результаты показывают, что предлагаемая структура обеспечивает статистически значимое улучшение по сравнению с базовыми подходами по нескольким показателям, включая точность выравнивания, точность группировки, порядок чтения, когнитивную нагрузку (NASA-TLX) и показатели гармонии цветов. Примечательно, что снижение когнитивной нагрузки и улучшение показателей юзабилити демонстрируют высокозначимые различия (p < 0,01). Эти данные подтверждают, что интеграция принципов когнитивного дизайна и перцептивного моделирования цвета приводит к измеримым, статистически значимым улучшениям качества пользовательского интерфейса, что подтверждает гипотезы H1–H4.

Показатель	Исходный уровень (Mean ± SD)	Предложенный вариант (Mean ± SD)	Улучшение (%)	p-значение	Значимость
Ошибка выравнивания (↓)	7.8 ± 1.2	4.2 ± 0.9	46.10%	0.003	Значимо
Точность группировки (↑)	0.68 ± 0.05	0.82 ± 0.04	20.50%	0.001	Значимо
Точность порядка чтения (↑)	0.72 ± 0.06	0.87 ± 0.03	20.80%	0.002	Значимо
NASA-TLX (↓)	68.5 ± 5.4	47.2 ± 4.8	31.10%	0.0005	Высоко значимо
Балл SUS (↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	Высоко значимо
Индекс цветовой гармонии (↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	Значимо
Коэффициент контрастности (↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	Значимо

Таблица 6: Статистическое сравнение показателей эффективности базового и предлагаемого методов. В таблице представлены среднее значение и стандартное отклонение (mean ± SD) для ключевых показателей эффективности, включая ошибку выравнивания, точность группировки, точность порядка чтения, индекс нагрузки NASA Task Load Index (NASA-TLX), шкалу юзабилити системы (SUS), индекс цветовой гармонии и коэффициент контрастности. Приведены показатели процентного улучшения, значения p и уровни статистической значимости. (↑) означает, что более высокие значения являются лучшими, а (↓) — что более низкие значения являются лучшими. Статистическая значимость оценивалась при p < 0.05.

Наблюдения по конкретному набору данных

Относительно более низкие показатели структурных метрик, наблюдаемые на наборе данных Guo, могут быть обусловлены его внутренними характеристиками. Набор данных Guo меньше, чем RICO и ENRICO, и в первую очередь ориентирован на перцептивные цветовые признаки, а не на аннотации структурированного макета. В результате в нем наблюдается большая вариативность размещения компонентов, более слабая иерархическая организация и менее последовательные структуры макета на разных экранах. Эти свойства усложняют структурное обучение и оптимизацию макета, что объясняет более низкие показатели метрик выравнивания, группировки и порядка чтения, несмотря на высокие результаты в перцептивных и ориентированных на пользователя оценках.

Абляционное исследование

Абляционное исследование позволяет оценить вклад каждого модуля в рамках предложенного подхода путем систематического удаления отдельных компонентов и анализа их влияния на качество макета, моделирование цвета и эффективность детектирования. Качество макета оценивается с помощью AE, GA, ROA и LCS. AE отражает позиционное отклонение элементов пользовательского интерфейса, где более высокие значения указывают на более слабую пространственную структуру. GA оценивает, насколько эффективно компоненты организованы в соответствии с принципами Гештальта. ROA измеряет сохранение логического визуального потока, в то время как LCS количественно определяет структурную согласованность между экранами с точки зрения выравнивания, интервалов и организации макета. Снижение качества цвета оценивается с помощью ΔE (перцептивная разность цветов), CHI и CDS, которые в совокупности позволяют оценить перцептивное единообразие, эстетическую когерентность и богатство палитры. Эффективность детектирования оценивается с использованием mAP, точности (precision) и полноты (recall), которые количественно определяют влияние замены модуля Faster R-CNN на более простую модель детектирования. В совокупности эти метрики обеспечивают комплексную оценку того, как каждый модуль влияет на общую производительность системы.

Таблица 7 обобщает вклад каждого модуля и сравнивает предлагаемую структуру с существующими подходами к генерации пользовательских интерфейсов. Полная модель демонстрирует наилучшие результаты по всем метрикам качества макета, цветового моделирования и детектирования, что доказывает синергетический эффект когнитивного дизайна, перцептивного цветового моделирования и глубокого визуального анализа. При удалении модуля цветового моделирования значение ΔE значительно возрастает, в то время как CHI и CDS существенно снижаются, что указывает на потерю перцептивной однородности и цветовой гармонии. Это подтверждает важность моделирования на основе CAM02-UCS для поддержания эстетического и перцептивного качества. Удаление модуля когнитивного макета приводит к значительному увеличению AE и заметному снижению GA и ROA, что демонстрирует необходимость применения принципов когнитивного дизайна для создания структурно связных и читаемых макетов. Удаление модуля согласованности между экранами приводит к снижению LCS, что подтверждает его роль в поддержании единых паттернов макета на нескольких экранах. Замена детектора Faster R-CNN на более простую CNN приводит к резкому падению mAP, точности (precision) и полноты (recall), что подчеркивает критическую важность надежного детектирования компонентов в общем конвейере обработки. По сравнению с базовыми методами, включая pix2code, REDRAW и LDGM, предлагаемая структура последовательно превосходит все подходы по точности макета, визуальной связности и перцептивному качеству цвета.

Метод / Модуль	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Цветовой модуль удален	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Модуль когнитивного макета удален	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
Согласованность многоэкранности удалена	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNN заменен на простой 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 (диффузия макета)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
Предлагаемая полная модель	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Таблица 7: Анализ влияния компонентов (ablation study) и сравнительный анализ эффективности предлагаемой архитектуры и базовых методов. В таблице оценивается влияние отдельных компонентов путем сравнения полной предлагаемой модели с вариантами, в которых удалены определенные модули (модуль цвета, модуль когнитивной разметки, многоэкранная согласованность и замена Faster R-CNN простой сетью CNN), а также с базовыми методами (pix2code, REDRAW и LDGM). Эффективность оценивается с помощью ошибки выравнивания (AE), точности группировки (GA), точности порядка чтения (ROA), показателя согласованности разметки (LCS), перцептивной разности цветов (ΔE), индекса гармонии цветов (CHI), показателя цветового разнообразия (CDS) и средней средней точности (mAP). Символ (↑) означает, что более высокие значения лучше, а (↓) — что более низкие значения лучше.

ДОСТУПНОСТЬ ДАННЫХ:

Наборы данных, использованные в данном исследовании, доступны по следующим ссылкам: набор данных RICO: https://interactionmining.org/rico; набор данных ENRICO: https://github.com/luileito/enrico; набор данных UI Color от Guo: https://github.com/guozhongke/UI-Color-Dataset.

Дополнительный файл 1. Математические формулы и расширенные сведения о реализации.В этом файле представлены подробные математические формулы и алгоритмические рабочие процессы, лежащие в основе предлагаемой среды автоматизированного прототипирования пользовательских интерфейсов (UI). Он включает в себя обучение детектированию компонентов, извлечение паттернов макета, моделирование цветовой гармонии, единую цель прототипирования UI, сведения о детектировании с помощью Faster R-CNN, расчеты пространственного расстояния и сходства выравнивания, построение логического дерева UI, перцептивное моделирование цвета на основе CAM02-UCS, оптимизацию когнитивного дизайна, моделирование согласованности для нескольких экранов, а также Алгоритмы S1–S3.Пожалуйста, нажмите здесь, чтобы скачать этот файл.

Обсуждение

Результаты демонстрируют статистически значимое улучшение юзабилити, структурной организации и перцептивного качества (p < 0.05), что подтверждает эффективность внедрения принципов когнитивного дизайна в автоматизированное прототипирование пользовательских интерфейсов (UI). В отличие от традиционных систем генерации UI, которые полагаются преимущественно на визуальное обнаружение или эвристики на основе правил, предлагаемый фреймворк интегрирует группировку по Гештальту, моделирование иерархии, ограничения по интервалам и перцептивную читаемость на протяжении всего процесса реконструкции UI. Улучшения, отмеченные в тестах NASA-TLX, SUS и SET, дополнительно подтверждают статистически значимое снижение когнитивной нагрузки (NASA-TLX, p.< 0.01). Эти результаты указывают на то, что автоматизированная генерация UI должна выходить за рамки точности визуальной реконструкции и включать знания о человекоориентированном дизайне для достижения практического юзабилити. Кроме того, все сформулированные гипотезы (H1–H4) получили эмпирическое подтверждение в ходе экспериментальных исследований.

Помимо улучшений макета, интеграция перцептивного моделирования цвета на основе CAM02-UCS приводит к статистически значимому повышению гармонии цветов, доступности и перцептивной стабильности (p < 0.05), что отражается в улучшении показателей ΔE, CHI, CDS и коэффициента контрастности. По сравнению с предыдущими работами, такими как автоматическая генерация цветовых тем пользовательского интерфейса на основе изображений, где основное внимание уделяется оптимизации цвета, предлагаемая структура объединяет уточнение как цвета, так и макета в рамках единого конвейера. Кроме того, включение модуля согласованности для нескольких экранов устраняет ключевой недостаток предыдущих подходов, ориентированных только на генерацию интерфейса для одного экрана. Сравнение с существующими методами, включая pix2code³¹, REDRAW^23,24 и LDGM³², показывает, что в этих подходах основной акцент делается на структурной реконструкции или генеративном моделировании без учета когнитивных принципов, перцептивной гармонизации цветов или анализа нескольких экранов. Предложенная структура демонстрирует статистически значимые улучшения по сравнению с этими методами (p < 0.05) по метрикам точности макета (AE, GA и ROA), перцептивным метрикам (CHI и ΔE) и показателям юзабилити (SUS и CSCR). Эти результаты подчеркивают преимущество объединения когнитивных принципов дизайна, перцептивного моделирования цвета и глубокого обучения в рамках единой системы.

Важным наблюдением по результатам исследования является различие между структурными и перцептивными факторами, влияющими на UX. Структурная оптимизация повышает функциональную корректность и четкость макета, в то время как перцептивная оптимизация — в частности, цветовая гармония — существенно влияет на восприятие пользователя и когнитивную нагрузку. Полученные данные свидетельствуют о том, что оптимальный дизайн UI требует баланса между структурной точностью и перцептивной согласованностью. Несмотря на продемонстрированные улучшения, сохраняются определенные ограничения. Например, показатели на более небольших и ориентированных на восприятие наборах данных, таких как Guo UI Color dataset, ниже по структурным метрикам из-за вариативности организации макета и ограниченности структурных аннотаций. Эти характеристики создают сложности при изучении стабильных паттернов макета и иерархических связей. Будущие работы будут сосредоточены на повышении устойчивости алгоритмов при работе с такими наборами данных.

С теоретической точки зрения данное исследование демонстрирует, что процесс генерации пользовательских интерфейсов (UI) может быть значительно улучшен путем внедрения когнитивных и перцептивных принципов непосредственно в рабочие процессы глубокого обучения. Результаты исследования ставят под сомнение общепринятое мнение о том, что генерация UI является исключительно задачей компьютерного зрения или генерации кода. Напротив, в работе подчеркивается важность включения перцептивного единообразия (посредством CAM02-UCS), снижения когнитивной нагрузки (с помощью принципов Гештальта и моделирования иерархии), а также согласованности многоэкранного дизайна в качестве основных компонентов автоматизированных систем UI. Данная работа способствует переходу к человекоцентрированным вычислительным моделям, в которых при генерации UI учитывается не только структурная корректность, но также психологические и перцептивные факторы. Таким образом, она задает новое теоретическое направление в развитии интеллектуальных систем автоматизированного проектирования.

С практической точки зрения предлагаемая платформа представляет собой готовое решение для дизайнеров пользовательских интерфейсов, продуктовых команд и инструментов прототипирования. Снижая когнитивную нагрузку и повышая эффективность поиска, система генерирует макеты пользовательского интерфейса, которые требуют меньшей ручной доработки для соответствия профессиональным стандартам дизайна. Использование перцептивно оптимизированных цветовых тем обеспечивает соблюдение правил доступности, таких как WCAG 2.1, что позволяет сразу применять их в реальных приложениях. Кроме того, модуль обеспечения согласованности между несколькими экранами ускоряет разработку многостраничных приложений за счет сохранения единообразных шаблонов макета и дизайна без необходимости ручной корректировки. В целом, данная платформа обладает потенциалом значительно сократить время разработки пользовательских интерфейсов, одновременно повышая качество и юзабилити генерируемых макетов.

Предлагаемая концепция вводит человекоцентрированный подход к автоматизированному прототипированию пользовательского интерфейса (UI) путем интеграции принципов когнитивного дизайна, перцептивного моделирования цвета (CAM02-UCS) и согласованности многоэкранной разметки в единый вычислительный конвейер. В отличие от предыдущих подходов, ориентированных преимущественно на структурную реконструкцию или визуальное обнаружение, данный фреймворк эксплицитно моделирует гештальт-группировку, иерархию, оптимизацию контраста и перцептивную равномерность. Результаты экспериментов демонстрируют значительные улучшения в юзабилити (SUS и NASA-TLX), визуальной гармонии (AHS, CHI и ΔE) и структурной эффективности (GA, ROA, LCS и mAP), что подтверждает тот факт, что когнитивное и перцептивное моделирование повышает качество UI и пользовательский опыт (UX). Будущая работа будет направлена на изучение интеграции визуально-языковых моделей на основе трансформеров для улучшения семантического понимания и структурного анализа. Кроме того, внедрение адаптивной персонализации, адаптивных макетов для различных устройств и итеративного уточнения с участием человека может дополнительно расширить практическую применимость системы. В целом, данная работа закладывает основу для систем проектирования UI на базе ИИ следующего поколения, которые будут не только визуально точными, но также когнитивно эффективными, перцептивно гармоничными и практически применимыми.

Материалы

Список материалов, использованных в этой статье

Имя	Компания	Каталожный номер	Комментарии
ЦП (процессор)	AMD Ryzen 9 7950X (16 ядер, 32 потока, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), США	Ryzen 9 7950X
CUDA Toolkit	Версия 11.8	NVIDIA Corporation, США	CUDA Toolkit 11.8
cuDNN	Версия 8.9	NVIDIA Corporation, США	cuDNN v8.9
Faster R-CNN	Модель обнаружения объектов (с сетью предложения регионов)	Meta AI Research / Detectron2	Фреймворк Detectron2
Matplotlib	Версия 3.7	Команда разработчиков Matplotlib	v3.7.0
ГП NVIDIA RTX 4090	Видеокарта 24 GB GDDR6X	NVIDIA Corporation, Санта-Клара, Калифорния, США	RTX 4090
NumPy	Версия 1.24	Разработчики NumPy	v1.24.0
OpenCV	Версия 4.8	OpenCV Foundation	v4.8.0
PyTorch	Версия 2.0	PyTorch Foundation (Meta AI)	v2.0.0
ResNet-50 с FPN	Базовая CNN с сетью пирамиды признаков	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	Версия 1.3	Разработчики Scikit-learn	v1.3.0
SciPy	Версия 1.10	Сообщество SciPy	v1.10.0
Системная память (ОЗУ)	64 GB DDR5	Corsair / Kingston (или эквивалент)	Комплект DDR5 64GB
Операционная система Ubuntu	Версия 22.04 LTS	Canonical Ltd., Великобритания	Ubuntu 22.04 LTS