本研究提出了一种集成认知设计原则、感知色彩建模与深度学习的自动化用户界面原型设计框架。该系统可提升界面的可访问性、布局清晰度、色彩协调性以及跨屏幕一致性，从而生成连贯且以用户为中心的界面设计方案。
需要JoVE订阅才能观看此内容。 请登录或开始免费试用
本研究提出了一种集成认知设计原则、感知色彩建模与深度学习的自动化用户界面原型设计框架。该系统可提升界面的可访问性、布局清晰度、色彩协调性以及跨屏幕一致性，从而生成连贯且以用户为中心的界面设计方案。
有效的用户界面（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。图像处理方法依赖于手工设计的特征，而深度学习方法则从大规模数据集中提取分层表示。因此，研究人员探索了将深度学习与特定领域图像处理技术相结合的混合方法，以提高鲁棒性和准确性。
颜色是用户界面设....
访问受限。请登录或开始试用以查看此内容。
本研究使用公开可用的数据集，不涉及人类或动物受试者。
所提出的自动化用户界面原型设计框架融合了基于深度学习的结构理解、感知均匀的颜色建模以及认知设计原则，以生成连贯且以用户为中心的界面原型。该方法首先采用在 RICO 和 ENRICO 数据集上训练的 Faster R-CNN 架构，检测用户界面组件并提取其层级关系，从而实现对多样化屏幕布局的准确解析。随后，检测到的组件由一个颜色智能模块进行处理，该模块提取基于品牌或图像的颜色线索，利用 CAM02-UCS 模型计算感知相似性，并生成和谐、具备对比度意识且符合可访问性标准的颜色调板。接着，通过认知优化引擎应用认知设计原则——包括格式塔分组法则、菲茨定律、希克定律、基于注意力的间距设计以及视觉层次约束——以优化空间布局和组件对齐。最后，布局推理层整合结构、感知和认知约束，生成在多屏幕间保持一致的用户界面原型，实现可用性、美观性与功能清晰度的平衡。该集成化流程确保了感知上的连贯性，降低了认知负荷，并遵循以人为本的设计原则。所提出方法的完整工作流程如图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 |
访问受限。请登录或开始试用以查看此内容。