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

摘要

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

摘要

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

该框架基于 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。数据增强包括归一化、随机水平翻转以及随机裁剪和调整大小。

数据集准备

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

数据集	可用图像总数	研究中使用的图像数	在所提出框架中的用途
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 的用户界面颜色数据集共同支持所提出的自动化用户界面原型设计框架的三个核心功能模块：组件检测、布局建模和感知色彩优化。RICO 数据集包含超过 66,000 个移动用户界面屏幕的大规模集合，主要用于训练组件检测模块。其多样性使 Faster R-CNN 模型能够学习按钮、图像和文本框等常见用户界面元素在各类应用中的鲁棒表示，从而确保在不同设计条件下对用户界面组件进行准确的检测与定位。ENRICO 数据集提供高质量、带有模式标注的用户界面屏幕，用于学习结构关系和布局模式，使系统能够理解组件间的关联、层次结构以及常见的设计模板。该数据集在建模布局结构和实现多屏幕一致性方面发挥关键作用，使框架能够生成符合既定设计规范的布局。相比之下，Guo 的用户界面颜色数据集专门用于感知与认知层面的色彩建模。与侧重于结构特性的 RICO 和 ENRICO 不同，该数据集包含经过精选并标注色彩主题的用户界面图像，这些标注用于训练色彩提取和和谐性评估模块。通过将色彩关系映射到 CAM02-UCS 等感知色彩空间，框架能够生成在对比度、可访问性和美学协调性之间达到平衡的配色方案。这些数据集共同构成一个集成化流程：RICO 支持组件检测，ENRICO 实现布局模式理解与结构一致性，Guo 的数据集促进感知色彩优化。这种整合确保所生成的用户界面原型在结构上准确、视觉上和谐，并在认知层面实现优化。

