集成认知与视觉设计原则以提升可用性与布局清晰度的自动化用户界面原型设计框架

摘要

本研究提出了一种集成认知设计原则、感知色彩建模与深度学习的自动化用户界面原型设计框架。该系统可提升界面的可访问性、布局清晰度、色彩协调性以及跨屏幕一致性，从而生成连贯且以用户为中心的界面设计方案。

摘要

有效的用户界面（UI）设计需要在视觉吸引力、认知可用性和布局一致性之间实现和谐平衡。然而，当前的自动UI生成方法主要关注视觉外观或组件检测，缺乏一个能够整合认知原理、色彩智能和结构推理的统一框架。此外，现有方法存在布局泛化能力有限、可解释性差、色彩选择静态化以及跨屏幕行为不一致等问题。针对这一问题，本文提出了一种自动化的UI原型设计框架，该框架融合了基于 Faster region-based convolutional neural network（Faster R-CNN）的组件检测与基于 CIECAM02 均匀颜色空间（CAM02-UCS）的感知驱动色彩建模，并结合认知与视觉设计原则进行增强。Faster R-CNN 用于从大规模界面数据集中识别UI组件并推断其层次结构。增强的色彩生成模块分析品牌或参考图像，利用 CAM02-UCS 实现感知均匀、协调且符合可用性要求的配色方案。这些输出进一步通过认知设计规则进行优化，包括格式塔分组原则、菲茨定律（Fitts’ law）与希克定律（Hick’s law）、基于注意力的间距设计以及视觉层次建模，从而自动生成精细化、面向任务的UI布局。在 RICO、ENRICO 和 Guo 的 UI 色彩数据集上进行的实验表明，所提出的系统实现了 92.4% 的组件检测准确率，布局清晰度和阅读顺序准确率提升了 18.7%，设计师对其生成的配色方案评价高出基准方法 24.5%，认为其更具和谐性。用户评估结果还显示，感知认知负荷降低了 31%，跨屏幕的设计一致性提高了 28%。这些结果表明，将基于深度学习的结构理解、基于感知的色彩建模与认知设计原则相结合，能够生成高效、美学一致且用户友好的UI原型。该框架建立了一种新颖的端到端方法，推动实现智能化、以人为本的自动化UI原型设计。

引言

图形用户界面（GUI）是人类与计算机系统之间通信的基本媒介，显著影响着可用性、可访问性以及整体用户体验（UX）^1,2。现代软件系统依赖直观且视觉吸引力强的界面来吸引并留住用户。传统上，用户界面设计涉及创建图形布局，随后由工程师将其转化为前端代码。然而，不同操作系统之间平台特定协议的差异需要反复调整，增加了开发的复杂性和工作量。因此，自动化的用户界面代码生成已成为一个重要研究方向，可减少人工工作量并提高开发效率。

早期的自动化用户界面生成方法将传统图像处理技术与深度学习模型相结合，用于区域检测和分类^3,4。目前，主流的图形用户界面代码生成策略采用计算机视觉技术分析用户界面图像，并将其转换为结构化的前端表示形式^5,6,7。图像处理方法依赖于手工设计的特征，而深度学习方法则从大规模数据集中提取分层表示。因此，研究人员探索了将深度学习与特定领域图像处理技术相结合的混合方法，以提高鲁棒性和准确性。

颜色是用户界面设计中的另一个关键因素，影响着用户的感知、可用性以及美学吸引力¹。当视觉输入在色调和上下文方面存在差异时，保持图像内容与用户界面配色方案之间的一致性变得具有挑战性^8,9,10。因此，大量研究聚焦于自动调色板生成和感知颜色建模。现有的颜色生成方法包括基于CIELAB颜色空间的技术¹¹。其他方法则采用聚类算法（如k-means）从图像中提取主色调¹²。结果表明，近期的研究 increasingly 采用数据驱动、基于机器学习的方法进行颜色建模。

