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

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

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

Аннотация

Эффективный дизайн пользовательского интерфейса (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 для извлечения иерархии и макета. После этого применяется когнитивная оптимизация с использованием принципов гештальт-психологии, закона Фиттса, закона Хика и корректировок на основе внимания. Стрелки указывают направление потока данных между модулями, что в итоге приводит к формированию конечного прототипа UI. Нажмите здесь, чтобы просмотреть этот рисунок в большем размере.

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

Рисунок 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 использовалась архитектура ResNet-50, предварительно обученная на наборе данных ImageNet. Обучение выполнялось с использованием оптимизатора стохастического градиентного спуска (SGD) при скорости обучения 0.001, размере пакета 16 и до 60 эпох. Для предотвращения переобучения применялся метод ранней остановки с использованием валидационной выборки, составляющей 20% данных. Несмотря на то, что обучение было предусмотрено до 60 эпох, сходимость обычно достигалась раньше благодаря ранней остановке на основе потерь на валидационном наборе. Моментум и коэффициент затухания весов были установлены на значения 0.9 и 0.0005 соответственно. Аугментация данных включала нормализацию, случайный горизонтальный переворот, а также случайную обрезку и изменение размера.

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

Для поддержки предлагаемой структуры автоматизированного прототипирования пользовательских интерфейсов (UI) использовались три дополняющих друг друга набора данных: ENRICO²⁹, RICO³⁰ и набор данных UI Color от Guo¹. Набор данных RICO содержит 66 261 экран Android UI, собранный из 9 700 приложений, что обеспечивает широкомасштабное разнообразие для детектирования компонентов и извлечения иерархической разметки. ENRICO включает 1 464 высококачественных скриншота UI, вручную распределенных по 20 паттернам дизайна, что позволяет улучшить обобщение для структурного анализа и моделирования согласованности разметки. Набор данных UI Color от 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 Color от 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 Гуо в совокупности обеспечивают работу трех основных функциональных компонентов предлагаемой структуры автоматического прототипирования пользовательского интерфейса (UI): детектирования компонентов, моделирования макета и перцептивной оптимизации цвета. Набор данных RICO представляет собой масштабную коллекцию из более чем 66 000 экранов мобильных UI и используется преимущественно для обучения модуля детектирования компонентов. Его разнообразие позволяет модели Faster R-CNN изучать устойчивые представления распространенных элементов UI, таких как кнопки, изображения и текстовые поля, в широком спектре приложений. Это обеспечивает точное обнаружение и локализацию компонентов UI при различных условиях проектирования. Набор данных ENRICO предоставляет высококачественные экраны UI с разметкой паттернов для изучения структурных связей и шаблонов макета. Он позволяет системе понимать взаимосвязи между компонентами, иерархическую организацию и общие шаблоны дизайна. Этот набор данных играет критическую роль в моделировании структур макета и обеспечении согласованности между несколькими экранами, позволяя структуре генерировать макеты, соответствующие установленным конвенциям дизайна. В отличие от них, UI Color Dataset Гуо используется специально для перцептивного и когнитивного моделирования цвета. В отличие от RICO и ENRICO, ориентированных на структурные аспекты, этот набор данных содержит курируемые изображения UI с аннотированными цветовыми темами. Эти аннотации используются для обучения модулей извлечения цвета и оценки гармонии. Путем отображения цветовых отношений в перцептивные цветовые пространства, такие как CAM02-UCS, структура учится генерировать цветовые палитры, сбалансированные по контрастности, доступности и эстетической согласованности. Вместе эти наборы данных формируют интегрированный конвейер: RICO обеспечивает детектирование компонентов, ENRICO позволяет понимать паттерны макета и структурную согласованность, а набор данных Гуо способствует перцептивной оптимизации цвета. Такая интеграция гарантирует, что генерируемые прототипы UI будут структурно точными, визуально гармоничными и когнитивно оптимизированными.

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

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

Модель Faster R-CNN была обучена с использованием метода SGD с моментом 0.9 и коэффициентом затухания весов 0.0005. Начальная скорость обучения была установлена на уровне 0.001 и корректировалась с помощью стратегии ступенчатого затухания (step decay) на основе показателей валидации. Обучение проводилось в течение до 60 эпох с размером пакета 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 обучается сквозным образом (end-to-end) путем оптимизации совместной функции потерь, которая объединяет потери RPN с конечными потерями обнаружения. Это позволяет системе не только точно распознавать компоненты UI, но и прецизионно локализовать их в различных структурах интерфейса. Подробное описание обнаружения компонентов с помощью Faster R-CNN, включая этап RPN, классификацию ROI, уточнение ограничивающей рамки и конечную цель оптимизации, приведено в Дополнительном файле 1.

Алгоритм S1 содержит детальный рабочий процесс обнаружения компонентов и извлечения структуры (Дополнительный файл 1). В нем описывается полный процесс автоматического обнаружения компонентов пользовательского интерфейса (UI) и извлечения структуры из необработанного изображения экрана. Входное изображение сначала подвергается предварительной обработке и пропускается через базовую сеть CNN для извлечения глубоких визуальных признаков. Эти признаки используются RPN для генерации потенциальных ограничивающих рамок, которые затем уточняются с помощью классификации и регрессии. 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) представляется в виде ограничивающей рамки. Однако одни только ограничивающие рамки не передают того, как элементы структурно организованы внутри интерфейса — например, какие элементы относятся к заголовкам, навигационным панелям или сгруппированным областям контента. Чтобы устранить этот недостаток, обнаруженные компоненты преобразуются в логическое UI-дерево, где каждый компонент рассматривается как узел, а функционально или визуально связанные компоненты группируются под общими родительскими узлами. Для выявления значимых групп макета применяются методы кластеризации, такие как DBSCAN или иерархическая агломеративная кластеризация. Эти методы анализируют пространственную близость и закономерности выравнивания компонентов для обнаружения взаимосвязей между элементами UI. По аналогии с практиками человеческого дизайна, система учится распознавать общие структурные паттерны, такие как верхние и нижние колонтитулы, сетки и блоки контента. После установления группировки анализируются дополнительные структурные свойства, включая выравнивание, организацию сетки и порядок чтения, для построения комплексного представления макета. Например, компоненты, выровненные в колонках равной ширины, могут указывать на карточный макет, в то время как вертикально расположенные элементы могут свидетельствовать об интерфейсе на основе форм или ленты новостей. Интегрируя кластеризацию, пространственный анализ и правила выравнивания, фреймворк выстраивает иерархическое UI-дерево, которое отражает как визуальную группировку, так и функциональные связи. Это иерархическое представление служит основой для последующего уточнения макета и моделирования согласованности между несколькими экранами, позволяя системе создавать структурированные, связные и ориентированные на пользователя дизайны интерфейсов.

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

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

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

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

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

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