归一化处理使用均值 [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个训练轮次（epochs），当验证损失在连续五个训练轮次内的变化小于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 展示了在移动设备用户界面上应用 Faster R-CNN 进行组件检测的过程。输入界面（左侧）包含按钮和文本块等 UI 元素，这些元素被自动框选在边界框内。检测到的区域随后被分类为不同的组件类别（例如 Button 和 Text），并通过标注的连接关系加以标识。Faster R-CNN 检测模块（右侧）进一步优化边界框坐标，分配语义标签，并输出结构化的组件级信息。此步骤通过提供准确且具有语义意义的 UI 组件表示，为后续流程（包括布局提取、认知优化和 UI 原型生成）提供了关键基础。

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

布局模式提取与分层建模

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

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

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

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

详细的逻辑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。 表示视觉分组、交互效率和决策复杂性重要性的系数分别用 alpha、beta 和 gamma 表示。在本研究中，alpha、beta 和 gamma 的数值通过验证数据集经验确定。在当前实验中，系数设置如下：α = 0.5，β = 0.3，γ = 0.2。该配置在视觉分组、交互效率和决策简洁性之间实现了有效平衡。

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

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

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

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

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

结果

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

实验结果表明，基于 Faster R-CNN 的检测模型在组件检测准确率方面达到 92.4%，并在多种移动用户界面风格中表现出良好的泛化能力。此外，引入 ENRICO 模式标注增强了布局推理能力，使布局清晰度提升了 18.7%，并更好地保持了阅读顺序。在色彩评估实验中，基于 CAM02-UCS 的色彩建模模块生成的配色方案在设计师评估中和谐度提高了 24.5%，且相较于传统的基于 RGB 和 LAB 的配色生成方法，具有更高的感知均匀性。此外，多屏幕一致性建模在跨屏幕对齐和字体一致性方面实现了 28% 的提升。包含 30 名参与者的用户研究表明，使用所提出系统生成的原型进行交互时，感知认知负荷降低了 31%。综合来看，这些结果表明，结合组件检测、感知色彩建模与认知优化，能够生成不仅结构准确，而且视觉连贯、认知高效的用户界面原型。表 3 列出了用于评估所提出的用户界面原型框架的模拟环境与技术设置。Faster R-CNN 和布局一致性模块的计算密集型训练过程由高性能的 NVIDIA RTX 4090 GPU 提供支持。所有实验均在 Ubuntu 22.04 环境中进行，采用 PyTorch 2.0 实现深度学习模型。

参数	配置
硬件	NVIDIA RTX 4090 GPU (24 GB), Intel i9 处理器, 64 GB RAM
操作系统	Ubuntu 22.04 LTS
深度学习框架	PyTorch 2.0
Faster R-CNN 主干网络	ResNet-50 + FPN
图像分辨率	480 × 800（在所有数据集上归一化）
训练批次大小	8
优化器	AdamW (LR = 1e−4, 权重衰减 = 0.01)
训练轮数	40
颜色建模空间	CAM02-UCS
调色板提取聚类方法	K-means (k = 5)
布局聚类	DBSCAN (ε = 20, min_samples = 3)

表3：所提出框架的实现参数与实验配置。 该表格总结了用于模型训练与评估的硬件和软件设置，包括计算资源、操作系统、深度学习框架、模型架构、图像分辨率、训练参数、优化策略、颜色建模空间，以及用于调色板提取和布局分组的聚类方法。

Faster R-CNN 架构采用带有 FPN 的 ResNet-50 主干网络，用于检测多种细粒度的用户界面组件。所有用户界面图像在处理前均被统一调整为 480 × 800 像素。训练过程共进行 60 个训练周期，使用 SGD 优化器，批量大小为 16，以确保稳定的收敛性。色彩调板生成器采用 CAM02-UCS 空间结合 K-means 聚类算法，而结构布局聚类则使用 DBSCAN 算法。这些技术设置确保了生成的用户界面结果具有可重复性、稳定性以及高保真度。为了全面评估所提出的自动化用户界面原型框架，采用了四类评估指标：

i) 组件检测性能，通过精确率、召回率、F1分数、交并比（IoU）和平均精度均值（mAP）进行分析，用以量化 Faster R-CNN 模型在 RICO 和 ENRICO 数据集上识别用户界面组件的准确性；

ii) 通过设计模式约束得出的对齐误差（AE）、分组准确性、阅读顺序正确性以及跨屏幕一致性评分，来衡量布局清晰度和结构一致性；

iii) 感知色彩质量，通过 CAM02-UCS 感知距离（ΔE_UCS）、WCAG 2.1 对比度比值、多样性指数以及受郭氏用户界面色彩评估框架启发的色彩和谐评分进行评估；

iv) 以用户为中心的认知效率指标，包括通过美国国家航空航天局任务负荷指数（NASA-TLX）测量的认知负荷、美学连贯性评分以及任务完成效率。

这些指标不仅能够从检测准确性的角度评估该框架，还能从感知协调性、可用性质量以及认知体验方面进行评价。

组分检测指标

精确率（precision）描述了模型在预测用户界面组件时的准确性，且不会产生误报。高精确率意味着大多数预测的边界框都对应有效的用户界面元素。召回率（recall）衡量模型识别屏幕上所有相关用户界面组件的能力。高召回率表明模型能够成功检测到大部分真实存在的组件。F1分数定义为精确率和召回率的调和平均值，提供了一种平衡的评估方式，在用户界面组件在数据集中分布不均时尤为有用。

交并比（IoU）指标用于衡量预测边界框与真实边界框之间的重叠程度。在目标检测任务中，通常采用0.5和0.75的IoU阈值来表示中等和严格的评估条件。平均精度均值（mAP）则综合多个IoU阈值下的检测性能进行总结。mAP@0.5:0.95指标通过在0.5至0.95范围内以0.05为步长的多个阈值下对精度取平均，提供了更为稳健的评估结果，因此被广泛接受为目标检测的标准基准。

