user-interface - 用于关联大量数据的优雅 UI

Question

我有一个电子商务网站，需要建立一些关联，例如产品需要类别、制造商、关联产品等。

当只有相当少的、有限的数据时，例如制造商我简单地使用下拉列表或选项框供用户选择相关字段。

但是对于关联产品等项目，我有数千个或产品，使用这些方法之一是不可行的。目前我使用一个可搜索/分页表，用户然后单击一个按钮来添加关联，这是有效的，但它对用户来说非常耗时，而不是我认为的问题的理想解决方案。

有没有人针对这个问题实现了解决方案，或者他们能否从 UI 的角度就如何解决这个问题提供任何建议？

感谢您的帮助

Answer 1

我能想到的解决办法是:

1. 自动完成
2. 最近的协会
3. 智能关联

可能会有更多具体取决于您在做什么，所以请随时添加更多详细信息或屏幕截图，我会考虑更多。

---

自动完成

使用自动完成字段可以加快用户的处理速度，因为他们不必在表格中寻找关联。相反，他们可以直接开始输入，并在字段下方显示一个建议框，让他们选择他们要查找的内容。

如果您在多个关键字段(即制造商和产品名称)上匹配自动完成，用户很有可能能够快速找到关联。

您还可以对建议框进行编码，使其显示多条关键数据。这样，如果用户不太确定他们在寻找什么，在该字段中输入几个字符就会让他们知道他们可以搜索什么。

---

最近的关联

在您的自动完成字段下方，您可以添加 5 到 10 个最近建立的关联。这将允许您的用户快速将许多产品添加到同一个关联中，而不必每次都使用自动完成功能。

---

智能关联

与上述两种机制不同，智能关联是我在为 Shopify 设置主题时首先看到的。店铺。它们允许您通过定义包含或排除产品的条件来基于产品关键字段自动创建关联:

Create Association 'Pants'
Where product title contains string 'pants' or
Where product title contains string 'capri'

以上内容由一组下拉菜单和文本字段控制，避免了手动创建关联的痛苦。