与此同时，深度学习方法显著提升了用户界面组件的检测能力与布局理解水平。神经网络使得对移动界面的结构解析更加准确¹³。然而，这些方法主要关注检测精度，常常忽视认知可用性、布局层次结构和交互效率等更高层次的方面。针对用户界面布局生成的生成模型也已被提出^14,15，但其在保持跨屏幕一致性以及提供可解释的设计决策方面仍面临挑战¹⁶。其他方法则侧重于视觉相似性或渲染质量，但缺乏一个能够整合组件语义、色彩协调性与可用性约束的统一框架¹⁷。文本识别对于理解用户界面内容同样至关重要。诸如卷积循环神经网络（CRNNs）等技术能够准确识别界面屏幕中的复杂文本模式^18,19,20。

已有多种系统被提出用于从草图或图像生成用户界面代码。Sketch2Code 利用目标检测技术将草图转换为代码表示形式^21,22，但其对图像质量较为敏感。REDRAW 提供了一个用于数据收集和模型训练的自动化流程，结合卷积神经网络与循环神经网络以生成结构化的用户界面表示^23,24。后续研究引入了改进的评估指标，用于衡量生成的用户界面质量²⁵。较新的方法包括基于扩散模型和基于变换器的布局生成模型，例如不使用自编码器方法的扩散布局变换器、利用基于变换器的图形用户界面排列图生成界面布局，以及由大语言模型引导的用户界面布局生成方法^26,27,28。这些方法的比较概览见表1。

参考文献与核心方法	目标	优势	劣势
基于自动图像的用户界面配色方案生成：主色调提取 + CAM02-UCS 感知色彩建模¹	从参考图像中自动生成用户界面配色方案，同时优化色彩协调性与可用性。	具有坚实的感知基础（CAM02-UCS）；明确平衡了色彩和谐性与可用性（对比度与多样性）；包含基于网页的实现方式及设计师评估。	仅关注颜色/主题（不涉及布局或组件结构）；基于规则/启发式方法，而非端到端学习的用户界面合成。
采用解耦扩散模型的统一布局生成（LDGM）²⁵	实现图形场景与用户界面的统一、灵活布局生成。	在布局生成方面具备最先进的多样性与可控性；支持条件生成及多种属性类型。	除非加以约束，扩散模型输出可能出现对齐问题或细粒度布局缺陷；模型复杂度较高，推理成本较大。
无需自编码器方法的扩散布局变换器：变换器 + 扩散模型用于布局生成（无自编码器）²⁶	提升布局生成基准测试中的保真度与对齐性能（FID、对齐和重叠指标）。	更好捕捉相邻对象之间的语义关联；在FID和对齐指标上表现优异。	主要关注布局几何信息（位置、尺寸、类别），而非用户界面语义。
基于图形用户界面排列图（GUI-AGs）的变换器模型生成GUI布局²⁷	根据位置/图结构约束生成图形用户界面布局，以辅助设计人员。	图表示可捕捉关系约束；变换器支持灵活且基于约束条件的生成。	可能需要设计人员提供显式的约束图；对颜色和可用性指标关注有限。
基于用户界面语法引导的大语言模型进行用户界面布局生成：大语言模型（LLMs）+ 层次化用户界面语法²⁸	探索大语言模型在布局生成中的应用，并通过语法表示提升可解释性与控制能力。	具备高级别的可控性与可解释性；可利用大语言模型（如GPT类模型）的上下文学习能力。	尚处于早期研究阶段，实证验证有限；语法设计及在不同用户界面中的鲁棒性仍需完善

表1：现有UI色彩建模与布局生成方法的比较。 该表格总结了用户界面设计中的代表性方法，包括色彩主题生成、基于扩散的布局生成、基于变换器的方法以及由大语言模型引导的布局生成。针对每种方法，列出了其底层技术、目标、优势与局限性，重点突出了在感知建模、布局生成能力、可控性及可用性考虑方面的差异。