在三个数据集上的检测结果表明，所提出的组件检测模块表现稳定且优异。定量结果如表4所示。RICO数据集取得了最高的性能，精确率为0.91，召回率为0.88，F1分数为0.89，这得益于其大规模且多样化的用户界面组件标注数据。ENRICO数据集得分略低，原因是其结构更为简化，且标注的组件类型较少。Guo数据集的F1分数最低（0.81），可能由于其视觉变化更大，标准化布局模式较少，导致检测更具挑战性。总体而言，这些结果证实了该模型在不同用户界面设计风格和数据集特征下均能保持稳健的组件检测性能。

数据集	精确率	召回率	F1分数
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

表4：在不同数据集上的组件检测性能。 该表格展示了在RICO、ENRICO和Guo数据集上进行用户界面组件检测的精确率、召回率和F1分数，体现了检测模型的有效性。

图3展示了该模型在RICO、ENRICO和Guo数据集上于IoU阈值0.5和0.75下的性能表现。如预期所示，由于IoU 0.5的重叠要求更为宽松，其mAP值更高。RICO数据集始终报告最高的mAP值（IoU 0.5时为0.89，IoU 0.75时为0.78），反映出其标注的丰富性和一致性。ENRICO数据集的数值略低，而Guo数据集由于布局风格和组件密度的变化更大，报告的分数最低。随着IoU阈值的提高，mAP值呈现下降趋势，表明数据集的复杂性直接影响检测的鲁棒性。

图3. 在交并比（IoU）阈值为0.5和0.75时，各数据集上的平均精度均值（mAP）。 该折线图比较了RICO、ENRICO和Guo数据集上组件检测的性能。横轴表示数据集，纵轴显示mAP值。两条曲线分别对应IoU阈值0.5和0.75，展示了在不同检测严格程度下的性能变化。请点击此处查看该图的放大版本。

图4展示了每个数据集在IoU(0.5:0.95)范围内的mAP，从而在十个IoU阈值下对检测性能进行了更全面的评估。结果显示出从RICO（0.61）到ENRICO（0.57）再到Guo（0.52）的明显下降趋势，证实了所提出的检测模型在规模更大、结构更清晰的数据集上具有最佳的泛化能力。这一更为严格的平均指标突显了在单阈值评估中可能不明显的细微性能下降。这些发现表明，尽管该模型在所有数据集上均表现良好，但在严格的COCO风格评估下，布局的多样性和组件的可变性仍带来了额外的挑战。检测结果如图3和图4所示，提供了在不同IoU水平下mAP的定量比较。

图4. 在交并比（IoU）阈值从0.5到0.95范围内，各数据集上的平均精度均值（mAP）。 该折线图展示了使用在IoU阈值范围从0.5至0.95上取平均的mAP指标，在RICO、ENRICO和Guo数据集上的组件检测性能。横轴表示数据集，纵轴表示在0–1范围内报告的相应mAP值，反映模型在不同检测阈值下的性能表现。请点击此处查看此图的放大版本。

布局质量度量指标

使用AE、分组准确率（GA）和阅读顺序准确率（ROA）来评估布局质量，这些指标共同衡量生成的用户界面布局在结构正确性、感知组织性和认知可读性方面的表现。

校准误差。

AE（基于像素的偏差）用于衡量用户界面元素与理想对齐线（如左侧、右侧、顶部或基线参考线）的对齐程度。较低的 AE 值表明元素排列更一致，视觉失真最小，从而提升可读性和整体设计的清晰度。该指标在评估认知布局优化方面尤为重要，因为错位会破坏视觉流，增加感知复杂性。图5展示了在 RICO、ENRICO 和 Guo 数据集上测得的 AE 值，以元素与理想对齐线之间的平均像素偏差来表示。结果显示，RICO 的 AE 值最低（4.2 px），表明该数据集中的用户界面组件具有更一致的结构模式，使模型更容易实现对齐。ENRICO 的对齐偏差为中等水平（6.1 px），反映出其屏幕布局兼具良好结构与多样性。Guo 数据集的 AE 值最高（7.4 px），这是由于其组件位置变化更大、布局结构非标准化，给基于对齐的优化带来挑战。总体而言，这些结果表明，尽管布局复杂性增加，该模型在不同数据集上仍保持了较强的对齐准确性。

