定制UI-技术方案
<p>[TOC]</p>
<table>
<thead>
<tr>
<th>作者</th>
<th>赖俊贤、林七佛</th>
</tr>
</thead>
<tbody>
<tr>
<td>最后修订日期</td>
<td>2023-12-6</td>
</tr>
<tr>
<td>版本</td>
<td>V 1.3.0</td>
</tr>
</tbody>
</table>
<h1>原始需求</h1>
<p>物件播放组件，提供一套默认的UI用于操作[器材相关的业务]，如观察器材、打开器材参数面板等。
定制UI的要求是：使用方可以使用自己设计的UI，并也能操作上述的[器材相关的业务]。
> 物件播放组件的定制UI业务，和风格化无直接关系</p>
<h1>方案核心</h1>
<p>物件播放组件加载的UI预制，可以是默认的，也可以是第三方自行设计的。</p>
<h1>[物件播放器]定制UI-技术方案</h1>
<p>定制UI（风格化）是通过一些UI控件的基本元素来控制的，主要包括：</p>
<ul>
<li>颜色</li>
<li>字体</li>
<li>图像</li>
<li>布局</li>
<li>动画</li>
<li>音效</li>
</ul>
<p>本技术方案将以<span style="color: red;">颜色</span>为例，来展开说明。
> 实际开发中，将根据需求来扩展需要支持的元素，本版本将实现的基本元素：颜色。</p>
<h2>方案一：基于独立的风格化预制体</h2>
<p><strong>方案描述：</strong> 每种业务类型的UI界面都对应独立的预制。
例如：器材介绍面板_StyleA.prefab , 器材介绍面板_StyleB.prefab 。</p>
<p>效果图，如下所示：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=16a23f6e450359034d805e3428617bbe&amp;file=file.png" alt="" /></p>
<h3>优点：</h3>
<ul>
<li>开发代码量少</li>
<li>预制可视化制作，所见即所得</li>
<li>可最大程度兼容UI风格化设计的差异性，适用于兼容PC Desktop端和VR端。</li>
</ul>
<h3>缺点：</h3>
<ul>
<li>需要制作不同的预制体并绑定对应业务脚本</li>
<li>若UI和风格较多，后期修改维护成本高</li>
<li>风格化已经提前设定，使用方再额外修改比较麻烦</li>
</ul>
<h2>方案二：基于配置文件</h2>
<p><strong>方案描述：</strong> 将UI控件的属性和数据进行可配置化改造，通过描述文件存储UI的外观表现。</p>
<p>类似这样的文件：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=b459a44d0e61ce425354b6cb5b08ef41&amp;file=file.png" alt="" /></p>
<h3>优点：</h3>
<ul>
<li>灵活简便，配置文件格式可以根据需求定义</li>
<li>一套风格只需要定义一个配置文件，便于管理</li>
<li>可将配置文件和相关UI资源打包成一个资源包，支持热更</li>
</ul>
<h3>缺点：</h3>
<ul>
<li>不直观，无法所见即所得</li>
<li>风格化配置文件创建和修改比较麻烦，想提高效率需要另外开发配置编辑工具</li>
</ul>
<h2>方案三：基于代码接口</h2>
<p><strong>方案描述：</strong> 直接通过代码控制UI风格</p>
<pre><code class="language-csharp"> /// &lt;summary&gt;
/// 器材点击UI风格化配置
/// &lt;/summary&gt;
public class EquipInteraction1WndStylizedConfig
{
/// &lt;summary&gt;
/// 上半部分背景图片配置
/// &lt;/summary&gt;
public ImageStylizedConfig UpBgImageStyle;
/// &lt;summary&gt;
/// 下半部分背景图片配置
/// &lt;/summary&gt;
public ImageStylizedConfig DownBgImageStyle;
}
public void ChangeUIStyle()
{
EquipInteraction1WndStylizedConfig equipInteraction1WndStylizedConfig = new EquipInteraction1WndStylizedConfig()
{
UpBgImageStyle = new ImageStylizedConfig()
{
Color = Color.red
},
DownBgImageStyle = new ImageStylizedConfig()
{
Color = Color.red
}
};
UIStyleManager.Instance.EquipInteraction1Wnd_StylizedConfig = equipInteraction1WndStylizedConfig;
UIStyleManager.Instance.ApplyStyle();
}</code></pre>
<h3>优点：</h3>
<ul>
<li>较灵活，由外部调用，可实时修改效果</li>
</ul>
<h3>缺点：</h3>
<ul>
<li>不直观，使用方需要了解UI业务</li>
<li>代码量大，不易维护</li>
</ul>
<h2>方案四：Unity-Theme</h2>
<p><strong>方案描述：</strong>Unity 主题，主要通过可视化配置方式设定主题关联的颜色，这些设置被记录在配置文件中。同时提供了[颜色绑定]组件，各种类型的颜色绑定组件可以关联特定的UI控件，如Image、TMP和SpriteRenderer等。此方案，类似Unity编辑器使用的主题（如 图1-1所示）。
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=07e7948968c68a4961a83e4a300d22ab&amp;file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=42f788b1fcfea83e4427915f63e9bf8c&amp;file=file.png" alt="" />
<center><strong>图1-1：Unity 编辑器主题</strong></center></p>
<p><strong>Unity-Theme</strong> 可视化配置：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=0733476e90549bf83b333bb8c016f33d&amp;file=file.png" alt="" /></p>
<p><strong>运行效果图</strong>
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=cf2b5b17489bb29231d886114742df8d&amp;file=file.png" alt="" /></p>
<h3>优点：</h3>
<ul>
<li>较直观</li>
<li>较灵活</li>
<li>较规范</li>
</ul>
<h3>缺点：</h3>
<ul>
<li>该方案仅支持颜色主题，想要更多功能需要扩展</li>
</ul>
<h2>方案五：自定义预制+独立UI业务接口</h2>
<p><strong>方案描述：</strong> 第三方可以使用自定义的预制来代替默认预制，然后功能接入原有业务功能。
组件需要提供对应的接口和事件，以观察器材为例：
1：提供点击器材的事件回调（含器材GUID、器材位置信息）
<code>myVisualElement.RegisterCallBack&lt;MouseDownEvent&gt;(myFunction)</code>
> - GUID用于下个步骤使用，器材位置信息用于采用左键弹窗的时候的UI的位置计算</p>
<ul>
<li>事件回调的命名可以参考官方的UI Toolkit。</li>
</ul>
<p>2：观察器材接口（此接口需要器材GUID）</p>
<h2>方案选型</h2>
<p>~~对于虚拟实验室项目，Desktop端采用方案四比较合适，而VR端则必须选用方案一。
对于第三方接入的项目（如3D学习空间），采用方案3更合适，UI可以完全由第三方项目自由定制，而组件提供UI依赖的功能接口。~~
经过和永弟讨论后，方案五更能满足原始需求，而其他的是适合UI主题的需求。</p>