尽管取得了这些进展，一个关键的局限性仍然存在：目前尚无任何系统能够在单一的端到端框架内同时整合组件检测、感知色彩建模、认知设计原则以及多屏幕布局的一致性¹。现有的方法通常仅优化其中一个或两个方面——例如检测、布局或色彩——而未考虑它们之间的相互依赖关系。这种割裂状态凸显了在开发统一的、以人类为中心的自动化用户界面原型系统方面存在的重要研究空白。特别是诸如格式塔定律、菲茨定律和希克定律等认知设计原则，往往仅被概念性地讨论，而未被正式整合到计算模型中。

为解决这些局限性，本研究提出了一种端到端的自动化用户界面（UI）原型设计框架，该框架在一个统一系统中集成了组件检测、感知色彩建模和认知设计原则。该框架旨在提升布局质量、降低认知负荷、增强色彩协调性，并提高整体可用性。这些改进在RICO、ENRICO和Guo的UI色彩数据集上的实验中得到了验证，表明在单一自动化UI原型设计流程中融合结构、感知和认知因素的有效性。本研究假设，在统一框架中整合基于深度学习的组件检测、感知色彩建模和认知设计原则，将显著提升UI原型质量，优于现有方法。具体而言，假设H1提出该框架可改善布局质量，包括对齐、分组和阅读顺序；H2认为该框架可降低用户的认知负荷；H3认为感知色彩建模可提升色彩协调性与视觉和谐度；H4指出UI原型的整体可用性和美学质量将得到提升。

方案

本研究使用公开可用的数据集，不涉及人类或动物受试者。

所提出的自动化用户界面原型设计框架融合了基于深度学习的结构理解、感知均匀的颜色建模以及认知设计原则，以生成连贯且以用户为中心的界面原型。该方法首先采用在 RICO 和 ENRICO 数据集上训练的 Faster R-CNN 架构，检测用户界面组件并提取其层级关系，从而实现对多样化屏幕布局的准确解析。随后，检测到的组件由一个颜色智能模块进行处理，该模块提取基于品牌或图像的颜色线索，利用 CAM02-UCS 模型计算感知相似性，并生成和谐、具备对比度意识且符合可访问性标准的颜色调板。接着，通过认知优化引擎应用认知设计原则——包括格式塔分组法则、菲茨定律、希克定律、基于注意力的间距设计以及视觉层次约束——以优化空间布局和组件对齐。最后，布局推理层整合结构、感知和认知约束，生成在多屏幕间保持一致的用户界面原型，实现可用性、美观性与功能清晰度的平衡。该集成化流程确保了感知上的连贯性，降低了认知负荷，并遵循以人为本的设计原则。所提出方法的完整工作流程如图1所示。

图 1．所提出的自动化用户界面原型设计框架的整体架构。 该示意图展示了完整的处理流程，起始于输入的用户界面图像。首先使用 Faster R-CNN 进行组件检测，以识别界面元素。检测到的组件随后通过基于 CAM02-UCS 的感知建模进行处理，用于提取层次结构与布局信息。接着应用格式塔原理、菲茨定律、希克定律以及基于注意力的调整，进行认知优化。图中箭头表示各模块间的数据流向，最终生成用户界面原型输出。 请点击此处查看此图的放大版本。

框架概述

图1 展示了所提出的自动化用户界面（UI）原型设计框架的端到端工作流程，该流程将原始的用户界面截图转换为符合认知规律的优化原型。该过程始于输入的用户界面图像，该图像被传递至基于 Faster R-CNN 的组件检测模块。该模块可识别按钮、图标、文本框和容器等界面元素，并输出其对应的边界框和类别标签。检测到的组件随后进入层级结构与布局提取阶段。系统根据空间关系和结构模式，构建出反映用户对屏幕组织自然感知的层级布局树。该表示形式捕捉了用户界面元素之间的视觉分组和结构依赖关系。提取出的布局随后通过认知优化进行精细化处理，应用以用户为中心的设计原则，包括用于视觉聚类的格式塔分组法则、用于优化触控目标大小和可访问性的菲茨定律、用于降低决策复杂度的希克定律，以及用于改善视觉层次的基于注意力的间距设计。由此生成的布局在用户交互中更加直观、易读且高效。最后，优化后的布局结合感知色彩建模，生成连贯的用户界面原型。最终的界面在结构上准确、视觉上协调，并符合人类可用性的预期。