Результаты

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

Экспериментальные результаты показывают, что модель детектирования на базе 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 Processor, 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-меры (F1-score), пересечения над объединением (IoU) и средней средней точности (mAP), которые количественно определяют точность модели Faster R-CNN при идентификации компонентов пользовательского интерфейса в наборах данных RICO и ENRICO;

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

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

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 достигнуты самые высокие показатели: точность (precision) 0,91, полнота (recall) 0,88 и F1-мера 0,89, что обусловлено наличием большого и разнообразного набора аннотаций компонентов пользовательского интерфейса (UI). Набор ENRICO демонстрирует несколько более низкие показатели из-за более упрощенной структуры и меньшего количества аннотированных типов компонентов. В наборе данных Guo зафиксирована самая низкая F1-мера (0,81), что, вероятно, связано с большей визуальной вариативностью и меньшим количеством стандартизированных шаблонов разметки, что затрудняет детектирование. В целом, эти результаты подтверждают, что модель сохраняет высокую эффективность детектирования компонентов при различных стилях дизайна UI и характеристиках наборов данных.

Набор данных	Точность	Полнота (Recall)	F-мера
RICO	0.91	0.88	0.89
ЭНРИКО	0.87	0.84	0.85
Го`уо	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 и Guo’s UI Color. Ось 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 и UI Color Datasets от Guo. Ось 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.

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

Метод / Модуль	АЭ ↓	ГА ↑	Рамановский оптический анализ (ROA) ↑	СМЖ ↑	ΔЕ ↓	ХИ (хитозан) ↑	кодирующая последовательность ↑	среднее среднее значение точности (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
ПЕРЕРИСОВАТЬ	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM (Layout Diffusion)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
Предлагаемая полная модель	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Таблица 7: Исследование влияния отдельных компонентов (абляционный анализ) и сравнительный анализ производительности предлагаемой структуры и базовых методов. В таблице оценивается вклад отдельных компонентов путем сравнения полной предлагаемой модели с вариантами, в которых удалены определенные модули (модуль цвета, модуль когнитивного макета, многоэкранная согласованность, а также замена 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