logo标签列表

这种 UI 模式叫什么？

jqueryuser-interfaceyuiterminology
61

我正在试图弄清楚这种东西的名称，并最终了解如何在Web浏览器中创建它。 它看起来像这样（我想到的第一个应用程序的屏幕截图）：

输入图像描述

我要找的具体组件/模式是代表从集合中包含/排除项的两个列表框（“已包括的齿轮”和“已排除的齿轮”）。 我并不是真的在寻找WPF名称（如果有的话），但这可能会有帮助。

如果有的话，我正在寻找此元素的名称，并且如果您真的想让我开心，您可以指向在浏览器中制作其中一种的jQuery或YUI方法。

我熟悉这个结构，但我也不知道它的名称。不过我想知道的是 - 如果你正在使用jQuery，那么与一对连接的可排序项相比，这有什么优势呢？http://jqueryui.com/demos/sortable/connect-lists.html - Stobor
@Stobor：能够在列表之间双击项目（在此示例中未显示，但在其他示例中显示），能够选择/移动多个项目，而不强迫用户拖放。坦率地说，在这里，拖放的花哨效果并不是非常吸引人。 - Matt Ball
谢谢你提醒我关于OptiGear的好处！ - Mark Robinson
+1 对于一个有趣且可能非常有用的问题。可搜索的标题（祝你好运）是唯一缺少的东西。 - Merlyn Morgan-Graham
@Merlyn：谢谢 :) 如果你有任何惊人的好主意来改进标题，请告诉我。这是我所能做到的最好了。 - Matt Ball
参见http://ux.stackexchange.com/questions/73852/whats-the-common-name-for-this-gui-elment-left-right-box-assignmentbox-rela - antony.trupe
13个回答
42

我认为这种控件没有“官方”名称，通常被称为“双列表”，甚至更常见的是“你有两个框，可以在其中移动东西”的东西。

这里有一个jQuery插件：https://github.com/Geodan/DualListBox

哇，看起来真是完美。虽然比一般的jQuery插件有点笨重，但比我自己从头开始做要好得多。 - Matt Ball
是的，开始时可能有点笨拙，但之后我再也不用回去修复它了。 - adamJLev
9
你说的是那个有两个盒子可以在其中移动物品的东西。哈哈哈，真的吗？ - Sean Patrick Floyd
谢谢，Infinity。在检查了所有提到的不同选项后，我将尝试使用meadmiracle。 - Matt Ball
36

在设计界面中，一个UI模式集合中，詹妮弗·蒂德维尔称之为列表生成器。在学术文献和行业 资源中，"双重列表"和"列表生成器"似乎都是公认的名称，甚至在SO上出现在这篇评论和Web长清单UI模式帖子中。

我不知道是否有一个打包的jQuery组件，但DZone有一篇文章介绍如何使用jQuery自己制作：An HTML List Builder: A Study in Applying jQuery

我还发现了一个不同的列表构建器模式，它采用了非常不同的方法来解决同样的核心问题。

这些和其他类似的设计模式目录中的模式可能会给你启示，让你找到攻击问题的其他方法。个人而言，我一直认为“双重列表”模式是一个有点儿欺骗性的东西，我们已经有更好的替代方案......几十年了 :-)

更新：我刚刚偶然发现这个模式也被标记为"swaplist"，在Tklib中称为"Disjoint listbox"，在[incr Widgets] Tk“超级小部件”库中。因此，您可以在Perl/Tk，Tkinter，Ruby/Tk以及“任何（其他）精美的（Tk）小部件都可以找到。”

更新：（2021年）Material-UI React组件库将此模式称为"转移列表"或"穿梭框"。我没有在Material Design规范中找到相关参考，因此这可能是组件库作者的创新。

2
您介意给出一些“更好的替代方案”的例子吗？我知道多选列表框也可以满足要求，但当用户在长列表中选择不在可见部分时，很难维护哪些项目当前已选择。+1 以示正式格式参考，谢谢。 - ianmayo
Welie.com将此模式称为“部件选择器”（Parts Selector） - 不幸的是，本答案提到的“列表构建器”模式是一种非常不同的解决方案。很遗憾Welie.com将这个不同的解决方案称为“列表构建器”，因为我真的很喜欢这个模式的名称（所以我会使用双列表）。 - Ted M. Young
@ianmayo：我认为这可能是因为我在想“现在肯定有更好的替代品了吧？”但我也可能在考虑像D'n'D集合构建器之类的直接操作。我会从答案中删除它，但我一直在想我最终会想到一个具体的例子并想回来完成这个想法 :-) - Tripp Lilley
6
6

这实际上是一个升级版的多选列表。因为只有两种状态，即“包含”（已选中）和“排除”（未选中）。有一个相当不错的多选小部件，可以将已选和未选项目分成两列，并允许您在它们之间拖放：

http://www.quasipartikel.at/multiselect/

哇，那个例子看起来几乎没法使用，因为它没有遵循典型的从左到右的顺序。除此之外，它看起来非常漂亮 ;) - jpierson
5

并不是说Microsoft UXGuide是权威的或者完整的，但是他们将这个概念称为列表构建器。

enter image description here

我最近一直在搜索这种UI概念的例子，以便了解何时使用箭头或带标签的按钮等最佳实践。通过Google图像搜索获得的最多示例的搜索是双列表UI。
就第二个问题的jQuery解决方案而言，我认为Infinity的答案可能是最合适的，但我只是想给出我的观点，关于这种UI模式我发现了什么。
@Matt - 没问题，还有别忘了在 Stack Exchange 下的 UX 网站，可能会给你更好的答案。http://ux.stackexchange.com/ - jpierson
1
我大约一年前问过这个问题；当时 ux.se 还不存在！ :) - Matt Ball
@Matt - 很好的观点，需要注意的是他们偶尔会在这些网站之间迁移问题。主要是想确保你和其他人知道，以便帮助找到相关内容。 - jpierson
引用的内容已移动，现在在这里：列表框。文档的总体结构不同，所以我选择不修改帖子。 - IvanH
3

我一直认为它被称为累加器，但是在谷歌上很难找到支持这一说法的内容。以下是一个关于UI可用性的晦涩哲学研究论文中提到它的例子。

图4-1展示了一个重新定向规则应用于累加器部件（即将项目从可能值列表的左侧传输到积累选择项目的右侧列表）的示例。

Figure 4-1

还有在一些1998年的学生项目中提到。

1
我非常喜欢这个术语——因为也许你想要移动的不是“列表项”，而是缩略图或代码片段的选择，或者许多其他东西。 - danjah
3

我一直将它们称为“航天飞机组件”，因为你在来回传递信息 - 看起来这是相当普遍的。只是觉得我应该把它加到可能性列表中。

我只知道它被称为“洗牌盒”，从未听说过“穿梭”。 - user330315
2
1

以下是两个例子，它们不是jQuery或YUI，但很接近。这两个例子来自于ExtJS；一个利用了两棵树，另一个则使用了两个数据表格。两者都非常流畅，并可能能帮助您设计思路。

顺便说一下：我通常也听到人们将它们称为“双列表”。

两个数据表格

两棵树

糟糕.. :) 感谢你发现了这个。 - FallenRayne
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接