该框架基于 Ubuntu 22.04 使用 PyTorch 2.0 实现。实验在配备 NVIDIA RTX 4090 GPU（24 GB VRAM）的系统上进行。Faster R-CNN 模型采用在 ImageNet 数据集上预训练的 ResNet-50 作为骨干网络。训练过程使用随机梯度下降（SGD）优化器，学习率为 0.001，批量大小为 16，最多训练 60 个轮次。为防止过拟合，采用早停策略，验证集占数据总量的 20%。尽管最多训练 60 个轮次，但通常根据验证损失通过早停机制提前实现收敛。动量和权重衰减分别设置为 0.9 和 0.0005。数据增强包括归一化、随机水平翻转以及随机裁剪和调整大小。

数据集准备

为支持所提出的自动化用户界面（UI）原型设计框架，本研究采用了三个互补的数据集：ENRICO²⁹、RICO³⁰ 和 Guo 的 UI 色彩数据集¹。RICO 数据集包含从 9,700 个应用程序中收集的 66,261 张 Android 用户界面屏幕图像，为组件检测和分层布局提取提供了大规模的多样性。ENRICO 包含 1,464 张高质量的用户界面截图，经人工分类为 20 种设计模式，有助于提升结构推理和布局一致性建模的泛化能力。Guo 的 UI 色彩数据集包含 128 张经过筛选的用户界面图像，附有标注的色彩主题，用于感知色彩建模和调色板评估。然而，由于该数据集相对较小，可能在布局特征方面引入一定变异性。在本研究中，共准备了一个包含 5,128 张屏幕图像的组合数据集用于训练与评估。具体而言，从 RICO 中选取约 4,000 张图像用于训练 Faster R-CNN 模型以实现组件检测，从 ENRICO 中选取 1,000 张图像用于布局模式学习和结构一致性建模，从 Guo 的数据集中使用全部 128 张图像用于色彩评估任务。所有图像均被标准化为 480 × 800 像素分辨率，转换至统一的 sRGB 色彩空间，并使用标准化的边界框和分层元数据重新标注，以确保各数据集之间的兼容性。表 2 提供了本研究所用数据集的概览。RICO 数据集支持用户界面组件的大规模检测与结构分析，而 ENRICO 则增强了模型识别布局模式及实现跨屏幕一致性的能力。尽管规模较小，Guo 的 UI 色彩数据集在评估感知色彩和谐性与对比度建模方面发挥着关键作用。这些数据集共同为所提出的自动化用户界面原型设计框架的训练、验证与评估提供了全面且均衡的基础。

数据集	可用图像总数	研究中使用的图像数量	在所提出框架中的用途
RICO Dataset30	66,261	4,000	UI 组件检测、结构布局提取
ENRICO Dataset29	1,464	1,000	设计模式学习、布局一致性建模
Guo’s UI Color Dataset1	128	128	色彩主题提取、感知色彩评估
合计	67,853	5,128	用于检测、布局和色彩建模的综合数据集

表2：所提出框架中使用数据集的汇总。 该表格列出了用于训练和评估的数据集，包括RICO、ENRICO和Guo的UI颜色数据集。表格报告了可用图像的总数、本研究中使用的子集，以及每个数据集在所提出框架中用于组件检测、布局建模和感知颜色分析的具体作用。