图5. 不同数据集间的比对误差。 该图显示了不同数据集间的比对误差；数值越低表示比对效果越好。请点击此处查看此图的放大版本。

分组准确率（GA）。

分组准确率（GA）用于量化模型对相关用户界面组件进行分组的有效性，例如基于格式塔原则（如接近性、相似性和连续性）进行分组。较高的分组准确率表明模型能够保持用户界面元素的预期结构，使用户能够更自然地理解界面。该指标特别适用于评估布局优化模块是否成功地将内容组织为有意义的视觉组。图6展示了所提出的框架在三个数据集上实现的GA分布情况。ENRICO数据集表现出最高的中位数GA值和最小的四分位距，表明其分组性能稳定且一致，这归因于该数据集具有明确定义且带有模式标签的布局。RICO数据集显示出中等水平的分组准确率，但变异性较高，可能与其更大的多样性和布局复杂性有关。Guo UI Color数据集的分组准确率较低，因为其样本在视觉上异质性较强，且较少关注结构化布局。总体而言，结果表明认知布局优化模块在不同数据集上均表现出可靠的性能，在结构一致性较高的数据上实现了最佳的分组效果。

图6. 不同数据集上的分组准确率分布。 箱形图展示了基于格式塔原则在RICO、ENRICO和Guo的UI颜色数据集上的分组准确率。箱体表示四分位距，中央线条表示中位数，须线表示数值范围。x轴表示数据集，y轴表示分组准确率得分。样本量n=5128个用户界面屏幕（RICO：4000个，ENRICO：1000个，Guo：128个）。请点击此处查看该图的放大版本。

阅读顺序准确性（ROA）。

阅读顺序准确率（ROA）用于衡量模型预测用户界面（UI）屏幕自然阅读流向的准确性，通常遵循从上到下、从左到右的模式。保持正确的阅读顺序对于可用性、导航清晰性以及与既定设计规范的一致性至关重要。较高的ROA表明系统能够更好地保留用户预期的认知扫描模式。图7展示了RICO、ENRICO和Guo数据集在不同评估阶段的ROA表现。ENRICO由于其规则且具有模式导向的布局结构，能够更准确地预测类人阅读序列，因此在各项指标中始终取得最高的ROA。RICO表现中等，略有波动，反映出其更高的多样性及真实场景中的复杂性。Guo数据集的ROA最低，因其许多界面视觉内容丰富，但缺乏明确的阅读层级结构。总体而言，这些结果表明，所提出的认知布局优化模块在结构化数据集上表现最为可靠，同时在多样化的用户界面设计中仍能保持稳定的阅读顺序预测能力。

图7. 多个数据集在不同评估阶段的阅读顺序准确率。 折线图展示了RICO、ENRICO和Guo的用户界面颜色数据集在各个评估步骤中的阅读顺序准确率。x轴表示评估阶段，y轴表示阅读顺序准确率。每条曲线对应一个数据集，显示了在连续评估阶段中视觉流保持情况的变化。评估阶段代表了所提出框架的逐步优化过程。请点击此处查看该图的放大版本。

布局一致性评分（LCS）

