用户界面：多选选择框

Posted 2023-03-05

【中文标题】用户界面：多选选择框

【英文标题】：User Interface: Multiple choice select boxes

【发布时间】：2011-03-12 13:53:59

【问题描述】：

我有一个表单，用户可以在其中选择菜单中的多个选项。从用户体验的角度来看，您认为最直观/最佳的选择是什么？

A) 使用 select 元素的“multiple”属性（然后您可以按住控件并选择多个选项）。 ADV：简单，无需编码。 DIS：不直观。

B) 有多个复选框和一个全选/全选控件。 ADV：相当简单。 DIS：当有很多选项时会变得混乱

C) 有两个并排选择多个菜单，并有添加/删除选项的按钮。选择的选项将在右侧并提交。 ADV：清洁DIS：如果 JS 不开启就会中断。

谁能想到更好的选择？

【问题讨论】：

我没有看到选项 A 的问题。这就是 <select> 的工作原理。

从技术上讲，选项 B 的一个缺点是它在未启用 javascript 时也会中断。

@You 当列表变大时使用它很烦人@Agent_9191 它仍然有 90% 可用，您将无法拥有“全选”控件

【参考方案1】：

我投票给 B。

选项 A 是“原版”选项，但我讨厌必须按住 Control 并滚动浏览一长串列表。不可避免地会有一些事情发生并清除整个列表。我敢肯定患有关节炎的人也讨厌它。

选项c是一个常见的范式，但是当您有多个选项时，它会有点难以跟踪，特别是如果选项与他们有任何顺序或关系。我更喜欢有一个列表，我可以将所有选项与他们的邻居联系起来。我想这取决于您的具体用例。

选项 B 易于编码，无需 JS 即可使用 95%，并为您的布局提供完全的灵活性。它只是像你设计的那样混乱。这是我进行多选的方式，并且发现它很容易使用。

【参考方案2】：

A) 如果您没有很长的列表，那就太好了。如果您有很多很多物品，使用它会很烦人。不好，因为它不可搜索，与选项 B 不同。

B) 很好，因为这不需要用户理解按住控制。因此，用户也不会意外清除他们的选择，这显然是一件好事。它还将更清晰地显示您选择的选项。很好，因为您可以将相关选项分组在单个标题或其他图形指示下。这种方法将在没有 JS 的情况下工作，除了全选按钮外，可以使用 input type="reset" 完成全选按钮。

C) 我认为如果用户明确添加 到列表中，而不是选择 选项，这会很好。但正如你所说，没有 JS 它将无法运行。我会考虑 A 和 B 而不是这个。也无法搜索，除非您提供自定义过滤器框（这又取决于 JS）

【讨论】：

我想我会选择“B”并注意布局设计