采用分层抽样策略，以保持 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 和 Guo 的 UI 色彩数据集共同支持所提出的自动化 UI 原型设计框架的三个核心功能组件：组件检测、布局建模和感知色彩优化。RICO 数据集包含超过 66,000 个移动 UI 界面的大规模集合，主要用于训练组件检测模块。其多样性使 Faster R-CNN 模型能够学习按钮、图像和文本框等常见 UI 元素在广泛应用中的鲁棒表示，从而确保在不同设计条件下对 UI 组件的准确检测与定位。ENRICO 数据集提供高质量、带有模式标注的 UI 界面，用于学习结构关系和布局模式，使系统能够理解组件间的关联、层次结构以及常见的设计模板。该数据集在建模布局结构和实现多界面一致性方面发挥关键作用，使框架能够生成符合既定设计规范的布局。相比之下，Guo 的 UI 色彩数据集专门用于感知与认知色彩建模。与 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 像素分辨率。通过预定义的阈值调整边界框，以过滤无关的标注。为实现数据集间的一致性，所有用户界面元素均使用 LabelImg 标注工具进行人工标注。在标注前建立了预定义的分类体系，将用户界面元素划分为按钮、文本、图像、图标和容器等类别。对于边界框表示，采用统一的坐标系，并根据元素之间的空间关系及其在布局树中的父子关联构建层次化信息。此外，制定了标注规范，以确保元素标注的一致性、重叠组件的正确处理，以及在 RICO、ENRICO 和 Guo 数据集中统一执行最小尺寸阈值。

组件检测训练和布局模式提取的详细数学公式见补充文件1。

使用带动量为0.9、权重衰减为0.0005的随机梯度下降（SGD）方法对 Faster R-CNN 模型进行训练。初始学习率设为0.001，并根据验证集性能采用步进衰减策略进行调整。训练最多进行60个epoch，批量大小为16。为防止过拟合，采用早停策略，验证集占训练数据的20%。

映射函数 f(.) 以检测到的用户界面元素作为输入，生成分层布局表示作为输出。该函数根据空间距离和对齐准则计算用户界面元素之间的邻接关系，并构建邻接矩阵以表示这些关系。随后应用聚类算法（例如 DBSCAN）对相关组件进行分组。最后，根据父子关系将聚类后的元素组织成分层结构，形成结构化的布局表示。

颜色和谐建模的详细公式以及统一优化目标详见补充文件1。

该目标函数从数学上形式化地整合了结构检测、布局推理和感知色彩建模，确保框架的各个组件共同作用，以生成连贯且以用户为中心的用户界面原型。框架中每个组件的优化以模块化方式分别进行。组件检测模块采用随机梯度下降法（SGD）进行训练，而统一目标函数的联合优化则使用Adam优化器。综合目标函数用于指导整个系统的性能。在联合优化阶段，采用学习率为0.001、批量大小为16的Adam优化器最小化目标函数。训练最多进行60个epoch，当验证损失在连续五个epoch内的变化小于10⁻⁴时，启用早停机制。

使用 Faster R-CNN 进行组件检测

该框架采用 Faster R-CNN 实现对用户界面（UI）组件的自动检测，包括按钮、图标、文本框、图像和容器。Faster R-CNN 非常适用于此任务，因为它兼具高目标检测精度和高效的区域建议生成能力，这对于处理包含密集元素的复杂 UI 布局至关重要。该模型使用在 ImageNet 数据集上预训练的 ResNet-50 作为主干网络，从每个 UI 界面中提取卷积特征图。在训练过程中，早期层被冻结以保留通用视觉特征，而较高层（conv4_x 和 conv5_x）则针对 UI 特定组件检测进行微调。这些特征图能够捕捉视觉结构、边缘、纹理以及组件边界。在检测阶段，区域建议网络（RPN）识别可能包含 UI 组件的候选区域（锚框）。锚框通过多种尺度（128、256 和 512）和宽高比（1:1、1:2 和 2:1）定义，以适应不同尺寸的 UI 元素。在训练过程中，与真实标注框的交并比（IoU）大于 0.7 的锚框被标记为正样本，IoU 小于 0.3 的标记为负样本；介于两者之间的锚框则被忽略。每个锚框被赋予一个表示组件存在的概率。随后应用非极大值抑制（NMS）以去除冗余和重叠的建议框，确保在杂乱的界面中也能高效定位有意义的 UI 元素。在生成候选区域后，每个建议框被分类到预定义的组件类别中，并对其边界框坐标进行优化。通过感兴趣区域（ROI）对齐操作为每个建议框提取固定大小的特征表示，随后由全连接层进行分类和回归处理。分类分支输出类别概率，回归分支则预测精确的边界框坐标。整个 Faster R-CNN 模型通过优化一个联合损失函数实现端到端训练，该函数结合了 RPN 损失和最终检测损失。这使得系统不仅能够准确识别 UI 组件，还能在多样化的界面结构中精确定位它们。关于 Faster R-CNN 组件检测的详细描述，包括 RPN 阶段、ROI 分类、边界框优化以及最终优化目标，详见补充文件 1。

