it-swarm.cn

从列表中进行多次选择的最佳UI是什么?

我们有一个Web表单,并且其中一个字段是多选列表。我们的选择是:

  1. 复选框列表
  2. Listview(选择框,但允许多选)

当列表包含100多个项目时,两者似乎都很难看又笨拙。

在这种情况下是否还有其他更好的UI解决方案?

80
leora

我在许多地方都看到过的一种替代方法是,有两个相邻列表,一个带有可用项,一个带有选定项。

这是我通过Google快速搜索找到的 OpenFaces.org 的示例:

enter image description here

55
Bevan

另一个解决方案是类似Facebook的“多选栏”。 (我不知道确切的名字)

您可以找到一个示例 此处 。基本上,它就像一个文本输入字段,但是所选项目变成了“标签”。只需在我链接到的页面上尝试一下即可。

55
Raffael Luthiger

取决于用户界面和空间布局。还取决于列表中的项目数以及用户必须选择的平均项目数。一个有趣的解决方案是下拉列表+复选框 dropdown checkbox

http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

出现的项目越多,下拉菜单将越不适合(让用户在下拉菜单中滚动不太好。)在这里,您需要弄清楚如何组织/组织列表。

9
Marc D

根据选项的数量,您可以使用如下所示的图形下拉列表选项。轻击/单击可切换是否选择该项目。

但是,这对于很长的列表来说效果不佳。

enter image description here

6
Phillip Quintero

我参加这个聚会有点晚了,但是我想我会添加一个我最近一直在使用的解决方案:具有动态文本预测功能的单个文本输入(请考虑使用Google的主要搜索表单)。

当用户在下拉菜单中选择“结果”时,可以在输入下方填充一个列表,最好使用明确的选项来删除每个选择。有关此功能的示例,请考虑要求标记内容的网站,例如WordPress或Delicious。

此解决方案要求您和用户在较大列表的内容上有些简化,但是我发现它节省了很多焦虑和不动产。

6
skybondsor

看起来我来晚了,但是我公司也遇到过类似的问题。

不可避免地,您需要将其分解为两个独立的需求(搜索,选择),然后将其重新组合到一个UI中。

如果搜索很简单,则可以使用自动完成功能来完成一些简单的操作(例如 http://quasipartikel.at/multiselect/ 可以理解)。

6
seanevanking

复选框是更容易理解的习惯用法。

您将需要“全部选中”和“不选中”按钮,并且,如果用户必须检查很多相邻项目,则需要“检查选中的项目”按钮(仅当选择了多个项目时才启用)

5
Eduardo Molteni

我也认为这是一个选择。这是一个复选框列表,其中已选中的项目被移动/放置。两者之间的混合解决方案。

[ ] item 1
[ ] item 2
[ ] item 3
[ ] item 4
[ ] item n

选择一个之后:

[ ] item 1                X item 2
[ ] item 3
[ ] item 4
[ ] item n

可以将所选项目向右移动(也许使用固定的div,以便在向下滚动选项列表时保持可见),也可以将其迁移到列表的顶部。

3
DA01

是否从列表中选择选项1或2确实与您是否希望由于任何原因以及其他因素而使选择持久化有关。下面,我将列出一些在选择遵循的方法时可能要考虑的事项。

Drag-n-Drop

如果要允许对项目进行拖放排序,则使用复选框可以使用户更轻松地避免在流程中丢失选择状态。如果不允许拖放重新排序,或者不在乎过程中是否丢失选择状态(如果允许的话),则可以通过Ctrl键使用多选。

长期持久性

如果要保存所做的选择以备后用,并在以后的会话或应用程序运行期间再次调用,则应考虑使用复选框或双列表框范例,因为显示突出显示的项目通常保留用于瞬态选择状态。

多项选择作为高级功能

如果预计多选对用户来说是一种罕见的必要,那么使用户负担很多复选框并不是最好的选择,因为他们不太可能在大多数时间使用它们。在这些情况下,最好通过进入特殊的多选模式来显示复选框,或者只坚持使用高级多选的Ctrl键方法。在Edge的情况下,用户需要对选择和订购进行非常精细的控制,并且不动产的屏幕面积不是很多问题,因此使用Bevan在他的答案中建议的方法以及两个单独的列表也是一个不错的选择。

请注意,对于文件/文件夹的高级多重选择,Windows资源管理器通常遵循Ctrl键方法,但是可以将其配置为使用复选框来表示选择。我尝试过一次,然后转回去,发现大多数人甚至都不知道该功能。

2
jpierson

我参加聚会很晚。但我想提供自己的解决方案。

即:使用弹出窗口(又名叠加,模态)显示复选框,并让用户选择多个值。

当用户单击主窗体上的编辑链接时,将打开弹出窗口。

选择完值后,他可以单击“完成”按钮,该按钮具有单击事件,这是一个javascript方法,该方法收集已检查的值并更新主窗体和/或某些显示字段上的某些隐藏字段(例如,只读文本区域或主窗体上的一个span或div元素)。当用户单击主要提交按钮时,隐藏字段或显示字段将发送到服务器以进行持久化。

如果有很多复选框可供选择,则显示它们会占用很大的屏幕空间,因此可以设置弹出窗口的样式而不会造成混乱,以帮助吸引用户的注意力。完成后,他可以关闭窗口。

当然,多个步骤也很有意义。但是我的解决方案是使用单个提交表单。

您如何看待这种方法?它已经被使用了吗?

谢谢

2
Zack Xu