布局一致性评分（LCS）用于衡量在同一应用程序内多个界面之间生成的用户界面（UI）布局保持一致的程度。这包括间距、对齐规则、排版区域以及分组模式的一致性。较高的评分表明跨界面的一致性更优，从而带来更统一且直观的用户体验。图8展示了在RICO、ENRICO和Guo的UI颜色数据集上多个评估阶段测得的LCS。ENRICO数据集始终取得最高的LCS值，这归因于其具有模式标注且结构统一的UI界面，有助于模型更稳定地学习跨界面一致性。相比之下，RICO数据集表现出中等但持续提升的一致性，这得益于模型在高度多样化的UI布局中具备良好的泛化能力。如预期所示，Guo数据集的LCS值最低，因其主要关注颜色特征而非结构布局，导致跨多界面的一致性更难实现。总体而言，这些结果表明，所提出的跨界面一致性模块在面向模式的数据集上表现最佳，同时在所有数据集上均能带来可量化的性能提升。

图8. 多个数据集在不同评估阶段的布局一致性得分。 折线图展示了RICO、ENRICO和Guo的UI颜色数据集在不同评估阶段的布局一致性得分。横轴表示评估阶段，纵轴表示布局一致性得分。每条曲线对应一个数据集，显示了生成界面在连续评估阶段中结构连贯性的提升情况。请点击此处查看该图的放大版本。

色彩质量度量指标

生成的UI颜色主题通过五个基于CAM02-UCS的感知度量指标进行评估：ΔE（感知色差），用于量化调色板中颜色之间的感知均匀性；对比度比值（基于WCAG 2.1），用于评估前景与背景元素之间的可读性；色彩和谐指数（CHI），用于衡量不同色调之间的美学兼容性；色彩多样性得分（CDS），反映感知色彩空间内的变化程度；以及色彩显著性得分（CPS），用于评估调色板内颜色的平衡性与主导性。这些指标共同提供了对美学质量与以可用性为导向的色彩性能的全面评估。结果表明，所提出的方法实现了4.12的较低ΔE值，表明颜色间的感知均匀性得到提升。6.21的对比度比值符合无障碍访问标准，确保了更高的可读性。表5展示了所提出的颜色建模模块与基线方法之间的定量比较。CHI从0.61提升至0.83，表明色彩过渡的美学一致性有所改善。此外，CDS提升了超过50%，证明生成的调色板在不引入视觉杂乱的前提下保持了更丰富的色彩变化。较高的CPS值表明主色调分布均衡，避免了单一色调的过度饱和。总体而言，这些结果验证了基于CAM02-UCS的颜色建模模块在生成和谐、易读且感知优化的UI配色方案方面的有效性。

度量	定义	建议的方法	基线1	改善率（%）
ΔE (CAM02-UCS)	感知色差	4.12	7.85	47.5% 降低
对比度比率（WCAG）	FG–BG 对的可读性	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：所提出方法与基线方法在颜色质量指标上的定量比较。 该表格展示了颜色质量的评估指标，包括感知色差（CAM02-UCS中的ΔE）、对比度比值（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 指标通过测量心理需求、努力程度和挫败感等因素来量化心理工作负荷。较低的得分表明认知负荷降低，交互更加轻松。所提出的框架在所有数据集上 consistently 导致更低的 NASA-TLX 得分，表明心理努力减少。这一改进可归因于认知设计原则的整合，包括格式塔分组、优化的间距以及增强的视觉层次，这些因素共同促进了更直观的导航体验。SUS 指标提供了一个标准化的可用性评分，范围从 0 到 100，其中较高的数值表示可用性和清晰度的提升。与基线方法相比，所提出的框架获得了更高的 SUS 得分，反映出在结构布局和色彩清晰度方面的改进。增强的对齐方式、间距和导航流程使得用户感知到界面更加直观且功能上更具一致性。AHS 采用 7 点李克特量表进行测量，用于评估感知的视觉吸引力和色彩和谐性。使用基于 CAM02-UCS 的色彩建模模块生成的界面获得了更高的 AHS 值，表明色彩过渡更平滑，配色方案在视觉上更加平衡。参与者 consistently 更偏好这些界面，原因在于对比度提升、色调一致性增强以及视觉杂乱减少，突显了感知色彩建模在用户界面设计中的重要性。SET 衡量用户在视觉搜索任务中定位目标用户界面元素所需的时间。较低的 SET 值表明视觉组织和层次结构更优。所提出的框架在所有数据集上显著降低了 SET，证明整合格式塔分组、注意力引导的间距以及优化的布局结构能够实现更快、更高效的交互。CSCR 指标评估多个屏幕之间用户界面设计的一致性。较高的得分表示在布局、色彩和结构组织方面具有更好的连续性。所提出的框架获得了更高的 CSCR 值，反映出多屏一致性模块在维持稳定的配色方案、间距和层次结构方面的有效性。