算法 S1 提供了详细的组件检测与结构提取工作流程（补充文件 1）。该流程描述了从原始屏幕图像中自动检测用户界面（UI）组件并提取其结构的完整过程。输入图像首先经过预处理，并通过卷积神经网络（CNN）主干网络提取深层视觉特征。这些特征由区域建议网络（RPN）用于生成候选边界框，随后通过分类与回归进一步优化。非极大值抑制（NMS）用于剔除冗余检测结果，以确保定位准确。在完成检测后，基于空间邻近性，采用基于密度的带噪声应用空间聚类（DBSCAN）方法对组件进行分组。该聚类步骤支持构建分层的 UI 树，以捕捉组件间的父子关系及逻辑分组。这种分层表示为后续的布局分析与界面理解奠定了基础。图 2 展示了在移动设备 UI 屏幕上应用 Faster R-CNN 进行组件检测的过程。输入界面（左侧）包含按钮和文本块等 UI 元素，这些元素被自动框定在边界框内。这些被检测到的区域随后被分类为不同的组件类别（例如“按钮”和“文本”），并通过标注的连接关系加以标识。Faster R-CNN 检测模块（右侧）优化边界框坐标，分配语义标签，并输出结构化的组件级信息。该步骤通过提供准确且具有语义意义的 UI 组件表示，为后续流程（包括布局提取、认知优化和 UI 原型生成）提供了关键基础。

图 2。使用 Faster R-CNN 检测用户界面元素的组件。 该图展示了从输入界面截图中检测用户界面（UI）组件的过程。通过边界框识别感兴趣区域，并使用 Faster R-CNN 对按钮和文本框等元素进行分类。箭头表示检测到的组件与其对应语义标签之间的映射关系。请点击此处查看该图的高清版本。

布局模式提取与分层建模

使用 Faster R-CNN 进行组件检测后，每个用户界面元素由一个边界框表示。然而，仅凭这些边界框无法传达元素在界面中的结构化组织方式，例如哪些元素属于页眉、导航栏或内容分组区域。为解决这一局限性，将检测到的组件转换为一个逻辑化的用户界面树，其中每个组件被视为一个节点，功能上或视觉上相关的组件被归入共同的父节点之下。为了识别有意义的布局分组，采用 DBSCAN 或层次聚类等聚类技术。这些方法通过分析组件之间的空间邻近性和对齐模式，来检测用户界面元素之间的关联关系。系统以类似于人类设计实践的方式，学习识别常见的结构模式，如页眉、页脚、网格布局和内容区块。在完成分组后，进一步分析包括对齐方式、网格结构和阅读顺序在内的附加结构性属性，以构建全面的布局表示。例如，等宽列对齐的组件可能表示基于卡片的布局，而垂直堆叠的元素则可能表示基于表单或信息流的界面。通过整合聚类、空间推理和对齐规则，该框架构建出一个分层的用户界面树，既捕捉视觉上的分组关系，也体现功能上的关联性。这种分层表示为后续的布局优化和多屏幕一致性建模奠定了基础，使系统能够生成结构清晰、连贯且以用户为中心的界面设计。

空间距离和对齐相似性的详细公式见补充文件1。

用于布局分组的聚类（DBSCAN）

