代码之家  ›  专栏  ›  技术社区  ›  Remmus

优雅的用户界面,用于与大量数据关联

  •  3
  • Remmus  · 技术社区  · 16 年前

    我有一个电子商务网站,在那里有必要建立一些联系,例如一个产品需要一个类别、制造商、相关产品等。

    当只有相当小的、有限的数据量(如制造商)时,我简单地使用下拉框或选项框让用户选择相关字段。

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

    是否有人实现了这个问题的解决方案,或者他们可以从用户界面的角度提供关于他们将如何实现这个问题的任何建议?

    谢谢你的帮助

    1 回复  |  直到 16 年前
        1
  •  0
  •   Pat    16 年前

    我能想到的解决方案是:

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

    可能会有更多的具体取决于你在做什么,所以请随意添加更多的细节或截图,我会考虑更多。


    自动完成

    使用自动完成字段可以加快用户的进程,因为他们不必在表中搜索关联。相反,他们可以开始输入并在允许他们选择要查找的内容的字段下面显示一个建议框。

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

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


    最近的关联

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


    智能关联

    与上述两种机制不同,智能关联是我在创建主题时第一次看到的 Shopify 商店。它们允许您通过定义包含或排除产品的条件,根据产品关键字段自动创建关联:

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

    上面是由一组下拉列表和文本字段控制的,并且避免了手工创建关联的痛苦。