图9展示了RICO、ENRICO和Guo数据集在所有评估指标（NASA-TLX、SUS、AHS、SET和CSCR）上的对比用户研究结果。总体而言，所有评估指标均表现出一致的提升。值得注意的是，Guo数据集在以用户为中心的各项指标上表现更优，包括更低的认知负荷（NASA-TLX）、更高的可用性（SUS）、更佳的美学协调性（AHS）、更短的搜索效率时间（SET）以及更高的跨屏幕一致性（CSCR）。然而，这些结果需要谨慎解读。Guo数据集在用户体验指标上的改善主要归因于其较强的色彩一致性以及相对简单的视觉构成，而非更优的结构布局质量。尽管用户认为这些界面在视觉上更协调且认知负担更小，但此前的结果表明，Guo数据集在对齐、分组和阅读顺序方面表现较差。这凸显了用户界面设计中感知因素与结构因素之间的重要区别。虽然色彩协调等感知属性能显著提升用户体验，但结构准确性和布局一致性对于功能可用性仍然至关重要。因此，理想的用户界面设计需要在感知和谐与结构正确性之间取得平衡。

图9. 不同数据集上用户研究指标的比较。 分组柱状图比较了RICO、ENRICO和Guo的用户界面颜色数据集上的用户研究指标。横轴表示评估指标，包括美国国家航空航天局任务负荷指数（NASA-TLX）、系统可用性量表（SUS）、美学和谐评分（AHS）、结构效率时间（SET）以及跨屏幕一致性率（CSCR），纵轴表示相应的得分。各柱形代表每个数据集的表现，展示了在可用性、认知负荷、美学质量和界面一致性方面的差异。NASA-TLX（0–100，数值越低越好），SUS（0–100，数值越高越好），AHS（1–7李克特量表），SET（秒，数值越低越好），CSCR（0–1，数值越高越好）。请点击此处查看该图的放大版本。

假设的统计验证

为进一步验证所提出的假设（H1–H4），对关键评估指标进行了统计显著性检验，包括布局质量、认知负荷、色彩和谐性及可用性指标（表6）。结果以均值±标准差表示，采用配对t检验进行统计显著性分析，置信区间为95%（p < 0.05）。结果表明，所提出的框架在多个指标上均显著优于基线方法，包括对齐准确率、分组准确率、阅读顺序、认知负荷（NASA-TLX）以及色彩和谐性指标。值得注意的是，认知负荷的降低和可用性指标的提升表现出高度显著的差异（p < 0.01）。这些发现证实，融合认知设计原则与感知色彩建模可显著提升用户界面质量，从而支持假设H1–H4。

指标	基线（均值 ± 标准差）	提出方法（均值 ± 标准差）	提升幅度（%）	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：基线方法与所提出方法在性能指标上的统计比较。 该表格列出了关键性能指标的均值与标准差（均值 ± 标准差），包括配准误差、分组准确率、阅读顺序准确率、NASA任务负荷指数（NASA-TLX）、系统可用性量表（SUS）、色彩和谐指数和对比度比值。同时报告了百分比提升、p值及统计显著性水平。（↑）表示数值越高越好，（↓）表示数值越低越好。统计显著性检验的显著性水平设为 p < 0.05。

特定数据集的观察结果