为了识别布局组，应用了DBSCAN方法。DBSCAN使用两个参数：（1）ε = 相邻组件之间的最大距离；（2）形成簇所需的最小组件数量。在本分析中，DBSCAN参数根据归一化的UI分辨率（480 × 800像素）通过经验选定。邻域距离参数设置为ε = 50像素，以捕捉相邻UI组件之间的空间邻近性。形成簇所需的最小点数设置为MinPts = 3，以避免形成无意义或虚假的UI组件分组。

详细的逻辑UI树构建公式见补充文件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指南评估亮度对比度比值，以满足可访问性要求。最终通过优化一个综合目标函数获得最终调色板，该函数平衡了感知间距、对比度需求以及色彩和谐性约束。此方法确保生成的用户界面配色方案不仅视觉上美观，而且具备良好的可读性、可访问性及感知一致性。

认知设计优化

认知设计优化可确保自动生成的用户界面原型不仅在视觉上保持一致，而且易于理解与交互。该模块整合了关键的认知设计原则，包括格式塔原则、费茨定律和希克定律，以指导用户界面组件的排列、分组和间距设置。认知设计优化的详细数学公式见补充文件1。

综合认知优化目标

整合认知优化目标的数学表达式见补充文件1。 表示视觉分组、交互效率和决策复杂性重要性的系数分别用α、β和γ表示。在本研究中，α、β和γ的数值通过验证数据集经验确定。在本实验中，各系数设置如下：α = 0.5，β = 0.3，γ = 0.2。该配置在视觉分组、交互效率与决策简洁性之间实现了有效平衡。

多屏一致性与用户界面生成

多屏幕一致性建模确保应用程序内的不同屏幕共享一致的视觉特征、结构布局和交互模式。当用户在各屏幕间导航时，会逐渐形成对元素位置、排版、间距和视觉层次的预期。为满足这些预期，系统利用从 RICO 和 ENRICO 数据集中提取的模板，分析跨屏幕的模式。这些模板捕捉了常见的用户界面结构，例如首页–详情布局、列表–详情模式、多步骤表单以及仪表盘流程。通过比较组件的位置和分组行为，系统构建出跨屏幕的结构特征，识别出哪些元素应保持一致，哪些可以变化。在识别出结构模式后，框架将强制执行排版比例、间距比例、网格布局和导航锚点的一致性。例如，标题栏保持统一高度，主按钮保持尺寸和对齐方式一致，内容区块遵循可预测的视觉顺序。这一目标通过布局正则化过程实现，该过程依据全局结构约束评估每个屏幕。若某屏幕偏离学习所得的模板（如内边距不一致或标题错位），系统将自动调整布局以恢复一致性。这些修正有助于确保用户体验的流畅性，并降低跨屏幕切换时的认知负担。该框架进一步分析屏幕间的导航图，以保持交互流程的一致性。系统识别并强制执行常见的导航模式，包括前进/后退切换、标签页导航和多步骤工作流。每一次切换均经过验证，以确保与用户的认知模型一致，从而提升可用性并减少困惑。因此，多屏幕一致性模型有效减少了视觉干扰，增强了界面的熟悉感，促进统一的交互体验。

多屏一致性和用户界面生成的详细数学公式见补充文件1。

最后，渲染引擎会生成诸如 SVG 线框图、HTML/CSS 原型或基于像素的 UI 模型等格式的可视化输出。生成的用户界面屏幕具有正确的阅读顺序、协调的色彩关系、精确的网格对齐，以及在多个屏幕间保持一致的视觉层次结构。

算法 S3 提供了认知-视觉布局优化与多屏幕一致性的完整工作流程（补充文件 1）。该算法描述了用于生成用户友好型用户界面布局的集成化认知与结构优化过程。该方法在统一的优化框架内融合了知觉分组（格式塔原则）、交互效率（费茨定律）和决策简洁性（希克定律）。首先，评估组件之间的空间关系以建立知觉上的分组；随后通过调整组件的尺寸和位置来优化交互效率，同时通过限制向用户呈现的选项数量来控制决策复杂度。此外，该算法通过将每个屏幕与已学习的布局模板对齐，强制实现多屏幕间的一致性，从而确保在字体、间距和结构组织上的统一性。接着，一个多目标优化函数通过平衡对齐方式、间距和认知负荷，进一步优化布局，最终生成在视觉上连贯且认知上高效的界面。总体而言，该算法确保生成的多屏幕布局在视觉一致性、可用性和知觉清晰度方面均保持较高水平。

