QuickUI ProductShow#

#一款面向 Unreal Engine 5 的专业交互式产品展示模板，基于 QuickUI 插件与 QuickUIDesign UI 框架构建。

#通过简单配置，创造令人惊艳的产品体验

专为产品可视化、家居展示、数字展览及交互演示等场景设计，QuickUI ProductShow 使设计师与开发者能够快速打造沉浸式、动态且视觉吸睛的产品体验，同时免去传统 UMG 界面开发的复杂性。

借助直观的配置式工作流，您可以将静态产品演示转变为包含动画、信息面板、材质切换、运镜过渡及实时视觉反馈的交互式体验。

演示与示例项目工程文件下载地址： 点击这里

#项目结构

. 📂 Content
└── 📂 PixelBear/
│  └── 📂 ProductAssets/
│    └── 📂 ART/
│    └── 📂 Levels/
│      ├── 📄 Main.umap                 
│      ├── 📄 VS_Main.uasset               📕//场景对应的VariantSet资源文件
│  └── 📂 ProductConfig/
│    └── 📂 Blueprints/                 
│      ├── 📄 BP_ConfigGameMode.uasset
│      ├── 📄 BP_Configurator.uasset       📕//UI核心配置蓝图(勿删)
│      ├── 📄 BP_PlayerPawn.uasset
│      ├── 📄 WBP_MenuBar.uasset        📕//UI配置蓝图(勿删)
│ 	   └── 📂 Input/
│    └── 📂 DateAssets/
│      └── 📂 DataTemplate/
│      ├── 📄 PD_QuickUIData.uasset        📕//UI图标数据管理器(勿删)
│    └── 📂 QuickUI/
│      ├── 📄 Data.ui             📕//UI核心文件(勿删)
│    └── 📂 Textures/
│      └── 📂 Icons/                    //Thumbnail缩略图导入目录

#核心概念

数据传递流程参考下图：

#VariantSet（状态集合）

对应文件：/PixelBear/ProductAssets/Levels/VS_Main.uasset (只对应关联关卡)

注意：虚幻引擎的 VariantSet 来管理交互状态，是本模板实现交互 UI 自动配置的关键。

如上图所示：

• 状态集合：对应的 UI 界面上的一级菜单
• 状态：组成状态集合的最小单位，对应二级菜单下面具体的功能项。
• 状态角色窗口：每个状态下，用于增删和管理其所属角色的窗口。
• 角色属性窗口：每个状态的角色下，增删和管理其属性的窗口

这里用户的交互过程就是用户点击选择不同状态，从而引发场景中不同角色的属性发生改变的过程

#Thumbnail（缩略图）

对应文件：/PixelBear/ProductConfig/DateAssets/PD_QuickUIData.uasset （这个文件只对应一个交互应用）

参考上图：用户需要自定义 UI 中的一级菜单、二级菜单图标数据，通过在 PD_QuickUIData 资产中配置。

#快速开始

1. 创建一个 Basic 场景

2. 拖拽 /PixelBear/ProductConfig/Blueprints/BP_Configurator.uasset 到场景中。

3. 在关卡的场景大纲中选择 BP_Configurator，参考下图创建对应的 Level VariantSets 资源（Level VariantSets 资源功能参考下面视频教程了解）

4. 复制 /Content/PixelBear/ProductConfig/DateAssets/PD_QuickUIData.uasset 并打开如下图：

在对应的 VariantSets 和 Variants 数据集下，点击清空按钮，点击保存。

5. 回到场景大纲中选择 BP_Configurator，进行如下图操作

6. 打开 VariantSets 资源，在确保下图配置无误的情况下，点击生成配置数据

7. 查看 PD_QuickUIData1.uasset（也就是第 4 步复制的那份资产文件）

会发现根据 VariantSets 生成对应的菜单名称和状态名称，但是有部分内容空缺，这里统一介绍一下：

• VariantSets：
  • VariantSetName：即当前一级菜单名称（自动生成）
  • Thumbnail：缩略图数据（自动生成）
  • Texture：缩略图引用（用户指定）
• Variants：
  • VariantsName：状态名称，即交互具体的功能对应的 UI 名称（自动生成）
  • IsActive：一般来说每个菜单的第一个状态勾选，UI 识别为默认状态（用户指定）
  • ParentName：当前状态所属的一级菜单（自动生成）
  • Thumbnail：缩略图数据（自动生成）
  • Texture：缩略图引用（用户指定）

8. 配置完成后点击 "Generate Thumbnail Data"，生成 Thumbnail 数据便完成

9. 最后打开 "World Settings" 面板（编辑器顶部 Window => World Settings），指定 BP_ConfigGameMode 作为场景的游戏模式即可

10. 点击运行，模板配置完毕，基本交互 UI 已经配置完成，后续只要在 VariantSet 框架下，完善每个状态的具体功能和属性设定即可

#相机动画设置

1. 创建热点状态
   • 隐藏状态模式——使用 __ 作为前缀的状态集合不会显示在菜单中
2. 布置热点
   • 使用 BP_HotPrint 蓝图，路径：PixelBear/ProductConfig/Blueprints/Tools/BP_HotPoint.uasset
   • BP_HotPrint 参数说明与介绍
3. 关联热点状态
   • 自定义变量注册介绍
   • HotPointChange_Int 属性填写
   • 使用依赖模式将其关联到其他状态下

也可以看我录制的使用视频更为清晰明了：
四步即可完成交互功能设计！QuickUI 是如何帮助设计师快速完成交互设计的？_哔哩哔哩

#沟通与交流

感谢您的支持，为了更好的使用资源，请加入我们的技术交流群。

或者添加我的 QQ 号：277924771