在Guo数据集上观察到的结构化指标相对较低的性能可归因于其固有特性。Guo数据集的规模小于RICO和ENRICO，且主要关注感知颜色特征，而非结构化的布局标注。因此，该数据集在组件布局上表现出更高的变异性、较弱的层次化组织，以及屏幕间更不一致的布局结构。这些特性使得结构学习和布局优化更具挑战性，从而解释了其在对齐、分组和阅读顺序等指标上的性能较低，尽管其在感知性和以用户为中心的评估中表现良好。

消融研究

消融实验通过系统地移除所提出框架中的各个组件，并分析其对布局质量、色彩建模和检测性能的影响，来评估每个模块的贡献。布局质量使用AE、GA、ROA和LCS进行评估。AE反映UI元素的位置偏差，数值越高表示空间结构越弱。GA根据格式塔原则评估组件组织的有效性。ROA衡量逻辑视觉流的保持程度，而LCS则从对齐、间距和布局结构方面量化跨屏幕的结构一致性。色彩质量退化通过ΔE（感知色差）、CHI和CDS进行评估，这些指标共同衡量感知均匀性、美学连贯性和调色板丰富度。检测性能使用mAP、精确率和召回率进行评估，以量化用更简单的检测模型替代Faster R-CNN模块所带来的影响。这些指标共同提供了对各模块如何贡献于系统整体性能的全面评估。

表7总结了每个模块的贡献，并将所提出的框架与现有的UI生成方法进行了比较。完整模型在所有布局质量、色彩建模和检测指标上均取得了最佳性能，表明认知设计、感知色彩建模与深度视觉理解具有协同效应。当移除色彩建模模块时，ΔE显著增加，而CHI和CDS大幅下降，表明感知均匀性和色彩和谐性有所损失。这证实了基于CAM02-UCS的建模在维持美学和感知质量方面的重要性。移除认知布局模块后，AE显著上升，GA和ROA明显下降，说明认知设计原则对于生成结构连贯且可读的布局至关重要。移除多屏幕一致性模块导致LCS降低，证实了该模块在多个屏幕间保持一致布局模式的作用。将Faster R-CNN检测器替换为较简单的CNN后，mAP、精确率和召回率急剧下降，突显了强健的组件检测在整个流程中的关键作用。与基线方法（包括pix2code、REDRAW和LDGM）相比，所提出的框架在布局准确性、视觉连贯性和感知色彩质量方面始终优于所有现有方法。

方法 / 模块	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
移除颜色模块	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
移除认知布局模块	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
移除多屏幕一致性模块	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
以简单 CNN 替代 Faster R-CNN	0.16	0.85	0.91	0.85	4.15	0.82	18.1	0.74
Pix2Code	0.25	0.61	0.65	0.51	10.2	0.48	9.6	0.65
REDRAW	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM（布局扩散）	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
所提出的完整模型	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

表7：所提出框架与基线方法的消融研究及性能对比分析。 该表格通过比较完整模型与移除特定模块的变体（颜色模块、认知布局模块、多屏一致性模块，以及将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；Guo 的 UI 颜色数据集：https://github.com/guozhongke/UI-Color-Dataset。

补充文件1：数学公式与扩展实现细节。 本文件提供了支持所提出的自动化用户界面原型设计框架的详细数学公式与算法工作流程。内容包括组件检测训练、布局模式提取、色彩和谐建模、统一的用户界面原型设计目标、Faster R-CNN检测细节、空间距离与对齐相似性计算、逻辑用户界面树构建、基于CAM02-UCS的感知色彩建模、认知设计优化、多屏幕一致性建模，以及算法S1–S3。请点击此处下载该文件。

讨论

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