结果

采用来自三个来源的共计5,128个用户界面（UI）屏幕的整合数据集，对所提出的自动化UI原型设计框架进行了评估：其中包括4,000张RICO图像、1,000个ENRICO屏幕，以及来自Guo的UI颜色数据集的128个带颜色标注的UI样本。该混合数据集为评估组件检测准确性、布局结构清晰度、多屏幕一致性以及感知色彩和谐性提供了均衡的基准。

实验结果表明，基于 Faster R-CNN 的检测模型实现了 92.4% 的组件检测准确率，并在多种移动 UI 风格中表现出良好的泛化能力。此外，引入 ENRICO 模式标注可增强布局推理能力，使布局清晰度提升 18.7%，并更有效地保持阅读顺序。在色彩评估实验中，基于 CAM02-UCS 的色彩建模模块生成的配色方案在设计师评估中被认为和谐度提高了 24.5%，且相较于传统的基于 RGB 和 LAB 的配色生成方法，具有更高的感知均匀性。此外，多屏幕一致性建模在跨屏幕对齐和字体一致性方面实现了 28% 的提升。包含 30 名参与者的用户研究表明，使用所提出的系统生成的原型进行交互时，感知认知负荷降低了 31%。综上所述，这些结果表明，将组件检测、...

讨论

研究结果表明，在可用性、结构组织和感知质量方面均具有统计学上的显著改善（p < 0.05），证实了将认知设计原则融入自动化用户界面原型生成的有效性。与主要依赖视觉检测或基于规则启发式方法的传统用户界面生成系统不同，所提出的框架在整个用户界面重构过程中集成了格式塔分组、层次建模、间距约束以及感知可读性。在NASA-TLX、SUS和SET中的改善进一步证实了认知负荷的统计学显著降低（NASA-TLX，p.< 0.01）。这些结果表明，自动化用户界面生成应超越视觉重建准确性的范畴，融入以用户为中心的设计知识，以实现实际可用性。此外，所有提出的研究假设（H1–H4）均得到了实验结果的实证支持。

除了布局优化之外，基于 CAM02-UCS 的感知色彩建模的引入在色彩和谐性、可访问性及感知稳定性方面实现了统计学上显著的提升（p < 0.05），这体现在 ΔE、CHI、CDS 和对比度比值的改善上。与以往诸如基于图像的自动化用户界面（UI）配色方案生成等研究相比——这些研究主要关注色彩优化——本文提出的方法框架在一个统一的流程中同时集成了色彩与布局的优化...

材料

本文使用的材料清单

姓名	公司	目录编号	评论
中央处理器（CPU）	AMD Ryzen 9 7950X（16核，32线程，4.5–5.7 GHz）	超威半导体公司（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 GPU	24 GB GDDR6X 显卡	英伟达公司（NVIDIA Corporation），美国加利福尼亚州圣克拉拉	RTX 4090
NumPy	版本 1.24	NumPy 开发者	v1.24.0
OpenCV	版本 4.8	OpenCV 基金会	v4.8.0
PyTorch	版本 2.0	PyTorch 基金会（Meta AI）	v2.0.0
ResNet-50 with FPN	带特征金字塔网络的骨干卷积神经网络	微软研究院 / Detectron2	ResNet-50-FPN
Scikit-learn	版本 1.3	Scikit-learn 开发者	v1.3.0
SciPy	版本 1.10	SciPy 社区	v1.10.0
系统内存（RAM）	64 GB DDR5	海盗船 / 金士顿（或同等产品）	DDR5 64GB 套装
Ubuntu 操作系统	版本 22.04 LTS	Canonical Ltd.，英国	Ubuntu 22.04 LTS