本文内容
组件卡 UX 模式
组件卡将某个功能的相关属性设置组合在一起。例如，组件卡显示在 Open 3D Engine （O3DE） 编辑器的 Inspector 中，它显示项目中实体的组件。组件卡必须以结构化和直观的方式显示属性设置，以帮助用户了解如何正确配置属性设置。如果信息没有清楚地显示在组件卡上，用户可能会感到困惑、设置错误的值或错过设置中的重要信息—所有这些都可能导致系统错误或意外结果。
创建组件卡的一般规则： 创建新功能时，应考虑以下事项：
谁将使用此组件卡，他们的专业水平如何？
您的组件是 Level 组件 还是 标准组件？
您希望如何构建您的卡片组件？
您要求用户执行哪些重复操作，这些操作是否可以简化？
您是否设置了正确的 默认值?
您的组件是否有任何依赖项？请参阅 自动添加组件.
您的组件卡将如何 与视区交互?
我的组件有按钮吗？
组件需要完全包容，而不是分解成一堆微型组件。
空组件卡必须包含一条消息，说明此组件卡为空的原因。
考虑编写一个关于组件功能的简短描述。还允许链接到文档。
将 toggle 组件用于二进制操作。多选操作的复选框和径向的复选框，用于以下选择之一。
当用户需要目视 view-port 中的结果时，请使用滑块。请参阅滑块了解不同类型的情况。
当可以考虑所有已知变量时，请使用下拉列表。尝试将列表保持在 20 个以下，或者考虑将列表分成两个下拉列表，以减少浏览大量列表的心理负担。
任何需要根据 3 个维度进行调整的字段都需要在输入文件之前附加 XYZ 值
布局和间距
组件卡有两个主要模式：1 列或 2 列布局。压缩时，将优先分配给输入字段。 两列布局是最标准的。最小卡宽为 —-，而没有最大卡大小。标题将根据卡片大小进行压缩，在标题悬停时使用带有工具提示的省略号。反向操作时，我们将删除省略号并显示完整标题。 文本左对齐，并且仅使用组件卡内树层次结构的四个级别。我们尽量不要深入到 4 个级别，因为缩进限制了可视空间的大小。所有 Input 字段都应填充可用空间并右对齐。
单列布局
单列布局最适合较大的输入文本区域。例如，我们的评论卡使用 1 列。在这种情况下，组件卡的优先级是最大输入空间量。
两列布局
两列布局大约是 2/5 宽度 x 3/5 宽度。在 input field 和 title 上都设置了最小大小。全局最小输入字段大小是根据占用最多空间的属性设置的。这将基于向量 4 字段布局。这样，每个输入字段大约有 7 或 8 个字符。
输入字段布局
输入字段布局： 默认情况下，具有多个属性（都与一个函数相关）的组件属性可以以四种方式之一进行布局。请注意，输入字段间距优先于标题。这意味着输入字段的优先级高于标题。所有压缩的项目都将进入 overflow 模式。
构建您的内容
构建内容：在构建组件时，请考虑用户可能希望如何同时使用一组功能。Alway 在组件卡顶部附近添加最重要/最常用的功能。默认情况下，保持高级功能或较少使用的功能处于折叠状态，以最小化用户的压力系数。SubSection Headers 也是粗体的，但默认为粗体。
O3DE 为我管理的事情
卡组件中的某些操作由 O3DE 处理。您无需自己管理这些组件，但了解 O3DE 如何处理您的卡组件非常重要。
状态：冲突或必需的组件
在某些情况下，某些组件将依赖于另一个组件卡才能正常工作。此 PhysX 的一个很好的示例。如果不定义网格或形状，PhysX 将无法工作。因此，将向用户显示以下组件以添加该辅助设置。当出现缺少组件警告时，卡中的所有输入字段都将被禁用，标题将具有方格图案。
状态：组件损坏
在极少数情况下，组件可能会因某些更大规模的问题而损坏。这方面的一个例子是禁用或缺少 Gem。如果开发人员使用多个 Gem 创建功能。有时，一个功能可以托管在一个 Gem 中，而另一个功能可以托管在另一个 Gem 中。在这种情况下，我们生产
状态： 禁用卡
目前，我们提供禁用卡的功能。但是，仅当用户可以执行某些操作以使其在同一会话中处于活动状态时，才应使用此功能。此状态只能与解释状态更改的另一个可视化结合使用。
状态：未保存的属性更改
此更改反映了用户当前的保存状态。 无论标头是否折叠，都会进行更新。此修改将一直保留，直到用户保存其级别。颜色为 （E59D25）。此颜色变化应显示在视觉架构的三个级别上。标题 （当组件卡折叠时）、可折叠三角形 （隐藏在折叠部分后面的属性） 以及受此更改影响的属性标题 （紧挨在已更改的属性旁边）。 当用户单击保存或 Ctrl + S 时，橙色将被删除，并恢复为白色。Prefab会立即反映用户对该对象的所有其他实例所做的更改。那么，为什么房产会显示为橙色呢？ 问得好。即使我们正在反映对这些属性的更改。这些更改尚未保存到光盘中，并且 ornage 反映了已保存的内容。在我们的示例中，它只是临时设置的，仍然需要保存到光盘中。
状态： 限制拖动状态
在某些情况下，无法移动组件卡。在这种情况下，您可能会在组件卡周围看到红色边框。这让用户知道尝试的操作是不可能的。例如，当用户尝试将一个组件拖动到另一个组件中时。此行为是不允许的，并且会导致 Click 拖动按住时出现红板。另一个示例是将组件拖动到另一个窗口中。
组件按钮
用户通常需要设置或更新与组件卡中的字段相关的特定属性。BJDS 提供了一组按钮，您可以将这些按钮包含在组件卡中，以解决大多数用例。 这些按钮可以在游戏引擎的图标目录 （todo） 中找到。
如果您需要一个按钮来执行此处未列出的操作，请联系 O3DE 的 UX/UI 特别兴趣小组 （SIG）。我们可以帮助您为您的用例创建一个按钮，并使其通用，以便其他人也可以使用它。不建议为某些组件创建唯一的按钮，因为这可能会导致用户混淆。
返回上一个 ：将用户返回到以前的状态
固定：此属性设置为在较高级别可见。你可以看到这用于Prefab属性。
在透视窗口中定位：使用此按钮可根据在透视窗口中的单击来设置属性值。
清除设置属性：这应该用于删除属性值和/或一组属性值。与 delete 不同，它不应该也删除 file.我们尝试将 “X” 的含义保留为 “clear this field” 或 “close this window” 之类的内容。垃圾桶用于删除、设置或删除元素。
查看更多属性：
配置/播放。
运行命令
添加属性。我们通常使用它来添加新属性或一组属性
删除属性。这将从您的组件卡中完全删除该属性。大多数时候，这个 us 用于与加号
打开新窗口
刷新属性或设置
在 explorer 中查找。
覆盖属性
您需要管理的事情
级别组件 vs 标准组件
在 O3DE 中，有两个级别的组件：一个 标准组件 和一个 关卡组件。标准组件处理适用于功能的特定功能集。另一方面，关卡组件是组件上的大型功能，适用于整个关卡，不需要在大纲视图中显示。这些关卡组件包括 Global lighting（全局光照）、物理、地形等。因此，在构建新组件时。考虑此组件应该位于实体上，还是在整个关卡中使用的组件
应避免的事项
多年来，我们学会了遵循多种模式，以便为用户创造最佳体验。
问问自己，设置真的有必要吗？我知道一开始把每个属性都扔到组件卡上似乎是个好主意。然而，这方面的研究并不同意。用太多选择或琐碎的选择压倒用户会导致一种用户瘫痪。
仅显示有用的数据和 80% 的用户。避免为 20% 的先进组提供餐饮。
将相关设置组合在一起。
我们永远不应该使用嵌套在 Subsection 标题下的单个属性。
我们尝试将一张卡下的树结构数量限制为 3 个。超过 3 几乎不可能读取，因为所有内容都被压缩得太紧了。
空组件卡
您可以使用空的组件卡吗。嗯，从技术上讲，这种行为没有代码限制，但强烈建议不要这样做。在用户研究期间，有报道称看到一张空卡片会使 people 事物组件损坏。有人可能想要使用空组件卡的一个原因只是后端管道，并将您的工具注册到系统中。在需要此状态的情况下，您应该确保已完成以下操作。在大多数情况下，组件卡内部应具有属性，以便客户选择或修改功能或功能。如果组件没有任何属性，你应该问自己：我有什么可以添加的东西来帮助用户理解为什么这个组件会是空的。
提供良好的默认设置
所有属性都应该尽最大努力选择我们认为每个人都喜欢的默认值。有时我们会出错，这没关系。当我们学到更多时，我们会迭代。然而，我们的用户需要进行实验才能最好地猜测什么应该有效，这太费力了。让我们为他们节省时间并设置我们的最佳猜测值和良好的默认值。
计量单位
我们在输入字段中支持多种类型的测量单位。这些度量单位以比标准文本更浅的颜色包含在输入字段中。我们最常见的测量单位是米 （M），但您可能也会看到像素 （PX）、流明 （LM）、十六进制 （#） 和度 （° 或 deg） ..这些帮助文本不是内置于控件中，而是一个可修改的属性，因此您可以添加所需的任何单位类型。因此，您有责任防止我们的物业脱节。我们强烈建议使用通用测量单位，如公制。
（图片待办）
在组件内排序（拖动）
目前，基本组件卡不支持行排序或顺序堆叠，因为并非所有实例都需要它。但是，我们确实支持将此行为作为组件卡中 Array 组件的一部分。这将允许您下拉、堆叠、排序或允许用户重新组织内容。请在 “Array” 组件中阅读更多相关信息。
组件卡片的排序顺序（拖动）
除 transform 卡外，所有卡都可以在 Inspector 窗口中进行排序。我们将转换卡锁定到 Inspector 的顶部，以便此卡始终位于位置 1。更改其他卡片的位置允许大多数用户通过拖动卡片来组织它们。蓝色边框和轮廓表示此项可以移动到此位置，而红色边框表示此位置是不可能的。请注意，Inspector 内组件卡的堆叠顺序与编辑器或处理器的重要性顺序无关。它也不会影响视区中的 z-index 位置。卡片只是在视觉上堆叠起来，以帮助用户与隐藏功能无关。
与视互
与组件卡和视区的交互应立即发生。在某些情况下，我们引用光盘上的另一个文件。在这些情况下，我们可能需要包含一个辅助按钮来强制更新更改。另一个主要的视口变化是 reflect 在你所有形状组件底部看到的大 “edit” 按钮。此操作将视区置于编辑模式，将具有一些视觉指示器（如蓝色边框），以让用户知道已发生更改。请注意，在编辑模式下，您可以限制用户单击其他操作的能力，以便他们可以专注于您的工作流程。
工具提示
请在所有属性上使用它们 描述 操作 不是您希望它们做什么。
组件图标
组件卡图标不应在图标周围使用框。盒装版本仅适用于透视窗口。我们不希望我们的图标偏离以客户为中心的位置。新图标应与组件类别的相应颜色类别匹配。有关更多详细信息，请参阅图标页面。
依赖组件
在设计组件时，请考虑组件的端到端工作流程。您正在构建的组件是其他工具或工作流程的一部分吗？您的组件是否有其他依赖组件？定义 E2E 工作流 了解此端到端工作流后，您可以为用户提前考虑，并帮助用户尽可能自动化其工作流以节省时间。
我们可以自动添加组件吗？
是的！这方面的一个例子是;如果用户从 Asset Browser 中拖出 FBX，并且它包括 Mesh、Material 和 Physics 碰撞器。自动将这些组件添加在一起将简化用户体验。用户更容易决定他们不需要其中一些组件并更改或删除它们，然后从头开始设置它们。另请参阅状态
但是，我们不想强迫用户保留他们不想要的组件。因此，请不要设置任何系统，当有人删除该组件时，组件会自动添加回来。强制添加组件不是我们应该赞同的事情。如果用户删除组件，他们是有原因的。在这种情况下，请使用 状态：冲突或必需组件