除了布局优化之外，基于 CAM02-UCS 的感知色彩建模的引入在色彩和谐性、可访问性及感知稳定性方面实现了统计学上显著的提升（p < 0.05），这体现在 ΔE、CHI、CDS 和对比度比值的改善上。与以往诸如基于图像的自动化用户界面（UI）配色方案生成等研究相比——这些研究主要关注色彩优化——本文提出的方法框架在一个统一的流程中同时集成了色彩与布局的优化。此外，多屏幕一致性模块的引入解决了先前方法仅关注单屏界面生成的关键局限性。与现有方法（包括 pix2code³¹、REDRAW^23,24 和 LDGM³²）的比较表明，这些方法主要强调结构重建或生成式建模，而未整合认知设计原则、感知色彩协调或跨屏幕推理能力。本文提出的方法框架在布局准确性指标（AE、GA 和 ROA）、感知指标（CHI 和 ΔE）以及可用性度量（SUS 和 CSCR）上均表现出统计学上显著优于上述方法的结果（p < 0.05）。这些结果凸显了将认知设计原则、感知色彩建模与深度学习相结合于统一系统中的优势。

结果中的一个重要观察是影响用户体验的结构因素与感知因素之间的区别。结构优化可增强功能正确性和布局清晰度，而感知优化——特别是色彩和谐——则显著影响用户感知和认知负荷。研究结果表明，最优的用户界面设计需要在结构准确性与感知一致性之间取得平衡。尽管已显示出改进效果，但仍存在某些局限性。例如，在较小且更侧重感知的数据库（如 Guo 用户界面色彩数据库）上，由于布局组织的可变性以及结构标注的有限性，结构指标的表现较低。这些特性为学习一致的布局模式和层次关系带来了挑战。未来的工作将专注于提升在此类数据库上的鲁棒性。

从理论角度来看，本研究证明了通过将认知与感知原理直接嵌入深度学习工作流程，可以显著提升用户界面（UI）的生成效果。该研究挑战了传统上认为UI生成仅属于计算机视觉或代码生成问题的观点，强调在自动化UI系统中应将感知均匀性（通过CAM02-UCS实现）、认知负荷降低（通过格式塔原则与层次结构建模）以及多屏幕设计的一致性作为核心组成部分。这项工作推动了向以人为中心的计算模型的转变，使得UI生成不仅关注结构上的正确性，还兼顾心理与感知因素。因此，本研究为自动化设计智能确立了一个新的理论方向。

从实际应用的角度来看，该框架为用户界面设计师、产品团队以及原型设计工具提供了一种可部署的解决方案。通过降低认知负荷并提升搜索效率，该系统生成的用户界面布局更少依赖人工调整即可满足专业设计标准。采用感知优化的配色方案可确保符合WCAG 2.1等可访问性指南，从而实现在实际应用中的即时可用性。此外，多屏幕一致性模块通过保持布局和设计模式的一致性而无需手动调整，有助于加快多页面应用的开发速度。总体而言，该框架有望显著缩短用户界面开发时间，同时提升生成设计的质量与可用性。

该框架通过将认知设计原则、感知色彩建模（CAM02-UCS）以及多屏幕布局一致性整合到统一的计算流程中，提出了一种以人为核心的自动化用户界面原型设计方法。与以往主要关注结构重建或视觉检测的方法不同，本框架明确建模了格式塔分组、层次结构、对比度优化以及感知均匀性。实验结果表明，在可用性（SUS 和 NASA-TLX）、视觉和谐性（AHS、CHI 和 ΔE）以及结构性能（GA、ROA、LCS 和 mAP）方面均有显著提升，证实了认知与感知建模能够提高用户界面质量和用户体验。未来的工作将探索引入基于变换器的视觉-语言模型，以增强语义理解与结构推理能力。此外，结合自适应个性化、设备响应式布局以及人在回路中的优化机制，可能进一步提升系统的实际应用价值。总体而言，本研究为下一代人工智能驱动的用户界面设计系统奠定了基础，使其不仅在视觉上精确，而且在认知上高效、感知上和谐，并具备实际部署能力。

材料

本文使用的材料清单

姓名	公司	目录编号	评论
中央处理器（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